/* STEEP STUDIO 1.7 • Signature Interface
   A non-destructive design layer. Legacy IDs and all editing/renderer modules remain intact.
   All visualizer data is real; no synthetic audio-meter animations are introduced. */
:root{color-scheme:dark;--bg:#090c13;--sidebar:#090e18;--panel:#131d2b;--panel2:#192435;--border:#344559;--border2:#4d6579;--text:#edf4f8;--muted:#a1b0c1;--dim:#8193a7;--accent:#8be7d7;--accent2:#57aead;--green:#75e3bf;--purple:#b9a0ee;--red:#ff8d87;--radius:10px;--sani-orange:#f3b47d;--sani-cyan:#8be7d7;--sani-purple:#c2acff}
html{scroll-behavior:smooth;scroll-padding-top:73px}
body{font-family:Inter,'Segoe UI Variable',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;letter-spacing:0;background:radial-gradient(ellipse 60% 34% at 69% -24%,#19354c70,transparent),#080c12;color:var(--text)}
button,input,select,textarea{font-family:inherit}button{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #93fff0!important;outline-offset:2px!important}
button:hover{filter:none}::selection{background:#327a81;color:white}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0e1521}::-webkit-scrollbar-thumb{background:#344658;border:2px solid #0e1521;border-radius:10px}
.shell{grid-template-columns:216px minmax(0,1fr)!important}
.sidebar{background:linear-gradient(145deg,#101725 0%,#0a101a 45%,#080e18 100%)!important;border-right:1px solid #2b3e52!important;padding:17px 12px!important;box-shadow:8px 0 40px #0002!important}
.sidebar::after{content:'';position:absolute;right:-1px;top:0;height:100%;width:1px;background:linear-gradient(180deg,#7bdecb4a,transparent 43%,#b3a5fd40)}
.brand,.sidebar .brand{border-bottom:1px solid #304253!important;margin:0 0 8px!important;padding:5px 4px 22px!important;min-height:73px}
.brand-glyph{color:#9be5dd!important;font-style:normal!important;font-family:'Arial Black',system-ui,sans-serif!important;letter-spacing:-5px!important;filter:none!important;font-size:36px!important;text-shadow:0 0 22px #67c3ca2b}
.brand-glyph span{color:#f9ba80!important}
.brand-text strong{color:#fff!important;font-size:15px!important;font-weight:900!important;letter-spacing:.7px!important}.brand-text em{color:var(--sani-cyan)!important;font-weight:700!important}
.brand-text small{font-size:8.5px!important;color:#8da2b5!important;letter-spacing:1.65px!important}
.sidebar .sidehead{color:#6e879e!important;font-size:9px!important;letter-spacing:2.2px!important;margin:9px 0 2px!important}
.side-nav a{border-radius:7px!important;color:#b7c7d4!important;padding:12px 10px!important;font-size:11px!important;font-weight:700!important;position:relative;gap:10px!important}
.side-nav a span{color:#819db2!important}.side-nav a:hover{background:#1a2b3a!important;color:#fff!important;border-color:#43627a!important}
.side-nav a.active{background:linear-gradient(100deg,#234553,#192a3c)!important;border:1px solid #53878c!important;box-shadow:inset 3px 0 #a4fff0,0 5px 14px #0003!important;color:#f6feff!important}.side-nav a.active span{color:#8cf5e3!important}
.side-nav a b{background:#30575c!important;color:#b8fff3!important;border:1px solid #447777;font-size:8px!important}
.side-actions button{background:linear-gradient(140deg,#162536,#111d2c)!important;border:1px solid #2d4559!important;border-radius:6px!important;color:#b8cede!important;min-height:32px!important;font-weight:620}.side-actions button:hover{color:#fff!important;background:#243e51!important;border-color:#6cafb7!important}
.sidebar-foot{background:#0d1927!important;border:1px solid #305166!important;border-radius:9px!important;padding:12px!important}.sidebar-foot strong{color:#9be9da!important}.sidebar-foot p{color:#8ca2b6!important}
.topbar{background:linear-gradient(90deg,#0e1824,#111c2a 75%,#101a27)!important;border-bottom:1px solid #324757!important;height:58px!important;min-height:58px!important;backdrop-filter:blur(15px);box-shadow:0 7px 19px #0002}.breadcrumbs{font-size:9.5px!important;letter-spacing:1.7px!important;color:#91abbf!important}
.topright button{border-radius:6px!important;border:1px solid #344b60!important;background:#1a2938!important;color:#d7ebef!important}
.topright button:hover{background:#244052!important;border-color:#77c4c5!important}
.topright .export-btn{background:linear-gradient(110deg,#ffca8d,#edab74)!important;color:#161e27!important;border-color:#e9af7c!important;font-weight:900!important;letter-spacing:.4px;box-shadow:0 4px 17px #e8ad6b26!important}
.status-pill{color:#9ce6d3!important;font-weight:800}.status-pill i,.online-dot,.pro-live-dot{background:#80e7c8!important;box-shadow:0 0 0 3px #63cbac13!important}
.workspace{padding:17px 22px 38px!important;max-width:none!important;background:repeating-linear-gradient(0deg,transparent 0 95px,#ffffff02 96px),transparent}
.pro-head{margin-bottom:12px!important;align-items:center!important}.pro-head h1{font-size:27px!important;font-weight:820!important;letter-spacing:-1.25px!important;color:#f1f7fb!important}.pro-head h1 span{color:#8daabc!important}
.pro-kicker{font-size:9px!important;color:#9de7da!important;letter-spacing:2.1px!important}.pro-head p{font-size:11px!important;color:#91a8bc!important}
.pro-release{color:#a5f9e8!important;background:#1d3d44!important;border-color:#3c7178!important}
.pro-metrics .hero-stats>div{background:linear-gradient(130deg,#172635,#1b3040)!important;border:1px solid #3b586d!important;border-radius:7px!important;padding:8px 13px!important}.pro-metrics strong{color:#dbf8fa!important;font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;font-size:18px!important}.pro-metrics small{color:#82a5ba!important}
.pro-head-actions button{background:#152638!important;border-color:#355267!important;color:#c5e1e9!important}.pro-head-actions button:hover{background:#224357!important;border-color:#7bcfc9!important}
.pro-toolbar{border-radius:9px!important;background:linear-gradient(100deg,#172334,#16283b)!important;border:1px solid #395368!important;padding:7px 10px!important;margin-bottom:9px!important;box-shadow:inset 0 1px #ffffff0b,0 4px 12px #0002!important}
.pro-toolbar-label{color:#7fa6bb!important;font-size:9px!important;letter-spacing:1.75px!important}
.pro-modes button{border-radius:5px!important;background:#17283a!important;color:#b1c8d7!important;border:1px solid transparent!important;font-weight:750!important}
.pro-modes button:hover{background:#244359!important;color:#eafffa!important}
.pro-modes button.active{background:#23515a!important;border-color:#5baeb1!important;color:#c8fff6!important;box-shadow:inset 0 -2px #8be7d7!important}
.pro-toolbar .pro-action-import{background:#244659!important;color:#c4f4f2!important;border-color:#477e8a!important}
.pro-toolbar .pro-action-render{background:#f4bc82!important;color:#13232e!important;border-color:#e6b17d!important;font-weight:900!important}
.signature-tools{display:flex;align-items:center;gap:6px;padding:0 0 0 4px}.signature-tools button{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:10px;padding:8px 10px;border-radius:5px;background:#172638;color:#b1cddd;border:1px solid #35536b;font-weight:800}
.signature-tools button[aria-pressed="true"]{background:#27505a;color:#d7fffa;border-color:#70cdc7}.signature-tools kbd{border:1px solid #4c687c;border-radius:3px;padding:1px 3px;font-size:8px;color:#88afc1}
/* Transport: a real tool, not a decorative marketing section */
.transport-card{background:linear-gradient(110deg,#1a2b3e,#182635)!important;border:1px solid #4b6679!important;border-radius:9px!important;margin:0 0 9px!important;min-height:65px!important;box-shadow:inset 0 1px #ffffff12,0 7px 22px #0002!important}
.transport-play{background:#86e7cc!important;border:1px solid #adefdf!important;color:#122c32!important;box-shadow:0 0 0 4px #60dcba0b!important}.transport-play:hover{background:#adffec!important}.transport-stop{background:#263949!important;color:#e7f3f5!important;border:1px solid #4a6574!important}
.digital-time{font-size:25px!important;color:#e8fcfc;font-family:'Cascadia Mono',Consolas,ui-monospace,monospace!important;font-variant-numeric:tabular-nums;letter-spacing:-1.2px!important}.digital-total{color:#93b0c3!important}
.transport-settings .compact{color:#a4bcca!important}.transport-card input[type=number]{background:#0a1522;border-color:#496377;color:#f5fbfc}
#tapBpm{background:#163846!important;color:#aff1e8!important;border-color:#517e83!important}
#tapBpm:hover{background:#245466!important}
input[type=range]{accent-color:#83e8d6!important}input[type=checkbox]{accent-color:#7debd5!important}
input[type=number],select,textarea{background:#0f1a27!important;border:1px solid #355069!important;color:#e4f0f5!important;border-radius:6px!important}
/* Arrangement is dominant at all practical desktop sizes */
.studio-grid{grid-template-columns:minmax(0,1fr) var(--rack-width,352px)!important;gap:10px!important;align-items:start!important}
.studio-grid .primary{gap:9px!important}
.timeline-panel{background:#142131!important;border:1px solid #3a546b!important;border-radius:9px!important;padding:12px!important;box-shadow:inset 0 1px #ffffff0b,0 12px 32px #0002!important}
.timeline-panel .panel-top h2{color:#f0f8f9!important;font-size:19px!important;font-weight:820!important;letter-spacing:-.45px}
.overline{color:#84d8d0!important;font-size:8.5px!important;font-weight:850!important;letter-spacing:1.8px!important}
.timeline-panel .head-actions button{background:#172a3a!important;color:#afcbd9!important;border:1px solid #34556c!important;border-radius:5px!important;font-size:9.5px!important;font-weight:750!important;padding:6px 9px!important}
.timeline-panel .head-actions button:hover{background:#295066!important;border-color:#80c8c7!important;color:white!important}
.timeline-help{background:#193041!important;border-left:2px solid #5dc7d1!important;color:#9fc0d4!important;border-radius:4px!important}
.timeline-frame{min-height:390px!important;max-height:min(65vh,680px)!important;background:#0e1723!important;border:1px solid #3a536b!important;border-radius:6px!important;box-shadow:inset 0 0 40px #0003!important}
.timeline-labels{background:#122030!important}.ruler{background:#1b3043!important;border-bottom-color:#507085!important}.ruler-label{color:#a8c3d2!important}
.lane{background-color:#0e1b28!important;background-image:repeating-linear-gradient(90deg,transparent 0 49px,#b3d7e306 50px,#b3d7e306 51px,transparent 52px)!important;border-color:#263e51!important}
.lane:nth-child(even){background-color:#122335!important}.track-label{border-bottom:1px solid #294052!important}.track-name{font-size:11px}.track-buttons button{background:#1c3143!important;border:1px solid #3a5366!important;color:#aabfce!important}
.clip{box-shadow:inset 0 1px #ffffff20,0 5px 12px #0005!important;border-radius:4px!important;backdrop-filter:none}.clip:hover{filter:brightness(1.15)}.clip.selected{outline:2px solid #b9fff0!important;outline-offset:1px;box-shadow:0 0 0 3px #75f1d121,0 8px 18px #0009!important}
.clip .waveform{opacity:.92!important}.timeline-foot{color:#94afc2!important;font-size:10px!important}
.timeline-foot button{background:#213749!important;color:#cfebf0!important;border:1px solid #456077!important;border-radius:4px!important}
.arranger-toolbar{background:#152435!important;border:1px solid #344e66!important;border-radius:8px!important;box-shadow:inset 0 1px #ffffff0b!important}.arranger-title{color:#8de5dc!important}.arranger-group button{background:#203143!important;color:#c6dde8!important;border-color:#3a556b!important;border-radius:5px!important}.arranger-group button:hover{background:#2a5364!important;border-color:#72bcb7!important}
/* Editor rail: professional inspector tabs in a dock */
.studio-grid .tools{background:linear-gradient(145deg,#111f30,#0e1927)!important;border:1px solid #3b576a!important;padding:9px!important;border-radius:9px!important;box-shadow:inset 0 1px #ffffff09,-7px 0 28px #0002!important;top:67px!important}
.pro-rack-head{background:linear-gradient(110deg,#1d3446,#162637)!important;border:1px solid #3c6274!important;padding:12px!important;min-height:63px}.pro-rack-kicker{color:#83b4c2!important}.pro-rack-head strong{font-size:17px!important;letter-spacing:-.45px}
.pro-rack-local{color:#95f0d7!important;border-color:#447f74!important;background:#183a3b!important}
.pro-rack-tabs{gap:4px!important}.pro-rack-tabs button{padding:10px 3px!important;font-weight:750!important;color:#92adbf!important;background:#192b3d!important;border:1px solid #385269!important;border-radius:5px!important}.pro-rack-tabs button:hover{color:#d5fff9!important;border-color:#80c8c4!important}.pro-rack-tabs button.active{color:#d8fff9!important;background:#255460!important;border-color:#6ad1c8!important;box-shadow:inset 0 -2px #8aeee3!important}
.panel,.tools .panel{background:linear-gradient(150deg,#152638,#142130)!important;border-color:#355168!important;border-radius:8px!important;box-shadow:inset 0 1px #ffffff08!important}
.panel-top h2{color:#eff8fb!important;letter-spacing:-.4px!important;font-weight:780!important}
.panel .side-description,.panel p.text-note{color:#9ab2c4!important;line-height:1.62!important}
.files-panel{border-top:2px solid #70d3ce!important}.inspector-panel{border-top:2px solid #d5b18c!important}.producer-panel{border-top:2px solid #bbafff!important}.mixer-panel{border-top:2px solid #7de4d6!important}.export-panel{border-top:2px solid #f3b17b!important}.beat-panel{border-top:2px solid #c3aeff!important}
.asset-card,.asset-item{background:#1d2e40!important;border:1px solid #38546a!important;border-radius:6px!important}.asset-card:hover,.asset-item:hover{border-color:#8cded7!important;background:#253e51!important}
.file-drop{border:1px dashed #678a94!important;background:#193241!important;padding:14px!important}.file-drop strong{color:#aaffed!important}
.primary-action{background:linear-gradient(110deg,#9af9e6,#66cbbf)!important;color:#102932!important;border:1px solid #87e6d4!important;box-shadow:0 5px 16px #7ce9d51a!important;border-radius:6px!important}.primary-action:hover{background:#affff0!important}
.producer-accent{background:linear-gradient(100deg,#cab3ff,#9b89e9)!important;color:#160e33!important;border-radius:6px!important;font-weight:850!important}.producer-panel .producer-chip{background:#333159!important;color:#ded1ff!important;border-color:#716bb4!important}
.mixer-fields label{color:#99b6c8!important}.mixer-fields output{color:#e2fdfe!important}.mixer-fields input[type=range]{accent-color:#85e7d5!important}.meter{background:#0d1b27!important;height:9px!important}.meter>div{background:linear-gradient(90deg,#67cbe4,#7ae5c8,#eec07f)!important}
.creative-console{margin-top:11px!important}.spectral-module,.creative-console .spectral-module{background:#101e2d!important;border:1px solid #3b5a71!important;box-shadow:inset 0 1px #ffffff0b!important;border-radius:8px!important}.spectrum-top{color:#bdd8e6!important}.spectrum-top b{color:#8af1df!important}
.overview-panel{background:#142334!important;border:1px solid #3b566c!important;border-radius:8px!important}
footer{color:#7891a6!important;font-size:9px!important}
/* LIVE utility bar gives verifiable session data, never arbitrary status */
.signature-status{order:7;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 14px;margin-top:14px;color:#9fb9c9;background:#0d1a28;border:1px solid #304b5d;border-radius:7px;font-size:10px;letter-spacing:.2px}
.signature-status strong{font-size:10px;color:#e0f7fa;font-weight:800}.signature-status .signature-dot{width:7px;height:7px;border-radius:50%;background:#79dfbe;box-shadow:0 0 8px #79d3bc66}.signature-status .signature-spacer{flex:1}
/* Functional focus mode: deliberate layout, not a screen overlay */
body.signature-focus .studio-grid{grid-template-columns:minmax(0,1fr)!important}body.signature-focus #proRack{display:none!important}body.signature-focus .timeline-frame{min-height:460px!important;max-height:75vh!important}
body.signature-focus .creative-console,body.signature-focus .overview-panel{display:none!important}
/* Secondary pages have a consistent mature design language, preserving their own DOM and CSS logic */
body.signature-secondary{background:#090e17!important}
.signature-secondary .sidebar{background:linear-gradient(145deg,#101725,#090e18)!important;border-right:1px solid #314559!important}
.signature-secondary .topbar{background:#121e2d!important;border-bottom:1px solid #385367!important;box-shadow:0 6px 15px #0003!important}
.signature-secondary .brand-mark,.signature-secondary .logo-mark{color:#83e7d5!important;filter:none!important}
.signature-secondary .nav-item.active,.signature-secondary .side-item.active{background:#214656!important;border-color:#5d9b9c!important;color:#eafffb!important}
.signature-secondary .panel{background:linear-gradient(143deg,#18283a,#121f2e)!important;border:1px solid #3b576b!important;box-shadow:inset 0 1px #ffffff0b,0 8px 22px #0002!important}
.signature-secondary .hero{background:radial-gradient(ellipse 48% 88% at 90% 20%,#32647266,transparent),linear-gradient(125deg,#17283b,#101d2b)!important;border:1px solid #497385!important;box-shadow:inset 0 1px #ffffff13,0 18px 40px #0003!important}
.signature-secondary .hero:before{opacity:.35!important}.signature-secondary .hero h1{color:#f0fbfc!important}.signature-secondary .hero em,.signature-secondary .hero h1 span{color:#9ceadc!important}
.signature-secondary .section,.signature-secondary .song-card,.signature-secondary .session-strip,.signature-secondary .controls-panel,.signature-secondary .editor-grid>.panel{border-color:#3a566c!important}
.signature-secondary .primary,.signature-secondary .primary-button,.signature-secondary .export-btn{background:#91e7d5!important;color:#0d2833!important;border-color:#91e7d5!important}
.signature-secondary .logo-word,.signature-secondary .brand-title{color:#f0f8fc!important}
.signature-secondary .side-item:hover,.signature-secondary .nav-item:hover{background:#1b3547!important}
.signature-secondary .overline,.signature-secondary .eyebrow{color:#8fe2d5!important}.signature-secondary .status-heading{color:#9ce4d6!important}
.signature-secondary .song-card{background:linear-gradient(150deg,#1a2e40,#152333)!important}.signature-secondary .session-stat{background:#142638!important}
.signature-secondary .deck-art{filter:hue-rotate(116deg) saturate(.75)}
.signature-secondary input[type=range]{accent-color:#8be7d7!important}
/* Responsive: mobile preserves the controls; the user can still scroll the timeline itself. */
@media(min-width:1600px){.shell{grid-template-columns:232px minmax(0,1fr)!important}.studio-grid{grid-template-columns:minmax(0,1fr) var(--rack-width,390px)!important}.timeline-frame{min-height:450px!important}}
@media(max-width:1280px){.studio-grid{grid-template-columns:minmax(0,1fr) var(--rack-width,316px)!important}.workspace{padding:13px!important}.signature-tools kbd{display:none}}
@media(max-width:1050px){.studio-grid{grid-template-columns:minmax(0,1fr)!important}.studio-grid .tools{position:relative!important;top:auto!important}.signature-tools{width:100%;justify-content:flex-end}}
@media(max-width:860px){.shell{display:block!important}.sidebar{position:relative!important;width:100%!important;height:auto!important;padding:10px!important}.sidebar:after{display:none}.topbar{position:relative!important}.workspace{padding:10px!important}.pro-head h1{font-size:24px!important}.signature-tools{width:auto}.timeline-frame{min-height:315px!important;max-height:490px!important}.pro-toolbar{gap:5px!important}.signature-status{gap:9px}.signature-status .signature-spacer{display:none}}
@media(max-width:560px){.pro-toolbar .signature-tools{width:100%;justify-content:stretch}.signature-tools button{flex:1;justify-content:center}.pro-head h1{font-size:22px!important}.timeline-panel{padding:8px!important}.timeline-frame{min-height:280px!important}.transport-card{gap:8px!important}.signature-status{padding:10px;line-height:1.6;font-size:9px}.signature-secondary .hero{padding:16px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}button{transition:none!important}}
/* Remix Designer: content-first on desktop, source cards visible earlier. */
@media(min-width:950px){body[data-sani-page="remix"] .hero{min-height:246px!important;padding:19px 26px!important;align-items:center}body[data-sani-page="remix"] .hero h1{font-size:clamp(28px,3vw,39px)!important;line-height:1.10;margin:12px 0!important}body[data-sani-page="remix"] .hero p{max-width:690px;font-size:11px!important;line-height:1.55!important}body[data-sani-page="remix"] .hero-badges{margin-top:11px!important}body[data-sani-page="remix"] .deck-art{max-height:247px!important;min-height:235px!important;overflow:hidden!important}body[data-sani-page="remix"] .deck-disc{transform:scale(.73);transform-origin:center}}