#shader-layer {
  --start: var(--blueprints-shader-start, 50%);
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--blueprints-shader-opacity, .72);
  clip-path: inset(var(--start) 0 0);
  mask-image: var(--blueprints-fade, linear-gradient(transparent, #000 30%));
  mask-position: bottom;
  mask-size: 100% calc(100% - var(--start));
  mask-repeat: no-repeat;
}
#shader-layer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  filter: var(--blueprints-filter, none);
}
body.shader-frame{margin:0;overflow:hidden;background:#101010}
.shader-frame canvas{display:block;width:100%;height:100%}

html[data-immersive] {
  --blueprints-bg: #131414;
  --panel: #1d201c;
  --edge: #51574e;
  --paper: #f4f5f2;
  --muted: #c7cac4;
  --accent-text: color-mix(in srgb, var(--aixia-accent, #bfff00) 70%, var(--paper));
}
html[data-immersive][data-theme="day"], html[data-immersive][data-theme="day"] body {
  color-scheme: light;
  --blueprints-bg: #fafaf7;
  --panel: #fff;
  --edge: #a8b0a5;
  --paper: #191d17;
  --muted: #475146;
  --accent-text: color-mix(in srgb, var(--aixia-accent, var(--blueprints-idle-accent, #bfff00)) 45%, var(--paper));
}
html[data-immersive][data-theme="day"] #shader-layer { opacity: var(--blueprints-shader-opacity, .33); }
html[data-immersive]:not([data-accent-active]):not([data-theme="day"]) { --accent-text: var(--blueprints-idle-text, #bfff00); }
#display-settings { margin: auto; }

#display-settings {
  width: min(400px, calc(100% - 24px));
  max-height: 88dvh;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 3px;
  color: var(--paper);
}
#display-settings::backdrop { background: #0009; }
.display-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.display-heading h2 { font-size: 22px; margin: 0; }
#display-settings button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--edge);
  background: var(--panel);
  color: var(--paper);
  border-radius: 3px;
  font: inherit;
  cursor: pointer;
}
.display-row { display:flex; align-items:center; gap:9px; min-height:44px; cursor:pointer; }
#display-settings fieldset { border:1px solid var(--edge); padding:6px 12px; }
#display-settings :is(input[type="radio"],input[type="checkbox"],input[type="range"]) { accent-color:var(--accent-text); }
.display-note { margin: 6px 0 10px; color: var(--muted); font-size: 13px; }
.display-custom { display:flex; flex-wrap:wrap; gap:10px; margin-block:6px; }
.display-custom[hidden] { display:none; }
.display-custom label { display:grid; gap:4px; font-size:13px; }
.display-custom input { width:60px; height:44px; padding:4px; cursor:pointer; }
.palette-strip { height:8px; width:58px; border-radius:2px; margin-left:auto; }
.palette-strip.spectrum { background:linear-gradient(90deg,#39ff14,#2dcfff,#ab51f4,#ff9555); }
.palette-strip.ocean { background:linear-gradient(90deg,#50f6d1,#41baff,#965fff); }
.palette-strip.ember { background:linear-gradient(90deg,#ef5ea1,#fd7355,#ffd26b); }
.display-custom { display:grid; gap:8px; }
.shader-stop { display:flex; flex-wrap:wrap; gap:8px; align-items:end; padding:8px 0; border-bottom:1px solid var(--edge); }
.shader-stop>span { flex-basis:100%; font-size:13px; font-weight:650; }
.shader-stop input[type="number"] { width:90px; height:44px; font:inherit; border:1px solid var(--edge); background:var(--panel); color:var(--paper); }

.display-appearance { margin-bottom: 12px; }
.display-slider, .display-off-color { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.display-slider { font-size:14px; margin-block:8px 0; }
.display-slider output { font-variant-numeric:tabular-nums; }
.display-appearance input[type="range"] { display:block; width:100%; height:44px; cursor:pointer; }
.display-off-color input { width:54px; height:44px; padding:4px; cursor:pointer; }

#display-settings select, .fade-stop input {
  min-height: 44px;
  border: 1px solid var(--edge);
  background: var(--panel);
  color: var(--paper);
  font: inherit;
}
#display-settings select { padding-inline: 8px; }
#display-settings button:disabled { opacity: .5; cursor: default; }
.fade-preview { height:70px; overflow:hidden; background:var(--blueprints-bg); border:1px solid var(--edge); }
.fade-preview > div {
  width:100%;
  height:100%;
  mask-image:var(--blueprints-fade);
  overflow:hidden;
}
.fade-preview > div::before {
  content:'';
  display:block;
  width:100%;
  height:100%;
  background-image:linear-gradient(var(--accent-text) 1px, transparent 1px), linear-gradient(90deg, var(--accent-text) 1px, transparent 1px);
  background-size:14px 14px;
  filter:var(--blueprints-filter, none);
}
.fade-stop input { width:72px; }