/* Anatomy atlas: shared tokens and final component layer. Diagram geometry lives in JS. */
body.studio{--ink:#172D2C;--muted:#526360;--line:#DDDCD3;--blue:#145B55;--paper:#F6F3EC;--surface:#FFFEFA;--soft:#E7EFEB;--control:#7B8E86;--target:#2563EB;--success:#236343;--error:#A33232;background:var(--paper);color:var(--ink);font:16px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body.studio h1,body.studio h2{font-family:"Source Serif 4",Georgia,serif;font-weight:500;letter-spacing:-.035em;line-height:1.12}
body.studio h3{font-family:Inter,system-ui,sans-serif;letter-spacing:-.02em;line-height:1.3}
body.studio :is(button,input,select,textarea){font-size:16px;min-height:44px;border-radius:8px;color:var(--ink)}
body.studio :is(input,select,textarea){background:var(--surface);border:1px solid var(--control);padding:10px 12px;max-width:100%}
body.studio button{background:var(--surface);border-color:var(--control);transition:background 160ms ease,border-color 160ms ease,transform 160ms ease}
body.studio button.primary{background:var(--blue);border-color:var(--blue);color:white}
body.studio button.primary:hover:not(:disabled){background:#104943;border-color:#104943}
body.studio button:hover:not(:disabled){background:var(--soft);border-color:var(--blue);transform:none}
body.studio button:active:not(:disabled){transform:translateY(1px)}
body.studio :is(button,input,select,summary,a):focus-visible{outline:3px solid var(--target);outline-offset:3px}
body.studio a,body.studio .site-footer a{color:var(--blue)!important;text-underline-offset:3px}
body.studio>header{height:auto;min-height:80px;padding:16px 32px;background:var(--surface);gap:16px;flex-wrap:wrap}
body.studio .app-nav{flex-wrap:wrap;max-width:100%}
body.studio .brand-mark{stroke:var(--blue)}
body.studio :is(.app-nav,.account-nav){gap:4px}
body.studio :is(.app-nav,.account-nav) button{font-size:16px;padding:8px 12px;white-space:normal;min-height:44px}
body.studio .app-nav button[aria-current=page],body.studio #accountButton{background:var(--soft);color:var(--blue)}
body.studio .app-nav .anatomy-nav-link{display:flex;align-items:center;justify-content:center;padding:8px 12px;min-height:44px;text-decoration:none;border-radius:8px;font-size:16px;white-space:normal}
body.studio .app-nav .anatomy-nav-link:hover{background:var(--soft)}
body.studio>main{padding:32px;gap:32px;grid-template-columns:184px minmax(0,1fr)}
body.studio[data-screen=home]>main{max-width:1280px}
body.studio[data-screen=answers]>main{display:block;max-width:1280px}
body.studio .studio-screen{animation:none}
body.studio .studio-screen:focus{outline:none}
body.studio #feedback.correct{animation:atlas-success 180ms ease}
@keyframes atlas-success{from{opacity:.6}to{opacity:1}}
body.studio .studio-eyebrow,body.studio .heading small{font:500 14px/1.5 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--muted)}
body.studio .dashboard-top{margin:8px 0 32px}
body.studio .dashboard-top h1{font-size:clamp(30px,3vw,40px);margin:0 0 8px}
body.studio .dashboard-top p{font-size:16px}
body.studio .studio-hero{background:var(--surface);border:1px solid var(--line);grid-template-columns:1fr 1fr;min-height:400px;border-radius:12px}
body.studio .studio-hero-copy{padding:48px;align-self:center}
body.studio .studio-hero .studio-eyebrow{color:var(--blue)}
body.studio .studio-hero h2{font-family:"Source Serif 4",Georgia,serif;color:var(--ink)!important;font-size:clamp(34px,3.5vw,48px)!important;letter-spacing:-.04em!important;margin:16px 0;line-height:1.05!important;font-weight:500}
body.studio .studio-hero p{color:var(--muted);font-size:16px}
body.studio .hero-secondary{color:var(--blue);border-color:var(--control);background:transparent;margin:8px 0 0 8px}
body.studio .hero-specimen{background:var(--soft);margin:16px;border-radius:12px;min-height:368px}
body.studio .hero-specimen img{width:100%;height:368px;object-fit:contain;object-position:center;mix-blend-mode:multiply;transform:none;animation:none}
body.studio .hero-specimen.reveal-specimen{animation:atlas-reveal 600ms cubic-bezier(.2,.7,.2,1) both}
@keyframes atlas-reveal{from{clip-path:inset(0 48% 0 48%);opacity:.6}to{clip-path:inset(0);opacity:1}}
body.studio .dashboard-stats{background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;margin:24px 0 32px}
body.studio .dashboard-stats article{padding:16px 24px}
body.studio .dashboard-stats strong{font-size:26px;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
body.studio .dashboard-stats span{font-size:16px;color:var(--muted)}
body.studio .section-heading{align-items:center;gap:24px}
body.studio .section-heading h2{font-size:32px!important}
body.studio .search-label{display:grid;gap:8px;color:var(--muted);font-size:16px}
body.studio .region-search{font-size:16px!important;width:280px;border-color:var(--control)}
body.studio .region-grid{gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
body.studio .region-card{border:1px solid var(--control)!important;border-radius:10px!important;background:var(--surface)!important;overflow:visible}
body.studio .region-art{height:192px;background:var(--soft);border-radius:9px 9px 0 0;overflow:hidden}
body.studio .region-art img{padding:8px;object-fit:contain;transform:none!important;filter:none!important}
body.studio .region-art>b{display:none}
body.studio .region-copy{padding:16px}
body.studio .region-copy strong{font-size:20px;line-height:1.3;white-space:normal;overflow-wrap:anywhere;font-family:"Source Serif 4",Georgia,serif;font-weight:500}
body.studio .region-copy>small{font-size:16px;gap:8px;flex-wrap:wrap;color:var(--muted)}
body.studio .progress-track{background:#D5DFD9;height:4px;margin-top:16px}
body.studio .progress-track i{background:var(--blue)}
body.studio .study-bottom{grid-template-columns:1fr 1fr;gap:16px}
body.studio .study-feature{background:var(--surface);border-radius:16px;padding:24px;border-color:var(--line)}
body.studio .study-feature:last-child{grid-column:1/-1;background:var(--soft)}
body.studio .study-feature h3{font-size:22px;margin:0 0 16px}
body.studio .study-feature p,body.studio .study-feature button{font-size:16px}
body.studio #lab-sidebar{top:16px}
body.studio #lab-sidebar h2{font:600 12px/1.5 Inter,system-ui,sans-serif}
body.studio #sections button{font-size:16px;min-height:48px;line-height:1.3}
body.studio #sections button.selected{background:var(--soft);color:var(--blue);border-color:var(--control)}
body.studio #sections button span{font:12px Inter,system-ui,sans-serif;color:var(--muted)}
body.studio .instructions p{font-size:16px}
body.studio .category-select{display:none}
body.studio .heading{padding-bottom:16px;gap:16px}
body.studio .heading h1{font-size:40px}
body.studio .heading #view{font-size:16px}
body.studio .timer{padding:8px 16px}
body.studio .timer small{font-size:16px}
body.studio .toolbar{gap:8px;padding:12px 0;align-items:center;min-height:68px}
body.studio .session-state{font-size:16px;color:var(--blue);margin-right:auto}
body.studio #progress{font-size:16px;width:auto;margin:0}
body.studio #sectionStatus{font-size:16px;color:var(--muted);margin:0 0 16px;min-height:25px}
body.studio .exercise{grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr);gap:24px}
body.studio .plate{border:1px solid var(--line);background:var(--surface);border-radius:16px;position:relative;overflow:hidden}
body.studio #diagram{aspect-ratio:1104/1424;min-width:0;min-height:0;height:auto;max-height:780px;background:var(--surface)}
body.studio .diagram-tools{display:flex;gap:8px;flex-wrap:wrap;padding:12px;border-bottom:1px solid var(--line);background:var(--soft);margin:0;align-items:center}
body.studio .diagram-tools button{font-size:16px;padding:8px 10px;flex:0 1 auto}
body.studio .diagram-tools button[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue)}
body.studio .answer-panel{background:var(--surface);border-radius:16px;border:1px solid var(--line);padding:24px;position:static;max-height:none}
body.studio .answer-panel h2{font:600 16px/1.4 Inter,system-ui,sans-serif;letter-spacing:0;color:var(--ink);margin:16px 0}
body.studio .question strong{font-size:19px}
body.studio #feedback{font-size:16px;min-height:48px;margin:8px 0 0;line-height:1.45}
body.studio #feedback.correct{color:var(--success)}
body.studio #feedback.correct:before{content:'✓ ';font-weight:700}
body.studio #feedback.wrong-feedback{color:var(--error)}
body.studio #feedback.wrong-feedback:before{content:'× ';font-weight:700}
body.studio #answers{grid-template-columns:1fr;gap:8px;margin:0}
body.studio #answers button{font-size:16px;min-height:48px;padding:12px 16px;border-color:var(--control);background:var(--surface);line-height:1.4;white-space:normal;overflow-wrap:anywhere}
body.studio #answers button.selected-label{background:var(--soft);border-color:var(--blue);outline:1px solid var(--blue)}
body.studio #answers button.correct{background:#E7F1E8;color:var(--success);border-color:#7B9A84;opacity:1}
body.studio #answers button.correct:before{content:'✓';flex:none}
body.studio #answers button:focus-visible{outline:3px solid var(--target);outline-offset:3px}
body.studio .selection-help{font-size:16px;color:var(--muted);min-height:48px;margin:16px 0 0}
body.studio .answer-actions{background:var(--surface);position:static;padding:16px 0 0;margin:16px 0 0;gap:8px}
body.studio .answer-actions button{font-size:16px}
body.studio #check{flex:1}
body.studio :is(.session-options,.reading-tools){border-top:1px solid var(--line);padding:0;margin:24px 0 0}
body.studio summary{font-size:16px;min-height:48px;padding:12px 4px;color:var(--blue)}
body.studio :is(.session-options,.reading-tools)[open]>:not(summary){animation:atlas-dialog 200ms ease}
body.studio .session-options-body{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0}
body.studio .study-controls{width:100%;padding:0;margin:0 0 16px;border:0;gap:16px}
body.studio .study-controls label,body.studio #recallForm label{font-size:16px}
body.studio .study-controls select,body.studio #recallForm input{font-size:16px;border-color:var(--control)}
body.studio #reset,body.studio .danger{color:var(--error);border-color:var(--error)}
body.studio #reset{margin-left:auto}
body.studio #handTools{flex-wrap:wrap}
body.studio #handTools p{font-size:16px}
body.studio .view-controls:has(.reading-options){margin:12px 0;gap:8px}
body.studio .view-controls button,body.studio .reading-options,body.studio #speechStatus{font-size:16px}
body.studio #saveStatus,body.studio #muscleCredit{font-size:16px;background:transparent;color:var(--muted)}
body.studio .practice-resources{padding:24px 0;border-top:1px solid var(--line);margin-top:24px}
body.studio .practice-resources h2{font-size:26px}
body.studio .learning-nav{margin:16px 0 0;gap:8px}
body.studio .learning-nav button{font-size:16px;border-color:var(--control);color:var(--ink);min-height:44px}
body.studio .learning-nav button.primary{color:white;border-color:var(--blue)}
body.studio .learning-nav span{font-size:16px;color:var(--muted);width:100%}
body.studio dialog{background:var(--surface);color:var(--ink);border:1px solid var(--control);border-radius:12px;padding:32px;max-height:calc(100dvh - 32px);box-shadow:0 24px 80px #172d2c30;animation:atlas-dialog 200ms ease}
body.studio dialog::backdrop{background:#172D2C99;backdrop-filter:blur(4px)}
@keyframes atlas-dialog{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.studio dialog h2{font-size:32px;font-family:"Source Serif 4",Georgia,serif}
body.studio .workspace-form{width:440px;max-width:100%;gap:16px}
body.studio .workspace-form{background:var(--surface)}
body.studio .workspace-form h2:after{border-color:var(--blue)}
body.studio .workspace-form :is(input,select):focus{border-color:var(--blue);box-shadow:none}
body.studio :is(.workspace-grid article,.notice,.class-card,.race-bar,.admin-editor){background:var(--surface);color:var(--ink);border-color:var(--control)}
body.studio #accountButton{border-color:var(--control);border-radius:8px}
body.studio .workspace-form :is(label,p,input,select,button){font-size:16px}
body.studio .workspace-form label{display:grid;gap:8px;color:var(--ink)}
body.studio .workspace-form input{background:var(--surface);border-color:var(--control)}
body.studio .workspace-form .agreement{display:flex;align-items:start;gap:12px}
body.studio .workspace-form .agreement span{font-size:16px;line-height:1.5}
body.studio .agreement input{width:22px;min-height:22px;flex:none;margin:4px 0;accent-color:var(--blue)}
body.studio .form-error{color:var(--error);margin:0}
body.studio .form-error:empty{display:none}
body.studio .workspace-form .dialog-actions{background:var(--surface);position:static}
body.studio .auth-gate{width:min(960px,calc(100% - 32px));max-width:960px;padding:0;overflow:auto}
body.studio .auth-gate[data-entrance=signup],body.studio .auth-gate[data-entrance=signin]{width:min(520px,calc(100% - 32px));padding:32px}
body.studio .auth-gate[data-entrance=signup]>button,body.studio .auth-gate[data-entrance=signin]>button{margin-top:16px;width:100%}
body.studio .entrance-layout{display:grid;grid-template-columns:1.1fr .9fr}
body.studio .entrance-copy{padding:48px;align-self:center}
body.studio .entrance-copy h1{font-size:clamp(40px,4.8vw,64px);margin:24px 0}
body.studio .entrance-copy p{color:var(--muted);font-size:18px}
body.studio .entrance-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 12px}
body.studio .entrance-account{border:0;background:transparent;padding:8px 0;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
body.studio .guest-note{font-size:16px!important;margin-top:24px}
body.studio .entrance-specimen{margin:16px;background:var(--soft);border-radius:12px;display:flex;flex-direction:column;justify-content:center;min-width:0}
body.studio .entrance-specimen img{width:100%;height:420px;object-fit:contain;mix-blend-mode:multiply}
body.studio .entrance-specimen figcaption{font-size:16px;color:var(--muted);padding:16px;text-align:center}
body.studio .workspace-wide{width:720px}
body.studio :is(.atlas-card,.answer-card,.study-feature,.learning-card,.class-card){background:var(--surface);border-radius:16px;border-color:var(--line)}
body.studio :is(.muscle-list,.answer-categories){overflow-x:hidden}
body.studio :is(.muscle-list,.answer-categories) button{font-size:16px!important;white-space:normal;min-height:48px;line-height:1.4}
body.studio :is(.muscle-list,.answer-categories) button[aria-pressed=true]{background:var(--soft);border-color:var(--control);color:var(--blue)}
body.studio :is(.atlas-card-top p,.muscle-facts dd,.atlas-note,.answer-list,.answers-heading p,.learning-body p,.learning-body button,.learning-body input,.learning-body select,.workspace-grid span,.studio-empty,.site-footer){font-size:16px}
body.studio .answer-list{columns:2;column-gap:32px;line-height:1.7}
body.studio .answer-list li{break-inside:avoid;padding:8px}
body.studio .answer-card h2,body.studio .atlas-card h2{font-size:32px}
body.studio .learning-dialog :is(header,.learning-body){background:var(--surface);color:var(--ink)}
body.studio .learning-dialog :is(button,input,select){font-size:16px}
body.studio :is(.workspace-grid,.admin-metrics) strong{font-variant-numeric:tabular-nums;color:var(--blue)}
body.studio .site-footer{padding:24px 32px;line-height:1.8}
@media(hover:hover){body.studio .region-card:hover{transform:translateY(-2px)!important;box-shadow:0 8px 20px #172D2C0D!important}}
@media(max-width:1100px){body.studio>header{flex-wrap:wrap}body.studio .account-nav{margin-left:auto}body.studio .exercise{grid-template-columns:minmax(0,1fr) minmax(280px,.9fr)}body.studio .studio-hero-copy{padding:32px}body.studio .region-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){
 body.studio>header{padding:16px;gap:12px;position:static}
 body.studio>header>b{font-size:22px}
 body.studio .account-nav{flex-wrap:wrap;max-width:100%;gap:4px}
 body.studio .account-nav button{padding:8px;font-size:16px;max-width:180px}
 body.studio .app-nav{order:3;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:4px}
 body.studio .app-nav button{font-size:16px;padding:8px 4px;text-align:center;white-space:normal}
 body.studio>main{display:block;padding:24px 16px}
 body.studio #lab-sidebar{display:none}
 body.studio .category-select{display:grid;gap:8px;margin-bottom:16px;font-size:16px;color:var(--muted)}
 body.studio .category-select select{width:100%}
 body.studio .heading h1{font-size:32px}
 body.studio .heading{gap:8px}
 body.studio .timer{min-width:80px;padding:8px 0 8px 8px}
 body.studio .timer small{font-size:16px}
 body.studio .timer strong{font-size:24px}
 body.studio .toolbar{margin:0;flex-wrap:wrap}
 body.studio #progress{flex-basis:100%}
 body.studio .exercise{grid-template-columns:1fr;gap:16px}
 body.studio .plate{width:100%;max-width:100%;margin:0}
 body.studio .plate{display:flex;flex-direction:column}
 body.studio .diagram-tools{order:1}
 body.studio #muscleCredit{order:2}
 body.studio #diagram{height:auto;max-height:500px;min-height:0;aspect-ratio:1104/1424}
 body.studio .diagram-tools{padding:8px;gap:4px;display:flex;width:100%}
 body.studio .diagram-tools button{flex:1 1 auto;padding:8px;font-size:16px}
 body.studio .answer-panel{padding:20px;position:static}
 body.studio #answers{grid-template-columns:1fr}
 body.studio .answer-actions{position:static;padding-bottom:env(safe-area-inset-bottom,0px)}
 body.studio .studio-hero{grid-template-columns:1fr;min-height:0}
 body.studio .studio-hero-copy{padding:24px}
 body.studio .studio-hero h2{font-size:44px!important}
 body.studio .hero-specimen{min-height:240px;margin:0 16px 16px}
 body.studio .hero-specimen img{height:240px;object-fit:contain;transform:none}
 body.studio .dashboard-stats{grid-template-columns:1fr 1fr;margin:24px 0}
 body.studio .dashboard-stats article{padding:16px 12px}
 body.studio .dashboard-stats article:nth-child(3){border-left:0}
 body.studio .dashboard-stats strong{font-size:24px}
 body.studio .section-heading{display:block;margin:24px 0 16px}
 body.studio .search-label{margin-top:16px}
 body.studio .region-search{width:100%}
 body.studio .region-grid{grid-template-columns:1fr 1fr;gap:12px}
 body.studio .region-art{height:152px}
 body.studio .region-copy{padding:12px}
 body.studio .region-copy strong{font-size:20px}
 body.studio .region-copy>small{font-size:16px}
 body.studio .study-bottom{grid-template-columns:1fr}
 body.studio .study-feature{padding:24px}
 body.studio .atlas-layout,body.studio .answers-layout{grid-template-columns:1fr}
 body.studio .answer-categories{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:280px;overflow-y:auto}
 body.studio .answer-list{columns:1}
 body.studio .muscle-list{max-height:280px}
 body.studio .atlas-card-top{padding:20px;flex-wrap:wrap}
 body.studio .entrance-layout{grid-template-columns:1fr}
 body.studio .entrance-copy{padding:24px}
 body.studio .entrance-copy h1{font-size:40px;margin:16px 0}
 body.studio .entrance-copy p{font-size:16px}
 body.studio .entrance-specimen{margin:0 16px 16px}
 body.studio .entrance-specimen img{height:220px}
 body.studio dialog{padding:24px;width:calc(100% - 24px);max-width:calc(100% - 24px)}
 body.studio .auth-gate[data-entrance=signup],body.studio .auth-gate[data-entrance=signin]{padding:24px}
 body.studio .workspace-form{width:auto;min-width:0}
 body.studio .learning-dialog{width:calc(100% - 24px)}
 body.studio .workspace-grid{grid-template-columns:1fr}
 body.studio .learning-body{padding:16px}
 body.studio .site-footer{padding:24px 16px}
}
@media(max-width:360px){body.studio .region-grid{grid-template-columns:1fr}body.studio .region-card{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center}body.studio .region-art{height:144px;border-radius:15px 0 0 15px}body.studio .hero-secondary{margin:8px 0 0}body.studio .heading{flex-wrap:wrap}body.studio .timer{text-align:left;border:0;display:flex;gap:12px;align-items:center;padding:0}body.studio .account-nav{margin-left:0}body.studio .entrance-actions button{flex:1}body.studio .answer-panel{padding:16px}}
@media(prefers-reduced-motion:reduce){body.studio *,body.studio *:before,body.studio *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}body.studio .reveal-specimen{clip-path:none;opacity:1}body.studio .region-card:hover{transform:none!important}}

/* Keep the diagram and answer controls usable beside long name lists. */
body.studio #answers{max-height:clamp(220px,42dvh,440px);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding:4px;scroll-padding:6px}
body.studio .answer-actions{position:sticky;bottom:0;z-index:5;gap:8px;padding:12px 0 0;margin-top:12px;background:var(--surface)}
body.studio .answer-actions .selection-help,body.studio .quick-feedback{flex:0 0 100%;min-height:0;margin:0 0 4px;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
body.studio .quick-feedback:empty{display:none}
body.studio .quick-feedback.correct{color:var(--success)}
body.studio .quick-feedback.wrong{color:var(--error)}
@media(min-width:801px){body.studio .exercise>.plate,body.studio .answer-panel{position:sticky;top:16px}body.studio #diagram{height:calc(100dvh - 136px);max-height:680px;aspect-ratio:auto}body.studio .answer-panel{padding:20px}body.studio .question{margin-bottom:8px}body.studio #feedback{min-height:24px}body.studio .answer-panel h2{margin:12px 0}}
@media(max-width:800px){
 body.studio[data-screen=lab]{padding-bottom:170px}
 body.studio[data-screen=lab] .answer-actions{position:fixed;inset:auto 0 0;bottom:0;z-index:20;margin:0;padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid var(--control);box-shadow:0 -4px 16px #172D2C10}
 body.studio .answer-actions button{flex:1 1 auto;min-height:44px}
 body.studio #answers{max-height:clamp(200px,34dvh,320px)}
 body.studio #diagram{height:clamp(240px,40dvh,380px);aspect-ratio:auto}
 body.studio .exercise>.plate{position:sticky;top:0;z-index:3;max-height:none}
 body.studio .question{margin-bottom:8px}
 body.studio #feedback{min-height:24px}
}
@media print{body.studio #answers{max-height:none;overflow:visible}body.studio .exercise>.plate,body.studio .answer-panel{position:static}}
/* On small screens, keep the diagram and list in one bounded workspace. */
@media(max-width:800px){
 body.studio .exercise{height:calc(100svh - 180px);min-height:400px;display:grid;grid-template-rows:minmax(180px,.52fr) minmax(180px,.48fr);gap:12px}
 body.studio .exercise>.plate{position:relative;top:auto;z-index:auto;height:100%;min-height:0}
 body.studio #diagram{height:100%;min-height:0;flex:1}
 body.studio .diagram-tools{padding:8px;gap:4px;flex:none}
 body.studio .diagram-tools button{font-size:14px;padding:6px 8px}
 body.studio .answer-panel{display:flex;flex-direction:column;min-height:0;overflow:visible;padding:12px}
 body.studio .answer-panel .question,body.studio .answer-panel h2{flex:none}
 body.studio .answer-panel h2{margin:4px 0 8px}
 body.studio .answer-panel .question{margin:0 0 4px}
 body.studio .question strong{font-size:16px}
 body.studio .answer-panel #feedback{display:none}
 body.studio #answers{flex:1;min-height:0;max-height:none}
}
@media(min-width:801px){body.studio .quick-feedback{display:none}}
@media(max-width:800px){body.studio .exercise>.answer-panel{height:100%;align-self:stretch;overflow:hidden}body.studio .answer-panel #answers{height:0;flex:1 1 0;overflow-y:auto}}
@media(max-width:800px){body.studio .exercise{position:sticky;top:0;z-index:2}}
@media(max-width:800px){body.studio :is(.session-options,.practice-resources){position:relative;z-index:4;background:var(--paper)}body.studio .session-options{margin-top:20px;padding-bottom:16px}body.studio .practice-resources{padding-bottom:180px}}

body.studio .skipped-answer-dialog{width:min(640px,calc(100% - 32px));max-width:640px}
body.studio .skipped-art{border:1px solid var(--line);background:var(--surface);border-radius:12px;overflow:hidden;margin:16px 0}
body.studio .skipped-art svg{display:block;width:100%;height:300px}
body.studio .skipped-answer-dialog form,body.studio .deck-dialog form{display:grid;gap:16px}
body.studio .skipped-answer-dialog label,body.studio .deck-dialog form label{display:grid;gap:8px}
body.studio .skipped-answer-dialog textarea,body.studio .deck-dialog textarea{width:100%;resize:vertical}
body.studio .deck-dialog{width:min(960px,calc(100% - 32px));max-width:960px}
body.studio .deck-dialog:has(form){width:min(600px,calc(100% - 32px));max-width:600px}
body.studio .deck-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0;height:auto;min-height:48px;border:0;background:transparent}
body.studio .deck-dialog>header h2{margin:0;font-size:32px;text-transform:none}
body.studio .deck-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0}
body.studio .import-label{display:grid;gap:8px;font-size:14px;max-width:100%}
body.studio .import-label input{width:240px;max-width:100%;font-size:14px;padding:6px}
body.studio .deck-search{display:grid;gap:8px;margin:16px 0}
body.studio .deck-search input{width:100%}
body.studio .deck-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body.studio .personal-deck,body.studio .personal-cards article{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--surface);min-width:0;overflow-wrap:anywhere}
body.studio .personal-deck h3,body.studio .deck-heading h3{font-family:'Source Serif 4',Georgia,serif;font-size:28px;margin:8px 0}
body.studio .personal-deck p{color:var(--muted)}
body.studio .personal-deck button{margin-right:8px}
body.studio .personal-deck{transition:transform 400ms var(--motion-out),box-shadow 400ms var(--motion-out)}
body.studio .personal-cards{display:grid;gap:12px}
body.studio .personal-cards h4{font-size:18px;line-height:1.4;margin:0 0 12px;white-space:pre-wrap}
body.studio .personal-cards p,body.studio .personal-review h3,body.studio .personal-review .review-response p{white-space:pre-wrap;overflow-wrap:anywhere}
body.studio .personal-cards small{display:block;margin:12px 0;font-size:14px;color:var(--muted)}
body.studio .personal-cards button{margin:4px 8px 0 0}
body.studio .personal-hint{margin:12px 0}
body.studio .personal-review h3{font-size:26px;line-height:1.4}
body.studio .personal-review .review-sheet{min-height:360px}
body.studio .card-hint{color:var(--muted)}
body.studio .deck-empty{padding:24px;border:1px dashed var(--control);border-radius:12px}
@media(hover:hover) and (pointer:fine){body.studio .personal-deck:hover{transform:translateY(-3px);box-shadow:0 10px 24px #172D2C0C}}
@media(max-width:600px){body.studio .deck-grid{grid-template-columns:1fr}body.studio .deck-dialog{padding:20px 16px}body.studio .deck-toolbar button{flex:1}body.studio .personal-review h3{font-size:23px}body.studio .skipped-art svg{height:240px}}
@media(prefers-reduced-motion:reduce){body.studio .personal-deck:hover{transform:none}}
@media(max-width:800px){body.studio[data-screen=lab]{padding-bottom:calc(var(--answer-dock-height,170px) + 16px)}body.studio .exercise{height:calc(100svh - var(--answer-dock-height,180px) - 16px)}body.studio .practice-resources{padding-bottom:calc(var(--answer-dock-height,180px) + 16px)}}
/* Orientation stays next to the picture rather than depending on hidden source labels. */
.diagram-view-label{margin:0;padding:10px 14px;background:#e7efeb;color:#145b55;font:600 12px/1.5 Inter,system-ui,sans-serif;border-bottom:1px solid #ddddd3;letter-spacing:.015em}
.region-view{display:block;font-size:11px;color:#526360;margin:4px 0 8px}