:root { color-scheme: light dark; --background: #fff; --foreground: #27344b; --base: #25334c; --construction: #4776c7; --point: #dc563f; --preview: #16815f; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; color: #172033; background: #f7f9fd; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button { font: inherit; min-height: 44px; padding: 8px 13px; border: 1px solid #abb6c9; border-radius: 10px; color: inherit; background: #fff; cursor: pointer; }
button.active, button.primary { border-color: #3157b7; color: #fff; background: #3157b7; }
.lab { max-width: 960px; margin: 0 auto; padding: 22px; }
header { margin-bottom: 15px; }
.eyebrow { margin: 0 0 5px; color: #3157b7; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(24px, 5vw, 38px); }
header > p:last-child { margin: 7px 0 0; color: #56627a; }
.problems, .toolbar, .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.toolbar { margin-top: 12px; padding-top: 12px; border-top: 1px solid #d5dce8; }
.tool-status { min-height: 24px; margin: 9px 0; color: #46536b; }
.canvas-wrap { overflow: hidden; border: 1px solid #c8d1e0; border-radius: 14px; background: var(--background); }
canvas { display: block; width: 100%; height: clamp(390px, 56vw, 540px); touch-action: none; cursor: crosshair; }
.actions { justify-content: center; margin-top: 12px; }
.result { margin-top: 12px; padding: 14px; border-left: 5px solid #8090aa; border-radius: 8px; background: #edf1f8; }
.result.correct { border-color: #138a62; background: #e6f7ef; }
.result.incorrect { border-color: #c64141; background: #fff0f0; }
@media (max-width: 580px) { .lab { padding: 17px 12px; } .problems button { flex: 1 1 45%; } .toolbar button { flex: 1 1 45%; } canvas { height: 420px; } }
@media (prefers-color-scheme: dark) { :root { --background: #111827; --foreground: #eef2fb; --base: #d3dbee; --construction: #83aaf0; --point: #ff8068; --preview: #5ed2aa; color: #edf2ff; background: #101522; } header > p:last-child, .tool-status { color: #b4bfd4; } button { color: #edf2ff; background: #1a2232; border-color: #46536b; } .toolbar { border-color: #46536b; } .canvas-wrap { border-color: #46536b; } .result { background: #252e40; } .result.correct { background: #12392f; } .result.incorrect { background: #431f25; } }