:root {
      color-scheme: light;
      --paper:#f3f0e8;
      --paper-2:#ebe6dc;
      --ink:#171713;
      --muted:#716d64;
      --line:rgba(23,23,19,.16);
      --glass:rgba(247,244,237,.88);
    }
    * { box-sizing: border-box; }
    html, body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; color:var(--ink); }
    body { touch-action:none; overscroll-behavior:none; -webkit-font-smoothing:antialiased; }
    #app { position:fixed; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 50% 18%, #fbf9f4 0%, var(--paper) 52%, #e9e4da 100%); }
    canvas { display:block; background:transparent; filter:drop-shadow(0 14px 30px rgba(31,27,20,.07)); }
    .overlay { position:fixed; inset:0; display:grid; place-items:center; padding:24px; background:rgba(239,235,226,.78); backdrop-filter:blur(18px) saturate(.9); -webkit-backdrop-filter:blur(18px) saturate(.9); z-index:5; }
    .panel { width:min(430px,100%); text-align:center; padding:22px; border:1px solid rgba(23,23,19,.08); border-radius:26px; background:rgba(250,248,243,.76); box-shadow:0 18px 60px rgba(30,26,19,.10), inset 0 1px 0 rgba(255,255,255,.8); }
    h1 { margin:0 0 12px; font-size:30px; font-weight:760; letter-spacing:-.045em; }
    p { margin:0 0 18px; font-size:14px; line-height:1.5; color:var(--muted); }
    .result { margin:10px 0 20px; font-size:52px; line-height:.95; font-weight:680; font-variant-numeric:tabular-nums; letter-spacing:-.06em; }
    button { appearance:none; border:0; background:var(--ink); color:#f8f6f0; border-radius:999px; padding:14px 18px; width:100%; font:inherit; font-size:14px; font-weight:720; cursor:pointer; box-shadow:0 8px 18px rgba(23,23,19,.12); transition:transform .12s ease, opacity .12s ease, box-shadow .12s ease; }
    button:active { transform:scale(.985); box-shadow:0 4px 10px rgba(23,23,19,.12); }
    button.secondary { margin-top:9px; background:rgba(255,255,255,.45); color:var(--ink); border:1px solid rgba(23,23,19,.14); box-shadow:none; }
    #hud { position:fixed; inset:env(safe-area-inset-top) 0 auto 0; z-index:4; display:flex; justify-content:space-between; align-items:start; padding:10px 12px; pointer-events:none; font-size:11px; font-variant-numeric:tabular-nums; }
    #hud .controls { display:flex; gap:7px; pointer-events:auto; }
    #hud button { width:auto; padding:8px 11px; border-radius:999px; font-size:11px; background:rgba(248,246,240,.80); color:var(--ink); border:1px solid rgba(23,23,19,.10); box-shadow:0 5px 16px rgba(23,23,19,.06); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
    #debug { white-space:pre; line-height:1.35; background:rgba(248,246,240,.78); padding:7px 9px; border:1px solid rgba(23,23,19,.08); border-radius:12px; color:#514e47; backdrop-filter:blur(10px); }
    .level-grid { display:grid; gap:9px; margin-top:16px; text-align:left; max-height:min(58vh,520px); overflow:auto; padding:2px; }
    .level-card { border:1px solid rgba(23,23,19,.12); border-radius:17px; padding:13px 14px; background:rgba(255,255,255,.42); display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }
    .level-card.locked { opacity:.30; }
    .level-meta { min-width:0; }
    .level-title { font-weight:760; font-size:15px; letter-spacing:-.02em; }
    .level-sub { margin-top:3px; font-size:11px; color:var(--muted); }
    .level-card button { width:auto; min-width:76px; padding:9px 12px; border-radius:999px; font-size:11px; box-shadow:none; }
    .level-card button:disabled { cursor:default; background:var(--ink); color:#fff; }
    .world-label { font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.17em; color:#777167; }
    .settings-list { display:grid; gap:12px; margin:18px 0; text-align:left; }
    .setting-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid rgba(23,23,19,.10); }
    .setting-row:last-child { border-bottom:0; }
    .setting-name { font-weight:720; font-size:14px; }
    .setting-note { margin-top:3px; font-size:11px; color:var(--muted); }
    .setting-row input[type="range"] { width:150px; accent-color:var(--ink); }
    .switch { width:48px; height:28px; position:relative; }
    .switch input { opacity:0; position:absolute; }
    .switch span { position:absolute; inset:0; border:1px solid rgba(23,23,19,.20); border-radius:20px; background:rgba(255,255,255,.5); }
    .switch span::after { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:var(--ink); transition:transform .18s cubic-bezier(.2,.8,.2,1); box-shadow:0 2px 6px rgba(0,0,0,.16); }
    .switch input:checked + span::after { transform:translateX(20px); }
    .tutorial-symbols { display:flex; align-items:center; justify-content:center; gap:12px; margin:20px 0 24px; font-size:24px; font-weight:760; }
    .tutorial-symbols .ball-icon { width:28px; height:28px; border:1px solid rgba(23,23,19,.55); border-radius:50%; display:inline-block; background:radial-gradient(circle at 35% 30%, #fff 0 12%, #d9d6cf 42%, #8e8a82 100%); box-shadow:0 4px 8px rgba(23,23,19,.18); }
    .small-action { margin-top:10px; font-size:13px; }

    /* Premium HUD + result + level browser. */
    #hud { padding:calc(10px + env(safe-area-inset-top)) 12px 0; }
    #hud .controls { gap:6px; }
    #hud button.hud-icon { width:34px; height:34px; padding:0; display:grid; place-items:center; font-size:0; border-radius:50%; background:rgba(248,246,240,.68); }
    #hud button.hud-icon::before { display:block; font-size:14px; line-height:1; font-weight:760; letter-spacing:-.08em; }
    #pauseButton::before { content:"Ⅱ"; transform:scaleX(.72); }
    #levelsButton::before { content:"⊞"; font-size:16px !important; font-weight:560 !important; }
    #settingsButton::before { content:"•••"; font-size:13px !important; letter-spacing:1px !important; transform:translateY(-1px); }

    .level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-height:min(64vh,560px); overflow:auto; padding:2px 2px 10px; scrollbar-width:none; }
    .level-grid::-webkit-scrollbar { display:none; }
    .level-card { position:relative; min-height:174px; padding:0; display:block; overflow:hidden; border-radius:22px; cursor:pointer; background:rgba(255,255,255,.38); transition:transform 140ms ease, background 140ms ease; }
    .level-card:not(.locked):active { transform:scale(.985); }
    .level-card.locked { opacity:.28; cursor:default; }
    .level-preview { height:105px; padding:11px 11px 4px; display:grid; place-items:center; }
    .level-preview canvas { width:100%; height:100%; filter:none; opacity:.84; }
    .level-card-body { padding:8px 12px 12px; display:flex; align-items:end; justify-content:space-between; gap:8px; }
    .level-number { font:720 10px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; color:var(--muted); }
    .level-title { margin-top:3px; font-size:14px; }
    .level-sub { margin-top:3px; font-size:10px; white-space:nowrap; }
    .level-status { flex:0 0 auto; width:27px; height:27px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(23,23,19,.13); font-size:11px; font-weight:800; }
    .level-card.locked .level-status::before { content:"·"; }
    .level-card:not(.locked) .level-status::before { content:"›"; font-size:18px; font-weight:500; transform:translateY(-1px); }

    #finishOverlay .panel { padding:28px 22px 20px; }
    .finish-kicker { font:720 10px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; color:var(--muted); }
    #finishOverlay h1 { font-size:18px; margin:7px 0 24px; font-weight:680; letter-spacing:-.025em; color:var(--muted); }
    .finish-primary { display:grid; place-items:center; margin-bottom:22px; }
    #finishTime.result { margin:0; font-size:58px; line-height:.9; }
    .finish-scoreline { margin-top:12px; display:flex; align-items:center; justify-content:center; gap:10px; }
    #finishScore { font-size:22px !important; font-weight:780 !important; margin:0 !important; letter-spacing:-.03em; }
    #finishRank { margin:0 !important; padding:5px 9px; border:1px solid rgba(23,23,19,.13); border-radius:999px; font:760 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.11em; color:var(--ink); }
    .finish-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 20px; }
    .finish-stat { padding:11px 12px; border:1px solid rgba(23,23,19,.09); border-radius:15px; background:rgba(255,255,255,.28); text-align:left; }
    .finish-stat-label { display:block; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
    .finish-stat-value { display:block; margin-top:4px; font-size:17px; font-weight:760; font-variant-numeric:tabular-nums; }
    #finishStats { display:none; }
    .finish-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .finish-actions button { margin:0 !important; }
    #nextLevel { grid-column:1/-1; }
    #finishLevels { background:transparent; }
    .panel-head { margin-bottom:14px; }
    .panel-head p { margin-bottom:0; }

    /* Motion system: one shared timing language for product UI. */
    .overlay:not(.hidden) { animation:overlayIn 220ms cubic-bezier(.2,.8,.2,1) both; }
    .overlay:not(.hidden) .panel { animation:panelIn 360ms cubic-bezier(.18,.88,.28,1.08) both; transform-origin:50% 55%; }
    #finishOverlay:not(.hidden) .result { animation:resultIn 480ms cubic-bezier(.16,.86,.24,1) 70ms both; }
    #finishOverlay:not(.hidden) #finishScore { animation:resultIn 480ms cubic-bezier(.16,.86,.24,1) 130ms both; }
    #finishOverlay:not(.hidden) #finishRank { animation:resultIn 480ms cubic-bezier(.16,.86,.24,1) 190ms both; }
    .level-card { animation:cardIn 320ms cubic-bezier(.2,.8,.2,1) both; }
    .level-card:nth-child(2) { animation-delay:30ms; }
    .level-card:nth-child(3) { animation-delay:60ms; }
    .level-card:nth-child(4) { animation-delay:90ms; }
    .level-card:nth-child(5) { animation-delay:120ms; }
    .level-card:nth-child(6) { animation-delay:150ms; }
    @keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
    @keyframes panelIn { from { opacity:0; transform:translateY(12px) scale(.975); } to { opacity:1; transform:translateY(0) scale(1); } }
    @keyframes resultIn { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
    @keyframes cardIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:1ms !important; animation-delay:0ms !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
    }
    .hidden { display:none !important; }