/* Masters · production stylesheet (was inline in the prototype; CSP forbids inline styles) */
@font-face{font-family:"NotoSerifSC";src:url(../fonts/NotoSerifSC.woff2) format("woff2");font-weight:300 600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/CormorantItalic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/Cormorant.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"XuanZongTi";src:url(../fonts/XuanZongTi.woff2) format("woff2");font-display:swap}
@font-face{font-family:"LongCang";src:url(../fonts/LongCang.woff2) format("woff2");font-display:swap}
@font-face{font-family:"ZhiMangXing";src:url(../fonts/ZhiMangXing.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Caveat";src:url(../fonts/Caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Marcellus";src:url(../fonts/Marcellus.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IM Fell English";src:url(../fonts/IMFell.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family:"IM Fell English";src:url(../fonts/IMFellItalic.woff2) format("woff2");font-style:italic;font-display:swap}
:root{--paper:#F8F4E6;--bai:#FCFAF2;--ink:#14110F;--mute:rgba(20,17,15,.58);--line:rgba(20,17,15,.2);--seal:#B83A26;--qcol:#14110F;--halo:rgba(248,244,230,.85)}
:root[data-theme=night]{--paper:#14110F;--bai:#1B1714;--ink:#EDE6D6;--mute:rgba(237,230,214,.62);--line:rgba(237,230,214,.22);--qcol:#EDE6D6;--halo:rgba(20,17,15,.85)}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink)}
body{font:16px/1.6 "NotoSerifSC","Noto Serif SC","Songti SC","Cormorant Garamond",Georgia,serif;-webkit-font-smoothing:antialiased}
canvas{position:fixed;left:0;top:0;display:block}
#gl{z-index:0}#fx{z-index:1;pointer-events:none}#ink{z-index:2;pointer-events:none;filter:drop-shadow(0 0 1px var(--halo)) drop-shadow(0 0 1.5px var(--halo))}
#stage{position:fixed;inset:0;z-index:3;pointer-events:none}
.qtext{text-shadow:var(--tsh);position:absolute;left:var(--ax,50%);top:var(--ay,50%);transform:translate(-50%,-50%);width:min(86vw,560px);text-align:center;color:var(--qcol);line-height:1.5;margin:0;font-size:clamp(19px,min(2.7vw,4.2vh),32px)}
.qtext.zhq{letter-spacing:.1em;font-size:clamp(21px,min(3.1vw,4.8vh),38px);line-height:1.7}
.qtext span{display:inline-block;opacity:0;animation:both 1s both}
.qattr{position:absolute;left:var(--ax,50%);top:calc(var(--ay,50%) + min(14vh,110px));transform:translateX(-50%);margin:0;font-size:14px;letter-spacing:.06em;color:var(--qcol);opacity:0;text-align:center;width:min(86vw,560px);text-shadow:var(--tsh);font-weight:500}
body[data-p=starry] .qattr{font-size:clamp(19px,1.8vw,23px);letter-spacing:.03em;font-weight:600}
.qattr.on{animation:qa 1.6s both}
@keyframes qa{from{filter:blur(4px)}to{filter:blur(0)}}
/* theme-specific quote reveals */
.qtext.stars{text-shadow:none}.qtext.stars span{animation:starIn 2.2s both;text-shadow:0 0 8px rgba(255,236,150,.45),0 0 2px rgba(3,7,22,.95),0 0 5px rgba(3,7,22,.9)}
@keyframes starIn{0%{opacity:0;filter:blur(8px);transform:scale(1.5)}60%{opacity:1}100%{opacity:1;filter:blur(0);transform:scale(1)}}
.qtext.rise span{animation:riseIn 1.7s cubic-bezier(.2,.8,.2,1) both}
@keyframes riseIn{0%{opacity:0;transform:translateY(34px) skewX(-8deg)}100%{opacity:1;transform:none}}
.qtext.ripple span{animation:rippleIn 2.6s ease both}
@keyframes rippleIn{0%{opacity:0;filter:blur(10px);transform:scale(.92)}100%{opacity:1;filter:blur(0);transform:none}}
.qtext.snow span{animation:snowIn 2.4s ease-out both}
@keyframes snowIn{0%{opacity:0;transform:translateY(-16px);filter:blur(3px)}100%{opacity:1;transform:none;filter:blur(0)}}
#seal{position:absolute;width:var(--sz,24px);height:var(--sz,24px);background:var(--seal);transform:translate(-50%,0) rotate(-3deg);opacity:0;transition:opacity .6s;border-radius:2px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.0)}
#seal::before{content:"";position:absolute;inset:14%;border:2px solid rgba(252,250,242,.78);border-radius:1px}
#seal::after{content:"";position:absolute;left:32%;top:30%;width:36%;height:40%;border-left:2px solid rgba(252,250,242,.85);border-bottom:2px solid rgba(252,250,242,.85);transform:skewX(-14deg)}
html[lang^=en] #seal,body[data-p=starry] #seal,body[data-p=wave] #seal,body[data-p=lilies] #seal,body[data-p=hunters] #seal{display:none}
/* chat */
#chat{position:absolute;left:var(--ax,50%);top:var(--ay,50%);transform:translate(-50%,-50%);width:min(500px,calc(100vw - 40px));max-height:min(70vh,560px);display:flex;flex-direction:column;pointer-events:auto;opacity:0;transition:opacity 1.6s ease;--chat-font:"NotoSerifSC",serif}
#chat.on{opacity:1}
#log{overflow:auto;padding:4px 6px 14px;scrollbar-width:none;flex:0 1 auto;mask-image:linear-gradient(transparent,#000 22px,#000 calc(100% - 4px),transparent);-webkit-mask-image:linear-gradient(transparent,#000 22px,#000 calc(100% - 4px),transparent)}
#log::-webkit-scrollbar{display:none}
.msg{margin:0 0 20px;font-family:var(--chat-font)}
.msg.a p{text-shadow:var(--tsh);margin:0;font-size:17px;line-height:1.85;letter-spacing:.02em;color:var(--ink);font-weight:500;min-height:1.85em}
#chat[data-lang=en] .msg.a p{font-size:19px;line-height:1.55;font-style:normal;font-weight:var(--chatw,500)}
.msg.u{text-shadow:var(--tsh);text-align:right;font-size:13px;color:var(--mute);letter-spacing:.04em}
.msg.u::before{content:"";display:inline-block;width:14px;height:1px;background:var(--seal);vertical-align:middle;margin-right:10px}
.ink{display:inline;opacity:0;animation:surf 1.5s ease-out both}
@keyframes surf{0%{opacity:0;filter:blur(5px)}100%{opacity:1;filter:blur(0)}}
.card{display:block;margin:0;padding:11px 2px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-decoration:none;opacity:0;animation:slide 1s cubic-bezier(.2,.8,.2,1) both;font-family:var(--chat-font);text-shadow:var(--tsh)}
.card:last-child{border-bottom:1px solid var(--line)}
.card:hover b{border-bottom:1px solid var(--seal)}
.card small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.card b{display:inline-block;font-weight:500;font-size:16px;margin:2px 0}.card span{display:block;font-size:13px;color:var(--mute)}
.msg .card:first-of-type{margin-top:12px}
@keyframes slide{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
#sugg{text-shadow:var(--tsh);display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;font-size:13px;color:var(--mute);padding:0 6px;min-height:28px;font-family:var(--chat-font);animation:surf 1.4s both}
#sugg button{all:unset;cursor:pointer;color:var(--ink);border-bottom:1px solid var(--line);padding:2px 0;min-height:24px}#sugg button:hover{border-color:var(--seal)}
#f{margin:10px 6px 0}#q{width:100%;font:inherit;font-size:16px;text-shadow:var(--tsh);font-family:var(--chat-font);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;min-height:44px;outline:none;border-radius:0}
#q:focus{border-bottom-color:var(--seal)}#q::placeholder{color:var(--mute);opacity:1}
#mock{text-shadow:var(--tsh);margin:12px 6px 0;font-size:11px;letter-spacing:.1em;color:var(--ink);text-transform:uppercase}
/* controls */
.ctl{position:fixed;z-index:5;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:flex-end;justify-content:space-between;padding:14px clamp(16px,3vw,32px) calc(12px + env(safe-area-inset-bottom));font-size:12px;color:var(--cink,var(--ink));letter-spacing:.02em;pointer-events:none;}
.ctl>*{pointer-events:auto}
#capwrap{display:flex;flex-direction:column;gap:1px;letter-spacing:.02em;text-shadow:var(--tshc)}#credit{font-size:.88em;opacity:1}
#right{display:flex;gap:12px;align-items:center;letter-spacing:.02em;text-shadow:var(--tshc)}
#right button{all:unset;cursor:pointer;opacity:.88;padding:4px 2px;min-height:24px}#right button:hover,#right button[aria-pressed=true]{opacity:1}#right button[aria-pressed=true]{border-bottom:1px solid var(--seal)}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
/* hidden site index (crawlers, screen readers; '?' reveals) */
#index{position:fixed;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper);color:var(--ink);padding:22px 28px;border:1px solid var(--line);max-width:90vw}
#index:not(.show){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0}
#index ul{list-style:none;margin:8px 0 0;padding:0}#index a{color:var(--ink)}#indexlabel{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
body.no-gl #gl{display:none}
@media (max-width:700px){.ctl{font-size:11px;gap:4px 10px}#capwrap{order:3;width:100%}.qattr{top:calc(var(--ay,50%) + min(14vh,110px))}}
@media (prefers-reduced-motion:reduce){.ink,.card,.qtext span,#sugg{animation:none!important;opacity:1!important}#chat{transition:none}}
/* Text legibility without any backing: a hairline outline in the painting-local colour, painted outside the glyph. */
:root,#chat{--tsh:0 0 1px var(--halo),0 0 1.5px var(--halo)}
:root{--tshc:0 0 1px var(--chalo),0 0 1.5px var(--chalo)}
.qtext,.qattr,.msg p,.msg.u,.card,#sugg,#q,#mock{-webkit-text-stroke:1.5px var(--halo);paint-order:stroke fill}
.ctl{-webkit-text-stroke:1.5px var(--chalo);paint-order:stroke fill}
#right{color:var(--cinkr,var(--cink));text-shadow:0 0 1px var(--chalor,var(--chalo)),0 0 1.5px var(--chalor,var(--chalo));-webkit-text-stroke-color:var(--chalor,var(--chalo))}

/* production additions */
#still{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:none}
body.no-gl #still{display:block}
.card[href]{cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#index p{margin:10px 0 0;font-size:13px;color:var(--mute)}
.nojs{position:fixed;inset:0;z-index:10;margin:0;background:#C9BFA0}
.nojs img{width:100%;height:100%;object-fit:cover;display:block}
.nojs div{position:absolute;left:16px;right:16px;bottom:16px;color:#F4EEDA;font-size:14px;-webkit-text-stroke:1.5px rgba(14,12,8,.92);paint-order:stroke fill}
.nojs a{color:inherit}
#gl{touch-action:none}