/*
Theme Name: The Filter Saturation
Theme URI: https://thefiltersaturation.com/
Author: The Filter Saturation
Description: A modular synthesizer-inspired portfolio theme for music and technology projects.
Version: 1.0.0
Text Domain: filter-saturation
*/

:root { --panel:#151817; --panel-2:#242927; --ink:#d9ded8; --muted:#949d96; --line:#69716b; --green:#8dff9a; --green-dim:#3a8f4c; --orange:#d27735; --black:#070908; }
* { box-sizing:border-box; }
html { background:var(--black); scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:radial-gradient(ellipse at 50% -12%,rgba(163,177,173,.20),transparent 37%),linear-gradient(90deg,rgba(0,0,0,.62),transparent 16%,transparent 84%,rgba(0,0,0,.68)),#090a0a url('assets/images/scratched-dark-steel-background.png') center/cover fixed; color:var(--ink); font-family:"Arial Narrow", "Roboto Condensed", Arial, sans-serif; letter-spacing:.055em; }
button, a { font:inherit; }
a { color:inherit; }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:100; background:var(--green); color:#001d07; padding:.6rem; }
.site-shell { max-width:1440px; margin:0 auto; padding:clamp(14px,2.5vw,40px); filter:drop-shadow(0 20px 26px rgba(0,0,0,.7)); }
.instrument { overflow:hidden; border:1px solid #79807b; border-radius:8px; background:#151715 url('assets/images/aged-black-metal-panel.png') center/cover fixed; box-shadow:0 18px 55px #000, inset 0 1px #68716b, inset 0 -1px #060706; }
.brand-strip { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:13px 20px; color:#f1f3ee; border-bottom:1px solid #727a73; background:linear-gradient(#3d4440,#1f2421); text-transform:uppercase; }
.wordmark { margin:0; font-size:clamp(1rem,2.4vw,1.7rem); font-weight:700; letter-spacing:.19em; }
.model { color:var(--muted); font-size:.7rem; white-space:nowrap; }
.modular-grid { display:grid; grid-template-columns:280px minmax(0,1fr) 220px; }
.module { min-width:0; padding:18px; border-right:1px solid #626962; border-bottom:1px solid #626962; background:linear-gradient(110deg,rgba(255,255,255,.05),rgba(8,10,9,.72) 25%),transparent; }
.module:last-child { border-right:0; }
.module-label { display:flex; justify-content:space-between; margin:0 0 14px; padding-bottom:7px; border-bottom:1px solid var(--line); color:#c9d0ca; font-family:monospace; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; }
.selector-list { display:grid; gap:13px; }
.selector { display:grid; grid-template-columns:18px 1fr 27px; align-items:center; gap:10px; width:100%; padding:0; color:#d4d9d3; text-align:left; text-decoration:none; background:none; border:0; cursor:pointer; }
.nav-branch { display:grid; gap:8px; }.nav-branch-head { display:block; }.submenu { display:grid; gap:8px; margin-left:27px; padding-left:10px; border-left:1px solid var(--green-dim); }.submenu-heading,.submenu-link { display:block; width:100%; padding:0; color:#d4d9d3; border:0; background:transparent; font:inherit; letter-spacing:inherit; line-height:1.35; text-align:left; text-decoration:none; text-transform:uppercase; }.submenu-heading { cursor:pointer; }.submenu-heading:hover,.submenu-heading:focus,.submenu-link:hover,.submenu-link:focus { color:var(--green); outline:0; text-shadow:0 0 7px rgba(141,255,154,.55); }.crt-app-wrap { height:clamp(300px,50vh,620px); margin:1rem 0; border:1px solid var(--green-dim); background:#020402; }.crt-app { width:100%; height:100%; border:0; background:#020402; }
.selector:focus-visible { outline:1px solid var(--green); outline-offset:4px; }
.lamp { width:11px; height:11px; border-radius:50%; border:1px solid #131613; background:#262a27; box-shadow:inset 0 1px 2px #000; }
.selector[aria-current="page"], .selector.active { color:#fff; }
.selector[aria-current="page"] .lamp, .selector.active .lamp { background:var(--orange); box-shadow:0 0 8px #ff7136, inset 0 1px #ffd29c; }
.switch { height:25px; border:1px solid #737b73; border-radius:3px; background:linear-gradient(90deg,#111,#555 45%,#161817 55%); box-shadow:inset 0 1px #969d96, 0 1px #050605; }
.selector[aria-current="page"] .switch, .selector.active .switch { background:linear-gradient(90deg,#131713,#adbfaf 45%,#252b26 55%); }
.screen-module { padding:18px; border-bottom:1px solid #626962; background:linear-gradient(135deg,rgba(190,204,195,.12),rgba(5,8,6,.34) 32%,rgba(0,0,0,.56)),url('assets/images/brushed-black-steel-panel.png') center/cover; box-shadow:inset 0 1px rgba(230,240,232,.16),inset 0 -10px 22px rgba(0,0,0,.42); }
.control-module { display:flex; flex-direction:column; align-items:stretch; }.control-switches { display:grid; gap:18px; padding:6px 0 2px; }.control-switches .rocker { justify-content:space-between; color:#d4d9d3; font:.64rem/1.3 monospace; letter-spacing:.08em; }.control-switches .rocker span { order:2; flex:0 0 auto; }
.crt { position:relative; min-height:clamp(540px,62vh,760px); padding:14px; border:14px solid transparent; border-radius:22px; color:var(--green); background:linear-gradient(135deg,rgba(209,220,211,.42),rgba(61,70,65,.42) 19%,rgba(10,13,11,.35) 48%,rgba(151,163,153,.24) 77%,rgba(5,7,6,.8)) border-box,url('assets/images/brushed-black-steel-panel.png') center/cover border-box; box-shadow:0 2px 0 #98a198,0 7px 0 #090b0a,0 14px 25px #000; font-family:"Courier New",monospace; text-shadow:0 0 5px rgba(132,255,148,.9); }
.crt-display { position:relative; min-height:calc(clamp(540px,62vh,760px) - 56px); overflow:auto; padding:clamp(22px,4vw,48px); border-radius:9px; background:radial-gradient(ellipse at center,#14341c 0%,#061008 71%,#030604 100%); box-shadow:inset 0 0 36px #000,inset 0 0 6px var(--green-dim); }
.crt-display:before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.3; background:repeating-linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.55) 1px,transparent 1px,transparent 4px); mix-blend-mode:multiply; }
.crt-display:after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background:radial-gradient(ellipse at center, transparent 35%,#000 100%); }
.crt.idle-flicker .crt-display { animation:crt-idle-flicker 3.6s steps(1,end) infinite; }
@keyframes crt-idle-flicker { 0%,83%,87%,100% { opacity:1; filter:brightness(1); } 84% { opacity:.78; filter:brightness(.72); } 85% { opacity:.96; filter:brightness(1.14); } 86% { opacity:.86; filter:brightness(.84); } 88% { opacity:.91; filter:brightness(1.08); } 89% { opacity:1; filter:brightness(1); } }
.screen-content { position:relative; z-index:1; max-width:760px; }
.screen-content.terminal-printing img:not(.terminal-image-visible) { visibility:hidden; }
.screen-content.terminal-printing li:not(.terminal-list-ready)::marker { color:transparent; }
.terminal-cursor { display:inline-block; margin-left:.08em; color:#c0ffc2; animation:terminal-cursor .48s steps(1,end) infinite; }
.terminal-cursor[hidden] { display:none; }
@keyframes terminal-cursor { 50% { opacity:0; } }
.spectrum { display:none; position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.crt.analyzing .spectrum { display:block; }
.crt.analyzing .screen-content { display:none; }
.screen-kicker { margin:0 0 .9rem; color:#c0ffc2; font-size:.7rem; }
.screen-title { margin:.2rem 0 1.1rem; font-size:clamp(1.55rem,5vw,3.8rem); line-height:1; letter-spacing:.04em; text-transform:uppercase; }
.screen-copy { max-width:59ch; line-height:1.6; }
.content-list { display:grid; gap:.7rem; margin:1.7rem 0 0; padding:0; list-style:none; }
.content-list a { display:block; padding:.6rem .75rem; border-left:2px solid var(--green-dim); text-decoration:none; }
.content-list a:hover, .content-list a:focus { background:rgba(133,255,146,.13); border-left-color:var(--green); }
.content-list span { color:#a4c6a7; font-size:.75rem; }
.control-bank { display:grid; grid-template-columns:repeat(2,1fr); gap:18px 10px; align-content:start; }
.knob-wrap { display:grid; place-items:center; gap:7px; color:var(--muted); font-family:monospace; font-size:.58rem; text-align:center; text-transform:uppercase; }
.knob { position:relative; width:72px; aspect-ratio:1; border:5px solid #0b0d0c; border-radius:50%; background:repeating-radial-gradient(circle,#313735 0 2px,#252b28 3px 5px); box-shadow:inset 5px 5px 7px #555d56,inset -5px -5px 7px #080a09,0 2px 2px #000; }
.knob:after { content:""; position:absolute; left:50%; top:10px; width:2px; height:26px; background:#e0e4dd; transform:translateX(-50%) rotate(var(--rotation,20deg)); transform-origin:50% 26px; box-shadow:0 0 2px white; }
.jacks { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding-top:18px; border-top:1px solid var(--line); }
.jack { width:21px; aspect-ratio:1; justify-self:center; border:4px solid #6e756f; border-radius:50%; background:#050606; box-shadow:inset 0 0 4px #000,0 1px #959b95; }
.footer-strip { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:10px 20px; color:var(--muted); font-family:monospace; font-size:.64rem; text-transform:uppercase; border-top:1px solid #737c75; background:linear-gradient(180deg,rgba(202,216,206,.22),rgba(22,27,24,.18) 34%,rgba(0,0,0,.48)),url('assets/images/brushed-black-steel-panel.png') center/cover; box-shadow:inset 0 1px rgba(237,246,239,.16),inset 0 -10px 18px rgba(0,0,0,.42); }.player-widget-area { min-width:0; flex:1; }.panel-player-widget { min-width:0; }.panel-player-widget :is(h1,h2,h3,h4,h5,h6) { display:none; }.player-widget-area .sonaar_audioplayer_block_cover { min-height:0; }.player-widget-area .iron_widget_radio { margin:0; }.player-widget-area .iron-audioplayer { min-height:0; padding:6px 9px; border:1px solid #59645c; background:linear-gradient(105deg,rgba(206,219,210,.15),rgba(16,21,18,.56) 28%,rgba(0,0,0,.6)),url('assets/images/brushed-black-steel-panel.png') center/cover; box-shadow:inset 0 1px rgba(238,247,240,.15),inset 0 -5px 10px rgba(0,0,0,.36); font:11px/1.25 "Courier New",monospace; text-shadow:none; }.player-widget-area .iron-audioplayer .sonaar-grid { display:flex; align-items:center; gap:8px; min-width:0; }.player-widget-area .iron-audioplayer .sonaar-Artwort-box,.player-widget-area .iron-audioplayer .album-store,.player-widget-area .iron-audioplayer .sr_it-playlist-title,.player-widget-area .iron-audioplayer .srp_subtitle { display:none !important; }.player-widget-area .iron-audioplayer .album-player { order:1; display:flex; align-items:center; gap:8px; min-width:0; flex:1; }.player-widget-area .iron-audioplayer .srp_miniplayer_metas { min-width:0; flex:1; }.player-widget-area .iron-audioplayer .track-title { overflow:hidden; color:var(--green) !important; font:11px/1.2 "Courier New",monospace !important; letter-spacing:.04em; text-overflow:ellipsis; text-shadow:0 0 5px rgba(141,255,154,.45); white-space:nowrap; }.player-widget-area .iron-audioplayer .player { display:flex; align-items:center; gap:6px; flex:0 1 300px; min-width:120px; }.player-widget-area .iron-audioplayer .sr_progressbar { display:flex; align-items:center; gap:4px; min-width:0; }.player-widget-area .iron-audioplayer .wave { min-width:45px; height:14px !important; }.player-widget-area .iron-audioplayer canvas { max-height:14px; }.player-widget-area .iron-audioplayer .currentTime,.player-widget-area .iron-audioplayer .totalTime { color:#6aa875 !important; font-size:9px !important; }.player-widget-area .iron-audioplayer .srp_main_control { width:auto; }.player-widget-area .iron-audioplayer .srp_main_control .control { display:flex; align-items:center; gap:3px; }.player-widget-area .iron-audioplayer [role="button"] { color:var(--green) !important; font-size:14px !important; }.player-playlist-toggle { order:2; flex:0 0 auto; padding:3px 7px; border:1px solid #5d8264; color:var(--green); background:rgba(1,8,3,.8); font:9px/1.1 "Courier New",monospace; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }.player-playlist-toggle:hover,.player-playlist-toggle:focus { border-color:var(--green); outline:0; box-shadow:0 0 7px rgba(141,255,154,.35); }.player-widget-area .iron-audioplayer .playlist { order:3; width:100%; max-height:180px; overflow:auto; margin-top:4px; padding:4px 0 0; border-top:1px solid #405447; }.player-widget-area .iron-audioplayer .playlist[hidden] { display:none !important; }.player-widget-area .iron-audioplayer .srp_list { margin:0; padding:0; list-style:none; }.player-widget-area .iron-audioplayer .sr-playlist-item { margin:0; padding:3px 5px; color:#397345 !important; font:10px/1.25 "Courier New",monospace; }.player-widget-area .iron-audioplayer .sr-playlist-item a,.player-widget-area .iron-audioplayer .sr-playlist-item :is(.tracklist-item-title,.tracklist-item-time,.track-number) { color:inherit !important; }.player-widget-area .iron-audioplayer .sr-playlist-item:hover { background:rgba(87,151,94,.14); }.player-widget-area .iron-audioplayer .sr-playlist-item.panel-current-track { color:var(--green) !important; background:rgba(87,151,94,.13); text-shadow:0 0 5px rgba(141,255,154,.38); }
.footer-strip a { color:var(--green); }
.routing-copy { color:var(--muted); font: .75rem/1.6 monospace; }
.synth-section { border-bottom:1px solid #626962; background:#242725 url('assets/images/brushed-black-steel-panel.png') center/cover; box-shadow:inset 0 1px rgba(235,245,238,.24),inset 0 16px 26px rgba(255,255,255,.035),inset 0 -22px 34px rgba(0,0,0,.58); }
.synth-heading { display:flex; justify-content:flex-end; align-items:center; gap:1rem; padding:13px 20px; border-bottom:1px solid #727a73; background:linear-gradient(180deg,rgba(206,218,211,.3),rgba(0,0,0,.12) 42%,rgba(0,0,0,.38)),url('assets/images/brushed-black-steel-panel.png') center/cover; }
.panel-clock { color:#f1f3ee; font:.72rem monospace; letter-spacing:.12em; }
.synth-title { color:var(--ink); font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }.rocker input:focus-visible+span { outline:1px solid var(--green); outline-offset:4px; }
.rocker { display:flex; align-items:center; gap:.6rem; font: .68rem monospace; text-transform:uppercase; color:var(--muted); cursor:pointer; }.rocker input { position:absolute; opacity:0; }.rocker span { width:43px; height:21px; padding:2px; border:1px solid #778078; border-radius:3px; background:#121512; box-shadow:inset 0 1px 3px #000; }.rocker span:after { content:""; display:block; width:17px; height:15px; background:#555d56; transition:transform .16s,background .16s; }.rocker input:checked+span:after { transform:translateX(20px); background:var(--orange); box-shadow:0 0 7px #ff7136; }
.synth-controls { padding:18px; border-top:1px solid #68706a; background:linear-gradient(90deg,rgba(6,8,7,.1),rgba(255,255,255,.06) 48%,rgba(0,0,0,.17)),url('assets/images/brushed-black-steel-panel.png') center/cover; }.synth-meta { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:18px; color:var(--muted); font: .68rem monospace; text-transform:uppercase; }.synth-meta select { display:block; margin-top:5px; max-width:240px; }.mute-button { padding:.45rem .7rem; border:1px solid #778078; color:var(--ink); background:#111; text-transform:uppercase; cursor:pointer; }.mute-button[aria-pressed="true"] { color:#171a17; background:var(--orange); }
.master-strip { display:grid; grid-template-columns:auto 160px auto; align-items:center; gap:7px; color:var(--muted); font:.62rem monospace; }.master-strip input { accent-color:#df623a; }.master-strip output { color:#f27b4d; }
.synth-modules { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:start; gap:0; border:1px solid #8d4b32; background:rgba(10,13,11,.2); box-shadow:inset 0 1px rgba(232,242,235,.18); }.synth-module { margin:0; min-width:0; min-height:310px; padding:10px 8px; border:0; border-right:1px solid #d45b35; background:linear-gradient(90deg,rgba(255,255,255,.11),transparent 20%),rgba(18,22,19,.38); }.synth-module:last-child { border-right:0; }.synth-module legend { padding:0 4px; color:#f27b4d; font:.62rem monospace; letter-spacing:.08em; text-transform:uppercase; }.synth-module label { display:inline-flex; flex-direction:column; justify-content:flex-end; vertical-align:bottom; width:31%; min-height:244px; gap:7px; margin:0; color:#c4c9c1; font:.54rem/1.15 monospace; text-align:center; text-transform:uppercase; }.synth-module label:has(select) { justify-content:flex-start; min-height:0; width:100%; margin-bottom:10px; text-align:left; }.synth-module output { min-height:22px; color:#f27b4d; font-size:.55rem; }.synth-module input[type=range] { appearance:slider-vertical; writing-mode:vertical-lr; direction:rtl; width:18px; height:150px; margin:auto; accent-color:#df623a; cursor:pointer; }.envelope label { width:24%; }.master label { width:100%; }.master { min-height:310px; }
.synth-module label:has(input[type=checkbox]) { justify-content:flex-start; min-height:0; width:100%; margin-bottom:10px; text-align:left; }.synth-module input[type=checkbox] { accent-color:#df623a; }
.wave-row { display:flex; align-items:end; gap:6px; }.wave-row .wave-select { flex:1; }.mini-rocker { display:grid !important; grid-template-columns:auto 31px; min-height:0 !important; width:62px !important; margin:0 !important; text-align:left !important; }.mini-rocker input { position:absolute; opacity:0; }.mini-rocker span { grid-column:2; width:31px; height:16px; padding:2px; border:1px solid #858c83; background:#080908; }.mini-rocker span:after { content:""; display:block; width:12px; height:10px; background:#535a53; transition:transform .15s,background .15s; }.mini-rocker input:checked+span:after { transform:translateX(13px); background:#df623a; }.mini-rocker output { grid-column:1/-1; min-height:0; }.wave-select select { max-width:94px; }.filter-select { justify-content:flex-start !important; min-height:0 !important; width:100% !important; margin-top:12px !important; text-align:left !important; }.mixer { grid-column:span 2; min-height:0; }.mixer label { display:grid; grid-template-columns:52px 1fr; align-items:center; min-height:0; width:100%; margin:8px 0; text-align:left; }.mixer label input[type=range] { appearance:auto; writing-mode:horizontal-tb; direction:ltr; width:100%; height:auto; }.mixer label output { grid-column:2; }.mod-routing { grid-column:span 2; }.keyboard-row { display:flex; gap:16px; align-items:stretch; }.keyboard-row .virtual-keyboard { flex:1; min-width:0; }.wheels { display:flex; gap:8px; width:66px; padding:8px; border:1px solid #d45b35; background:#181a18; }.wheels label { display:flex; flex-direction:column; justify-content:flex-end; gap:5px; width:50%; color:#c4c9c1; font:.5rem monospace; text-align:center; text-transform:uppercase; }.wheels input { appearance:slider-vertical; writing-mode:vertical-lr; direction:rtl; width:15px; height:94px; margin:auto; accent-color:#df623a; }.wheels output { color:#f27b4d; }
.oscillators { grid-column:span 2; }.osc-block { position:relative; min-height:170px; padding-top:18px; border-bottom:1px solid #d45b35; }.osc-block:last-child { border-bottom:0; }.osc-block>b,.routing-subsection>b,.subpanel>b { position:absolute; top:2px; left:0; color:#f27b4d; font:.56rem monospace; letter-spacing:.08em; }.osc-block label { min-height:128px; }.osc-block .wave-select { min-height:0; }.mixer hr { border:0; border-top:1px solid #d45b35; margin:12px 0; }.routing-subsection { position:relative; padding-top:16px; }.routing-subsection .mini-rocker,.routing-subsection .filter-select { margin-top:8px !important; }.stacked-envelope { min-height:0; padding-bottom:0; }.subpanel { position:relative; min-height:255px; padding-top:17px; border-bottom:1px solid #d45b35; }.subpanel:last-child { border-bottom:0; }.subpanel label { min-height:178px; }.subpanel .filter-select { min-height:0; }.subpanel.envelope label { min-height:178px; }
.synth-module select { width:100%; min-width:0; color:#df623a; background:#080908; border:1px solid #d45b35; padding:3px; font:inherit; }
.virtual-keyboard { display:flex; position:relative; height:142px; max-width:980px; margin:22px auto 0; padding:0 8px; background:#090b0a; border:7px solid #242722; border-radius:4px; box-shadow:inset 0 0 18px #000,0 5px 10px #000; }.key { position:relative; flex:1; min-width:18px; margin:0 1px; border:1px solid #938c70; border-radius:0 0 4px 4px; background:linear-gradient(90deg,#d8cf9c,#f3e9bb 48%,#c0b781); color:#292719; cursor:pointer; box-shadow:inset 3px 0 rgba(255,255,255,.34),inset -2px 0 rgba(75,60,26,.24); }.key.black { z-index:2; flex:0 0 5.7%; height:58%; margin:0 -2.85%; border-color:#060706; background:linear-gradient(90deg,#363833,#080908 60%,#22251f); color:#c5d3c6; }.key.active { background:linear-gradient(#ccf0a2,#82ca72); box-shadow:0 0 16px var(--green),inset 3px 0 rgba(255,255,255,.4); }.key.black.active { background:#477e4c; }
@media (max-width:1000px) { .synth-modules { grid-template-columns:repeat(4,minmax(110px,1fr)); } }
@media (max-width:620px) { .synth-heading,.synth-meta { align-items:flex-start; flex-direction:column; }.synth-modules { grid-template-columns:repeat(2,minmax(120px,1fr)); }.synth-module { min-height:270px; }.synth-module label { min-height:205px; }.synth-module input[type=range] { height:125px; }.virtual-keyboard { height:105px; padding:0 3px; border-width:4px; }.key { min-width:12px; }.key.black { flex-basis:7%; margin:0 -3.5%; } }
@media (max-width:900px) { .modular-grid { grid-template-columns:220px minmax(0,1fr); } .control-module { grid-column:1/-1; border-right:0; } .control-bank { grid-template-columns:repeat(6,1fr); } .jacks { grid-column:auto; } }
@media (max-width:620px) { .site-shell { padding:8px; } .modular-grid { grid-template-columns:1fr; } .module { border-right:0; } .screen-module { order:-1; } .crt { min-height:380px; border-width:10px; } .control-bank { grid-template-columns:repeat(3,1fr); } .footer-strip { display:block; line-height:1.8; } }
.portrait-landscape-note { display:none; }
.nipper-mobile-bar { display:none; }
@media (max-width:820px) and (orientation:portrait) {
  .site-shell { padding:0; }
  .instrument { border-radius:0; }
  .brand-strip { min-height:48px; padding:10px 12px; }
  .wordmark { font-size:.8rem; letter-spacing:.1em; }
  .brand-strip .model { display:none; }
  .portrait-landscape-note { display:block; margin:0; padding:7px 12px; border-bottom:1px solid #526057; color:#b6c3b8; background:#111613; font:.6rem/1.3 monospace; letter-spacing:.04em; text-align:center; text-transform:uppercase; }
  .modular-grid { grid-template-columns:1fr; }
  .navigation-module { padding:10px 12px; }
  .navigation-module .module-label { display:none; }
  .selector-list { grid-template-columns:1fr; gap:8px; }
  .selector { grid-template-columns:13px 1fr 22px; gap:6px; font-size:.78rem; }
  .nav-branch,.submenu { grid-column:1/-1; }
  .submenu { margin-left:16px; }
  .screen-module { order:0; padding:10px; }
  .crt { min-height:390px; padding:8px; border-width:8px; border-radius:15px; }
  .crt-display { min-height:calc(390px - 32px); padding:18px; }
  .screen-title { font-size:clamp(1.35rem,11vw,2.3rem); }
  .control-module { display:block; padding:8px 12px; }
  .control-module .module-label { display:none; }
  .control-switches { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0; }
  .control-switches .rocker { justify-content:space-between; font-size:.57rem; }
  .synth-heading { padding:9px 12px; }
  .synth-controls { padding:10px 7px; overflow:hidden; }
  .synth-meta { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:9px; margin-bottom:10px; }
  .synth-meta > :first-child { grid-column:1/-1; }
  .synth-meta select { max-width:100%; width:100%; }
  .master-strip { grid-template-columns:auto minmax(70px,1fr) auto; }
  .synth-modules { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .synth-module,.oscillators,.mixer { grid-column:span 1; min-height:0; padding:8px 5px; }
  .synth-module label { min-height:150px; font-size:.5rem; }
  .synth-module input[type=range] { height:105px; }
  .osc-block { min-height:145px; padding-top:16px; }
  .osc-block label { min-height:104px; }
  .subpanel { min-height:205px; }
  .subpanel label,.subpanel.envelope label { min-height:135px; }
  .mixer label { grid-template-columns:42px minmax(0,1fr); font-size:.5rem; }
  .keyboard-row { gap:6px; }
  .wheels { width:52px; padding:5px; }
  .wheels input { height:82px; }
  .virtual-keyboard { height:98px; margin-top:12px; padding:0 3px; border-width:4px; }
  .key { min-width:0; margin:0; }
  .key.black { flex-basis:7%; margin:0 -3.5%; }
  .footer-strip { display:block; padding:8px; }
  .footer-strip > a { display:block; margin-top:8px; text-align:center; }
  .player-widget-area .iron-audioplayer .sonaar-grid { flex-wrap:wrap; }
  .player-widget-area .iron-audioplayer .album-player { flex-basis:100%; }
  .player-widget-area .iron-audioplayer .player { flex-basis:100%; }
}
@media (pointer:coarse) {
  .nipper-mobile-shell { position:fixed; inset:0; z-index:9999; width:100%; height:100%; margin:0; border:0; background:#020402; }
  .nipper-mobile-shell:fullscreen { width:100vw; height:100vh; }
  .nipper-mobile-shell .crt-app { height:calc(100% - 44px); }
  .nipper-mobile-shell .nipper-mobile-bar { display:flex; height:44px; align-items:center; padding:0 10px; border-bottom:1px solid #607167; background:linear-gradient(180deg,#3c4741,#151a17); }
  .nipper-mobile-bar button { padding:6px 10px; border:1px solid #719078; color:var(--green); background:#081009; font:.68rem monospace; text-transform:uppercase; }
  .nipper-mobile-shell + .nipper-fallback { display:none; }
}