:root{color-scheme:dark;--bg:#101114;--fg:#f3f3ef;--muted:#a8a9ae;--line:#ffffff26;--pink:#f3b7ca;--blue:#a6d7f2;font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--fg);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:1.5rem}body{margin:0;min-width:0}h1,h2,h3,p,figure,dl,dd{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;width:100%;height:auto}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:6px}[hidden]{display:none!important}.shell{width:min(1280px,calc(100% - 96px));margin-inline:auto}.skip{position:absolute;top:0;left:1rem;transform:translateY(-120%);z-index:10;background:var(--fg);color:var(--bg);padding:1rem}.skip:focus{transform:none}.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:102px;border-bottom:1px solid var(--line)}.logo{display:flex;gap:12px;align-items:center;font-weight:700;font-size:1.1rem;letter-spacing:.02em}.logo svg{width:32px;height:36px}.logo small{display:block;font-size:.5rem;letter-spacing:.2em;font-weight:400;margin-top:5px}.nav nav{display:flex;gap:36px;font-size:.68rem;letter-spacing:.15em}.nav nav a,.back{padding-block:12px}.back{font-size:.7rem;display:flex;gap:24px}.hero-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:4rem;padding-block:50px 38px}.eyebrow{font-size:.63rem;font-weight:500;letter-spacing:.16em;line-height:1.8}.signal{width:6px;height:6px;display:inline-block;background:var(--pink);margin-right:9px}.hero h1{font-size:clamp(2.7rem,4.5vw,4.6rem);line-height:1.32;letter-spacing:.065em;font-weight:600;margin-top:20px}.hero-side{font-size:.85rem;line-height:2.1;padding-bottom:7px;max-width:32rem}.hero-side p{color:#c5c5ca}.line-link{display:flex;align-items:center;justify-content:space-between;gap:2rem;width:fit-content;border-bottom:1px solid #ffffff60;padding-block:14px;font-size:.75rem;line-height:1.7}.hero-side .line-link{margin-top:16px;width:100%}.keyvisual{position:relative;margin:0 22px;isolation:isolate;background:#ddd;aspect-ratio:2.1;min-height:400px}.keyvisual picture,.keyvisual img{width:100%;height:100%;position:absolute;inset:0}.keyvisual img{object-fit:cover;object-position:50% 31%}.keyvisual:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,transparent 40%,#10111408 55%,#101114d9 100%)}.keyvisual figcaption{position:absolute;z-index:1;bottom:30px;left:32px;right:32px;text-align:center;text-shadow:0 2px 25px #0003}.keyvisual figcaption>span:first-child{font-size:.61rem;letter-spacing:.22em}.keyvisual i{color:var(--pink);font-style:normal;padding:0 18px}.keyvisual strong{display:block;font-family:Arial,sans-serif;font-size:clamp(4rem,12.1vw,12rem);font-weight:900;line-height:1.04;letter-spacing:-.075em;margin-top:6px;white-space:nowrap}.caption-bottom{display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.18em;margin-top:12px}.visual-corners{position:absolute;inset:15px;z-index:1;border:1px solid #fff7;pointer-events:none;clip-path:polygon(0 0,20px 0,20px 1px,1px 1px,1px 20px,0 20px,0 0,100% 0,100% 20px,calc(100% - 1px) 20px,calc(100% - 1px) 1px,calc(100% - 20px) 1px,calc(100% - 20px) 0,100% 0,100% 100%,calc(100% - 20px) 100%,calc(100% - 20px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 20px),100% calc(100% - 20px),100% 100%,0 100%,0 calc(100% - 20px),1px calc(100% - 20px),1px calc(100% - 1px),20px calc(100% - 1px),20px 100%,0 100%)}.hero-foot{display:flex;justify-content:space-between;gap:20px;padding-block:19px;color:var(--muted);font-size:.65rem;line-height:1.7}.hero-foot a{letter-spacing:.12em;color:var(--fg)}.hero-foot a span{margin-left:25px}.section{padding-block:108px}.section-label{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:18px;font-size:.6rem;letter-spacing:.18em;color:var(--muted);line-height:1.7}.world-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;margin-top:60px}h2{font-size:clamp(1.6rem,2.6vw,2.65rem);line-height:1.6;letter-spacing:.04em;font-weight:500}.intro{font-size:1.08rem;line-height:2.2;margin-bottom:28px}.muted{color:var(--muted);font-size:.81rem;line-height:2.2}.world-notes{display:flex;justify-content:space-between;margin-top:64px;gap:24px;font-size:.6rem;letter-spacing:.18em}.world-notes span:before{content:"";display:inline-block;width:30px;height:1px;background:var(--pink);vertical-align:middle;margin-right:14px}.world-notes span:nth-child(2):before{background:var(--fg)}.world-notes span:nth-child(3):before{background:var(--blue)}.characters{background:#181a1e}.section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-block:38px 48px}.section-title>p{font-size:.75rem;color:var(--muted);line-height:2}.character-switch{display:grid;grid-template-columns:1fr 1fr;margin-bottom:40px;border:1px solid var(--line)}.character-switch button{display:flex;align-items:center;gap:24px;text-align:left;padding:24px 28px;border:0;background:transparent;transition:background .25s,color .25s;min-width:0}.character-switch button+button{border-left:1px solid var(--line)}.character-switch button[aria-pressed=true]{background:var(--pink);color:#282028}.character-switch button[data-character=mio][aria-pressed=true]{background:var(--blue);color:#192932}.choice-number{font-size:.65rem;align-self:flex-start;padding-top:3px}.character-switch button>span:nth-child(2){font-size:1rem;letter-spacing:.06em}.character-switch small{display:block;font-size:.53rem;letter-spacing:.15em;margin-top:8px}.character-switch svg{width:26px;height:26px;margin-left:auto;flex-shrink:0}.character-panel{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:center}.character-panel+.character-panel{margin-top:60px}.character-panel[hidden]+.character-panel{margin-top:0}.portrait{height:640px;position:relative;background:#eee;overflow:clip}.portrait img{height:100%;width:100%;object-fit:cover;object-position:37% 50%}.mio .portrait img{object-position:64% 20%;transform:scale(1.06)}.portrait-tag{position:absolute;bottom:22px;left:22px;color:#16171b;border:1px solid #3335;background:#fffd;padding:10px 16px;font-size:.58rem;letter-spacing:.2em}.character-copy{--accent:var(--pink);padding-block:24px}.mio .character-copy{--accent:var(--blue)}.accent{color:var(--accent)}.character-copy h3{font-size:3.5rem;font-weight:500;letter-spacing:.13em;line-height:1.5;margin-top:18px}.character-copy h3 span{display:inline-block;margin-left:12px}.roman{font-size:.58rem;letter-spacing:.2em;color:var(--muted);margin-top:10px}.character-line{font-size:1.3rem;line-height:1.9;letter-spacing:.06em;margin-block:34px 22px}.character-copy dl{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:24px;margin-top:28px;border-top:1px solid var(--line)}dt{color:var(--muted);font-size:.54rem;letter-spacing:.15em}dd{font-size:.69rem;line-height:1.8;margin-top:9px}.character-copy .line-link{margin-top:22px;width:100%}.art-full img{background:#eee}.art-full figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:20px;font-size:.6rem;letter-spacing:.12em;line-height:1.8;border-bottom:1px solid var(--line)}.art-full figcaption a{font-size:.7rem;letter-spacing:0}.art-note{font-size:.65rem;color:var(--muted);margin-top:16px;line-height:1.8}.closing{text-align:center;border-top:1px solid var(--line);padding-block:100px 115px}.closing>.eyebrow{color:var(--pink)}.closing h2{font-size:clamp(1.8rem,3.5vw,3.5rem);margin-block:28px}.closing>p:not(.eyebrow){font-size:.8rem;line-height:2.1;color:var(--muted)}.cta{display:flex;align-items:center;justify-content:space-between;gap:40px;width:fit-content;max-width:100%;margin:36px auto 12px;background:var(--fg);color:#141518;padding:22px 30px;font-size:.78rem;line-height:1.8}.closing>.line-link{margin-inline:auto}.footer{border-top:1px solid var(--line);display:grid;grid-template-columns:.65fr 2fr .7fr;gap:30px;align-items:center;padding-block:35px 40px}.footer-logo{font-size:1.2rem;letter-spacing:.08em}.footer>p{font-size:.6rem;line-height:2;color:var(--muted)}.footer>a:last-child{font-size:.57rem;letter-spacing:.1em;text-align:right}a:hover{color:var(--pink)}.cta:hover{color:#141518;background:var(--pink)}
@media(prefers-reduced-motion:no-preference){.hero-heading{animation:enter .7s ease-out both}.keyvisual{animation:enter .8s .1s ease-out both}@keyframes enter{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:none}}}
@media(min-width:1800px){.keyvisual{max-width:1600px;margin-inline:auto}}
@media(max-width:900px){.shell{width:calc(100% - 48px)}.nav nav{gap:20px}.hero-heading{gap:2rem}.hero-side{max-width:17rem;font-size:.75rem}.character-panel{gap:6%}.portrait{height:540px}.character-copy h3{font-size:2.5rem}.character-line{font-size:1rem}.section{padding-block:80px}.world-grid{gap:6%}.keyvisual{margin-inline:12px}.footer{grid-template-columns:1fr 2fr}.footer>a:last-child{grid-column:2}}
@media(max-width:600px){.shell{width:calc(100% - 40px)}.nav{min-height:80px;gap:12px;flex-wrap:wrap;padding-block:18px}.logo{font-size:.9rem}.logo svg{width:25px;height:30px}.logo small{font-size:.44rem}.nav nav{order:3;width:100%;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);font-size:.58rem;gap:12px}.nav nav a{padding-block:7px}.back{font-size:.6rem;gap:10px}.hero-heading{padding-block:34px 30px;display:block}.eyebrow{font-size:.5rem;letter-spacing:.13em}.hero h1{font-size:2.65rem;margin-top:16px;letter-spacing:.03em}.hero-side{max-width:none;margin-top:22px;font-size:.72rem;display:flex;align-items:flex-end;gap:20px;justify-content:space-between}.hero-side p{font-size:.65rem;line-height:2;min-width:0}.hero-side .line-link{font-size:.62rem;white-space:nowrap;width:auto;gap:12px;margin-top:0;padding-block:7px}.keyvisual{margin-inline:0;aspect-ratio:1/1.1;min-height:0}.keyvisual img{object-position:51% 20%}.keyvisual figcaption{left:18px;right:18px;bottom:20px}.keyvisual figcaption>span:first-child{font-size:.42rem;letter-spacing:.1em}.keyvisual i{padding-inline:8px}.keyvisual strong{font-size:13.1vw;letter-spacing:-.075em;margin-top:10px}.caption-bottom{font-size:.49rem;letter-spacing:.08em}.hero-foot{font-size:.56rem;flex-direction:column;gap:12px;padding-block:17px}.hero-foot a{align-self:flex-end}.section{padding-block:64px}.section-label{font-size:.48rem;letter-spacing:.09em;gap:12px}.section-label>span:last-child{text-align:right}.world-grid{grid-template-columns:1fr;gap:30px;margin-top:32px}h2{font-size:1.55rem}.intro{font-size:.92rem}.muted{font-size:.75rem}.world-notes{margin-top:32px;flex-wrap:wrap;gap:18px;font-size:.48rem;letter-spacing:.08em}.world-notes span:before{width:14px;margin-right:8px}.section-title{display:block;margin-block:28px}.section-title>p{font-size:.68rem;margin-top:16px}.character-switch{margin-bottom:24px}.character-switch button{padding:17px 12px;gap:10px}.character-switch button>span:nth-child(2){font-size:.75rem;letter-spacing:0}.character-switch small{font-size:.38rem;letter-spacing:.06em;line-height:1.8}.character-switch svg{width:18px;height:18px}.choice-number{font-size:.5rem}.character-panel{grid-template-columns:1fr;gap:0}.portrait{height:380px}.portrait img{object-position:35% 50%}.mio .portrait img{object-position:62% 20%}.character-copy{padding-top:30px}.character-copy h3{font-size:2.7rem;margin-top:12px}.character-line{font-size:1.12rem;margin-block:28px 18px}.art-full figcaption{align-items:flex-start;flex-direction:column;gap:12px}.art-full figcaption>span{font-size:.5rem}.art-full figcaption a{align-self:flex-end;font-size:.65rem}.closing h2{font-size:1.7rem}.closing .cta{font-size:.68rem;padding:20px;gap:24px}.closing>p:not(.eyebrow){font-size:.72rem}.footer{grid-template-columns:1fr;gap:24px}.footer>a:last-child{grid-column:auto}.footer>p{font-size:.59rem}.footer-logo{font-size:1rem}}
@media(max-width:360px){.hero h1{font-size:2.25rem}.hero-side{display:block}.hero-side .line-link{margin-top:12px;width:fit-content;gap:30px}.character-switch button{gap:8px;padding-inline:10px}.character-switch svg{display:none}.portrait{height:340px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Intrinsic wrapping also supports enlarged text without detecting user settings. */
body{overflow-wrap:anywhere}.nav{flex-wrap:wrap}.hero-heading{flex-wrap:wrap}.hero-heading>div:first-child{flex:1 1 25rem}.hero-side{flex:0 1 25rem}.world-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr))}.character-panel{grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr))}.character-switch{grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}.character-switch button+button{border-left:0}.character-switch button{border:1px solid var(--line)}.hero-foot,.section-title,.world-notes{flex-wrap:wrap}.cta{overflow-wrap:anywhere}.footer{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}.hero-side .line-link{white-space:normal}
@media(max-width:600px){.hero-side{display:block}.hero-side .line-link{margin-top:12px;width:fit-content;gap:30px}.footer>a:last-child{grid-column:auto}.character-copy h3{font-size:clamp(1.7rem,11vw,2.7rem)}}
.keyvisual{width:calc(100% - 44px)}
@media(max-width:900px){.keyvisual{width:calc(100% - 24px)}}
@media(max-width:600px){.keyvisual{width:100%}}
.keyvisual strong{font-size:min(12.1vw,12rem)}
@media(max-width:600px){.keyvisual strong{font-size:13.1vw}}
/* Keep Mio's full head in view on wide key visuals. */
.keyvisual img{object-position:51% 0}

/* Each character has a distinct, user-selected visual world. */
.characters{position:relative;isolation:isolate;overflow:clip;background:#211a22;--scene-accent:#f3b7ca;--scene-muted:#d0bdc9;transition:background-color .3s ease}
.characters[data-world=mio]{background:#101e30;--scene-accent:#a6d7f2;--scene-muted:#bacddb}
.world-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none}
.world-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#101114bb,#10111433 48%,#101114d9)}
.world-backdrop img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:65% center;opacity:0;transition:opacity .35s ease}
.characters[data-world=koharu] .backdrop-koharu,.characters[data-world=mio] .backdrop-mio{opacity:.38}
.characters .section-label{color:#d6cfd8;border-color:#ffffff50}
.characters .section-title>p{color:var(--scene-muted)}
.scene-state{display:inline-block;color:var(--scene-accent);font-size:.68rem;margin-top:9px;letter-spacing:.04em}
.character-switch{background:#101114df;border-color:#ffffff40}
.character-switch button{background:#1011144d;min-height:90px}
.character-switch button:hover:not([aria-pressed=true]){background:#ffffff16}
.character-panel{gap:5%;align-items:stretch}
.portrait{height:640px;background:#151519;border:1px solid #ffffff50}
.portrait picture{display:block;height:100%;width:100%}
.portrait img,.koharu .portrait img{object-position:70% 0;transform:none}
.mio .portrait img{object-position:65% 0;transform:none}
.character-copy{padding:36px;background:#141319f2;border:1px solid #f3b7ca55;display:flex;flex-direction:column;justify-content:center}
.mio .character-copy{background:#101a28f2;border-color:#a6d7f255}
.character-copy .muted,.character-copy .roman{color:#c7bdc8}
.mio .character-copy .muted,.mio .character-copy .roman{color:#bdc9d8}
.character-copy h3{font-size:3rem}
.character-copy .character-line{font-size:1.13rem;margin-block:24px 18px}
.setting-note{font-size:.58rem;color:#c6bac8;margin-top:20px;line-height:1.9}
.mio .setting-note{color:#b8c9da}
.world-image-link{display:flex;justify-content:space-between;gap:20px;color:var(--accent);font-size:.68rem;line-height:1.8;margin-top:14px;padding-block:10px}
.character-copy .line-link{font-size:.65rem;margin-top:4px}
.character-panel[hidden]+.character-panel{margin-top:0}
@media(max-width:900px){.portrait{height:560px}.character-copy{padding:28px}.character-copy h3{font-size:2.4rem}}
@media(max-width:600px){.portrait{height:370px}.portrait img,.koharu .portrait img{object-position:70% 0}.mio .portrait img{object-position:65% 0}.character-copy{padding:28px 22px}.character-copy h3{font-size:clamp(1.7rem,11vw,2.7rem)}.scene-state{font-size:.62rem}.world-backdrop img{object-position:65% 0}.character-switch button{min-height:80px}}
@media(max-width:360px){.portrait{height:340px}}
@media(prefers-reduced-motion:reduce){.characters,.world-backdrop img{transition:none}}

/* Mio / ice gaming concept — only the selected ice world changes. */
.characters[data-world=mio]{background:#070b12;--scene-accent:#9cecff;--scene-muted:#cfdee7}
.characters[data-world=mio] .world-backdrop:after{background:linear-gradient(180deg,#070b12d4,#070b1247 45%,#070b12ed)}
.characters[data-world=mio] .backdrop-mio{opacity:.45;object-position:63% 0}
.ice-facets{position:absolute;inset:0;width:100%;height:100%;color:#9cecff;opacity:0;transition:opacity .3s ease;pointer-events:none}
.characters[data-world=mio] .ice-facets{opacity:.22}
.characters[data-world=mio] .section-label{color:#dcebf2;border-color:#c4f1ff66}
.characters[data-world=mio] .character-switch{border-color:#8bcbdc70;background:#080e16ef}
.character-switch button[data-character=mio][aria-pressed=true]{background:#e4f8ff;color:#101d29;box-shadow:inset 0 -3px #83dcf4}
.mio .portrait{border-color:#b6ebff99;box-shadow:inset 0 0 0 1px #e5faff30;background:#0c111b}
.mio .portrait-tag{background:#07101be8;border-color:#9cecff88;color:#dff9ff}
.mio .character-copy{background:#090f18f7;border-color:#b0eaff77;position:relative}
.mio .character-copy:before{content:"";display:block;width:48px;height:3px;background:#a2ebff;margin-bottom:24px}
.ice-world-lead{color:#eefaff;font-size:clamp(1.05rem,1.5vw,1.4rem);letter-spacing:.1em;line-height:1.9;margin-top:14px}
.mio .character-copy{--accent:#a8eeff}
.mio .character-copy h3{color:#f1faff;margin-top:18px}
.mio .character-copy .character-line{color:#d6e9f1}
.mio .character-copy .muted,.mio .character-copy .roman,.mio .setting-note{color:#c1d2de}
.mio .world-image-link{color:#a8eeff}
@media(prefers-reduced-motion:no-preference){.character-panel.mio:not([hidden]){animation:ice-arrival .42s ease-out both}@keyframes ice-arrival{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){.ice-facets{transition:none}.character-panel.mio{animation:none!important}}