:root{color-scheme:light;--bg:#f3f4ef;--paper:#fff;--ink:#202b29;--muted:#63706b;--line:#e0e4db;--teal:#1f4b4c;--soft:#e6eeeb;--gold:#b47b30;--font:Manrope,'IBM Plex Sans Arabic',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:13px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#fff;border-radius:9px;min-height:36px;padding:7px 12px;font-weight:600;transition:background .15s,color .15s}button:hover{background:#f0f4ee}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:wait}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid #c08b3b;outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip{position:fixed;top:-70px;left:15px;padding:12px;background:white;z-index:10}.skip:focus{top:10px}
.site-header{display:flex;align-items:center;gap:40px;max-width:1800px;margin:auto;padding:18px 40px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.8)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand strong{font:600 24px Fraunces,serif;display:block}.brand small{font-size:10px;color:var(--muted)}.site-header nav{display:flex;gap:8px;margin-inline-start:30px}.site-header nav a{padding:10px 18px;text-decoration:none;font-weight:700;border-radius:9px;color:var(--muted)}.site-header nav a.active{background:var(--soft);color:var(--teal)}#language{margin-inline-start:auto;background:transparent;font-size:12px}
main{max-width:1780px;padding:32px 36px 22px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:0 0 29px}.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:800;color:var(--teal);display:flex;align-items:center;gap:8px;margin:0 0 12px}.eyebrow i,.tiny-dot{width:6px;height:6px;border-radius:50%;background:#73998b;display:inline-block}.intro h1{font:500 clamp(27px,2.65vw,44px)/1.15 Fraunces,serif;letter-spacing:-1.3px;margin:0 0 13px}.lead{color:var(--muted);font-size:12px;max-width:620px;line-height:1.8;margin:0}.intro-mark{min-width:170px;text-align:center;border-inline-start:1px solid var(--line);padding:8px 16px 8px 36px}.intro-mark span{font:500 25px Fraunces,serif;letter-spacing:2px;display:block}.intro-mark b{font:16px var(--font);color:#91a69a;margin:0 13px}.intro-mark small{display:block;font-size:10px;color:var(--muted);margin-top:9px}
.workspace{display:grid;grid-template-columns:235px minmax(0,1fr) 254px;gap:18px;align-items:start}.panel{border:1px solid var(--line);border-radius:17px;background:var(--paper);padding:20px 17px;box-shadow:0 3px 8px #29372804}.panel-heading{display:flex;align-items:center;gap:9px}.section-no{color:#91a29a;font-size:10px;font-weight:600}.panel h2{font-size:14px;letter-spacing:-.3px;margin:0}.panel-copy{font-size:10px;line-height:1.7;margin:7px 0 20px;color:var(--muted)}h3{font-size:11px;margin:0;font-weight:800}.layer-toggles{display:grid;gap:4px}.layer-row{display:flex;align-items:center;gap:9px;padding:7px 6px;min-height:37px;border:0;font-size:11px;font-weight:600;text-align:start;background:transparent;width:100%}.layer-row i{width:9px;height:9px;border-radius:3px;background:var(--swatch)}.layer-row .switch{margin-inline-start:auto;width:25px;height:15px;border-radius:20px;background:#dfe3df;padding:2px}.layer-row .switch:after{content:'';display:block;width:11px;height:11px;border-radius:50%;background:white;box-shadow:0 1px 2px #0002}.layer-row[aria-pressed=true] .switch{background:var(--teal)}.layer-row[aria-pressed=true] .switch:after{transform:translateX(10px)}[dir=rtl] .layer-row[aria-pressed=true] .switch:after{transform:translateX(-10px)}.structure-heading{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin:17px 0 11px}.structure-heading span{font-size:10px;color:var(--muted)}.search{display:flex;align-items:center;gap:7px;background:#f4f6f1;border:1px solid var(--line);border-radius:8px;padding:0 9px}.search span{font-size:22px;color:var(--muted)}.search input{min-width:0;width:100%;background:transparent;border:0;outline-offset:4px;font-size:10px;padding:11px 0}.side-tabs{display:flex;gap:3px;margin:10px 0}.side-tabs button{padding:4px 6px;flex:1;min-height:29px;font-size:9px;border:0;background:transparent;color:var(--muted)}.side-tabs button[aria-pressed=true]{background:var(--soft);color:var(--teal)}.structure-list{height:246px;overflow:auto;scrollbar-width:thin;scrollbar-color:#cbd5ce transparent}.part-row{display:flex;align-items:center;border-bottom:1px solid #f0f2ed;gap:4px}.part-row.selected{background:#e7eeea;border-radius:6px}.part-row>button:first-child{font-size:10px;border:0;background:transparent;padding:9px 5px;text-align:start;flex:1;min-width:0;line-height:1.6}.part-row small{display:block;color:#84918b;font-size:8px;font-weight:500}.part-row .eye-toggle{padding:3px;min-height:30px;min-width:28px;border:0;background:transparent;font-size:15px;color:var(--teal)}.part-row .eye-toggle[aria-pressed=false]{opacity:.35}.restore{width:100%;margin-top:13px;font-size:10px;background:#fafbf8}.empty-result{color:var(--muted);font-size:11px;line-height:1.7;padding:12px 4px}
.stage-column{min-width:0}.stage{position:relative;isolation:isolate;aspect-ratio:1.36;min-height:390px;background:radial-gradient(ellipse at 50% 45%,#fffef9 0,#eeeee5 65%,#e4e8de 100%);border-radius:20px;border:1px solid #dce1d5;overflow:hidden}.stage:after{content:'';position:absolute;pointer-events:none;inset:0;border:9px solid #ffffff25;border-radius:inherit;z-index:-1}canvas{width:100%;height:100%;display:block;touch-action:none}.stage-top,.stage-bottom{position:absolute;inset-inline:17px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}.stage-top{top:16px}.stage-bottom{bottom:15px}.stage-top button,.stage-bottom button{pointer-events:auto}.view-tabs{display:flex;padding:4px;gap:2px;border:1px solid #ffffffbb;border-radius:11px;background:#ffffffd9;box-shadow:0 2px 5px #33443307;pointer-events:auto}.view-tabs button{border:0;font-size:10px;background:transparent;min-height:30px;padding:6px 10px;color:var(--muted)}.view-tabs button[aria-pressed=true]{background:var(--teal);color:#fff}.square{width:35px;min-height:35px;padding:0;font-size:21px;background:#ffffffcc}.hint{font-size:9px;color:#637366;background:#ffffffaa;padding:8px 9px;border-radius:6px}.camera-tools{display:flex;gap:4px}.camera-tools button{font-size:9px;min-height:29px;padding:5px 8px;background:#ffffffd9}.orientation{position:absolute;inset:24% 22% auto;display:flex;justify-content:space-between;pointer-events:none;direction:ltr;opacity:.6;font-size:11px;color:#5d6e62}.orientation small{font-size:8px;margin-left:4px}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#f3f4ee;gap:12px;z-index:5;text-align:center;padding:20px}.loading strong{font-size:14px}.loading small{font-size:10px;color:var(--muted)}.loader{width:36px;height:36px;border:2px solid #dce3db;border-top-color:var(--teal);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:6px}@keyframes spin{to{transform:rotate(360deg)}}.transport{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:13px;margin-top:10px;padding:12px;background:#fff}.transport>div{display:flex;align-items:center;gap:6px;font-size:9px;margin-inline-end:auto;color:var(--muted)}.transport button{font-size:10px;white-space:nowrap}.primary{background:var(--teal);border-color:var(--teal);color:white}.primary:hover{background:#306061}.transport #auto-blink[aria-pressed=true]{background:var(--soft);border-color:#94b7a4}.reset{border:0;background:transparent;color:var(--muted)}.selection{display:flex;align-items:center;gap:14px;padding:20px 6px 8px}.selection-icon{font-size:28px;color:#8eaa97;align-self:flex-start}.selection .eyebrow{font-size:8px;letter-spacing:1.3px;margin-bottom:5px}.selection h2{font:500 19px Fraunces,serif;margin:0 0 6px}.selection p:last-child{font-size:10px;line-height:1.85;color:var(--muted);margin:0;max-width:560px}.selection-copy{flex:1;min-width:0}.selection-actions{display:flex;gap:5px;flex-wrap:wrap;max-width:150px}.selection-actions button{font-size:10px;padding:6px 10px}
fieldset{border:0;padding:0;margin:0;min-width:0}.control-section{padding:19px 0 16px;border-bottom:1px solid var(--line)}.control-title{display:flex;align-items:center;justify-content:space-between}.text-button{border:0;background:transparent;font-size:9px;padding:0;min-height:20px;color:var(--muted)}.gaze-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:138px;margin:12px auto}.gaze-pad button{background:#f5f7f1;min-height:29px;padding:3px;font-size:12px;border-color:#e9ede4;color:#6b8174}.gaze-pad button:nth-child(5){background:var(--teal);color:white}.slider{display:block;margin:13px 0 4px}.slider>span{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px}.slider output{font-size:9px;color:var(--teal);font-variant-numeric:tabular-nums;white-space:nowrap;background:#f0f4ee;border-radius:4px;padding:3px 5px}.slider input{width:100%;height:18px;margin:6px 0 0;accent-color:var(--teal);cursor:pointer}.small-copy{font-size:9px;line-height:1.7;color:var(--muted);margin:5px 0 8px}.check{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--muted);margin-top:10px}.check input{accent-color:var(--teal);margin:0}.advanced{margin-top:15px;font-size:10px}.advanced summary{cursor:pointer;font-weight:700;padding:5px 0}.side-note{font-size:9px;line-height:1.9;color:var(--muted);background:#f6f7f1;border-radius:8px;padding:10px;margin:18px 0 0}.study-note{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid var(--line);margin-top:27px;padding-top:17px;color:var(--muted);font-size:10px;line-height:1.8}.study-note>div{display:flex;gap:10px;max-width:780px}.study-note p{margin:0}.note-symbol{flex-shrink:0;width:17px;height:17px;border:1px solid #acb9ad;border-radius:50%;text-align:center;font:12px Georgia,serif;line-height:16px;margin-top:3px}.study-note a{white-space:nowrap;color:var(--teal);text-underline-offset:4px}
[dir=rtl]{--font:'IBM Plex Sans Arabic',Manrope,sans-serif}[dir=rtl] .intro h1,[dir=rtl] .selection h2{font-family:var(--font);letter-spacing:0;line-height:1.5}[dir=rtl] .eyebrow{letter-spacing:0}[dir=rtl] .intro-mark{padding:8px 36px 8px 16px}.embedded .site-header,.embedded .intro,.embedded .study-note,.embedded .section-no,.embedded .panel-copy,.embedded .muscle-caption,.embedded .muscle-study .eyebrow{display:none!important}.stage:fullscreen{width:100%;height:100%;border-radius:0;aspect-ratio:auto}
@media(min-width:1650px){.workspace{grid-template-columns:255px minmax(0,1fr) 270px}.stage{aspect-ratio:1.5}.structure-list{height:300px}}
@media(max-width:1190px){main{padding:26px 20px}.workspace{grid-template-columns:205px minmax(0,1fr) 224px;gap:12px}.panel{padding:17px 12px}.stage{min-height:420px;aspect-ratio:auto}.transport{flex-wrap:wrap}.transport>div{flex-basis:100%;margin-bottom:3px}.intro-mark{display:none}.hint{display:none}.stage-bottom{justify-content:flex-end}.view-tabs button{padding:5px 6px;font-size:9px}.site-header{padding:15px 22px}}
@media(max-width:960px){.workspace{grid-template-columns:210px minmax(0,1fr)}.motion-panel{grid-column:1/-1}.motion-panel fieldset{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.advanced{grid-column:1/-1;margin:0}.side-note{display:none}.stage{min-height:450px}.structure-list{height:230px}.intro h1{font-size:34px}.site-header{gap:15px}.site-header nav{margin-inline-start:0}.site-header nav a{padding:9px 13px}}
@media(max-width:660px){main{padding:22px 13px 18px}.site-header{padding:12px 15px}.site-header nav{display:none}.brand strong{font-size:22px}.intro{margin-bottom:20px}.intro h1{font-size:25px;letter-spacing:-.8px}.eyebrow{font-size:8px;letter-spacing:1px}.lead{font-size:11px;line-height:1.8}.workspace{display:flex;flex-direction:column;gap:14px}.stage-column{width:100%;order:0}.stage{min-height:320px;aspect-ratio:1.18;border-radius:16px}.stage-top{inset-inline:10px;top:11px}.stage-bottom{bottom:11px;inset-inline:10px}.view-tabs button{padding:7px 10px;font-size:10px;min-height:32px}.orientation{inset:26% 20% auto}.transport{padding:10px;gap:5px}.transport button{font-size:10px;padding:7px 10px}.transport>div{flex-basis:auto;font-size:0;margin:0 auto 0 0;gap:0}.transport .tiny-dot{width:7px;height:7px}.selection{padding:18px 3px 2px;flex-wrap:wrap;gap:10px}.selection h2{font-size:18px}.selection-actions{margin-inline-start:38px;max-width:none}.selection-icon{font-size:25px}.anatomy-panel{order:2;width:100%}.motion-panel{order:1;width:100%}.motion-panel fieldset{grid-template-columns:1fr 1fr;gap:0 22px}.motion-panel .control-section:first-of-type{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:center}.control-title{grid-column:1/-1}.gaze-pad{width:100%;margin:10px 0 0}.control-section{padding:14px 0}.motion-panel .panel-heading{margin-bottom:2px}.slider input{height:26px;margin-top:7px}.layer-toggles{grid-template-columns:1fr 1fr;gap:4px 14px}.panel-copy{margin-bottom:10px}.structure-list{height:210px}.part-row>button:first-child{font-size:12px}.side-tabs button{font-size:11px;min-height:35px}.layer-row{font-size:12px;min-height:40px}.search input{font-size:12px}.study-note{flex-direction:column;align-items:flex-start;gap:12px;margin-top:20px}.study-note a{margin-inline-start:27px}.advanced{padding-top:12px}.advanced summary{min-height:36px}.panel{padding:18px}.panel h2{font-size:16px}.control-section h3{font-size:12px}.slider>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
/* ── Sticky panels (desktop) ────────────────────────────────────────────────
   Both the stage-column and the motion-panel stick within the viewport while
   the anatomy panel on the left can scroll. This lets the user interact with
   eye controls while always watching the 3D model.                           */
@media(min-width:961px){.motion-panel{position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}.stage-column{position:sticky;top:16px;align-self:start}}
/* ── Sticky stage (mobile) ──────────────────────────────────────────────────
   On mobile the workspace is a single column. Making .stage-column sticky
   means the 3D eye model stays pinned at the top of the viewport as the user
   scrolls down through the motion-controls and anatomy panels.
   The stage keeps its natural dimensions (aspect-ratio:1.18) so the THREE.js
   renderer is never given a zero or unexpected canvas size.                  */
@media(max-width:660px){.stage-column{position:sticky;top:0;z-index:50;background:var(--bg)}}
/* ── Embedded-shell overrides ───────────────────────────────────────────────
   These rules ONLY fire when html.embedded is set by the Flutter preload
   script. They must NOT affect the public website.                           */
html.embedded{overflow-x:clip;max-width:100vw}
html.embedded .transport{border:none;box-shadow:0 2px 14px rgba(32,43,41,.08);border-radius:16px}
.view-tabs{max-width:calc(100% - 42px);overflow-x:auto;scrollbar-width:none}.view-tabs button{flex-shrink:0}.square{flex-shrink:0}
.gaze-scope{display:flex;gap:3px;background:#f4f6f0;border-radius:8px;padding:3px;margin-top:11px}.gaze-scope button{flex:1;padding:5px 3px;min-height:28px;font-size:9px;background:transparent;border:0;color:var(--muted)}.gaze-scope button[aria-pressed=true]{background:white;color:var(--teal);box-shadow:0 1px 4px #15382712}
.select-label{display:block;font-size:9px;color:var(--muted);margin:12px 0}.select-label span{display:block;margin-bottom:6px}.select-label select{width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:#fafbf7;color:var(--ink);padding:9px 7px;font:600 10px var(--font)}#play-motion{width:100%;font-size:10px}.muscle-study{margin-top:17px;padding:19px 21px;background:#fff;border:1px solid var(--line);border-radius:14px}.muscle-study-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.muscle-study .eyebrow{font-size:8px;margin-bottom:6px}.muscle-study h2{font:500 22px Fraunces,serif;margin:0}.muscle-study-heading button{font-size:10px}.muscle-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:20px 0 14px;direction:ltr}.muscle-eye h3{font-size:10px;margin-bottom:10px}.muscle-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.muscle-chips button{font-size:9px;padding:6px 2px;min-height:30px;background:#f4f5f0;border-color:#e7ebe1;color:#77867a}.muscle-chips .contributing{background:#b76748;border-color:#b76748;color:#fff}.muscle-chips button[aria-pressed=true]{outline:2px solid var(--teal);outline-offset:2px}.muscle-caption{font-size:9px;color:var(--muted);line-height:1.8;margin:0}[dir=rtl] .muscle-study h2{font-family:var(--font)}[dir=rtl] .muscle-eye h3{text-align:right;direction:rtl}
@media(max-width:960px) and (min-width:661px){.motion-panel fieldset{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.gaze-scope{grid-column:1/-1}.gaze-scope button{min-height:35px;font-size:11px}.movement-library{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.movement-library h3,.movement-library>button{grid-column:1/-1}.select-label{font-size:11px}.select-label select{font-size:11px;min-height:42px}#play-motion{min-height:42px;font-size:12px}.muscle-study{padding:17px 14px}.muscle-study-heading{align-items:flex-start}.muscle-study-heading button{font-size:9px;padding:7px 8px}.muscle-study h2{font-size:22px}.muscle-study .eyebrow{font-size:7px;letter-spacing:.6px}.muscle-pair{gap:15px}.muscle-chips{grid-template-columns:repeat(3,1fr);gap:6px}.muscle-chips button{min-height:35px;font-size:10px}.muscle-eye h3{font-size:10px}.muscle-caption{font-size:10px}.gaze-pad button{min-height:36px}}