
:root{color-scheme:dark;--bg:#0b151e;--surface:#111f2a;--surface2:#172936;--border:#2c4250;--text:#d9e6ea;--muted:#829caa;--gold:#dbad58;--green:#9bcda8;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text)}#app{display:grid;grid-template-rows:96px minmax(0,1fr) 34px;grid-template-columns:288px minmax(300px,1fr) 264px;grid-template-areas:'header header header' 'left main right' 'footer footer footer'}
header{grid-area:header;display:flex;align-items:center;gap:42px;padding:14px 27px;border-bottom:1px solid var(--border);background:#0d1a24}header>div:first-child{margin-right:auto}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold)}.eyebrow span{color:var(--muted)}h1{font:800 41px/.95 'Barlow Condensed',sans-serif;letter-spacing:2px;margin:6px 0 3px}h1 em{font-style:normal;color:var(--gold)}.sub{letter-spacing:1.1px;color:var(--muted);font-size:10px}.header-stat b{display:block;font:700 24px/1.1 'Barlow Condensed',sans-serif}.header-stat small{color:var(--muted);font-size:9px}.serial{font-size:15px;line-height:1.7;color:var(--gold);text-align:right}.serial span{font-size:9px;color:var(--muted)}aside{padding:13px 11px;overflow:auto;background:#101d27}aside.left{grid-area:left;border-right:1px solid var(--border)}aside.right{grid-area:right;border-left:1px solid var(--border)}.panel{border:1px solid var(--border);background:#10222d;margin-bottom:12px;padding:12px}.paneltitle{font-weight:600;color:var(--gold);letter-spacing:1.15px;font-size:10px;margin-bottom:15px;display:flex;justify-content:space-between}.paneltitle span{font-size:10px;color:#6a9eaa}.paneltitle .dot{width:7px;height:7px;border-radius:50%;background:#91c99a;box-shadow:0 0 10px #6dce9c}.buttons{display:flex;gap:8px;margin:8px 0}.buttons>*{flex:1}button,select,input[type=text]{background:#1b303c;color:var(--text);border:1px solid #35505f;font:500 10px 'IBM Plex Mono',monospace;padding:11px 7px;cursor:pointer}button:hover,button.active{border-color:var(--gold);color:var(--gold);background:#293b42}button:disabled{opacity:.45;cursor:not-allowed}label{display:flex;justify-content:space-between;margin:20px 0 10px;color:#9aafba;letter-spacing:.8px;font-size:10px}label strong{color:var(--gold)}input[type=range]{width:100%;accent-color:var(--gold);cursor:pointer}select{width:100%}.preset{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.wide{width:100%;margin-top:8px}.selectPanel{min-height:310px}.selectPanel input{width:100%;margin-bottom:10px;cursor:text}#parts{height:260px;overflow:auto}#parts button{width:100%;text-align:left;border:0;border-bottom:1px solid #263946;background:none;color:#a9bcc6;padding:8px;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#parts button:hover,#parts button.active{background:#253b47;color:var(--gold)}.groupname{padding:10px 8px 5px;font-weight:600;color:var(--gold);letter-spacing:1px;text-transform:uppercase;font-size:9px}main{grid-area:main;position:relative;overflow:hidden;background:radial-gradient(circle at 45% 30%,#2c4858,#0a151e 77%)}canvas{position:absolute;display:block;inset:0;width:100%;height:100%}#viewhint{position:absolute;bottom:18px;left:24px;opacity:.76;color:#b0c8d4;font-size:10px;pointer-events:none}#viewhint span{color:var(--gold);padding:0 8px}.floatlabel{position:absolute;z-index:4;background:#142734df;border:1px solid var(--gold);color:#e5eef2;padding:10px;max-width:225px;pointer-events:none;line-height:1.5;box-shadow:0 8px 30px #000a}#loading{position:absolute;inset:0;background:#0c1929dd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;letter-spacing:1.5px;text-align:center}#loading small{color:var(--muted)}#loading[hidden]{display:none}.spinner{width:45px;height:45px;border:3px solid #344656;border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.item-name{font:700 24px/1.05 'Barlow Condensed',sans-serif;overflow-wrap:anywhere}.right p{font-size:11px;color:#a3b5bc;line-height:1.65}.chip{display:inline-block;background:#263c48;border:1px solid #476272;color:#c3d5dc;padding:7px;font-size:9px;max-width:100%;overflow-wrap:anywhere}.sequence{padding-left:22px;color:#a8b9c4;line-height:1.9;font-size:10px}.sequence li{padding-left:4px}.statrow{display:flex;justify-content:space-between;border-top:1px solid #2b434e;padding:10px 0;font-size:10px}.statrow span{color:var(--muted)}.statrow b{color:var(--gold)}footer{grid-area:footer;background:#0d1a24;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 21px;font-size:9px;letter-spacing:.6px;color:#91a6b1}.green{color:#8bc596}@media(max-width:1160px){#app{grid-template-columns:240px minmax(200px,1fr);grid-template-areas:'header header' 'left main' 'footer footer'}aside.right{display:none}header{gap:20px}}@media(max-width:760px){#app{grid-template-columns:1fr;grid-template-rows:74px minmax(0,1fr) 40vh 30px;grid-template-areas:'header' 'main' 'left' 'footer'}header{padding:8px 14px}header .header-stat,header .serial{display:none}h1{font-size:29px}aside.left{border-top:1px solid var(--border)}footer>div:nth-child(2){display:none}}
