:root{--bg: #f5f4fa;--surface: #ffffff;--text: #1b1b3a;--muted: #58587a;--line: #dad8ea;--accent: #0b7c74;--accent-soft: #d7f0ec;--on-accent: #ffffff;--sand: #b7791f;--curve: #c2410c;--wrong: #b91c1c;color-scheme:light}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:IBM Plex Sans Arabic,system-ui,sans-serif;font-size:16px;line-height:1.6}button{font:inherit;cursor:pointer}.math{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95em;white-space:nowrap}.status{padding:40px 16px;text-align:center}.status.is-error{color:var(--wrong)}.player{max-width:1100px;margin:0 auto;padding:20px 16px 32px;display:grid;gap:14px}.player-header h1{margin:0;font-size:clamp(1.2rem,3vw,1.6rem);line-height:1.3}.brand{margin:0;color:var(--accent);font-weight:700;font-size:1.4rem}.source{margin:2px 0 0;color:var(--muted);font-size:.9rem}.stage{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;align-items:start}@media (max-width: 760px){.stage{grid-template-columns:1fr}}.graph-wrap{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}.graph{display:block;width:100%;aspect-ratio:600 / 440;direction:ltr;touch-action:none;-webkit-user-select:none;user-select:none}.graph.is-draggable{cursor:ns-resize}.graph .grid line{stroke:var(--line);stroke-width:1}.graph .axes line{stroke:var(--muted);stroke-width:1.5}.graph .axes text{fill:var(--muted);font-size:12px}.graph .curve{fill:none;stroke:var(--curve);stroke-width:3.5}.graph .straight{stroke:var(--accent);stroke-width:3.5}.graph .meet circle{fill:var(--sand);stroke:var(--surface);stroke-width:2.5}.graph .meet text{fill:var(--text);font-size:14px;font-weight:700;paint-order:stroke;stroke:var(--surface);stroke-width:4px}.graph .legend text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:16px;font-weight:700;paint-order:stroke;stroke:var(--surface);stroke-width:5px}.legend-curve{fill:var(--curve)}.legend-straight{fill:var(--accent)}.delta-badge{position:absolute;bottom:12px;inset-inline-start:12px;display:flex;gap:10px;align-items:center;padding:6px 12px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:700}.delta-badge.solutions-1{background:var(--sand)}.delta-badge.solutions-0{background:var(--muted)}.start-button{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:fit-content;height:fit-content;padding:14px 28px;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:1.2rem;font-weight:700;box-shadow:0 8px 24px #0b7c744d}.side{display:grid;gap:12px}.board{list-style:none;margin:0;padding:12px;min-height:140px;display:grid;align-content:start;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px}.board li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:12px;align-items:baseline;padding:8px 10px;border-radius:8px;animation:write-in .4s ease-out}.board li.is-newest{background:var(--accent-soft)}.board-label{color:var(--muted);font-size:.9rem}.board .math{white-space:normal;text-align:left}@keyframes write-in{0%{opacity:0;transform:translateY(6px)}}.ask-panel,.explore-note{padding:14px;border:2px solid var(--sand);border-radius:14px;background:var(--surface);display:grid;gap:10px}.ask-prompt{margin:0;font-weight:700;font-size:1.1rem}.ask-note{margin:0;color:var(--muted);font-size:.92rem}.ask-panel input[type=range]{width:100%;accent-color:var(--accent)}.choices{display:grid;gap:8px}.choices button,.ask-result button,.explore-note button{padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text)}.choices button.is-right,.ask-result button,.explore-note button{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.choices button.is-wrong{border-color:var(--wrong);color:var(--wrong)}.ask-result{margin:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font-weight:700}.ask-result.is-right{color:var(--accent)}.ask-result.is-wrong{color:var(--wrong);font-weight:500}.explore-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.captions{margin:0;min-height:3.4em;padding:10px 14px;border-radius:12px;background:var(--text);color:#ffffff73;font-size:clamp(1rem,2.4vw,1.25rem);line-height:1.7}.captions .is-spoken{color:#fff}.controls{display:flex;gap:12px;align-items:center}.play-button{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent)}.play-button:disabled{opacity:.4;cursor:not-allowed}.timeline{position:relative;flex:1;display:flex;align-items:center}.timeline input{width:100%;accent-color:var(--accent)}.ask-mark{position:absolute;top:-6px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--sand);pointer-events:none}.clock{flex:none;color:var(--muted);font-size:.9rem}