:root{--cream:#fff8ec;--ink:#4a3b2c;--ink-soft:#7a6a55;--peach:#ffb46b;--peach-deep:#f0934a;--sky:#bfe3f2;--card:#fff8eceb;--shadow:0 8px 24px #4a3b2c2e}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{color:var(--ink);background:var(--sky);-webkit-font-smoothing:antialiased;font-family:Nunito,sans-serif}.app{height:100%;position:relative}.app canvas{display:block}.hud{pointer-events:none;flex-direction:column;justify-content:space-between;padding:24px 28px;display:flex;position:absolute;inset:0}.hud-top{justify-content:space-between;align-items:flex-start;display:flex}.level-badge{background:var(--card);box-shadow:var(--shadow);border-radius:18px;align-items:baseline;gap:12px;padding:12px 20px;animation:.5s cubic-bezier(.2,1.4,.4,1) drop-in;display:flex}.level-number{color:var(--peach-deep);font-family:Fredoka,sans-serif;font-size:28px;font-weight:600}.level-text{flex-direction:column;display:flex}.level-name{color:var(--ink);font-family:Fredoka,sans-serif;font-size:18px;font-weight:500}.level-attribution{color:var(--ink-soft);font-size:12px;font-weight:700}.counters{gap:10px;animation:.5s cubic-bezier(.2,1.4,.4,1) 80ms backwards drop-in;display:flex}.counter{background:var(--card);text-align:center;box-shadow:var(--shadow);border-radius:16px;min-width:76px;padding:10px 18px}.counter-value{font-variant-numeric:tabular-nums;font-family:Fredoka,sans-serif;font-size:22px;font-weight:600;display:block}.counter-label{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-size:11px;font-weight:700;display:block}.hud-bottom{gap:10px;display:flex}.hud-spacer{flex:1}.counter.best .counter-value{color:var(--peach-deep)}kbd{color:var(--ink-soft);vertical-align:1px;background:#4a3b2c14;border:1px solid #4a3b2c38;border-bottom-width:2px;border-radius:5px;margin-left:6px;padding:3px 6px;font-family:Nunito,sans-serif;font-size:11px;font-weight:800;line-height:1}kbd.on-primary{color:#fff;background:#ffffff2e;border-color:#ffffff73}.pill-button{pointer-events:auto;color:var(--ink);background:var(--card);cursor:pointer;box-shadow:var(--shadow);border:none;border-radius:999px;padding:10px 22px;font-family:Fredoka,sans-serif;font-size:15px;font-weight:500;transition:transform .15s cubic-bezier(.2,1.4,.4,1),background .15s}.pill-button:hover{background:#fffdf7;transform:translateY(-2px)scale(1.04)}.pill-button:active{transform:translateY(0)scale(.97)}.pill-button.primary{background:var(--peach);color:#fff;padding:12px 28px;font-size:17px}.pill-button.primary:hover{background:var(--peach-deep)}.win-overlay{background:radial-gradient(#fff4e059,#4a3b2c40);place-items:center;animation:.4s fade-in;display:grid;position:absolute;inset:0}.win-card{pointer-events:auto;background:var(--card);text-align:center;border-radius:28px;padding:40px 56px;animation:.55s cubic-bezier(.2,1.6,.4,1) pop-in;box-shadow:0 24px 64px #4a3b2c59}.win-title{color:var(--peach-deep);margin-bottom:8px;font-family:Fredoka,sans-serif;font-size:40px;font-weight:600}.win-stats{color:var(--ink-soft);margin-bottom:24px;font-size:16px}.win-best{color:var(--peach-deep);margin-bottom:4px;font-family:Fredoka,sans-serif;font-size:18px;font-weight:500}.browser-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10;background:#4a3b2c59;place-items:center;animation:.25s fade-in;display:grid;position:absolute;inset:0}.browser{background:var(--cream);border-radius:28px;flex-direction:column;width:min(960px,100vw - 48px);height:min(640px,100vh - 48px);animation:.4s cubic-bezier(.2,1.5,.4,1) pop-in;display:flex;overflow:hidden;box-shadow:0 24px 64px #4a3b2c66}.browser-header{justify-content:space-between;align-items:center;padding:20px 24px 14px;display:flex}.browser-header h2{font-family:Fredoka,sans-serif;font-size:26px;font-weight:600}.browser-body{flex:1;min-height:0;display:flex}.collection-list{flex-direction:column;gap:4px;width:280px;padding:0 12px 16px 16px;display:flex;overflow-y:auto}.collection-item{text-align:left;cursor:pointer;background:0 0;border:none;border-radius:14px;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;font-family:inherit;transition:background .12s;display:flex}.collection-item:hover{background:#4a3b2c0f}.collection-item.active{box-shadow:var(--shadow);background:#fff}.collection-title{color:var(--ink);font-family:Fredoka,sans-serif;font-size:15px;font-weight:500}.collection-meta{color:var(--ink-soft);font-size:12px;font-weight:700}.level-pane{background:#fff;border-radius:24px 0 0;flex-direction:column;flex:1;min-width:0;padding:20px 24px;display:flex}.level-pane-header h3{font-family:Fredoka,sans-serif;font-size:22px;font-weight:600}.attribution{color:var(--ink-soft);font-size:14px;font-weight:700}.license-note{color:var(--ink-soft);margin-top:2px;font-size:12px}.level-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));align-content:start;gap:8px;margin-top:16px;padding-bottom:8px;display:grid;overflow-y:auto}.level-chip{aspect-ratio:1.15;cursor:pointer;background:#4a3b2c0d;border:2px solid #0000;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:1px;font-family:Fredoka,sans-serif;transition:transform .12s cubic-bezier(.2,1.4,.4,1),background .12s;display:flex;position:relative}.level-chip:hover{background:#4a3b2c1a;transform:translateY(-2px)scale(1.05)}.level-chip .chip-number{color:var(--ink);font-size:17px;font-weight:600}.level-chip .chip-best{color:var(--ink-soft);font-size:10px;font-weight:600}.level-chip.attempted{background:#f0934a29}.level-chip.beaten{background:#8cb26940}.level-chip.beaten .chip-number{color:#5a7a3c}.level-chip.current{border-color:var(--peach-deep)}@keyframes drop-in{0%{opacity:0;transform:translateY(-24px)}}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:scale(.7)}}