:root{--paper:#edece5;--ink:#303d34;--muted:#7c8379;--line:#cfd3c8;--accent:#966750}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:13px/1.7 system-ui,"Microsoft YaHei",sans-serif;overflow:hidden}#scene{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:fixed;top:0;left:0;right:0;height:86px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}header span{color:var(--muted);font-size:11px;letter-spacing:2px}.brand{color:var(--ink);text-decoration:none;letter-spacing:2px;font-size:11px;font-weight:650;pointer-events:auto}.brand i{font-style:normal;color:#a2a99a;margin:0 12px}aside{position:fixed;left:40px;top:130px;width:234px}.eyebrow{font-size:8px;letter-spacing:1.65px;color:var(--accent);font-weight:700}h1{font:400 34px/1.4 Georgia,"Songti SC",serif;margin:18px 0 18px;letter-spacing:3px}h1 span{display:block;font:italic 21px/1.7 Georgia,serif;letter-spacing:0}p{font-size:12px;color:var(--muted);line-height:1.9}.rule{height:1px;background:var(--line);margin:26px 0 22px;width:30px}.label{font-size:10px;letter-spacing:2px;color:var(--muted);margin-bottom:10px}.modes{display:grid;gap:3px}button{font:inherit;color:inherit;cursor:pointer}.modes button{display:flex;align-items:center;text-align:left;border:0;border-radius:3px;background:transparent;padding:10px 12px;font-size:12px;transition:background .2s}.modes b{font:10px Georgia,serif;margin-right:16px;opacity:.55}.modes button span{margin-left:auto;opacity:.55}.modes .active{background:#344b3e;color:#fff}.modes button:hover:not(.active){background:#dce0d4}.second{margin-top:24px}.toggle{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font-size:11px;cursor:pointer}.toggle input{position:absolute;opacity:0}.toggle i{width:27px;height:15px;border:1px solid #aeb7a8;border-radius:20px;position:relative;transition:.2s}.toggle i:after{content:"";position:absolute;width:9px;height:9px;left:2px;top:2px;border-radius:50%;background:#aeb7a8;transition:.2s}.toggle input:checked+i{background:#536b51;border-color:#536b51}.toggle input:checked+i:after{background:#f2f0e9;transform:translateX(12px)}.toggle input:focus-visible+i{outline:2px solid var(--accent);outline-offset:3px}#reset{border:0;background:none;margin:20px 0 0;padding:6px 12px;font-size:11px;color:var(--muted)}.note{margin:22px 0 0 12px;font-size:9px;color:#8e9389}footer{position:fixed;bottom:25px;left:40px;right:40px;display:flex;justify-content:space-between;font-size:9px;color:var(--muted);letter-spacing:1px;pointer-events:none}footer i{margin:0 10px;font-style:normal}.annotation{position:fixed;bottom:82px;left:calc(50% + 70px);display:flex;gap:9px;align-items:center;font-size:10px;color:#75806e;pointer-events:none}.dot{height:5px;width:5px;border-radius:100%;background:#6e8361}#status{position:fixed;top:100px;right:40px;font-size:10px;color:var(--muted)}@media(max-width:800px){header{padding:0 20px;height:64px}header span{display:none}aside{left:20px;top:80px;width:170px}h1{font-size:28px;margin:12px 0}h1 span{font-size:17px}aside>p,.rule,.eyebrow,.note{display:none}.label{margin-top:18px}.second{margin-top:12px}.modes button{padding:7px 10px;font-size:11px}.toggle{padding:4px 10px}#reset{margin-top:8px}footer{left:20px;right:20px;bottom:18px}footer span:last-child{display:none}.annotation{left:20px;bottom:48px}#status{top:72px;right:20px;font-size:9px}}@media(max-width:520px){aside{top:auto;bottom:83px;width:calc(100% - 40px);padding:12px;background:#edece5eb;border:1px solid #d8ddcf;border-radius:6px;display:grid;grid-template-columns:1fr 1fr;gap:0 14px}h1{font-size:20px;grid-column:1/-1;margin:0 0 6px}h1 span{display:inline;font-size:15px;margin-left:12px}.label{display:none}.modes{grid-row:2/6}.modes b{margin-right:8px}.toggle{font-size:10px;padding:3px}#reset{font-size:10px;padding:4px 10px;margin:3px 0}header{height:58px}.annotation{bottom:52px}#status{top:65px}}
body[data-view="inside"] aside{background:rgba(237,236,229,.94);padding:20px;margin-left:-20px;margin-top:-20px;border-radius:5px;box-shadow:0 8px 50px #27372e12}body[data-view="inside"] header{background:linear-gradient(#edece5cf,transparent)}body[data-view="inside"] #status{background:#edece5c9;padding:4px 10px;border-radius:20px}

#asset-readout{font-size:9px;color:#577250;margin:12px 12px 0}aside .note{margin-top:9px}@media(max-width:520px){#asset-readout{display:none}}

:root{--paper:#b9c4c9;--ink:#2e4249;--muted:#5e747e;--line:#9caeb6;--accent:#596d75}body[data-view="inside"] aside{background:rgba(206,215,216,.94)}.annotation{color:#526d79}.dot{background:#6d8d9b}aside .note{font-size:8px;line-height:1.7}#asset-readout{color:#496771}h1{margin-bottom:12px}.rule{margin:20px 0 16px}.second{margin-top:18px}#reset{margin-top:12px}@media(min-width:801px) and (max-height:800px){aside{top:105px}h1{font-size:30px;margin:12px 0}.rule{margin:16px 0 12px}.modes button{padding:8px 12px}.second{margin-top:14px}#asset-readout{margin-top:7px}.note{margin-top:5px!important}.toggle{padding:4px 12px}}
@media(min-width:521px) and (max-width:800px){aside{top:auto;bottom:80px;left:20px;width:calc(100% - 40px);padding:12px 16px;background:#cdd7dbe8;border:1px solid #a2b3b9;border-radius:6px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}aside h1{font-size:20px;grid-column:1/-1;margin:0 0 5px}aside h1 span{display:inline;font-size:15px;margin-left:12px}.label,.note,#asset-readout{display:none}.modes{grid-row:2/7}.modes button{padding:7px 10px}.toggle{padding:3px 10px}#reset{font-size:10px;padding:3px 10px;margin:0}.annotation{left:20px;bottom:49px}body[data-view="inside"] aside{padding:12px 16px;margin:0;background:#cdd7dbeb}}

:root{--paper:#f1ecdf;--ink:#3e443b;--muted:#777c6d;--line:#d0cabb;--accent:#81765b}header .brand{font-family:Georgia,serif;letter-spacing:2px}.modes .active{background:#4d5949}.sketch-controls{border-top:1px solid #c6c3b5;margin:13px 0 0;padding-top:7px}.ink-slider{display:block;padding:3px 12px;font-size:10px;color:#747b6c}.ink-slider span{display:flex;justify-content:space-between}.ink-slider b{font:10px Georgia,serif}.ink-slider input{width:100%;accent-color:#58634d;height:13px;margin:4px 0 0}.annotation{color:#797962}.dot{background:#77805d}#asset-readout{color:#747b67}body[data-view="inside"] aside{background:#f1ecdfef}body[data-view="inside"] header{background:linear-gradient(#f1ecdfb0,transparent)}body[data-view="inside"] #status{background:#f1ecdfb0}@media(min-width:801px) and (max-height:850px){aside{top:93px}.eyebrow{font-size:7px}h1{font-size:29px;margin:9px 0}h1 span{font-size:18px}aside>p{font-size:11px;margin:5px 0}.rule{margin:14px 0 11px}.modes button{padding:6px 12px}.second{margin-top:12px}.toggle{padding:3px 12px}.sketch-controls{margin-top:8px;padding-top:4px}#reset{margin-top:6px}aside .note{font-size:7px;line-height:1.45}}@media(max-width:800px){aside{background:#f1ecdfeb!important}.sketch-controls{grid-column:2;grid-row:6/8;margin:3px 0 0;padding:3px 0 0}#reset{grid-column:1;grid-row:7}.ink-slider{padding:2px 10px}.modes{grid-row:2/7!important}.annotation{bottom:49px}body[data-view="inside"] aside{background:#f1ecdfef!important}}