* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; margin:0; touch-action:none; overscroll-behavior:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img { -webkit-user-drag:none; user-drag:none; }
body { display:grid; place-items:center; min-height:100vh; min-height:100svh; overflow:hidden; background:#171715; color:#fff; font-family:"Yu Gothic UI","Hiragino Sans",sans-serif; }
.scene { position:relative; width:min(100vw,calc(100vh * 0.6665)); width:min(100svw,calc(100svh * 0.6665)); max-height:100vh; max-height:100svh; aspect-ratio:1333/2000; overflow:hidden; cursor:pointer; user-select:none; touch-action:none; }
.scene-view { position:absolute; inset:0; width:100%; height:100%; }
.scene-view[hidden] { display:none; }
.layer-stack { position:absolute; inset:0; width:100%; height:100%; }
.fixed-back { z-index:0; }
.character { z-index:1; }
.character-body { transform-origin:50% 100%; animation:breath-subtle 3.6s ease-in-out infinite; }
.character-head { transform-origin:50% 44%; animation:breath-head 3.6s ease-in-out infinite; }
.wing-pair { position:absolute; pointer-events:none; }
.wing-pair img { inset:0; width:100%; height:100%; z-index:auto !important; }
.wing-left { clip-path:inset(0 68% 0 0); transform-origin:29% 52%; animation:wing-idle-left 4.8s ease-in-out infinite; }
.wing-right { clip-path:inset(0 0 0 70%); transform-origin:79% 54%; animation:wing-idle-right 5.2s ease-in-out -.7s infinite; }
.fixed-front { z-index:2; }
.night-color-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; mix-blend-mode:multiply; pointer-events:none; }
.upper-night-overlay { z-index:100; }
.lower-night-overlay { z-index:3; background:#beb9cb; }
.night-color-overlay[hidden] { display:none; }
.lower-switch { position:absolute; z-index:1100; margin:0; padding:0; border:0; background:transparent; cursor:pointer; transform-origin:50% 55%; animation:switch-hop 1.45s ease-in-out infinite; will-change:transform,filter; }
.lower-switch[hidden] { display:none; }
.lower-switch img { position:static; width:100%; height:100%; object-fit:fill; }
.lower-switch.switch-cropped { overflow:hidden; clip-path:none; }
.lower-switch.switch-cropped img { position:absolute; max-width:none; max-height:none; }
.lower-switch:focus-visible { outline:3px solid #8fc8ff; outline-offset:3px; }
.lower-switch.switch-attention { animation:switch-attention 1s ease-in-out infinite; }
.small-window-content { position:absolute; z-index:15; left:9.2%; top:20.4%; width:77.2%; height:38.6%; overflow:hidden; border:4px solid rgba(255,255,255,.92); border-radius:3px; background:#fff; box-shadow:0 5px 18px rgba(0,0,0,.4); touch-action:none; cursor:grab; }
.small-window-content:active { cursor:grabbing; }
.small-window-content[hidden] { display:none; }
.small-window-content img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.small-window-steam-effect { position:absolute; z-index:7; inset:0; opacity:0; transition:opacity 180ms ease; pointer-events:none; }
.small-window-steam-effect img { inset:auto; left:50%; bottom:18%; width:25%; height:33.333%; object-fit:contain; transform-origin:50% 80%; animation:steam-rise 3s ease-out infinite; }
.small-window-steam-effect img:nth-child(2) { animation-delay:-1.5s; }
.small-window-content img.breath-steam { z-index:6; inset:auto; left:50%; bottom:14%; width:40%; height:53.333%; object-fit:contain; opacity:0; transform-origin:50% 80%; animation:breath-steam-rise 3.6s ease-out infinite; pointer-events:none; }
.elastic-inner-wrap { position:absolute; inset:0; animation:inner-twitch 3.2s linear infinite; pointer-events:none; }
.elastic-inner-wrap canvas { z-index:auto !important; }
.small-window-content canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.small-window-breath { position:absolute; inset:0; transform-origin:50% 100%; animation:small-window-breath 3.6s ease-in-out infinite; pointer-events:none; }
.layer-stack img { position:absolute; display:block; object-fit:fill; pointer-events:none; }
.layer-stack img[data-layer-id="layer-3-4-8"] { opacity:.75; }
.layer-stack img[data-layer-id="layer-3-3"] { transform-origin:50% 28%; animation:ribbon-follow 3.6s ease-in-out infinite; }
.layer-stack img[data-layer-id="layer-3-4-2"] { transform-origin:50% 6%; animation:earring-follow 3.6s ease-in-out infinite; }
.layer-stack img[hidden] { display:none; }
.dialogue { position:absolute; z-index:1000; left:50%; bottom:20px; width:min(calc(100% - 32px),720px); max-height:min(42%,320px); overflow:auto; transform:translateX(-50%); padding:18px 20px; border:1px solid rgba(255,255,255,.58); border-radius:14px; background:rgba(18,18,20,.82); box-shadow:0 8px 30px rgba(0,0,0,.3); backdrop-filter:blur(5px); cursor:pointer; }
.dialogue[hidden] { display:none; }
.dialogue p { margin:0; font-size:18px; line-height:1.7; white-space:pre-wrap; }
.dialogue-footer { display:flex; justify-content:flex-end; margin-top:12px; color:rgba(255,255,255,.62); font-size:11px; }
.ending-screen { position:absolute; z-index:5000; inset:0; display:grid; place-items:center; background:#000; opacity:0; pointer-events:none; transition:opacity 1.6s ease; }
.ending-screen[hidden] { display:none; }
.ending-screen.active { opacity:1; pointer-events:auto; }
.dialogue.ending-dialogue { z-index:6000; pointer-events:none; }
.dialogue.ending-dialogue .dialogue-footer { display:none; }
.sound-choice { position:absolute; z-index:3000; inset:0; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.62); cursor:default; }
.sound-choice[hidden] { display:none; }
.sound-choice-panel { width:min(100%,360px); padding:24px; border:1px solid rgba(255,255,255,.58); border-radius:14px; background:rgba(18,18,20,.94); box-shadow:0 8px 30px rgba(0,0,0,.38); text-align:center; }
.sound-choice h1 { margin:0; font-size:21px; font-weight:500; }
.sound-choice p { margin:10px 0 20px; color:rgba(255,255,255,.7); font-size:14px; }
.sound-choice-actions { display:flex; gap:10px; }
.sound-choice button { flex:1; min-height:44px; border:1px solid rgba(255,255,255,.55); border-radius:8px; background:rgba(255,255,255,.12); color:#fff; font:inherit; cursor:pointer; }
.sound-choice button:first-child { background:#fff; color:#171715; }
.sound-choice button:focus-visible { outline:3px solid #8fc8ff; outline-offset:2px; }
.credits { margin-top:20px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.62); font-size:11px; line-height:1.6; text-align:left; }
.credits p { margin:2px 0; }
.credits a { color:rgba(205,225,255,.9); text-decoration:underline; text-underline-offset:2px; }
.warning { position:absolute; z-index:2000; top:16px; left:50%; width:min(90%,620px); transform:translateX(-50%); padding:12px 16px; border-radius:8px; background:#8b342d; color:#fff; font-size:13px; }
.settings-toggle { position:fixed; z-index:7200; top:max(14px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); width:46px; height:46px; min-height:46px; padding:0; display:grid; place-items:center; border:1px solid rgba(255,238,220,.16); border-radius:50%; background:rgba(42,32,28,.88); color:#fff3e8; box-shadow:0 14px 34px rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.08) inset; backdrop-filter:blur(12px); font-size:22px; line-height:1; cursor:pointer; }
.settings-toggle:hover, .settings-toggle:focus-visible, .settings-toggle[aria-expanded="true"] { border-color:rgba(232,136,114,.72); color:#f2a38c; outline:none; }
.settings-panel { position:fixed; z-index:7100; top:max(68px,calc(env(safe-area-inset-top) + 58px)); right:max(14px,env(safe-area-inset-right)); width:min(320px,calc(100vw - 28px)); max-height:calc(100svh - 90px); overflow:auto; padding:18px; border:1px solid rgba(255,238,220,.16); border-radius:8px; background:rgba(42,32,28,.92); color:#fff3e8; box-shadow:0 20px 48px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.08) inset; backdrop-filter:blur(16px); cursor:default; }
.settings-panel[hidden] { display:none; }
.settings-panel header { margin:0 0 16px; }
.settings-panel .eyebrow { margin:0 0 4px; color:#e8ad8e; font-size:11px; font-weight:700; letter-spacing:.08em; }
.settings-panel h1 { margin:0; font-size:20px; line-height:1.35; }
.field { display:grid; gap:8px; margin-top:14px; color:#ead4c5; font-size:13px; font-weight:700; }
.field select { width:100%; min-height:42px; padding:0 12px; border:1px solid rgba(255,238,220,.18); border-radius:8px; background:#211713; color:#fff3e8; font:inherit; }
.field select:focus-visible, .sound-setting-actions button:focus-visible { outline:3px solid rgba(232,136,114,.62); outline-offset:2px; }
.work-overview { margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,238,220,.14); }
.work-overview h2 { margin:0 0 8px; color:#ead4c5; font-size:13px; line-height:1.4; }
.work-overview p { margin:0; color:#d7bdae; font-size:13px; font-weight:500; line-height:1.7; }
.sound-setting-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sound-setting-actions button { min-height:40px; border:1px solid rgba(255,238,220,.18); border-radius:8px; background:rgba(255,255,255,.08); color:#fff3e8; font:inherit; cursor:pointer; }
.sound-setting-actions button[aria-pressed="true"] { border-color:rgba(232,136,114,.72); background:#be5e4c; color:#fff; }
@keyframes breath-none { from,to { transform:none; } }
@keyframes breath-subtle { 0%,100% { transform:translateY(0) scaleY(1); } 50% { transform:translateY(-.18%) scaleY(1.008); } }
@keyframes breath-head { 0%,100% { transform:translateY(0) scaleY(1); } 50% { transform:translateY(-.12%) scaleY(1.005); } }
@keyframes breath-standard { 0%,100% { transform:translateY(0) scaleY(1); } 50% { transform:translateY(-.35%) scaleY(1.015); } }
@keyframes ribbon-follow { 0%,100% { transform:translateY(0) rotate(0); } 42% { transform:translateY(-.35%) rotate(-.55deg); } 58% { transform:translateY(-.5%) rotate(.38deg); } 76% { transform:translateY(.12%) rotate(-.18deg); } }
@keyframes earring-follow { 0%,100% { transform:translateY(0) rotate(0); } 44% { transform:translateY(-.8%) rotate(-.9deg); } 59% { transform:translateY(.65%) rotate(1.25deg); } 78% { transform:translateY(.22%) rotate(-.42deg); } }
@keyframes wing-idle-left { 0%,100% { transform:rotate(0) scale(1.01) scaleY(1); } 34% { transform:rotate(1.15deg) scale(1.01) scaleY(.988); } 68% { transform:rotate(-.7deg) scale(1.01) scaleY(1.007); } }
@keyframes wing-idle-right { 0%,100% { transform:rotate(0) scaleY(1); } 31% { transform:rotate(-1deg) scaleY(.99); } 66% { transform:rotate(.65deg) scaleY(1.006); } }
@keyframes switch-hop { 0%,100% { transform:translateY(0); } 45% { transform:translateY(-7%); } 62% { transform:translateY(-7%); } }
@keyframes switch-attention { 0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 4px rgba(255,244,175,.65)); } 45% { transform:translateY(-11%) scale(1.065); filter:drop-shadow(0 0 13px rgba(255,248,180,1)) drop-shadow(0 0 25px rgba(255,211,91,.9)); } 62% { transform:translateY(-11%) scale(1.065); filter:drop-shadow(0 0 10px rgba(255,248,180,.95)) drop-shadow(0 0 20px rgba(255,211,91,.75)); } }
@keyframes inner-twitch { 0%,68%,100% { transform:translateY(0) scaleY(1); } 70% { transform:translateY(-.18%) scaleY(1.003); } 72% { transform:translateY(0) scaleY(1); } 75% { transform:translateY(-.14%) scaleY(1.002); } 77% { transform:translateY(0) scaleY(1); } }
@keyframes small-window-breath { 0%,100% { transform:translateY(0) scaleY(1); } 50% { transform:translateY(-.26%) scaleY(1.014); } }
@keyframes steam-rise { 0% { opacity:0; transform:translate(-50%,18%) scale(.78); } 8% { opacity:.8; } 28% { opacity:.42; } 40% { opacity:0; transform:translate(-50%,-72%) scale(1.18); } 100% { opacity:0; transform:translate(-50%,-72%) scale(1.18); } }
@keyframes breath-steam-rise { 0%,32% { opacity:0; transform:translate(-50%,12%) scale(.72); } 50% { opacity:.48; transform:translate(-50%,-5%) scale(.94); } 72% { opacity:.3; } 100% { opacity:0; transform:translate(-50%,-58%) scale(1.24); } }
@media (max-width:600px) { .dialogue { bottom:12px; width:calc(100% - 20px); max-height:45%; padding:14px 16px; } .dialogue p { font-size:16px; } .sound-choice-actions { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { .character-body, .character-head, .elastic-inner-wrap, .small-window-breath, .small-window-steam-effect img, .breath-steam, .layer-stack img[data-layer-id="layer-3-3"], .layer-stack img[data-layer-id="layer-3-4-2"], .wing-pair img, .lower-switch { animation:none; } }