:root{--ink:#314738;--muted:#7d826f;--line:#c8cbb9;--gold:#a17b3e}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#ebe9dc;color:var(--ink);font-family:"Microsoft YaHei",sans-serif}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}#scene{position:absolute;top:72px;bottom:174px;left:16px;right:16px;touch-action:none}canvas{display:block;width:100%;height:100%}.grain{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 130px #a89e7820}header{position:absolute;inset:24px 32px auto;display:flex;align-items:center;gap:22px;z-index:2}.brand{color:var(--ink);font-family:serif;font-size:26px;letter-spacing:5px;text-decoration:none;white-space:nowrap}.brand small{font:7px Arial;letter-spacing:2px;display:block;margin-top:6px}.edition{margin-left:auto;font-size:10px;line-height:1.9;letter-spacing:2px;text-align:right;color:var(--muted)}#full{border:1px solid var(--line);background:transparent;border-radius:50%;width:38px;height:38px;font-size:24px}main{pointer-events:none}.intro{position:absolute;left:32px;bottom:94px;width:220px;z-index:2}.eyebrow,h1,.intro>p,.tree-label{display:none}.stage{display:flex;align-items:center;gap:12px}.stage>span{font:30px Georgia;color:#8d9879}.stage small{display:block;font-size:9px;color:var(--muted);margin-bottom:6px;letter-spacing:2px}.stage strong{font-size:11px;font-weight:400}.track{height:2px;background:#cdd0bd;margin-top:13px}.track i{display:block;background:#71835d;height:100%;transition:width 1s}.stats{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:10px}.stats b{font:16px Georgia;color:var(--ink);margin:0 4px}.interaction{position:absolute;bottom:53px;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 32px));text-align:center;min-height:107px;z-index:3}.step{font-size:9px;letter-spacing:4px;color:var(--muted)}h2{font-family:serif;font-size:20px;letter-spacing:3px;font-weight:400;margin:10px 0 14px}.primary{border:0;border-radius:30px;background:#3d5442;color:#fff;min-height:46px;min-width:220px;padding:12px 24px;font-size:12px;letter-spacing:3px;box-shadow:0 6px 18px #34453c18}.primary span{margin-left:40px}.choice-heading{font-size:11px;letter-spacing:2px;margin:0 0 10px}.choice-heading button{background:transparent;border:0;font-size:11px;min-height:30px;color:var(--muted);margin-left:16px}.cards{display:flex;gap:10px;justify-content:center}.cards button{flex:1;max-width:116px;min-height:70px;padding:12px 8px;border:1px solid #bcc4ae;background:#f3f3e9dd;border-radius:12px;transition:background .2s,transform .2s}.cards button:hover{background:#dce3ce;transform:translateY(-3px)}.cards b{display:block;font:20px serif;letter-spacing:4px}.cards span{display:block;font-size:9px;letter-spacing:2px;margin-top:5px}#playing h2{font-size:18px}#playing p{font-size:11px;color:var(--muted);margin:8px 0}.pulse{display:block;font-size:21px;color:#af8b43;animation:breath 2s infinite}@keyframes breath{50%{opacity:.4}}footer{position:absolute;bottom:18px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:2px;color:var(--muted);z-index:4}footer i{font-style:normal;margin:0 9px;color:#a8af97}footer button{border:0;background:transparent;color:var(--muted);font-size:10px;padding:8px}.hint{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}dialog{border:1px solid var(--line);border-radius:16px;padding:26px;background:#f3f1e6;color:var(--ink);max-width:calc(100vw - 30px)}dialog::backdrop{background:#253b3540;backdrop-filter:blur(6px)}dialog p{font-size:12px;line-height:2}dialog button{border:1px solid var(--line);background:transparent;padding:10px;margin:4px;border-radius:6px}.preview-buttons{display:flex;flex-wrap:wrap}#error{position:absolute;top:45%;left:20%;background:white;padding:20px}button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}#previewNote{position:absolute;top:84px;left:50%;transform:translateX(-50%);z-index:3;font-size:11px;color:#836b42;background:#f6f3e6e8;border:1px solid #c7b993;padding:8px 16px;border-radius:20px;white-space:nowrap}
@media(max-aspect-ratio:1/1){header{inset:20px 22px auto}.edition{display:none}#full{margin-left:auto}#scene{top:110px;bottom:240px;left:8px;right:8px}.intro{left:24px;right:24px;bottom:175px;width:auto}.stage{gap:10px}.stage>span{font-size:25px}.stage small{display:none}.track{margin-top:8px}.stats{margin-top:7px}.interaction{bottom:52px;min-height:105px}footer{left:18px;right:18px;font-size:8px;letter-spacing:0}.hint{display:none}footer i{margin:0 4px}.brand{font-size:25px}#previewNote{top:82px}}
@media(min-aspect-ratio:1/1) and (max-width:1000px){.intro{left:22px;width:180px;bottom:64px}.interaction{left:auto;right:20px;transform:none;width:420px;bottom:48px}#scene{bottom:166px}.hint{display:none}}
@media(max-height:540px) and (min-aspect-ratio:1/1){header{inset:12px 20px auto}.brand{font-size:20px}.brand small{display:none}.edition{font-size:8px}#scene{top:53px;bottom:108px}.intro{bottom:48px;width:180px}.interaction{bottom:34px;min-height:65px;width:360px}.step,.interaction h2{display:none}.cards button{min-height:48px;padding:5px}.cards b{font-size:17px}.choice-heading{margin:0}.primary{min-height:40px}.pulse{display:none}#playing h2{display:block;font-size:13px}footer{bottom:5px}#previewNote{top:50px}}
#scene{mask-image:linear-gradient(to bottom,transparent,black 3%,black 97%,transparent)}
.primary:disabled{opacity:.6;cursor:default}
@media(max-aspect-ratio:1/1){#scene{top:86px;bottom:222px}}
/* Exhibition interface: restrained typography, generous touch targets, unified motion. */
body{background:#e5d8bb}header{inset:24px 4% auto}.brand{font-size:30px}.brand small{font:10px "Microsoft YaHei";letter-spacing:5px}.grain{box-shadow:inset 0 0 110px #8d754528}#scene{inset:80px 0 145px;mask-image:linear-gradient(transparent,black 4%,black 91%,transparent)}.edition{font-size:11px}.interaction{bottom:46px;min-height:98px}h2{font-size:24px}.intro{left:4%;bottom:70px}.primary{background:#354b38;box-shadow:0 8px 28px #31473824;min-height:50px}.cards button{background:#f7efdfd9;border-color:#b8b59e;box-shadow:0 4px 20px #6755300c}.cards button:nth-child(1):before{content:'⌁'}.cards button:nth-child(2):before{content:'↟'}.cards button:nth-child(3):before{content:'⋈'}.cards button:nth-child(4):before{content:'❋'}.cards button:before{display:block;font-size:24px;color:#8c7547;margin-bottom:4px}.cards b{font-size:18px}.cards button{min-height:90px}.interaction:has(#choices:not([hidden])){bottom:42px}button{transition:background .25s,color .25s,box-shadow .25s,transform .25s,opacity .25s}button:active{transform:scale(.96)}button:hover{filter:brightness(1.04)}.interaction>div:not([hidden]){animation:arrive .45s ease both}@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}dialog[open]{animation:arrive .3s ease}dialog{width:460px;border:1px solid #c1b596;box-shadow:0 30px 120px #30281844;background:#f6f0e3;padding:30px}dialog input[type=password],dialog input:not([type]){display:block;width:100%;padding:13px;border:1px solid #c7bea9;background:#fffaf1;border-radius:8px;font:16px sans-serif;margin:10px 0 18px}dialog label{font-size:13px}dialog small{letter-spacing:3px;color:#8b7957}.switches{border-top:1px solid #d9cfbb;border-bottom:1px solid #d9cfbb;margin:18px 0}.switches label{display:flex;justify-content:space-between;align-items:center;padding:13px 0}.switches input{width:22px;height:22px;accent-color:#425e44}dialog h3{font-size:14px;font-weight:500}.danger{color:#9d503a;border-color:#c99e8b!important}#loginError,#resetError,#adminStatus{color:#a14b36;min-height:18px}.growth-caption{font-size:10px;letter-spacing:4px;color:#897242}.pulse{display:none}#placement{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);z-index:5;width:max-content;max-width:95%;text-align:center;background:#f6efdfed;border:1px solid #c6b789;border-radius:40px;padding:15px 22px;box-shadow:0 8px 30px #66552e12;animation:arrive .3s}#placement span{font-size:14px}#placement button{border:0;background:none;color:#817761;font-size:11px;margin-left:18px}#contribution{position:absolute;pointer-events:none;border:1px solid #c6a95a;background:#fffae9e8;color:#796030;font-size:11px;letter-spacing:2px;padding:9px 13px;border-radius:20px;transform:translate(-50%,-160%);z-index:3;white-space:nowrap;transition:opacity .4s}body.placing #scene{cursor:crosshair}body.placing .interaction{opacity:0;pointer-events:none}.interaction{transition:opacity .3s}.hint{font-size:9px}footer{left:4%;right:4%;letter-spacing:1px}
@media(max-aspect-ratio:1/1){header{inset:22px 22px auto}.brand{font-size:27px}#scene{inset:85px 0 245px}.intro{left:24px;right:24px;bottom:190px}.interaction{bottom:54px}h2{font-size:21px}.cards{gap:7px}.cards button{min-height:90px;padding:8px 5px}.cards button:before{font-size:20px}.interaction:has(#choices:not([hidden])){bottom:50px}#placement{bottom:85px}#placement span{font-size:12px}#placement button{margin-left:8px}}
@media(max-height:540px) and (min-aspect-ratio:1/1){#scene{inset:56px 0 115px}.cards button:before{display:none}.cards button{min-height:48px}.interaction{bottom:35px}.interaction:has(#choices:not([hidden])){bottom:30px}header{inset:12px 20px auto}.intro{bottom:45px}}
@media(prefers-reduced-motion:reduce){*,*:before{animation-duration:.01ms!important;transition-duration:.01ms!important}}
dialog{max-height:calc(100dvh - 32px);overflow-y:auto}#settings .preview-buttons button{flex:1;min-width:54px;font-size:12px}#settings>button{min-height:42px;font-size:12px}.interaction #playing{animation:arrive .45s ease}
/* A single shape language across every control. */
button,.primary,.cards button,dialog,#placement,#previewNote,#contribution,#full{border-radius:8px}#full{width:38px;height:38px}.cards button:before{color:#6e8057}.cards button{box-shadow:none}.primary{box-shadow:0 5px 15px #31473812}#placement{box-shadow:none}.grain{box-shadow:inset 0 0 100px #8d75451a}#contribution{display:none!important}.growth-caption{display:none}#playing h2{font-size:16px;letter-spacing:2px}#playing p{font-size:11px}.interaction .step{letter-spacing:2px}
@media(max-aspect-ratio:1/1) and (max-height:760px){#scene{top:72px;bottom:195px}.intro{bottom:148px}.interaction{bottom:35px;min-height:90px}.interaction h2{font-size:19px;margin:8px 0 12px}.interaction .step{font-size:8px}.interaction:has(#choices:not([hidden])){bottom:40px}.cards button{min-height:80px}footer{bottom:10px}.brand{font-size:24px}}
#placement{animation:placement-in .3s ease both}@keyframes placement-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}