@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

/* [hidden] must always win — except overlays that animate out via their own rules */
[hidden]:not(#sheet):not(#freezeOverlay):not(#panel) { display: none !important; }

:root {
  --ink: #0a0a0a; --panel: #1c1c1e; --panel-2: #232326; --line-d: #2e2e30;
  --t1: #1c1c1e; --t2: #3a3a3c; --t3: #636366; --t4: #8e8e93; --t5: #aeaeb2;
  --bg: #e5e5ea; --card: #f5f5f7; --hair: #e5e5ea; --hair2: #f0f0f2;
  --w1: #f5f5f7; --w3: #8e8e93; --w4: #636366; --w5: #48484a;
  --accent: #273053; --accent-soft: #8fa2d6; --accent-mid: #47578a;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono: 'DM Mono', 'SF Mono', Menlo, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --radius: 12px;
}

body { font-family: var(--sans); -webkit-font-smoothing: antialiased; background: var(--ink); color: var(--w1); }

/* ---- typography ---- */
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t4); }
.dark .eyebrow, .on-dark .eyebrow { color: var(--w4); }
.eyebrow .acc { color: var(--accent); }
.dark .eyebrow .acc, .on-dark .eyebrow .acc { color: var(--accent-soft); }
.slabel { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t5); margin-bottom: 10px; }

.pill { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t4); border: 1px solid var(--hair); border-radius: 6px; padding: 5px 10px; white-space: nowrap; }
.dark .pill, .on-dark .pill { color: var(--w3); border-color: var(--line-d); }

/* ---- cards & rows ---- */
.card { background: var(--card); border-radius: var(--radius); padding: 18px 20px; }
.card h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--t1); margin-bottom: 4px; }
.card p { font-size: 13px; color: var(--t3); line-height: 1.55; letter-spacing: -0.005em; }
.card.ghost { background: transparent; border: 1px dashed #d1d1d6; }
.dark .card, .on-dark .card { background: var(--panel); }
.dark .card h3, .on-dark .card h3 { color: var(--w1); }
.dark .card p, .on-dark .card p { color: var(--w3); }
.dark .card.ghost, .on-dark .card.ghost { background: transparent; border-color: var(--line-d); }

.n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none;
  background: var(--ink); color: #fff; border-radius: 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.n.acc { background: var(--accent); }

.rows { background: var(--card); border-radius: var(--radius); padding: 4px 18px; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.row:last-child { border-bottom: none; }
.row .k { font-size: 14px; color: var(--t3); letter-spacing: -0.005em; display: flex; align-items: center; gap: 12px; }
.row .v { font-size: 13px; font-weight: 600; color: var(--t1); text-align: right; letter-spacing: -0.005em; }
.dark-rows { background: var(--panel); }
.dark-rows .row { border-color: var(--line-d); }
.dark-rows .row .k { color: var(--w3); }
.dark-rows .row .v { color: var(--w1); }

.chip { font-size: 14px; font-weight: 500; color: var(--t2); background: var(--card); border-radius: 10px; padding: 9px 14px; letter-spacing: -0.005em; }
.chip.dim { color: var(--t4); background: transparent; border: 1px dashed #d1d1d6; }

.note { border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.note .bang { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--accent); flex: none;
  width: 22px; height: 22px; border: 1px solid var(--accent); border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.note p { font-size: 13.5px; color: var(--t3); line-height: 1.6; }
.note p strong { color: var(--t1); font-weight: 600; }
.dark .note, .on-dark .note { border-color: var(--line-d); }
.dark .note .bang, .on-dark .note .bang { color: var(--accent-soft); border-color: var(--accent-mid); }
.dark .note p, .on-dark .note p { color: var(--w3); }
.dark .note p strong, .on-dark .note p strong { color: var(--w1); }

/* ---- buttons & inputs ---- */
.btn { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; border: none; cursor: pointer;
  border-radius: var(--radius); padding: 14px 18px; background: var(--ink); color: var(--w1);
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out), background 160ms ease; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.on-dark-btn { background: var(--w1); color: var(--ink); }
.btn.soft { background: var(--card); color: var(--t1); }
.dark .btn.soft, .on-dark .btn.soft { background: var(--panel); color: var(--w1); border: 1px solid var(--line-d); }
.btn.accent { background: var(--accent); color: #fff; }
.btn.tiny { font-size: 12px; padding: 8px 12px; border-radius: 9px; }
.btn.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }

.field { width: 100%; font-family: var(--sans); font-size: 16px; color: var(--w1); background: var(--panel);
  border: 1px solid var(--line-d); border-radius: var(--radius); padding: 14px 16px; outline: none;
  transition: border-color 160ms ease; }
.field::placeholder { color: var(--w4); }
.field:focus { border-color: var(--accent-mid); }
.light-field { background: var(--card); color: var(--t1); border-color: var(--hair); }
.light-field:focus { border-color: var(--accent); }

input[type='range'].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent-soft) var(--fill, 50%), var(--line-d) var(--fill, 50%)); outline: none;
  animation: breath 3s ease-in-out infinite; }
input[type='range'].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 10px;
  background: var(--w1); border: 1px solid var(--line-d); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); cursor: pointer;
  transition: transform 160ms var(--ease-out); }
input[type='range'].slider:active::-webkit-slider-thumb { transform: scale(1.12); }

/* ---- avatars ---- */
.pxa { display: inline-flex; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--line-d); flex: none; }
.pxa svg { display: block; }

/* ---- motion primitives (Emil Kowalski) ---- */
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }

.pop-in { opacity: 1; transform: none; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
@starting-style { .pop-in { opacity: 0; transform: translateY(8px) scale(0.96); } }
.pop-out { opacity: 0 !important; transform: scale(0.96) !important; transition: opacity 140ms ease, transform 140ms ease; }

@keyframes plop { 0% { opacity: 0; transform: scale(0.7) rotate(-4deg); } 60% { transform: scale(1.05) rotate(1deg); } 100% { opacity: 1; transform: none; } }
.plop { animation: plop 0.42s var(--ease-out) both; }

@keyframes flipIn { from { opacity: 0; transform: perspective(700px) rotateX(24deg) translateY(12px); } to { opacity: 1; transform: perspective(700px) none; } }
.flip-in { animation: flipIn 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); transform-style: preserve-3d; }

@keyframes pulseSoft { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.pulse { animation: pulseSoft 1.6s ease-in-out infinite; }

/* idle animations: signal "this is interactive" without demanding attention */
@keyframes idleBorder { 0%, 100% { border-color: var(--line-d); } 50% { border-color: var(--accent-mid); } }
@keyframes breath { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 162, 214, 0); } 50% { box-shadow: 0 0 0 7px rgba(143, 162, 214, 0.13); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.idle-breath { animation: breath 2.8s ease-in-out infinite; }
/* two-frame hop — pixel sprites should snap, not glide */
@keyframes pxBob { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(-6px); } }
.px-bob { animation: pxBob 1.5s steps(1) infinite; }
.px-bob svg { display: block; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft);
  margin-left: 7px; vertical-align: 1px; animation: pulseSoft 1.8s ease-in-out infinite; }

@keyframes shakeNo { 0%, 100% { transform: none; } 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
.shake { animation: shakeNo 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .rise, .plop, .flip-in { animation-duration: 1ms; animation-delay: 0ms; }
  .pop-in { transition-duration: 1ms; }
  .idle-breath, .live-dot, .p-opt, .emoji-float, .p-static-emoji, .px-bob, .wc-word { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ---- scrollbars (stage aesthetics) ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-d); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }