:root{
  --bg:#0a0a0a; --panel:#101010; --panel2:#161616; --line:#242424;
  --fg:#f2f2f2; --dim:#8a8a8a; --faint:#4a4a4a;
  --accent:#f2f2f2; --red:#ff3b30;
  --shadow-ring:#1e1e1e; --shadow-drop:rgba(0,0,0,.55);
}

/* ---------- light theme ---------- */
[data-theme="light"]{
  --bg:#e8e8e8; --panel:#f0f0f0; --panel2:#fafafa; --line:#d0d0d0;
  --fg:#0a0a0a; --dim:#666666; --faint:#999999;
  --accent:#0a0a0a; --red:#e02818;
  --shadow-ring:#d0d0d0; --shadow-drop:rgba(0,0,0,.12);
}

/* smooth theme transition */
body, aside, header, .stagebar, .sect, .divider, .panel-hints{
  transition:background-color .2s, color .2s, border-color .2s;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:"Ndot 57","DM Mono",ui-monospace,monospace;
  display:flex; flex-direction:column; overflow:hidden;
  font-size:13px; letter-spacing:.02em;
}
button{font-family:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select{font-family:inherit; color:inherit}

/* ---------- Ndot 57: Nothing's dot-matrix typeface ---------- */
@font-face{
  font-family:"Ndot 57";
  src:url("fonts/Ndot-57.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ---------- dot-matrix type ---------- */
.dotword{font-family:"Ndot 57","DM Mono",monospace; font-weight:400; letter-spacing:.08em; white-space:nowrap}

/* ---------- header ---------- */
header{
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:18px;
  padding:0 22px; height:60px; flex:0 0 auto;
}
header .logo{display:flex; align-items:center; gap:14px}

/* DotmSquare5 logo container */
.logo-dots{
  display:flex; align-items:center; justify-content:center;
  width:fit-content; height:fit-content;
}
.dotm-square-5-dot{ border-radius:50% }

.logo-text{display:flex; flex-direction:column; gap:2px}
.logo-text h1{font-size:15px; letter-spacing:.14em}

.header-meta{
  flex:1; display:flex; align-items:center; justify-content:flex-end; gap:18px;
}
.meta-item{display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.1em; color:var(--dim)}
.meta-item .meta-lbl{color:var(--faint); font-size:10px; letter-spacing:.12em}
.meta-item .meta-val{color:var(--fg)}
.meta-item.status{color:var(--red)}
.header-credit{
  text-decoration:none; font-size:11px; letter-spacing:.1em; white-space:nowrap;
}
.header-credit .hc-dim{color:var(--dim)}
.header-credit .hc-fg{
  color:var(--fg);
  border-bottom:1px solid var(--line); padding-bottom:1px; transition:.15s;
}
.header-credit:hover .hc-fg{color:#fff; border-bottom-color:var(--fg)}
[data-theme="light"] .header-credit:hover .hc-fg{color:#000; border-bottom-color:#000}
.status-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--red);
  animation:blink 1s steps(2) infinite;
}
@keyframes blink{50%{opacity:.2}}
#clock{color:var(--dim); font-size:11px; letter-spacing:.1em}

/* ---------- layout ---------- */
main{flex:1; display:flex; min-height:0}
aside{
  width:300px; flex:0 0 300px; border-right:1px solid var(--line);
  background:var(--panel); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  display:flex; flex-direction:column;
}
.stage{flex:1; display:flex; flex-direction:column; min-width:0}
.canvas-wrap{
  flex:1; display:flex; align-items:center; justify-content:center; padding:28px; min-height:0; position:relative;
  overflow:hidden;
  /* workspace dot background — kept from overhaul */
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:24px 24px;
}
.preview-frame{
  position:relative; width:100%; height:100%; max-width:860px;
  display:flex; align-items:center; justify-content:center;
}
.preview-box{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center}
#preview{
  width:100%; height:100%; max-width:860px; border-radius:0; position:relative; overflow:hidden;
  box-shadow:0 0 0 1px var(--shadow-ring), 0 30px 80px var(--shadow-drop);
  transform-origin:center center;
  cursor:grab; touch-action:none; user-select:none;
}
#preview.dragging{cursor:grabbing}
#preview canvas{position:absolute; inset:0; width:100%; height:100%}
#preview .grain{position:absolute; inset:-100px; pointer-events:none; opacity:.5}

/* radial gradient center handle */
.radial-center{
  position:absolute; width:28px; height:28px;
  transform:translate(-50%,-50%);
  pointer-events:auto; cursor:grab; z-index:10;
  touch-action:none;
}
.radial-center:active{cursor:grabbing}
.rc-ring{
  position:absolute; inset:4px;
  border:1px solid var(--red); border-radius:50%;
  opacity:.6; pointer-events:none;
}
.rc-dot{
  position:absolute; top:50%; left:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--red); transform:translate(-50%,-50%);
  pointer-events:none;
}

/* mesh gradient handles container */
#meshHandles{position:absolute; inset:0; pointer-events:none; z-index:10}

/* mesh gradient handles — red ring + dot like radial handle, number on hover */
.mesh-handle{
  position:absolute; width:24px; height:24px;
  transform:translate(-50%,-50%);
  pointer-events:auto; cursor:grab;
  touch-action:none;
}
.mesh-handle:active{cursor:grabbing}
.mh-ring{
  position:absolute; inset:3px;
  border:1px solid var(--red); border-radius:50%;
  opacity:.7; pointer-events:none;
  transition:opacity .15s;
}
.mh-dot{
  position:absolute; top:50%; left:50%;
  width:5px; height:5px; border-radius:50%;
  background:var(--red); transform:translate(-50%,-50%);
  pointer-events:none; transition:opacity .15s;
}
.mh-label{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:9px; color:#fff; pointer-events:none;
  opacity:0; transition:opacity .15s;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  mix-blend-mode:difference;
}
.mesh-handle:hover .mh-ring{opacity:1}
.mesh-handle:hover .mh-dot{opacity:0}
.mesh-handle:hover .mh-label{opacity:1}

/* corner brackets — red viewfinder */
.preview-corner{
  position:absolute; width:14px; height:14px;
  border:1px solid var(--red); z-index:15; pointer-events:none;
}
.preview-corner.tl{border-right:0; border-bottom:0}
.preview-corner.tr{border-left:0; border-bottom:0}
.preview-corner.bl{border-right:0; border-top:0}
.preview-corner.br{border-left:0; border-top:0}

/* grid overlay — blend mode and opacity set dynamically via JS */
.grid-overlay{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s;
  background-size:50px 50px;
}

/* preview info overlay */
.preview-info{
  position:absolute; top:14px; left:18px; right:18px;
  display:flex; justify-content:space-between;
  font-size:10px; letter-spacing:.12em; color:var(--dim);
  z-index:1; pointer-events:none;
}
#dimLabel{color:var(--fg)}
#cssHint{color:var(--faint)}

/* canvas readout — bottom right (inverts against gradient via difference blend) */
.canvas-readout{
  position:absolute; bottom:18px; right:18px;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-size:9px; letter-spacing:.12em; color:#999;
  z-index:1; pointer-events:none; text-align:right; line-height:1.6;
  mix-blend-mode:difference;
}
.canvas-readout b{color:#fff; font-weight:400}

/* zoom overlay — floating control */
.zoom-overlay{
  position:absolute; bottom:18px; left:18px;
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; background:var(--panel2);
  border:1px solid var(--line); border-radius:999px;
  z-index:20; user-select:none;
}
.zoom-label{font-size:10px; letter-spacing:.18em; color:var(--dim)}
.zoom-overlay input[type=range]{width:80px}
.zoom-overlay .val{font-size:11px; color:var(--fg); min-width:36px; text-align:right}

.stagebar{
  flex:0 0 auto; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:10px; padding:12px 22px; flex-wrap:wrap;
}
.stagebar-left{display:flex; align-items:center; gap:14px}
.stagebar-left select{width:auto; min-width:130px}
#customDimsRow{display:inline-flex; align-items:center; gap:6px}
.stagebar-actions{flex:1; display:flex; align-items:center; justify-content:flex-end; gap:8px}

/* ---------- panel ---------- */
.sect{border-bottom:1px solid var(--line)}
.sect-h{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; user-select:none; cursor:pointer;
}
.sect-h .sect-num{font-size:10px; color:var(--red); letter-spacing:.1em}
.sect-h .sect-t{flex:1; font-size:11px; letter-spacing:.22em; color:var(--dim)}
.sect-h .car{color:var(--faint); font-size:10px; transition:transform .2s}
.sect.open .sect-h .car{transform:rotate(90deg)}
.sect-b{display:none; padding:4px 18px 18px}
.sect.open .sect-b{display:block}
.sect-b.presets-sect{padding-top:18px}

/* divider */
.divider{height:1px; background:var(--line); margin:10px 0}

/* preset grid */
.presets{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.preset{
  aspect-ratio:1; border-radius:10px; border:1px solid transparent; cursor:pointer;
  position:relative; overflow:hidden; transition:border-color .15s;
}
.preset:hover{border-color:var(--faint)}
.preset.active{border-color:var(--fg)}
.preset i{position:absolute; inset:0}
.preset .idx{
  position:absolute; top:4px; left:6px; z-index:2;
  font-size:8px; color:#fff; letter-spacing:.05em;
  mix-blend-mode:difference;
}
.preset b{
  position:absolute; left:6px; bottom:4px; font-size:8px; font-weight:400;
  color:#fff; letter-spacing:.08em;
  mix-blend-mode:difference;
}
.preset .jp{
  position:absolute; left:6px; bottom:15px; z-index:2;
  font-size:10px; color:#fff; letter-spacing:.05em;
  mix-blend-mode:difference;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Ndot 57",sans-serif;
}

/* stop rows */
.stops{display:flex; flex-direction:column; gap:8px}
.stop{display:flex; align-items:center; gap:12px; padding:14px 0}
.stop .meta{flex:1; min-width:0}
.stop .name{font-size:10px; letter-spacing:.18em; color:var(--dim); margin-bottom:5px; display:flex; justify-content:space-between}
.stop .name .hex{color:var(--faint)}
.stop input[type=range]{width:100%}
.stop .pos{width:38px; text-align:right; color:var(--dim); font-size:11px}
.stop .del{color:var(--faint); font-size:14px; width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center}
.stop .del:hover{color:var(--red)}
.addstop{
  border:1px dashed var(--faint); border-radius:9px; padding:9px 0; width:100%;
  color:var(--dim); font-size:10px; letter-spacing:.2em; transition:.15s;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.addstop:hover{color:var(--fg); border-color:var(--dim)}

/* generic row */
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0}
.row .lbl{font-size:10px; letter-spacing:.18em; color:var(--dim)}
.ctrl{display:flex; align-items:center; gap:10px; flex:1; justify-content:flex-end}
.row .val{font-size:11px; color:var(--fg); min-width:40px; text-align:right}
/* ---------- native select — custom chevron arrow ---------- */
select{
  -webkit-appearance:none; appearance:none;
  background:var(--panel2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid var(--line); border-radius:6px;
  padding:7px 30px 7px 10px; font-size:11px; outline:0; width:130px;
  cursor:pointer; color:var(--fg); font-family:inherit;
  transition:border-color .15s;
}
select:hover{border-color:var(--dim)}
select:focus{border-color:var(--fg)}

/* ---------- native color picker — unified swatch ---------- */
input[type=color]{
  -webkit-appearance:none; appearance:none;
  border:1px solid var(--line); border-radius:6px;
  background:var(--panel2); padding:3px; cursor:pointer;
  transition:border-color .15s;
}
input[type=color]:hover{border-color:var(--dim)}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:none; border-radius:3px}
input[type=color]::-moz-color-swatch{border:none; border-radius:3px}

/* stop colour pickers — larger */
.stop input[type=color]{width:40px; height:40px}
.stop input[type=color]::-webkit-color-swatch{border-radius:4px}

/* grain speckle colours — compact */
.grain-colours input[type=color]{width:32px; height:28px}

/* grid colour swatch */
.color-swatch{width:40px; height:28px}

/* ---------- SLIDERS — vertical pill thumb, thin track ---------- */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:120px; height:18px; background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:2px; background:var(--faint)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:8px; height:16px;
  background:var(--fg); border:none; border-radius:4px; margin-top:-7px; cursor:pointer;
  transition:transform .1s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.3)}
input[type=range]::-moz-range-track{height:2px; background:var(--faint)}
input[type=range]::-moz-range-thumb{
  width:8px; height:16px; background:var(--fg);
  border:none; border-radius:4px; cursor:pointer;
}

/* ---------- SWITCHES — kept from overhaul (square toggle) ---------- */
.switch{
  width:36px; height:20px;
  border:1px solid var(--line); border-radius:999px;
  position:relative; background:var(--panel2);
  transition:.15s; flex:0 0 auto;
}
.switch i{
  position:absolute; top:3px; left:3px;
  width:12px; height:12px; border-radius:50%;
  background:var(--faint); transition:.15s;
}
.switch:hover{border-color:var(--dim)}
.switch:hover i{background:var(--dim)}
.switch.on{border-color:var(--fg)}
.switch.on i{left:19px; background:var(--fg)}

/* lock buttons */
.lock-btn{
  width:20px; height:20px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:5px;
  background:var(--panel2); color:var(--faint);
  font-size:9px; display:flex; align-items:center; justify-content:center;
  transition:.15s; user-select:none;
}
.lock-btn:hover{border-color:var(--dim); color:var(--dim)}
.lock-btn.on{border-color:var(--fg); color:var(--fg)}
.lock-btn .ic-locked{display:none}
.lock-btn .ic-unlocked{display:block}
.lock-btn.on .ic-locked{display:block}
.lock-btn.on .ic-unlocked{display:none}

/* grain colour inputs */
.grain-colours{display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end}

/* custom dimension inputs */
.dim-input{
  width:56px; background:var(--panel2); border:1px solid var(--line);
  border-radius:7px; color:var(--fg); font-family:inherit; font-size:11px;
  text-align:center; padding:6px; outline:0; -moz-appearance:textfield;
  transition:border-color .15s;
}
.dim-input::-webkit-outer-spin-button,
.dim-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.dim-input:hover{border-color:var(--dim)}
.dim-input:focus{border-color:var(--fg)}
.dim-x{color:var(--faint); font-size:10px; user-select:none}

/* buttons */
.btn{
  border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  font-size:10px; letter-spacing:.2em; color:var(--fg); transition:.15s; background:var(--panel2);
}
.btn:hover{border-color:var(--dim)}
.btn.solid{background:var(--fg); color:#0a0a0a; border-color:var(--fg)}
.btn.solid:hover{background:#fff}
.btn.red{background:var(--red); color:#fff; border-color:var(--red)}
.btn.red:hover{background:#ff5a52; border-color:#ff5a52}
.btn.small{padding:6px 12px; font-size:9px}
.btn.icon{padding:6px 8px; display:inline-flex; align-items:center; justify-content:center}

/* inline value edit input (replaces .val text on double-click) */
.val-input{
  width:44px; background:var(--panel2); border:1px solid var(--dim);
  border-radius:4px; color:var(--fg); font-family:inherit; font-size:11px;
  text-align:right; padding:1px 4px; outline:0;
}
.val-input::-webkit-outer-spin-button,
.val-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.val-input{-moz-appearance:textfield; appearance:textfield}

/* panel footer */
.panel-footer{
  margin-top:auto; padding:12px 18px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-size:9px; letter-spacing:.15em; color:var(--faint); flex:0 0 auto;
}
.credit-link{
  color:var(--dim); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:1px; transition:.15s;
}
.credit-link:hover{color:var(--fg); border-bottom-color:var(--fg)}

/* panel hints */
.panel-hints{
  padding:8px 18px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-size:8px; letter-spacing:.12em; color:var(--faint); flex:0 0 auto;
}

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--panel2); border:1px solid var(--line); color:var(--fg);
  padding:10px 22px; border-radius:999px; font-size:10px; letter-spacing:.18em;
  opacity:0; transition:.25s; pointer-events:none; z-index:99;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:2px}

@media (max-width:900px){
  main{flex-direction:column-reverse}
  aside{width:100%; flex:0 0 45%; border-right:0; border-top:1px solid var(--line)}
  .header-meta .meta-item:not(.status),.header-meta .header-credit{display:none}
}