@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap";:root{color-scheme:light;--ink: #2d323a;--cream: #f4efe5;--teal: #64c7c2;--sea: #2f9aa3;--road: #4b4c62;--road-glow: #7d7f9b;--sunset: #ffb65c;--coral: #ff6f61;--shadow: rgba(44, 58, 72, .18);--glass: rgba(244, 239, 229, .78);--toolbar: rgba(255, 255, 255, .86);--toolbar-ink: #4b4c62;--grid-bg: #f4efe5;--grid-line: #ddd3c2}body[data-theme=dark]{color-scheme:dark;--ink: #edf3f6;--cream: #161b24;--teal: #64c7c2;--sea: #4dd4db;--road: #333b4e;--road-glow: #5b6581;--sunset: #ffb65c;--coral: #ff6f61;--shadow: rgba(8, 12, 20, .45);--glass: rgba(28, 34, 46, .86);--toolbar: rgba(28, 34, 46, .9);--toolbar-ink: #edf3f6;--grid-bg: #243043;--grid-line: #3a485d}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Nunito,system-ui,-apple-system,sans-serif;background:radial-gradient(circle at top left,rgba(100,199,194,.35),transparent 55%),radial-gradient(circle at 78% 10%,rgba(255,182,92,.35),transparent 52%),linear-gradient(135deg,#f6f1e7,#efe7d7 55%,#f0e8df);color:var(--ink);overflow:hidden}body[data-theme=dark]{background:radial-gradient(circle at top left,rgba(77,212,219,.18),transparent 55%),radial-gradient(circle at 78% 10%,rgba(255,182,92,.18),transparent 52%),linear-gradient(135deg,#141a22,#1a2232 55%,#182030)}#root{width:100vw;height:100vh}.app-root{position:relative;width:100%;height:100%}.canvas-host{width:100%;height:100%}.canvas-host canvas{border-radius:0;box-shadow:0 30px 60px #232c3c38}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 15% 20%,rgba(100,199,194,.45),transparent 55%),radial-gradient(circle at 80% 20%,rgba(255,182,92,.4),transparent 52%),linear-gradient(180deg,#f8f1e6e6,#f4eee4f0);z-index:10}body[data-theme=dark] .overlay{background:radial-gradient(circle at 15% 20%,rgba(77,212,219,.2),transparent 55%),radial-gradient(circle at 80% 20%,rgba(255,182,92,.18),transparent 52%),linear-gradient(180deg,#161b26eb,#1a212ff5)}.overlay-panel{width:min(640px,90vw);background:var(--glass);border-radius:28px;padding:3rem 3rem 2.5rem;box-shadow:0 24px 60px var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:grid;gap:1.4rem;text-align:center;animation:floatIn .7s ease-out}.eyebrow{font-family:Fredoka,Nunito,sans-serif;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sea)}.title{font-family:Fredoka,Nunito,sans-serif;font-size:clamp(2.6rem,4vw,3.6rem);color:var(--road)}.subtitle{font-size:1.15rem;line-height:1.6;color:#5c5d6f}body[data-theme=dark] .title{color:#e7edf4}body[data-theme=dark] .subtitle{color:#b7c2cf}body[data-theme=dark] .pill{background:#64c7c229;color:#a6d9dd}.pill-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}.pill{padding:.35rem .9rem;border-radius:999px;background:#64c7c22e;color:#3b6f73;font-weight:600;font-size:.9rem}.primary-button{border:none;border-radius:999px;padding:.85rem 2.4rem;font-family:Fredoka,Nunito,sans-serif;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--sea),var(--teal));box-shadow:0 14px 30px #2f9aa359;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.primary-button:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 18px 36px #2f9aa366}.primary-button:active{transform:translateY(1px) scale(.99)}.ghost-button{border:1px solid rgba(96,106,120,.2);border-radius:999px;padding:.7rem 2rem;font-family:Fredoka,Nunito,sans-serif;font-size:1rem;font-weight:600;color:var(--road);background:#ffffffb3;cursor:pointer}.menu-secondary-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}.menu-secondary-actions .ghost-button{flex:1 1 190px}body[data-theme=dark] .ghost-button{background:#161c28d9;color:#e7edf4;border-color:#788caa4d}.leaderboard-form{display:grid;gap:.7rem;text-align:left}.leaderboard-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.leaderboard-actions .primary-button,.leaderboard-actions .ghost-button{flex:1 1 160px}.field-label{font-size:.9rem;font-weight:700;color:var(--road)}.field-input{border:1px solid rgba(96,106,120,.2);border-radius:14px;padding:.6rem .8rem;font-size:1rem;font-family:Nunito,sans-serif;background:#ffffffd9;color:var(--ink)}body[data-theme=dark] .field-label{color:#d7dee6}body[data-theme=dark] .field-input{background:#141a26e6;color:#edf3f6;border-color:#788caa4d}.leaderboard-week-nav{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem;margin-bottom:.5rem}.leaderboard-week-label{font-weight:600;font-size:.95rem;color:var(--ink);text-align:center;flex:1}body[data-theme=dark] .leaderboard-week-label{color:#e7edf4}.week-nav-btn{padding:.3rem .7rem;font-size:.85rem;min-width:72px}.week-nav-btn:disabled{opacity:0;pointer-events:none}.leaderboard-list{display:grid;gap:.6rem;width:100%}.leaderboard-row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:.6rem;background:#ffffffbf;border-radius:16px;padding:.65rem .9rem;box-shadow:0 10px 18px #505b6a1a}.leaderboard-rank{font-weight:700;color:var(--sea)}.leaderboard-name{font-weight:600;color:var(--road)}.leaderboard-score{font-weight:700;color:var(--ink)}body[data-theme=dark] .leaderboard-row{background:#161c28eb;box-shadow:0 10px 18px #080c1459}body[data-theme=dark] .leaderboard-name,body[data-theme=dark] .leaderboard-score{color:#e7edf4}.error-text{color:#d45547;font-weight:600}.success-text{color:#3a8f5b;font-weight:600}.hud{position:absolute;top:var(--hud-top, 1.2rem);left:0;right:0;display:flex;justify-content:center;pointer-events:none;z-index:5;gap:var(--hud-gap, .8rem);align-items:center;padding:var(--hud-padding, 0)}.hud .speed-controls,.hud .speed-toggle,.hud .speed-btn,.hud .speed-mobile{pointer-events:auto}.hud-pill{background:#ffffffd1;border-radius:999px;padding:var(--hud-pill-padding, .5rem 1.3rem);display:flex;gap:var(--hud-pill-gap, .5rem);align-items:baseline;font-family:Fredoka,Nunito,sans-serif;box-shadow:0 12px 30px var(--shadow)}body[data-theme=dark] .hud-pill,body[data-theme=dark] .hud-meter{background:#181e2ae6}body[data-theme=dark] .hud-label,body[data-theme=dark] .hud-meter-label{color:#9aa6b4}body[data-theme=dark] .hud-value{color:#e7edf4}.hud-label{font-size:var(--hud-label-size, .85rem);color:#6c6d7a;letter-spacing:var(--hud-label-letter-spacing, .14em);text-transform:uppercase}.hud-value{font-size:var(--hud-value-size, 1.4rem);font-weight:600;color:var(--road);min-width:var(--hud-value-min-width, 3.5ch);text-align:right;font-variant-numeric:tabular-nums}.hud-meter{background:#ffffffd1;border-radius:999px;padding:var(--hud-meter-padding, .45rem 1rem);display:grid;gap:var(--hud-meter-gap, .35rem);box-shadow:0 12px 30px var(--shadow);min-width:var(--hud-meter-min-width, 560px);width:var(--hud-meter-width, auto);font-family:Fredoka,Nunito,sans-serif}.hud-meter-label{font-size:var(--hud-meter-label-size, .75rem);color:#6c6d7a;letter-spacing:var(--hud-meter-label-letter-spacing, .16em);text-transform:uppercase;text-align:center}.hud-meter-track{height:var(--hud-meter-track-height, 10px);background:#4f50622e;border-radius:999px;overflow:hidden}.hud-meter-fill{height:100%;width:100%;transition:width .4s ease-out,background .6s ease;background:linear-gradient(90deg,#ffb65c,#ff7b6b);border-radius:999px;transition:width .2s ease}.toolbar{position:absolute;left:50%;bottom:1.4rem;transform:translate(-50%);--tool-card-width: 96px;--tool-card-height: 68px;--tool-card-padding: .6rem .85rem .8rem;--tool-icon-size: 26px;--tool-name-size: .64rem;--tool-name-letter-spacing: .1em;--tool-name-opacity: .55;--tool-name-max-width: 92px;--tool-count-size: .72rem;--tool-count-padding: .15rem .5rem;--tool-count-offset: -.35rem;background:radial-gradient(circle at 20% 0%,rgba(120,190,210,.12),transparent 45%),linear-gradient(150deg,#161e2bd1,#121823db);border-radius:24px;padding:1rem 1.2rem 1.1rem;box-shadow:0 16px 30px #090e1752,inset 0 1px #ffffff0d;border:1px solid rgba(120,140,170,.14);display:grid;gap:.6rem;z-index:6;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overflow:visible}body[data-theme=light] .toolbar{background:linear-gradient(140deg,#f5f0e7e6,#ebe4d6e0);border-color:#606a782e;box-shadow:0 18px 38px #2934452e,inset 0 1px #ffffffb3}.toolbar-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem}.toolbar-label{font-family:Fredoka,Nunito,sans-serif;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:#dce6f67a;text-align:left}body[data-theme=light] .toolbar-label{color:#414b5cb3}.toolbar-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:nowrap;overflow:visible}.theme-toggle{border:none;background:#64c7c22e;color:var(--toolbar-ink);border-radius:999px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}.theme-icon{font-size:1rem}.tool-row{display:flex;gap:.55rem;justify-content:center;flex-wrap:nowrap;overflow:visible;padding-top:.15rem}.tool-card{background:linear-gradient(160deg,#171e2beb,#111721eb);border:1px solid rgba(120,140,170,.16);border-radius:16px;padding:var(--tool-card-padding);min-width:var(--tool-card-width);width:var(--tool-card-width);min-height:var(--tool-card-height);text-align:center;display:grid;gap:.3rem;place-items:center;position:relative;box-shadow:0 8px 16px #060a123d,inset 0 0 0 1px #ffffff08;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.tool-card:hover{transform:translateY(-1px);box-shadow:0 12px 20px #060a124d}body[data-theme=light] .tool-card{background:#ffffffe6;border-color:#606a7833;box-shadow:0 10px 20px #505b6a1f,inset 0 0 0 1px #fff9}.tool-card.is-active{border-color:#76e2dc99;box-shadow:0 12px 22px #0e202d66,inset 0 0 0 1px #76e2dc2e;background:linear-gradient(160deg,#1e343ef2,#182834f2);transform:translateY(-1px)}.tool-icon{width:var(--tool-icon-size);height:var(--tool-icon-size);display:grid;place-items:center;color:#7fe4df}.tool-icon svg{width:100%;height:100%}.tool-name{font-weight:700;color:#e7edf4;font-size:var(--tool-name-size);letter-spacing:var(--tool-name-letter-spacing);text-transform:uppercase;opacity:var(--tool-name-opacity);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--tool-name-max-width)}.tool-hint{font-size:.85rem;color:#6c6d7a}.tool-count{position:absolute;top:var(--tool-count-offset);right:var(--tool-count-offset);font-size:var(--tool-count-size);font-weight:700;color:#0e1a24;background:#76e2dccc;border-radius:999px;padding:var(--tool-count-padding);width:fit-content}.tool-hotkey{position:absolute;left:50%;bottom:-.45rem;transform:translate(-50%);font-size:.62rem;font-weight:700;color:#e7edf48c;background:#0f1620b3;border:1px solid rgba(120,140,170,.2);border-radius:999px;padding:.05rem .5rem}.toolbar-divider{width:1px;align-self:stretch;background:linear-gradient(180deg,#8296b41a,#8296b442,#8296b41a)}@media(min-width:721px){.toolbar{left:1.4rem;bottom:auto;top:50%;transform:translateY(-50%)}.toolbar-actions,.tool-row{flex-direction:column;align-items:stretch}.tool-card{width:100%}.toolbar-divider{width:100%;height:1px;background:linear-gradient(90deg,#8296b41a,#8296b442,#8296b41a)}}.toolbar-undo{justify-self:center}.tool-card.is-disabled{opacity:.55;cursor:not-allowed}.tool-card.is-disabled .tool-count{background:#788caa99;color:#1a2433}body[data-theme=light] .tool-name{color:#2f3744}body[data-theme=light] .tool-icon{color:#2f9aa3}body[data-theme=light] .tool-count{color:#1a2730;background:#64c7c2b3}.speed-inline{display:none}.speed-mobile{display:block;position:relative}@media(min-width:721px){.speed-inline{display:flex;gap:.3rem;background:#ffffffd1;border-radius:999px;padding:var(--hud-pill-padding, .5rem 1.3rem);box-shadow:0 12px 30px var(--shadow);font-family:Fredoka,Nunito,sans-serif;align-items:center}body[data-theme=dark] .speed-inline{background:#181e2ae6}.speed-mobile{display:none}}.speed-toggle{border:none;cursor:pointer;transition:background .15s ease}.speed-toggle.is-paused{background:linear-gradient(135deg,var(--sea),var(--teal))}.speed-toggle.is-paused .hud-label,.speed-toggle.is-paused .hud-value{color:#fff}.speed-popover{position:absolute;top:calc(100% + .5rem);right:0;display:flex;gap:.3rem;background:#ffffffd1;border-radius:999px;padding:.3rem;box-shadow:0 12px 30px var(--shadow);animation:popoverIn .15s ease-out;z-index:10}body[data-theme=dark] .speed-popover{background:#181e2ae6}@keyframes popoverIn{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.speed-btn{border:none;background:transparent;color:var(--road);font-family:Fredoka,Nunito,sans-serif;font-size:var(--hud-value-size, 1.4rem);font-weight:600;padding:.2rem .7rem;border-radius:999px;cursor:pointer;transition:background .15s ease,color .15s ease;line-height:1;opacity:.5;white-space:nowrap}body[data-theme=dark] .speed-btn{color:#e7edf4}.speed-btn:focus{outline:none}.speed-btn:hover{opacity:.8;background:#64c7c226}.speed-btn.is-active{background:linear-gradient(135deg,var(--sea),var(--teal));color:#fff;opacity:1}@keyframes floatIn{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:720px){.overlay-panel{padding:2.2rem 1.6rem}.canvas-host canvas{border-radius:0}.toolbar{width:calc(100% - 2rem)}}@media(max-width:540px){.hud{--hud-top: .75rem;--hud-padding: 0 .8rem;--hud-gap: .5rem}.hud-pill{--hud-pill-padding: .35rem .9rem;--hud-pill-gap: .4rem}.hud-label{--hud-label-size: .7rem;--hud-label-letter-spacing: .12em}.hud-value{--hud-value-size: 1.1rem}.hud-meter{--hud-meter-min-width: 0;--hud-meter-width: min(62vw, 260px);--hud-meter-padding: .35rem .8rem .4rem;--hud-meter-gap: .25rem}.hud-meter-label{--hud-meter-label-size: .65rem;--hud-meter-label-letter-spacing: .12em}.hud-meter-track{--hud-meter-track-height: 8px}.toolbar{bottom:.8rem;padding:.85rem .8rem .95rem;gap:.5rem;--tool-card-width: 94px;--tool-card-height: 82px;--tool-card-padding: .65rem .7rem .85rem;--tool-icon-size: 36px;--tool-name-size: .52rem;--tool-name-max-width: 82px;--tool-count-size: .66rem;--tool-count-padding: .1rem .4rem}.toolbar-label{font-size:.6rem;letter-spacing:.24em}.toolbar-actions{gap:.5rem}.tool-row{gap:.45rem}.tool-card{gap:0}.tool-hotkey{display:none}.toolbar-undo{width:38px;height:38px}.toolbar-undo svg{width:20px;height:20px}}
