@font-face{font-family:Inconsolata;src:url('/assets/inconsolata.ttf') format('truetype');font-weight:200 900;font-style:normal;font-display:swap}
*{box-sizing:border-box}
body{margin:0;--ui-scale:1;--bg:#000000;--fg:#ffffff;--panel:#161616;--muted:#ffffff;--hover:#ffffff;--hover-bg:#000000;background:var(--bg);color:var(--fg);font:400 calc(19.2px * var(--ui-scale))/1.5 Inconsolata,monospace;color-scheme:dark}
body.light{--bg:#e8e8e8;--fg:#ffffff;--panel:#d6d6d6;--muted:#ffffff;--hover:#ffffff;--hover-bg:#c5c5c5;color-scheme:light}
main{width:100%;max-width:1120px;margin:0 auto;padding:0 24px;border:0;position:relative;isolation:isolate}
header,footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0}
small{font-size:calc(14.4px * var(--ui-scale));letter-spacing:.5px;color:var(--muted)}
h1{font:500 calc(24px * var(--ui-scale))/1.3 Inconsolata,monospace;margin:5px 0 0;text-transform:uppercase;letter-spacing:.5px}
button,.purchase-link{font:500 calc(16.8px * var(--ui-scale))/1 Inconsolata,monospace;text-transform:uppercase;letter-spacing:.4px;background:transparent;color:var(--muted);border:0;border-radius:0;padding:15px 20px;min-height:44px;cursor:pointer}
button:hover,.purchase-link:hover{color:var(--hover);background:transparent}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px;padding:10px 0 28px}
.wide{grid-column:1/-1}
label{font-size:calc(15.6px * var(--ui-scale));letter-spacing:.5px;text-transform:uppercase;color:var(--fg);min-width:0}
select,input:not([type=range]){display:block;width:100%;min-width:0;margin-top:9px;padding:13px 0;background:transparent;color:var(--fg);border:0;border-radius:0;font:400 calc(19.2px * var(--ui-scale))/1.4 Inconsolata,monospace;box-shadow:none}
select{cursor:pointer}select option{background:var(--bg);color:var(--fg)}select:hover{color:var(--hover)}
input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;margin:10px 0 0;height:28px;background:transparent;cursor:pointer;padding:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:#444444}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:18px;margin-top:-8px;background:var(--fg);border:0;border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
input[type=range]::-moz-range-track{height:2px;background:#444444}
input[type=range]::-moz-range-thumb{width:12px;height:18px;background:var(--fg);border:0;border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
input[type=range]:hover::-webkit-slider-thumb{background:var(--hover)}
.adjust{display:grid;grid-template-columns:1fr 90px;align-items:center;gap:8px;min-width:0}
.adjust input[type=number]{margin:0;padding:8px 10px;width:90px;text-align:right;font-variant-numeric:tabular-nums}
.adjust input[type=range]{grid-column:1/-1}
.stage{display:block;overflow:auto;max-height:580px;min-height:320px;background:transparent;scrollbar-color:#444444 var(--bg);scrollbar-width:thin}
#preview{width:auto;max-width:none;height:auto;display:block;margin:auto}
#preview[hidden]{display:none}
footer{padding:22px 0 18px;align-items:flex-start}
p{margin:0;color:var(--muted);font-size:calc(14.4px * var(--ui-scale));line-height:1.5}
#hint{margin-top:4px}
:focus-visible{outline:1px solid var(--hover);outline-offset:4px}
body{isolation:isolate}
.monitor-screen::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none;background:url('/assets/logo-watermark.png') center center / 96% auto no-repeat;opacity:.10;mix-blend-mode:screen}
body.light .monitor-screen::before{mix-blend-mode:normal}
@media(max-width:600px){header{padding-top:16px}.controls{gap:20px;padding-bottom:22px}h1{font-size:calc(21.6px * var(--ui-scale))}button,.purchase-link{padding:14px 16px}}
@media(max-width:480px){.controls{grid-template-columns:1fr}.adjust{grid-column:1/-1}header,footer{gap:12px}small{font-size:calc(13.2px * var(--ui-scale))}}

button,.purchase-link{padding-right:0;padding-left:12px}
button:hover,.purchase-link:hover{text-decoration:underline;text-underline-offset:5px}
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media(max-width:600px){main{padding:0 16px}}

header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.logo-heading{grid-column:2;width:clamp(140px,48vw,520px);max-width:100%;margin:0;line-height:0}
.header-logo{display:block;width:100%;height:auto}
header #invert{grid-column:3;justify-self:end}


#status.is-live{display:flex;align-items:center;gap:7px}
#status.is-live::before{content:"";display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:#39d765;animation:live-signal 1.6s ease-in-out infinite}
@keyframes live-signal{0%,100%{opacity:1}50%{opacity:.2}}
@media(prefers-reduced-motion:reduce){#status.is-live::before{animation:none}}

.purchase-link{display:inline-flex;align-items:center;text-decoration:none;grid-column:1;grid-row:1;justify-self:start;padding-left:0;white-space:nowrap}
.logo-heading,header #invert{grid-row:1}
@media(max-width:480px){header{grid-template-columns:1fr 1fr}.logo-heading{grid-column:1/-1;grid-row:2;justify-self:center}header #invert{grid-column:2}}
/* Compact interactive tools, retaining the existing borderless palette. */
[hidden]{display:none!important}
.field-label{font-size:calc(15.6px * var(--ui-scale));letter-spacing:.5px}
.font-line{display:flex;align-items:center;justify-content:space-between;gap:14px}
.font-trigger{padding:12px 0;text-align:left;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;margin:8px 0}
.actions button{padding:12px 0}
button[aria-pressed=true]{color:var(--hover);text-decoration:underline;text-underline-offset:5px}
button:disabled{opacity:.4;cursor:default}
.presets{margin-bottom:20px;color:var(--muted)}
.previews{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.previews.comparing{grid-template-columns:repeat(2,minmax(0,1fr))}
.preview-panel{min-width:0;align-self:end}
.preview-canvas{position:relative;width:max-content;min-width:100%;margin:auto}
.preview-canvas>img{display:block;width:auto;max-width:none;height:auto;margin:auto}
.preview-canvas .light-layer{position:absolute;inset:0;pointer-events:none}
.split-line{position:absolute;top:0;bottom:0;width:1px;background:#999;pointer-events:none}
#splitControl{display:block;margin:18px 0}
#explorer{margin-top:20px}
#glyphTitle{flex:1;min-width:140px;overflow-wrap:anywhere}
.glyph-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:12px 0}
.glyph-tile{padding:0;min-width:0;font-size:calc(14.4px * var(--ui-scale));text-transform:none}
.glyph-crop{position:relative;display:block;width:80%;margin-inline:auto;aspect-ratio:1;overflow:hidden}
.glyph-crop img{position:absolute;width:800%;height:400%;max-width:none}

#fontDialog{background:var(--bg);color:var(--fg);border:0;padding:24px;width:min(640px,calc(100% - 24px));max-height:85vh}
#fontDialog::backdrop{background:rgba(0,0,0,.8)}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dialog-header h2{font:500 calc(19.2px * var(--ui-scale)) Inconsolata,monospace;letter-spacing:.5px}
.font-list{max-height:52vh;overflow:auto;overscroll-behavior:contain}
.font-option{display:flex;align-items:center;gap:12px}
.choose-font{flex:1;min-width:0;text-align:left;padding:12px 0;line-height:1.4}
.choose-font span{display:block;overflow-wrap:anywhere}
.choose-font img{display:block;width:100%;max-width:320px;height:auto;margin-top:6px}
.save-font{padding:12px;font-size:calc(26.4px * var(--ui-scale))}
@media(max-width:640px){.previews.comparing{grid-template-columns:minmax(0,1fr)}.glyph-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.actions{gap:4px 18px}.font-line{align-items:flex-start}#fontDialog{padding:16px}}

.split-line{width:24px;transform:translateX(-50%);background:transparent;pointer-events:auto;touch-action:none;cursor:ew-resize}
.split-line::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#999}

.controls{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.controls{grid-template-columns:minmax(0,1fr)}.controls .adjust{grid-column:1/-1}}

/* Scanlines are baked into the rendered PNG permanently. */
.split-line{z-index:3}

.preview-canvas,.preview-canvas img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.preview-canvas img{pointer-events:none;-webkit-user-drag:none}

#glyphGrid,.glyph-crop,.glyph-crop img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.glyph-crop img{pointer-events:none;-webkit-user-drag:none}

/* Full-width logo with existing corner actions above. */
header{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
header .logo-heading{grid-column:1/-1;grid-row:2;width:97.2%;max-width:100%;justify-self:center}
header #invert{grid-column:2;grid-row:1}

@media(min-width:769px){header .logo-heading{width:61.236%;justify-self:center}}

/* T-shirt previews fit the panel on desktop and mobile. */
.tee-mode .stage{max-height:none;min-height:0;background:transparent}
.tee-mode .preview-canvas{width:100%;min-width:0}
.tee-mode .preview-canvas>img,.tee-mode #preview{width:100%;height:auto;max-width:800px}
.tee-mode .preview-canvas{max-width:800px}

.actions.tools-row{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:24px;margin:8px 0 20px;overflow-x:auto;scrollbar-width:thin}
.actions.tools-row button{flex:0 0 auto;white-space:nowrap}

/* Preserve the light half of the split view over transparent tee PNGs. */
.preview-canvas .light-layer{background:#e8e8e8}

/* Preserve the supplied monitor proportions at 90% of the available fit. */
.monitor-shell{
  position:relative;
  width:min(90vw,157.417582vh);
  width:min(90vw,157.417582dvh);
  aspect-ratio:1910 / 1092;
  margin:5vh auto;
  margin:5dvh auto;
  overflow:hidden;
  isolation:isolate;
}
/* Display the original PNG unchanged, excluding its empty outer margins. */
.monitor-shell::before{
  content:"";
  position:absolute;
  width:107.225131%;height:140.659341%;
  left:-3.664921%;top:-19.047619%;
  background:url('/assets/monitor-frame.png?v=thin-ratio-20') center / 100% 100% no-repeat;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.monitor-screen{
  position:absolute;
  inset:8.424908% 3.926702% 9.157509% 4.083770%;
  overflow:hidden;
  background:var(--bg);
  isolation:isolate;
  container-type:inline-size;
  clip-path:polygon(1% 0,99% 0,100% 2%,100% 98%,99% 100%,1% 100%,0 98%,0 2%);
}
.monitor-screen main{
  position:relative;z-index:1;
  width:100%;height:100%;max-width:none;min-width:0;
  overflow-y:auto;overflow-x:hidden;
  padding:0 clamp(8px,1.2vw,20px);
  scrollbar-width:thin;
  scrollbar-color:#444 transparent;
}
@container(max-width:640px){
  .monitor-screen .controls{grid-template-columns:minmax(0,1fr)}
  .monitor-screen .controls .adjust{grid-column:1/-1}
  .monitor-screen .previews.comparing{grid-template-columns:minmax(0,1fr)}
  .monitor-screen .glyph-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Keep sound and reset controls compact inside the monitor. */
.footer-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 18px}
.footer-actions button{white-space:nowrap}

/* Header uses the original uploaded PNG; retain the watermark treatment. */
.header-logo{filter:none}
.monitor-screen::before{filter:brightness(0) invert(1)}

/* Portrait frame on mobile; the actual simulator remains upright. */
@media(max-width:768px){
  body{--ui-scale:.525}
  .monitor-shell{
    width:min(90vw,51.455497vh);
    width:min(90vw,51.455497dvh);
    aspect-ratio:1092 / 1910;
  }
  .monitor-shell::before{
    width:187.545788%;height:80.418848%;
    left:48.717949%;top:49.947644%;
    transform:translate(-50%,-50%) rotate(90deg);
    transform-origin:center;
  }
  .monitor-screen{inset:4.083770% 8.424908% 3.926702% 9.157509%}
  .monitor-screen main{padding-inline:8px;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
  header{padding:8px 0 12px;gap:4px 8px}
  footer{padding:12px 0;gap:8px;flex-wrap:wrap}
  .monitor-screen .controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;padding:4px 0 10px}
  .monitor-screen .controls .adjust{grid-column:auto;grid-template-columns:minmax(0,1fr) 30px;gap:2px}
  .adjust input[type=number]{width:30px;padding:8px 0}
  input:not([type=range]){margin-top:4px;padding:8px 0;min-height:44px}
  input[type=range]{height:44px;margin-top:2px}
  .font-line{gap:8px;align-items:center}
  .font-trigger{padding:8px 0}
  .actions.tools-row{gap:14px;margin:4px 0 12px;overscroll-behavior-x:contain}
  .actions.tools-row button{min-width:44px}
  .stage{min-height:160px;max-height:48vh;max-height:48dvh}
  .previews:not(.tee-mode) .preview-canvas{width:100%;min-width:0}
  .previews:not(.tee-mode) .preview-canvas>img,.previews:not(.tee-mode) #preview{max-width:100%;height:auto}
  .previews{gap:12px}
  .glyph-grid{gap:6px}
  .glyph-tile{min-height:44px}
  .footer-actions{gap:4px 12px}
  #fontDialog{padding:12px;max-height:85vh;max-height:85dvh}
  .dialog-header{gap:8px}
  .font-option{gap:8px}
}

/* Four dimming patches aligned to the original image's LED rectangles. */
.monitor-leds{
  position:absolute;pointer-events:none;user-select:none;z-index:1;
  width:107.225131%;height:140.659341%;left:-3.664921%;top:-19.047619%;
}
.frame-led{position:absolute;display:block;background:#02060c;border-radius:2px;opacity:0}
.led-top-left{left:14.0625%;top:16.731771%;width:6.298828%;height:1.302083%}
.led-top-right{left:80.029297%;top:16.731771%;width:6.298828%;height:1.302083%}
.led-bottom-left{left:13.671875%;top:79.622396%;width:6.738281%;height:1.171875%}
.led-bottom-right{left:80.029297%;top:79.622396%;width:6.542969%;height:1.171875%}
.frame-led.is-flickering{animation:led-dip .75s steps(1,end)}
@keyframes led-dip{0%,100%{opacity:0}12%{opacity:.38}34%{opacity:.076}64%{opacity:.247}82%{opacity:0}}
@media(max-width:768px){
  .monitor-leds{
    width:187.545788%;height:80.418848%;left:48.717949%;top:49.947644%;
    transform:translate(-50%,-50%) rotate(90deg);transform-origin:center;
  }
}

.field-label,.copyright{display:inline-block}
/* Fault bursts are scheduled every four seconds, with a different pattern per area. */
[data-fault="shear"]{animation:fault-shear .7s steps(1,end)}
[data-fault="drift"]{animation:fault-drift .7s steps(1,end)}
[data-fault="tear"]{animation:fault-tear .7s steps(1,end)}
[data-fault="jitter"]{animation:fault-jitter .7s steps(1,end)}
@keyframes fault-shear{
  0%,100%{transform:none}
  12%{transform:translateX(-1.71px) skewX(-0.399deg)}
  32%{transform:translateX(1.14px) skewX(0.2565deg)}
  58%{transform:translateX(-0.57px)}
  78%{transform:none}
}
@keyframes fault-drift{
  0%,100%{transform:none}
  10%{transform:translateY(1.14px)}
  35%{transform:translate(0.57px,-1.14px)}
  60%{transform:translateY(0.57px)}
  82%{transform:none}
}
@keyframes fault-tear{
  0%,100%{transform:none;clip-path:none}
  12%{transform:translateX(1.71px);clip-path:inset(0 0 3.8% 0)}
  38%{transform:translateX(-1.14px);clip-path:inset(1.9% 0 0 0)}
  65%{transform:translateX(0.57px);clip-path:none}
  82%{transform:none;clip-path:none}
}
@keyframes fault-jitter{
  0%,100%{transform:none}
  8%{transform:translate(-0.57px,0.57px)}
  26%{transform:translate(1.14px,0)}
  49%{transform:translate(-1.14px,-0.57px)}
  72%{transform:translate(0.57px,0)}
  86%{transform:none}
}
/* Screen-only CRT overlay, above every content layer, including the font menu. */
.monitor-screen::after,#fontDialog::after{
  content:"";position:absolute;inset:0;z-index:20;opacity:.8;
  pointer-events:none;user-select:none;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.32) 0,rgba(0,0,0,.32) .675px,rgba(255,255,255,.1) .675px,rgba(255,255,255,.1) 1.125px,transparent 1.125px,transparent 3px),
    radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.28) 100%);
}
#fontDialog{isolation:isolate}
.signal-band{position:absolute;inset:0;z-index:10;pointer-events:none;user-select:none;opacity:0;background:linear-gradient(to bottom,transparent 35%,rgba(255,255,255,.038) 42%,rgba(0,0,0,.1045) 46%,transparent 54%)}
.monitor-screen.is-faulting .signal-band{animation:signal-roll .7s linear}
@keyframes signal-roll{0%{opacity:0;transform:translateY(-40%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(40%)}}
@media(prefers-reduced-motion:reduce){
  .monitor-leds,.signal-band{display:none}
  [data-fault],.monitor-screen[data-watermark-fault]::before{animation:none}
}

/* Fine grayscale noise over all screen content, at 10% opacity. */
.screen-noise{
  position:absolute;inset:0;z-index:30;pointer-events:none;user-select:none;
  opacity:.1;background-image:url('/assets/screen-noise.svg?v=intense-monitor-34');
  background-repeat:repeat;background-size:160px 160px;
  animation:grain-drift 1.2s steps(1,end) infinite;
}
@keyframes grain-drift{
  0%,100%{background-position:0 0}
  25%{background-position:-37px 19px}
  50%{background-position:23px -43px}
  75%{background-position:-17px -11px}
}
@media(prefers-reduced-motion:reduce){.screen-noise{animation:none}}

/* Soft white phosphor glow and faint surface wear, clipped inside the screen. */
.monitor-screen,#fontDialog{--screen-glow:rgba(255,255,255,.45)}
.monitor-screen main,#fontDialog{text-shadow:0 0 5px var(--screen-glow)}
.monitor-screen button,.monitor-screen input,.monitor-screen select,#fontDialog button,#fontDialog input{text-shadow:inherit}
.header-logo,.preview-canvas>img,.choose-font img,.glyph-crop,.monitor-screen input[type=range],.monitor-screen .split-line{filter:drop-shadow(0 0 4px var(--screen-glow))}
.monitor-screen #status.is-live::before{box-shadow:0 0 4px var(--screen-glow)}
.monitor-screen::before{filter:brightness(0) invert(1) drop-shadow(0 0 4px var(--screen-glow))}
.screen-glow,.screen-wear{position:absolute;inset:0;pointer-events:none;user-select:none}
.screen-glow{z-index:15;box-shadow:inset 0 0 40px var(--screen-glow);background:radial-gradient(ellipse at center,rgba(255,255,255,.025),transparent 75%)}
.screen-wear{z-index:40;opacity:.30;background:url('/assets/screen-wear.svg?v=expanded-wear-39') center / 100% 100% no-repeat}

/* Minor static glass distortion; the frame and LED layer stay untouched. */
.screen-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.monitor-screen,#fontDialog{filter:url("#screen-displacement")}

/* Original frame only; no exterior halo or box. */
.monitor-shell{filter:none;border:0;outline:0;box-shadow:none;background:transparent}
.hud-strip{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin:0 0 18px;font-size:calc(12px * var(--ui-scale));letter-spacing:1.2px;color:#fff;opacity:.65}
.hud-strip b{font-weight:500;font-variant-numeric:tabular-nums}
.hud-id{margin-right:auto;letter-spacing:1.8px}
.screen-reticle{position:absolute;inset:8px;z-index:12;pointer-events:none;opacity:.22;background:linear-gradient(#fff,#fff) left top/12px 1px no-repeat,linear-gradient(#fff,#fff) left top/1px 12px no-repeat,linear-gradient(#fff,#fff) right top/12px 1px no-repeat,linear-gradient(#fff,#fff) right top/1px 12px no-repeat,linear-gradient(#fff,#fff) left bottom/12px 1px no-repeat,linear-gradient(#fff,#fff) left bottom/1px 12px no-repeat,linear-gradient(#fff,#fff) right bottom/12px 1px no-repeat,linear-gradient(#fff,#fff) right bottom/1px 12px no-repeat}
.monitor-screen button:hover,#fontDialog button:hover,.monitor-screen .purchase-link:hover{text-shadow:0 0 6px rgba(255,255,255,.65)}
@media(max-width:768px){.hud-strip{font-size:8px;gap:5px 9px;letter-spacing:.5px;margin-bottom:10px}.hud-id{flex-basis:100%;letter-spacing:1px}.screen-reticle{inset:4px}}

/* Screen-native monochrome rotary controls. */
.controls{grid-template-columns:repeat(4,minmax(0,1fr))}
.controls .adjust{grid-template-columns:1fr auto;grid-column:auto;gap:3px 8px;align-content:start}
.controls .adjust input[type=number]{width:58px;padding:4px 0}
.signal-dial{grid-column:1/-1;position:relative;width:72px;height:72px;justify-self:center;color:var(--fg);border:1px solid currentColor;border-radius:50%;filter:drop-shadow(0 0 3px currentColor);touch-action:none;cursor:ns-resize;margin:6px 0;--angle:0deg}
.signal-dial::before{content:"";position:absolute;inset:11px;border:1px solid currentColor;border-radius:50%;opacity:.35}
.dial-ticks{position:absolute;inset:4px;border-radius:50%;background:repeating-conic-gradient(from -135deg,currentColor 0deg 1deg,transparent 1deg 15deg);mask:radial-gradient(transparent 58%,#000 60%);opacity:.55}
.dial-pointer{position:absolute;inset:14px;transform:rotate(var(--angle));pointer-events:none}
.dial-pointer::before{content:"";position:absolute;left:calc(50% - 1px);top:-5px;width:2px;height:13px;background:currentColor;box-shadow:0 0 5px currentColor}
.signal-dial input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ns-resize;touch-action:none}
.signal-dial:focus-within{outline:1px dashed currentColor;outline-offset:5px}
#status.is-live::before{background:var(--fg)}
#stageA.displace-active .preview-canvas{filter:url(#font-dial-distortion)}
@media(max-width:640px){.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.controls .adjust{grid-column:auto}}
@container(max-width:600px){.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.controls .adjust{grid-column:auto}}
.monitor-screen .controls{grid-template-columns:repeat(4,minmax(0,1fr))}
.monitor-screen .controls .adjust{grid-column:auto;grid-template-columns:minmax(0,1fr) auto}
@media(max-width:640px){.monitor-screen .controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container(max-width:600px){.monitor-screen .controls{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Open, segmented monochrome instruments; no metallic knob surfaces. */
.signal-dial{border:0;filter:none;--sweep:0deg;isolation:isolate}
.signal-dial::before{inset:15px;border:1px solid rgba(255,255,255,.25);border-radius:50%;opacity:1;clip-path:polygon(0 0,100% 0,100% 77%,70% 100%,30% 100%,0 77%)}
.signal-dial::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);clip-path:polygon(0 0,36% 0,36% 5%,64% 5%,64% 0,100% 0,100% 70%,92% 70%,92% 100%,8% 100%,8% 70%,0 70%);pointer-events:none}
.dial-ticks{inset:5%;opacity:.5;mask:radial-gradient(transparent 62%,#000 64%);background:repeating-conic-gradient(from -135deg,#fff 0deg 1deg,transparent 1deg 10deg)}
.dial-arc{position:absolute;inset:10%;border-radius:50%;background:conic-gradient(from -135deg,rgba(255,255,255,.9) 0deg var(--sweep),transparent var(--sweep) 360deg);mask:radial-gradient(transparent 65%,#000 68%);pointer-events:none}
.dial-pointer{inset:19%;z-index:2}
.dial-pointer::before{height:17%;top:-12%;width:2px;box-shadow:0 0 3px rgba(255,255,255,.55)}
.dial-readout{position:absolute;inset:0;display:grid;place-items:center;font:500 12px/1 Inconsolata,monospace;font-variant-numeric:tabular-nums;pointer-events:none}
.dial-index{position:absolute;bottom:0;left:25%;right:25%;text-align:center;font-size:8px;opacity:.45;pointer-events:none}
.signal-dial input[type=range]{z-index:5}
.signal-dial.is-turning .dial-arc{filter:brightness(1.3)}
.signal-dial.is-turning::after{border-color:rgba(255,255,255,.65)}
.signal-caption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:10px;letter-spacing:1.5px;opacity:.45;margin:8px 0;pointer-events:none}
.signal-caption::before{content:"";width:18px;height:3px;align-self:center;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px)}
.signal-caption span:first-of-type{margin-right:auto}
.hud-strip{padding-block:6px;border:0;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent 20%,transparent 80%,rgba(255,255,255,.12)) left bottom/100% 1px no-repeat}
.tools-row button[aria-pressed=true]{text-decoration:none}
.tools-row button[aria-pressed=true]::before{content:"· ";color:currentColor}
.preview-canvas.dial-live{transform-origin:center center;will-change:transform}
.monitor-screen::before{animation:none!important;transform:none!important}
@media(max-width:768px){
 .signal-dial{width:50.4px;height:50.4px;margin:5px 0}
 .signal-dial::before{inset:10.5px}
 .dial-readout{font-size:9px}.dial-index{font-size:6px}
 .signal-caption{font-size:7px;letter-spacing:.5px;gap:5px}
 .signal-caption span:last-child{max-width:58%;text-align:right}
}

/* Compact instruments, with the full touch area retained on phones. */
.monitor-screen .controls{gap:12px 16px;padding-bottom:14px}
.monitor-screen .controls .adjust{gap:2px 5px}
.signal-dial{width:60px;height:60px;margin:3px 0}
.signal-dial::before{inset:21%}
.dial-readout{font-size:10px}
@media(max-width:768px){
 .monitor-screen .controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 4px;padding-bottom:8px}
 .monitor-screen .controls .adjust{grid-template-columns:minmax(0,1fr);justify-items:center;gap:1px}
 .controls .adjust>label{grid-column:1;grid-row:1;letter-spacing:.25px}
 .controls .adjust>.signal-dial{grid-column:1;grid-row:2}
 .controls .adjust>input[type=number]{grid-column:1;grid-row:3;width:44px;min-height:28px;padding:2px 0;text-align:center}
 .signal-dial{width:44px;height:44px;margin:2px 0}
 .signal-dial::before{inset:21%}
 .dial-readout{font-size:8px}.dial-index{font-size:5px}
}
@container(max-width:220px){.monitor-screen .controls{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Activation is inside the original monitor frame, under its CRT layers. */
.activation-gate{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 clamp(8px,1.2vw,20px);isolation:isolate}
.activation-logo{display:block;flex:none;width:73.4832%;max-width:none;max-height:90%;object-fit:contain;opacity:.7;pointer-events:none;user-select:none}
.monitor-screen.is-locked::before{opacity:.10}
.monitor-screen.is-locked .screen-reticle{display:none}
/* One glass treatment for the start button and simulator choices. */
.monitor-screen button,.monitor-screen .purchase-link,#fontDialog button,.monitor-screen #text,#fontDialog #fontSearch{
 border:1px solid rgba(255,255,255,.32);border-radius:12px;
 background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 12px rgba(0,0,0,.18);
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.monitor-screen button,.monitor-screen .purchase-link,#fontDialog button{padding:12px 14px}
.monitor-screen button:hover,.monitor-screen .purchase-link:hover,#fontDialog button:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.58);text-decoration:none}
.monitor-screen button[aria-pressed=true],#fontDialog button[aria-pressed=true]{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.14)}
.monitor-screen .controls .adjust{padding:8px;min-width:0}
.monitor-screen #text,#fontDialog #fontSearch{padding:10px 12px}
.activation-button-wrap{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%)}
.monitor-screen .activate-button{position:relative;padding:18px 28px;min-height:54px;white-space:nowrap;font-size:16px;letter-spacing:2px;border-radius:15px;background:rgba(8,8,8,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.actions.tools-row{gap:10px;padding:3px 0 8px}
.monitor-screen .glyph-tile{padding:5px 2px}
.footer-actions{gap:6px 10px}
.monitor-screen.screen-inverted,#fontDialog.screen-inverted{filter:url("#screen-displacement") invert(1)}
@media(max-width:768px){
 .activation-gate{padding-inline:8px}
 .activation-logo{width:116.64%}
 .monitor-screen .activate-button{padding:14px 19px;min-height:48px;font-size:11px;letter-spacing:1.4px}
 .monitor-screen button,.monitor-screen .purchase-link,#fontDialog button{padding:9px 10px;border-radius:9px}
 .monitor-screen .controls .adjust{padding:5px 2px;border-radius:10px}
 .actions.tools-row{gap:7px}
}

/* Screen-native terminal readouts and etched targeting geometry. */
.boot-telemetry,.boot-footer{position:absolute;left:5%;right:5%;display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.6);pointer-events:none}
.boot-telemetry{top:7%;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.2)}
.boot-footer{bottom:7%;padding-top:12px;border-top:1px solid rgba(255,255,255,.2)}
.boot-orbit{position:absolute;width:58%;aspect-ratio:1;max-height:80%;border:1px dashed rgba(255,255,255,.13);border-radius:50%;pointer-events:none;z-index:-1}
.boot-orbit::before,.boot-orbit::after{content:"";position:absolute;inset:9%;border:1px solid rgba(255,255,255,.12);border-radius:50%;clip-path:polygon(0 0,40% 0,40% 100%,0 100%,0 0,100% 0,100% 100%,60% 100%,60% 0)}
.boot-orbit::after{inset:18%;transform:rotate(90deg)}
.engine-telemetry{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px 16px;margin:8px 0 14px;padding:9px 12px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.025);font-size:10px;letter-spacing:1px;color:rgba(255,255,255,.65);font-variant-numeric:tabular-nums}
.engine-telemetry b{font-weight:400;color:#fff}.engine-state{display:flex;align-items:center;gap:7px}.engine-state>i{width:5px;height:5px;background:#fff;box-shadow:0 0 6px #fff;border-radius:50%}
.capacity-track{display:inline-block;vertical-align:middle;width:50px;height:3px;background:rgba(255,255,255,.15);margin-left:7px}.capacity-track i{display:block;height:100%;background:#fff;width:12.5%;transition:width .12s linear}
.activity-cells{letter-spacing:3px;opacity:.45}
.controls .adjust{position:relative}.controls .adjust::after{content:"";position:absolute;bottom:4px;left:38%;right:38%;height:1px;background:rgba(255,255,255,.35);pointer-events:none}
.monitor-screen button:active,#fontDialog button:active{background:rgba(255,255,255,.25);border-color:#fff}
@media(max-width:768px){.boot-telemetry,.boot-footer{font-size:7px;letter-spacing:.7px;gap:8px}.boot-footer{flex-direction:column;align-items:center;text-align:center}.engine-telemetry{font-size:7px;gap:7px;padding:7px 8px;letter-spacing:.4px}.capacity-track{width:25px}.activity-cells{display:none}}
@media(prefers-reduced-motion:reduce){.capacity-track i{transition:none}}

/* Separate the garment from its transparent print so DISPLACE affects ink only. */
.tee-mode .preview-canvas{background:url('/api/tee-base') center top/100% auto no-repeat}
.previews.tee-mode #stageA.displace-active .preview-canvas{filter:none}
.previews.tee-mode #stageA.displace-active .preview-canvas>img{filter:url(#font-dial-distortion)}
.tee-mode .preview-canvas .light-layer{background:transparent}

/* Open dial groups; preserve layout and instrument rings. */
.monitor-screen .controls .adjust{border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
.monitor-screen .controls .adjust::after{display:none}

.display-options{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.tee-mode .preview-canvas{background:none}
.tee-mode .preview-canvas[data-mockup="tee"]{background:url('/api/tee-base') center top/100% auto no-repeat}
.tee-mode .preview-canvas[data-mockup="billboard"]>img,.tee-mode .preview-canvas[data-mockup="sticker"]>img{filter:none}
.previews.tee-mode #stageA.displace-active .preview-canvas>img{filter:url(#font-dial-distortion)}

/* Restore the original green live indicator. */
#status.is-live::before{background:#39d765}
.monitor-screen #status.is-live::before{box-shadow:0 0 4px rgba(57,215,101,.65)}

/* Standalone die-cut and outline renders have fully transparent surroundings. */
.tee-mode .preview-canvas[data-mockup="sticker"],.tee-mode .preview-canvas[data-mockup="outline"],.tee-mode .preview-canvas[data-mockup="bevel"]{background:none}
.tee-mode .preview-canvas[data-mockup="sticker"]>img,.tee-mode .preview-canvas[data-mockup="outline"]>img,.tee-mode .preview-canvas[data-mockup="bevel"]>img{filter:none}
.previews.tee-mode #stageA.displace-active .preview-canvas>img{filter:url(#font-dial-distortion)}

/* Prevent iOS focus zoom without disabling user pinch zoom. */
@media(max-width:768px),(pointer:coarse){
 .monitor-screen input:not([type=range]),#fontDialog input,.monitor-screen select{font-size:16px!important}
 .monitor-screen input[type=range]{font-size:16px}
 button,a{touch-action:manipulation}
}
/* Invert the complete composited screen, including all text, ink and shirt background. */
.monitor-screen.screen-inverted,#fontDialog.screen-inverted{filter:invert(1) url("#screen-displacement")}

.glyph-name{display:block;overflow-wrap:anywhere;line-height:1.2;padding:3px}.glyph-tile[aria-disabled="true"]{cursor:help}

/* Momentary static interference, confined to the existing screen overlay. */
.monitor-screen.static-burst .screen-noise{opacity:.1615;background-size:83px 97px;animation:grain-drift .16s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){.monitor-screen.static-burst .screen-noise{opacity:.1;animation:none}}

/* PARALLEL composites both font layers in one shared output area. */
.monitor-screen .previews.comparing{grid-template-columns:minmax(0,1fr);gap:0;isolation:isolate}
.previews.comparing>.preview-panel{grid-area:1/1;align-self:center;width:100%}
.previews.comparing>#panelB{z-index:1}
.previews.comparing #stageB{filter:url("#top-font-stroke")}
.previews.comparing.tee-mode #panelB .preview-canvas{background:none}
#comparePicker{margin:0 0 12px;justify-self:start}

.monitor-screen .controls.parallel-controls{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:640px){.monitor-screen .controls.parallel-controls{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container(max-width:220px){.monitor-screen .controls.parallel-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}

.monitor-screen .controls.parallel-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
#stageB.displace-active .preview-canvas{filter:url(#font-dial-distortion-b)}
.previews.tee-mode #stageB.displace-active .preview-canvas{filter:none}
.previews.tee-mode #stageB.displace-active .preview-canvas>img{filter:url(#font-dial-distortion-b)}
@container(max-width:220px){.monitor-screen .controls.parallel-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Low-opacity static patches, contained inside the monitor glass. */
.random-static{position:absolute;inset:0;z-index:31;pointer-events:none;opacity:0;background-image:url('/assets/screen-noise.svg?v=intense-monitor-34');background-repeat:repeat;transition:opacity .18s ease}
@media(prefers-reduced-motion:reduce){.random-static{display:none}}

/* Reverse only visual stacking; each font keeps its own controls. */
.previews.comparing.layers-reversed>#panelA{z-index:2}
.previews.comparing.layers-reversed>#panelB{z-index:0}
.previews.comparing.layers-reversed #stageB{filter:none}
.previews.comparing.layers-reversed #stageA{filter:url("#top-font-stroke")}
.previews.comparing.layers-reversed.tee-mode #panelA .preview-canvas{background:none}
.previews.comparing.layers-reversed.tee-mode #panelB .preview-canvas[data-mockup="tee"]{background:url('/api/tee-base') center top/100% auto no-repeat}

/* Restrained monochrome instrument-panel finish. */
.monitor-screen button,.monitor-screen .purchase-link,#fontDialog button{
 border-radius:3px 10px 3px 10px;
 transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.monitor-screen .tools-row button,.monitor-screen .footer-actions button,.monitor-screen .display-options button{
 background-image:linear-gradient(135deg,rgba(255,255,255,.075),transparent 65%);
 letter-spacing:.65px;
}
.monitor-screen button[aria-pressed=true],#fontDialog button[aria-pressed=true]{
 box-shadow:inset 2px 0 0 rgba(255,255,255,.8),inset 0 1px 0 rgba(255,255,255,.12);
}
.monitor-screen button:focus-visible,.monitor-screen a:focus-visible,#fontDialog button:focus-visible{
 outline:1px solid rgba(255,255,255,.9);outline-offset:3px;
}
@media(hover:hover){
 .monitor-screen button:not(:disabled):hover,.monitor-screen .purchase-link:hover,#fontDialog button:not(:disabled):hover{
 box-shadow:inset 2px 0 0 rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.2);
 }
}
.monitor-screen .activate-button{border-radius:3px 14px 3px 14px;letter-spacing:2.4px;border-color:rgba(255,255,255,.5)}
.engine-telemetry{border-radius:2px 9px 2px 9px;border-left-color:rgba(255,255,255,.5);background:linear-gradient(90deg,rgba(255,255,255,.04),transparent 65%)}
.hud-strip{font-variant-numeric:tabular-nums;letter-spacing:.75px}
.signal-caption{position:relative;gap:12px;align-items:center}
.signal-caption::after{content:"";height:3px;flex:1;min-width:12px;opacity:.22;background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 7px);pointer-events:none}
.signal-caption>span:last-child{order:2}
.controls .adjust[data-channel]::before{content:attr(data-channel);position:absolute;top:7px;left:3px;font-size:7px;line-height:1;letter-spacing:1px;opacity:.28;pointer-events:none}
.signal-dial{outline:1px dashed rgba(255,255,255,.16);outline-offset:3px}
.signal-dial.is-turning{outline-color:rgba(255,255,255,.5)}
.dial-readout{font-variant-numeric:tabular-nums}
.monitor-screen #text,#fontDialog #fontSearch{border-radius:2px 8px 2px 8px;border-bottom-color:rgba(255,255,255,.5);caret-color:#fff}
.monitor-screen #text:focus,#fontDialog #fontSearch:focus{border-color:rgba(255,255,255,.7);outline:1px solid rgba(255,255,255,.15);outline-offset:2px}
#previews{position:relative}
#previews::before,#previews::after{content:"";position:absolute;z-index:4;width:11px;height:11px;border-color:rgba(255,255,255,.28);border-style:solid;pointer-events:none}
#previews::before{top:0;left:0;border-width:1px 0 0 1px}
#previews::after{bottom:0;right:0;border-width:0 1px 1px 0}
#fontDialog{border-radius:3px 14px 3px 14px}
#fontDialog .dialog-header{border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:10px}
.font-option{border-bottom:1px solid rgba(255,255,255,.06)}
.monitor-screen .glyph-tile{border-radius:2px 6px 2px 6px}
.boot-telemetry,.boot-footer{border-color:rgba(255,255,255,.25)}
@media(max-width:768px){
 .controls .adjust[data-channel]::before{font-size:6px;top:5px;left:1px;letter-spacing:0}
 .monitor-screen .tools-row button,.monitor-screen .footer-actions button{letter-spacing:.25px}
 .hud-strip{letter-spacing:.3px}
 .signal-dial{outline-offset:2px}
 .monitor-screen .activate-button{letter-spacing:1.4px}
}
@media(prefers-reduced-motion:reduce){.monitor-screen button,.monitor-screen .purchase-link,#fontDialog button{transition:none}}

/* Precision terminal treatment: functional readouts and etched geometry. */
.signal-register{display:flex;align-items:center;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;padding:9px 2px;margin:4px 0 9px;border-top:1px solid rgba(255,255,255,.22);border-bottom:1px dashed rgba(255,255,255,.15);font-size:9px;letter-spacing:1.2px;color:rgba(255,255,255,.46);font-variant-numeric:tabular-nums}
.signal-register b{font-weight:400;color:rgba(255,255,255,.85);margin-left:7px}
.register-code{opacity:.6;letter-spacing:2px}
.monitor-screen button,.monitor-screen .purchase-link,#fontDialog button{border-radius:1px 9px 1px 9px;border-top-color:rgba(255,255,255,.48);border-bottom-color:rgba(255,255,255,.2);background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.015) 60%)}
.monitor-screen .tools-row button,.monitor-screen .display-options button{border-left:2px solid rgba(255,255,255,.3);font-variant-numeric:tabular-nums}
.monitor-screen .tools-row button[aria-pressed=true],.monitor-screen .display-options button[aria-pressed=true]{border-left-color:#fff;background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.035));box-shadow:inset 0 -1px 0 rgba(255,255,255,.45)}
.monitor-screen .tools-row button[aria-pressed=true]::before{content:"▸ ";font-size:.8em}
.monitor-screen .controls .adjust>label{letter-spacing:1.2px;color:rgba(255,255,255,.8)}
.controls .adjust[data-channel]::before{content:attr(data-channel) " /";opacity:.45;font-size:7px}
.signal-dial{outline:none;background:radial-gradient(circle,rgba(255,255,255,.035) 0 24%,transparent 25%)}
.signal-dial::after{border-color:rgba(255,255,255,.45);border-style:dashed}
.dial-ticks{opacity:.65;background:repeating-conic-gradient(from -135deg,#fff 0deg 1deg,transparent 1deg 6deg)}
.dial-arc{inset:8%;mask:radial-gradient(transparent 69%,#000 71%);opacity:.85}
.dial-readout{letter-spacing:.5px}
.monitor-screen .controls .adjust>input[type=number]{border-bottom:1px solid rgba(255,255,255,.3);border-radius:0;font-variant-numeric:tabular-nums}
.hud-strip>span:not(:first-child){padding-left:8px;border-left:1px solid rgba(255,255,255,.23)}
.engine-telemetry{position:relative;border-right:0;border-radius:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 12px)}
.engine-telemetry::after{content:"";position:absolute;right:0;top:0;width:10px;height:10px;border-top:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.5);pointer-events:none}
#previews::before,#previews::after{width:20px;height:14px;border-color:rgba(255,255,255,.4)}
.signal-caption{opacity:.6;letter-spacing:1.7px}
.signal-caption::before{width:24px;background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 3px)}
.boot-coordinate{position:absolute;top:45%;font:9px/1.9 Inconsolata,monospace;letter-spacing:1.5px;color:rgba(255,255,255,.35);pointer-events:none}
.boot-coordinate-left{left:5%;border-left:1px solid rgba(255,255,255,.3);padding-left:9px}
.boot-coordinate-right{right:5%;text-align:right;border-right:1px solid rgba(255,255,255,.3);padding-right:9px}
.boot-orbit{border-style:solid;border-color:rgba(255,255,255,.16)}
.boot-orbit::after{border-style:dashed}
#fontDialog .dialog-header{border-bottom-style:dashed;letter-spacing:2px}
.font-option .choose-font{border-left:2px solid rgba(255,255,255,.2)}
@media(max-width:768px){
 .signal-register{font-size:7px;letter-spacing:.45px;gap:6px 10px;padding:7px 0}
 .signal-register b{margin-left:3px}
 .register-code,.boot-coordinate{display:none}
 .monitor-screen .controls .adjust>label{letter-spacing:.35px}
 .controls .adjust[data-channel]::before{font-size:6px}
 .hud-strip>span:not(:first-child){padding-left:4px}
 .signal-caption{letter-spacing:.55px}
 #previews::before,#previews::after{width:12px;height:10px}
}

/* Instrument console: real channel parameters, calibrated scales, etched rails. */
.channel-matrix{margin:10px 0 2px;font:9px/1.5 Inconsolata,monospace;letter-spacing:.65px;font-variant-numeric:tabular-nums}
.channel-register{display:grid;grid-template-columns:48px minmax(0,1fr) auto 64px;gap:10px;align-items:center;min-height:25px;border-bottom:1px solid rgba(255,255,255,.12);padding:4px 0}
.channel-register[hidden]{display:none}
.channel-ident{color:#fff;border-left:2px solid rgba(255,255,255,.7);padding-left:6px}
.channel-typeface{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.65}
.channel-values{opacity:.85;white-space:nowrap}
.channel-limit{text-align:right;opacity:.5}
.dial-scale{position:absolute;left:0;right:0;bottom:-9px;display:flex;justify-content:space-between;font:7px/1 Inconsolata,monospace;letter-spacing:0;color:rgba(255,255,255,.55);pointer-events:none}
.dial-index{opacity:.4}
.controls .adjust{padding-bottom:15px}
.dial-ticks{background:repeating-conic-gradient(from -135deg,rgba(255,255,255,.95) 0deg 1deg,transparent 1deg 15deg),repeating-conic-gradient(from -135deg,rgba(255,255,255,.35) 0deg .7deg,transparent .7deg 3deg)}
.signal-dial::after{border-style:solid;border-color:rgba(255,255,255,.3);border-left-color:rgba(255,255,255,.75);border-right-color:rgba(255,255,255,.75)}
.signal-dial.is-turning::after{border-color:#fff}
.monitor-screen .tools-row button,.monitor-screen .display-options button{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.09),transparent 45%);letter-spacing:.8px}
.monitor-screen .tools-row button::after,.monitor-screen .display-options button::after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:3px;border-bottom:1px solid rgba(255,255,255,.4);border-right:1px solid rgba(255,255,255,.4);pointer-events:none}
.monitor-screen .tools-row button[aria-pressed=true]::after,.monitor-screen .display-options button[aria-pressed=true]::after{background:#fff;border-color:#fff}
.signal-register{border-top:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 24px)}
.signal-caption{border-top:1px solid rgba(255,255,255,.1);padding-top:6px}
.hud-strip{background:linear-gradient(90deg,rgba(255,255,255,.045),transparent);border-left:2px solid rgba(255,255,255,.55);padding-left:7px}
.boot-telemetry{border-bottom-style:dashed;letter-spacing:2px}
.boot-coordinate{font-variant-numeric:tabular-nums}
.boot-orbit{outline:1px dashed rgba(255,255,255,.12);outline-offset:7px}
.font-option .choose-font{border-bottom:1px solid rgba(255,255,255,.15);border-radius:0}
@media(max-width:768px){
 .channel-matrix{font-size:7px;letter-spacing:.15px;margin-top:6px}
 .channel-register{grid-template-columns:32px minmax(0,1fr) 48px;gap:4px;min-height:20px}
 .channel-values{grid-column:2;grid-row:2;font-size:7px;opacity:.6}
 .channel-limit{grid-column:3;grid-row:1}
 .dial-scale{font-size:6px;bottom:-7px}
 .controls .adjust{padding-bottom:12px}
 .monitor-screen .tools-row button{letter-spacing:.2px}
}

/* Boot terminal and instrument bus details. No artificial loading delay. */
.boot-console{position:relative;z-index:10;width:min(82%,620px);padding:25px;background:rgba(0,0,0,.88);border-left:2px solid rgba(255,255,255,.75);border-top:1px solid rgba(255,255,255,.25);font-family:Inconsolata,monospace;text-align:left}
.boot-console[hidden]{display:none}
.boot-console::after{content:"";position:absolute;right:0;bottom:0;width:32px;height:12px;border-right:1px solid #fff;border-bottom:1px solid #fff;opacity:.6;pointer-events:none}
.boot-kicker{font-size:10px;letter-spacing:2px;opacity:.6}
.boot-console h2{font-size:clamp(19px,3vw,32px);font-weight:400;letter-spacing:3px;margin:12px 0 20px}
.boot-console h2 span{display:block;font-size:9px;letter-spacing:2px;opacity:.4;margin-top:5px}
.boot-trace{height:5px;overflow:hidden;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 4px,transparent 4px 7px)}
.boot-trace i{display:block;width:24%;height:100%;background:#fff;opacity:.7;animation:boot-scan 1.4s linear infinite}
@keyframes boot-scan{from{transform:translateX(-110%)}to{transform:translateX(520%)}}
.boot-checks{padding:0;margin:20px 0;list-style:none;font-size:11px;letter-spacing:.7px}
.boot-checks li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
.boot-checks b{font-weight:400;opacity:.6}
.boot-console p{font-size:12px;opacity:.7;line-height:1.5}
.boot-address{font-size:8px;opacity:.4;letter-spacing:1px;margin-top:20px}
.activation-gate.is-booting>.activation-logo,.activation-gate.is-booting>.activation-button-wrap,.activation-gate.is-booting>.boot-coordinate,.activation-gate.is-booting>.boot-orbit{visibility:hidden}
.boot-console[aria-busy=false] .boot-trace i{animation:none;opacity:.2}
.module-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 6px;font:9px/1.4 Inconsolata,monospace;letter-spacing:1.7px;opacity:.55}
.module-heading::before{content:"";width:5px;height:5px;border:1px solid currentColor;flex:none;transform:rotate(45deg)}
.module-heading>span:first-of-type{flex:1}
.module-heading>span:last-child{font-size:8px;text-align:right;opacity:.7}
.controls{border-top:1px dashed rgba(255,255,255,.17)}
.controls .adjust[data-channel]::before{content:"CH." attr(data-channel);font-size:6px;letter-spacing:.4px}
.monitor-screen .font-trigger{border-left:2px solid rgba(255,255,255,.5);padding-left:12px;background:linear-gradient(90deg,rgba(255,255,255,.045),transparent)}
.channel-matrix{border-left:1px solid rgba(255,255,255,.12);padding-left:7px}
.channel-limit{border-left:1px dotted rgba(255,255,255,.25);padding-left:4px}
.dial-pointer{filter:drop-shadow(0 0 1px rgba(255,255,255,.5))}
.output-rail{border-top:1px dashed rgba(255,255,255,.22);padding-top:8px;margin-top:14px}
#explorer{border-top:1px dashed rgba(255,255,255,.22);padding-top:10px}
#fontDialog .font-option{position:relative}
#fontDialog .font-option::after{content:"";position:absolute;right:0;bottom:0;width:8px;height:1px;background:rgba(255,255,255,.4);pointer-events:none}
@media(max-width:768px){
 .boot-console{width:88%;padding:14px}
 .boot-kicker{font-size:7px;letter-spacing:1px}
 .boot-console h2{font-size:20px;margin:8px 0 12px}
 .boot-checks{font-size:8px;margin:12px 0}
 .boot-console p{font-size:10px}
 .boot-address{font-size:6px;letter-spacing:.4px}
 .module-heading{font-size:7px;letter-spacing:.5px;gap:6px}
 .module-heading>span:last-child{font-size:6px}
 .channel-matrix{padding-left:4px}
}
@media(prefers-reduced-motion:reduce){.boot-trace i{animation:none;width:100%;opacity:.3}}

.activation-gate.is-booting>.activation-logo{display:none}
#bootRetry[hidden]{display:none}

.activation-gate.is-booting>.activation-logo{display:none}
#bootRetry[hidden]{display:none}