/* Direction A: clinical anatomy studio. The live WebGL canvas remains interactive. */
:root{--bg:#061223;--mint:#77d2fa;--panel:rgba(6,19,36,.93);--line:rgba(112,173,217,.16);background:#061223;color:#e2edf7}
body{background:#061223}.brand svg{color:#97dfff}.brand-sub{color:#78a5c6}.live-dot{background:#86e6e5}.primary-button{background:#74cef5;color:#072236}
.stage-heading{display:none!important}.stage-corner{display:none}.presets button.active{background:#183c59;color:#c7eeff}.icon-button[aria-pressed=true]{background:#5fbeed1c;color:#8adfff}
.featured-image{display:grid;place-items:center;background:radial-gradient(ellipse,#28526b42,transparent 72%);height:170px;border:1px solid #5182a91c;border-radius:7px;margin:15px 0 0}
.featured-image img{width:100%;height:100%;object-fit:contain;max-height:170px;filter:drop-shadow(0 12px 16px #0008)}
.featured-organ h2{font-size:23px;font-weight:500;margin:13px 0 8px;color:#eef7ff}.featured-organ .panel-description{font-size:11px;line-height:1.8}.featured-organ>.secondary-button{margin-top:13px;padding:9px 12px;color:#92d7fb;border-color:#427fab55;justify-content:space-between}
.organ-shortcuts{display:flex;gap:9px;margin-top:18px}.organ-shortcuts button{flex:1;min-width:0;height:65px;position:relative;background:linear-gradient(#12334c55,#0a1a2e55);border:1px solid #457ca048;border-radius:6px;padding:4px;overflow:hidden}.organ-shortcuts button:hover{border-color:#8bd9ff;background:#28597844}.organ-shortcuts img{width:100%;height:45px;object-fit:contain;display:block}.organ-shortcuts span{display:block;font-size:7px;color:#89abc7;margin-top:1px}.organ-shortcuts button:first-child{border-color:#6fcef4aa}
.biological-controls{padding-top:15px;margin-top:17px}.biological-controls>.eyebrow{color:#83a7c7}.biological-controls .pulse-control{padding-top:12px}.biological-controls .toggle-label svg{color:#f39193}.biological-controls .pulse-control+div .toggle-label svg{color:#9ec9f0}.switch.on{background:#368fc4;box-shadow:0 0 10px #55bfff22}.switch.on i{background:#e7f8ff}.effects-controls{border-color:#507e9e33}.effects-intensity input{background:#233e57}.effects-intensity input::-webkit-slider-thumb{background:#8ad9ff;box-shadow:0 0 8px #81d3ff66}.layer .opacity-row input::-webkit-slider-thumb{background:#8ad9ff;box-shadow:0 0 8px #81d3ff55}
.detail-panel h2{font-family:"Segoe UI",Arial,sans-serif;font-size:27px;font-weight:500;letter-spacing:-.5px;margin-top:18px}.detail-illustration{height:180px;margin-top:14px;border:1px solid #46779f25;border-radius:6px;background:radial-gradient(ellipse,#25567330,transparent 70%);justify-content:center}.detail-illustration img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 16px #0008)}.detail-illustration .detail-number{display:none}.detail-panel .latin{color:#709bbd}.detail-rule{margin:17px 0;background:#56bde7}.detail-description{color:#abc4d9}.detail-fact{background:#265b7b0c}.source-link{color:#658eaf}.secondary-button{color:#a4dcf6;border-color:#3d789b55;background:#2b66880c}.source-link:hover{color:#a3e6ff}
.view-toolbar{background:linear-gradient(#0d2a43ed,#071a30ed);border:1px solid #407aa377;border-radius:15px;padding:9px 13px;box-shadow:0 10px 35px #0004}.overview-button{color:#e1f4ff}.overview-button svg{color:#85d9ff}.coordinate-label{color:#6c9cc0}.orientation{color:#7199ba;border-color:#42799b33}.orientation span{background:#061223}.orientation-center{color:#84c5df}.search{background:#07182b;border-color:#325a793f}.search input{color:#c7e5f8}.search input::placeholder{color:#678ca9}.structure-item{color:#abc6df}.structure-item:hover{color:#aff0ff}.structure-list{scrollbar-color:#38688b transparent}.footer{font-size:7px;color:#5d87a8;border-color:#43739226}.interaction-hint{color:#527d9f}.stage-footer{color:#547f9d}.tooltip{background:#122d45}
@media(min-width:651px){
 .header{position:absolute;inset:0 0 auto;height:0;padding:0;z-index:5;border:0;pointer-events:none}.header>*{pointer-events:auto}.brand{position:absolute;left:28px;top:30px;font-size:22px;letter-spacing:5px;gap:11px}.brand svg{width:35px;height:35px}.brand-sub{font-size:7px;letter-spacing:2.6px}.header-center{top:31px;left:calc(50% - 26px);font-size:10px;gap:8px}.header .header-divider,.header-center>.muted{display:none}.header>.icon-button{position:absolute;right:21px;top:20px;width:27px;height:27px}
 #workspace{height:calc(100dvh - 28px);min-height:540px}#stage{background:radial-gradient(ellipse at 49% 44%,#193d5a90 0%,#0c274245 35%,#06122300 65%)}#stage::before{content:"";position:absolute;left:calc(50% - 285px);top:6%;width:520px;height:78%;border:1px solid #37618320;border-radius:50%;pointer-events:none;box-shadow:0 0 90px #1f6c9220,inset 0 0 80px #13507710}
 .layers-panel{position:absolute;left:0;top:0;bottom:0;width:245px;max-height:none!important;border:0;border-right:1px solid #4674994a;border-radius:0;backdrop-filter:blur(20px);background:linear-gradient(110deg,#06182b,#061223f5);padding:122px 20px 22px;overflow:hidden}.layers-panel>.panel-heading{padding:0 4px}.layers-panel>.panel-heading .eyebrow{font-size:7px;letter-spacing:1.8px}.layers-panel h2{font-size:22px;margin:10px 4px 13px;letter-spacing:-.4px;font-weight:500}.layers-panel>.panel-description{display:none}.layers-panel .presets{margin:2px 3px 17px;background:#061427;border-color:#2f608044;flex-shrink:0}.layers-panel .presets button{font-size:9px;padding:7px}
 #layer-list{display:block;padding:0 3px 2px 0;min-height:125px;flex-shrink:1;overflow-y:auto;scrollbar-width:thin}.layers-panel .layer,.layers-panel .layer:first-child{padding:9px 10px 11px;border:1px solid #3159794a;border-left:2px solid #385a73;border-radius:7px;margin-bottom:9px;background:linear-gradient(110deg,#102c4233,#04132155)}.layers-panel .layer.active{border-left-color:var(--layer-color);background:linear-gradient(110deg,#17446133,#081c3033)}.layer-main{gap:4px}.layer-toggle{gap:9px}.layer-symbol{width:42px!important;height:48px!important;border:0;background:none!important;border-radius:0;flex-shrink:0}.layer-symbol img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 4px #0006)}.layer-name{font-size:11px;margin-bottom:12px}.layer-sub{display:none}.layer-eye{width:18px;align-self:flex-start;margin-top:5px}.layer-eye svg{width:13px;height:13px}.layer-check{align-self:flex-start;margin-top:6px;width:16px;height:16px;background:transparent!important;border-color:#486b8155!important;border-radius:50%;color:#96d7f3!important;flex-shrink:0}.layer-check svg{width:10px;height:10px}.layer.active .layer-check{border-color:#86cdea77!important}.layers-panel .opacity-row{margin-top:-12px;padding-top:0;padding-left:51px;gap:7px;position:relative}.opacity-row input{background:#2a4054}.opacity-row output{font-size:7px;min-width:22px}.effects-controls{margin:15px 3px 0;padding-top:1px}.effects-controls .pulse-control{padding-top:13px}.effects-controls .toggle-label{font-size:9px}.effects-controls .toggle-label svg{color:#7db6d5}.effects-intensity{margin-top:13px;font-size:8px}
 .explore-panel,.detail-panel{top:68px;right:21px;bottom:auto;width:285px;max-height:calc(100% - 89px);border:1px solid #42779566;border-radius:12px;padding:20px;background:linear-gradient(135deg,#0a2136e8,#06172bd9);box-shadow:0 12px 60px #0002;overflow:auto;backdrop-filter:blur(20px);scrollbar-width:thin}.panel-heading>.eyebrow{font-size:7px;letter-spacing:1.6px;color:#83aacb}.explore-panel>.panel-heading{margin-bottom:4px}.explore-panel .search{margin:16px 0 6px;padding:9px}.explore-panel .structure-list{max-height:108px}.structure-item{font-size:10px;padding:9px 0}.explore-panel .biological-controls{margin-top:15px;padding-top:14px}.biological-controls>p{margin-bottom:0}.detail-panel>.biological-controls{margin-top:16px}.detail-panel .detail-fact{margin:15px 0;padding:10px}.detail-panel .detail-description{font-size:11px}.detail-panel .source-link{margin-top:16px}.detail-panel .detail-illustration{height:180px}
 .view-toolbar{left:calc(50% - 22px);bottom:36px;gap:4px}.view-toolbar .icon-button{width:30px;height:31px}.toolbar-divider{margin:0 6px}.interaction-hint{left:calc(50% - 22px);bottom:15px;font-size:8px}.stage-footer{display:none}.coordinate-label{display:flex;right:327px;top:30px;font-size:6px}.orientation{right:327px;bottom:109px}.footer{height:28px;padding:0 24px}.footer>span:nth-child(2){font-size:10px}.focus-label{top:65px;left:calc(50% - 22px)}
}
@media(min-width:1300px){.layers-panel{width:265px;padding-left:25px;padding-right:25px}.explore-panel,.detail-panel{width:310px;right:28px}.coordinate-label,.orientation{right:365px}.featured-image,.featured-image img{height:195px;max-height:195px}.view-toolbar{left:calc(50% - 15px)}}
@media(min-width:651px) and (max-width:900px){.layers-panel{width:198px;padding:112px 13px 15px}.brand{left:20px;font-size:19px;letter-spacing:4px;gap:8px}.brand svg{width:28px;height:28px}.brand-sub{font-size:6px;letter-spacing:2px}.header-center{left:calc(50% - 10px);font-size:8px;top:24px}.explore-panel,.detail-panel{width:218px;right:12px;top:59px;max-height:calc(100% - 73px);padding:15px}.layer-symbol{width:31px!important;height:42px!important}.layer-name{font-size:9px}.layer-eye{display:none}.layers-panel .opacity-row{padding-left:40px}.layers-panel .layer{padding:8px 7px 10px}.layers-panel h2{font-size:20px}.effects-controls .toggle-label{font-size:8px}.featured-image,.featured-image img{height:135px;max-height:135px}.featured-organ h2{font-size:20px}.featured-organ .panel-description{font-size:10px}.organ-shortcuts{gap:6px}.organ-shortcuts button{height:55px}.organ-shortcuts img{height:35px}.explore-panel .structure-list{max-height:90px}.coordinate-label,.orientation{display:none}.view-toolbar{left:calc(50% - 10px);padding:8px}.view-toolbar .icon-button{width:25px}.overview-button{font-size:10px;padding:8px}.view-toolbar .toolbar-divider{margin:0 3px}.detail-panel .detail-illustration{height:135px}.detail-panel h2{font-size:23px}.biological-controls .toggle-label{font-size:10px}.interaction-hint{font-size:7px;left:calc(50% - 10px)}}
@media(max-height:750px) and (min-width:651px){.layers-panel{padding-top:102px;padding-bottom:15px}.brand{top:24px}.layers-panel h2{margin-bottom:9px}.layers-panel .presets{margin-bottom:12px}.layers-panel .layer{margin-bottom:7px;padding-top:7px;padding-bottom:9px}.layer-symbol{height:42px!important}.effects-controls{margin-top:10px}.effects-controls .pulse-control{padding-top:10px}.effects-intensity{margin-top:11px}.explore-panel,.detail-panel{top:50px;max-height:calc(100% - 65px)}.featured-image,.featured-image img{height:130px;max-height:130px}.featured-organ h2{font-size:21px}.featured-organ .panel-description{font-size:10px}.organ-shortcuts{margin-top:13px}.organ-shortcuts button{height:55px}.organ-shortcuts img{height:36px}.explore-panel .structure-list{max-height:85px}.detail-panel .detail-illustration{height:135px}.coordinate-label{top:23px}.focus-label{top:30px}.view-toolbar{bottom:29px}.interaction-hint{bottom:9px}}
@media(max-width:650px){.header{background:#061223;border-bottom-color:#3e759b33}.brand{font-size:20px}.brand-sub{font-size:6px}.header-center{color:#9bd7ed}#stage{background:radial-gradient(ellipse at 50% 45%,#21475e70,transparent 70%)}#stage .stage-heading{display:none!important}.layers-panel,.explore-panel,.detail-panel{background:#081d30;border-color:#3c75984a}.layers-panel h2{font-weight:500}#layer-list{gap:0 13px}.layer-symbol{background:transparent;border:0;width:36px;height:47px}.layer-symbol img{width:100%;height:100%;object-fit:contain}.layer-sub{display:none}.layer-main{gap:4px}.layer-toggle{gap:7px}.layer-name{font-size:11px}.opacity-row{padding-left:42px;padding-top:4px}.layer{padding:12px 0}.effects-controls{margin-top:14px}.organ-shortcuts{margin:14px 0}.organ-shortcuts button{height:75px}.organ-shortcuts img{height:55px}.organ-shortcuts span{font-size:9px}.featured-image,.featured-image img{height:180px;max-height:180px}.explore-panel .structure-list{max-height:150px}.detail-illustration{display:flex;height:150px}.detail-panel h2{font-size:27px}.biological-controls .pulse-control{justify-content:space-between}.coordinate-label{font-size:6px}.view-toolbar{background:#0a2a43ed;border-color:#4d8cb155}.focus-label{top:25px}.footer>span:first-child{font-size:6px}}
@media(min-width:651px) and (max-width:800px){.view-toolbar #front,.view-toolbar #back,.view-toolbar #autorotate,.view-toolbar .toolbar-divider{display:none}.view-toolbar{gap:7px}.interaction-hint{display:none}}
