
:root{--bg:#0f172a;--panel:#1e293b;--panel2:#22304a;--line:#334155;--ink:#e2e8f0;--muted:#94a3b8;--accent:#38bdf8;--muscle:#cf7166;--bone:#ece0bf;--blue:#7dd3fc;--gold:#fbbf24}*{box-sizing:border-box}body{margin:0;font:14px/1.6 ui-sans-serif,system-ui,-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:none;border:1px solid var(--line);border-radius:6px;padding:7px 11px;transition:background .15s}button:hover{background:#22304a}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.38;cursor:default}button.active,button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#0b1120}button.primary{background:var(--accent);color:#0b1120;border-color:var(--accent)}button.quiet{border-color:transparent;color:var(--muted)}input,select{width:100%;background:#0b1120;border:1px solid var(--line);border-radius:5px;color:var(--ink);padding:9px}input[type=range]{accent-color:var(--accent);padding:0;border:0}input[type=checkbox]{width:auto;accent-color:var(--accent)}header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 26px;gap:26px;background:var(--bg)}.brand{display:flex;gap:12px;align-items:center;white-space:nowrap}.brand-mark{font-size:26px;color:var(--accent);font-weight:300;border:1px solid #5c7762;border-radius:50%;width:40px;height:40px;text-align:center;line-height:36px}.wordmark{font-size:20px;letter-spacing:4px;font-weight:600;line-height:1.3}.brand small{font-size:9px;letter-spacing:2.6px;color:var(--muted)}nav{display:flex;gap:5px;align-self:stretch;align-items:center}nav button{border:0;border-radius:0;height:100%;padding:0 16px;color:var(--muted);border-bottom:2px solid transparent}nav button.active{background:none;color:var(--accent);border-color:var(--accent)}.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}.seg{display:flex;gap:2px;background:#0b1120;border:1px solid var(--line);padding:3px;border-radius:8px}.seg button{border:0;font-size:12px;padding:5px 9px}.workspace{display:grid;grid-template-columns:244px minmax(400px,1fr) 326px;height:calc(100vh - 104px);min-height:640px}.sidebar{background:var(--panel);overflow:auto;padding:23px 18px;border-right:1px solid var(--line)}.eyebrow{font-size:10px;letter-spacing:1.7px;color:var(--accent);text-transform:uppercase;font-weight:600}.sidebar h2{font-size:20px;font-weight:500;margin:4px 0 20px}.control-label{display:block;color:var(--muted);font-size:12px;margin:16px 0 7px}.search{margin-top:12px}.filter-row{display:flex;gap:6px}.filter-row select{font-size:12px}.list-title{display:flex;justify-content:space-between;margin:22px 0 10px;font-size:11px;color:var(--muted)}#structure-list{display:flex;flex-direction:column;gap:3px}.structure{border:0;border-radius:5px;padding:9px 8px;text-align:left;display:flex;gap:9px;align-items:center;font-size:12px}.structure.active{background:#12314a;color:var(--accent)}.structure.hidden-part{opacity:.5}.dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--muscle)}.dot.bone{background:var(--bone)}.dot.tendon{background:var(--blue)}.structure small{font-size:10px;color:var(--muted);display:block;margin-top:1px}.count{color:var(--muted)}#stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 36%,#22304a 0,#0f172a 52%,#0b1120 100%);min-width:0}#stage canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.stage-top{position:absolute;top:22px;left:25px;right:25px;display:flex;justify-content:space-between;gap:15px;align-items:flex-start;pointer-events:none}.stage-top>*{pointer-events:auto}.stage-title h1{font-size:17px;font-weight:500;margin:0 0 2px}.stage-title small{color:var(--muted);font-size:11px}.stage-tools{position:absolute;right:18px;top:91px;display:flex;flex-direction:column;gap:6px}.stage-tools button{background:#1e293bee;backdrop-filter:blur(8px);min-width:38px;font-size:12px}.legend{position:absolute;left:25px;top:92px;display:flex;gap:12px;font-size:10px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:6px;height:6px;border-radius:50%;display:inline-block}.label-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.mesh-label{position:absolute;font-size:11px;padding:5px 8px;color:#e2e8f0;border:1px solid #75878355;background:#0f172aee;backdrop-filter:blur(4px);border-radius:4px;max-width:180px;pointer-events:auto;white-space:normal;text-align:left;line-height:1.35}.mesh-label::before{display:none;content:'';position:absolute;left:-14px;top:50%;width:13px;border-top:1px solid #8da29b}.mesh-label.selected{background:#bae6fd;color:#0b1120;border-color:#bae6fd}.viewer-hint{position:absolute;bottom:124px;left:0;right:0;text-align:center;font-size:10px;color:#94a3b8;pointer-events:none}.bottom-controls{position:absolute;bottom:19px;left:23px;right:23px;border:1px solid #475569;background:#0f172aed;border-radius:10px;padding:12px 16px;backdrop-filter:blur(10px)}.control-top{display:flex;align-items:center;gap:14px}.control-top label{font-size:11px;white-space:nowrap}.control-top input{min-width:60px}.control-top output{font-size:11px;color:var(--accent);min-width:33px;text-align:right}.view-row{display:flex;gap:4px;align-items:center;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}.view-row button{font-size:11px;padding:4px 7px;border-color:transparent}.view-row .check{margin-left:auto;font-size:11px;display:flex;align-items:center;gap:4px}.inspector{overflow:auto;background:var(--panel);padding:24px 23px;border-left:1px solid var(--line)}.inspector h2{font-size:25px;font-weight:400;line-height:1.18;margin:10px 0 8px}.secondary-name{color:var(--muted);font-size:12px;margin-bottom:18px}.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}.tag{background:#334155;border-radius:3px;padding:3px 6px;font-size:10px;color:#cbd5e1}.detail-block{margin-top:18px}.detail-block h3{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);margin:0 0 6px}.detail-block p{font-size:13px;line-height:1.65;margin:0}.inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:18px 0}.inspector-actions button{font-size:12px}.teaching-note{margin-top:22px;border-left:2px solid var(--accent);padding-left:12px}.teaching-note h3{font-size:11px;color:var(--accent);margin:0 0 6px}.teaching-note p{font-size:12px;color:#cbd5e1;margin:0;line-height:1.65}.fine-print{font-size:10px;color:#94a3b8;line-height:1.6}.inspector .fine-print{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}.opacity{padding:13px 0;border-top:1px solid var(--line);margin-top:16px}.opacity .control-label{margin:0 0 8px;display:flex;justify-content:space-between}.restore{display:flex;gap:6px;margin-top:12px}.restore button{font-size:11px;flex:1}.lesson{width:100%;text-align:left;margin-top:10px;padding:13px 11px}.lesson span{display:block;font-size:10px;color:var(--muted);margin-top:3px}.lesson.active span{color:#0c4a6e}.lesson-text{font-size:12px;color:var(--muted);line-height:1.7;margin-top:20px}.lesson-badge{font-size:11px;color:var(--gold)}#movement-controls .control-top{gap:12px}.motion-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px}.motion-angle{position:absolute;left:25px;bottom:158px;font-size:50px;font-weight:300;letter-spacing:-2px;pointer-events:none;color:#dbe8dc}.motion-angle small{display:block;font-size:11px;letter-spacing:0;color:var(--muted)}footer{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-top:1px solid var(--line);color:#94a3b8;font-size:10px}footer button{border:0;font-size:10px;padding:0;color:var(--accent)}.loading{position:absolute;inset:0;z-index:50;background:#0f172a;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px}.loading strong{font-size:20px;font-weight:400}.loading .bar{width:220px;height:2px;background:#334155}.loading .bar span{display:block;width:55%;height:100%;background:var(--accent);animation:load 2s infinite alternate}@keyframes load{to{width:100%}}#toast{position:fixed;bottom:38px;left:50%;transform:translateX(-50%);padding:12px 20px;background:var(--accent);color:#0b1120;border-radius:8px;z-index:100;box-shadow:0 5px 30px #0008;font-size:13px;max-width:90%;text-align:center}dialog{background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--ink);max-width:700px;max-height:85vh;padding:28px}dialog::backdrop{background:#000a}dialog h2{font-weight:400}dialog p,dialog li{font-size:13px;line-height:1.7;color:#c0cdd0}dialog a{color:var(--accent)}dialog .close{float:right}#hover-tip{position:absolute;pointer-events:none;z-index:20;background:#0d181de8;border:1px solid #657875;padding:5px 9px;font-size:11px;border-radius:4px;max-width:220px}body.presentation .workspace{grid-template-columns:0 minmax(400px,1fr) 326px}body.presentation .sidebar{visibility:hidden;padding:0}body.presentation header{height:62px}body.presentation .workspace{height:calc(100vh - 90px)}[hidden]{display:none!important}
@media(min-width:1600px){.workspace{grid-template-columns:265px minmax(500px,1fr) 360px}.inspector{padding:28px}.inspector h2{font-size:29px}}
@media(max-width:1100px){.workspace{grid-template-columns:210px minmax(300px,1fr) 285px}header{padding:0 18px;gap:15px}.wordmark{font-size:17px}.header-right{gap:7px}.header-right>button{font-size:11px;padding:7px}.stage-top{left:15px;right:15px;flex-wrap:wrap}.stage-title{display:none}.legend{top:80px;left:15px}.inspector{padding:20px 17px}.stage-tools{top:110px}.mesh-label{max-width:130px;font-size:10px}}
@media(max-width:820px){header{height:auto;min-height:70px;flex-wrap:wrap;padding:12px 16px;gap:8px}.brand small{display:none}.brand-mark{width:30px;height:30px;font-size:20px;line-height:27px}.wordmark{font-size:15px}nav{order:3;width:100%;height:35px;justify-content:center}nav button{font-size:12px}.header-right{gap:4px}.header-right>button{font-size:10px}.workspace{height:auto;min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:650px auto}.sidebar{grid-row:2;max-height:600px;padding:20px 15px}#stage{grid-column:1/-1;grid-row:1}.inspector{grid-row:2;padding:20px 16px;max-height:600px}.stage-title{display:block}.legend{top:85px}.mesh-label{max-width:160px;font-size:11px}footer{height:auto;min-height:35px;gap:10px;font-size:9px;padding:8px 16px}.workspace .inspector h2{font-size:22px}body.presentation .workspace{grid-template-columns:1fr;height:auto}body.presentation .inspector{display:none}body.presentation .sidebar{display:none}body.presentation .workspace #stage{height:calc(100vh - 150px)}body.presentation header{height:auto}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Keep the structure index independently scrollable. */
.sidebar{display:flex;flex-direction:column;overflow:hidden}
#atlas-sidebar{display:flex;flex-direction:column;min-height:0;flex:1}
#atlas-sidebar> :not(#structure-list){flex-shrink:0}
#structure-list{overflow:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#4b5e61 transparent}
#motion-sidebar{min-height:0;overflow:auto;flex:1}
.opacity,.restore{flex-shrink:0}
@media(max-width:820px){.sidebar{height:650px;max-height:650px}.stage-top{top:15px}.stage-title h1{font-size:15px}.stage-title small{font-size:10px}.legend{display:none}.stage-tools{top:145px;right:10px}.stage-tools button{font-size:10px;min-width:32px;padding:5px}.mesh-label{max-width:125px;font-size:10px}.bottom-controls{left:12px;right:12px;padding:10px}.view-row{flex-wrap:wrap}.view-row button{font-size:10px;padding:4px}.viewer-hint{font-size:9px;padding:0 10px}.motion-angle{font-size:38px}}

footer{height:auto;min-height:62px;gap:6px 20px;flex-wrap:wrap;padding:9px 24px}footer .site-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}footer a{color:var(--accent)}.workspace{height:calc(100vh - 138px)}#support iframe{width:100%;height:560px;border:0;background:white}#support{width:min(560px,94vw)}#load-status{text-align:center;padding:0 18px}.loading .bar span{animation:none;width:0}.loading p{max-width:360px;text-align:center;padding:0 12px}@media(max-width:820px){.workspace{height:auto}footer{padding:12px 18px}}

/* Shared KryptoHead shell: live-site palette, wordmark, version and pill navigation. */
.site-header{height:60px;gap:18px;padding:0 24px;background:#0f172adb;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.site-wordmark{font-size:17px;font-weight:650;letter-spacing:-.6px;color:var(--ink);text-decoration:none;white-space:nowrap}.site-wordmark span{color:var(--accent);font-weight:400}.site-wordmark:hover{color:white}
.version-badge{font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:2px 6px;white-space:nowrap}
.workspace-nav{margin-left:auto;align-self:center;display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:#1e293bb8}
.workspace-nav a{padding:6px 15px;border-radius:999px;color:var(--muted);font-size:12px;font-weight:550;letter-spacing:.3px;text-decoration:none;white-space:nowrap}.workspace-nav a:hover{color:var(--ink);background:var(--panel2)}.workspace-nav a.active{color:var(--accent);background:#38bdf812}
.language-switch{border-radius:999px;background:#1e293bb8;flex-shrink:0}.language-switch button{border-radius:999px;padding:5px 12px;font-size:12px;line-height:1.3;color:var(--muted)}.language-switch button.active{background:var(--accent);color:#0b1120}
.app-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:12px 24px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at left,#12314a55,transparent 65%)}.app-heading .eyebrow{color:var(--muted);font-size:9px;letter-spacing:1.8px}.app-title{font-size:21px;font-weight:650;letter-spacing:-.5px;line-height:1.35}.teaching-actions{display:flex;gap:8px}.teaching-actions button{font-size:12px;border-radius:8px;padding:7px 13px}
.workspace{height:calc(100vh - 220px);min-height:640px}.sidebar,.inspector{background:var(--panel)}.eyebrow{font-weight:550}.inspector h2{font-weight:600;letter-spacing:-.5px}.stage-title h1{font-weight:600}.teaching-note{border-color:var(--accent)}
.seg{border-radius:999px}.seg button{border-radius:999px}.bottom-controls{box-shadow:0 8px 28px #0003;border-radius:12px}.structure{border-radius:8px}.structure.active{box-shadow:inset 2px 0 var(--accent)}.tag{border-radius:5px}.lesson{border-radius:10px}
footer.site-footer{display:block;padding:10px 24px 12px;min-height:84px;background:var(--bg);color:var(--muted);font-size:11px}.atlas-credit{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-bottom:9px;border-bottom:1px solid var(--line);font-size:10px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:9px}.footer-social,.footer-legal{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.site-footer a,.site-footer button{color:var(--muted);font-size:inherit;text-decoration:none}.site-footer a:hover,.site-footer button:hover{color:var(--accent);background:none}.site-footer #sources{color:var(--accent)}
dialog{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 28px #0008}#support-open{color:#f87171}#support-note{color:var(--muted);font-size:13px}a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.skip-link{position:absolute;left:16px;top:-80px;z-index:200;background:var(--accent);color:#0b1120;padding:9px 14px;border-radius:8px}.skip-link:focus{top:8px}
html[lang=zh-Hant] .eyebrow,html[lang=zh-Hant] .workspace-nav a,html[lang=zh-Hant] .detail-block h3{letter-spacing:.04em}html[lang=zh-Hant] .detail-block p,html[lang=zh-Hant] .lesson-text{line-height:1.85}html[lang=zh-Hant] .app-title,html[lang=zh-Hant] .inspector h2{letter-spacing:0}
body.presentation .site-header{height:60px}body.presentation .site-footer{display:none}body.presentation .workspace{height:calc(100vh - 136px);min-height:0;grid-template-rows:minmax(0,1fr)}body.presentation .workspace #stage{height:100%}
@media(max-width:1050px){.site-header{gap:12px}.app-title{font-size:19px}.workspace-nav a{padding:6px 12px}}
@media(max-width:820px){.site-header{height:auto;min-height:100px;display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;padding:12px 16px}.site-wordmark{font-size:16px}.version-badge{justify-self:start}.language-switch{justify-self:end}.workspace-nav{grid-row:2;grid-column:1/-1;margin:0;justify-self:start}.app-toolbar{padding:12px 16px;gap:8px;min-height:78px}.app-title{font-size:18px}.app-heading .eyebrow{font-size:8px;letter-spacing:1px}.teaching-actions{gap:5px}.teaching-actions button{font-size:11px;padding:6px 9px}.workspace{height:auto}.site-footer .footer-bottom{align-items:flex-start;flex-direction:column}.site-footer .footer-legal{gap:6px}.site-footer .atlas-credit{flex-direction:column;align-items:flex-start}footer.site-footer{padding:14px 16px}.sidebar h2{margin-bottom:12px}body.presentation .site-header{height:auto}body.presentation .workspace{height:calc(100dvh - 178px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
