:root{--paper:#fafafa;--ink:#202326;--muted:#85888b;--hairline:#e3e4e5;--edge:clamp(24px,4.8vw,80px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}body{height:100svh;min-height:560px;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid #607486;outline-offset:8px}button{color:inherit}a{color:inherit;text-decoration:none}.header{height:100px;position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge);z-index:3}.monogram{font-size:22px;font-weight:700;letter-spacing:-1.7px}.monogram span{color:#8394a0}.chapter,.index,.eyebrow,.character-hint,footer,.speech-label{font-size:9px;letter-spacing:2.1px;font-weight:400}.chapter{display:flex;gap:11px;align-items:center;color:#7c8185}.status-dot{width:4px;height:4px;background:#758b9a;border-radius:50%}.index{color:#8b8f92;letter-spacing:1.5px}main{position:absolute;inset:100px var(--edge) 82px}.frame{position:absolute;inset:10px 0 0;pointer-events:none;background-image:linear-gradient(#22222202 1px,transparent 1px),linear-gradient(90deg,#22222202 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse at center,#000 10%,#0008 55%,transparent 85%)}.frame i{position:absolute;width:17px;height:17px;border-color:var(--hairline);border-style:solid}.frame i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}.frame i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}.frame i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.frame i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}.title-area{position:absolute;top:36%;left:0;width:100%;transform:translateY(-35%);text-align:center;pointer-events:none}.eyebrow{color:#93979a;margin:0 0 24px;letter-spacing:3.8px}h1{margin:0;line-height:1.12;white-space:nowrap;font-size:clamp(40px,10.3vw,170px);font-weight:700;letter-spacing:-.062em}.particles-ready h1{color:transparent}.welcome{font-size:12px;letter-spacing:.15px;color:#8f9295;margin:30px 0 0;font-weight:400}#particles{position:fixed;inset:0;pointer-events:none;z-index:1}.host{position:absolute;right:clamp(8px,2.5vw,50px);bottom:10px;width:clamp(140px,13vw,195px);z-index:2;display:flex;align-items:center;flex-direction:column}.character{padding:0;border:0;background:none;width:100%;aspect-ratio:3/5;cursor:pointer;position:relative;transform-origin:50% 95%}#avatar{width:100%;height:100%;display:block;position:relative;z-index:1;transform-origin:50% 95%;animation:breathe 5s ease-in-out infinite}.ground{position:absolute;bottom:1.5%;left:31%;width:38%;height:2%;background:#20232618;filter:blur(5px);border-radius:50%}.character-hint{font-size:8px;color:#979b9e;letter-spacing:1.25px;white-space:nowrap;margin-top:11px}.speech{position:absolute;right:calc(100% - 17px);bottom:45%;width:248px;padding:21px 23px;background:#fff;border:1px solid #e9e9e9;border-radius:18px 18px 2px 18px;box-shadow:0 10px 40px #00000005;animation:appear .28s ease-out}.speech-label{font-size:7px;letter-spacing:1.6px;color:#92989c}.speech p{font-size:15px;line-height:1.55;margin:10px 0 0;letter-spacing:-.2px}.speech-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#8b9aa4;right:15px;top:19px}.host.speaking #avatar{animation:talk 2.3s ease-in-out infinite}footer{position:absolute;bottom:0;left:var(--edge);right:var(--edge);height:72px;display:flex;align-items:center;justify-content:space-between;color:#8e9396;font-size:8px;letter-spacing:1.3px;z-index:3}.interaction-note{display:flex;align-items:center;gap:12px}.small-cross{font-size:16px;color:#7f8a91}#motion{padding:12px 0 12px 15px;background:none;border:none;color:#8e9396;font-size:8px;letter-spacing:1.2px;cursor:pointer}#motion span{margin-left:8px}.hint-touch{display:none}[hidden]{display:none!important}.paused #avatar{animation:none!important}
@keyframes breathe{0%,100%{transform:rotate(-.45deg) scaleY(1)}50%{transform:rotate(.45deg) scaleY(1.008)}}@keyframes talk{0%,100%{transform:rotate(-.7deg) translateY(0)}40%{transform:rotate(.8deg) translateY(-2px)}75%{transform:rotate(-.2deg) translateY(-1px)}}@keyframes appear{from{opacity:0;transform:translate(7px,7px)}to{opacity:1;transform:none}}
@media(max-width:700px){body{min-height:580px}.header{height:84px}.chapter{font-size:7px;letter-spacing:1.2px}.index{font-size:8px}main{inset:84px var(--edge) 66px}.title-area{top:27%;transform:translateY(-30%)}h1{font-size:10.5vw;letter-spacing:-.065em}.eyebrow{font-size:8px;margin-bottom:21px}.welcome{font-size:10px;margin-top:23px}.host{width:150px;right:5px;bottom:12px}.speech{right:13px;bottom:calc(100% + 9px);width:230px;padding:17px 19px}.speech p{font-size:14px}.character-hint{font-size:7px}footer{height:63px;font-size:6px;letter-spacing:.75px}.interaction-note{gap:7px}#motion{font-size:6px;letter-spacing:.6px}.small-cross{font-size:13px}}
@media(pointer:coarse){.hint-desktop{display:none}.hint-touch{display:inline}}
@media(max-height:650px) and (min-width:701px){.host{width:135px;bottom:0}.title-area{top:31%}.header{height:80px}main{top:80px}.welcome{margin-top:20px}.speech{bottom:50%}}
@media(prefers-reduced-motion:reduce){#avatar,.speech{animation:none!important}}

/* A pointer-transparent particle layer spans every chapter. */
#particles{z-index:8;pointer-events:none}