:root{--ink:#2b211a;--paper:#f3ead6;--paper-2:#e6d8b8;--gold:#c99a45;--red:#8a2e24;--night:#0e1018d1;color:#efe6d2;font-family:Noto Serif TC,Noto Serif SC,Songti TC,Songti SC,serif}*{box-sizing:border-box}html,body{background:#0d0f16;height:100%;margin:0;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;background:#1e1a16b3;border:1px solid #c99a458c;border-radius:6px;padding:.35em .8em}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true],button.primary{background:var(--gold);color:#1b140c;border-color:var(--gold)}.stage{touch-action:none;width:100%;height:100%;position:fixed;inset:0}.start{background:radial-gradient(circle at 50% 40%,#0e101859,#08090eeb);place-items:center;display:grid;position:fixed;inset:0}.start .card{background:var(--night);text-align:center;border:1px solid #c99a4566;border-radius:12px;max-width:34rem;padding:2rem 2.4rem;line-height:1.7}.start h1{letter-spacing:.3em;margin:.2rem 0;font-size:3rem}.start h2{color:var(--gold);margin:0 0 1rem;font-weight:500}.eyebrow{opacity:.75;letter-spacing:.2em;margin:0}.toggles{flex-wrap:wrap;justify-content:center;gap:.8rem;display:flex}.toggles [role=group]{display:flex}.toggles [role=group] button{border-radius:0}.toggles [role=group] button:first-child{border-radius:6px 0 0 6px}.toggles [role=group] button:last-child{border-radius:0 6px 6px 0}.disclosure{opacity:.75;font-size:.85rem}.start .primary{padding:.5em 2.4em;font-size:1.2rem}.hud{pointer-events:none;background:linear-gradient(#08090ecc,#0000);justify-content:space-between;align-items:flex-start;gap:1rem;padding:.8rem 1rem;display:flex;position:fixed;top:0;left:0;right:0}.hud>*{pointer-events:auto}.hud strong{color:var(--gold);font-size:1.25rem;display:block}.outline{opacity:.8;font-size:.85rem}.tracker{background:var(--night);border:1px solid #c99a454d;border-radius:10px;width:15rem;padding:.8rem;position:fixed;top:5.5rem;left:1rem}.tracker h3{margin:0 0 .4rem;font-size:1rem}.tracker ul{margin:0 0 .6rem;padding:0;list-style:none}.tracker li button{text-align:left;background:0 0;border:none;width:100%;padding:.25em 0}.tracker li.found button{color:var(--gold)}.badge{opacity:.6;margin:.6rem 0 0;font-size:.75rem}.prompt{background:var(--night);border-radius:999px;padding:.5rem 1rem;font-size:.95rem;position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%)}.scrim{background:#05060a8c;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.modal{background:var(--paper);width:min(46rem,100%);max-height:calc(100vh - 2rem);color:var(--ink);border-radius:10px;flex-direction:column;display:flex;box-shadow:0 20px 60px #00000080}.modal>header{border-bottom:1px solid var(--paper-2);justify-content:space-between;gap:1rem;padding:1rem 1.4rem .6rem;display:flex}.modal h2{color:var(--red);margin:0}.modal .sub{opacity:.75;margin:.2rem 0 0;font-size:.9rem}.modal button{color:var(--ink);background:var(--paper-2);border-color:#c7b48a}.modal button.primary{background:var(--red);color:var(--paper);border-color:var(--red)}.modal .body{padding:.6rem 1.4rem 1.2rem;scroll-padding-bottom:4.5rem;line-height:1.8;overflow-y:auto}.modal h3{color:var(--red);margin:1rem 0 .3rem;font-size:1rem}blockquote{border-left:4px solid var(--red);background:#8a2e2412;margin:.8rem 0;padding:.6rem 1rem;font-size:1.15rem}.history{margin:0;padding-left:1.2rem}.glosses{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.2rem 1rem;margin:0;display:grid}.glosses div{gap:.5rem;display:flex}.glosses dt{white-space:nowrap;font-weight:700}.glosses dd{margin:0}.dialogue p{margin:.3rem 0}.dialogue b{color:var(--red);margin-right:.5rem}.dialogue b:after{content:"："}.note{opacity:.7;font-size:.85rem}.link{background:#c99a4526;border-radius:6px;padding:.5rem .8rem}button.play{margin-left:.4rem;padding:.05em .5em;font-size:.8rem}.choices{gap:.4rem;margin:.4rem 0;padding:0;list-style:none;display:grid}.choices button{text-align:left;width:100%}.choices button.right{outline:2px solid #3f7a4a}.choices button.wrong{outline:2px solid var(--red)}.feedback{border-radius:6px;padding:.5rem .8rem}.feedback.right{background:#3f7a4a21}.feedback.wrong{background:#8a2e241a}.actions{justify-content:flex-end;gap:.6rem;margin-top:1rem;display:flex}.paper{border:1px solid var(--paper-2);letter-spacing:.04em;background:#fbf6ea;padding:.8rem 1.1rem;font-size:1.15rem}.paper p{text-indent:2em;margin:.2rem 0}.paper.empty{opacity:.6;font-size:1rem}.paper .line{cursor:pointer}.paper .line:hover{background:#c99a4533}.brush{background:#fbf6ea;border:1px dashed #c7b48a;padding:.6rem 1rem;font-size:1.3rem}.caret{vertical-align:-.15em;background:var(--ink);width:2px;height:1.1em;margin-left:2px;animation:1s steps(2,end) infinite blink;display:inline-block}@keyframes blink{to{opacity:0}}.error{color:#ffb4a8;position:fixed;bottom:4rem;left:1rem}@media (max-width:720px){.tracker{width:auto;top:auto;bottom:4.5rem;right:1rem}.outline{display:none}}.reader{--col:2.6rem;--silk-w:min(84vw, 58rem);--silk-h:min(44vh, 21rem);z-index:10;background:linear-gradient(#0000 55%,#08080cb3),radial-gradient(at 50% 45%,#08080c4d,#08080cd9);flex-direction:column;justify-content:center;align-items:center;gap:.9rem;padding:1rem;animation:.8s both fade-in;display:flex;position:fixed;inset:0}.reader-caption{text-align:center;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.4rem 1rem;margin:0;animation:1s .4s both fade-in;display:flex}.reader-caption strong{letter-spacing:.3em;color:var(--gold);font-size:1.5rem}.reader-caption span{opacity:.75;font-size:.85rem}.scroll{width:calc(var(--silk-w) + 3.4rem);filter:drop-shadow(0 18px 30px #0009);justify-content:flex-end;align-items:center;display:flex}.silk{width:0;height:var(--silk-h);animation:unroll var(--unroll) cubic-bezier(.45, .05, .3, 1) var(--delay) forwards;background:linear-gradient(#ffffff1a,#0000 12% 88%,#5a3c142e),repeating-linear-gradient(90deg,#ffffff09 0 2px,#785a2809 2px 5px),#dcc692;justify-content:flex-end;display:flex;overflow:hidden}@keyframes unroll{to{width:var(--silk-w)}}@keyframes fade-in{0%{opacity:0}}.columns{width:var(--silk-w);writing-mode:vertical-rl;height:100%;font-size:1.45rem;line-height:var(--col);letter-spacing:.12em;color:#2a1b10;background:repeating-linear-gradient(to left, transparent 0 calc(var(--col) - 1px), #96221661 calc(var(--col) - 1px) var(--col));background-attachment:local;flex:none;margin:0;padding:1.1rem 0;overflow-x:auto;box-shadow:inset 0 .7rem 0 -.62rem #96221680,inset 0 -.7rem 0 -.62rem #96221680}.columns span{cursor:pointer;transition:color .6s,background-color .6s}.columns .unread{color:#2a1b104d}.columns .now{color:#140b05;background:#aa2c181f}.roller{width:1.1rem;height:calc(var(--silk-h) + 1.6rem);z-index:1;background:linear-gradient(90deg,#2e1a0e,#7a4e2c 45%,#3a2212);border-radius:.4rem;flex:none;position:relative}.roller.left{background:linear-gradient(90deg,#2e1a0e,#caa872 30%,#7a4e2c 60%,#3a2212);width:1.7rem;margin-left:.6rem}.roller:before,.roller:after{content:"";background:linear-gradient(90deg,#3f6d58,#9cc7ae 50%,#3f6d58);border-radius:.3rem;width:1.6rem;height:.9rem;position:absolute;left:50%;translate:-50%}.roller:before{top:-.45rem}.roller:after{bottom:-.45rem}.reader-notes{background:var(--night);border:1px solid #c99a454d;border-radius:8px;width:min(58rem,100%);min-height:7.2rem;padding:.8rem 1.1rem;animation:1s 1.2s both fade-in}.reader-notes p{margin:0 0 .4rem}.reader-notes p b{color:var(--gold);margin-right:.6rem}.reader-notes .glosses{opacity:.9;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));font-size:.9rem}.reader .actions,.reader .disclosure{margin:0}.actions.lead{justify-content:flex-start;margin:0 0 .6rem}.row{flex-wrap:wrap;gap:.4rem;display:flex}.modal.wide{width:min(60rem,100%)}.paper .line.now{background:#c99a4559;border-radius:3px}.tabs{gap:.4rem;margin:.4rem 0 .8rem;display:flex}.bag{gap:.6rem;padding:0;list-style:none;display:grid}.bag li{border-left:3px solid var(--gold);padding-left:.7rem}.bag .sub{opacity:.7;margin-left:.6rem;font-size:.85rem}.bag blockquote{margin:.2rem 0 0}.narration p{margin:.25rem 0;transition:opacity .3s}.narration p.unread{opacity:.35}.narration p.now{color:var(--red)}.narration b{margin-right:.5rem}.order{gap:.4rem;margin:.6rem 0;padding:0;list-style:none;display:grid}.order.placed{counter-reset:card;border:1px dashed #c7b48a;border-radius:8px;min-height:2.6rem;padding:.4rem}.order.placed li{counter-increment:card}.order.placed li button:before{content:counter(card) "．";font-weight:700}.order button{text-align:left;align-items:baseline;gap:.6rem;width:100%;display:flex}.order button b{white-space:nowrap;color:var(--red)}.order button span{opacity:.8;font-size:.9rem}.order li.wrong button{border-color:var(--red);box-shadow:0 0 0 2px #8a2e2459}.chapters{text-align:left;gap:.35rem;margin:.6rem 0 0;padding:0;list-style:none;display:grid}.chapters button{justify-content:space-between;align-items:baseline;gap:1rem;width:100%;display:flex}.chapters button.current{border-width:2px}.chapters small{opacity:.7}.chapters-box{margin-top:1rem}.chapters-box summary{cursor:pointer;opacity:.85}.gate{width:min(30rem,100% - 2rem);color:var(--ink);background:#f3ead6f5;border-radius:10px;flex-direction:column;display:flex;position:fixed;top:1rem;bottom:1rem;right:1rem;overflow:hidden;box-shadow:0 20px 60px #00000080}.gate>header{border-bottom:1px solid var(--paper-2);padding:.9rem 1.2rem .6rem}.gate h2{color:var(--red);margin:.1rem 0 .4rem}.gate .eyebrow{color:var(--ink)}.gate .body{flex:1;padding:.4rem 1.2rem 1rem;line-height:1.8;overflow-y:auto}.gate button{color:var(--ink);background:var(--paper-2);border-color:#c7b48a}.gate button.primary,.gate button[aria-pressed=true]{background:var(--red);color:var(--paper);border-color:var(--red)}.gate .disclosure{margin:0;padding:.4rem 1.2rem .6rem}.gate .toggles{justify-content:flex-start}.gate-draft{border-bottom:1px solid var(--paper-2);max-height:40%;padding:0 1.2rem;overflow-y:auto}.links,.review{padding:0;list-style:none}.links blockquote{margin:.2rem 0}.review li{border-radius:6px;margin:.3rem 0;padding:.4rem .6rem;display:grid}.review li.gold{background:#c99a454d}.review li.grey{color:#555;background:#7878782e}.review blockquote{margin:.2rem 0 0;font-size:.9rem}@media (max-width:720px){.gate{width:auto;height:58%;inset:auto .5rem .5rem}}.brand{left:calc(1.5rem + env(safe-area-inset-left));top:calc(1.2rem + env(safe-area-inset-top));color:#fff;z-index:2;align-items:center;gap:8px;text-decoration:none;display:inline-flex;position:absolute}.brand img{object-fit:contain;width:40px;height:44px}.brand span{letter-spacing:-.07rem;font-family:Fredoka,Nunito,Varela Round,system-ui,sans-serif;font-size:32px;font-weight:600;line-height:1}.brand b{color:#ff7928;font-weight:inherit}.hud{align-items:center}.hud>.hud-mascot{object-fit:contain;filter:drop-shadow(0 2px 8px #00000080);pointer-events:none;flex:none;width:34px;height:38px}.hud>.hud-title{flex:1}.feedback{align-items:flex-start;gap:.6rem;display:flex}.feedback .guide{object-fit:contain;flex:none;width:30px;height:33px}@media (max-width:700px){.brand{left:calc(.9rem + env(safe-area-inset-left));top:calc(.7rem + env(safe-area-inset-top))}.brand img{width:28px;height:31px}.brand span{font-size:24px}.hud{flex-wrap:wrap;gap:.4rem .6rem;padding:.6rem .8rem}.hud>.hud-title{flex:calc(100% - 50px);min-width:0}.hud>.hud-title strong{font-size:1.05rem}.hud>.hud-title .outline{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.hud>:last-child:not(.hud-title){margin-left:auto}.prompt{text-align:center;width:max-content;max-width:calc(100% - 2rem);bottom:calc(.8rem + env(safe-area-inset-bottom));border-radius:12px;font-size:.85rem}.tracker{bottom:calc(4.6rem + env(safe-area-inset-bottom))}}.modal .body>.actions:last-child,.modal .body .actions.sticky{background:linear-gradient(#f3ead600, var(--paper) 35%);margin:1rem -1.4rem -1.2rem;padding:.7rem 1.4rem;position:sticky;bottom:-1.2rem}
