:root{
	--ink:#3a3450;
	--ink-soft:rgba(58,52,80,.7);
	--coral:#ff8d70;
	--coral-deep:#f0765a;
	--coral-ink:#bd4a2c;
	--dusk:#6a79b8;
	--dusk-deep:#57659f;
	--card:#fff6ec;
	--card-shadow:0 14px 42px rgba(93,74,110,.22);
	--font-display:'Fredoka','Quicksand',sans-serif;
	--font-body:'Quicksand','Trebuchet MS',sans-serif;
}

@view-transition{navigation:auto}
.no-reveal-anim .reveal{opacity:1!important;animation:none!important}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{
	min-height:100vh;
	font-family:var(--font-body);
	font-weight:500;
	font-size:16px;
	line-height:1.6;
	color:var(--ink);
	background:linear-gradient(180deg,#5d6b9e 0%,#84739f 34%,#c67e99 66%,#e69a78 100%);
	background-attachment:fixed;
}
::selection{background:var(--coral);color:#fff6ec}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:14px}

.sky{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;overflow:clip;pointer-events:none;transform:translateZ(0)}
.sun{
	position:absolute;left:50%;bottom:0;
	width:clamp(170px,26vw,300px);aspect-ratio:1;
	translate:-50% 52%;border-radius:50%;
	background:radial-gradient(circle at 50% 34%,#ffe4b4,#ffc48d 46%,#ff9f6d 74%,#f28556);
	box-shadow:0 0 46px 16px rgba(255,170,110,.32);
}
.sun::after{
	content:"";position:absolute;inset:-45%;border-radius:50%;
	background:radial-gradient(circle,rgba(255,182,120,.5),transparent 62%);
	will-change:transform,opacity;
	animation:sunglow 9s ease-in-out infinite;
}
@keyframes sunglow{
	0%,100%{opacity:.55;transform:scale(1)}
	50%{opacity:.95;transform:scale(1.16)}
}

.star{
	position:absolute;width:2px;height:2px;border-radius:50%;
	background:#f4ecff;opacity:.9;
	animation:twinkle 4s ease-in-out infinite;
}
.star:nth-child(odd){animation-duration:5.5s}
.s1{top:6%;left:12%}
.s2{top:11%;left:31%;animation-delay:-1.4s}
.s3{top:5%;left:52%;animation-delay:-2.8s}
.s4{top:14%;left:68%;animation-delay:-.7s}
.s5{top:8%;left:84%;animation-delay:-3.6s}
.s6{top:19%;left:22%;animation-delay:-2.1s}
.s7{top:17%;left:91%;animation-delay:-4.4s}
.s8{top:22%;left:47%;animation-delay:-1s}
@keyframes twinkle{
	0%,100%{opacity:.25;scale:.8}
	50%{opacity:.95;scale:1.25}
}

.cloud{position:absolute;left:0;animation:drift linear infinite;will-change:transform}
.puff{
	position:relative;width:22em;height:6.5em;border-radius:999em;
	background:#ecdce8;
	animation:bob 10s ease-in-out infinite;will-change:transform;
}
.puff::before,.puff::after{
	content:"";position:absolute;border-radius:50%;
	background:#ecdce8;
}
.puff::before{width:9em;height:9em;left:3.2em;top:-4.6em}
.puff::after{width:6em;height:6em;right:3.6em;top:-2.9em}
.c1{top:9%;font-size:13px;opacity:.72;animation-duration:100s;animation-delay:0s}
.c2{top:41%;font-size:14px;opacity:.66;animation-duration:100s;animation-delay:-33.3s}
.c3{top:68%;font-size:12px;opacity:.7;animation-duration:100s;animation-delay:-66.6s}
.c4{top:20%;font-size:8px;opacity:.44;filter:blur(1px);animation-duration:165s;animation-delay:0s}
.c5{top:53%;font-size:7px;opacity:.4;filter:blur(1.4px);animation-duration:165s;animation-delay:-55s}
.c6{top:80%;font-size:9px;opacity:.48;filter:blur(.8px);animation-duration:165s;animation-delay:-110s}
@keyframes drift{from{translate:-32em 0}to{translate:calc(100vw + 12em) 0}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -1.3em}}

.moon{
	position:absolute;top:13%;right:15%;
	width:clamp(46px,6vw,72px);aspect-ratio:1;border-radius:50%;
	background:radial-gradient(circle at 38% 34%,#fdf5e6,#efe2c9 68%,#dccbac);
	box-shadow:0 0 38px 6px rgba(250,240,220,.32),inset -7px -5px 0 rgba(200,185,155,.35);
	animation:moonfloat 14s ease-in-out infinite;will-change:transform;
}
@keyframes moonfloat{0%,100%{translate:0 0}50%{translate:0 -8px}}

.skyfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.page{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,48px) clamp(1.4rem,4vh,3rem);min-height:100vh;display:flex;flex-direction:column}
.page.wide{max-width:1240px}
main{flex:1;display:flex;flex-direction:column}
main.center{justify-content:center}

.nav{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;padding:clamp(14px,3vw,26px) 0 clamp(10px,1.6vw,15px)}
.nav.sticky{position:sticky;top:clamp(8px,1.5vw,14px);z-index:50}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;background:rgba(255,246,236,.4);padding:6px;border-radius:26px;box-shadow:0 6px 24px rgba(58,52,80,.18);transition:scale .3s ease,background .3s ease,box-shadow .3s ease,translate .25s ease}
.links a{font-weight:600;font-size:.88rem;color:#463f60;padding:.5em 1.05em;border-radius:999px;transition:background .25s,color .25s}
.links a:hover{background:var(--card);color:var(--ink)}
.links:hover{translate:0 -2px}
.links a.active{background:var(--coral);color:#fff6ec;box-shadow:0 5px 16px rgba(240,118,90,.45)}
.links a.active:hover{background:var(--coral-deep)}
.nav.sticky.stuck .links{scale:1.05;background:rgba(255,246,236,.74);box-shadow:0 12px 30px rgba(58,52,80,.3)}

.cta{
	display:inline-flex;align-items:center;gap:.55em;
	font-family:var(--font-display);font-weight:600;font-size:1rem;
	padding:.85em 1.5em;border-radius:26px 34px 28px 36px;
	box-shadow:0 10px 32px rgba(58,52,80,.28);
	transition:translate .3s,box-shadow .3s,background .3s;
}
.cta:hover{translate:0 -4px;box-shadow:0 16px 40px rgba(58,52,80,.34)}
.cta .arrow{display:inline-block;transition:translate .3s}
.cta:hover .arrow{translate:3px -2px}
.cta-coral{background:var(--coral);color:#fff6ec}
.cta-coral:hover{background:var(--coral-deep)}
.cta-cream{background:var(--card);color:var(--ink)}
.cta-cream:hover{background:#fffdf7}

.lightcard{background:var(--card);color:var(--ink);box-shadow:var(--card-shadow)}

.note{margin-top:clamp(1.2rem,3vh,2.2rem)}
.note-wrap{position:relative;max-width:520px;margin:0 auto;padding-top:11px}
.note-pin{
	position:absolute;top:0;left:50%;translate:-50% 0;z-index:2;
	width:20px;height:20px;border-radius:50%;
	background:radial-gradient(circle at 35% 30%,#ff9d8a,var(--coral) 60%,#b64a34);
	box-shadow:0 4px 9px rgba(0,0,0,.28);
}
.note-paper{
	position:relative;text-align:center;background:#fffdf6;
	padding:clamp(2.2rem,5.5vw,3rem) clamp(1.9rem,5.5vw,3rem);
	transform:rotate(-1.2deg);transform-origin:50% 6px;
	clip-path:var(--torn,none);
	filter:drop-shadow(0 15px 28px rgba(93,74,110,.26));
	transition:transform .5s cubic-bezier(.34,1.3,.5,1);
}
.note-wrap:hover .note-paper{transform:rotate(1.4deg)}
.note-stamp{
	display:inline-block;font-family:var(--font-display);font-weight:700;
	font-size:clamp(1.1rem,2.8vw,1.35rem);color:var(--coral);
	border:2.5px solid var(--coral);border-radius:9px;padding:2px 16px;
	rotate:-5deg;opacity:.9;margin-bottom:1rem;
}
.note-paper p{font-weight:600;font-size:clamp(.98rem,2.4vw,1.1rem);margin-top:.5em;color:var(--ink)}
.thief{color:var(--dusk-deep);font-style:italic}
.stay{font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,3.4vw,1.6rem);color:var(--coral);margin-top:.7em}

.toast{
	position:fixed;right:16px;bottom:16px;z-index:80;
	background:var(--card);color:var(--ink);
	border:1px solid rgba(240,118,90,.3);
	font-weight:600;
	padding:.7em 1.05em;border-radius:14px 20px 14px 20px;
	box-shadow:0 10px 30px rgba(58,52,80,.32);
	opacity:0;transform:translateY(8px);
	transition:opacity .2s ease,transform .2s ease;
}
.toast.show{opacity:1;transform:translateY(0)}

@media (pointer:fine){
	html.custom-cursor,
	html.custom-cursor body,
	html.custom-cursor a,
	html.custom-cursor button,
	html.custom-cursor label{cursor:none}
	html.custom-cursor select,
	html.custom-cursor input{cursor:auto}
}
.goo-cursor{
	position:fixed;inset:0;z-index:999;pointer-events:none;
	filter:drop-shadow(0 0 14px rgba(255,170,120,.4));
}
.goo-cursor.dim{opacity:0}
.chev-wrap{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;will-change:transform}
.chev-inner{
	transform:translate(-50%,-50%) scale(1);transform-origin:center;opacity:0;
	filter:drop-shadow(0 0 1.2px rgba(40,32,58,.95)) drop-shadow(0 0 1px rgba(40,32,58,.85)) drop-shadow(0 2px 4px rgba(58,52,80,.4));
	will-change:transform,opacity;
}
@media (pointer:coarse){
	.goo-cursor{display:none}
	.chev-wrap{display:none}
}

.reveal{opacity:1}
.js .reveal{opacity:0}
.js .reveal.in{opacity:1;animation:rise .9s cubic-bezier(.23,.9,.32,1) var(--d,0s) backwards}
@keyframes rise{
	from{opacity:0;translate:0 34px}
	to{opacity:1;translate:0 0}
}

@media (max-width:720px){
	.nav{justify-content:center}
	.sun{translate:-50% 58%}
}
@media (max-width:420px){
	.links a{font-size:.82rem;padding:.45em .8em}
	.cta{font-size:.94rem;padding:.8em 1.3em}
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none !important;transition:none !important}
	.reveal,.js .reveal{opacity:1}
	html{scroll-behavior:auto}
}

:root[data-lang="ru"],:root[data-lang="ja"]{
	--font-display:'M PLUS Rounded 1c','Fredoka','Quicksand',sans-serif;
	--font-body:'M PLUS Rounded 1c','Quicksand',sans-serif;
}
:root[data-lang="ru"] h1,:root[data-lang="ja"] h1,
:root[data-lang="ru"] h2,:root[data-lang="ja"] h2,
:root[data-lang="ru"] .cta,:root[data-lang="ja"] .cta,
:root[data-lang="ru"] .note-stamp,:root[data-lang="ja"] .note-stamp,
:root[data-lang="ru"] .stay,:root[data-lang="ja"] .stay,
:root[data-lang="ru"] .lang-h,:root[data-lang="ja"] .lang-h{font-weight:800}
:root[data-lang="ja"] .note-stamp{scale:1.43;translate:0 -4px}

.lang-switch{position:relative;display:flex;align-items:center;margin-left:8px}
.lang-btn{
	display:inline-flex;align-items:center;gap:7px;
	font-family:var(--font-body);font-weight:600;font-size:.86rem;color:#463f60;
	background:rgba(255,246,236,.55);padding:.42em .74em;border:none;border-radius:999px;
	box-shadow:0 6px 18px rgba(58,52,80,.16);
	transition:background .25s,translate .25s,box-shadow .25s;
}
.lang-btn:hover{background:var(--card);translate:0 -2px;box-shadow:0 10px 24px rgba(58,52,80,.24)}
.lang-code{letter-spacing:.04em}
.lang-flag{width:24px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 1px 3px rgba(58,52,80,.28);flex:none}
.lang-menu{
	position:absolute;top:calc(100% + 8px);right:0;z-index:60;
	display:flex;flex-direction:column;gap:2px;min-width:172px;
	background:var(--card);padding:7px;border-radius:16px;
	box-shadow:0 16px 40px rgba(58,52,80,.32);
	opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;
	transition:opacity .2s ease,transform .2s ease;
}
.lang-switch.open .lang-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.lang-menu-opt{
	display:flex;align-items:center;gap:10px;width:100%;text-align:left;
	font-family:var(--font-body);font-weight:600;font-size:.92rem;color:var(--ink);
	background:transparent;border:none;padding:.5em .7em;border-radius:11px;
	transition:background .18s,color .18s;
}
.lang-menu-opt:hover{background:rgba(240,118,90,.14)}
.lang-menu-opt.sel{background:var(--coral);color:#fff6ec}

.lang-modal{
	position:fixed;inset:0;z-index:700;
	display:flex;align-items:center;justify-content:center;padding:24px;
	background:rgba(58,52,80,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
	opacity:0;transition:opacity .32s ease;
}
.lang-modal.in{opacity:1}
.lang-card{
	background:var(--card);color:var(--ink);text-align:center;
	padding:clamp(1.8rem,4vw,2.6rem) clamp(1.6rem,4vw,2.4rem);
	border-radius:26px 30px 24px 32px;box-shadow:var(--card-shadow);
	max-width:440px;width:100%;
	transform:translateY(14px) scale(.96);transition:transform .38s cubic-bezier(.34,1.3,.5,1);
}
.lang-modal.in .lang-card{transform:none}
.lang-h{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,4vw,1.8rem);color:var(--coral-deep)}
.lang-sub{font-weight:600;font-size:.92rem;color:var(--ink-soft);margin-top:.35em}
.lang-grid{display:flex;flex-direction:column;gap:9px;margin-top:1.5rem}
.lang-opt{
	display:flex;align-items:center;gap:13px;width:100%;text-align:left;
	font-family:var(--font-body);font-weight:600;font-size:1.02rem;color:var(--ink);
	background:#fffdf7;border:2px solid transparent;padding:.72em .95em;border-radius:15px;
	box-shadow:0 4px 14px rgba(58,52,80,.1);
	transition:translate .2s,box-shadow .2s,border-color .2s,background .2s;
}
.lang-opt:hover{translate:0 -2px;box-shadow:0 10px 24px rgba(58,52,80,.2);border-color:rgba(240,118,90,.4)}
.lang-opt.sel{border-color:var(--coral);background:#fff}
.lang-opt .lang-flag{width:32px;height:22px;border-radius:4px}
.lang-opt .lang-name{flex:1}