:root { --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace; --grotesk: "Archivo", "Helvetica Neue", Arial, sans-serif; --accent: #1a6dff; /* native-blue slider tone */ --ink: #0b0b0d; --paper: #f4f4f0; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; background: #000; color: #fff; font-family: var(--mono); -webkit-font-smoothing: antialiased; cursor: default; } /* ---------- Stage ---------- */ .stage { position: fixed; inset: 0; z-index: 0; } .stage canvas { display: block; width: 100%; height: 100%; } /* theme classes the mode sets on */ body.theme-light { background: var(--paper); color: var(--ink); } body.theme-dark { background: #000; color: #fff; } /* ---------- Top bar ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px; pointer-events: none; } .topbar > * { pointer-events: auto; } .masthead { color: #fff; } body.theme-light .masthead { color: var(--ink); } .masthead__title { font-size: 17px; font-weight: 700; letter-spacing: 0.16em; line-height: 1; } .masthead__mode { font-size: 12px; font-weight: 400; letter-spacing: 0.34em; margin-top: 5px; opacity: 0.85; } .masthead__credit { font-size: 10px; letter-spacing: 0.08em; margin-top: 9px; opacity: 0.45; } /* ---------- Selector ---------- */ .selector { position: relative; } .selector__btn { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; color: inherit; background: transparent; border: 1px solid currentColor; padding: 9px 14px; cursor: pointer; color: #fff; transition: background 0.15s, color 0.15s; } body.theme-light .selector__btn { color: var(--ink); } .selector__btn:hover { background: #fff; color: #000; } body.theme-light .selector__btn:hover { background: var(--ink); color: var(--paper); } .selector__btn span { display: inline-block; transform: translateY(-1px); } .selector__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; list-style: none; background: #000; border: 1px solid #fff; } .selector__menu[hidden] { display: none; } .selector__menu button { display: block; width: 100%; text-align: left; font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: #fff; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.18); padding: 12px 16px; cursor: pointer; } .selector__menu li:last-child button { border-bottom: none; } .selector__menu button:hover, .selector__menu button.is-active { background: #fff; color: #000; } /* ---------- Console ---------- */ .console { position: fixed; top: 92px; left: 20px; z-index: 18; width: 290px; max-width: calc(100vw - 40px); background: rgba(0,0,0,0.82); border: 1px solid rgba(255,255,255,0.85); color: #fff; backdrop-filter: blur(8px); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); } body.theme-light .console { background: rgba(244,244,240,0.9); border-color: var(--ink); color: var(--ink); } .console.is-collapsed { transform: translateX(calc(-100% + 38px)); } .console__grip { display: flex; justify-content: space-between; width: 100%; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: inherit; background: transparent; border: none; border-bottom: 1px solid currentColor; padding: 11px 14px; cursor: pointer; } .console__scroll { max-height: calc(100vh - 250px); overflow-y: auto; padding: 4px 0 0; } .console__scroll::-webkit-scrollbar { width: 7px; } .console__scroll::-webkit-scrollbar-thumb { background: currentColor; opacity: 0.4; } .console__block { padding: 14px; border-bottom: 1px solid rgba(128,128,128,0.3); } .console__controls { display: block; } .lbl { display: block; font-size: 10px; letter-spacing: 0.22em; margin-bottom: 8px; opacity: 0.7; text-transform: uppercase; } textarea#text { width: 100%; resize: vertical; font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; line-height: 1.35; color: inherit; background: transparent; border: 1px solid currentColor; padding: 9px 10px; } textarea#text:focus { outline: 2px solid var(--accent); outline-offset: -1px; } /* ---------- Control widgets (injected) ---------- */ .ctrl { padding: 8px 14px; border-bottom: 1px solid rgba(128,128,128,0.22); } .ctrl__head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.12em; margin-bottom: 4px; } .ctrl__val { font-weight: 700; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; /* tall hit area, thin visible track */ background: transparent; cursor: pointer; } input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: rgba(128,128,128,0.32); } input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(128,128,128,0.32); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -5.5px; /* centre on 3px track */ width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.32); transition: transform 0.12s ease; } input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.18); } input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.05); } input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.32); } /* grid of toggles */ .ctrl--grid .toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; } .tog { display: flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0.04em; cursor: pointer; } .tog input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } /* radio row */ .radios { display: flex; gap: 16px; } .radios label { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; } .radios input { accent-color: var(--accent); cursor: pointer; } /* colour roles — swatch palette + custom picker */ .ctrl--colors { display: flex; flex-direction: column; gap: 15px; } .colorrole { display: flex; flex-direction: column; gap: 9px; } .colorrole__lbl { font-size: 10px; letter-spacing: 0.16em; opacity: 0.7; } .swatches { display: flex; flex-wrap: wrap; gap: 8px; } .swatch { width: 21px; height: 21px; padding: 0; border-radius: 50%; border: 1px solid rgba(128,128,128,0.5); background: var(--c); cursor: pointer; position: relative; transition: transform 0.12s; } .swatch:hover { transform: scale(1.18); } .swatch.is-active { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); z-index: 1; } .swatch--custom { background: conic-gradient(#ff4d3d, #ffd23d, #38d6a0, #2f7bff, #8b5cff, #ff5d9e, #ff4d3d); overflow: hidden; } .swatch--custom input { position: absolute; inset: -6px; width: 34px; height: 34px; border: none; padding: 0; background: transparent; cursor: pointer; opacity: 0; } /* inline LFO toggle + fold-out depth slider (per parameter) */ .lfo-row { display: flex; margin-top: 9px; } .lfo-toggle { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: inherit; background: transparent; border: 1px solid currentColor; padding: 3px 10px; cursor: pointer; opacity: 0.5; transition: 0.12s; } .lfo-toggle:hover { opacity: 0.85; } .lfo-toggle.is-on { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; } .lfo-depth { margin-top: 10px; padding-left: 11px; border-left: 2px solid var(--accent); } .lfo-depth.is-folded { display: none; } .lfo-depth .ctrl__head { font-size: 10px; } .lfo-src { display: flex; gap: 6px; margin-bottom: 10px; } .lfo-srcbtn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: inherit; background: transparent; border: 1px solid currentColor; padding: 3px 9px; cursor: pointer; opacity: 0.5; transition: 0.12s; } .lfo-srcbtn:hover { opacity: 0.85; } .lfo-srcbtn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; } /* shared oscillator block */ .ctrl--lfo { border-top: 1px solid currentColor; } .route { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; } .route-row { display: flex; gap: 14px; } .route-row .route { flex: 1; min-width: 0; } .route__head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.05em; } .route__amt { margin-left: auto; opacity: 0.7; font-size: 10px; } /* select dropdown (global typeface picker) */ .select { position: relative; } .select::after { content: "▾"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 11px; opacity: 0.7; } .select select { width: 100%; appearance: none; -webkit-appearance: none; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: inherit; background: transparent; border: 1px solid currentColor; padding: 9px 28px 9px 10px; cursor: pointer; } .select select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .select option { background: #0b0b0d; color: #fff; } /* preset / action buttons */ .presets { display: flex; flex-wrap: wrap; gap: 6px; } .preset { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: inherit; background: transparent; border: 1px solid currentColor; padding: 6px 10px; cursor: pointer; transition: 0.12s; } .preset:hover, .preset.is-active { background: currentColor; } .preset:hover > span, .preset.is-active > span { color: #000; } body.theme-light .preset:hover > span, body.theme-light .preset.is-active > span { color: var(--paper); } .preset__x { font-style: normal; font-size: 9px; opacity: 0.55; transition: 0.12s; } .preset:hover .preset__x { color: #000; opacity: 0.9; } body.theme-light .preset:hover .preset__x { color: var(--paper); } .preset__x:hover { opacity: 1; transform: scale(1.3); } .preset__link { font-size: 10px; } .preset--add { border-style: dashed; opacity: 0.85; } .preset--empty { opacity: 0.4; border: none; padding: 6px 0; cursor: default; } /* io buttons */ .console__io { display: flex; gap: 8px; } .btn { flex: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: inherit; background: transparent; border: 1px solid currentColor; padding: 11px 8px; cursor: pointer; transition: 0.14s; } .btn:hover { background: currentColor; } .btn:hover { color: transparent; } .btn { position: relative; } .btn::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-content: center; color: #000; opacity: 0; transition: 0.14s; pointer-events: none; } body.theme-light .btn::after { color: var(--paper); } .btn:hover::after { opacity: 1; } .btn--save:hover { background: var(--accent); border-color: var(--accent); } /* ---------- play / pause ---------- */ .playpause { position: fixed; bottom: 20px; right: 20px; z-index: 20; width: 44px; height: 44px; font-size: 14px; font-family: var(--mono); color: #fff; background: rgba(0,0,0,0.6); border: 1px solid #fff; cursor: pointer; mix-blend-mode: difference; transition: 0.15s; } .playpause:hover { background: #fff; color: #000; mix-blend-mode: normal; } /* ---------- signal scope ---------- */ .scope { display: block; width: 100%; height: 70px; background: transparent; border-top: 1px solid currentColor; pointer-events: none; } .scope.is-hidden { display: none; } @media (max-width: 720px) { .scope { display: none !important; } } /* ---------- boot ---------- */ .boot { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; background: #000; color: #fff; transition: opacity 0.6s, visibility 0.6s; } .boot.is-gone { opacity: 0; visibility: hidden; } .boot span { font-size: 12px; letter-spacing: 0.4em; animation: blink 1.1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0.2; } } /* ---------- responsive ---------- */ @media (max-width: 720px) { .masthead__credit { display: none; } .console { top: auto; bottom: 0; left: 0; width: 100%; max-width: 100%; border-left: none; border-right: none; } .console.is-collapsed { transform: translateY(calc(100% - 38px)); } .console__scroll { max-height: 46vh; } .playpause { bottom: 50vh; } }