body{background:var(--void);color:var(--text)}
.practice{max-width:78rem;margin:0 auto;padding:1.6rem clamp(1rem,3vw,2.5rem) 5rem}
.practice-back{font:700 .75rem/1.4 var(--font-ui);margin:.25rem 0 1.1rem}
.practice-back a,.practice-end a{color:var(--ice);text-decoration:none}
.practice-back a:hover,.practice-end a:hover{text-decoration:underline}
.practice-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);column-gap:2.5rem;align-items:start;margin:0 0 1.4rem}
.practice-head .eyebrow{grid-column:1/-1}
.practice .eyebrow{font:700 .7rem/1.4 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ice);margin:0 0 .7rem}
.practice-head h1{grid-column:1;grid-row:2/4;font:300 clamp(2.5rem,4.8vw,4.35rem)/1.02 var(--font-display);margin:0}
.practice-head h1 em{font-weight:400;color:var(--hot)}
.practice-head>p:not(.eyebrow){grid-column:2;font:300 clamp(1rem,1.6vw,1.1rem)/1.55 var(--font-body);margin:0 0 .5rem}
.practice-head .practice-fine{font-size:.89rem!important;color:var(--dim)}
.practice-work{background:var(--panel);border:1px solid var(--line);padding:clamp(.75rem,2vw,1.5rem);border-radius:var(--radius-lg)}
.chart-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.9rem;margin-bottom:.9rem}
.chart-head b{display:block;font:800 .9rem/1.4 var(--font-ui)}
.chart-head span{display:block;font:600 .68rem/1.6 var(--font-ui);color:var(--dim)}
.chart-controls,.chart-navigation,.chart-utilities,.tool-row,.answer-actions{display:flex;flex-wrap:wrap;gap:.45rem}
.chart-controls{align-items:center;justify-content:flex-end}
.chart-utilities{padding-left:.45rem;border-left:1px solid var(--line)}
.practice button{font:700 .72rem/1.3 var(--font-ui);border:1px solid var(--line);background:var(--fill-1);color:var(--text);border-radius:var(--radius-sm);padding:.58rem .78rem;cursor:pointer}
.practice button:hover:not(:disabled){border-color:var(--dim);background:var(--fill-2)}
.practice button:focus-visible,.practice a:focus-visible,.practice input:focus-visible{outline:3px solid var(--ice);outline-offset:2px}
.practice button:disabled{opacity:.48;cursor:not-allowed}
#practice-chart{width:100%;height:480px;display:block;background:var(--stage-bg);border:1px solid var(--line);border-radius:var(--radius-sm);touch-action:none;cursor:crosshair}
.chart-status{min-height:1.5rem;margin:.55rem 0 .7rem;color:var(--dim);font:600 .7rem/1.5 var(--font-ui);font-variant-numeric:tabular-nums}
.tool-row button[aria-pressed="true"]{border-color:var(--hot);color:var(--hot);background:var(--try-bg)}
.tool-help{font:600 .73rem/1.5 var(--font-ui);color:var(--dim);margin:.65rem 0 0}
.rotate-hint{display:none;font:600 .7rem/1.4 var(--font-ui);color:var(--dim);margin:.4rem 0 0}
body.chart-expanded{overflow:hidden}
.practice-work.is-expanded{position:fixed;inset:0;z-index:1000;width:100%;height:100vh;height:100dvh;max-height:100dvh;overflow:auto;display:flex;flex-direction:column;gap:.35rem;padding:clamp(.45rem,1.5vw,1rem);border-radius:0;box-sizing:border-box}
.practice-work.is-expanded .chart-head{flex:0 0 auto;margin:0}
.practice-work.is-expanded #practice-chart{flex:1 1 0;height:0;min-height:220px}
.practice-work.is-expanded .chart-status{flex:0 0 auto;min-height:0;margin:.2rem 0}
.practice-work.is-expanded .tool-row{flex:0 0 auto}
.practice-work.is-expanded .tool-help{flex:0 0 auto;margin:.2rem 0 0}
.practice-answer{display:grid;grid-template-columns:minmax(12rem,1fr) minmax(0,2fr);gap:2rem;margin-top:1.6rem;padding:clamp(1rem,2vw,1.6rem);border:1px solid var(--line);background:var(--panel2);border-radius:var(--radius-lg)}
.practice-answer h2{font:400 clamp(1.55rem,3vw,2.4rem)/1.12 var(--font-display);margin:.2rem 0 .6rem}
.answer-copy>p:not(.eyebrow){font:300 1rem/1.6 var(--font-body);margin:0;color:var(--dim)}
.answer-fields{display:grid;gap:1rem}
.answer-fields fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem .8rem}
.answer-fields legend{font:700 .78rem/1.4 var(--font-ui);margin-bottom:.6rem}
.answer-fields label{font:600 .75rem/1.3 var(--font-ui);display:flex;align-items:center;gap:.45rem;border:1px solid var(--line);padding:.58rem .7rem;cursor:pointer;border-radius:var(--radius-sm)}
.answer-fields label:has(input:checked){border-color:var(--hot);color:var(--hot);background:var(--try-bg)}
.answer-fields input{accent-color:var(--hot);margin:0}
.practice .primary{background:var(--hot);color:var(--on-hot);border-color:var(--hot)}
.practice-feedback{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1rem,2vw,1.6rem);margin:1rem 0}
.practice-feedback h2{font:600 clamp(1.4rem,3vw,2rem)/1.2 var(--font-display);margin:0 0 .5rem}
.practice-feedback>p{font:300 1rem/1.5 var(--font-body);margin:.35rem 0}
.practice-feedback ul{list-style:none;margin:1rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.55rem}
.practice-feedback li{border:1px solid var(--line);padding:.85rem;background:var(--fill-1);border-radius:var(--radius-sm)}
.practice-feedback li.pass{border-left:3px solid var(--good)}
.practice-feedback li.revise{border-left:3px solid var(--hot)}
.practice-feedback li b,.practice-feedback li span{display:block}
.practice-feedback li b{font:700 .76rem/1.4 var(--font-ui);margin-bottom:.3rem}
.practice-feedback li span{font:300 .9rem/1.5 var(--font-body);color:var(--dim)}
.future-note{padding:1rem 1.2rem;border-left:3px solid var(--ice);background:var(--panel2);font:300 1.05rem/1.55 var(--font-body)}
.future-note b{font-family:var(--font-ui);font-size:.75rem;text-transform:uppercase;color:var(--ice);margin-right:.45rem}
.practice-end{font:700 .8rem/1.5 var(--font-ui);margin:1.5rem 0 0}
@media(max-width:700px){
  .practice{padding:1.1rem .8rem 3rem}
  .practice-head{display:block}
  .practice-head h1{margin-bottom:1rem}
  .practice-answer{grid-template-columns:1fr;gap:1rem}
  #practice-chart{height:380px}
  .chart-head{align-items:stretch}
  .chart-head>div:first-child{width:100%}
  .chart-controls{width:100%;justify-content:space-between}
  .chart-navigation{flex:1 1 12rem}
  .chart-navigation button{flex:1}
  .chart-utilities{flex:1 1 auto;justify-content:flex-end}
  .chart-utilities button{flex:1}
  .tool-row button{flex:1 1 8rem}
  .answer-fields label{flex:1 1 9rem}
  .answer-actions button{flex:1 1 9rem}
  .rotate-hint{display:block}
  .practice-work.is-expanded .rotate-hint{display:none}
}
@media(max-height:520px) and (orientation:landscape){
  #practice-chart{height:290px}
  .rotate-hint{display:none}
  .practice-work.is-expanded{gap:.2rem;padding:.35rem .6rem}
  .practice-work.is-expanded .chart-head{gap:.25rem}
  .practice-work.is-expanded .chart-head span,.practice-work.is-expanded .tool-help,.practice-work.is-expanded .rotate-hint{display:none}
  .practice-work.is-expanded #practice-chart{min-height:190px}
  .practice-work.is-expanded .chart-status{font-size:.65rem;line-height:1.2}
  .practice-work.is-expanded .tool-row button{padding:.3rem .5rem}
}