/* STEEP STUDIO / CREATIVE CONSOLE 1.5 -- no external images or fonts */
:root{--bg:#080a10;--sidebar:#0a0d15;--panel:#101621;--panel2:#161f2b;--border:#2b3546;--border2:#3d4b5e;--text:#f5f6fa;--muted:#a9b7c8;--dim:#718297;--accent:#efbb76;--accent2:#c58d50;--green:#79dbc2;--purple:#b7a0f3;--cyan:#7fd8f6;--radius:13px}
html{scroll-behavior:smooth;scroll-padding-top:80px}body{background:radial-gradient(ellipse 48% 26% at 74% -6%,#34314745,transparent),radial-gradient(ellipse 40% 30% at 4% 58%,#0c21314a,transparent),#080b11;color:#eef1f7}
.shell{grid-template-columns:250px minmax(0,1fr)}.sidebar{z-index:25;background:linear-gradient(180deg,#0f1521,#090d14 70%);border-right:1px solid #344055;padding:24px 15px 20px;gap:20px}.brand{padding:2px 10px 22px;border-bottom:1px solid #394355}.brand-glyph{font-size:43px;letter-spacing:-7px;width:50px;text-shadow:0 4px 35px #bd88534d}.brand-text strong{font-size:17px;letter-spacing:1px}.brand-text em{font-style:normal;color:#f1c68b}.brand-text small{font-size:8px;letter-spacing:1.1px;display:block;margin-top:5px}.sidehead{color:#94a2b5;font-size:10px;letter-spacing:1.8px}.side-nav a{min-height:44px;font-size:12px;border-radius:9px;transition:transform .15s,background .15s}.side-nav a:hover{transform:translateX(3px);background:#293242}.side-nav a.active{background:linear-gradient(110deg,#5a3e28,#27252b 80%);box-shadow:inset 3px 0 #f0bb75,0 7px 25px #0002}.side-actions{gap:8px}.side-actions button{padding:10px 11px;border:1px solid #364153;border-radius:8px;background:#141c29;color:#dce5ef}.side-actions button:hover{border-color:#d6ab77;background:#202b39}.sidebar-foot{background:#101a26;border:1px solid #354253;border-radius:10px;padding:15px}.sidebar-foot strong{letter-spacing:1.1px}
.topbar{height:66px;background:linear-gradient(100deg,#111722f5,#0d131cf9);padding:0 28px;border-bottom:1px solid #303b4d}.breadcrumbs{color:#9aaabc}.topright .export-btn{background:linear-gradient(135deg,#ffd298,#cf9b5e);border:0;color:#151517;font-weight:900;padding:11px 17px;box-shadow:0 6px 22px #b980372e}.workspace{max-width:2000px;padding:24px 28px 35px}.hero{isolation:isolate;position:relative;overflow:hidden;min-height:235px;padding:27px 32px;margin-bottom:15px;background:linear-gradient(100deg,#1b2331 0%,#151b29 54%,#302a29 100%);border:1px solid #69523b;box-shadow:inset 0 1px #ffffff13,0 16px 44px #0004}.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(130deg,transparent 40%,#da995b0b 50%,transparent 58%),repeating-linear-gradient(90deg,transparent 0 48px,#ffffff04 49px,transparent 50px);z-index:-1}.hero::after{content:'';position:absolute;right:11%;top:-140px;width:460px;height:460px;border:1px solid #e6a66e1d;border-radius:50%;box-shadow:0 0 0 40px #e7a15e07,0 0 0 80px #daa46b06,0 0 0 120px #8da6d706;z-index:-1}.hero-text{max-width:min(740px,67%);position:relative;z-index:1}.hero .eyebrow{font-size:10px;letter-spacing:2.4px}.hero h1{font-size:clamp(29px,3.2vw,51px);line-height:1.08;margin:17px 0 11px;letter-spacing:-2px}.hero h1 span:not(.hero-hl){color:#f7c98b}.hero .hero-hl{display:block!important;font-size:12px;letter-spacing:3px;font-weight:800;margin:10px 0 0;color:#c4d0df}.hero p{font-size:12px;line-height:1.8;color:#b5c0ce;max-width:675px}.hero-stats{position:absolute;right:22px;bottom:18px;z-index:3;gap:5px}.hero-stats>div{min-width:91px;background:#0c111aca;border:1px solid #5660716c;backdrop-filter:blur(8px);padding:10px 13px}.hero-stats strong{font-size:21px;font-variant-numeric:tabular-nums}.hero-stats small{letter-spacing:1.3px;font-size:8px}.hero-deck{position:absolute;right:10%;top:17px;width:195px;height:195px;border:1px solid #e9ac6452;background:radial-gradient(circle,#302823 0 8%,#161d2a 9% 13%,#37312e 14% 15%,#101823 16% 36%,#826448 37% 38%,#151925 39% 49%,#ac80553d 50% 51%,#202332 52% 100%);border-radius:50%;box-shadow:0 0 60px #e1a36119,inset 0 0 40px #070b13;opacity:.85;transform:rotate(-17deg)}.orbit{position:absolute;inset:13px;border:1px solid #c99f6c80;border-radius:50%}.orbit-b{inset:28px;border-color:#b9d5e34d}.orbit-c{inset:46px;border-color:#a9805066}.deck-badge{position:absolute;top:65px;left:66px;font-size:54px;font-weight:950;color:#f2c892;letter-spacing:-6px}.deck-freq{position:absolute;bottom:-13px;left:28px;font-size:8px;letter-spacing:2px;color:#d1b893;white-space:nowrap}
.creative-console{display:grid;grid-template-columns:minmax(185px,.77fr) minmax(260px,1.65fr) minmax(190px,.75fr);gap:12px;margin-bottom:13px}.creative-console>div{min-width:0;min-height:202px;border:1px solid #3e4b5d;background:linear-gradient(150deg,#151d2a,#101620);border-radius:12px;box-shadow:inset 0 1px #ffffff0c,0 9px 25px #0002;padding:15px}.console-title-row{display:flex;gap:8px;align-items:center;color:#d8be94;font-size:9px;letter-spacing:1.6px;font-weight:850}.console-led{width:8px;height:8px;border-radius:50%;background:#78dabb;box-shadow:0 0 12px #78dabb77}.console-summary strong{display:block;margin:12px 0 9px;font-size:24px;letter-spacing:-.9px;line-height:1.03}.console-summary strong em{font-style:normal;color:#edba76}.console-summary p{font-size:10px;color:#9cacbf;line-height:1.7;margin:0 0 10px}.console-tags{display:flex;gap:4px;flex-wrap:wrap}.console-tags span{font-size:8px;padding:5px 6px;border-radius:4px;border:1px solid #43536a;background:#172332;color:#b2c9d8;letter-spacing:.65px}.spectral-module{background:linear-gradient(180deg,#151f2d,#0a121c)!important;border-color:#445568!important;padding:13px!important}.spectrum-top,.spectrum-foot{display:flex;justify-content:space-between;align-items:center;color:#9caec2;font-size:9px;letter-spacing:1.4px;font-weight:750;gap:8px}.spectrum-top b{color:#84dfc5}.spectrum-top #consoleSignal{color:#dfbf87;font-size:9px;font-variant-numeric:tabular-nums}#masterSpectrum{display:block;width:100%;height:130px;margin-top:6px;border-radius:6px;background:radial-gradient(ellipse at 55% 140%,#19405252,transparent),#0c1420;image-rendering:auto}.spectrum-foot{font-size:8px;padding:7px 2px 0}.console-actions{display:grid;align-content:start;gap:6px}.console-actions .overline{margin-bottom:4px}.console-actions button{border:1px solid #394a5c;background:linear-gradient(90deg,#1b2838,#16202c);border-radius:7px;color:#e4edf5;text-align:left;font-size:11px;font-weight:760;padding:10px 10px;display:flex;align-items:center;gap:10px;min-height:33px}.console-actions button b{font-family:ui-monospace,monospace;font-size:9px;color:#e9b981}.console-actions button span{margin-left:auto;color:#9baab9}.console-actions button:hover{border-color:#e6b36f;background:#30303a;transform:translateX(2px)}
.workspace-tabs{display:flex;overflow-x:auto;gap:7px;margin:2px 0 14px;scrollbar-width:thin;padding-bottom:2px}.workspace-tabs a{white-space:nowrap;font-size:10px;letter-spacing:1px;font-weight:760;color:#a5b8cb;background:#121a26;border:1px solid #354255;border-radius:7px;padding:11px 13px}.workspace-tabs a:hover,.workspace-tabs a:focus-visible{background:#2b3340;border-color:#d6a977;color:#f6d6a5}.workspace-tabs a:first-child{color:#e8c18e;border-color:#765b3c;background:#2f261f}
.production-bar>div{background:linear-gradient(125deg,#131d2b,#111a25);border:1px solid #3b495c;min-height:52px}.transport-card{background:linear-gradient(125deg,#1c2634,#111925);border:1px solid #4c5869;min-height:83px;box-shadow:inset 0 1px #ffffff13}.transport-play{background:#f1bf7a;color:#151518;box-shadow:0 3px 18px #f8b36538}.digital-time{font-variant-numeric:tabular-nums}.overview-panel{background:linear-gradient(160deg,#151d29,#0f1823);border:1px solid #3b4e61;border-radius:11px;margin-bottom:13px;padding:13px 17px}.overview-head,.overview-head>div,.overview-axis{display:flex;align-items:center;justify-content:space-between;gap:12px}.overview-head{margin-bottom:8px}.overview-head .overline{letter-spacing:1.7px}.overview-head small{color:#8598a8;font-weight:500;letter-spacing:1px}.overview-head>div{color:#94a9bb;font-size:10px}.overview-head button{color:#f4d4a4;border:1px solid #765a39;background:#32271f;border-radius:5px;padding:6px 10px;font-size:10px;font-weight:750}.overview-head button:hover{background:#55402d}#arrangementOverview{display:block;width:100%;height:105px;border-radius:6px;border:1px solid #35465a;background:#090f19;cursor:crosshair;touch-action:manipulation}.overview-axis{font-size:9px;color:#8194a9;letter-spacing:1.2px;padding-top:5px;font-variant-numeric:tabular-nums}
.arranger-toolbar{border-color:#38495c;background:linear-gradient(100deg,#152132,#17202e)}.panel{background:linear-gradient(155deg,#151e2a 0,#111822 90%);border-color:#354254;box-shadow:inset 0 1px #ffffff08,0 11px 29px #0003;border-radius:12px}.panel-top .overline{letter-spacing:1.8px}.panel-top h2{font-size:17px;font-weight:800}.timeline-panel{border:1px solid #46556b}.timeline-frame{border-color:#48586b;box-shadow:0 2px 12px #0005 inset}.timeline-help{background:#192535;border-left:3px solid #dca967;border-radius:3px;font-size:10px;padding:9px 11px;margin-bottom:10px}.timeline-panel .panel-top{padding-bottom:10px;border-bottom:1px solid #394659}.ruler{background:#1b2534}.lane{background-color:#101923;border-bottom:1px solid #2d3d50}.lane:nth-child(2n){background-color:#131c2a}.clip{box-shadow:0 2px 8px #0008,inset 0 1px #ffffff23;border-radius:4px}.clip.selected{outline-color:#ffd59a;box-shadow:0 0 0 2px #edbe7b66,0 4px 15px #0006}.beat-panel{border-top:2px solid #c49c70}.beat-step.on{box-shadow:0 0 9px #e0ac6342}.producer-panel{border:1px solid #8a6d4b;background:linear-gradient(135deg,#272332,#18202b 45%,#121b27)}.producer-chip{background:#ab774d35;color:#f4d5a3}.producer-plan{background:#1a2633}.mixer-panel{border-top:2px solid #80d1c8}.export-panel{border-top:2px solid #d6a674}.files-panel{border-top:2px solid #8faadb}.mix-lab-panel{border-top:2px solid #c6a283}.beat-step{border-radius:4px}.producer-fingerprint{background:#141c28}.primary-action{background:linear-gradient(135deg,#f3ce96,#bc864a);color:#191c21;font-weight:900}.asset-item{background:#1b2634;border:1px solid #3d4c60}footer{color:#8293a8}
.shortcuts-dialog{background:#151e2a;border:1px solid #716047;color:#f2f4f9;border-radius:15px;width:min(530px,calc(100% - 28px));padding:23px;box-shadow:0 25px 90px #000b}.shortcuts-dialog::backdrop{background:#060b12d9;backdrop-filter:blur(3px)}.shortcut-header{display:flex;justify-content:space-between;align-items:center}.shortcut-header button{background:#2d3847;border:1px solid #536071;color:#dde6ef;border-radius:7px;padding:8px 11px}.shortcuts-dialog h2{font-size:24px;letter-spacing:-1px}.key-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 20px;padding:16px 0;border-top:1px solid #3d4957}.key-grid span{color:#bfcede}.key-grid kbd{font-family:ui-monospace,monospace;background:#293546;border:1px solid #57687b;border-radius:5px;padding:7px 9px;color:#f2ca95;font-size:11px}.shortcuts-dialog p{font-size:11px;color:#a9b8c8}
@media(max-width:1550px){.shell{grid-template-columns:222px minmax(0,1fr)}.sidebar{padding:18px 11px}.studio-grid{grid-template-columns:minmax(0,1fr) 310px}.creative-console{grid-template-columns:minmax(145px,.76fr) minmax(240px,1.5fr) minmax(170px,.85fr)}.workspace{padding:20px}.hero-deck{right:16%;width:160px;height:160px}.deck-badge{left:54px;top:51px}}
@media(max-width:1250px){.creative-console{grid-template-columns:1fr 1.5fr}.console-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;min-height:auto!important;align-items:center}.console-actions .overline{width:100%}.console-actions button{flex:1;min-width:120px}.hero-deck{right:5%;opacity:.35}.hero-text{max-width:76%}.hero-stats{right:12px;bottom:12px}.overview-head small{display:none}}
@media(max-width:1080px){.studio-grid{grid-template-columns:minmax(0,1fr)}.tools{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-stats{display:flex}.workspace-tabs a{padding:10px 13px}}
@media(max-width:860px){.shell{display:block}.sidebar{position:relative;height:auto;width:100%;gap:8px;padding:10px 12px}.sidebar .brand{padding:1px 8px 10px}.sidebar .brand-glyph{font-size:32px}.sidebar .side-nav{gap:8px}.side-nav a:hover{transform:none}.topbar{padding:9px 14px}.workspace{padding:11px}.hero{padding:20px;min-height:205px}.hero-deck{right:10%;top:8px}.creative-console{grid-template-columns:1fr 1.2fr}.console-actions{grid-column:1/-1}.overview-panel{padding:11px}.production-bar{margin-top:0}}
@media(max-width:610px){.hero{min-height:230px;padding:18px;margin-bottom:10px}.hero-text{max-width:100%}.hero h1{font-size:33px;letter-spacing:-1.7px}.hero .eyebrow{font-size:8px}.hero p{font-size:11px;max-width:95%;position:relative;z-index:3}.hero-deck{width:120px;height:120px;opacity:.13;right:20px;top:5px}.deck-badge{left:34px;top:33px;font-size:38px}.hero-stats{position:relative;right:auto;bottom:auto;display:flex;gap:5px;margin-top:12px}.hero-stats>div{flex:1;min-width:0;padding:7px 9px}.hero-stats strong{font-size:18px}.creative-console{grid-template-columns:1fr}.creative-console>div{min-height:auto}.console-summary{padding:13px!important}.console-summary strong{font-size:20px;margin:8px 0}.spectral-module{min-height:185px!important}.console-actions{grid-column:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px}.console-actions .overline{grid-column:1/-1}.console-actions button{min-width:0;padding:9px 7px;font-size:10px}.console-actions button b{font-size:8px}.workspace-tabs{gap:5px}.workspace-tabs a{padding:10px;font-size:9px}.production-bar{grid-template-columns:1fr 1fr}.overview-head{flex-wrap:wrap}.overview-head>div{width:100%}.overview-head .overline{width:100%}.overview-head #overviewStats{font-size:9px}.overview-panel #arrangementOverview{height:93px}.tools{grid-template-columns:1fr}.shortcuts-dialog{padding:17px}}
@media(max-width:360px){.console-actions{grid-template-columns:1fr}.hero h1{font-size:28px}.hero-stats{gap:3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.side-nav a,.console-actions button{transition:none}}