/* 笛 flute — court dark. play notes, hear the pattern. */
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#040304}
body{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#fff5ee;line-height:1.65;font-size:16px}
.ghost{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:64vw;line-height:1;color:#10a0a0;opacity:.06;pointer-events:none;z-index:0}
main{position:relative;z-index:1;max-width:38em;margin:0 auto;padding:2.2em 1.2em 4em}
.home{font-size:.85em;margin:0 0 1.6em}
.home a{color:#10a0a0;text-decoration:none}
.home a:hover{text-decoration:underline}
.seat{color:#9a8f9a;font-size:.85em;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .4em}
h1{font-size:1.7em;font-weight:400;margin:0 0 .5em}
h1 .zh{color:#10a0a0}
#readout{font-size:.95em;margin:0 0 1em;font-variant-numeric:tabular-nums;min-height:1.65em}
#readout b{color:#10a0a0;font-weight:400}
#notes{display:flex;gap:.6em;margin:0 0 1em;flex-wrap:wrap}
#notes button{font:inherit;font-size:1em;background:none;border:1px solid #211921;border-radius:10px;padding:.6em .8em;color:#fff5ee;cursor:pointer;min-width:4.4em;text-align:center}
#notes button:hover,#notes button:focus-visible{border-color:#10a0a0;outline:none}
#notes button.sounding{border-color:#e8a33d;color:#fff5ee}
#notes button .zh{font-size:1.4em;display:block;color:#10a0a0}
#notes button .nm{font-size:.75em;color:#9a8f9a;display:block}
#notes button .ky{font-size:.7em;color:#9a8f9a;display:block}
#strip{display:flex;gap:.35em;min-height:2.2em;flex-wrap:wrap;margin:0 0 1em;padding:.5em;border-top:1px solid #211921;border-bottom:1px solid #211921}
#strip .n{border:1px solid #211921;border-radius:6px;padding:.2em .5em;color:#fff5ee}
#strip .n.hit{border-color:#10a0a0;color:#10a0a0}
#strip .empty{color:#9a8f9a;font-size:.85em}
#controls{display:flex;gap:.6em;margin:0 0 1.6em;flex-wrap:wrap}
#controls button{font:inherit;font-size:.82em;background:none;border:1px solid #211921;border-radius:20px;padding:5px 13px;color:#9a8f9a;cursor:pointer}
#controls button:hover{border-color:#10a0a0;color:#fff5ee}
#essay{margin-top:2em;border-top:1px solid #211921;padding-top:1.2em}
#essay h1{display:none}
#essay h2{font-size:.95em;font-weight:400;color:#9a8f9a;margin:1.2em 0 .4em;letter-spacing:.08em;text-transform:uppercase}
#essay p{margin:.7em 0;font-size:.92em}
#essay strong{color:#fff5ee}
#badge{margin-top:2em;font-size:12px;color:#9a8f9a;opacity:.7}
@media(max-width:700px){body{font-size:15px}}