/* Hallmark · macrostructure: Workbench · theme: Learning Library (design.md) · tone: utilitarian education · anchor hue: green
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4. Existing local Japanese typography retained. */
@import url('tokens.css');
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{font-family:var(--font-body);color:var(--color-ink);background:var(--color-paper);font-size:var(--text-base);line-height:1.65}button,select,input{font:inherit}button,a,select{touch-action:manipulation}button,.button,select{min-height:44px;border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper);color:var(--color-ink);padding:.5rem .8rem}button,.button{cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.35rem}button:hover,.button:hover{background:var(--color-accent-soft)}button:active{background:var(--color-base)}button[aria-pressed=true]{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent)}button:disabled{opacity:.5;cursor:not-allowed}a{color:var(--color-accent);text-underline-offset:4px}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}h1,h2,h3{font-family:var(--font-display);line-height:1.4;overflow-wrap:anywhere;min-width:0}h1{font-size:clamp(1.35rem,3vw,2rem);margin:.35rem 0}h2{font-size:var(--text-lg);margin:0 0 var(--space-sm)}h3{font-size:var(--text-base)}p{margin:0 0 var(--space-md)}[hidden]{display:none!important}.shell{max-width:1200px;margin:auto;padding:0 var(--space-md)}.skip{position:absolute;top:-100px;z-index:10;background:var(--color-paper);padding:var(--space-md)}.skip:focus{top:0}.mast{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);border-bottom:1px solid var(--color-rule);padding:var(--space-sm) 0}.mast a{min-height:44px;display:flex;align-items:center;white-space:nowrap;font-size:var(--text-sm)}.brand{font-weight:700;text-decoration:none}.intro{padding:var(--space-lg) 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-md)}.eyebrow{font-size:var(--text-sm);font-weight:700;letter-spacing:.025em;color:var(--color-accent);margin:0}.question-bar{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:end;background:var(--color-surface);padding:var(--space-md);border-block:1px solid var(--color-rule)}.question-bar label{display:grid;gap:.25rem;font-size:var(--text-sm);font-weight:700}.question-bar select{min-width:145px}.question-bar p{font-size:var(--text-sm);margin:0}.question-bar p span{color:var(--color-muted)}.notice{padding:var(--space-md);background:var(--color-note);margin-top:var(--space-md)}.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--space-lg);border-bottom:1px solid var(--color-rule)}.steps button{border:0;border-radius:0;min-height:62px;font-weight:700;gap:var(--space-sm);font-size:var(--text-base)}.steps button span{font-size:var(--text-sm);font-weight:400;color:var(--color-muted)}.steps button[aria-current=step]{background:var(--color-accent-soft);box-shadow:inset 0 -3px var(--color-accent);color:var(--color-accent)}.problem{padding:var(--space-md) 0;display:grid;gap:.2rem}.problem strong{font-size:var(--text-sm);color:var(--color-accent)}.problem p{margin:0;font-weight:700}.workbench{display:grid;grid-template-columns:minmax(0,1fr);border-block:1px solid var(--color-rule)}.visual{min-width:0;background:var(--color-surface);padding:var(--space-md)}.visual-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.visual-head h2{margin:0}.check{display:flex;align-items:center;gap:.25rem;min-height:44px;font-size:var(--text-sm);white-space:nowrap;cursor:pointer}.check input{width:20px;height:20px;accent-color:var(--color-accent)}.diagram-wrap{position:relative}.diagram-wrap svg{display:block;width:100%;height:auto;aspect-ratio:720/440;touch-action:pan-y;user-select:none;overflow:visible}.diagram-tip{text-align:center;font-size:.75rem;color:var(--color-muted);margin:0 0 var(--space-sm)}.dimensions{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem var(--space-md);font-size:var(--text-sm);margin-block:var(--space-sm) var(--space-md)}.view-tools{display:flex;justify-content:center;gap:var(--space-sm);flex-wrap:wrap}.view-tools button{font-size:var(--text-sm);padding-inline:.65rem}.slider-box{margin-top:var(--space-md);border-top:1px solid var(--color-rule);padding-top:var(--space-sm)}.slider-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.slider-heading label{font-weight:700;font-size:var(--text-sm)}.slider-heading output{font-weight:400;display:inline-block;min-width:3em;margin-left:var(--space-sm)}input[type=range]{display:block;width:100%;min-height:44px;accent-color:var(--color-accent);cursor:pointer}.range-ends{display:flex;justify-content:space-between;font-size:var(--text-sm);color:var(--color-muted);margin-top:-.5rem}.small{font-size:var(--text-sm);color:var(--color-muted)}.face-buttons{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-md)}.face-buttons button{font-size:var(--text-sm)}.face-info{font-size:var(--text-sm);margin:var(--space-sm) 0 0;min-height:1.6em}.explanation{padding:var(--space-lg) var(--space-md);min-width:0}.explanation h2{font-size:1.4rem;margin-top:var(--space-sm)}.explanation #lesson-lead{line-height:1.8}.explanation #related-notice{padding-left:.7rem;border-left:2px solid var(--color-rule)}.base-diagram{width:100%;max-width:300px;height:170px;display:block;margin:auto}.formula{font-size:1.1rem;font-weight:700;line-height:1.9;background:var(--color-accent-soft);padding:var(--space-md);margin:var(--space-md) 0;overflow-wrap:anywhere}.answer{font-size:1.5rem;color:var(--color-accent);font-weight:700}.reveal-controls{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin:var(--space-md) 0}.note{padding:var(--space-sm) var(--space-md);background:var(--color-note);color:var(--color-note-ink);font-size:var(--text-sm)}.prediction{border-block:1px solid var(--color-rule);padding:var(--space-md) 0;margin-block:var(--space-md)}.prediction p{font-weight:700}.choices{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.feedback{margin:var(--space-md) 0 0;font-size:.9rem}.area-table{border-collapse:collapse;width:100%;font-size:var(--text-sm);margin-block:var(--space-md)}.area-table th,.area-table td{text-align:left;padding:.65rem .3rem;border-bottom:1px solid var(--color-rule)}.area-table th{font-weight:700}.area-table button{font-size:var(--text-sm);padding:.4rem .6rem}.area-table td:last-child{text-align:right;font-variant-numeric:tabular-nums}#help-area{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-rule)}#help-area label{display:block;font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-sm)}#help-select{width:100%;max-width:100%}.help-content{padding:var(--space-md) 0 0;line-height:1.8}.help-content p:last-child{margin:0}.primary{background:var(--color-accent);color:var(--color-on-accent);border-color:var(--color-accent)}.primary:hover{background:var(--color-ink);color:var(--color-on-accent)}.next{width:100%;margin-top:var(--space-lg)}.practice-links{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-block:var(--space-md)}.teacher{margin-block:var(--space-lg);border-bottom:1px solid var(--color-rule)}summary{cursor:pointer;min-height:48px;padding-block:.75rem;font-weight:700}.teacher>div{max-width:760px;padding:var(--space-md) 0}footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-md);font-size:var(--text-sm);color:var(--color-muted);padding:var(--space-lg) 0 var(--space-2xl)}.diagram-label{font-family:var(--font-body);font-size:22px;fill:var(--color-ink);paint-order:stroke;stroke:var(--color-surface);stroke-width:5px;stroke-linejoin:round}.edge-label{font-size:20px}.geometry-face{stroke:var(--color-ink);stroke-width:1.3;stroke-linejoin:round;cursor:pointer}.geometry-face:hover{stroke-width:2.8}.base-fill{fill:var(--color-base)}.side-fill{fill:var(--color-side)}.plain-fill{fill:var(--color-plain)}.selected-fill{fill:var(--color-selected)}.unit-grid{stroke:var(--color-grid);stroke-width:.6;fill:none;pointer-events:none}.diagram-dimension{stroke:var(--color-ink);stroke-width:1.2;fill:none}.base-detail{stroke:var(--color-ink);stroke-width:1.5;fill:var(--color-base)}.base-text{font-size:16px;fill:var(--color-ink);font-family:var(--font-body)}
@media(min-width:850px){.workbench{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.visual{padding:var(--space-lg);border-right:1px solid var(--color-rule)}.explanation{padding:var(--space-lg)}.question-bar p{margin-left:auto}.diagram-wrap svg{min-height:340px}.problem{grid-template-columns:175px minmax(0,1fr);align-items:baseline}}
@media(max-width:420px){.shell{padding-inline:.7rem}.mast{gap:.4rem}.mast a{font-size:.7rem}.question-bar{gap:.65rem;padding:.75rem}.question-bar label{flex:1;min-width:0}.question-bar select{width:100%;min-width:0;font-size:.875rem}.steps button{flex-direction:column;gap:0;font-size:.85rem;min-height:62px;padding:.4rem .1rem}.steps button span{font-size:.7rem}.visual{padding:.75rem}.explanation{padding:var(--space-lg) .75rem}.view-tools{gap:.3rem}.view-tools button{font-size:.75rem;padding-inline:.45rem}.dimensions{font-size:.75rem}.diagram-wrap svg{aspect-ratio:1.35}.intro{gap:.5rem}.intro .button{font-size:.8rem}.area-table{font-size:.75rem}.area-table button{font-size:.75rem}.area-table th,.area-table td{padding:.5rem .1rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Corrections after visual QA: keep selectors readable and diagram labels at CSS-pixel size. */
.diagram-label{font-size:16px;stroke-width:4px}.edge-label{font-size:15px}.diagram-wrap svg{min-height:0}
.lateral-outline{fill:none;stroke:var(--color-accent);stroke-width:2.4;pointer-events:none}
#pre-visual .prediction{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md);margin:0;padding:var(--space-md);background:var(--color-surface);border-bottom:0}#pre-visual .prediction>p{margin:0}#pre-visual .feedback:not(:empty){flex-basis:100%}
@media(max-width:600px){.question-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.question-bar p{grid-column:1/-1}.question-bar label{min-width:0}.question-bar select{width:100%;min-width:0}.question-bar p br{display:none}.question-bar p span{display:block}.diagram-label{font-size:14px}.edge-label{font-size:13px}.steps{position:sticky;top:0;z-index:5;background:var(--color-paper)}}
@media print{.mast,.question-bar,.steps,.view-tools,.slider-box,.face-buttons,.teacher,.next,.reveal-controls,.skip,#help-area,footer,.intro>.button{display:none!important}.shell{max-width:none}.workbench{display:block}.visual{break-inside:avoid}.diagram-wrap svg{height:75mm}.explanation{padding:5mm 0}}