/* DeepFlow unified presentation stylesheet. See docs/THEME.md for layout/token layers. */ :root{--bg:#0c0e13;--sidebar:#101219;--surface:#171a22;--surface-2:#1f232e;--hover:#242a36;--border:#ffffff10;--text:#f5f5f7;--muted:#99a3b5;--accent:#69e0c7;--accent-ink:#09251d;--danger:#ff8c9d;--warning:#f6cc82;--radius:16px;--sidebar-width:222px;--player-height:96px;--shadow:0 24px 80px #0006;--font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} *{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--font);color:var(--text);background:var(--bg)}body{font-size:14px;line-height:1.55}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{color:inherit}h1,h2,h3,p{margin:0}h1{font-size:clamp(28px,3.4vw,44px);line-height:1.14;letter-spacing:-1.4px;font-weight:730}h2{font-size:22px;letter-spacing:-.6px;line-height:1.3}h3{font-size:17px;letter-spacing:-.2px}small{font-size:12px}.muted{color:var(--muted)}.eyebrow{display:block;font-size:10px;font-weight:750;letter-spacing:2.2px;color:var(--accent);margin-bottom:12px}.quiet-link{color:var(--muted);font-size:13px}.quiet-link:hover{color:var(--text)}.text-button{border:0;background:none;padding:0;text-align:left;color:inherit}.text-button:hover{text-decoration:underline}.full{width:100%}.compact{padding:8px 15px!important}.hidden,[hidden]{display:none!important}.skip-link{position:fixed;top:-100px;left:16px;z-index:999;background:var(--accent);color:#111;padding:12px}.skip-link:focus{top:10px} .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--border);background:var(--surface-2);padding:11px 18px;border-radius:10px;font-weight:650;font-size:13px;line-height:1.4;white-space:nowrap;transition:background .15s,transform .15s}.button svg{width:18px;height:18px}.button:hover:not(:disabled){background:var(--hover);transform:translateY(-1px)}.button.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}.button.primary:hover{filter:brightness(1.06)}.button.ghost{background:transparent}.button.danger{color:var(--danger);border-color:#ff8c9d44;background:#ff8c9d0b}.icon-button{width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:0;border-radius:9px;font-size:20px;color:var(--muted)}.icon-button svg{width:19px;height:19px}.icon-button:hover,.icon-button.active{color:var(--accent);background:var(--surface-2)}.avatar{height:34px;width:34px;flex-shrink:0;border-radius:50%;background:#8176b92b;color:#d9c9ff;border:1px solid #c9a9ff24;font-weight:750} .sidebar{position:fixed;inset:0 auto var(--player-height) 0;width:var(--sidebar-width);background:var(--sidebar);border-right:1px solid var(--border);z-index:30;padding:30px 16px 18px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;font-size:23px;font-weight:820;letter-spacing:-.7px;margin:0 8px 36px}.brand img{flex-shrink:0}.brand small{display:block;letter-spacing:1.25px;font-size:7px;font-weight:650;color:var(--muted);margin-top:2px}nav{display:flex;flex-direction:column;gap:5px}nav a{display:flex;align-items:center;gap:12px;padding:11px 15px;color:var(--muted);border-radius:10px;font-size:13px;font-weight:580}nav a svg{width:19px;height:19px;flex-shrink:0}nav a:hover{background:var(--surface);color:var(--text)}nav a.active{background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}.nav-label{display:block;margin:23px 15px 9px;font-size:9px;font-weight:700;letter-spacing:2px;color:var(--muted)}.nav-divider{height:1px;background:var(--border);margin:16px 10px}.sidebar-bottom{margin-top:auto;padding:18px 12px 0;display:grid;gap:12px}.side-credit{padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(130deg,#8c74bf12,#69e0c709)}.side-credit strong{font-size:18px;color:var(--text)}.side-credit span{display:block;color:var(--muted);font-size:11px}.version{font-size:8px;color:var(--muted);letter-spacing:1.4px}.workspace{margin-left:var(--sidebar-width);padding-bottom:calc(var(--player-height) + 24px);min-height:100vh}.topbar{height:84px;padding:0 34px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:20}.global-search{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:9px 14px;max-width:620px;flex:1}.global-search>span{font-size:24px;color:var(--muted);line-height:1}.global-search input{padding:0;border:0;background:none;outline:none;color:var(--text);width:100%;font-size:12px;box-shadow:none}.global-search kbd{font:10px var(--font);border:1px solid var(--border);border-radius:4px;padding:2px 5px;color:var(--muted);white-space:nowrap}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:12px}#view{padding:32px 38px;max-width:1750px;margin:auto;outline:none}.page-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.page-header .muted{margin-top:10px;max-width:680px}.header-actions{display:flex;gap:10px;align-items:center}.sidebar-collapsed .sidebar{transform:translateX(-100%)}.sidebar-collapsed .workspace{margin-left:0}.sidebar,.workspace{transition:transform .2s,margin .2s} .hero{position:relative;isolation:isolate;overflow:hidden;padding:38px 42px;border-radius:23px;background:linear-gradient(108deg,#263b40 0%,#273544 42%,#493764 100%);margin-bottom:32px;border:1px solid #ffffff15;min-height:260px;display:flex;align-items:center}.hero:after{content:"";width:350px;height:350px;border-radius:50%;border:1px solid #ffffff24;position:absolute;right:3%;top:-45px;box-shadow:0 0 0 35px #ffffff05,0 0 0 70px #ffffff04,0 0 0 105px #ffffff03;z-index:-1}.hero .hero-copy{max-width:560px}.hero h1{font-size:clamp(28px,4.3vw,56px);letter-spacing:-2px;color:#f4f7fb;max-width:560px}.hero p{color:#c4cfda;margin:14px 0 23px;max-width:440px;font-size:13px}.hero .eyebrow{color:#9cf1d9}.hero-meta{position:absolute;right:32px;bottom:26px;display:flex;align-items:center;gap:12px;color:#e5d4f8;font-size:9px;letter-spacing:2px}.sound-bars{height:27px;display:flex;align-items:center;gap:4px}.sound-bars i{display:block;width:3px;border-radius:4px;background:#c1acdf;height:12px}.sound-bars i:nth-child(2n){height:25px}.sound-bars i:nth-child(3n){height:18px}.section{margin:30px 0}.section-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.section-head h2{font-size:20px}.section-head small{color:var(--muted)}.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:22px}.track-card{min-width:0}.art-button{width:100%;border:0;padding:0;background:none;position:relative;text-align:left;border-radius:14px;overflow:hidden}.art{aspect-ratio:1;position:relative;border-radius:14px;isolation:isolate;overflow:hidden;display:grid;place-items:center;color:#fff}.art span{font-size:70px;line-height:1;font-weight:850;letter-spacing:-5px;opacity:.65}.art small{position:absolute;bottom:15px;left:15px;letter-spacing:2px;font-size:7px;opacity:.8}.art-orbit{position:absolute;width:150%;height:150%;border-radius:50%;border:1px solid #ffffff36;left:20%;top:20%;box-shadow:0 0 0 20px #ffffff10,0 0 0 40px #ffffff0a;z-index:-1}.art-0{background:linear-gradient(135deg,#235955,#263e58)}.art-1{background:linear-gradient(125deg,#b47b69,#452a4a)}.art-2{background:linear-gradient(145deg,#728bac,#293146)}.art-3{background:linear-gradient(120deg,#5b4784,#242f64)}.art-4{background:linear-gradient(130deg,#c1a65c,#416662)}.art-5{background:linear-gradient(135deg,#26424d,#3a675f)}.card-play{width:42px;height:42px;display:grid;place-items:center;position:absolute;bottom:12px;right:12px;border-radius:50%;background:var(--accent);color:var(--accent-ink);box-shadow:0 5px 25px #0004;opacity:0;transform:translateY(8px);transition:.18s}.art-button:hover .card-play,.art-button:focus-visible .card-play{opacity:1;transform:translateY(0)}.card-title{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:5px}.card-title .text-button{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-title .icon-button{width:23px;height:24px}.track-card>p{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-tags{display:flex;gap:8px;align-items:center;margin-top:7px;overflow:hidden;white-space:nowrap;font-size:10px;color:var(--muted)}.source-label{display:inline-block;font-size:8px;font-weight:700;letter-spacing:1px;color:var(--muted);white-space:nowrap}.mood-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.mood-tile{position:relative;overflow:hidden;text-align:left;min-height:105px;border-radius:14px;border:1px solid #ffffff15;padding:18px;color:#fff;transition:transform .15s}.mood-tile:hover{transform:translateY(-3px)}.mood-tile strong{display:block;font-size:16px;margin-top:20px;position:relative}.mood-tile span{font-size:8px;letter-spacing:2px;opacity:.6}.mood-tile:after{content:"";position:absolute;width:90px;height:90px;right:-15px;top:-20px;border-radius:50%;border:18px solid #ffffff0c}.mood-focus{background:#293d50}.mood-chill{background:#305249}.mood-drive{background:#473c66}.mood-energy{background:#754649}.mood-dream{background:#65506c}.mood-sleep{background:#303451}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0}.stat{padding:21px;background:var(--surface);border:1px solid var(--border);border-radius:15px}.stat>span{color:var(--muted);font-size:11px;display:block}.stat strong{font-size:30px;letter-spacing:-1px;display:block;margin:7px 0}.stat small{color:var(--muted);font-size:10px} .tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:20px 0}.tab,.chip{border:1px solid var(--border);padding:8px 16px;border-radius:30px;background:var(--surface);font-size:12px;color:var(--muted)}.tab.active,.chip.active{background:var(--text);color:var(--bg);border-color:var(--text)}.chip{font-size:11px;padding:7px 12px}.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}.filter-row input{max-width:310px}.filter-row select{width:auto;min-width:140px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:17px;padding:25px}.panel h2{margin-bottom:16px}.panel+.panel{margin-top:20px}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel-grid>.panel{margin:0}.notice{border:1px solid #78a3dc28;border-radius:12px;background:#7e9ec60b;padding:14px 17px;color:var(--muted);font-size:12px;line-height:1.65;margin:16px 0}.notice.danger{border-color:#ff8c9d44;color:var(--danger);background:#ff8c9d0b}.notice.success{border-color:#69e0c744;color:var(--accent);background:#69e0c70b}.notice.warning{border-color:#f6cc8244;color:var(--warning);background:#f6cc8208}.empty-state{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:38px 24px;border:1px dashed var(--border);border-radius:16px;min-height:190px;gap:10px}.empty-state p{color:var(--muted);font-size:12px;max-width:470px;line-height:1.7}.empty-state h3{font-size:16px}.empty-state .button{margin-top:7px}.empty-symbol{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.empty-symbol svg{width:21px;height:21px}.loading{padding:70px 20px;display:flex;align-items:center;justify-content:center;color:var(--muted);gap:14px}.spinner{border:2px solid var(--border);border-top-color:var(--accent);width:19px;height:19px;border-radius:50%;display:inline-block;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} label{display:grid;gap:7px;font-weight:600;font-size:12px}label small{color:var(--muted);font-weight:400;font-size:10px}input:not([type=range]):not([type=checkbox]),select,textarea{width:100%;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--bg);padding:11px 13px;font-size:13px;min-height:42px}textarea{resize:vertical;line-height:1.8;min-height:110px}input::placeholder,textarea::placeholder{color:var(--muted);opacity:.65}select{appearance:auto;color-scheme:dark}.form-stack{display:grid;gap:18px;margin-top:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.span-2{grid-column:span 2}.check{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;font-weight:400;line-height:1.7}.check input{appearance:auto;width:16px;height:16px;flex-shrink:0;accent-color:var(--accent)}.check a{text-decoration:underline}.switch-line{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--border)}.switch-line div>strong{display:block;font-size:13px}.switch-line div>small{color:var(--muted);font-size:11px;display:block;max-width:500px;margin-top:4px}.switch-line input{width:18px;height:18px;accent-color:var(--accent)}.range-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted)}input[type=range]{accent-color:var(--accent);height:4px;cursor:pointer;width:100%}.range-label+input{margin:15px 0 7px}.settings-form{display:grid;gap:20px}.settings-group-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}.settings-group-head h2{margin:0}.secret-row{display:flex;align-items:center;gap:8px}.secret-row input{flex:1}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);display:inline-block}.status-dot.good{background:var(--accent)}.status-dot.warn{background:var(--warning)}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:13px}table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}th{color:var(--muted);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:1px;background:var(--surface);text-align:left}th,td{padding:13px 17px;border-bottom:1px solid var(--border)}td.wrap{white-space:normal;min-width:230px;max-width:430px;overflow-wrap:anywhere}tr:last-child td{border-bottom:0}tr:hover td{background:var(--surface)}.table-actions{display:flex;gap:6px}.pagination{display:flex;gap:18px;align-items:center;justify-content:center;margin:22px 0;color:var(--muted);font-size:12px}.track-row{display:flex;align-items:center;gap:15px;padding:10px 6px;border-bottom:1px solid var(--border)}.track-row:hover{background:var(--surface);border-radius:10px}.row-number{width:22px;flex-shrink:0;background:none;border:0;font-size:11px;color:var(--muted);position:relative}.row-number span{display:none}.row-number:hover{font-size:0}.row-number:hover span{display:inline;font-size:13px;color:var(--accent)}.art.tiny{width:41px;height:41px;border-radius:7px;flex-shrink:0}.art.tiny span{font-size:24px;letter-spacing:0}.art.tiny small{display:none}.row-title{flex:1;min-width:0}.row-title .text-button{font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.row-title small{display:block;color:var(--muted);font-size:11px}.row-genre{font-size:11px;max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:10px}.list-card p{color:var(--muted);font-size:11px;margin-top:3px} .studio-layout{display:grid;grid-template-columns:minmax(350px,460px) minmax(280px,1fr);gap:25px;align-items:start}.studio-editor{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px}.studio-editor .tabs{margin-top:0;background:var(--bg);padding:4px;border-radius:11px}.studio-editor .tab{flex:1;border:0;border-radius:8px;text-align:center}.studio-editor .tab.active{background:var(--surface-2);color:var(--text)}.studio-editor textarea.lyrics{min-height:235px;font-size:12px;line-height:1.9}.studio-topline{display:flex;align-items:center;justify-content:space-between;gap:10px}.studio-topline>strong{font-size:12px}.studio-model{max-width:120px!important;min-height:32px!important;padding:6px 9px!important;font-size:11px!important}.lyric-tools{display:flex;gap:7px;margin-top:7px;flex-wrap:wrap}.lyric-tools button{font-size:9px;padding:5px 9px}.studio-submit{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:15px;margin-top:3px;border-top:1px solid var(--border)}.studio-submit .button{min-width:130px}.studio-cost{font-size:11px;color:var(--muted)}.studio-cost strong{display:block;color:var(--text);font-size:14px}.advanced{border-top:1px solid var(--border);padding-top:17px}.advanced summary{cursor:pointer;font-size:12px;color:var(--muted);list-style:none;display:flex;justify-content:space-between}.advanced summary:after{content:'⌄'}.advanced[open] summary{margin-bottom:20px}.studio-results .section-head{margin-top:4px}.studio-job{padding:19px;border:1px solid var(--border);border-radius:14px;background:var(--surface);margin:12px 0}.job-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:10px}.job-head strong{font-size:13px}.job-meta{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:15px;flex-wrap:wrap}.job-steps{display:flex;gap:5px;margin:16px 0 4px}.job-steps i{height:3px;border-radius:3px;flex:1;background:var(--surface-2)}.job-steps i.done{background:var(--accent)}.job-steps i.current{background:var(--accent);opacity:.6;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{50%{opacity:.25}}.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);padding:4px 8px;border-radius:30px;font-size:9px;line-height:1.2;white-space:nowrap;color:var(--muted)}.badge i{height:5px;width:5px;border-radius:50%;background:currentColor}.status-completed,.status-ready{color:var(--accent);border-color:#69e0c726;background:#69e0c708}.status-failed{color:var(--danger);border-color:#ff8c9d26}.status-unknown{color:var(--warning);border-color:#f6cc8236}.status-processing,.status-saving,.status-submitting,.status-submitted{color:#b8a4ed}.job-lyrics{white-space:pre-wrap;background:var(--bg);border-radius:10px;padding:15px;max-height:330px;overflow:auto;color:var(--muted);font-size:12px;margin:12px 0}.flow-layout{display:grid;grid-template-columns:1fr 360px;gap:28px}.flow-hero{position:relative;min-height:335px;border-radius:24px;background:linear-gradient(125deg,#293e43,#493e62);padding:40px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#fff}.flow-hero:before{content:'∞';font-size:390px;line-height:1;position:absolute;right:0;top:-85px;opacity:.09;font-family:Georgia,serif}.flow-hero .eyebrow{color:#bbecdf}.flow-hero h1{position:relative}.flow-hero p{color:#d0cadb;margin:12px 0 25px;max-width:430px}.flow-control{padding:23px;border-radius:17px;background:var(--surface);border:1px solid var(--border)}.flow-control label{margin-bottom:20px}.flow-control select{margin-bottom:0}.flow-queue{grid-column:1/-1}.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.provider-card{border:1px solid var(--border);border-radius:14px;padding:20px;background:var(--surface);display:flex;flex-direction:column;gap:12px}.provider-card h3{font-size:16px}.provider-card p{color:var(--muted);font-size:11px;flex:1}.external-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.external-card{border:1px solid var(--border);border-radius:13px;overflow:hidden;background:var(--surface)}.external-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.external-card .external-copy{padding:16px}.external-card strong{font-size:13px;display:block}.external-card p{font-size:11px;color:var(--muted);margin:6px 0 12px}.external-card .button{font-size:11px}.knowledge-article p{color:var(--muted);white-space:pre-wrap;line-height:1.8;margin:15px 0}.knowledge-article .attribution{font-size:10px}.menu-list{display:grid;gap:7px}.menu-list>button,.menu-list>a{display:flex;justify-content:flex-start;padding:12px;border:1px solid var(--border);background:var(--surface);border-radius:9px;font-size:12px;text-align:left}.menu-list>button:hover,.menu-list>a:hover{background:var(--hover)} .player{height:var(--player-height);position:fixed;bottom:0;left:0;right:0;background:color-mix(in srgb,var(--sidebar) 96%,transparent);backdrop-filter:blur(18px);border-top:1px solid var(--border);padding:12px 25px;display:grid;grid-template-columns:minmax(210px,1fr) minmax(290px,1.3fr) minmax(190px,1fr);align-items:center;gap:20px;z-index:50}.now{display:flex;align-items:center;gap:13px;min-width:0}.mini-art{width:51px;height:51px;border-radius:10px;display:grid;place-items:center;color:#d7e9e8;font-size:21px;flex-shrink:0}.now-copy{min-width:0}.now-copy strong{display:block;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.now-copy span{display:block;color:var(--muted);font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:3px}.now>.icon-button{margin-left:6px;font-size:22px}.transport-buttons{display:flex;align-items:center;justify-content:center;gap:18px}.play-main{width:35px;height:35px;border-radius:50%;border:0;background:var(--text);color:var(--bg);font-size:15px;display:grid;place-items:center}.seek{display:flex;align-items:center;gap:10px;margin-top:6px}.seek time{font-size:9px;color:var(--muted);min-width:26px}.seek input{height:3px}.player-right{display:flex;justify-content:flex-end;align-items:center;gap:12px}.player-right input{max-width:83px}.player-right .source-label{font-size:7px}.external-dock{position:fixed;right:23px;bottom:calc(var(--player-height) + 16px);width:370px;max-width:calc(100vw - 24px);z-index:40;border-radius:14px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.external-dock header{display:flex;align-items:center;justify-content:space-between;padding:5px 12px}.external-dock header strong{font-size:11px}.external-dock small{font-size:9px;display:block;padding:8px 12px;color:var(--muted)}#external-embed,#external-embed iframe{display:block;width:100%;min-height:208px;border:0}.queue-drawer{position:fixed;right:20px;bottom:calc(var(--player-height) + 15px);width:390px;max-height:60vh;overflow:auto;padding:21px;background:var(--surface);border:1px solid var(--border);border-radius:17px;z-index:45;box-shadow:var(--shadow)}.queue-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}.queue-item>div{flex:1;min-width:0}.queue-item strong{font-size:11px}.queue-item small{display:block;font-size:10px;color:var(--muted)} dialog{background:var(--sidebar);color:var(--text);border:1px solid var(--border);border-radius:20px;max-width:620px;width:calc(100vw - 34px);max-height:86vh;padding:32px;box-shadow:var(--shadow);overflow:auto}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}dialog h2{margin:0 32px 12px 0}dialog>.modal-close{position:absolute;right:12px;top:12px}dialog .form-grid{margin-top:20px}.modal-close{font-size:24px}.modal-track-hero{display:flex;align-items:center;gap:20px;margin-bottom:20px}.modal-track-hero .art{width:95px;flex-shrink:0}.modal-track-hero h2{margin-right:0}.modal-track-hero .art span{font-size:45px}.modal-track-hero .art small{display:none}.toasts{position:fixed;right:24px;top:95px;z-index:1000;display:grid;gap:10px;max-width:450px}.toast{background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:16px 19px;font-size:12px;animation:toastin .15s ease-out;white-space:pre-wrap}.toast.danger{border-color:#ff8c9d66;color:var(--danger)}.toast.success{border-color:#69e0c744;color:var(--accent)}@keyframes toastin{from{opacity:0;transform:translateY(-8px)}}.inline-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.detail-list{display:grid;gap:12px}.detail-item{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--border)}.detail-item>div{min-width:0}.detail-item strong{font-size:12px}.detail-item small{display:block;font-size:10px;color:var(--muted);overflow-wrap:anywhere}.legal-page{max-width:850px;margin:40px auto;padding:30px}.legal-page .brand{margin-left:0}.legal-page h1{margin:15px 0 30px}.legal-page h2{margin:30px 0 12px}.legal-page p{color:var(--muted);font-size:13px;line-height:1.9;margin-bottom:12px}.legal-page a:not(.button):not(.brand){color:var(--accent);text-decoration:underline}.legal-page>.button{margin:30px 0}.preformatted{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px;font-size:12px;color:var(--muted);max-height:400px;overflow:auto} .auth-layout{min-height:100vh;display:grid;grid-template-columns:1.08fr 1fr}.auth-story{background:radial-gradient(ellipse at 30% 55%,#2d454f 0%,transparent 55%),linear-gradient(140deg,#142629,#272333 75%);padding:42px 54px;color:#f6f7fa;display:flex;flex-direction:column;position:relative;overflow:hidden}.auth-story .brand{margin:0}.auth-message{margin:auto 0;position:relative;z-index:1;padding:55px 0}.auth-message h1{font-size:clamp(40px,4.8vw,71px);font-weight:730;letter-spacing:-3px;line-height:1.12;position:relative;z-index:2}.auth-message h1 em{font-style:normal;color:#8de9d5}.auth-message p{font-size:14px;line-height:1.8;color:#b8c5ce;max-width:350px;margin:20px 0 28px;position:relative;z-index:2}.auth-caption{font-size:10px;letter-spacing:1.3px;color:#a8b8c2;position:relative;z-index:2}.auth-legal{font-size:10px;color:#8f9da9;letter-spacing:.5px}.record-visual{width:290px;height:290px;border-radius:50%;position:absolute;right:-30px;bottom:-60px;z-index:-1;background:repeating-radial-gradient(circle at center,#191d2880 0px,#191d2880 3px,#ffffff09 4px,#191d2880 5px);border:1px solid #ffffff15;box-shadow:0 35px 80px #0005;display:grid;place-items:center;transform:rotate(-18deg)}.record-center{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;color:#d5ffef;font-size:45px;font-weight:850;background:linear-gradient(110deg,#649388,#4c5779)}.auth-form-panel{display:grid;place-items:center;padding:50px 35px;background:var(--bg)}.auth-form{width:100%;max-width:390px}.auth-form h2{font-size:30px;letter-spacing:-1px;margin:14px 0 12px}.auth-form>.muted{font-size:12px;line-height:1.8;margin-bottom:24px}.auth-form .form-stack{gap:19px}.auth-form .button.primary{padding:14px 20px;justify-content:space-between;margin-top:4px}.auth-switch{font-size:11px;margin-top:25px}.auth-switch a{color:var(--accent);font-weight:650;margin-left:4px}.auth-footer{border-top:1px solid var(--border);padding-top:22px;margin-top:36px;display:grid;gap:10px;font-size:10px;color:var(--muted)}.auth-footer>span{font-size:8px;letter-spacing:1px}.auth-mobile-brand{display:none} [data-theme=light]{--bg:#f6f7fa;--sidebar:#ffffff;--surface:#ffffff;--surface-2:#edf0f5;--hover:#e4e9ef;--border:#16243813;--text:#18212e;--muted:#707b8c;--accent:#278f7b;--accent-ink:#fff;--shadow:0 24px 80px #27314520}[data-theme=light] select{color-scheme:light}[data-theme=light] .hero .button.primary,[data-theme=light] .flow-hero .button.primary{background:#9cecd7;color:#15352f}[data-theme=light] .badge.status-completed{color:#278f7b}[data-theme=light] .auth-story .brand,[data-theme=light] .auth-story h1{color:#fff}[data-theme=light] .auth-story .eyebrow{color:#8de9d5}[data-theme=light] .hero .eyebrow{color:#b6f8e8}[data-theme=light] .notice.danger{color:#b12743} @media(min-width:1500px){.track-grid{grid-template-columns:repeat(6,1fr)}} @media(max-width:1180px){:root{--sidebar-width:198px}.topbar{padding:0 23px}#view{padding:27px}.brand{font-size:20px;gap:8px}.brand small{font-size:6px}.track-grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.mood-grid{grid-template-columns:repeat(3,1fr)}.mood-tile{min-height:87px}.mood-tile strong{margin-top:12px}.player{grid-template-columns:1fr 1.2fr .7fr;gap:12px;padding:10px 18px}.player-right .source-label{display:none}.studio-layout{grid-template-columns:minmax(310px,1fr) minmax(260px,1fr)}.flow-layout{grid-template-columns:1fr 300px}.hero-meta{display:none}.stats-row{grid-template-columns:repeat(2,1fr)}} @media(max-width:900px){:root{--sidebar-width:215px}.sidebar{transform:translateX(-100%);inset-bottom:var(--player-height)}.workspace{margin-left:0}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-open .sidebar-scrim{display:block!important;position:fixed;inset:0;background:#0008;z-index:25}.topbar{height:72px;padding:0 18px}.global-search kbd{display:none}.topbar-actions{gap:6px}#view{padding:24px}.studio-layout{grid-template-columns:minmax(300px,.9fr) minmax(250px,1fr)}.flow-layout{grid-template-columns:1fr 280px}.auth-layout{grid-template-columns:.9fr 1fr}.auth-story{padding:35px}.auth-message h1{font-size:46px}.auth-message p{font-size:12px}.record-visual{right:-120px}.player{grid-template-columns:1fr 1.3fr}.player-right{display:none}.provider-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){:root{--player-height:124px}body{font-size:13px}.topbar{padding:0 12px;gap:8px;height:64px}.global-search{padding:8px 10px}.global-search input{font-size:11px}.global-search>span{display:none}.topbar-actions .compact{padding:8px 11px!important;font-size:11px}.topbar-actions #theme-toggle{display:none}.avatar{width:30px;height:30px}.icon-button{width:30px;height:30px}#view{padding:24px 16px}.page-header{align-items:flex-start;flex-direction:column;gap:15px}.page-header h1{font-size:31px}.page-header .muted{font-size:12px}.hero{padding:27px 24px;min-height:255px;border-radius:18px}.hero h1{font-size:37px;letter-spacing:-1.8px}.hero p{font-size:12px}.hero:after{right:-200px}.section{margin:26px 0}.section-head h2{font-size:19px}.track-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.card-play{opacity:1;transform:none;width:33px;height:33px;font-size:12px}.art span{font-size:61px}.art small{font-size:6px}.mood-grid{grid-template-columns:repeat(2,1fr);gap:10px}.mood-tile{min-height:91px}.mood-tile strong{font-size:15px}.stats-row{gap:10px}.stat{padding:16px}.stat strong{font-size:24px}.panel{padding:20px}.panel-grid,.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.studio-layout{grid-template-columns:1fr}.studio-editor{padding:20px}.studio-results{margin-top:7px}.flow-layout{grid-template-columns:1fr}.flow-hero{min-height:295px;padding:28px}.flow-queue{grid-column:auto}.provider-grid{grid-template-columns:1fr}.row-genre{display:none}.track-row{gap:9px}.track-row .source-label{display:none}.row-number{width:17px}.row-title .text-button{font-size:12px}.player{padding:10px 15px;grid-template-columns:1fr;gap:4px;align-content:center}.now{padding-right:140px;position:relative}.now-copy strong{font-size:11px}.now-copy span{font-size:9px}.now .mini-art{height:34px;width:34px;border-radius:7px;font-size:15px}.now>.icon-button{position:absolute;right:110px;top:1px}.transport{display:contents}.transport-buttons{position:absolute;right:12px;top:13px;gap:4px}.transport-buttons .icon-button{width:28px;font-size:16px}.transport-buttons #shuffle,.transport-buttons #continuous{display:none}.transport-buttons .play-main{height:33px;width:33px}.seek{margin-top:13px}.external-dock{right:12px;bottom:calc(var(--player-height) + 10px);width:360px}.queue-drawer{right:12px;width:calc(100vw - 24px)}.filter-row input{max-width:none;flex:1}.filter-row select{min-width:110px;max-width:48%;font-size:11px}.tabs{gap:6px}.tab{padding:8px 12px;font-size:11px}.auth-layout{grid-template-columns:1fr}.auth-story{display:none}.auth-form-panel{min-height:100vh;padding:35px 26px}.auth-mobile-brand{display:block;color:var(--accent);font-size:25px;font-weight:800;letter-spacing:-1px;margin-bottom:40px}.auth-form h2{font-size:29px}.legal-page{margin:10px auto;padding:24px}.legal-page h1{font-size:33px}.toasts{left:15px;right:15px;top:75px}.toast{font-size:11px;padding:13px 16px}.header-actions{flex-wrap:wrap}.button{padding:10px 14px;font-size:12px}dialog{padding:27px 22px}.modal-track-hero .art{width:75px}.modal-track-hero h2{font-size:20px}.table-wrap{margin-left:-2px;margin-right:-2px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* Final layout/accessibility checks: buttons share link navigation styling. */ .nav-signout{display:flex;align-items:center;gap:12px;padding:11px 15px;color:var(--muted);border:0;border-radius:10px;font-size:13px;font-weight:580;background:none;text-align:left;width:100%}.nav-signout svg{width:19px;height:19px;flex-shrink:0}.nav-signout:hover{background:var(--surface);color:var(--text)}.sidebar{overflow-y:auto}.brand{flex-shrink:0}.brand>svg{width:34px;height:34px;flex-shrink:0}.side-credit strong,.side-credit a,.studio-cost>span{display:block}.side-credit a{font-size:10px;color:var(--muted);margin-top:5px}.side-credit strong small{font-size:11px;font-weight:500}.switch-line>span>strong,.switch-line>span>small{display:block}.switch-line>span>small{margin-top:4px;font-size:10px}.studio-submit{display:grid;grid-template-columns:1fr auto;align-items:center}.studio-submit>small{grid-column:1/-1;color:var(--muted);font-size:10px;line-height:1.7}.studio-cost{margin:0;font-size:10px}.studio-model{padding:0!important}.studio-editor>.form-stack{margin-top:0}.studio-editor .custom-only.form-stack{margin-top:0}.global-search input:not([type=checkbox]){padding:0;min-height:28px;border:0;background:none}.hero .hero-meta{position:static;letter-spacing:0;font-size:12px;flex-wrap:wrap;margin-top:18px}.hero .sound-bars{margin-left:auto;padding:0 30px}.hero .hero-copy{flex:1}.workspace,#view,.studio-layout>*{min-width:0}@media(max-width:1180px){.hero .hero-meta{display:flex}}@media(max-width:640px){.hero .sound-bars{display:none}.studio-submit{grid-template-columns:1fr}.studio-submit>small{grid-column:auto}.nav-signout{padding:11px 15px}.header-actions{flex-wrap:wrap}.filter-row input{max-width:100%}} [data-theme=light] .status-submitting,[data-theme=light] .status-submitted,[data-theme=light] .status-processing,[data-theme=light] .status-saving{color:#69519a}[data-theme=light] .status-unknown,[data-theme=light] .notice.warning{color:#986500} /* DeepFlow 1.1 creator platform */ .cover-art{padding:0;overflow:hidden;isolation:isolate}.cover-art img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}.art.tiny img{width:100%;height:100%}.wrap-tabs{flex-wrap:wrap;overflow:visible}.wrap-tabs a{text-decoration:none}.filter-bar{display:flex;align-items:end;gap:16px;margin:24px 0;flex-wrap:wrap}.filter-bar label:first-child{flex:1;min-width:180px}.filter-bar label{min-width:150px}.hero-footnote{font-size:12px!important;letter-spacing:.02em;margin-top:24px!important;opacity:.72}.song-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:28px;align-items:start}.song-hero{display:flex;gap:28px;align-items:center}.song-cover{width:228px;min-width:228px;height:228px;aspect-ratio:1;border-radius:18px}.song-info{min-width:0}.song-info h1{font-size:clamp(25px,3vw,42px);line-height:1.1;margin:12px 0;overflow-wrap:anywhere}.artist-link{font-size:18px;font-weight:600}.song-info .inline-actions{margin-top:20px;flex-wrap:wrap}.creator-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}.song-description{white-space:pre-wrap;line-height:1.7;overflow-wrap:anywhere;color:var(--muted);margin:20px 0}.tag-list{display:flex;gap:8px;flex-wrap:wrap}.lyrics-panel{position:sticky;top:92px;max-height:calc(100vh - 235px);overflow:auto}.lyrics-sheet{font-family:inherit;white-space:pre-wrap;font-size:15px;line-height:1.9;overflow-wrap:anywhere;margin:12px 0;color:var(--text);tab-size:2}.lyrics-caption{font-size:12px!important;line-height:1.5!important;border-top:1px solid var(--border);padding-top:16px}.lyrics-drawer{width:min(430px,100vw);padding:22px}.lyrics-drawer .lyrics-sheet{padding:8px 4px}.cover-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.cover-gallery article{min-width:0}.cover-gallery img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;margin-bottom:10px}.cover-gallery small{display:block;margin-bottom:10px;color:var(--muted);font-size:11px}.cover-gallery .button{font-size:11px;padding:7px 10px}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.menu-grid .button{justify-content:start;white-space:normal;text-align:left}.copy-box{width:100%;margin:15px 0}.comment{border-bottom:1px solid var(--border);padding:20px 0}.comment small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.comment p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.account-grid .panel{min-width:0}.public-page{margin:0;min-height:100vh;padding-bottom:40px}.public-header{height:80px;display:flex;justify-content:space-between;align-items:center;max-width:1280px;margin:auto;padding:0 32px;border-bottom:1px solid var(--border)}.public-header .brand{margin:0;padding:0}.public-main{max-width:1280px;margin:auto;padding:48px 32px}.public-main .song-cover{width:280px;min-width:280px;height:280px}.public-main audio{width:100%;margin:24px 0;display:block}.public-main .lyrics-panel{max-height:none;position:static}.public-footer{max-width:1280px;margin:48px auto 0;padding:24px 32px;border-top:1px solid var(--border);color:var(--muted);font-size:12px}.public-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px}.public-grid .art{height:auto;aspect-ratio:1}.public-card{min-width:0;text-decoration:none}.public-card h3{font-size:16px;margin:12px 0 5px;overflow-wrap:anywhere}.public-profile{margin-bottom:36px;max-width:760px}.public-profile p{white-space:pre-wrap;line-height:1.7}#now-title{cursor:pointer}#modal .panel{margin-top:20px}.flow-controls{max-width:780px;margin-bottom:28px}.flow-controls>label{display:block;margin:20px 0}.song-main{min-width:0}.list-card small{display:block}.comment form,.comment input{max-width:100%} @media(min-width:1600px){.song-cover{width:300px;min-width:300px;height:300px}.song-layout{grid-template-columns:minmax(0,1.7fr) minmax(350px,1fr)}} @media(max-width:1200px){.song-hero{align-items:start;flex-direction:column}.song-layout{grid-template-columns:minmax(0,1fr) minmax(240px,.9fr)}.song-cover{width:210px;min-width:210px;height:210px}.song-info h1{font-size:30px}} @media(max-width:700px){.song-layout{display:block}.song-hero{align-items:start}.song-cover,.public-main .song-cover{width:min(100%,340px);min-width:0;height:auto;aspect-ratio:1}.song-info{width:100%}.lyrics-panel{position:static;max-height:none;margin-top:28px}.account-grid{grid-template-columns:1fr}.cover-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-grid{grid-template-columns:1fr}.filter-bar{display:grid;grid-template-columns:1fr 1fr}.filter-bar label:first-child{grid-column:1/-1}.filter-bar label{min-width:0}.public-header{padding:0 20px;height:72px}.public-main{padding:28px 20px}.public-header .brand small{display:none}.public-header .button{padding:9px 12px}.public-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.creator-toolbar .button{font-size:12px;padding:10px 12px}.player-right #lyrics-toggle{display:inline-flex!important}.player-right{gap:6px}.hero-footnote{font-size:11px!important}} .song-comments{grid-column:1;min-width:0;margin-top:0}@media(max-width:700px){.song-comments{margin-top:28px}} /* DeepFlow 1.2 — Voice / Video / Billing */ .creator-tabs{display:flex;gap:8px;border-bottom:1px solid var(--border,#ffffff20);padding:0 0 16px;margin-bottom:24px;flex-wrap:wrap}.creator-tabs a{padding:10px 20px;border-radius:999px;text-decoration:none;color:inherit}.creator-tabs a.active{background:var(--accent,#69e0c7);color:#10231e;font-weight:750}.creator-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;margin:24px 0}.creator-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-decoration:none;color:inherit;min-height:210px}.creator-orb{display:grid;place-items:center;width:68px;height:68px;border-radius:24px;background:linear-gradient(145deg,#69e0c733,#8b77ff33);font-size:30px;border:1px solid #69e0c744}.voice-steps{display:flex;gap:20px;padding:18px 0 28px;flex-wrap:wrap;color:var(--muted,#a0acbe)}.verification-phrase{margin:0;padding:24px;border-left:3px solid var(--accent,#69e0c7);font-size:22px;line-height:1.6;background:#69e0c710;white-space:pre-wrap}.creator-narrow{max-width:700px}.secret-display{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;border:1px solid #69e0c766;border-radius:16px;font-family:monospace;font-size:17px;user-select:all}.plan-price{font-size:38px;font-weight:750}.plan-price small{font-size:16px;font-weight:400}.pricing-card{display:flex;flex-direction:column;gap:14px}.pricing-card .button{margin-top:auto}.video-workspace{display:grid;grid-template-columns:minmax(360px,1.1fr) minmax(260px,0.9fr);gap:28px;align-items:start}.video-mockup{width:100%;max-height:580px;overflow:hidden;border-radius:20px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:24px;transition:aspect-ratio .2s}.video-mockup img{max-height:75%;width:100%;object-fit:contain;border-radius:10px}.render-item{padding:18px 0;border-bottom:1px solid var(--border,#ffffff20)}.render-item video,.published-video{max-width:100%;width:100%;max-height:580px;margin:12px 0;background:#000;border-radius:12px}.render-item progress{width:100%;accent-color:var(--accent,#69e0c7)}.timing-row{display:grid;grid-template-columns:100px 100px minmax(150px,1fr) auto;gap:12px;align-items:end;padding:12px 0;border-bottom:1px solid var(--border,#ffffff20)}.timing-row .inline-actions{max-width:210px}#timing-panel{margin-top:32px}#record-preview,#video-audio{width:100%}.creator-narrow input{width:100%}.published-video{display:block}.auth-card{max-width:520px;margin:10vh auto;padding:32px}.billing-admin-section{margin-bottom:30px}.creator-table-id{font:11px monospace;overflow-wrap:anywhere}.creator-overflow{overflow-wrap:anywhere;white-space:pre-wrap}.form-stack details p{line-height:1.7} @media(max-width:900px){.video-workspace{grid-template-columns:1fr}.timing-row{grid-template-columns:1fr 1fr}.timing-row label:nth-child(3),.timing-row .inline-actions{grid-column:1/-1}.video-mockup{max-height:440px}.creator-tabs a{padding:9px 13px}.plan-price{font-size:32px}.auth-card{margin:20px 12px;padding:20px}} @media(prefers-reduced-motion:reduce){.video-mockup{transition:none}} .ledger-display{white-space:pre-wrap;overflow-wrap:anywhere;max-height:60vh;overflow:auto;font-size:12px}.creator-table-id{overflow-wrap:anywhere} /* Studio tabs must not inherit the app's vertical sidebar nav layout. */ nav.creator-tabs{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 24px;padding:0 0 12px;border-bottom:1px solid var(--border);width:100%}nav.creator-tabs a{display:inline-flex;flex:0 0 auto;align-items:center;min-height:40px;padding:10px 18px;border-radius:22px;white-space:nowrap}nav.creator-tabs a.active{font-weight:700} @media(max-width:600px){nav.creator-tabs{gap:4px}nav.creator-tabs a{font-size:12px;padding:10px 11px}.toast-stack{max-height:28vh;overflow:hidden}} /* JIIHUU 1.2.1-METALLIC • Rainbow Waveform. Local vector UI, no bitmap animation. */ .jh-brand-wrap{position:relative;max-width:100%;width:fit-content;margin:0 8px 34px} .jh-brand-wrap .jh-brand{margin:0;gap:10px;min-width:0;max-width:100%;border-radius:10px;line-height:1.2} .jh-mark{display:block;width:44px;height:44px;flex:0 0 44px;overflow:visible} .jh-brand-copy{display:block;min-width:0}.jh-wordmark{display:block;font-size:27px;letter-spacing:-1.2px;font-weight:850;line-height:1.15;color:#f1f3f8} @supports (background-clip:text){.jh-wordmark{background:linear-gradient(105deg,#ff9bcf 0%,#ffb9a0 18%,#f9e4a2 35%,#b7ee9b 49%,#93e7e7 64%,#b0c8ff 80%,#d6b2ff 100%);background-clip:text;-webkit-background-clip:text;color:transparent}} .jh-brand .jh-tagline{font-size:6.5px;line-height:1.6;letter-spacing:1.05px;color:var(--muted,#a7b3c9);white-space:nowrap;margin-top:3px} .jh-wave-bar{transform-box:fill-box;transform-origin:center;transform:scaleY(.82)} html[data-jh-motion="on"] .jh-wave-bar{animation:jh-wave 4.6s ease-in-out infinite both} html[data-jh-motion="on"][data-jh-playing="true"] .jh-wave-bar{animation-duration:1.6s} html[data-jh-motion="on"] .jh-wave-2,html[data-jh-motion="on"] .jh-wave-8{animation-delay:-1.1s} html[data-jh-motion="on"] .jh-wave-3,html[data-jh-motion="on"] .jh-wave-7{animation-delay:-2.3s} html[data-jh-motion="on"] .jh-wave-4,html[data-jh-motion="on"] .jh-wave-6{animation-delay:-.65s} html[data-jh-motion="on"] .jh-wave-5{animation-delay:-1.8s} html[data-jh-motion="on"] .jh-wave-halo{animation:jh-halo 5s ease-in-out infinite} @keyframes jh-wave{0%,100%{transform:scaleY(.55)}24%{transform:scaleY(.93)}51%{transform:scaleY(.67)}77%{transform:scaleY(1)}} @keyframes jh-halo{0%,100%{opacity:.10}50%{opacity:.23}} html[data-jh-visible="hidden"] .jh-wave-bar,html[data-jh-visible="hidden"] .jh-wave-halo,[data-jh-offscreen="true"] .jh-wave-bar,[data-jh-offscreen="true"] .jh-wave-halo{animation-play-state:paused!important} .jh-motion-toggle{position:absolute;right:-9px;top:-12px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted,#9caabd);opacity:.52;font-size:12px;line-height:1} .jh-motion-toggle:hover,.jh-motion-toggle:focus-visible{opacity:1;background:var(--surface-2,#222834);border-color:var(--border,#ffffff20)} .jh-motion-toggle:disabled{cursor:default} .public-header .jh-brand-wrap,.auth-story .jh-brand-wrap,.auth-card .jh-brand-wrap{margin:0} .auth-story .jh-tagline{color:#b6c4d6}.auth-story .jh-mark{width:56px;height:56px;flex-basis:56px} .auth-story .jh-wordmark{font-size:35px}.auth-story .jh-tagline{font-size:8px} .jh-mobile-brand{display:none;margin:0 0 26px} .auth-card .jh-brand-wrap{margin-bottom:28px} [data-theme="light"] .jh-wordmark{color:#142034} @supports (background-clip:text){[data-theme="light"] .jh-wordmark{background-image:linear-gradient(105deg,#ba286d,#af4336 20%,#7a5c00 36%,#277340 52%,#166b87 69%,#594cb7 86%,#8e3d9c);color:transparent}[data-theme="light"] .auth-story .jh-wordmark{background-image:linear-gradient(105deg,#ff9bcf,#f9e4a2 35%,#93e7e7 68%,#d6b2ff);color:transparent}} @media(max-width:900px){.jh-mobile-brand{display:block}.public-header .jh-mark{width:36px;height:36px;flex-basis:36px}.public-header .jh-wordmark{font-size:25px}} @media(max-width:600px){.public-header .jh-brand{gap:7px}.public-header .jh-mark{width:30px;height:30px;flex-basis:30px}.public-header .jh-wordmark{font-size:23px}.public-header .jh-tagline{display:none}.public-header .jh-motion-toggle{right:-9px;top:-17px}.public-header{gap:14px;flex-wrap:wrap;min-height:78px;height:auto;padding-top:14px;padding-bottom:14px}} @media(prefers-reduced-motion:reduce){html[data-jh-motion="on"] .jh-wave-bar,html[data-jh-motion="on"] .jh-wave-halo{animation:none!important}.jh-wave-bar{transform:scaleY(.82)}} /* * JIIHUU 1.2.1-METALLIC / MIDNIGHT SPECTRUM * A presentation-only music identity. Local assets, system fonts, no tracking. * Rainbow belongs to the brand and musical artwork. Semantic statuses keep their own colors. * The site's saved --accent still controls focus, selections and active navigation. */ :root { --bg: #0a0c16; --sidebar: #0d101d; --surface: #141827; --surface-2: #1d2235; --hover: #272e45; --text: #f5f5fc; --muted: #a7b0c7; --border: #9aa7d51c; --danger: #ff9caf; --warning: #f3cf8c; --radius: 18px; --sidebar-width: 242px; --player-height: 98px; --shadow: 0 24px 75px #02030a99; --p-violet: #b7a6ff; --p-cyan: #75e6dc; --p-rose: #ffa1c9; --p-gold: #f6d28d; --p-brand: linear-gradient(115deg,#7650db,#5244b3); --p-brand-hover: linear-gradient(115deg,#835ce6,#6051c4); --p-spectrum: linear-gradient(90deg,#ff83bd,#ffa58a 18%,#f3d68d 35%,#b8e896 49%,#72ded9 65%,#8bbaff 81%,#c9a0ff); --p-line: #a8b5ee30; --p-input: #0e1220; --p-player: #101423f7; --p-surface-glass: #0d101ded; --p-card-shadow: 0 9px 24px #00000032; --p-content-max: 1450px; } [data-theme="light"] { --bg: #f4f5fa; --sidebar: #fafbff; --surface: #ffffff; --surface-2: #ebedf6; --hover: #e1e4f1; --text: #182039; --muted: #57627a; --border: #26345c1c; --danger: #ad2545; --warning: #835b16; --shadow: 0 24px 75px #1d295a20; --p-violet: #6740bc; --p-cyan: #126d73; --p-rose: #ad3471; --p-gold: #806119; --p-line: #5e6ba72e; --p-input: #f8f9fd; --p-player: #fafbfff7; --p-surface-glass: #fafbffef; --p-card-shadow: 0 8px 24px #232c4b12; } html { color-scheme: dark; scrollbar-color: #46506b transparent; } html[data-theme="light"] { color-scheme: light; scrollbar-color: #a3adc7 transparent; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body::before { content:""; position:fixed; top:0; left:0; right:0; height:2px; background:var(--p-spectrum); z-index:61; opacity:.8; pointer-events:none; } ::selection { background:#7460b6; color:#fff; } h1,h2,h3 { font-feature-settings:"ss01" on; } h1 { font-weight:780; letter-spacing:-1.5px; } h2 { font-weight:730; } a,button,input,textarea,select { touch-action:manipulation; } button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:4px; } .button { min-height:42px; border-radius:11px; border-color:var(--p-line); box-shadow:0 1px 0 #ffffff05 inset; font-weight:650; } .button.primary { background:var(--p-brand); color:#fff; border:1px solid #b9a4ff40; box-shadow:0 6px 18px #5134a02e,0 1px 0 #ffffff18 inset; } .button.primary:hover:not(:disabled) { background:var(--p-brand-hover); filter:none; } .button.ghost { background:#ffffff04; } .button.danger { color:var(--danger); background:color-mix(in srgb,var(--danger) 7%,var(--surface)); } .icon-button { border-radius:10px; width:38px; height:38px; color:var(--muted); } .icon-button:hover,.icon-button.active { color:var(--accent); background:var(--surface-2); } .icon-button svg,.volume-symbol svg { width:19px; height:19px; display:block; } .avatar { background:linear-gradient(145deg,#58488a,#252f56); color:#f1e9ff; border-color:#beacf34d; } [data-theme="light"] .avatar { background:#e5defa; color:#54318e; border-color:#9677c544; } .eyebrow { color:var(--p-violet); letter-spacing:2px; font-size:10px; line-height:1.6; } .muted { color:var(--muted); } /* Navigation: calm surfaces, one obvious current location. */ .sidebar { background:linear-gradient(180deg,var(--sidebar),color-mix(in srgb,var(--sidebar) 95%,#544898)); padding:27px 16px 18px; scrollbar-width:thin; } .sidebar .jh-brand-wrap { margin:3px 8px 24px; flex-shrink:0; } .sidebar .jh-mark { width:43px; height:43px; flex-basis:43px; } .sidebar .jh-brand .jh-tagline { font-size:6.3px; letter-spacing:1.18px; } .jh-brand-wrap .jh-wordmark { font-weight:830; font-size:27px; letter-spacing:-1px; } .sidebar .nav-label { margin:18px 14px 10px; font-size:9px; color:var(--muted); opacity:.9; } .sidebar nav { gap:4px; } .sidebar nav a,.nav-signout { position:relative; min-height:43px; padding:10px 13px; font-size:12.5px; letter-spacing:.05px; border:1px solid transparent; } .sidebar nav a.active { background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 12%,var(--sidebar)),color-mix(in srgb,var(--accent) 3%,var(--sidebar))); border-color:color-mix(in srgb,var(--accent) 19%,transparent); } .sidebar nav a.active::before { content:""; position:absolute; left:-1px; top:12px; bottom:12px; width:3px; background:var(--accent); border-radius:4px; } .sidebar nav a[data-nav="studio"] svg { color:var(--p-violet); } .sidebar nav a[data-nav="studio"].active svg { color:var(--accent); } .nav-new { margin-left:auto; padding:2px 5px; font-size:8px; letter-spacing:.55px; background:color-mix(in srgb,var(--p-violet) 11%,transparent); color:var(--p-violet); border-radius:4px; } .sidebar-bottom { padding:20px 6px 0; gap:11px; } .side-credit { position:relative; padding:14px 15px; border-radius:13px; background:linear-gradient(125deg,color-mix(in srgb,var(--p-violet) 6%,var(--surface)),var(--surface)); border-color:var(--p-line); } .side-credit::before { content:""; height:2px; position:absolute; top:0; left:14px; right:14px; background:var(--p-spectrum); opacity:.6; } .side-credit>span { font-size:8px; letter-spacing:1.65px; } .side-credit strong { margin:5px 0; font-size:21px; letter-spacing:-.5px; font-variant-numeric:tabular-nums; } .side-credit a { color:var(--p-violet); font-size:10px; } .sidebar-bottom>.quiet-link { font-size:10px; } .sidebar-bottom>.version { font-size:8px; line-height:1.6; letter-spacing:.8px; color:var(--muted); } .nav-divider { margin:13px 10px; } /* Header + reading area. */ .workspace { background:radial-gradient(ellipse 80% 350px at 75% 0,color-mix(in srgb,var(--p-violet) 5%,transparent),transparent),var(--bg); min-height:100vh; } .topbar { height:82px; padding:0 32px; gap:18px; background:var(--p-surface-glass); border-color:var(--border); backdrop-filter:blur(18px); } .global-search { max-width:720px; min-height:43px; padding:7px 15px; border-radius:13px; background:var(--p-input); border-color:var(--p-line); gap:11px; box-shadow:0 1px 0 #ffffff03 inset; } .global-search>span { display:flex; } .global-search svg { width:20px; height:20px; color:var(--muted); } .global-search input { font-size:12px; } .global-search input::placeholder { color:var(--muted); opacity:.8; } .global-search kbd { color:var(--muted); background:var(--surface); font-size:10px; padding:3px 6px; border-radius:5px; } .topbar-actions { gap:11px; } .topbar-actions .primary { padding:9px 17px!important; min-height:40px; } #view { max-width:var(--p-content-max); padding:32px 36px 48px; margin:0 auto; } .page-header { padding-top:6px; margin-bottom:27px; } .page-header h1 { font-size:clamp(28px,3vw,39px); letter-spacing:-1.25px; } .page-header .muted { line-height:1.7; font-size:13px; } /* Hero: original music as a vinyl/spectrum object, not a synthetic content listing. */ .hero.premium-hero { display:grid; grid-template-columns:minmax(0,1.38fr) minmax(270px,1fr); min-height:320px; padding:35px 39px; margin-bottom:19px; border-radius:23px; gap:12px; background:radial-gradient(ellipse 60% 110% at 100% 20%,#6940aa42,transparent 75%),radial-gradient(ellipse 65% 140% at 90% 100%,#14697745,transparent 70%),linear-gradient(110deg,#191b35,#111728 68%,#19223c); border-color:#ac9ee932; box-shadow:0 16px 40px #0000001c; } .hero.premium-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.12; background-image:radial-gradient(#d4c3ff 0.65px,transparent .75px); background-size:18px 18px; mask-image:linear-gradient(to right,transparent 50%,#000); } .hero.premium-hero::after { content:""; position:absolute; left:37px; right:37px; top:0; height:1px; width:auto; border:0; border-radius:0; box-shadow:none; background:var(--p-spectrum); opacity:.65; } .hero.premium-hero .hero-copy { z-index:1; max-width:610px; width:100%; flex:unset; } .hero.premium-hero .eyebrow { display:flex; align-items:center; gap:8px; color:#d8cbff; font-size:9px; letter-spacing:1.75px; margin-bottom:16px; } .edition-dot { width:5px; height:5px; border-radius:50%; background:#c7aeff; display:inline-block; box-shadow:0 0 0 4px #bb96ff14; } .hero.premium-hero h1 { font-size:clamp(31px,3.75vw,53px); letter-spacing:-1.85px; line-height:1.1; max-width:660px; color:#faf7ff; } .hero.premium-hero h1>span { background:linear-gradient(95deg,#c6b4ff,#b5c9ff 55%,#8ce1d6); color:#cabaff; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero.premium-hero p { font-size:12.5px; color:#bfc6de; max-width:405px; line-height:1.8; margin:15px 0 20px; } .hero.premium-hero .hero-meta { position:static; display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; } .hero.premium-hero .hero-meta .button { padding:11px 16px; font-size:12px; } .hero.premium-hero .hero-meta .button.ghost { background:#ffffff07; color:#eef0ff; border-color:#c7c2ff32; } .hero.premium-hero .hero-meta .button.ghost:hover { background:#ffffff13; } .hero.premium-hero p.hero-footnote { font-size:10px!important; margin:21px 0 0!important; max-width:none; color:#acb5d1; opacity:1; letter-spacing:.12px; } .publication-count { color:#f0e7ff; font-variant-numeric:tabular-nums; font-weight:700; } .footnote-divider { padding:0 9px; color:#8b86a7; } .premium-scene { position:relative; height:270px; width:100%; display:grid; place-items:center; isolation:isolate; } .spectrum-record { height:245px; width:245px; position:relative; border-radius:50%; background:conic-gradient(from 40deg,#141724,#6c789356 13%,#121627 27%,#101421 46%,#674b754d 62%,#111524 78%,#343c565c 91%,#141724); box-shadow:0 24px 50px #020510a6,0 0 0 1px #e4d6ff28,0 0 28px #a266d50c; } .spectrum-record::before { content:""; position:absolute; inset:-4px; border-radius:50%; padding:2px; background:conic-gradient(from 20deg,#af8cff,#f59ac2,#f4d393,#77e5cf,#7dbeff,#af8cff); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; opacity:.8; } .record-grooves { position:absolute; inset:9px; border-radius:50%; background:repeating-radial-gradient(circle at center,transparent 0px,transparent 3px,#c5d0ec12 3.7px,transparent 4.5px); } .record-label { position:absolute; inset:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:radial-gradient(circle at 35% 15%,#38335f,#161d37 78%); border:1px solid #b6d6f238; box-shadow:0 2px 18px #050913a6; } .label-top,.label-bottom { font-weight:600; color:#c4bee4; letter-spacing:1.8px; font-size:6px; line-height:1.7; } .label-bottom { font-size:4.7px; letter-spacing:1.2px; opacity:.8; } .record-wave { height:58px; width:94px; margin:6px 0; display:flex; align-items:center; justify-content:center; gap:3px; } .record-wave i { display:block; height:var(--bar-height); width:5px; border-radius:5px; background:#c5b0ff; transform:scaleY(.87); } .record-wave i:nth-child(1),.record-wave i:nth-child(2) { background:#f39cc8; } .record-wave i:nth-child(3),.record-wave i:nth-child(4) { background:#eac799; } .record-wave i:nth-child(5),.record-wave i:nth-child(6) { background:#b2e2b2; } .record-wave i:nth-child(7),.record-wave i:nth-child(8) { background:#86dfde; } .record-wave i:nth-child(9),.record-wave i:nth-child(10) { background:#9bbfff; } .scene-orbit { position:absolute; height:286px; width:286px; border:1px solid #c5c4ff1a; border-radius:50%; transform:rotate(-22deg) scaleY(.79); z-index:-1; } .scene-orbit-two { width:338px; height:338px; transform:rotate(36deg) scaleY(.66); border-color:#95e4ec16; } .scene-satellite { position:absolute; width:9px; height:9px; border-radius:50%; box-shadow:0 0 20px currentColor; } .satellite-one { color:#c29bff; background:#c29bff; top:12px; right:22%; } .satellite-two { color:#87ded6; background:#87ded6; bottom:43px; left:10%; height:5px; width:5px; } .scene-caption { position:absolute; bottom:-13px; font-size:6.5px; letter-spacing:2px; color:#b2bad6; display:flex; align-items:center; gap:7px; white-space:nowrap; } .scene-caption span { width:22px; height:1px; background:var(--p-spectrum); } html[data-jh-motion="on"][data-jh-playing="true"] .record-wave i { animation:p-wave 1.65s ease-in-out infinite; animation-delay:calc(var(--bar-index) * -0.17s); } html[data-jh-motion="on"][data-jh-playing="true"] .record-grooves { animation:p-record 34s linear infinite; } @keyframes p-record { to { transform:rotate(360deg); } } @keyframes p-wave { 0%,100% { transform:scaleY(.55); } 45% { transform:scaleY(1); } 70% { transform:scaleY(.72); } } html[data-jh-visible="hidden"] .record-wave i,html[data-jh-visible="hidden"] .record-grooves { animation-play-state:paused!important; } /* Tool shortcuts use real routes; their colors identify purpose, not availability. */ nav.music-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 32px; padding:0; } nav.music-shortcuts a { display:flex; min-width:0; min-height:78px; align-items:center; gap:11px; border-radius:13px; border:1px solid var(--border); background:var(--surface); padding:13px 14px; transition:background .2s,border-color .2s,transform .2s; } nav.music-shortcuts a:hover { border-color:color-mix(in srgb,var(--shortcut-color) 45%,var(--border)); background:color-mix(in srgb,var(--shortcut-color) 5%,var(--surface)); transform:translateY(-2px); } .shortcut-create { --shortcut-color:var(--p-violet); } .shortcut-voice { --shortcut-color:var(--p-cyan); } .shortcut-video { --shortcut-color:var(--p-rose); } .shortcut-flow { --shortcut-color:var(--p-gold); } .shortcut-icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid color-mix(in srgb,var(--shortcut-color) 20%,transparent); background:color-mix(in srgb,var(--shortcut-color) 9%,transparent); color:var(--shortcut-color); flex-shrink:0; border-radius:11px; } .music-shortcut>span:nth-child(2) { min-width:0; } .music-shortcut small { display:block; color:var(--muted); letter-spacing:1.3px; font-size:7px; margin-bottom:4px; white-space:nowrap; } .music-shortcut strong { display:block; font-size:11px; color:var(--text); letter-spacing:0; line-height:1.4; } nav.music-shortcuts .shortcut-icon svg { width:18px; height:18px; } nav.music-shortcuts a>svg { margin-left:auto; color:var(--muted); opacity:.65; width:14px; height:14px; } /* Catalog: record sleeves + clear track and artist text. No decorative fake tracks. */ .section { margin:30px 0 34px; } .section-head { margin-bottom:18px; align-items:center; gap:12px; } .section-head h2 { font-size:21px; letter-spacing:-.5px; } .section-head>a { color:var(--muted); font-size:11px; font-weight:600; border-bottom:1px solid transparent; } .section-head>a:hover { color:var(--text); border-color:var(--p-violet); } .track-grid { grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:23px 20px; } .track-card { padding:9px 9px 11px; margin:-9px; border:1px solid transparent; border-radius:18px; transition:background .18s,border-color .18s; } .track-card:hover,.track-card:focus-within { background:var(--surface); border-color:var(--border); } .track-card .art-button { border-radius:14px; box-shadow:var(--p-card-shadow); } .track-card .art { border-radius:14px; transition:transform .35s; } .track-card:hover .art,.track-card:focus-within .art { transform:scale(1.035); } .track-card h3 { font-size:13px; margin-top:11px; font-weight:680; } .track-card p,.track-card .card-meta { font-size:10px; color:var(--muted); } .card-play { background:#f4f1ff; color:#31224f; border:1px solid #ffffffa0; box-shadow:0 8px 20px #0006; } .track-card:focus-within .card-play { opacity:1; transform:none; } .art-0 { background:linear-gradient(145deg,#165a66,#242c58); } .art-1 { background:linear-gradient(145deg,#a15378,#32204c); } .art-2 { background:linear-gradient(145deg,#497bbc,#242653); } .art-3 { background:linear-gradient(145deg,#7454a9,#27355e); } .art-4 { background:linear-gradient(145deg,#997744,#28545f); } .art-5 { background:linear-gradient(145deg,#237a75,#3f3665); } .premium-featured .track-grid { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } .premium-featured .track-card { display:grid; grid-template-columns:88px minmax(0,1fr); column-gap:18px; padding:18px; margin:0; background:linear-gradient(120deg,color-mix(in srgb,var(--p-violet) 6%,var(--surface)),var(--surface)); border-color:var(--p-line); align-content:center; } .premium-featured .art-button { grid-row:1/5; } .premium-featured .track-card h3 { margin-top:10px; } .premium-featured .card-meta { align-self:start; } .track-row { border-radius:10px; border-bottom-color:var(--border); } .track-row:hover { background:color-mix(in srgb,var(--p-violet) 5%,var(--surface)); } .row-title .text-button { font-weight:650; } .source-label { letter-spacing:1.25px; color:var(--muted); font-size:7px; } /* Each mood has a deliberate mini artwork, with text contrast kept independent. */ .mood-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .mood-tile { --mood-color:#b49cfa; position:relative; min-height:141px; overflow:hidden; isolation:isolate; padding:20px; border-radius:15px; border:1px solid color-mix(in srgb,var(--mood-color) 27%,transparent); background:linear-gradient(145deg,color-mix(in srgb,var(--mood-color) 16%,#151a2c),#13192b); color:#fff; } .mood-tile::after { content:""; position:absolute; width:150px; height:150px; right:-48px; top:-60px; border:1px solid color-mix(in srgb,var(--mood-color) 35%,transparent); border-radius:50%; box-shadow:0 0 0 16px color-mix(in srgb,var(--mood-color) 4%,transparent),0 0 0 33px color-mix(in srgb,var(--mood-color) 3%,transparent); z-index:-1; } .mood-tile>span:not(.mood-wave):not(.mood-number) { font-size:7px; color:#c0c8df; letter-spacing:1.65px; } .mood-tile strong { font-size:19px; line-height:1.3; letter-spacing:-.3px; margin:8px 0 14px; max-width:78%; color:#fff; } .mood-tile small { display:flex; align-items:center; gap:7px; font-size:9px; color:#c3cbe0; } .mood-tile small svg { width:12px; height:12px; } .mood-number { position:absolute; top:18px; right:15px; font-size:10px; font-weight:600; color:var(--mood-color); opacity:.85; font-variant-numeric:tabular-nums; } .mood-wave { position:absolute; display:flex!important; gap:4px; align-items:center; height:48px; bottom:20px; right:16px; opacity:.35; z-index:-1; } .mood-wave i { display:block; width:3px; height:var(--mood-height); background:var(--mood-color); border-radius:4px; } .mood-energy { --mood-color:#ffae85; } .mood-chill { --mood-color:#8cdbc9; } .mood-focus { --mood-color:#9cbdff; } .mood-drive { --mood-color:#c497ff; } .mood-dream { --mood-color:#efa5d0; } .mood-party { --mood-color:#ffd784; } .mood-dark { --mood-color:#a5a7e8; } .mood-sleep { --mood-color:#80c5d6; } .mood-tile:hover { background:linear-gradient(145deg,color-mix(in srgb,var(--mood-color) 23%,#151a2c),#181d33); border-color:var(--mood-color); } /* Editor, media pages and forms share one surface hierarchy. */ .panel,.studio-editor,.flow-control,.provider-card { background:var(--surface); border-color:var(--p-line); border-radius:18px; box-shadow:0 1px 0 #ffffff04 inset; } .panel>h2,.panel>h3 { letter-spacing:-.3px; } label { font-size:12px; font-weight:600; letter-spacing:.1px; } label small,.field-hint { color:var(--muted); font-size:11px; line-height:1.65; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea { background:var(--p-input); border-color:var(--p-line); color:var(--text); border-radius:10px; min-height:43px; font-size:13px; } input::placeholder,textarea::placeholder { color:var(--muted); opacity:.73; } .global-search input:not([type="checkbox"]) { background:none; border:0; min-height:27px; font-size:12px; } textarea { padding:13px 14px; line-height:1.8; } textarea[name="lyrics"],textarea[name="prompt"] { background:linear-gradient(180deg,color-mix(in srgb,var(--p-violet) 3%,var(--p-input)),var(--p-input)); } input[type="checkbox"],input[type="radio"],progress { accent-color:var(--accent); } input[type="color"] { background:var(--surface-2); border:1px solid var(--p-line); border-radius:8px; } fieldset { min-width:0; } .form-stack details { border-color:var(--border); } .form-stack details summary { padding:8px 0; color:var(--p-violet); } nav.creator-tabs { border-bottom:1px solid var(--border); padding-bottom:14px; gap:7px; } nav.creator-tabs a { min-height:42px; border:1px solid var(--border); background:var(--surface); border-radius:12px; font-size:12px; } nav.creator-tabs a.active { background:var(--p-brand); color:#fff; border-color:#b9a4ff55; } .tabs { gap:5px; } .tab { border-radius:9px; border:1px solid transparent; } .tab.active,.tab[aria-selected="true"] { background:color-mix(in srgb,var(--p-violet) 11%,var(--surface)); color:var(--p-violet); border-color:color-mix(in srgb,var(--p-violet) 25%,transparent); } .studio-editor { padding:27px; border-top:2px solid #9b80d466; } .studio-submit { padding-top:20px; border-top:1px solid var(--border); gap:15px; } .studio-cost { color:var(--muted); font-variant-numeric:tabular-nums; } .studio-results .job-card { border-color:var(--p-line); background:var(--surface); border-radius:14px; } .creator-orb { border-radius:17px; width:58px; height:58px; background:linear-gradient(145deg,#8b5cf622,#43c8d31c); border-color:var(--p-line); } .verification-phrase { background:color-mix(in srgb,var(--p-violet) 6%,var(--surface)); border-color:var(--p-violet); border-radius:0 12px 12px 0; } .video-mockup { border:1px solid var(--p-line); box-shadow:0 16px 45px #0003; } .render-item { border-color:var(--border); } .pricing-card { position:relative; overflow:hidden; border-color:var(--p-line); } .pricing-card::before { content:""; height:2px; position:absolute; left:20px; right:20px; top:0; background:var(--p-spectrum); opacity:.75; } .plan-price { font-size:40px; letter-spacing:-1.7px; color:var(--text); } .song-hero { gap:28px; } .song-cover { box-shadow:0 20px 48px #0004,0 0 0 1px var(--border); } .song-info h1 { font-size:clamp(27px,3.2vw,44px); letter-spacing:-1.5px; } .song-info .eyebrow { color:var(--p-cyan); } .artist-link { font-size:16px; } .creator-toolbar { gap:9px; } .creator-toolbar .button { font-size:11px; min-height:41px; } .lyrics-panel { border-top:2px solid #c78bcb55; scrollbar-width:thin; } .lyrics-sheet { line-height:2; font-size:14px; } .tag-list .badge { border-color:var(--p-line); background:var(--surface); } .comment { border-color:var(--border); } .flow-hero { background:radial-gradient(ellipse at 80% 15%,#24a2a436,transparent 65%),linear-gradient(130deg,#242345,#202f48); border:1px solid #aaace033; box-shadow:var(--p-card-shadow); } .flow-hero::before { opacity:.12; color:#bdc2ff; } .empty-state { border:1px dashed var(--p-line); background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--p-violet) 4%,transparent),transparent 65%),var(--surface); border-radius:16px; } .empty-symbol { width:48px; height:48px; border-radius:16px; color:var(--p-violet); background:color-mix(in srgb,var(--p-violet) 10%,transparent); } .empty-state p { font-size:12px; } /* Admin: restrained data panels, no neon status ambiguity. */ .stats-row { gap:16px; } .stat { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--p-line); border-radius:15px; } .stat::before { content:""; position:absolute; height:2px; left:21px; right:21px; top:0; background:var(--p-violet); opacity:.8; } .stat:nth-child(2)::before { background:var(--p-cyan); } .stat:nth-child(3)::before { background:var(--p-gold); } .stat:nth-child(4)::before { background:var(--p-rose); } .stat strong { font-variant-numeric:tabular-nums; font-size:31px; letter-spacing:-1px; } .table-wrap { border-radius:12px; border-color:var(--border); } th { color:var(--muted); background:var(--p-input); font-size:10px; letter-spacing:.6px; } td { border-color:var(--border); } tr:hover td { background:color-mix(in srgb,var(--p-violet) 3%,var(--surface)); } .notice { line-height:1.7; border-radius:12px; } .notice.danger { color:var(--danger); background:color-mix(in srgb,var(--danger) 6%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 25%,var(--border)); } .notice.warning { color:var(--warning); background:color-mix(in srgb,var(--warning) 5%,var(--surface)); border-color:color-mix(in srgb,var(--warning) 25%,var(--border)); } .notice.success { color:var(--p-cyan); background:color-mix(in srgb,var(--p-cyan) 6%,var(--surface)); border-color:color-mix(in srgb,var(--p-cyan) 25%,var(--border)); } /* Persistent player. The tiny bars indicate play/pause, not a measured spectrum. */ .player { background:var(--p-player); height:var(--player-height); padding:13px 25px; grid-template-columns:minmax(180px,1fr) minmax(270px,1.25fr) minmax(185px,1fr); gap:22px; border-top:1px solid var(--p-line); box-shadow:0 -12px 36px #03061016; } .player::before { content:""; position:absolute; top:-1px; height:1px; left:0; right:0; background:var(--p-spectrum); opacity:.3; pointer-events:none; } .mini-art { width:52px; height:52px; border-radius:12px; border:1px solid var(--border); box-shadow:0 4px 15px #0002; } .mini-art>svg { width:22px; height:22px; } .now-copy strong { font-size:12px; letter-spacing:.05px; } .now-copy span { font-size:10px; } .transport-buttons { gap:17px; } .play-main { display:grid; place-items:center; height:41px; width:41px; background:#ede8fc; color:#24213b; border:1px solid #fff9; box-shadow:0 3px 18px #ad8aff15; } .play-main:hover { background:#fff; transform:scale(1.04); } .play-main svg { width:20px; height:20px; } .play-main svg path { stroke-width:2; } .player .icon-button { width:31px; height:31px; } .player .icon-button.active { color:var(--p-cyan); } #now-like.active svg { fill:currentColor; } .player-right { gap:8px; justify-content:flex-end; } .volume-symbol { color:var(--muted); display:flex; } .player-right .source-label { font-size:6.5px; letter-spacing:1px; white-space:nowrap; } .player-signal { width:15px; height:16px; display:flex; gap:2px; align-items:center; color:var(--p-cyan); opacity:.7; } .player-signal i { width:2px; height:5px; background:currentColor; border-radius:1px; } .player-signal i:nth-child(2),.player-signal i:nth-child(4) { height:10px; } .player-signal i:nth-child(3) { height:15px; } html[data-jh-motion="on"][data-jh-playing="true"] .player-signal i { animation:p-wave 1.3s ease-in-out infinite; } .player-signal i:nth-child(2) { animation-delay:-.3s!important; } .player-signal i:nth-child(3) { animation-delay:-.7s!important; } .player-signal i:nth-child(4) { animation-delay:-.45s!important; } html[data-jh-visible="hidden"] .player-signal i { animation-play-state:paused!important; } .seek { gap:10px; margin-top:8px; } .seek time { color:var(--muted); font-size:9px; font-variant-numeric:tabular-nums; } #seek,#volume { appearance:none; -webkit-appearance:none; height:4px; min-height:4px; border:0; padding:0; border-radius:9px; cursor:pointer; background:linear-gradient(to right,var(--p-violet) 0%,var(--p-cyan) var(--range-progress,0%),var(--hover) var(--range-progress,0%),var(--hover) 100%); } #volume { max-width:82px; --range-progress:80%; } #seek::-webkit-slider-thumb,#volume::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:11px; height:11px; background:var(--text); border:2px solid var(--surface-2); border-radius:50%; box-shadow:0 0 0 1px var(--p-line); } #seek::-moz-range-thumb,#volume::-moz-range-thumb { width:9px; height:9px; background:var(--text); border:2px solid var(--surface-2); border-radius:50%; box-shadow:0 0 0 1px var(--p-line); } #seek::-moz-range-track,#volume::-moz-range-track { background:transparent; border:0; } .queue-drawer { background:var(--surface); border-color:var(--p-line); border-radius:18px; box-shadow:var(--shadow); } .queue-drawer header { margin-bottom:14px; } .queue-item { border-radius:10px; } .queue-item.active { background:color-mix(in srgb,var(--p-violet) 12%,var(--surface)); } dialog { border:1px solid var(--p-line); border-radius:21px; background:var(--surface); box-shadow:var(--shadow); max-width:min(760px,calc(100vw - 28px)); max-height:calc(100dvh - 40px); } dialog::backdrop { background:#060913bb; backdrop-filter:blur(5px); } .toast { background:var(--surface-2); color:var(--text); border:1px solid var(--p-line); border-radius:13px; box-shadow:var(--shadow); } /* Public release pages and the sign-in room. */ .public-header { max-width:1360px; background:var(--p-surface-glass); } .public-main { max-width:1360px; padding-top:45px; } .public-footer { max-width:1360px; border-color:var(--p-line); } .public-header .jh-mark { width:39px; height:39px; flex-basis:39px; } .auth-layout { background:var(--bg); } .auth-story { background:radial-gradient(ellipse at 5% 90%,#22778445,transparent 60%),radial-gradient(ellipse at 100% 10%,#8560c553,transparent 60%),linear-gradient(135deg,#151a32,#18162b); padding:42px 50px; } .auth-story::after { content:""; position:absolute; inset:18px; border:1px solid #c8b6ff1f; border-radius:20px; pointer-events:none; } .auth-story .jh-brand-wrap { z-index:2; } .auth-message h1 { font-size:clamp(40px,4.3vw,64px); font-weight:770; line-height:1.13; letter-spacing:-2.7px; } .auth-message h1 em { color:#bcbbff; background:linear-gradient(110deg,#d5b6ff,#9fcdfa,#93ddd4); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .auth-message .eyebrow { color:#cfc3ed; font-size:8px; } .auth-message p { font-size:13px; color:#b7c2dc; } .record-visual { width:320px; height:320px; right:-125px; bottom:-35px; opacity:.6; background:repeating-radial-gradient(circle at center,transparent 0px,transparent 3px,#d6baff14 4px,transparent 5px),conic-gradient(from 30deg,#1e2543,#4d496152 12%,#1a2032 27%,#3a334f 57%,#131d35 77%,#323953 94%,#1e2543); border:2px solid #ad90de5e; box-shadow:0 0 0 17px #b9a0f607,0 0 0 42px #8295bc08; } .record-center { background:var(--p-brand); color:#f3e7ff; border:1px solid #d2b1f666; } .auth-form-panel { background:var(--bg); } .auth-form { max-width:390px; } .auth-form h2 { font-size:31px; letter-spacing:-1px; } .auth-form .eyebrow { color:var(--p-violet); font-size:8px; } .auth-form .muted { font-size:13px; } .auth-form .button.primary { min-height:46px; } .auth-caption,.auth-legal { color:#a9b4d0; font-size:9px; letter-spacing:1px; } .auth-footer { border-color:var(--border); color:var(--muted); gap:12px; font-size:10px; } [data-theme="light"] .premium-hero { box-shadow:0 14px 34px #36345522; } [data-theme="light"] .empty-state { background:var(--surface); } [data-theme="light"] .jh-wordmark { filter:saturate(1.05); } [data-theme="light"] .auth-story .eyebrow { color:#d6c7f4; } /* Narrow layouts. Preserve every action, including theme, lyrics and queue. */ @media(min-width:1600px) { :root { --sidebar-width:260px; } .sidebar { padding-left:20px; padding-right:20px; } #view { padding:38px 45px 50px; } .hero.premium-hero { min-height:350px; padding:43px 47px; } .track-grid { grid-template-columns:repeat(auto-fill,minmax(174px,1fr)); } .premium-scene { height:290px; } .spectrum-record { height:270px; width:270px; } .record-label { inset:63px; } } @media(max-width:1190px) { :root { --sidebar-width:218px; } .sidebar { padding-left:12px; padding-right:12px; } .sidebar .jh-brand-wrap { margin-left:5px; } .sidebar .jh-brand .jh-tagline { font-size:5.7px; } .sidebar nav a { font-size:12px; padding-left:10px; gap:10px; } .sidebar .jh-mark { width:38px; height:38px; flex-basis:38px; } .sidebar .jh-wordmark { font-size:25px; } .topbar { padding:0 23px; gap:13px; } #view { padding:27px 27px 42px; } .hero.premium-hero { padding:31px 29px; grid-template-columns:minmax(0,1.5fr) minmax(200px,1fr); min-height:310px; } .hero.premium-hero h1 { font-size:39px; } .spectrum-record { width:199px; height:199px; } .record-label { inset:43px; } .record-wave { width:79px; height:49px; gap:2px; } .record-wave i { width:4px; } .label-top { font-size:5px; } .label-bottom { font-size:4px; } .premium-scene { height:215px; } .scene-orbit { width:238px; height:238px; } .scene-orbit-two { width:255px; height:255px; } .scene-caption { font-size:5.4px; bottom:-13px; } nav.music-shortcuts { gap:8px; } nav.music-shortcuts a { gap:8px; padding:12px 10px; } .music-shortcut strong { font-size:10px; } .music-shortcut small { font-size:6.5px; letter-spacing:1px; } nav.music-shortcuts a>svg { display:none; } .shortcut-icon { width:30px; height:34px; } .mood-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .player-right .source-label,.player-signal { display:none; } .player { grid-template-columns:minmax(150px,1fr) minmax(250px,1.25fr) minmax(135px,.7fr); gap:16px; padding:13px 21px; } .now { gap:9px; } .transport-buttons { gap:13px; } .song-hero { flex-direction:column; align-items:flex-start; } } @media(max-width:900px) { :root { --sidebar-width:245px; } .sidebar { padding:26px 16px 20px; } .sidebar .jh-mark { width:43px; height:43px; flex-basis:43px; } .sidebar .jh-wordmark { font-size:28px; } .sidebar nav a { font-size:13px; min-height:44px; } .sidebar .jh-brand .jh-tagline { font-size:6.5px; } .topbar { height:72px; padding:0 20px; } #view { padding:25px 24px 42px; } .player { grid-template-columns:minmax(145px,1fr) minmax(245px,1.25fr) minmax(83px,.5fr); padding:12px 20px; } .player-right { display:flex; } .player-right #volume,.volume-symbol { display:none; } .player-right .icon-button { display:inline-flex; } .hero.premium-hero h1 { font-size:42px; } .hero.premium-hero { grid-template-columns:minmax(0,1.35fr) minmax(220px,1fr); } .auth-story { padding:35px; } } @media(max-width:700px) { .hero.premium-hero { grid-template-columns:minmax(0,1fr) 175px; padding:29px 25px; } .hero.premium-hero h1 { font-size:35px; } .hero.premium-hero .hero-meta .button { font-size:11px; padding:10px 12px; } .premium-scene { width:190px; margin-left:-10px; } .spectrum-record { width:174px; height:174px; } .record-label { inset:34px; } .scene-orbit { width:198px; height:198px; } .scene-orbit-two { width:225px; height:225px; } .scene-caption { display:none; } nav.music-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); } nav.music-shortcuts a { min-height:72px; padding:13px 15px; gap:13px; } .music-shortcut strong { font-size:12px; } .music-shortcut small { font-size:7px; } .shortcut-icon { width:35px; height:35px; } nav.music-shortcuts a>svg { display:block; } .mood-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .mood-tile { min-height:136px; } .song-hero { flex-direction:column; } .song-cover,.public-main .song-cover { width:min(100%,330px); height:auto; aspect-ratio:1; } .lyrics-panel { max-height:none; } } @media(max-width:660px) { :root { --player-height:124px; } .topbar { height:68px; padding:0 11px; gap:7px; } .topbar>.icon-button { width:33px; } .topbar-actions { gap:4px; } .topbar-actions #theme-toggle { display:inline-flex; width:29px; } .topbar-actions .primary { padding:8px 10px!important; min-height:35px; font-size:11px; gap:3px; } .topbar-actions .primary svg { width:14px; } .topbar-actions .avatar { height:30px; width:30px; } .global-search { min-height:37px; border-radius:10px; padding:5px 9px; } .global-search input:not([type="checkbox"]) { font-size:11px; min-height:25px; } .global-search>span { display:none; } #view { padding:22px 17px 35px; } .hero.premium-hero { display:block; min-height:0; padding:28px 25px 24px; border-radius:18px; } .hero.premium-hero::after { left:25px; right:25px; } .hero.premium-hero .eyebrow { font-size:7.5px; letter-spacing:1.4px; margin-bottom:18px; } .hero.premium-hero h1 { font-size:clamp(31px,8.3vw,43px); letter-spacing:-1.4px; max-width:100%; } .hero.premium-hero p { font-size:12px; max-width:90%; } .hero.premium-hero .hero-meta { gap:8px; } .hero.premium-hero .hero-meta .button { min-height:41px; font-size:10px; padding:10px 11px; } .hero.premium-hero .hero-meta .button svg { width:14px; } .hero.premium-hero p.hero-footnote { font-size:8.5px!important; line-height:1.8; margin-top:18px!important; max-width:100%; } .footnote-divider { padding:0 5px; } .premium-scene { display:none; } .hero.premium-hero::before { opacity:.10; mask-image:linear-gradient(to right,transparent 25%,#000); } nav.music-shortcuts { margin-bottom:27px; gap:9px; } nav.music-shortcuts a { padding:12px; gap:10px; min-height:69px; border-radius:12px; } .music-shortcut strong { font-size:11px; } nav.music-shortcuts a>svg { width:12px; } .shortcut-icon { width:32px; height:32px; border-radius:10px; } .section { margin:28px 0; } .section-head { margin-bottom:16px; } .section-head h2 { font-size:19px; letter-spacing:-.45px; } .section-head>a { font-size:9px; } .track-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px 15px; } .track-card { margin:0; padding:0; border:0; border-radius:14px; } .track-card h3 { font-size:12px; } .track-card:hover { background:transparent; } .track-card .art { border-radius:12px; } .card-play { height:33px; width:33px; } .premium-featured .track-grid { grid-template-columns:1fr; } .premium-featured .track-card { grid-template-columns:73px minmax(0,1fr); padding:14px; gap:13px; } .mood-tile { padding:17px; min-height:129px; } .mood-tile strong { font-size:18px; } .mood-tile small { font-size:8px; } .mood-wave { right:12px; gap:3px; opacity:.23; } .page-header h1 { font-size:29px; } .page-header .muted { font-size:12px; } .panel,.studio-editor { padding:21px; border-radius:16px; } nav.creator-tabs { flex-wrap:wrap; gap:5px; } nav.creator-tabs a { border-radius:10px; min-height:40px; padding:9px 10px; font-size:11px; } .studio-submit { gap:11px; } .song-info h1 { font-size:32px; } .creator-toolbar .button { min-height:41px; font-size:10.5px; padding:10px 12px; } .player { height:var(--player-height); grid-template-columns:1fr; gap:5px; padding:10px 15px; align-content:start; } .now { margin-top:0; padding-right:111px; height:39px; } .now .mini-art { height:38px; width:38px; border-radius:9px; } .mini-art>svg { width:19px; height:19px; } .now-copy strong { font-size:10.5px; } .now-copy span { font-size:9px; } .now>.icon-button { display:none; } .transport { display:contents; } .transport-buttons { top:10px; right:12px; gap:2px; } .transport-buttons .play-main { height:34px; width:34px; } .transport-buttons .icon-button { width:29px; height:33px; } .transport-buttons .icon-button svg { width:16px; height:16px; } .play-main svg { width:17px; height:17px; } .seek { margin-top:7px; gap:9px; } #seek { height:3px; } .player-right { display:flex; position:absolute; left:15px; right:15px; bottom:6px; gap:9px; height:26px; } .player-right .source-label { display:inline; margin-right:auto; font-size:6px; letter-spacing:1.35px; } .player-right .player-signal { display:flex; width:14px; height:13px; margin-right:1px; } .player-right .icon-button,#lyrics-toggle { height:26px; width:30px; font-size:14px; } .player-right .volume-symbol,.player-right #volume { display:none; } .player-right .icon-button svg { width:16px; height:16px; } .queue-drawer { bottom:calc(var(--player-height) + 8px); right:10px; width:calc(100vw - 20px); max-height:calc(100dvh - 215px); } .lyrics-drawer { padding:20px; } .lyrics-sheet { font-size:13px; } dialog { padding:28px 21px; width:calc(100vw - 24px); max-height:calc(100dvh - 30px); } .public-header { padding:16px 20px; gap:16px; } .public-header .inline-actions { gap:7px; } .public-header .button { font-size:10px; padding:9px 10px; min-height:37px; } .public-main { padding:27px 20px; } .public-header .jh-mark { width:32px; height:32px; flex-basis:32px; } .public-header .jh-wordmark { font-size:25px; } .auth-form-panel { padding:36px 26px; } .auth-form { width:100%; } .auth-form h2 { font-size:29px; } .auth-form .jh-mobile-brand { margin-bottom:35px; } .auth-form .jh-wordmark { font-size:31px; } .auth-form .jh-mark { width:46px; height:46px; flex-basis:46px; } .toasts { top:76px; left:13px; right:13px; max-width:calc(100vw - 26px); } } @media(max-width:370px) { .topbar-actions .avatar { display:none; } .hero.premium-hero { padding:25px 20px; } .hero.premium-hero h1 { font-size:29px; } .hero.premium-hero .hero-meta { display:grid; grid-template-columns:1fr; } .hero.premium-hero .hero-meta .button { width:100%; } .hero.premium-hero p.hero-footnote { font-size:8px!important; } .music-shortcut strong { font-size:10px; } nav.music-shortcuts a { padding:10px; gap:7px; } nav.music-shortcuts a>svg { display:none; } .mood-tile strong { font-size:16px; } .mood-tile { padding:15px; } .public-header { padding:17px; } } @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .track-card:hover .art,.track-card:focus-within .art { transform:none; } } @media(forced-colors:active) { body::before,.premium-scene,.mood-wave { display:none; } .hero.premium-hero h1>span,.auth-message h1 em,.jh-wordmark { background:none!important; color:CanvasText!important; -webkit-text-fill-color:CanvasText!important; } .button.primary,.creator-tabs a.active { border:2px solid ButtonText; } .premium-hero,.mood-tile,.panel,.player { background:Canvas!important; color:CanvasText!important; } .hero.premium-hero h1,.hero.premium-hero p,.hero.premium-hero .eyebrow,.mood-tile strong,.mood-tile small { color:CanvasText!important; } } /* Keep the primary action consistent when the old light-theme hero rule is present. */ [data-theme="light"] .premium-hero .button.primary,[data-theme="light"] .flow-hero .button.primary { background:var(--p-brand); color:#fff; } [data-theme="light"] .premium-hero .button.primary:hover,[data-theme="light"] .flow-hero .button.primary:hover { background:var(--p-brand-hover); } /* DeepFlow World 1.2.1 — METALLIC SPECTRUM Common tokens, chrome, typography, controls and responsive media shell. Decorations never intercept input. No runtime remote resources or font downloads. */ @property --df-angle { syntax:""; initial-value:130deg; inherits:false; } :root { --bg:#030508; --sidebar:#05080e; --surface:#0c111b; --surface-2:#121927; --hover:#1a2537; --text:#f4f7ff; --muted:#a9b8cd; --border:#748ba637; --sidebar-width:248px; --player-height:112px; --radius:15px; --p-input:#050a12; --p-surface-glass:#05080ef5; --p-player:#070c15f5; --p-line:#94b5dc3b; --p-content-max:1880px; --p-violet:#cf9bff; --p-cyan:#68edff; --p-rose:#ffa0cc; --p-gold:#ffe296; --p-spectrum:linear-gradient(100deg,#ff80d6,#ffd578 23%,#aff895 40%,#4ff5f1 60%,#669aff 78%,#d884ff); --p-brand:linear-gradient(115deg,#b617ce 0%,#7129e8 40%,#2362e9 75%,#007faa); --p-brand-hover:linear-gradient(115deg,#c62bdb,#8246ed 43%,#3578ed 78%,#1089b0); --df-chrome-top:#111b2a; --df-chrome-bottom:#03060b; --df-inner:#eff5ff12; --df-ring:conic-gradient(from var(--df-angle),#282536 0deg,#43d9ff 35deg,#bccfff 49deg,#151f39 66deg,#544ad1 117deg,#ef64fc 144deg,#2b203a 174deg,#ffb753 222deg,#fff5c8 235deg,#1e3140 256deg,#4bf1dd 295deg,#242c48 335deg,#282536 360deg); --df-glow:0 0 18px #5b48d412,0 9px 32px #0009; --df-white:#f6f9ff; } [data-theme="light"] { --bg:#edf0f7; --sidebar:#f9faff; --surface:#fff; --surface-2:#e7ecf6; --hover:#dae3f3; --text:#122036; --muted:#4d5d74; --border:#58739640; --p-line:#586f8d45; --p-input:#f9fbff; --p-surface-glass:#f4f7fdf7; --p-player:#f0f4fff7; --p-violet:#7733a8; --p-cyan:#00687d; --p-rose:#a32363; --p-gold:#7e510b; --df-chrome-top:#fff; --df-chrome-bottom:#e4eaf5; --df-inner:#fff9; --df-glow:0 0 17px #8660ba14,0 8px 24px #29436614; --df-ring:conic-gradient(from var(--df-angle),#667da35c,#1091c5,#4d56af 73deg,#b034b5 145deg,#cab88d 220deg,#118488 285deg,#667da35c); } html { scrollbar-color:#384960 var(--bg); } body { background:var(--bg); } body::before { background:var(--p-spectrum); opacity:.45; height:1px; } .workspace { background:radial-gradient(ellipse 45% 240px at 48% 0,#553d7a20,transparent),var(--bg); } #view { max-width:var(--p-content-max); padding:20px 24px 50px; } .section { margin-top:25px; } .section-head { margin-bottom:14px; } .section-head h2 { font-size:clamp(19px,1.55vw,24px); letter-spacing:-.55px; } .section-head>a { font-size:12px; color:var(--muted); } .page-header { margin-bottom:24px; padding-top:14px; } .page-header h1 { font-size:clamp(27px,2.5vw,39px); letter-spacing:-1.1px; } .page-header .eyebrow { color:var(--p-cyan); } /* Shared non-blocking metal edges; only prominent surfaces animate continuously. */ .df-rgb-edge,.global-search,.side-credit,.df-creator-link, .sidebar nav a.active,.music-shortcut,.player,.premium-hero { --df-angle:130deg; border:1px solid transparent; background:linear-gradient(155deg,var(--df-chrome-top),var(--df-chrome-bottom) 60%) padding-box,var(--df-ring) border-box; box-shadow:inset 0 1px 0 var(--df-inner),var(--df-glow); } @keyframes df-chrome { to { --df-angle:490deg; } } .player,.hero.premium-hero,.sidebar nav a.active,.music-shortcut:hover,.button.primary:hover,.df-rgb-edge:hover { animation:df-chrome 16s linear infinite; } .df-rgb-edge { border-radius:var(--radius); } .panel,.list-card,.job-card,.metric,.stat-card,.price-card,.voice-card,.video-project-card,.card { background:linear-gradient(157deg,var(--df-chrome-top),var(--surface) 38%,var(--df-chrome-bottom)); border:1px solid var(--border); box-shadow:inset 0 1px 0 var(--df-inner),0 8px 22px #0002; border-radius:var(--radius); } .panel h2,.panel h3 { letter-spacing:-.45px; } /* Brand: tightly cropped real transparent artwork. Text remains accessible. */ .df-brand-wrap { display:flex; position:relative; align-items:center; min-width:0; } .df-brand { display:flex; gap:7px; align-items:center; width:100%; min-width:0; text-decoration:none; } .df-brand-symbol { display:block; flex:0 0 58px; width:58px; height:58px; position:relative; } .df-brand-symbol img { width:100%; height:100%; object-fit:contain; } .df-brand-copy { display:flex; flex-direction:column; align-items:center; min-width:0; flex:1; gap:1px; } .df-wordmark-image { display:block; width:100%; height:auto; max-width:186px; object-fit:contain; } .df-world { color:var(--text)!important; font-size:7px!important; letter-spacing:3.1px!important; margin-left:4px; white-space:nowrap; opacity:.92; } .df-brand-wrap .jh-motion-toggle { position:absolute; right:-8px; top:-5px; width:20px; height:20px; padding:0; font-size:10px; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:50%; opacity:.7; } .df-brand-wrap:hover .jh-motion-toggle,.jh-motion-toggle:focus-visible { opacity:1; } .sidebar { padding:24px 14px 18px; border-right:1px solid #859df341; background:linear-gradient(165deg,#10182a80,transparent 20%),var(--sidebar); box-shadow:inset -1px 0 0 #ce9cff16; } .sidebar .df-brand-wrap { margin:0 1px 18px; } .sidebar .nav-label { color:var(--muted); font-size:8px; letter-spacing:2px; margin:10px 13px; } .sidebar nav { gap:6px; } .sidebar nav a,.nav-signout { min-height:45px; padding:10px 12px; font-size:12.5px; gap:13px; border-radius:10px; } .sidebar nav a svg,.nav-signout svg { width:23px; height:23px; flex:0 0 23px; } .sidebar nav a.active { color:var(--p-cyan); box-shadow:inset 0 0 18px #34c9ff16,0 0 12px #7566f71f; } .sidebar nav a.active::before { display:none; } .sidebar nav a:hover:not(.active),.nav-signout:hover { background:var(--surface-2); } .sidebar-bottom { margin-top:auto; padding:18px 5px 0; } .side-credit { border-radius:13px; padding:14px; } .side-credit::before { display:none; } .side-credit strong { font-size:25px; font-variant-numeric:tabular-nums; margin:6px 0; } .side-credit strong small { font-size:12px; color:var(--muted); font-weight:400; } .side-credit a { color:var(--text); font-size:11px; } .df-credit-spectrum { height:5px; border-radius:20px; margin:9px 0 10px; background:var(--p-spectrum); box-shadow:0 0 9px #b394fa4a; } .df-creator-link { display:flex; gap:9px; align-items:center; padding:13px 10px; margin-top:12px; border-radius:13px; } .df-creator-link>svg { width:22px; height:22px; flex:0 0 22px; } .df-creator-link>svg:last-child { width:14px; flex-basis:14px; margin-left:auto; } .df-creator-link strong { display:block; font-size:12px; color:var(--p-gold); } .df-creator-link small { display:block; font-size:10px; color:var(--muted); margin-top:4px; } /* Metal-cut SVG icons have a real colour gradient, not decorative raster glyphs. */ .df-icon { overflow:visible; filter:drop-shadow(0 0 3px #59bcff24); } .button svg,.icon-button svg,.volume-symbol svg { width:19px; height:19px; flex:0 0 19px; } .icon-button { border:1px solid transparent; border-radius:10px; } .icon-button:hover,.icon-button.active { border-color:var(--border); background:var(--surface-2); color:var(--p-cyan); } .icon-button:disabled { opacity:.4; } .icon-button:focus-visible,.button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--p-cyan); outline-offset:4px; } .topbar { height:76px; padding:0 25px; gap:17px; border-bottom:1px solid var(--p-line); backdrop-filter:blur(12px); } .global-search { max-width:840px; min-height:43px; padding:6px 15px; border-radius:19px; } .global-search input { font-size:13px; background:transparent!important; border:0!important; box-shadow:none!important; color:var(--text); } .global-search input:focus { outline:0; } .global-search:focus-within { outline:2px solid var(--p-cyan); outline-offset:2px; } .topbar-actions { gap:12px; } .avatar { border:1px solid #97a6e3a0; background:linear-gradient(135deg,#2c3752,#151527); box-shadow:inset 0 1px 0 #f2f2ff66; color:#f4f7ff; } .button { min-height:43px; border-radius:11px; padding:10px 18px; border:1px solid var(--p-line); background:linear-gradient(160deg,var(--df-chrome-top),var(--df-chrome-bottom)); color:var(--text); box-shadow:inset 0 1px 0 var(--df-inner); font-weight:650; } .button:hover:not(:disabled) { background:linear-gradient(135deg,var(--hover),var(--surface)); border-color:var(--p-cyan); } .button.primary { color:#fff; border:1px solid transparent; background:var(--p-brand) padding-box,var(--df-ring) border-box; box-shadow:inset 0 1px 1px #fff7,0 0 16px #9d35ff40,0 0 5px #41d5ff6b; } .button.primary:hover:not(:disabled) { background:var(--p-brand-hover) padding-box,var(--df-ring) border-box; filter:none; } .button.danger { color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 40%,var(--border)); box-shadow:none; } .button:disabled { opacity:.48; cursor:not-allowed; box-shadow:none; } /* Hero's artwork has no text or fake controls; all copy/actions below are native DOM. */ .hero.premium-hero { position:relative; isolation:isolate; display:block; min-height:345px; padding:31px 36px; border-radius:19px; background:linear-gradient(90deg,#01040adc 0%,#02061199 30%,#03061025 50%,transparent 70%) padding-box, url('/assets/deepflow-cosmos.webp') right center/cover no-repeat padding-box,var(--df-ring) border-box; box-shadow:inset 0 0 2px #fff8,0 0 17px #428cec24,0 12px 30px #0005; overflow:hidden; } .hero.premium-hero::before { background:none; display:none; } .hero.premium-hero::after { content:''; inset:1px; width:auto; height:auto; border-radius:17px; background:none; border:1px solid #b4eaff23; opacity:1; box-shadow:inset 0 0 13px #567cff12; pointer-events:none; } .hero-copy { width:52%; max-width:590px; position:relative; z-index:2; } .hero.premium-hero .eyebrow { color:#e9f1ff; font-size:9px; letter-spacing:2.4px; margin-bottom:14px; } .hero.premium-hero h1 { color:#f5f7ff; font-size:clamp(33px,3.25vw,58px); letter-spacing:-1.8px; line-height:1.08; margin:0 0 10px; text-shadow:0 2px 6px #0007; } .hero.premium-hero h1 span { background:linear-gradient(100deg,#e7e6ff,#e896f9 31%,#aecaff 62%,#73fff1); background-clip:text; -webkit-background-clip:text; color:transparent; text-shadow:none; } .hero.premium-hero .hero-copy>p { font-size:12px; line-height:1.65; color:#cbd8ed; max-width:420px; margin:0 0 15px; } .hero.premium-hero .hero-copy>p.df-hero-kicker { font-size:11px; letter-spacing:3.9px; margin-bottom:8px; color:#e4edff; } .hero-meta { gap:13px; flex-wrap:wrap; } .hero-meta .button { min-height:46px; font-size:12px; padding:11px 18px; } .hero-meta .button.ghost { background:#04080dcc; color:#f3f7ff; border-color:#c6d8e978; } .hero.premium-hero .hero-footnote { font-size:10px!important; margin-top:18px!important; color:#aabbce!important; } .df-cosmic-scene { position:absolute; inset:0; pointer-events:none; height:auto; min-height:0; } .df-hero-motto { position:absolute; top:25px; right:28px; color:#dce7ff; font-size:8px; line-height:1.9; letter-spacing:3px; text-align:right; } .df-hero-signature { position:absolute; right:25px; bottom:22px; font-style:italic; font-family:cursive; color:#e4dce7; font-size:22px; line-height:1.1; transform:rotate(-10deg); text-align:center; opacity:.85; } /* Shared action tiles: coloured paths and chrome, labels not hidden behind decoration. */ .music-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin:18px 0 22px; } .music-shortcut { min-height:74px; border-radius:13px; padding:13px 14px; gap:13px; display:flex; align-items:center; } .music-shortcut:hover { transform:translateY(-2px); } .music-shortcut .shortcut-icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border:1px solid currentColor; border-radius:10px; background:linear-gradient(135deg,#fff1,#0004); box-shadow:inset 0 1px 0 #fff3,0 0 12px #8b68df20; } .music-shortcut .shortcut-icon svg { width:23px; height:23px; } .music-shortcut>span:nth-child(2) { min-width:0; } .music-shortcut small { font-size:8px; letter-spacing:1.65px; } .music-shortcut strong { font-size:13px; display:block; margin-top:4px; color:var(--text); } .music-shortcut>svg { width:17px; height:17px; margin-left:auto; flex:0 0 17px; } .shortcut-create { color:var(--p-violet); } .shortcut-voice { color:var(--p-cyan); } .shortcut-video { color:var(--p-rose); } .shortcut-flow { color:var(--p-gold); } /* Music cards and table row surfaces across library, discovery, history and artist pages. */ .track-grid { grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:16px; } .track-card { padding:0 0 12px; border:1px solid var(--p-line); border-radius:12px; overflow:hidden; background:linear-gradient(165deg,var(--df-chrome-top),var(--df-chrome-bottom)); box-shadow:inset 0 1px 0 var(--df-inner); min-width:0; } .track-card:hover { border-color:#62d7ffaa; background:linear-gradient(160deg,var(--surface-2),var(--df-chrome-bottom)); box-shadow:0 0 15px #476eed24; transform:translateY(-2px); } .track-card .art-button { margin:0; border-radius:10px 10px 0 0; } .track-card .art { border-radius:10px 10px 0 0; } .track-card .card-title { padding:10px 10px 0; margin:0; gap:5px; } .track-card .card-title .text-button { font-size:12px; } .track-card>p { padding:0 10px; font-size:11px; margin-top:3px; } .track-card .card-tags { padding:0 10px; gap:6px; font-size:8px; } .track-card .card-tags .source-label { font-size:7px; } .card-play { width:32px; height:32px; bottom:9px; right:9px; opacity:1; transform:none; display:grid; place-items:center; color:#fff; background:#05090dde; border:1px solid #e0eeffab; box-shadow:0 1px 5px #000b; } .card-play svg { width:17px; height:17px; } .track-row { border-bottom:1px solid var(--border); border-radius:9px; } .track-row:hover { background:linear-gradient(90deg,var(--surface-2),var(--surface)); } .row-number span { color:var(--p-cyan); } .art { background-color:#091421; } .art small { color:#f4f8ffbb; } .mood-tile { border:1px solid var(--border); border-radius:13px; } .mood-tile:hover { border-color:var(--p-cyan); } .mood-tile strong { color:var(--text); } /* Every editable screen shares the same tokens and control states. */ input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select { background:var(--p-input); color:var(--text); border:1px solid var(--p-line); border-radius:9px; box-shadow:inset 0 2px 6px #0002; font-size:13px; } input::placeholder,textarea::placeholder { color:var(--muted); opacity:.8; } input:disabled,textarea:disabled,select:disabled { opacity:.6; } input[type=checkbox],input[type=radio] { accent-color:var(--p-cyan); } input[type=range] { accent-color:#c7e6ff; } option { background:var(--surface); color:var(--text); } .tabs,.studio-tabs,.creator-tabs,.segmented { border-color:var(--p-line); background:var(--surface); border-radius:11px; } .tab,.segmented button { color:var(--muted); border-radius:8px; } .tab.active,.segmented button.active { background:linear-gradient(130deg,#693ac659,#3575a433); color:var(--text); border-color:var(--p-violet); box-shadow:inset 0 1px 0 #fff2; } label { color:var(--text); } .form-stack label,.form-grid label { font-size:12px; } .form-help,.form-note { color:var(--muted); } .studio-layout,.creator-grid { gap:21px; } .studio-card,.studio-form,.creator-card { border-color:var(--p-line); background:var(--surface); border-radius:16px; } .lyrics-panel { background:linear-gradient(135deg,var(--surface),var(--df-chrome-bottom)); border-color:#9183c344; } .lyrics-panel pre,.lyrics-content { color:var(--text); line-height:1.9; } .song-hero { align-items:center; } .song-cover { box-shadow:0 0 0 1px #94b5e445,0 15px 38px #0007; } .creator-toolbar .button { font-size:12px; } #modal { background:linear-gradient(140deg,var(--df-chrome-top),var(--surface) 45%,var(--df-chrome-bottom)); color:var(--text); border:1px solid #ae94e27a; border-radius:18px; box-shadow:0 0 30px #7447c325,0 30px 90px #000b; } #modal::backdrop { background:#01040abd; backdrop-filter:blur(5px); } .modal-close { background:var(--surface-2); } .queue-drawer { background:linear-gradient(155deg,var(--df-chrome-top),var(--surface)); border:1px solid var(--p-line); border-radius:17px 17px 0 0; box-shadow:0 -8px 35px #0007; } .notice { border-radius:11px; } .notice.danger { background:color-mix(in srgb,var(--danger) 7%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 35%,transparent); color:var(--danger); } .notice.warning { background:color-mix(in srgb,var(--warning) 7%,var(--surface)); color:var(--warning); } .badge { background:var(--surface-2); border:1px solid var(--border); border-radius:20px; } /* Semantic status colours never become rainbow decoration. */ .status-completed,.status-ready,.badge.success { color:#7de6bd; } .status-failed,.status-rejected,.badge.danger { color:var(--danger); } .status-pending,.status-submitted,.status-unknown { color:var(--warning); } .toast { background:var(--surface); border:1px solid var(--p-line); box-shadow:0 12px 40px #0008; } .toast.danger { border-color:var(--danger); } .data-table th { color:var(--muted); background:var(--surface-2); } .data-table td,.data-table th { border-color:var(--border); } .empty-state { background:linear-gradient(150deg,var(--surface),var(--bg)); border:1px dashed var(--p-line); border-radius:16px; } .empty-symbol { color:var(--p-violet); } /* Persistent metal player: all real controls/IDs retained, visualisation is decorative. */ .player { position:fixed; left:0; right:0; bottom:0; height:var(--player-height); min-height:var(--player-height); border-radius:17px 17px 0 0; padding:15px 22px; z-index:60; display:grid; grid-template-columns:minmax(175px,240px) minmax(85px,190px) minmax(380px,1fr) minmax(160px,230px); gap:20px; align-items:center; color:var(--text); overflow:visible; box-shadow:inset 0 1px 1px #ddeaff45,0 -6px 30px #0009,0 0 18px #5678ff22; } .player::before { content:''; position:absolute; left:22px; right:22px; bottom:1px; height:1px; pointer-events:none; background:var(--p-spectrum); opacity:.6; } .player .now { min-width:0; gap:12px; } .player .mini-art { width:53px; height:53px; flex:0 0 53px; border-radius:10px; border:1px solid #98c4ef50; box-shadow:0 0 10px #5280df24; overflow:hidden; } .now-copy { min-width:0; } .now-copy strong { font-size:12px; line-height:1.5; color:var(--text); } .now-copy span { font-size:10px; color:var(--muted); } .player #now-like { width:30px; flex:0 0 30px; } .df-player-wave { display:flex; width:100%; height:53px; align-items:center; justify-content:center; gap:1.5px; pointer-events:none; opacity:.86; } .df-wave-bar { display:block; width:3px; min-width:1px; flex:1 1 3px; max-width:5px; height:var(--df-height,18px); border-radius:4px; background:linear-gradient(180deg,#fff,var(--df-colour,#58c5ff) 16%,var(--df-colour,#58c5ff) 52%,#152a36 58%,var(--df-colour,#58c5ff) 85%,#fff); box-shadow:0 0 5px color-mix(in srgb,var(--df-colour,#58c5ff) 38%,transparent); transform-origin:center; } @keyframes df-wave { 0%,100%{transform:scaleY(.5)} 24%{transform:scaleY(.95)} 58%{transform:scaleY(.65)} 82%{transform:scaleY(1)} } [data-jh-playing="true"] .df-player-wave { opacity:1; } [data-jh-playing="true"] .df-wave-bar { animation:df-wave 1.45s ease-in-out infinite; animation-delay:var(--df-delay,0s); } .player .transport { display:flex; flex-direction:row; align-items:center; gap:19px; min-width:0; } .transport-buttons { display:flex; align-items:center; gap:9px; flex:0 0 auto; margin:0; } .transport-buttons .icon-button { width:29px; height:34px; } .play-main { width:55px; height:55px; min-width:55px; display:grid; place-items:center; border-radius:50%; color:#fff; border:2px solid transparent; background:linear-gradient(145deg,#172335,#03060b 60%) padding-box,var(--df-ring) border-box; box-shadow:inset 0 1px 1px #effaff87,0 0 10px #4bd7e842; animation:df-chrome 9s linear infinite; } .play-main:hover { filter:none; transform:scale(1.035); } .play-main svg { width:23px; height:23px; fill:#e7f4ff; stroke:#e7f4ff; } .play-main svg defs { display:none; } .player .seek { flex:1; min-width:110px; display:flex; gap:8px; align-items:center; } .seek time { font-size:10px; color:var(--muted); min-width:27px; } .seek input { min-width:35px; width:100%; } .player input[type=range] { height:5px; border:0; border-radius:20px; background:linear-gradient(90deg,#b6ddff 0%,#7566da var(--range-progress,0%),#203354 var(--range-progress,0%),#263956 100%); box-shadow:inset 0 1px 3px #0008; } .player input[type=range]::-webkit-slider-thumb { width:12px; height:12px; border:1px solid #d7e8fc; background:linear-gradient(#fff,#88afdf); box-shadow:0 0 7px #83c5f8aa; } .player input[type=range]::-moz-range-thumb { width:11px; height:11px; border:1px solid #d7e8fc; border-radius:50%; background:linear-gradient(#fff,#88afdf); box-shadow:0 0 7px #83c5f8aa; } .player-right { justify-content:flex-end; gap:8px; min-width:0; } .player-right .player-signal,.player-right .source-label { display:none; } .player-right .icon-button { width:30px; height:32px; font-size:14px; } .player-right #volume { width:72px; min-width:40px; } .player-right .volume-symbol { display:grid; place-items:center; padding:4px; } .player-right #volume-mute[aria-pressed="true"] { opacity:.55; } /**** Guest/auth/public surfaces use the same metal tokens, not separate themes. ****/ .auth-body { background:var(--bg); } .auth-layout { min-height:100vh; } .auth-story { background:linear-gradient(0deg,#02040bee,#04060a77),url('/assets/deepflow-cosmos.webp') 68% center/cover; color:#f6f9ff; border-right:1px solid #aa90e455; } .auth-story .df-brand-wrap { width:290px; } .auth-story .df-world { color:#fff!important; } .auth-message h1 { font-size:clamp(35px,4.5vw,68px); color:#f4f7ff; line-height:1.06; } .auth-message h1 em { color:#8fffe6; background:var(--p-spectrum); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-style:normal; } .auth-message>p,.auth-caption { color:#c7d6ec; } .auth-story .record-visual { display:none; } .auth-form-panel { background:radial-gradient(ellipse at 100% 10%,#66369712,transparent 65%),var(--bg); } .auth-form { background:linear-gradient(135deg,var(--df-chrome-top),var(--df-chrome-bottom)); border:1px solid var(--p-line); border-radius:22px; padding:35px; max-width:490px; box-shadow:inset 0 1px 0 #fff2,0 22px 80px #0003; } .auth-form .button.primary { width:100%; } .auth-form h2 { font-size:30px; line-height:1.2; } .auth-footer { border-color:var(--p-line); } .public-header,.public-footer { background:var(--sidebar); border-color:var(--border); } .public-header .df-brand-wrap { width:245px; } .public-main { max-width:1200px; margin:auto; padding:32px 24px; } .public-song,.public-playlist,.legal-content { background:var(--surface); border:1px solid var(--border); border-radius:18px; } /* Intermediate desktop and compact tablet: no crammed invisible controls. */ @media(min-width:1800px) { .player{grid-template-columns:280px 250px minmax(520px,1fr) 245px;} .track-grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr));} } @media(max-width:1450px) { .player{gap:13px;grid-template-columns:210px 135px minmax(330px,1fr) 187px;padding:14px 16px;} .transport-buttons{gap:4px}.player .transport{gap:12px}.player-right{gap:3px}.player-right #volume{width:54px}.hero.premium-hero{padding:29px;min-height:322px}.hero-copy{width:54%}.hero.premium-hero h1{font-size:clamp(34px,3.3vw,47px)}.music-shortcut{padding:12px 10px;gap:9px}.music-shortcut strong{font-size:12px} } @media(max-width:1200px) { :root{--sidebar-width:222px}.sidebar{padding-left:10px;padding-right:10px}.df-brand-symbol{width:49px;height:49px;flex-basis:49px}.df-world{font-size:6px!important;letter-spacing:2.7px!important}.player{grid-template-columns:200px minmax(300px,1fr) 175px;gap:16px}.df-player-wave{display:none}.player .transport{flex-direction:column;gap:6px}.player .seek{width:100%}.play-main{height:45px;width:45px;min-width:45px}.transport-buttons .icon-button{height:28px}.topbar{padding:0 18px}.hero-copy{width:57%}.df-hero-signature{font-size:19px;right:20px}.hero.premium-hero h1{font-size:36px}.hero-meta .button{font-size:11px;padding:10px 12px}.music-shortcuts{gap:10px}.music-shortcut .shortcut-icon{width:31px;height:34px;flex-basis:31px} .music-shortcut>svg{width:13px;flex-basis:13px}.music-shortcut small{font-size:7px;letter-spacing:1px} } @media(max-width:1000px) { #view{padding:20px 18px 40px}.hero.premium-hero{min-height:315px;padding:24px}.hero-copy{width:61%}.hero.premium-hero h1{font-size:34px}.hero.premium-hero .hero-copy>p{font-size:11px}.hero.premium-hero .hero-copy>p.df-hero-kicker{font-size:9px;letter-spacing:2.8px}.music-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));}.music-shortcut strong{font-size:13px}.music-shortcut .shortcut-icon{width:36px;flex-basis:36px;height:36px}.music-shortcut{min-height:66px}.df-hero-motto{display:none}.track-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}.auth-form{padding:27px} } @media(max-width:900px) { :root{--player-height:112px}.sidebar{width:248px;z-index:90}.sidebar .df-brand-symbol{width:57px;height:57px;flex-basis:57px}.sidebar-scrim{z-index:85}.workspace{margin-left:0}.topbar{height:68px}.player{grid-template-columns:180px minmax(270px,1fr) 136px;gap:12px}.player-right #volume{display:none}.player-right .volume-symbol{display:grid}.hero-copy{width:53%}.hero.premium-hero{background-position:center,right center,center}.hero.premium-hero h1{font-size:37px}.auth-story{display:none}.auth-form-panel{min-height:100vh}.auth-form{max-width:480px;width:100%}.auth-form .jh-mobile-brand{display:flex;margin-bottom:27px;max-width:250px}.auth-layout{display:block} } @media(max-width:700px) { :root{--player-height:133px}.topbar{padding:0 13px;gap:10px}.topbar-actions{gap:5px}.topbar-actions .button{font-size:11px;padding:8px 11px!important;min-height:35px}.global-search{min-height:37px;padding:5px 10px;border-radius:13px}.global-search input{font-size:11px}.global-search kbd{display:none}.topbar-actions .avatar{width:31px;height:31px}#view{padding:17px 14px 32px}.hero.premium-hero{min-height:364px;padding:24px 20px;background:linear-gradient(90deg,#020510eb,#030610a6 52%,#0003) padding-box,url('/assets/deepflow-cosmos.webp') 66% center/auto 100% no-repeat padding-box,var(--df-ring) border-box;}.hero-copy{width:90%;max-width:450px}.hero.premium-hero h1{font-size:37px;letter-spacing:-1.3px}.hero.premium-hero .eyebrow{font-size:8px}.hero.premium-hero .hero-copy>p{max-width:285px;color:#d0dcf1;font-size:12px}.hero-meta{gap:10px}.hero-meta .button{font-size:11px;min-height:43px}.hero.premium-hero .hero-footnote{max-width:260px;font-size:9px!important;line-height:1.5}.df-hero-signature{right:14px;bottom:16px;font-size:17px;opacity:.65}.music-shortcut{padding:12px 10px;gap:9px}.music-shortcut .shortcut-icon{width:30px;flex-basis:30px;height:32px}.music-shortcut strong{font-size:11px}.music-shortcut>svg{width:12px;flex-basis:12px}.section-head h2{font-size:21px}.section-head>a{font-size:10px}.track-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.player{height:133px;min-height:133px;padding:11px 14px 12px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:51px 41px;gap:7px 11px}.player .now{grid-column:1;grid-row:1;gap:9px}.player .mini-art{width:42px;height:42px;flex-basis:42px}.now-copy strong{font-size:11px}.now-copy span{font-size:9px}.player .transport{display:contents}.transport-buttons{grid-column:2;grid-row:1;gap:5px}.transport-buttons #shuffle,.transport-buttons #continuous{display:none}.transport-buttons .icon-button{width:26px;height:30px}.play-main{width:42px;height:42px;min-width:42px}.play-main svg{width:21px;height:21px}.player .seek{grid-row:2;grid-column:1;width:100%;gap:6px}.seek time{font-size:9px}.player-right{grid-row:2;grid-column:2;gap:7px;justify-content:flex-end}.player-right .icon-button{height:30px;width:27px}.df-player-wave{display:none}.queue-drawer{bottom:var(--player-height);width:100%;max-width:100%;right:0}.creator-toolbar{gap:9px}.creator-toolbar .button{font-size:11px;min-height:39px}.song-info h1{font-size:31px}.song-cover{max-width:240px}.lyrics-panel{padding:22px}.page-header h1{font-size:28px}.page-header .muted{font-size:12px}.auth-form-panel{padding:30px 15px}.auth-form{padding:25px 22px}.public-header{flex-wrap:wrap;gap:14px}.public-header .df-brand-wrap{width:210px}.public-main{padding:20px 15px}.df-brand-wrap .jh-motion-toggle{top:0} } @media(max-width:380px) { #view{padding:14px 10px 25px}.topbar-actions .avatar{display:none}.hero.premium-hero{padding:22px 16px;min-height:365px}.hero-copy{width:100%}.hero.premium-hero h1{font-size:33px}.hero-meta{gap:8px}.hero-meta .button{padding:9px 10px;font-size:10px}.hero.premium-hero .hero-copy>p.df-hero-kicker{font-size:8px;letter-spacing:2.1px}.music-shortcut{gap:7px;padding:10px 8px}.music-shortcut>svg{display:none}.music-shortcut strong{font-size:10.5px}.music-shortcut small{font-size:6.5px}.player{padding-left:10px;padding-right:10px;gap:7px}.player #now-like{display:none}.transport-buttons{gap:2px}.player-right{gap:4px}.section-head h2{font-size:19px}.df-hero-signature{font-size:15px}.auth-form{padding:23px 17px} } /* Movement control covers the whole theme. User preference persists, OS preference wins. */ [data-jh-motion="off"] .player,[data-jh-motion="off"] .premium-hero,[data-jh-motion="off"] .play-main, [data-jh-motion="off"] .df-rgb-edge,[data-jh-motion="off"] .music-shortcut,[data-jh-motion="off"] .button, [data-jh-motion="off"] .sidebar nav a,[data-jh-motion="off"] .df-wave-bar, [data-jh-visible="hidden"] .player,[data-jh-visible="hidden"] .premium-hero,[data-jh-visible="hidden"] .play-main, [data-jh-visible="hidden"] .df-rgb-edge,[data-jh-visible="hidden"] .music-shortcut,[data-jh-visible="hidden"] .button, [data-jh-visible="hidden"] .sidebar nav a,[data-jh-visible="hidden"] .df-wave-bar { animation:none!important; } @media(prefers-reduced-motion:reduce) { .player,.premium-hero,.play-main,.df-rgb-edge,.music-shortcut,.button,.sidebar nav a,.df-wave-bar{animation:none!important;transition:none!important;} .music-shortcut:hover,.track-card:hover,.play-main:hover{transform:none;} } @media(forced-colors:active) { .df-icon,.icon-button svg{filter:none;stroke:ButtonText!important}.df-icon path{stroke:ButtonText!important} .button,.player,.df-rgb-edge,.music-shortcut,.sidebar nav a.active{border:1px solid ButtonText;background:Canvas;box-shadow:none;} .hero.premium-hero h1 span{-webkit-text-fill-color:CanvasText;color:CanvasText;background:none;} .df-player-wave{display:none;} } /* Specular edge polish, bounded and pointer-transparent. */ .hero.premium-hero {border-width:1.5px;box-shadow:inset 0 0 3px #ecf8ff7a,0 0 12px #804bff30,0 0 5px #7bedff28;} .player {border-width:1.5px;box-shadow:inset 0 1px 2px #e6f7ff7a,0 -5px 22px #2e62d525,0 0 12px #b66afb30;} .music-shortcut {box-shadow:inset 0 1px 0 #e4f5ff30,0 0 8px #6956b722;} /* Final component cascade: remove inherited sleeve overhang and make chrome visible. */ .track-grid>.track-card { margin:0; } nav.music-shortcuts a.music-shortcut { border:1px solid transparent; background:linear-gradient(155deg,var(--df-chrome-top),var(--df-chrome-bottom) 60%) padding-box,var(--df-ring) border-box; box-shadow:inset 0 1px 1px #e7f4ff52,0 0 9px color-mix(in srgb,var(--shortcut-color,var(--p-violet)) 18%,transparent); } nav.music-shortcuts a.music-shortcut:hover { border-color:transparent;box-shadow:inset 0 1px 1px #fff8,0 0 15px color-mix(in srgb,var(--shortcut-color,var(--p-violet)) 28%,transparent); } .panel.df-rgb-edge,.job-card.df-rgb-edge,.price-card.df-rgb-edge,.list-card.df-rgb-edge,.studio-card.df-rgb-edge { border:1px solid transparent; background:linear-gradient(157deg,var(--df-chrome-top),var(--surface) 38%,var(--df-chrome-bottom)) padding-box,var(--df-ring) border-box; } .player .now-copy { flex:1; } .player .now { overflow:hidden; } .df-player-wave { min-width:0;overflow:hidden; } @media(forced-colors:active) { nav.music-shortcuts a.music-shortcut,.panel.df-rgb-edge,.job-card.df-rgb-edge,.price-card.df-rgb-edge,.list-card.df-rgb-edge,.studio-card.df-rgb-edge {border:1px solid ButtonText;background:Canvas;box-shadow:none;} } /* Resolve each animated gradient on its own element, not on :root: the angle is local. */ :is(.df-rgb-edge,.global-search,.side-credit,.df-creator-link,.sidebar nav a.active,.music-shortcut,.player,.premium-hero,.play-main,.button.primary) { --df-ring:conic-gradient(from var(--df-angle),#282536 0deg,#43d9ff 35deg,#bccfff 49deg,#151f39 66deg,#544ad1 117deg,#ef64fc 144deg,#2b203a 174deg,#ffb753 222deg,#fff5c8 235deg,#1e3140 256deg,#4bf1dd 295deg,#242c48 335deg,#282536 360deg); } html[data-theme="light"] :is(.df-rgb-edge,.global-search,.side-credit,.df-creator-link,.sidebar nav a.active,.music-shortcut,.player,.premium-hero,.play-main,.button.primary) { --df-ring:conic-gradient(from var(--df-angle),#667da35c,#1091c5,#4d56af 73deg,#b034b5 145deg,#cab88d 220deg,#118488 285deg,#667da35c); }