:root{--paper:#f0f3f3;--ink:#273d43;--muted:#64787e;--line:#ced9dc;--accent:#315e71;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:16px;color:var(--ink);background:var(--paper);line-height:1.65}*{box-sizing:border-box;letter-spacing:0}body{margin:0}button,a{color:inherit;touch-action:manipulation}button{font:inherit;cursor:pointer;border:0;background:none}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #315eaa;outline-offset:4px}button svg{width:20px;height:20px;flex:none;stroke-width:1.7}header{height:72px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);padding:0 36px}header>a{font:600 23px Georgia,"Songti SC",serif;text-decoration:none}header small{font-size:11px;font-weight:400;margin-left:6px}header>span{font-size:12px;color:var(--muted);margin-left:auto}.icon{width:44px;height:44px;border:1px solid var(--line);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex:none}.icon:hover,.secondary:hover{background:#fff}.heading{max-width:1080px;margin:24px auto 0;padding:0 24px}.eyebrow{font-size:12px;color:var(--muted);margin:0 0 5px}h1{font:600 30px/1.45 "Songti SC",serif;margin:0;text-wrap:balance}.heading>p:last-child{font-size:14px;color:var(--muted);margin:8px 0 0}#stage{position:relative;height:min(58svh,500px);min-height:340px;max-width:1100px;margin:0 auto;isolation:isolate}canvas{width:100%;height:100%;display:block;touch-action:none}#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--paper);z-index:3}#anchors{position:absolute;inset:0;pointer-events:none}.key-label{position:absolute;transform:translate(-50%,0);padding:3px 10px;min-width:100px;min-height:46px;line-height:1.4;font-size:14px;font-weight:600;pointer-events:auto;border-bottom:1px solid #91a8b1;background:#f0f3f3e6}.key-label>span{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:3px}.part-label{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:12px;background:#f0f3f3e8;padding:4px 8px;border-left:2px solid var(--accent)}.view{position:absolute;right:20px;top:16px;background:#f0f3f3b0}.interaction{max-width:700px;text-align:center;margin:4px auto 0;padding:0 18px}#hint{min-height:48px;font-size:16px;margin:0 0 12px;text-wrap:balance}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;align-items:center}.primary,.secondary{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;padding:10px 18px;font-size:14px}.primary{color:#fff;background:var(--accent)}.primary:hover{background:#264c5b}.secondary{border:1px solid var(--line)}.notes{max-width:700px;margin:26px auto;padding:0 18px;color:var(--muted);font-size:12px}.notes summary{min-height:44px;cursor:pointer}.notes p{margin-top:0}.notes a{display:inline-block;min-height:44px}dialog{width:min(620px,calc(100% - 32px));border:1px solid var(--line);border-radius:8px;padding:24px;max-height:88dvh;color:var(--ink);background:#fff}dialog::backdrop{background:#1b394657;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;gap:18px;justify-content:space-between}h2{font-size:21px;margin:0}dialog ol{padding-left:24px}dialog li{margin:20px 0}dialog p{margin:6px 0;color:var(--muted);font-size:15px}[hidden]{display:none!important}
@media(max-width:720px){header{height:58px;padding:0 18px;gap:12px}header small{display:none}header>span{font-size:11px}.heading{margin-top:18px;padding:0 18px}h1{font-size:25px}.heading>p:last-child{font-size:13px;max-width:28em}#stage{height:360px;min-height:360px}.view{right:16px;top:5px}.part-label{font-size:11px}.key-label{min-width:90px;font-size:13px}.interaction{margin-top:0}#hint{font-size:14px;min-height:48px}.actions{gap:8px}.primary,.secondary{font-size:13px;padding:9px 12px}.notes{margin-top:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
#stage{height:min(61svh,560px)}
#stage:fullscreen,#stage.expanded{width:100vw;max-width:none;height:100dvh;margin:0;background:var(--paper)}
#stage.expanded{position:fixed;inset:0;z-index:100}
.view{z-index:5;pointer-events:auto}
@media(max-width:720px){#stage{height:360px}}

/* Keep controls outside the projected model bounds, including fullscreen. */
:root{--paper:#f5f6f2;--ink:#293d35;--accent:#345d4b;--line:#d7dfd7}
header{height:52px;padding:0 28px;max-width:1440px;margin:auto}
header>a{font-size:20px}header>span{font-size:11px}
#reset{margin-left:auto}
.heading{margin:14px auto 0;max-width:1100px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.eyebrow{display:none}h1{font-size:24px;line-height:1.4}
.heading>p:last-child{margin:0;font-size:13px;width:100%}
#stage{height:clamp(430px,65svh,680px);max-width:1180px;padding-bottom:60px}
#anchors{inset:0 0 60px}
.key-label{top:auto!important;bottom:-54px;left:38%!important;transform:translateX(-50%);min-height:44px;min-width:130px;padding:6px 14px;background:#f5f6f2;border:1px solid var(--line);border-radius:6px;font-size:14px}
.key-label[data-key="1"]{left:62%!important}
.key-label>span{display:none}
.part-label{transform:none;top:14px!important;left:20px!important;max-width:calc(100% - 90px);font-size:12px;white-space:normal;background:#f5f6f2ed}
#core-label{top:48px!important}
.interaction{margin:12px auto 0;max-width:800px;padding-top:12px;border-top:1px solid var(--line)}
#hint{font-size:14px;min-height:24px;margin-bottom:10px}
.notes{margin:18px auto}
#stage:fullscreen,#stage.expanded{padding:60px 0 70px;height:100dvh}
#stage:fullscreen #anchors,#stage.expanded #anchors{inset:0 0 70px}
@media(max-width:720px){header{padding:0 16px;height:48px}header>span{display:none}.heading{margin-top:12px;padding:0 16px;gap:4px 12px}h1{font-size:21px}.eyebrow{font-size:11px}.heading>p:last-child{font-size:12px}#stage{height:clamp(390px,61svh,580px);min-height:390px}.key-label{left:28%!important;min-width:112px}.key-label[data-key="1"]{left:72%!important}.interaction{margin:10px 16px 0;padding:10px 0 0}.part-label{left:12px!important}.view{top:12px;right:12px}}
