/* KANADE 奏 KD-W1 — device skin. Two skins: lunar grey (default) and graphite. */
@import url('/css/fonts.css');

:root{--or:#ff6a1a;--cy:#8fe6ff;--cy2:#2f8fb0;--cyd:#3f6a78;--cyl:#14303a;--cob:#3561a8;--glass:#04070a}
body.grey{--bg1:#e9ebeb;--bg2:#cfd2d4;--grid:rgba(70,80,90,.06);--face1:#d0d3d5;--face2:#b9bdc0;--shell1:#a4a8ab;--shell2:#7d8285;
 --pl:#8a8f93;--plh:rgba(255,255,255,.55);--mod1:#34383b;--mod2:#222528;--key1:#e0e2e3;--key2:#c3c6c9;--keyt:#3d4246;--keyg:#33383c;
 --sten:#5d6367;--sten2:#7a8084;--well1:#b8bcbf;--well2:#c9ccce;--mesh:#3b3f43;--pp1:#3a3e42;--pp2:#25282b;--ppg:#ff6a1a;
 --hdr:#3a3f43;--hdr2:#7a8084;--keyhi:rgba(255,255,255,.8);--dotoff:#7b8185}
body.graphite{--bg1:#232629;--bg2:#121315;--grid:rgba(255,255,255,.03);--face1:#34373b;--face2:#25282b;--shell1:#4a4e52;--shell2:#141516;
 --pl:#141618;--plh:rgba(255,255,255,.07);--mod1:#1b1d1f;--mod2:#0f1011;--key1:#3d4145;--key2:#2a2d30;--keyt:#c4c8cb;--keyg:#c4c8cb;
 --sten:#8a9095;--sten2:#62686c;--well1:#202326;--well2:#2c2f33;--mesh:#26292c;--pp1:#d6d8d9;--pp2:#b9bcbf;--ppg:#d2500c;
 --hdr:#c9cdd0;--hdr2:#6c7276;--keyhi:rgba(255,255,255,.12);--dotoff:#4a4f53}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg2);color:var(--hdr);overflow:hidden;
 -webkit-tap-highlight-color:transparent;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.jp{font-family:'Noto Sans JP',sans-serif}
.paper{position:fixed;inset:0;z-index:-1;background:
 linear-gradient(var(--grid) 1px,transparent 1px) 0 0/40px 40px,
 linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/40px 40px,
 radial-gradient(ellipse 70% 70% at 50% 50%,var(--bg1),var(--bg2))}
.cham{clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.noise{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hidden{display:none!important}
body.locked .page{visibility:hidden}

/* ---------------------------------------------------------------- page frame */
.page{height:100%;display:flex;flex-direction:column;align-items:center;padding:0 24px}
.hdr,.ftr{width:min(100%,1760px);display:flex;justify-content:space-between;align-items:center;flex:none}
.hdr{height:56px}
.ftr{height:36px;font-size:9.5px;letter-spacing:.24em;color:var(--hdr2)}
.brand{font-size:20px;font-weight:300;letter-spacing:.14em;color:var(--hdr);display:flex;align-items:baseline;gap:8px}
.brand .jp{font-weight:500;letter-spacing:0}
.brand small{font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.26em;color:var(--hdr2);margin-left:10px}
.hbtns{display:flex;gap:6px}
.hbtn{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.2em;color:var(--hdr2);padding:6px 10px;border:1px solid transparent}
.hbtn:hover{color:var(--hdr);border-color:var(--pl)}
.hbtn b{color:var(--or);font-weight:500}

/* ---------------------------------------------------------------- device */
.wrap{flex:1;min-height:0;width:min(100%,1760px);display:flex;align-items:center;justify-content:center}
.dev{position:relative;width:100%;height:min(100%,1000px);min-height:620px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.33)) drop-shadow(0 6px 8px rgba(0,0,0,.22))}
.shell{position:absolute;inset:0;--c:40px;background:linear-gradient(180deg,var(--shell1),var(--shell2))}
.face{position:absolute;inset:3px;--c:38px;background:linear-gradient(180deg,var(--face1),var(--face2));
 display:grid;grid-template-columns:clamp(140px,15.5vw,280px) minmax(0,1fr) clamp(140px,15.5vw,280px);gap:18px;padding:22px 24px}
.face>.noise{position:absolute;inset:0;pointer-events:none}
.pl{height:1px;background:var(--pl);box-shadow:0 1px 0 var(--plh)}
.screw{width:11px;height:11px;border-radius:50%;flex:none;position:relative;background:radial-gradient(circle at 40% 35%,#c9ccce,#6f7477);box-shadow:0 0 0 1px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.screw::after{content:"";position:absolute;left:3px;top:3px;width:5px;height:5px;background:#3f4448;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.vent{display:flex;gap:5px}
.vent i{display:block;width:4px;height:20px;border-radius:2px;background:#191b1d;box-shadow:inset 0 2px 2px #000,0 1px 0 var(--plh)}
.haz{width:46px;height:12px;flex:none;background:repeating-linear-gradient(-45deg,#e3b423 0 6px,#232527 6px 12px);box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.sten{font-family:'IBM Plex Mono';font-size:8.5px;letter-spacing:.2em;color:var(--sten);font-weight:500;white-space:nowrap}
.led{width:7px;height:7px;border-radius:50%;flex:none;background:#5a2a14;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.led.on{background:var(--or);box-shadow:0 0 8px var(--or)}
.led.cy.on{background:var(--cy);box-shadow:0 0 8px var(--cy)}
.led.cy{background:#1d3640}
.led.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

/* speakers */
.spk{position:relative;--c:24px;background:linear-gradient(180deg,var(--mod1),var(--mod2));display:flex;flex-direction:column;padding:16px 16px 0;--lv:0;--bass:0;--hi:0}
.grl{position:relative;flex:1;--c:14px;background:#08090a;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}
.drv{position:relative;border-radius:50%;aspect-ratio:1;flex:none}
.drv .cone{position:absolute;inset:0;border-radius:50%;transform:scale(calc(1 + var(--bass) * .045));
 background:radial-gradient(circle at 50% 45%,#5a5f64 0 13%,#1d1f22 15%,#3a3e42 32%,#24272a 58%,#4a4f54 64%,#2a2d30 71%,#151618 79%,#555a5f 83%,#1a1b1d 88%,transparent 89%)}
.drv.tw .cone{transform:scale(calc(1 + var(--hi) * .05))}
.drv .ring{position:absolute;inset:-4%;border-radius:50%;border:3px solid rgba(160,236,255,.95);opacity:calc(.22 + var(--lv) * .78);
 box-shadow:0 0 calc(8px + var(--lv) * 26px) rgba(143,230,255,.8),inset 0 0 calc(6px + var(--lv) * 14px) rgba(143,230,255,.55)}
.drv.tw .ring{border-color:rgba(255,120,40,.95);opacity:calc(.25 + var(--hi) * .75);box-shadow:0 0 calc(6px + var(--hi) * 20px) rgba(255,106,26,.8),inset 0 0 10px rgba(255,106,26,.45)}
.drv.tw{width:30%}.drv.wf{width:80%}.drv.pr{width:60%;filter:brightness(.85)}
.mesh{position:absolute;inset:0;background:radial-gradient(circle,transparent 2.1px,var(--mesh) 2.5px) 0 0/6px 6px;pointer-events:none}
.grl .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 20%,transparent 80%,rgba(0,0,0,.35)),linear-gradient(180deg,rgba(255,255,255,.04),transparent 30%)}
.spkfoot{height:52px;display:flex;align-items:center;gap:12px;padding:0 4px}
.spkfoot .sten{color:#8a9095;line-height:1.5}
.dec{display:flex;gap:4px}.dec i{display:block;height:8px}

/* centre column */
.ctr{display:grid;grid-template-rows:42px minmax(0,1fr) 60px 196px;gap:12px;min-width:0}
.band{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--pl);box-shadow:0 1px 0 var(--plh);padding:0 2px 8px}
.band .grow{flex:1}

.mod{position:relative;--c:20px;background:linear-gradient(180deg,var(--mod1),var(--mod2))}
.mod>.screw{position:absolute;top:calc(50% - 5px)}
.glass{position:absolute;inset:14px;--c:12px;background:var(--glass);overflow:hidden;color:var(--cy)}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:20;
 background:linear-gradient(115deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 36%,transparent 36.2%),repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)}
.dim{color:var(--cyd)}
.or{color:var(--or)}

/* glass: main view */
.gmain{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(300px,40%)}
.gmain.wide{grid-template-columns:0 0 1fr}
.gmain.wide .np{display:none}
.gdiv{background:var(--cyl);margin:44px 0 14px}
.np{display:grid;grid-template-rows:38px minmax(0,1fr) 58px 22px 20px;padding:0 20px 10px;min-width:0}
.gstat{display:flex;justify-content:space-between;align-items:center;font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.16em;border-bottom:1px solid var(--cyl);white-space:nowrap;overflow:hidden;gap:12px}
.npmain{display:flex;gap:24px;padding:14px 0 10px;min-height:0}
.artbox{position:relative;height:100%;aspect-ratio:1;max-width:46%;flex:none;padding:8px}
.artbox img,.artbox .noart{width:100%;height:100%;object-fit:cover;display:block;background:#0a1218}
.noart{display:flex!important;align-items:center;justify-content:center;font-size:42px;color:var(--cyl)}
.noart.hidden{display:none!important}
.brk{position:absolute;width:12px;height:12px;border-color:var(--cy);border-style:solid;opacity:.8}
.brk.a{left:0;top:0;border-width:1px 0 0 1px}.brk.b{right:0;top:0;border-width:1px 1px 0 0}
.brk.c{left:0;bottom:0;border-width:0 0 1px 1px}.brk.d{right:0;bottom:0;border-width:0 1px 1px 0}
.meta{min-width:0;display:flex;flex-direction:column;padding-top:4px}
.meta .k{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.2em;color:var(--cyd)}
.meta .t{font-size:clamp(20px,2vw,30px);font-weight:500;color:#e8f9ff;margin-top:8px;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.meta .a{font-size:14px;color:#8fb9c7;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .al{font-size:13px;color:#4f7f8f;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .tm{font-family:'IBM Plex Mono';font-size:clamp(20px,2vw,26px);letter-spacing:.06em;margin-top:auto;cursor:pointer}
.meta .tm small{font-size:13px;color:var(--cyd)}
.meta .fmt{font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:.16em;color:var(--cyd);margin-top:6px}
.meta .fmt b{color:var(--cy);font-weight:500}
canvas.mini{width:100%;height:100%;display:block}
.scrub{position:relative;cursor:pointer;height:22px}
.scrub .tk{position:absolute;left:0;right:0;top:6px;height:10px;background:repeating-linear-gradient(90deg,#2b5260 0 1px,transparent 1px calc(10% - .1px))}
.scrub .ln{position:absolute;left:0;right:0;top:10px;height:1px;background:#1f3a44}
.scrub .bf{position:absolute;left:0;top:10px;height:1px;background:#2b5a6a}
.scrub .fl{position:absolute;left:0;top:9px;height:3px;background:var(--cy);box-shadow:0 0 8px rgba(143,230,255,.6)}
.scrub .hd{position:absolute;top:3px;width:2px;height:16px;margin-left:-1px;background:var(--or);box-shadow:0 0 6px var(--or)}
.npfoot{font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:.18em;color:var(--cyd);display:flex;gap:14px;align-items:center;white-space:nowrap;overflow:hidden}
.npfoot button{letter-spacing:inherit;color:var(--cyd)}
.npfoot button.on{color:var(--cy)}
.npfoot .jm{margin-left:auto;color:var(--or)}

/* glass: browser */
.br{display:grid;grid-template-rows:44px 28px minmax(0,1fr);min-width:0;padding:0 14px 10px 16px}
.tabs{display:flex;gap:5px;align-items:center;font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.18em}
.tabs button{padding:4px 9px;border:1px solid #1d3a44;color:var(--cyd);letter-spacing:inherit}
.tabs button.on{border-color:var(--cy);color:var(--glass);background:var(--cy)}
.tabs button:hover:not(.on){color:var(--cy);border-color:var(--cyd)}
.tabs .sp{flex:1}
.tabs .ic{border:none;padding:4px 6px;font-size:13px;letter-spacing:0}
.srch{display:flex;align-items:center;gap:8px;border:1px solid var(--cyd);padding:0 8px;height:24px;flex:1;min-width:0}
.srch input{background:none;border:0;outline:0;color:var(--cy);font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.08em;width:100%}
.crumb{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:.18em;color:var(--cyd);border-bottom:1px solid var(--cyl);white-space:nowrap;overflow:hidden}
.crumb button{color:var(--cy);letter-spacing:inherit}
.crumb .sp{flex:1}
.crumb .act{color:var(--cyd);border:1px solid #1d3a44;padding:1px 6px}
.crumb .act:hover{color:var(--cy);border-color:var(--cyd)}
.list{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#1d3a44 transparent;padding-right:2px}
.list::-webkit-scrollbar{width:6px}.list::-webkit-scrollbar-thumb{background:#1d3a44}
.r{display:flex;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid #0f222a;padding:0 8px 0 10px;position:relative;cursor:pointer}
.r:hover{background:rgba(143,230,255,.045)}
.r.on{background:rgba(143,230,255,.07)}
.r.on::before,.r.focus::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--cy)}
.r.focus{outline:1px solid var(--cyd);outline-offset:-1px}
.r .th{width:32px;height:32px;flex:none;object-fit:cover;background:#0a1218}
.r .n{flex:1;min-width:0;color:#bfe9f6;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r .n small{display:block;font-size:10.5px;color:var(--cyd);margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.r.on .n{color:var(--cy)}
.r .c{font-family:'IBM Plex Mono';font-size:10px;color:var(--cyd);white-space:nowrap}
.r .no{font-family:'IBM Plex Mono';font-size:10px;color:var(--cyd);width:20px;flex:none}
.r .pl{width:auto;height:auto;background:none;box-shadow:none}
.r .more{color:var(--cyd);font-size:14px;padding:4px 2px;visibility:hidden}
.r:hover .more{visibility:visible}
.r.tr{min-height:34px}
.r.playing .no{color:var(--or)}
.hdrrow{display:flex;gap:14px;padding:12px 4px 12px 2px;border-bottom:1px solid #0f222a;align-items:flex-end}
.hdrrow img,.hdrrow .noart{width:86px;height:86px;object-fit:cover;flex:none;font-size:22px}
.hdrrow .ht{min-width:0;flex:1}
.hdrrow .ht b{display:block;font-size:16px;font-weight:500;color:#e8f9ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdrrow .ht span{display:block;font-size:12px;color:#8fb9c7;margin-top:3px}
.hdrrow .ht em{display:block;font-style:normal;font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:.14em;color:var(--cyd);margin-top:6px}
.btns{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.gb{font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:.16em;color:var(--cy);border:1px solid var(--cyd);padding:3px 8px}
.gb:hover{background:rgba(143,230,255,.1)}
.gb.pri{background:var(--cy);color:var(--glass);border-color:var(--cy)}
.sect{font-family:'IBM Plex Mono';font-size:9px;letter-spacing:.24em;color:var(--cyd);padding:12px 2px 6px}
.empty{padding:28px 10px;font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.14em;color:var(--cyd);line-height:1.9}
.empty b{color:var(--cy);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px 14px;padding:12px 2px}
.tile{cursor:pointer;min-width:0}
.tile img,.tile .noart{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#0a1218;font-size:28px}
.tile .tn{font-size:12px;color:#bfe9f6;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .ta{font-size:10.5px;color:var(--cyd);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile:hover img{outline:1px solid var(--cyd);outline-offset:3px}
.tile.on img{outline:1.5px solid var(--cy);outline-offset:3px}

/* glass overlays: visual + menu */
.gvis{position:absolute;inset:0;background:var(--glass);z-index:5}
.gvis canvas{width:100%;height:100%;display:block}
.vhud{position:absolute;left:18px;top:14px;right:18px;display:flex;justify-content:space-between;font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.2em;color:var(--cyd);pointer-events:none}
.vhud b{color:var(--cy);font-weight:500}
.vbtns{position:absolute;right:14px;bottom:12px;display:flex;gap:5px;z-index:2}
.gmenu{position:absolute;inset:0;z-index:8;background:rgba(4,7,10,.985);display:grid;grid-template-columns:minmax(260px,420px) 1fr;padding:22px 26px;gap:30px}
.gmenu h3{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.3em;color:var(--cyd);font-weight:500;margin-bottom:12px;display:flex;gap:10px}
.gmenu h3 .jp{letter-spacing:.1em}
.mi{display:flex;justify-content:space-between;align-items:center;width:100%;height:34px;padding:0 12px;font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:.18em;color:#bfe9f6;border-bottom:1px solid #0f222a;text-align:left}
.mi span{color:var(--cyd);font-size:10px}
.mi span.on{color:var(--cy)}
.mi:hover,.mi.focus{background:rgba(143,230,255,.08);color:var(--cy)}
.mi.focus{outline:1px solid var(--cyd);outline-offset:-1px}
.minfo{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.14em;color:var(--cyd);line-height:2;border-left:1px solid var(--cyl);padding-left:26px}
.minfo b{color:var(--cy);font-weight:500}
.minfo .kb{display:inline-block;min-width:22px;text-align:center;border:1px solid #1d3a44;padding:0 5px;margin-right:8px;color:#bfe9f6;line-height:18px}

/* meter bridge */
.mbr{--c:12px}
.mbr .mwin{position:absolute;inset:10px;--c:7px;background:var(--glass)}
.mbr canvas{width:100%;height:100%;display:block}

/* controls */
.ctl{display:grid;grid-template-columns:128px minmax(0,1fr) 216px;gap:0;border-top:1px solid var(--pl);box-shadow:inset 0 1px 0 var(--plh);padding-top:14px;min-width:0}
.keys{display:flex;flex-direction:column;gap:10px;padding-right:18px;border-right:1px solid var(--pl);box-shadow:1px 0 0 var(--plh)}
.kw{position:relative;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.key{position:relative;width:100%;height:100%;--c:7px;background:linear-gradient(180deg,var(--key1),var(--key2));display:flex;align-items:center;gap:10px;padding-left:14px}
.key::after{content:"";position:absolute;inset:0;box-shadow:inset 0 1px 0 var(--keyhi),inset 0 -2px 0 rgba(0,0,0,.14);pointer-events:none}
.kw:active{filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));transform:translateY(1px)}
.key .t{font-size:10px;letter-spacing:.22em;color:var(--keyt);font-weight:600}
.key .j{font-size:9px;color:var(--sten2)}
.key .tab{position:absolute;right:10px;top:50%;margin-top:-7px;width:3px;height:14px;background:var(--sten2)}
.key .tab.or{background:var(--or)}
.key.c{justify-content:center;padding:0}
.key svg{width:16px;height:16px;fill:var(--keyg)}
.key.pp{background:linear-gradient(180deg,var(--pp1),var(--pp2))}
.key.pp svg{fill:var(--ppg)}
.keys .kw{height:46px}
.mid{padding:0 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.trs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:360px}
.trs .kw{height:56px}
.trl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:360px;margin-top:-4px}
.trl .sten{text-align:center}
.io{position:relative;--c:9px;background:linear-gradient(180deg,var(--mod1),var(--mod2));height:72px;max-width:394px;display:flex;align-items:center;gap:0;padding:0 10px;overflow:hidden;flex:none}
.io .hd{width:64px;flex:none;padding-left:14px;line-height:1.5}
.io .hd .sten{color:#8a9095;display:block}
.io .sep{width:1px;height:50px;background:#0b0c0d;box-shadow:1px 0 0 rgba(255,255,255,.06);margin:0 8px}
.cnw{width:62px;flex:none;display:flex;flex-direction:column;align-items:center;gap:7px}
.cnw .sten{font-size:7.5px;letter-spacing:.14em;color:#8a9095}
.cn{border-radius:50%;position:relative;flex:none}
.j35{width:24px;height:24px;background:radial-gradient(circle,#030303 0 4.5px,#2a2c2e 5px 6px,#c4c7c9 6.5px,#8a8f93 9px,#4e5357 11.5px);box-shadow:0 0 0 1px #000,0 2px 3px rgba(0,0,0,.6)}
.j63{width:34px;height:34px;background:radial-gradient(circle,#030303 0 6.5px,#2a2c2e 7px 8.5px,#b3b7ba 9px 11px,transparent 11.5px),repeating-conic-gradient(#cfd2d4 0 6deg,#6f7478 6deg 12deg);box-shadow:0 0 0 1px #000,0 2px 4px rgba(0,0,0,.6)}
.xlr{width:36px;height:36px;background:radial-gradient(circle,#1c1e21 0 12.5px,#45494d 13px 14px,#c4c7c9 14.5px,#8a8f93 16px,#55595d 18px);box-shadow:0 0 0 1px #000,0 2px 4px rgba(0,0,0,.6)}
.xlr i{position:absolute;width:5px;height:5px;border-radius:50%;background:#000;box-shadow:0 0 0 1.5px #3a3d41}
.xlr b{position:absolute;left:14px;top:-1px;width:8px;height:5px;background:linear-gradient(#e0e2e3,#9da2a6);box-shadow:0 0 0 1px #000}
.bnc{width:30px;height:30px;background:radial-gradient(circle,#d6b25a 0 1.8px,#d9d4c4 2.2px 5px,#080808 5.5px 7px,#a7abae 7.5px,#e4e6e7 10px,#8a8f93 12px,#5a5f63 15px);box-shadow:0 0 0 1px #000,0 2px 4px rgba(0,0,0,.6)}
.bnc i{position:absolute;top:12px;width:5px;height:6px;background:linear-gradient(#e0e2e3,#8a8f93);box-shadow:0 0 0 1px #000}
.kx{width:38px;height:30px;padding:2px;--c:6px;background:linear-gradient(180deg,#d4d6d8,#7c8185);flex:none}
.kx .in{position:relative;width:100%;height:100%;--c:5px;background:#060708}
.kx .tg{position:absolute;left:7px;right:7px;top:9px;height:8px;background:#26292c}
.kx .tg::before{content:"";position:absolute;left:2px;right:2px;top:-4px;height:3px;background:repeating-linear-gradient(90deg,#d8b45c 0 2px,transparent 2px 4px)}
.kx .lit{position:absolute;right:3px;top:3px;width:3px;height:3px;border-radius:50%;background:#1d3640}
.kx .lit.on{background:var(--cy);box-shadow:0 0 4px var(--cy)}
.decrow{display:flex;align-items:center;gap:10px;margin-top:-2px}
.dialc{position:relative;border-left:1px solid var(--pl);box-shadow:inset 1px 0 0 var(--plh);display:flex;align-items:center;justify-content:center}
.well{position:relative;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--well1) 60%,var(--well1) 71%,var(--well2) 72%);box-shadow:inset 0 4px 10px rgba(0,0,0,.35),inset 0 -2px 3px var(--plh);flex:none}
.dots{position:absolute;inset:0}
.dots i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--dotoff)}
.dots i.on{background:var(--cy);box-shadow:0 0 5px var(--cy)}
.dial{position:absolute;left:22px;top:22px;width:136px;height:136px;border-radius:50%;cursor:grab;touch-action:none;
 background:repeating-conic-gradient(from var(--rot,0deg),#1e2023 0 1.4deg,#3c4044 1.4deg 2.8deg);box-shadow:0 0 0 1px #0d0e0f,0 14px 22px rgba(0,0,0,.45),0 3px 5px rgba(0,0,0,.4)}
.dial:active{cursor:grabbing}
.dial::before{content:"";position:absolute;inset:7.5%;border-radius:50%;background:repeating-radial-gradient(circle,#2e3134 0 1px,#35393c 1px 2.2px),#303336;box-shadow:0 0 0 1px #111,inset 0 0 0 1px rgba(255,255,255,.06),inset 0 10px 18px rgba(0,0,0,.35)}
.dial .cap{position:absolute;inset:35%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#26292c,#3b3f43);box-shadow:inset 0 3px 6px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.08)}
.dial.push .cap{box-shadow:inset 0 5px 9px rgba(0,0,0,.85)}
.dial .idx{position:absolute;left:calc(50% - 2px);top:9px;width:4px;height:22px;background:var(--or);box-shadow:0 0 6px rgba(255,106,26,.6);transform-origin:2px 59px;transform:rotate(var(--ang,0deg))}
.dlab{position:absolute;bottom:4px;left:14px;right:14px;display:flex;justify-content:space-between}

/* ---------------------------------------------------------------- full-screen visual */
.fsv{position:fixed;inset:0;z-index:100;background:#020406;cursor:none}
.fsv.hud-on{cursor:default}
.fsv canvas{position:absolute;inset:0;width:100%;height:100%}
.fhud{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;background:linear-gradient(180deg,rgba(2,4,6,.7),transparent 14%,transparent 72%,rgba(2,4,6,.85))}
.fsv.hud-on .fhud{opacity:1}
.fhud .tl{position:absolute;left:32px;top:26px;font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.26em;color:var(--cyd)}
.fhud .tl b{color:var(--cy);font-weight:500}
.fhud .bl{position:absolute;left:32px;bottom:30px;display:flex;gap:18px;align-items:flex-end}
.fhud .bl img{width:84px;height:84px;object-fit:cover}
.fhud .bl .t{font-size:24px;font-weight:500;color:#e8f9ff}
.fhud .bl .a{font-size:14px;color:#8fb9c7;margin-top:4px}
.fhud .bl .tm{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.12em;color:var(--cy);margin-top:8px}
.fhud .br2{position:absolute;right:32px;bottom:30px;text-align:right;font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.2em;color:var(--cyd);line-height:2;pointer-events:auto}
.fhud .modes{display:flex;gap:6px;justify-content:flex-end;margin-bottom:8px}
.fhud .modes button{width:30px;height:4px;background:#1d3a44}
.fhud .modes button.on{background:var(--cy)}

/* ---------------------------------------------------------------- sheets (upload, dialogs) */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(10,12,14,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.sheet{position:relative;width:min(760px,100%);max-height:min(720px,100%);--c:18px;background:linear-gradient(180deg,#34383b,#222528);padding:14px;display:flex;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.sheet .gl{flex:1;--c:10px;background:var(--glass);color:var(--cy);display:flex;flex-direction:column;min-height:0;padding:18px 20px}
.sheet h2{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.3em;font-weight:500;color:var(--cy);display:flex;align-items:center;gap:12px}
.sheet h2 .x{margin-left:auto;color:var(--cyd);font-size:16px}
.sheet h2 .jp{letter-spacing:.1em;color:var(--cyd)}
.drop{margin-top:14px;border:1px dashed var(--cyd);padding:26px;text-align:center;font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.16em;color:var(--cyd);line-height:2}
.drop.over{border-color:var(--cy);background:rgba(143,230,255,.06);color:var(--cy)}
.drop b{color:var(--cy);font-weight:500}
.ulist{margin-top:14px;overflow-y:auto;flex:1;min-height:60px;scrollbar-width:thin;scrollbar-color:#1d3a44 transparent}
.urow{display:grid;grid-template-columns:1fr 90px 120px;gap:12px;align-items:center;height:28px;border-bottom:1px solid #0f222a;font-size:12px;color:#bfe9f6}
.urow span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.urow .st{font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:.14em;color:var(--cyd);text-align:right}
.urow .st.ok{color:var(--cy)}.urow .st.err{color:var(--or)}
.ubar{height:3px;background:#12222a;position:relative}.ubar i{position:absolute;left:0;top:0;bottom:0;background:var(--cy)}
.ufoot{display:flex;gap:10px;align-items:center;margin-top:12px;font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.16em;color:var(--cyd)}
.ufoot .sp{flex:1}
.field{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.field label{font-family:'IBM Plex Mono';font-size:9.5px;letter-spacing:.2em;color:var(--cyd)}
.field input{background:#071016;border:1px solid #1d3a44;padding:8px 10px;color:#e8f9ff;outline:0;font-size:14px}
.field input:focus{border-color:var(--cy)}

/* context menu */
.ctx{position:fixed;z-index:120;min-width:200px;background:#06090c;border:1px solid #1d3a44;box-shadow:0 14px 30px rgba(0,0,0,.5);padding:4px 0}
.ctx button{display:block;width:100%;text-align:left;padding:7px 14px;font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.14em;color:#bfe9f6}
.ctx button:hover{background:rgba(143,230,255,.08);color:var(--cy)}
.ctx hr{border:0;border-top:1px solid #12222a;margin:4px 0}
.ctx .danger{color:var(--or)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:130;background:#06090c;border:1px solid var(--cyd);color:var(--cy);font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.16em;padding:9px 16px;pointer-events:none}

/* login */
.login{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.login .sheet{width:min(440px,100%)}
.login .gl{padding:26px 26px 22px}
.login .big{font-size:34px;font-weight:300;letter-spacing:.14em;color:#e8f9ff;margin:14px 0 4px}
.login .big .jp{font-weight:500;letter-spacing:0;margin-left:8px}
.login form{display:flex;gap:8px;margin-top:20px}
.login input{flex:1;background:#071016;border:1px solid #1d3a44;padding:10px 12px;color:#e8f9ff;outline:0;font-family:'IBM Plex Mono';letter-spacing:.2em}
.login input:focus{border-color:var(--cy)}
.login .err{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.16em;color:var(--or);margin-top:10px;min-height:14px}

/* ---------------------------------------------------------------- compact desktop */
@media (max-height:760px) and (min-width:901px){
 .ctr{grid-template-rows:38px minmax(0,1fr) 52px 176px}
 .trs .kw{height:50px}.io{height:64px}.keys .kw{height:40px}
 .well{width:160px;height:160px}.dial{left:20px;top:20px;width:120px;height:120px}.dial .idx{transform-origin:2px 51px;height:19px}
}
@media (max-width:1180px) and (min-width:901px){
 .ctl{grid-template-columns:118px minmax(0,1fr) 190px}
 .io .hd{display:none}.io .sep{display:none}
}

/* ---------------------------------------------------------------- portable (phone) */
@media (max-width:900px){
 body{overflow:auto;overflow-x:hidden}
 .band{overflow:hidden}.band .vent{display:none}
 .hdr .brand .jp{display:none}
 .page{padding:0 10px;height:auto;min-height:100%}
 .hdr{height:48px}.brand{font-size:17px}.brand small{display:none}
 .hbtn{padding:6px 6px;letter-spacing:.12em}
 .wrap{display:block}
 .dev{height:auto;min-height:0}
 .face{position:relative;inset:auto;margin:3px;grid-template-columns:minmax(0,1fr);padding:16px 14px 18px;gap:12px}
 .ctr{min-width:0;grid-template-columns:minmax(0,1fr)}
 .np,.br,.mid,.keys{min-width:0}
 .br{grid-template-columns:minmax(0,1fr)}
 .tabs{overflow-x:auto;scrollbar-width:none}
 .tabs::-webkit-scrollbar{display:none}
 .gstat #stFmt{overflow:hidden;text-overflow:ellipsis}
 .ftr span:nth-child(2){display:none}
 .hbtns{gap:0}.hbtn{font-size:9px}
 .shell{--c:30px}.face{--c:28px}
 .spk{display:none}
 .ctr{grid-template-rows:auto;grid-auto-rows:auto}
 .band .stat,.band .haz{display:none}
 .mod.disp{height:auto}
 .mod.disp .glass{position:relative;inset:auto;margin:12px}
 .gmain,.gmain.wide{position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
 .gmain.wide .np{display:grid}
 .gdiv{display:none}
 .np{grid-template-rows:34px auto 46px 22px 20px;padding:0 14px 8px}
 .npmain{flex-direction:column;gap:12px}
 .artbox{width:min(100%,300px);max-width:none;height:auto;align-self:center}
 .meta .tm{margin-top:10px}
 .br{height:62vh;border-top:1px solid var(--cyl);padding:0 10px 10px}
 .gvis{position:fixed;inset:0;z-index:90}
 .gmenu{position:fixed;inset:0;grid-template-columns:1fr;z-index:90;overflow:auto}
 .minfo{display:none}
 .mbr{height:56px}
 .ctl{grid-template-columns:minmax(0,1fr);gap:16px}
 .keys{flex-direction:row;border-right:0;box-shadow:none;padding:0}
 .keys .kw{flex:1;height:42px}
 .mid{padding:0}
 .trs,.trl{max-width:none}
 .io{display:none}
 .decrow{display:none}
 .dialc{border-left:0;box-shadow:none;height:200px}
 .dlab{left:20%;right:20%}
 .ftr{height:auto;padding:12px 0;flex-direction:column;gap:6px;text-align:center}
}