Made of little things.

:root{--bg:#f1f2ec;--fg:#273b34;--primary:#697d35;--surface:color-mix(in srgb,var(--bg) 94%,var(--fg));--border:color-mix(in srgb,var(--fg) 15%,var(--bg));--muted:color-mix(in srgb,var(--fg) 65%,var(--bg));--accent:#d3eb88;--control-h:28px;--napplet-text-selection:none;font:13px/1.4 'Avenir Next','Trebuchet MS',sans-serif;color-scheme:light dark}
*{box-sizing:border-box}html,body,#app{height:100%;margin:0;background:var(--bg);color:var(--fg)}body{overflow:hidden;user-select:var(--napplet-text-selection)}button,input{font:inherit}button{cursor:pointer;min-height:var(--control-h);border:0;border-radius:5px;background:transparent;color:inherit;padding:4px 10px;white-space:nowrap}button:hover{background:var(--surface)}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}button[aria-pressed=true]{background:var(--bg);box-shadow:0 1px 3px #0001;color:var(--fg)}input{min-width:0;user-select:text}#app{container-type:inline-size}.game{height:100%;display:grid;grid-template-rows:52px minmax(130px,1.15fr) minmax(230px,1fr)}.too-small{display:none}.toolbar{display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--border)}.track-picker{display:flex;align-items:center;gap:10px;font-weight:700;padding-left:0;min-width:0}.track-picker span:nth-child(2){overflow:hidden;text-overflow:ellipsis}.track-icon{font-size:21px;color:var(--muted)}.chevron{color:var(--muted)}.segmented{display:flex;gap:2px;background:var(--surface);border-radius:6px;padding:3px}.segmented button{font-size:12px;color:var(--muted)}.modes{margin-left:auto}.live-dot{display:inline-block;width:6px;height:6px;background:#77a569;border-radius:50%;margin-right:5px}.icon-button{font:20px/1 monospace;min-width:28px;padding:4px 6px;display:inline-grid;place-items:center}.mobile-scores{display:none}.race-view{position:relative;min-height:0;overflow:hidden}#track-canvas{width:100%;height:100%;display:block}.track-info{position:absolute;left:18px;top:16px;display:flex;gap:12px;font:10px 'SFMono-Regular',Consolas,monospace;letter-spacing:1px;color:#536e5f}.track-info span:first-child{opacity:.65}.timer{position:absolute;top:18px;right:22px;text-align:right;display:grid;gap:2px;color:#2c473c;pointer-events:none}.timer>span{font:9px 'SFMono-Regular',Consolas,monospace;letter-spacing:1px}.timer strong{font:500 clamp(26px,5.5vh,48px)/1.15 'SFMono-Regular',Consolas,monospace;letter-spacing:-2px}.timer strong span{font-size:.5em;letter-spacing:0;margin-left:4px}.timer>span:last-child{font-size:8px;opacity:.7}.progress{position:absolute;bottom:0;height:4px;width:100%;background:#45664c20}.progress i{display:block;height:100%;width:0;background:#708841;transition:width .1s linear}.workbench{min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(255px,1fr);border-top:1px solid var(--border)}.drawing-panel{min-width:0;min-height:0;display:grid;grid-template-rows:42px minmax(70px,1fr) 51px 25px}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:7px 16px;font-size:12px;font-weight:650;gap:8px;min-width:0}.panel-heading>span{display:flex;align-items:center;gap:8px}.step-number{border:1px solid var(--border);border-radius:50%;width:20px;height:20px;display:inline-grid;place-items:center;font:11px monospace;color:var(--muted)}.drawing-actions{display:flex;align-items:center;gap:4px}.drawing-actions button{font-size:11px}.drawing-actions .icon-button{font-size:20px}.pad-wrap{position:relative;min-height:0;background:#fffefa;border-block:1px solid var(--border);margin:0 16px;border-radius:5px;overflow:hidden}#draw-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.pad-badge,.ink-count{position:absolute;top:9px;left:10px;font:8px monospace;letter-spacing:.5px;color:#89938a;pointer-events:none}.ink-count{left:auto;right:10px}.drawing-bottom{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:7px 16px}.presets{display:flex;align-items:center;gap:4px}.presets>span{font-size:10px;color:var(--muted);margin-right:4px}.presets button{display:flex;gap:4px;align-items:center;font-size:20px;padding:2px 6px}.presets button span{font-size:10px}.race-button{background:var(--accent);color:#283b28;border:1px solid #34492b15;font-weight:750;padding:7px 15px;display:flex;align-items:center;justify-content:center;gap:18px;border-radius:5px;min-height:34px}.race-button:hover{background:#c3df70}.race-button span{font-size:20px;font-weight:400}.hint{font-size:10px;padding:0 16px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.score-panel{border-left:1px solid var(--border);min-height:0;display:grid;grid-template-rows:42px 39px 1fr auto 35px}.small-flag{color:var(--muted);font-size:17px}.board-controls{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:0 16px 5px}.board-controls .segmented button{font-size:10px;min-height:24px;padding:3px 8px}#board-mode{font:8px monospace;color:var(--muted);letter-spacing:1px}.score-list{overflow:auto;padding:0 16px;min-height:0}.empty-scores{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;min-height:65px}.empty-scores strong{font-size:12px;font-weight:500}.empty-scores span{font-size:10px;color:var(--muted);max-width:220px}.empty-sketch{font-size:30px!important;line-height:1;color:var(--muted);margin:4px}.score-row{display:grid;grid-template-columns:20px 1fr 44px 61px;align-items:center;width:100%;padding:3px 0;border-bottom:1px solid var(--border);text-align:left;gap:6px;border-radius:0;min-height:41px}.rank{font:11px monospace;color:var(--muted)}.row-name{overflow:hidden;text-overflow:ellipsis;font-size:11px}.row-name small{display:block;color:var(--muted);font:8px monospace}.score-time{font:12px monospace;text-align:right}.limb-thumb{background:#fffefa;width:42px;height:36px;border-radius:4px}.no-design{font-size:9px;color:var(--muted);text-align:center}.score-status{font-size:9px;color:var(--muted);padding:5px 16px;line-height:1.4}.racer-label{display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);padding:4px 16px;font-size:10px;color:var(--muted)}.racer-label input{border:0;background:transparent;color:var(--fg);width:100%;font-size:11px;outline-offset:0}#identity-status{font:8px monospace}.race-message{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:8px;padding:15px 24px;border:1px solid var(--border);border-radius:8px;background:var(--bg);box-shadow:0 8px 28px #1a2c3020;max-width:90%;width:max-content;text-align:center}.race-message[hidden]{display:none}.race-message strong{font-size:21px;letter-spacing:-.7px}.race-message span{font-size:11px;color:var(--muted)}.race-message button{background:var(--accent);color:#283b28;font-size:11px;padding:5px 14px}dialog{color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;max-width:min(500px,calc(100% - 24px));width:500px;max-height:calc(100% - 24px);box-shadow:0 16px 80px #0003}dialog::backdrop{background:#14251f70;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:16px}.dialog-heading strong{font-weight:650;letter-spacing:-.5px}dialog p{color:var(--muted);font-size:11px;line-height:1.5}#track-options{display:grid;gap:8px}.track-option{display:grid;grid-template-columns:65px 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid var(--border);padding:12px}.track-option.selected{border-color:var(--primary)}.track-option strong{display:block;font-size:13px}.track-option small{display:block;white-space:normal;font-size:10px;color:var(--muted);margin-top:3px}.track-option .difficulty{font:8px monospace;color:var(--muted)}.track-mini{width:65px;height:38px}#inspect-canvas{display:block;width:100%;height:220px;border-radius:6px}.dialog-heading .icon-button{font-size:24px}#edit-controls label{display:flex;align-items:center;gap:8px;font-size:11px;margin-top:8px}#edit-slider{flex:1;accent-color:var(--primary)}[hidden]{display:none!important}.dark .track-info{color:#bed0c1}.dark .timer{color:#e2ead5}.dark .progress{background:#14251f50}
@media(min-width:1100px){.game{grid-template-rows:56px minmax(180px,1.3fr) minmax(260px,1fr)}.workbench{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}.pad-wrap{margin:0 20px}.drawing-bottom,.panel-heading{padding-inline:20px}.race-button{min-width:170px}.hint{padding-inline:20px}.toolbar{padding-inline:20px}.score-row{min-height:48px}.score-panel{grid-template-rows:42px 39px 1fr auto 38px}}
@media(max-width:640px){.toolbar{padding:7px 10px;gap:6px}.track-picker{gap:5px;font-size:11px}.track-icon{font-size:18px}.modes{gap:0}.modes button{padding:4px 6px;font-size:10px}.live-dot{display:none}.mobile-scores{display:inline-grid}.game{grid-template-rows:48px minmax(140px,1fr) minmax(225px,1.06fr)}.workbench{grid-template-columns:1fr;position:relative}.score-panel{display:none;border-left:0}.show-scores .score-panel{display:grid}.show-scores .drawing-panel{display:none}.track-info{top:12px;left:12px;gap:7px;font-size:8px}.timer{right:13px;top:32px}.timer>span{font-size:7px}.timer strong{font-size:32px}.timer>span:last-child{font-size:7px}.drawing-panel{grid-template-rows:39px minmax(70px,1fr) 49px 24px}.panel-heading{padding:5px 12px}.pad-wrap{margin:0 12px}.drawing-bottom{padding:5px 12px}.presets>span{display:none}.hint{padding-inline:12px;font-size:9px}.race-button{font-size:11px;gap:12px;padding-inline:12px}.presets button{padding:2px 4px}.presets button span{font-size:9px}.track-option{grid-template-columns:48px 1fr;padding:9px}.track-mini{width:48px}.track-option .difficulty{display:none}.race-message{padding:12px 16px}.race-message strong{font-size:18px}}
@media(max-width:350px){.track-icon,.chevron{display:none}.track-picker{max-width:92px}.toolbar{gap:3px;padding-inline:8px}.modes button{padding-inline:5px}.toolbar>.icon-button{min-width:25px}.presets button span{display:none}.presets button{min-width:32px}.pad-badge{font-size:7px}.ink-count{font-size:7px}}
@media(max-height:460px) and (min-width:641px){.game{grid-template-rows:40px minmax(115px,1fr) minmax(158px,1fr)}.drawing-panel{grid-template-rows:31px minmax(60px,1fr) 42px}.hint{display:none}.score-panel{grid-template-rows:31px 34px 1fr auto}.racer-label{display:none}.timer{top:8px}.timer strong{font-size:27px}.pad-badge,.ink-count{top:5px}.panel-heading{padding-block:2px}.score-status{font-size:8px}}
@media(pointer:coarse){button{min-height:44px;min-width:44px}.toolbar{padding-block:2px}.modes{padding:0}.modes button{min-width:0}.game{grid-template-rows:50px minmax(140px,1fr) minmax(253px,1.1fr)}.drawing-panel{grid-template-rows:46px minmax(90px,1fr) 56px 25px}.panel-heading{padding-block:0}.race-button{min-height:44px}.presets button{padding:2px 4px;min-width:44px}.score-panel{grid-template-rows:46px 50px 1fr auto 38px}.board-controls .segmented button{min-height:44px}.track-picker{min-width:0}.score-row{min-height:44px}.toolbar>.icon-button{min-width:44px}.presets{gap:0}.modes button{padding-inline:5px}.racer-label input{height:32px}}
@media(pointer:coarse) and (max-height:460px) and (min-width:641px){.game{grid-template-rows:46px minmax(110px,1fr) minmax(182px,1fr)}.drawing-panel{grid-template-rows:44px minmax(70px,1fr) 48px}.score-panel{grid-template-rows:44px 44px 1fr auto}.drawing-bottom{padding-block:2px}}
@media(max-width:239px),(max-height:319px){.game{display:none}.too-small{display:grid;place-content:center;text-align:center;height:100%;padding:12px;font-size:12px;line-height:1.7}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(pointer:coarse) and (max-width:400px){.toolbar{gap:2px;padding-inline:4px}.toolbar .track-icon,.toolbar .chevron{display:none}.toolbar .modes button{padding-inline:3px}.toolbar .track-picker{max-width:110px}.toolbar .modes{margin-left:auto}}

.pad-wrap{container-type:size;display:grid;place-items:center;background:var(--surface);border:0}.pad-wrap #draw-canvas{width:min(100cqw,100cqh);height:min(100cqw,100cqh);border:1px solid var(--border);border-radius:3px}.pad-badge{font-size:7px}.ink-count{font-size:7px}

#material{border:1px solid var(--border);font-size:10px;min-width:48px}#material[aria-pressed=true]{background:var(--accent);color:#283b28}.board-controls{flex-wrap:wrap}#board-mode{white-space:nowrap}.drawing-actions{gap:2px}@media(max-width:350px){.panel-heading{padding-inline:8px}.drawing-panel .step-number{display:none}.drawing-panel .panel-heading>span{font-size:10px}.drawing-actions button{padding-inline:5px}.pad-badge{max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* Keep the expanded course list scrollable, with a reachable close control. */
#tracks-dialog[open]{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100% - 24px)}
#tracks-dialog .dialog-heading,#tracks-dialog>p{flex-shrink:0}
#tracks-dialog>p{margin-bottom:0}
#track-options{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;grid-auto-rows:max-content;align-content:start}
.track-option{grid-template-columns:65px minmax(0,1fr) auto;flex-shrink:0}
.track-option strong{white-space:normal}
.track-option .difficulty{display:block;padding:3px 5px;background:var(--surface);border-radius:3px;letter-spacing:.3px}
@media(max-width:640px){.track-option{grid-template-columns:42px minmax(0,1fr);column-gap:8px}.track-mini{width:42px;grid-row:1/3}.track-option .difficulty{grid-column:2;justify-self:start;font-size:8px}.track-option{row-gap:4px}}

/* Course library and segment editor stay inside the existing game frame. */
.level-tabs{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-shrink:0;margin-bottom:10px}.level-tabs .segmented{min-width:0}.level-tabs button{font-size:11px;padding-inline:8px}.level-tabs #create-level{background:var(--accent);color:#283b28}
#level-library{min-height:0;overflow:auto}.library-tools{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}#level-list{display:grid;gap:8px}.level-card{border-bottom:1px solid var(--border);padding:8px 0}.level-card>strong{font-size:13px;overflow-wrap:anywhere}.level-card>small{display:block;color:var(--muted);font-size:10px}.level-card-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.level-card-actions button{font-size:11px;background:var(--surface)}#level-list-status{font-size:11px}.no-design{font-size:16px}#more-scores{display:block;margin:8px auto;font-size:11px}
#level-editor[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:760px;max-width:calc(100% - 20px);max-height:calc(100% - 20px);overflow:hidden}.level-editor-body{min-height:0;overflow:auto}.level-name-label{display:flex;gap:10px;align-items:center;font-size:12px}.level-name-label input{flex:1;min-width:0}#level-editor input,#level-editor select{color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:4px;min-height:32px;padding:4px 6px;font:inherit}#level-canvas{display:block;width:100%;height:150px;border-radius:5px;margin-top:10px}.level-editor-meta{display:flex;justify-content:space-between;align-items:center;font:10px monospace;color:var(--muted)}.level-editor-meta button{font-size:11px}#piece-palette{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}#piece-palette button{background:var(--surface);font-size:11px}#piece-list{display:flex;overflow:auto;gap:4px;padding:4px 0 8px}.piece-chip{font-size:10px;border:1px solid var(--border);flex-shrink:0}.piece-chip[aria-pressed=true]{background:var(--accent);color:#283b28}#piece-form{display:grid;grid-template-columns:minmax(80px,1fr) minmax(60px,1fr) minmax(60px,1fr) auto;gap:8px;align-items:end}#piece-form label{display:grid;gap:3px;font-size:10px;color:var(--muted)}#piece-form input,#piece-form select{width:100%;min-width:0}#piece-form button{background:var(--surface)}.piece-actions{display:flex;gap:4px;margin-top:8px}.piece-actions button{font-size:11px}.level-editor-footer{border-top:1px solid var(--border);padding-top:8px;margin-top:8px}.level-editor-footer>div{display:flex;justify-content:flex-end;gap:6px}.level-editor-footer button{font-size:11px}.level-editor-footer .race-button{min-width:0}.level-editor-footer p{margin:0 0 8px;max-height:58px;overflow:auto;overflow-wrap:anywhere}.dark #level-canvas{filter:brightness(.8)}
@media(max-width:480px){.level-tabs{flex-wrap:wrap;gap:5px}.level-tabs .segmented{flex:1}.level-tabs .segmented button{flex:1;padding-inline:5px;font-size:10px}#level-editor{padding:12px}#level-canvas{height:120px}#piece-form{grid-template-columns:1.2fr 1fr 1fr;gap:6px}#piece-form button{grid-column:1/-1}.level-editor-footer>div{justify-content:stretch}.level-editor-footer>div button{flex:1;padding-inline:7px;white-space:normal}.level-editor-footer p{font-size:10px}#piece-palette{display:grid;grid-template-columns:repeat(3,1fr)}#piece-palette button{padding-inline:3px}.level-card-actions button{flex:1}}
@media(pointer:coarse){#level-editor input,#level-editor select{min-height:44px}.piece-chip{min-height:44px}.level-tabs{min-height:44px}}
@media(max-height:460px){#level-canvas{height:100px}#level-editor .dialog-heading{margin-bottom:5px}.level-editor-footer p{max-height:32px;margin-bottom:4px}}