:root { color-scheme: dark; --bg: #10120f; --panel: #191c16; --ink: #ecebdc; --muted: #a1a792; --orange: #efa243; --line: #343b2e; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Segoe UI', system-ui, sans-serif; background-image: linear-gradient(#ffffff02 1px, transparent 1px); background-size: 100% 5px; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
.console { max-width: 1120px; margin: auto; padding: 28px 32px; }
.terminal-header { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 25px; }
.back { text-decoration: none; color: var(--muted); font-size: 14px; }
.online, .eyebrow, .readout, footer, kbd, .clip-number, .clip-category { font-family: Consolas, 'Courier New', monospace; }
.online { font-size: 11px; letter-spacing: .08em; color: #b1ca80; display: flex; align-items: center; gap: 9px; }
.online i { width: 6px; height: 6px; border-radius: 50%; background: #b1ca80; box-shadow: 0 0 12px #b1ca8066; }
.intro { display: flex; align-items: center; gap: 40px; padding: 60px 0 44px; }
.lambda { color: var(--orange); font: 160px Georgia, serif; line-height: 1; border: 1px solid var(--line); padding: 0 26px 20px; }
.eyebrow { font-size: 11px; color: var(--orange); letter-spacing: .13em; }
h1 { margin: 15px 0; font-size: clamp(38px, 6vw, 64px); line-height: 1.04; letter-spacing: -.045em; font-weight: 650; }
h1 span { color: var(--orange); }
.description { color: var(--muted); line-height: 1.6; max-width: 480px; font-size: 15px; }
.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 18px 20px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; }
.volume { display: flex; align-items: center; gap: 12px; }
.volume input { width: 110px; accent-color: var(--orange); }
.volume output { min-width: 35px; color: var(--orange); }
.overlap { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.overlap input { accent-color: var(--orange); width: 16px; height: 16px; }
.controls button { background: transparent; color: var(--ink); border: 1px solid #4e5743; padding: 10px 12px; border-radius: 3px; }
.controls button:hover { border-color: var(--orange); color: var(--orange); }
kbd { font-size: 10px; margin-left: 8px; color: var(--muted); }
.categories { display: flex; flex-wrap: wrap; gap: 8px; padding: 28px 0 20px; }
.categories button { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 10px 15px; border-radius: 3px; font-size: 13px; }
.categories button[aria-pressed="true"] { background: var(--orange); color: #17190f; border-color: var(--orange); }
.readout { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; letter-spacing: .04em; padding: 0 0 14px; min-height: 30px; }
#status { color: var(--orange); }
.sound-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.clip { text-align: left; min-height: 155px; padding: 18px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(140deg, #20251b, var(--panel)); color: var(--ink); display: flex; flex-direction: column; gap: 12px; transition: border-color .15s, background .15s; }
.clip:hover { border-color: #8a9a6b; background: #242b1d; }
.clip.playing { border-color: var(--orange); background: #352a1a; box-shadow: inset 0 0 0 1px var(--orange); }
.clip-top { display: flex; justify-content: space-between; align-items: center; color: var(--orange); }
.clip-number { color: var(--muted); font-size: 10px; }
.clip-name { font-size: 18px; letter-spacing: -.02em; font-weight: 600; margin-top: auto; }
.clip-category { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
footer { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 10px; line-height: 1.8; }
@media (max-width: 800px) { .sound-grid { grid-template-columns: repeat(3, 1fr); } .lambda { font-size: 110px; padding: 0 18px 15px; } .intro { gap: 25px; } }
@media (max-width: 560px) { .console { padding: 20px 18px; } .intro { padding: 36px 0 24px; align-items: flex-start; gap: 15px; } .lambda { font-size: 56px; padding: 0 10px 10px; margin-top: 5px; } .eyebrow { font-size: 9px; line-height: 1.7; } h1 { font-size: 36px; } .description { font-size: 13px; } .sound-grid { grid-template-columns: repeat(2, 1fr); } .clip { min-height: 140px; padding: 15px; } .readout { flex-direction: column; } .online { font-size: 9px; } .controls { gap: 15px; padding: 15px; } .volume { width: 100%; } .volume input { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .clip { transition: none; } }