:root{--ink:#1d2433;--muted:#5b6475;--interface:#6b7280;--paper:#fff;--page:#f4f5f7;--line:#d5d9e0;--accent:#2f5fb3;--accent-soft:#e8eefa;--flag:#7a5b00;--flag-soft:#fff6dc;color:var(--ink);background:var(--page);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:18px;line-height:1.45}*{box-sizing:border-box}body{background:var(--page);margin:0}.app{flex-direction:column;gap:16px;max-width:1280px;margin:0 auto;padding:16px 20px 40px;display:flex}.app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.app-header h1{margin:0;font-size:1.4rem;font-weight:600}.header-pathway{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:18px 20px}.workspace{grid-template-columns:minmax(300px,2fr) 3fr;align-items:start;gap:16px;display:grid}@media (width<=860px){.workspace{grid-template-columns:1fr}}.question-prompt{margin:0 0 16px;font-size:1.35rem;font-weight:600}.choice-row{flex-wrap:wrap;gap:12px;display:flex}button{font:inherit;cursor:pointer;border-radius:8px}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.choice{border:2px solid var(--line);background:var(--paper);min-width:140px;color:var(--ink);padding:12px 20px;font-size:1.1rem}.choice:hover{border-color:var(--accent)}.choice[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.primary{border:2px solid var(--accent);background:var(--accent);color:#fff;padding:10px 20px}.secondary{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:8px 14px}.link-button{color:var(--accent);background:0 0;border:none;padding:2px 6px;font-size:.95rem;text-decoration:underline}.nav-row{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.text-answer{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.text-answer input{border:2px solid var(--line);border-radius:8px;width:12em;padding:8px 12px;font-size:1.3rem}.input-message{color:var(--muted);flex-basis:100%;margin:4px 0 0}.notice{color:var(--muted)}.hint{color:var(--muted);margin:6px 0 0;font-size:.9rem}.problem-box textarea{width:100%;font:inherit;border:1px solid var(--line);resize:vertical;border-radius:8px;padding:8px 10px}.problem-header,.history-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.problem-title{font-weight:600}.history-header h2{margin:0;font-size:1.1rem}.diagram-column{min-height:200px}.diagram{width:100%;height:auto;display:block}.diagram-empty{text-align:center;margin:40px 0}.bar-fill{stroke:none}.bar-fill--wholeBar{fill:#eef2f8}.bar-fill--partsBar{fill:#fff}.bar-fill--group{fill:#f7f9fc}.bar-frame{fill:none;stroke:var(--ink);stroke-width:2px}.bar-line{stroke:var(--ink);stroke-width:2px}.repeat-arrow{fill:var(--ink);stroke:var(--ink);stroke-width:2px}.slot{fill:none;stroke:var(--interface);stroke-width:1.5px;stroke-dasharray:4 3}.diagram-text{white-space:pre}.text-student{fill:var(--ink);color:var(--ink);font-weight:600}.text-interface{fill:var(--interface);color:var(--interface);font-weight:400}.diagram-key{color:var(--muted);flex-wrap:wrap;gap:18px;margin:8px 0 0;font-size:.85rem;display:flex}.key-item{align-items:center;gap:6px;display:inline-flex}.decision-list{margin:0;padding-left:1.4em}.decision{padding:4px 0}.decision-label{color:var(--muted)}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}