@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;1,400&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap&subset=vietnamese');

@property --spot-size { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  --ink: #3b2030; --muted: #795c6b; --paper: #fff8fa; --panel: rgb(255 255 255 / .58);
  --pink: #df6f99; --pink-soft: #f5c8d9; --rose: #a93465; --accent: #8f2f59;
  --line: rgb(90 44 66 / .16); --shadow: 0 24px 80px rgb(112 43 73 / .14);
  --serif: 'Playfair Display', Georgia, serif; --sans: 'Be Vietnam Pro', system-ui, sans-serif;
  --mx: 50%; --my: 50%; --spot-size: 0px;
  color-scheme: light;
}

html[data-scene='sunset'] { --ink:#4a2530; --paper:#fff0e8; --panel:rgb(255 248 239 / .6); --pink:#e88675; --pink-soft:#fac4a9; --rose:#b54b56; --accent:#8c3442; }
html[data-scene='moon'] { --ink:#f8e9f1; --muted:#c8b5c8; --paper:#161422; --panel:rgb(50 42 65 / .65); --pink:#d99bc5; --pink-soft:#654c72; --rose:#efb4d2; --accent:#ffd4e8; --line:rgb(255 255 255 / .13); --shadow:0 24px 80px rgb(0 0 0 / .32); color-scheme:dark; }
html[data-scene='rain'] { --ink:#26383b; --muted:#587175; --paper:#edf6f4; --panel:rgb(255 255 255 / .58); --pink:#72a3a0; --pink-soft:#b9d8d2; --rose:#477c79; --accent:#315f5d; --line:rgb(36 77 75 / .14); }
html[data-character='emilia']{--ink:#f8f5ff;--muted:#c4bee8;--paper:#17162b;--panel:rgb(50 43 82/.68);--pink:#b7a9ff;--pink-soft:#4a4377;--rose:#d1c8ff;--accent:#b7a9ff;--line:rgb(224 218 255/.2);--shadow:0 24px 90px rgb(5 3 25/.45);color-scheme:dark}
html[data-character='rem']{--ink:#eef8ff;--muted:#a9c9e9;--paper:#061a35;--panel:rgb(15 52 89/.68);--pink:#62b7ff;--pink-soft:#174d7d;--rose:#88ceff;--accent:#62b7ff;--line:rgb(175 220 255/.2);--shadow:0 24px 90px rgb(0 8 30/.48);color-scheme:dark}
html[data-character='echidna']{--ink:#fff9ea;--muted:#cfc5ae;--paper:#111015;--panel:rgb(45 41 44/.72);--pink:#e0c27b;--pink-soft:#5a4d31;--rose:#f0d893;--accent:#e0c27b;--line:rgb(246 224 173/.2);--shadow:0 24px 90px rgb(0 0 0/.48);color-scheme:dark}
html[data-character='rem']{--mascot-image:url('assets/mini-rem.webp');--mascot-sprite:url('assets/sprite-rem.webp')}html[data-character='emilia']{--mascot-image:url('assets/mini-emilia.webp');--mascot-sprite:url('assets/sprite-emilia.webp')}html[data-character='echidna']{--mascot-image:url('assets/mini-echidna.webp');--mascot-sprite:url('assets/sprite-echidna.webp')}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);scroll-padding-top:6rem}
body{margin:0;min-width:320px;color:var(--ink);font-family:var(--sans);background:
  radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--pink-soft) 54%,transparent),transparent 30rem),
  radial-gradient(circle at 90% 30%,color-mix(in srgb,var(--pink) 18%,transparent),transparent 32rem),var(--paper);transition:background-color .6s,color .6s;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none} button,input,textarea{font:inherit} button{color:inherit} ::selection{background:var(--pink);color:white}
:where(a,button,input,textarea,[tabindex]):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.skip-link{position:fixed;top:1rem;left:1rem;z-index:100;translate:0 -200%;background:var(--ink);color:var(--paper);padding:.8rem 1rem;border-radius:999px}.skip-link:focus{translate:0}
.scroll-progress{position:fixed;z-index:60;inset:0 auto auto 0;width:100%;height:3px;background:var(--rose);transform-origin:left;scale:0 1}
#petal-canvas,.spotlight{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}.spotlight{z-index:1;background:radial-gradient(circle var(--spot-size) at var(--mx) var(--my),color-mix(in srgb,var(--pink) 22%,transparent),transparent 100%);transition:--spot-size .25s ease}.spotlight.is-on{--spot-size:220px}#petal-canvas{z-index:2}
.cursor{position:fixed;z-index:90;pointer-events:none;left:0;top:0;opacity:0;translate:-50% -50%;will-change:left,top}.cursor-dot{font-size:18px;line-height:1;color:var(--pink);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--pink) 65%,transparent));rotate:-18deg;transition:scale .16s ease,rotate .16s ease,color .35s}.cursor-dot.over-action{scale:1.35;rotate:8deg;color:var(--rose)}
.site-header{position:fixed;z-index:50;top:1rem;left:50%;translate:-50% 0;width:min(1180px,calc(100% - 2rem));height:64px;padding:.5rem .6rem .5rem 1rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--paper) 75%,transparent);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;box-shadow:0 8px 32px rgb(80 30 50 / .08)}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--serif);font-size:1.25rem}.brand-mark{display:grid;place-items:center;width:35px;aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:.9rem}.site-header nav{display:flex;gap:1.65rem;font-size:.82rem}.site-header nav a{position:relative}.site-header nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-.35rem;height:1px;background:var(--rose);transition:right .2s}.site-header nav a:hover::after,.site-header nav a:focus-visible::after{right:0}
.header-actions{display:flex;align-items:center;gap:.4rem}.icon-button,.pill-button,.ghost-button,.primary-button,.text-button,.command-trigger{border:0;cursor:pointer}.icon-button{display:grid;place-items:center;width:42px;aspect-ratio:1;border-radius:50%;background:transparent}.icon-button:hover{background:var(--pink-soft)}.pill-button{border-radius:999px;padding:.75rem 1rem;background:var(--ink);color:var(--paper)}
.world-switcher{display:flex;align-items:center;gap:.2rem;margin:0;padding:.22rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(14px)}.world-switcher label{display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:38px;padding:0 .62rem 0 .32rem;border-radius:999px;color:var(--muted);font-size:.72rem;cursor:pointer;transition:color .16s,background .16s,box-shadow .16s,transform .16s}.world-switcher label img{width:30px;height:30px;border-radius:50%;object-fit:contain;background:color-mix(in srgb,var(--pink-soft) 45%,transparent);filter:drop-shadow(0 3px 5px color-mix(in srgb,var(--pink) 28%,transparent))}.world-switcher label b{font-weight:700}.world-switcher input:checked+label{background:var(--ink);color:var(--paper);box-shadow:0 6px 18px color-mix(in srgb,var(--pink) 30%,transparent)}.world-switcher input:focus-visible+label{outline:3px solid color-mix(in srgb,var(--pink) 55%,transparent);outline-offset:2px}.world-switcher label:active{transform:scale(.95)}
@media(prefers-reduced-motion:no-preference){::view-transition-old(root){animation:none;z-index:1}::view-transition-new(root){z-index:2;animation:world-reveal .72s cubic-bezier(.2,.75,.2,1) both}@keyframes world-reveal{from{clip-path:circle(0 at var(--reveal-x,50%) var(--reveal-y,50%))}to{clip-path:circle(var(--reveal-radius,150vmax) at var(--reveal-x,50%) var(--reveal-y,50%))}}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.scene-grid button[aria-pressed='true']{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 0 24px color-mix(in srgb,var(--pink) 32%,transparent)}
main{position:relative;z-index:3}.hero{position:relative;min-height:100svh;padding:11rem max(1.5rem,calc((100vw - 1180px)/2)) 6rem;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.hero-kicker{display:flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.15em;font-size:.72rem}.live-dot{width:8px;aspect-ratio:1;border-radius:50%;background:var(--rose);box-shadow:0 0 0 6px color-mix(in srgb,var(--pink) 20%,transparent)}
.hero h1{font:clamp(4rem,8.5vw,8.8rem)/.9 var(--serif);letter-spacing:-.055em;max-width:890px;margin:1.6rem 0}.hero h1 span{color:var(--rose);font-style:italic}.hero-lead{font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.7;max-width:620px;color:var(--muted)}.hero-actions{display:flex;gap:.8rem;margin-top:1.5rem}.primary-button,.ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:1rem;min-height:52px;padding:0 1.25rem;border-radius:999px;transition:box-shadow .18s,scale .18s,background .18s}.primary-button{background:var(--ink);color:var(--paper)}.primary-button:hover{box-shadow:0 12px 30px color-mix(in srgb,var(--ink) 25%,transparent)}.ghost-button{border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(10px)}.primary-button:active,.ghost-button:active,.scene-grid button:active{scale:.97}
#live-clock{padding-left:.75rem;border-left:1px solid var(--line);font-variant-numeric:tabular-nums}
.hero-orbit{position:absolute;right:max(2rem,calc((100vw - 1180px)/2));top:52%;translate:0 -50%;width:330px;aspect-ratio:.78}.portrait-card{height:100%;padding:14px;border:1px solid rgb(255 255 255 / .55);border-radius:180px 180px 32px 32px;background:linear-gradient(145deg,color-mix(in srgb,var(--pink-soft) 75%,white),color-mix(in srgb,var(--pink) 25%,transparent));rotate:4deg;box-shadow:var(--shadow);position:relative}.portrait-placeholder{height:100%;display:grid;place-content:center;text-align:center;border:1px dashed color-mix(in srgb,var(--ink) 22%,transparent);border-radius:160px 160px 23px 23px;color:var(--muted)}.portrait-placeholder span{font-size:6rem;color:var(--rose)}.portrait-placeholder small{text-transform:uppercase;letter-spacing:.2em}.status-stamp{position:absolute;right:-28px;bottom:55px;width:100px;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--ink);color:var(--paper);font-size:.68rem;letter-spacing:.12em;rotate:8deg}.orbit-word{position:absolute;padding:.55rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);box-shadow:0 8px 24px rgb(60 20 40 / .08);font:italic 1rem var(--serif)}.orbit-one{top:4%;left:-18%}.orbit-two{top:38%;right:-26%}.orbit-three{bottom:5%;left:-22%}
.mood-picker{margin-top:2rem;display:grid;grid-template-columns:auto auto;align-items:center;gap:.65rem 1rem;width:max-content;max-width:100%;font-size:.78rem;color:var(--muted)}.moods{display:flex;gap:.35rem}.moods button{width:38px;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;background:var(--panel);cursor:pointer}.moods button[aria-pressed='true']{background:var(--pink-soft);border-color:var(--rose)}#mood-output{grid-column:1/-1}.scroll-cue{position:absolute;bottom:2rem;left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:.7rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em}.scroll-cue i{height:42px;width:1px;background:linear-gradient(var(--ink),transparent)}
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:.85rem 0;background:color-mix(in srgb,var(--pink-soft) 35%,transparent)}.marquee-track{display:flex;width:max-content;gap:2rem;white-space:nowrap;font:1rem var(--serif)}
.section{padding:8rem max(1.5rem,calc((100vw - 1180px)/2))}.section-label{font-size:.68rem;letter-spacing:.2em;color:var(--muted);margin-bottom:3.5rem}.section h2{font:clamp(2.8rem,5.5vw,5.8rem)/1 var(--serif);letter-spacing:-.04em;margin:0}.section h2 em{color:var(--rose);font-weight:400}.about-grid,.journey-head,.moments-head{display:grid;grid-template-columns:1.3fr .7fr;gap:4rem}.about-copy,.journey-head>p,.moments-head>p{font-size:1.05rem;line-height:1.8;color:var(--muted)}.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:5rem}.fact-card{min-height:250px;padding:1.5rem;border:1px solid var(--line);border-radius:24px;background:var(--panel);backdrop-filter:blur(14px);display:flex;flex-direction:column;justify-content:space-between;transform-style:preserve-3d}.fact-card>span{font:2rem var(--serif);color:var(--rose)}.fact-card strong{font:1.7rem/1.15 var(--serif)}.fact-card p{margin:0;color:var(--muted);font-size:.8rem}.quote-card{background:var(--ink);color:var(--paper)}.quote-card button{align-self:flex-start;border:0;background:none;color:inherit;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.journey-section{background:color-mix(in srgb,var(--pink-soft) 18%,transparent)}.timeline{margin-top:5rem;border-top:1px solid var(--line)}.timeline-item{display:grid;grid-template-columns:140px 30px 1fr;gap:1rem;padding:2.2rem 0;border-bottom:1px solid var(--line)}.timeline-item time{font-size:.68rem;letter-spacing:.14em;color:var(--muted)}.timeline-dot{width:12px;aspect-ratio:1;border-radius:50%;border:2px solid var(--rose);margin-top:.25rem}.timeline-dot.active{background:var(--rose);box-shadow:0 0 0 7px color-mix(in srgb,var(--pink) 18%,transparent)}.timeline-item h3{font:2rem var(--serif);margin:0 0 .7rem}.timeline-item p{max-width:650px;color:var(--muted);line-height:1.7}.timeline-item div span{font-size:.72rem;color:var(--rose);letter-spacing:.08em}
.skills-layout{display:grid;grid-template-columns:.7fr 1.3fr;align-items:center;gap:3rem}.skills-layout>div:first-child p{color:var(--muted);line-height:1.7;max-width:440px;margin:1.5rem 0}.constellation{position:relative;min-height:480px}.constellation svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.constellation path{fill:none;stroke:var(--line);stroke-width:1}.skill-star{position:absolute;display:grid;place-items:center;width:clamp(78px,8vw,112px);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;background:var(--panel);backdrop-filter:blur(12px);box-shadow:0 10px 28px rgb(90 30 60 / .08);cursor:pointer;transition:transform .25s,background .25s}.skill-star:hover,.skill-star:focus-visible{transform:scale(1.12) rotate(3deg);background:var(--pink-soft)}.skill-star small{max-width:80px;text-align:center}.skill-star::before{content:'✦';position:absolute;top:-8px;color:var(--rose)}
.moments-section{padding-right:0}.moments-head{padding-right:max(1.5rem,calc((100vw - 1180px)/2))}.moment-scroller{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:4rem max(1.5rem,calc((100vw - 1180px)/2)) 2rem 0;scrollbar-width:thin}.moment-card{flex:0 0 min(360px,82vw);scroll-snap-align:start;min-height:480px;border-radius:28px;padding:1.3rem;display:flex;flex-direction:column;border:1px solid var(--line)}.moment-card>span{font-size:.72rem}.moment-art{flex:1;display:grid;place-content:center;font-size:7rem;transition:transform .4s}.moment-card:hover .moment-art{transform:scale(1.08) rotate(-5deg)}.moment-card h3{font:2rem var(--serif);margin:.8rem 0 .2rem}.moment-card p{margin:0;font-size:.72rem;letter-spacing:.1em}.moment-pink{background:#f7cad9;color:#53263a}.moment-purple{background:#d8cee9;color:#403354}.moment-green{background:#cfe1d5;color:#294737}.moment-gold{background:#f4d6a4;color:#573e22}
.letter-section{display:grid;place-items:center}.letter-card{position:relative;width:min(900px,100%);padding:clamp(2rem,6vw,6rem);text-align:center;background:color-mix(in srgb,var(--panel) 85%,white);border:1px solid var(--line);box-shadow:var(--shadow);rotate:-1deg}.letter-card::before{content:'';position:absolute;inset:12px;border:1px solid var(--line);pointer-events:none}.letter-seal{position:absolute;top:-32px;left:50%;translate:-50%;display:grid;place-items:center;width:64px;aspect-ratio:1;background:var(--rose);color:white;border-radius:50%;box-shadow:0 8px 24px rgb(100 20 60 / .25)}.handwritten{font:italic 1.2rem var(--serif);color:var(--rose)}.letter-card h2{font-size:clamp(2rem,4vw,4rem);line-height:1.2}.signature{display:flex;justify-content:space-between;align-items:end;margin-top:4rem;border-top:1px solid var(--line);padding-top:1rem}.signature span{font:italic 1.4rem var(--serif)}
.connect-section{text-align:center;min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.connect-actions{display:flex;gap:.8rem;margin-top:2.5rem}.social-row{display:flex;gap:2rem;margin-top:4rem;font-size:.8rem}.social-row a{text-decoration:underline;text-underline-offset:5px}footer{position:relative;z-index:3;display:flex;justify-content:space-between;padding:1.5rem max(1.5rem,calc((100vw - 1180px)/2));border-top:1px solid var(--line);font-size:.72rem}footer button{border:0;background:none;cursor:pointer;color:inherit}
.command-trigger{position:fixed;z-index:45;bottom:1.2rem;left:50%;translate:-50%;display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(14px);box-shadow:0 10px 35px rgb(70 25 45 / .14);font-size:.72rem}.command-trigger kbd{padding:.2rem .35rem;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
dialog{width:min(760px,calc(100% - 2rem));max-height:calc(100svh - 2rem);border:1px solid var(--line);border-radius:28px;padding:0;background:var(--paper);color:var(--ink);box-shadow:var(--shadow);opacity:0;scale:.96;transition:opacity .2s,scale .2s,display .2s,overlay .2s;transition-behavior:allow-discrete}dialog[open]{opacity:1;scale:1}@starting-style{dialog[open]{opacity:0;scale:.96}}dialog::backdrop{background:rgb(30 15 25 / .45);backdrop-filter:blur(5px)}#profile-form{padding:2rem}.dialog-head{display:flex;justify-content:space-between;align-items:start}.dialog-head span{font-size:.66rem;letter-spacing:.16em;color:var(--rose)}.dialog-head h2{font:2.5rem var(--serif);margin:.5rem 0 1.5rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-grid label{display:grid;gap:.45rem;font-size:.75rem;color:var(--muted)}.form-grid .wide{grid-column:1/-1}.form-grid input,.form-grid textarea,.command-search input{width:100%;border:1px solid var(--line);border-radius:13px;padding:.85rem;background:var(--panel);color:var(--ink);resize:vertical}.dialog-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem}.text-button{background:none;text-decoration:underline}.command-dialog{width:min(560px,calc(100% - 2rem));top:12vh;margin-top:0}.command-dialog form{padding:1rem}.command-search{display:flex;align-items:center;gap:.7rem;border-bottom:1px solid var(--line);padding-bottom:1rem}.command-search input{border:0;font-size:1.1rem;outline:0}.command-list{display:grid;gap:.25rem;margin-top:.6rem}.command-list button{display:flex;justify-content:space-between;padding:.9rem;border:0;border-radius:12px;background:transparent;color:inherit;text-align:left}.command-list button:hover,.command-list button:focus{background:var(--pink-soft)}.command-list kbd{font-size:.65rem}.toast{position:fixed;z-index:100;bottom:5rem;left:50%;translate:-50% 20px;padding:.75rem 1rem;border-radius:999px;background:var(--ink);color:var(--paper);font-size:.78rem;opacity:0;pointer-events:none;transition:opacity .2s,translate .2s}.toast.show{opacity:1;translate:-50% 0}

@supports ((animation-timeline:scroll()) and (animation-range:0% 100%)){
  .scroll-progress{animation:grow-progress linear both;animation-timeline:scroll(root);animation-range:0% 100%}
  .reveal-section{animation:section-in linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
  @keyframes grow-progress{to{scale:1 1}}@keyframes section-in{from{opacity:.25;translate:0 50px}to{opacity:1;translate:0 0}}
}
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:marquee 28s linear infinite}.portrait-card{animation:float 6s ease-in-out infinite}.status-stamp{animation:spin-slow 18s linear infinite}.live-dot{animation:pulse 2s ease-in-out infinite}
  @keyframes marquee{to{translate:-50%}}@keyframes float{50%{translate:0 -12px;rotate:2deg}}@keyframes spin-slow{to{rotate:368deg}}@keyframes pulse{50%{box-shadow:0 0 0 11px transparent}}
}
.motion-paused *{animation-play-state:paused!important}.motion-paused .spotlight{display:none}
@media (prefers-reduced-motion:reduce){.spotlight{transition:none!important}.reveal-section{animation:none!important;opacity:1!important;translate:none!important}.cursor{display:none}.portrait-card,.status-stamp,.live-dot,.marquee-track{animation:none!important}}
@media (pointer:coarse),(hover:none){.cursor{display:none}.spotlight{display:none}.moment-card .moment-art{transform:none}}
@media (max-width:900px){.site-header nav{display:none}.hero{padding-top:9rem}.hero-orbit{opacity:.26;right:-120px;scale:.85}.hero h1{position:relative;z-index:2;max-width:720px}.hero-lead,.hero-actions,.mood-picker{position:relative;z-index:2}.facts-grid{grid-template-columns:1fr 1fr}.about-grid,.journey-head,.moments-head,.skills-layout{grid-template-columns:1fr;gap:2rem}.constellation{min-height:420px}.section{padding-block:6rem}}
@media (max-width:600px){.site-header{top:.6rem;width:calc(100% - 1rem);height:56px}.brand span:last-child,.header-actions .icon-button{display:none}.pill-button{padding:.65rem .85rem}.hero{padding-inline:1rem}.hero h1{font-size:3.7rem}.hero-actions,.connect-actions{align-items:stretch;flex-direction:column}.hero-orbit{right:-190px}.mood-picker{grid-template-columns:1fr}.mood-picker #mood-output{grid-column:1}.section{padding:5rem 1rem}.facts-grid{grid-template-columns:1fr}.fact-card{min-height:210px}.timeline-item{grid-template-columns:90px 20px 1fr}.timeline-item h3{font-size:1.5rem}.skills-layout{display:block}.constellation{margin-top:2rem;min-height:400px}.moments-section{padding-right:0}.moments-head{padding-right:1rem}.social-row{flex-wrap:wrap;justify-content:center}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.command-trigger span{display:none}.signature{gap:1rem;align-items:start;flex-direction:column}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.ai-orb{position:fixed;z-index:55;right:1.25rem;bottom:1.25rem;width:62px;aspect-ratio:1;border:1px solid rgb(255 255 255/.7);border-radius:50%;background:linear-gradient(145deg,var(--pink-soft),var(--pink));color:#fff;box-shadow:0 14px 40px color-mix(in srgb,var(--rose) 35%,transparent);cursor:pointer}.ai-orb span{font-size:1.25rem}.ai-orb i{position:absolute;right:3px;top:3px;width:13px;aspect-ratio:1;border:3px solid var(--paper);border-radius:50%;background:#65bf84}
.ai-panel{position:fixed;z-index:54;right:1.25rem;bottom:5.7rem;width:min(390px,calc(100vw - 1.5rem));height:min(610px,calc(100svh - 7.5rem));border:1px solid var(--line);border-radius:28px;background:color-mix(in srgb,var(--paper) 91%,transparent);backdrop-filter:blur(24px);box-shadow:0 28px 90px rgb(65 22 43/.24);overflow:hidden;display:flex;flex-direction:column;transform-origin:bottom right}.ai-panel[hidden]{display:none}.ai-panel>header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-bottom:1px solid var(--line)}.ai-panel>header>div:last-child{display:flex}.ai-identity{display:flex;align-items:center;gap:.65rem}.ai-avatar{display:grid;place-items:center;width:42px;aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--paper)}.ai-identity strong,.ai-identity small{display:block}.ai-identity small{margin-top:.15rem;font-size:.66rem;color:var(--muted)}.ai-status-dot{display:inline-block;width:7px;aspect-ratio:1;border-radius:50%;background:#65bf84;margin-right:.35rem}
.ai-messages{flex:1;overflow:auto;padding:1rem;scrollbar-width:thin}.ai-message{display:flex;align-items:flex-start;gap:.5rem;margin:.8rem 0}.ai-message>span{flex:0 0 27px;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:var(--pink-soft);font-size:.7rem}.ai-message p{margin:0;max-width:82%;padding:.75rem .85rem;border-radius:6px 18px 18px;background:var(--panel);line-height:1.55;font-size:.82rem;white-space:pre-wrap}.ai-message.user{justify-content:flex-end}.ai-message.user>span{display:none}.ai-message.user p{border-radius:18px 6px 18px 18px;background:var(--ink);color:var(--paper)}.ai-message.thinking p::after{content:' ···';letter-spacing:.12em}
.ai-suggestions{display:flex;gap:.4rem;overflow:auto;padding:.5rem 1rem;scrollbar-width:none}.ai-suggestions button{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:transparent;padding:.45rem .65rem;font-size:.68rem;cursor:pointer}.ai-compose{display:flex;align-items:end;gap:.5rem;margin:.4rem .8rem 0;padding:.55rem;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.ai-compose textarea{flex:1;max-height:100px;resize:none;border:0;outline:0;background:transparent;color:var(--ink);font-size:.82rem;padding:.45rem}.ai-compose button{width:38px;aspect-ratio:1;border:0;border-radius:50%;background:var(--ink);color:var(--paper);cursor:pointer}.ai-note{text-align:center;margin:.4rem 0 .65rem;font-size:.58rem;color:var(--muted)}
.fact-card,.moment-card,.skill-star,.scene-grid button,.moods button,.ai-suggestions button,.command-list button,.primary-button,.ghost-button,.icon-button,.pill-button,.ai-orb{transition:box-shadow .22s ease,transform .22s ease,background-color .22s ease,border-color .22s ease}
:where(.fact-card,.moment-card,.skill-star,.scene-grid button,.moods button,.ai-suggestions button,.command-list button,.primary-button,.ghost-button,.icon-button,.pill-button,.ai-orb):hover{border-color:color-mix(in srgb,var(--pink) 72%,white);box-shadow:0 0 0 1px color-mix(in srgb,var(--pink) 28%,transparent),0 0 24px color-mix(in srgb,var(--pink) 42%,transparent),0 15px 42px color-mix(in srgb,var(--rose) 18%,transparent)}
:where(.fact-card,.moment-card,.skill-star,.scene-grid button,.moods button,.ai-suggestions button,.command-list button,.primary-button,.ghost-button,.icon-button,.pill-button,.ai-orb):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--pink) 25%,transparent),0 0 26px color-mix(in srgb,var(--pink) 38%,transparent)}
@media (prefers-reduced-motion:no-preference){.ai-orb{animation:ai-breathe 3s ease-in-out infinite}.ai-panel:not([hidden]){animation:panel-in .35s linear(0,.7 25%,1.08 55%,1 80%) both}@keyframes ai-breathe{50%{box-shadow:0 14px 55px color-mix(in srgb,var(--rose) 55%,transparent);translate:0 -3px}}@keyframes panel-in{from{opacity:0;scale:.9;translate:0 18px}}}
@media (max-width:600px){.ai-orb{right:.75rem;bottom:.75rem}.ai-panel{right:.75rem;bottom:5rem;width:calc(100vw - 1.5rem);height:min(580px,calc(100svh - 6.5rem))}}
.lab-section{background:color-mix(in srgb,var(--pink-soft) 14%,transparent)}.lab-head{display:grid;grid-template-columns:1.2fr .8fr;gap:4rem;align-items:end}.lab-head p{color:var(--muted);line-height:1.8}.lab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:4rem}.lab-card{position:relative;min-height:380px;padding:1.6rem;border:1px solid var(--line);border-radius:28px;background:var(--panel);overflow:hidden}.lab-card>p:first-of-type{font-size:.68rem;letter-spacing:.16em;color:var(--rose)}.lab-card h3{font:clamp(1.8rem,3vw,2.6rem)/1.1 var(--serif);margin:.7rem 0 1.5rem;max-width:520px}.lab-icon{position:absolute;right:1.3rem;top:1rem;font:3rem var(--serif);color:var(--pink);opacity:.7}.lab-card form{display:grid;gap:.65rem}.lab-card label,.lab-card legend{font-size:.72rem;color:var(--muted)}.lab-card input,.lab-card textarea{width:100%;min-height:48px;padding:.8rem;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--paper) 72%,transparent);color:var(--ink);font-size:max(1rem,1em)}.lab-card textarea{min-height:90px;resize:vertical}.lab-card form button,.lab-action{min-height:48px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);padding:.75rem 1rem;cursor:pointer}.inline-form{display:flex;gap:.5rem}.inline-form input{flex:1}.inline-form button{flex:0 0 auto}.wish-garden{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}.wish-bloom{display:inline-flex;gap:.35rem;align-items:center;padding:.45rem .65rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:.72rem;animation:bloom-in .35s ease both}.wish-bloom button{border:0;background:none;cursor:pointer;color:var(--muted)}@keyframes bloom-in{from{opacity:0;scale:.7;translate:0 10px}}.future-result{margin-top:1rem;padding:1rem;border-radius:16px;background:color-mix(in srgb,var(--pink-soft) 34%,transparent);font-size:.82rem;line-height:1.6}.score-preview{display:flex;align-items:end;gap:.8rem;margin:2rem 0}.score-preview strong{font:5rem/.8 var(--serif);color:var(--rose)}.score-preview span{font-size:.75rem;color:var(--muted)}.secret-hint{color:var(--muted);font-size:.82rem;line-height:1.6}.portrait-maker fieldset{border:0;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.5rem}.portrait-maker legend{width:100%;margin-bottom:.5rem}.portrait-maker label{padding:.55rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer}.portrait-maker input{width:auto;min-height:0;accent-color:var(--rose)}#soul-result{display:block;margin-top:1rem;font:1.25rem/1.5 var(--serif);color:var(--rose)}.diary-moods{display:flex;flex-wrap:wrap;gap:.4rem}.diary-moods button{min-height:44px;padding:.5rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer}.diary-chart{display:flex;align-items:end;gap:.55rem;height:120px;margin-top:2rem;border-bottom:1px solid var(--line)}.diary-bar{flex:1;min-width:24px;height:calc(var(--mood)*18%);border-radius:10px 10px 0 0;background:linear-gradient(var(--pink),var(--pink-soft));position:relative}.diary-bar span{position:absolute;bottom:-1.5rem;left:50%;translate:-50%;font-size:.58rem;color:var(--muted)}
.game-shell{padding:1.5rem}.game-shell>header{display:flex;justify-content:space-between}.game-shell header span,.secret-dialog .dialog-head span{font-size:.65rem;letter-spacing:.15em;color:var(--rose)}.game-shell h2{font:2.3rem var(--serif);margin:.3rem 0 1rem}.game-hud{display:flex;justify-content:space-between;padding:.7rem 0;font-size:.78rem}.game-field{position:relative;height:340px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(var(--paper),color-mix(in srgb,var(--pink-soft) 45%,var(--paper)))}.game-field>p{position:absolute;inset:45% 1rem auto;text-align:center;color:var(--muted);font-size:.78rem}.game-petal{position:absolute;width:42px;aspect-ratio:1;border:0;background:transparent;font-size:1.8rem;cursor:pointer;filter:drop-shadow(0 4px 8px rgb(180 70 120/.25))}.game-shell>.primary-button{margin-top:1rem}.secret-dialog form{padding:2rem}.secret-sequence{display:flex;gap:.7rem;margin:1rem 0}.secret-sequence button{width:64px;aspect-ratio:1;border:1px solid var(--line);border-radius:20px;background:var(--panel);font-size:1.7rem;cursor:pointer}.secret-dialog output{display:block;min-height:2rem;margin-bottom:1rem}.secret-reward{text-align:center;margin-top:1.5rem;padding:1.5rem;border-radius:22px;background:color-mix(in srgb,var(--pink-soft) 35%,transparent)}.secret-reward>span{font-size:2.5rem;color:var(--rose)}.secret-reward h3{font:2rem var(--serif);margin:.5rem}.secret-reward p{color:var(--muted);line-height:1.7}
@media(max-width:800px){.lab-head,.lab-grid{grid-template-columns:1fr}.lab-head{gap:1rem}.lab-card{min-height:auto}.inline-form{flex-direction:column}}
.world-backdrop{display:none}
body::after{content:'';position:fixed;z-index:0;inset:0;pointer-events:none;background-position:right center;background-repeat:no-repeat;background-size:min(56vw,820px) auto;opacity:.22;mask-image:linear-gradient(90deg,transparent 25%,black 72%);transition:opacity .65s,background-image .65s}
html[data-character='rem'] body{background:radial-gradient(circle at 78% 22%,rgb(39 139 225/.3),transparent 27rem),radial-gradient(circle at 18% 78%,rgb(12 83 145/.34),transparent 34rem),linear-gradient(145deg,#07111f,#071e38 48%,#031224)}
html[data-character='rem'] body::after{background-image:linear-gradient(90deg,transparent 5%,rgb(2 14 30/.08)),url('assets/rem.webp');opacity:.27}
html[data-character='emilia'] body{background:radial-gradient(circle at 75% 15%,rgb(147 128 255/.34),transparent 28rem),radial-gradient(circle at 15% 75%,rgb(83 64 160/.32),transparent 36rem),linear-gradient(145deg,#111020,#231e48 52%,#12152d)}
html[data-character='emilia'] body::after{background-image:linear-gradient(90deg,transparent 5%,rgb(15 11 35/.08)),url('assets/emilia.webp');opacity:.25}
html[data-character='echidna'] body{background:radial-gradient(circle at 78% 18%,rgb(227 195 121/.23),transparent 28rem),radial-gradient(circle at 18% 75%,rgb(94 70 32/.2),transparent 36rem),linear-gradient(145deg,#08080b,#1c1919 52%,#0b0a0e)}
html[data-character='echidna'] body::after{background-image:linear-gradient(90deg,transparent 5%,rgb(8 7 9/.12)),url('assets/echidna.webp');opacity:.24}
html[data-character] .site-header{background:color-mix(in srgb,var(--paper) 72%,transparent);border-color:var(--line)}
html[data-character] .journey-section,html[data-character] .lab-section{background:color-mix(in srgb,var(--pink-soft) 12%,transparent)}
html[data-character] .marquee{background:color-mix(in srgb,var(--pink-soft) 20%,transparent)}
.ai-orb{width:104px!important;height:138px!important;aspect-ratio:auto!important;border:0!important;border-radius:26px!important;background:transparent!important;box-shadow:none!important;overflow:visible}.ai-orb>img{display:none}.ai-orb::before{content:'';position:absolute;inset:0;background-image:var(--mascot-sprite);background-size:400% 100%;background-position:0 0;background-repeat:no-repeat;filter:drop-shadow(0 12px 18px color-mix(in srgb,var(--pink) 38%,transparent))}.ai-orb>span:first-of-type:not(.ai-greeting){display:none}.ai-orb>i{right:9px!important;top:9px!important}.ai-greeting{position:absolute;z-index:2;right:82%;top:15px;min-width:max-content;padding:.55rem .75rem;border:1px solid var(--line);border-radius:16px 16px 4px;background:var(--paper);color:var(--ink);font-size:.72rem;box-shadow:var(--shadow);opacity:0;translate:10px 8px;transition:opacity .2s,translate .2s}.ai-greeting.show{opacity:1;translate:0 0}
@media(prefers-reduced-motion:no-preference){.ai-orb.action::before{animation:mascot-frames 1.25s steps(1,end) both}@keyframes mascot-frames{0%,16%{background-position:0 0}17%,39%{background-position:33.333% 0}40%,64%{background-position:66.666% 0}65%,84%{background-position:100% 0}85%,100%{background-position:0 0}}}
@media(max-width:700px){body::after{background-size:auto 80vh;background-position:75% 12%;opacity:.12!important;mask-image:linear-gradient(180deg,black,transparent 70%)}.ai-orb{width:86px!important;height:114px!important}}
@media(max-width:600px){.world-switcher label{min-width:38px;padding:0 .45rem}.world-switcher label b{display:none}}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,23rem);grid-template-rows:auto;column-gap:clamp(2rem,5vw,7rem);align-content:center;overflow:clip}.hero>:where(.hero-kicker,h1,.hero-lead,.hero-actions,.mood-picker){grid-column:1;min-inline-size:0}.hero h1{font-size:clamp(3.5rem,2rem + 3.2vw,6.5rem);line-height:.94;max-inline-size:12ch;text-wrap:balance;overflow-wrap:break-word}.hero-lead{max-inline-size:58ch;text-wrap:pretty}.hero-orbit{position:relative;grid-column:2;grid-row:1/6;align-self:center;justify-self:center;inset:auto;translate:none;inline-size:min(100%,22rem)}
@media(max-width:1000px){.hero{display:flex;min-block-size:auto;padding-block:9rem 5rem;overflow:clip}.hero h1{font-size:clamp(3rem,1.8rem + 5.5vw,5.5rem);max-inline-size:13ch}.hero-orbit{position:relative;inset:auto;translate:none;right:auto!important;opacity:1!important;scale:1!important;align-self:center;inline-size:min(78vw,21rem);margin-block-start:3rem}.scroll-cue{display:none}}
@media(max-width:600px){.hero h1{font-size:clamp(2.85rem,1.8rem + 7vw,4rem);line-height:.98;max-inline-size:100%}.hero-lead{font-size:1rem}.hero-orbit{inline-size:min(86vw,19rem)}}
.portrait-placeholder{display:block!important;place-content:unset!important;overflow:hidden;border-style:solid!important;background:var(--pink-soft)}.portrait-placeholder img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s,scale .6s}.portrait-placeholder img.switching{opacity:0;scale:1.06}
.character-picker{position:relative;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:1.25rem}.character-picker>span{margin-right:.35rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.character-picker button{min-height:38px;padding:.45rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);cursor:pointer}.character-picker button[aria-pressed='true']{background:var(--ink);color:var(--paper);box-shadow:0 0 24px color-mix(in srgb,var(--pink) 38%,transparent)}
.ai-avatar{overflow:hidden;background:var(--pink-soft)!important}.ai-avatar img{width:100%;height:100%;object-fit:contain}.ai-message.assistant>span{font-size:0;background:var(--pink-soft) var(--mascot-image) center/contain no-repeat}
.mini-player{margin:.7rem 1rem 0;padding:.75rem;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 88%,transparent);display:grid;grid-template-columns:1fr auto;align-items:center;gap:.55rem}.mini-player[hidden]{display:none}.mini-player span{display:block;font-size:.58rem;letter-spacing:.12em;color:var(--muted)}.mini-player strong{display:block;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}.mini-player>button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink)}.mini-player audio{grid-column:1/-1;width:100%;height:36px;accent-color:var(--pink)}