:root{
  --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-code:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --space-1:4px;--space-2:8px;--space-3:10px;--space-4:12px;--space-5:16px;
  --space-6:20px;--space-7:24px;
  --radius-inset:6px;--radius-control:8px;--radius-group:9px;--radius-panel:12px;

  --bg:#08050d;
  --panel:#110a19;
  --panel2:#180e23;
  --panel3:#24142f;
  --surface-hover:#2d1938;
  --line:#4a2b58;
  --line2:#674276;
  --control-border:#9576a2;

  --text:#cdddb7;
  --text-strong:#f6efc4;
  --heading:#ece49d;
  --muted:#91a085;
  --accent:#e1ec1a;
  --accent-hover:#f0f562;
  --accent-ink:#08050d;
  --accent2:#c429a3;
  --info:#088dbf;
  --good:#78c972;
  --warn:#ece49d;
  --bad:#ff647c;
  --code-bg:#061005;
  --code-text:#a8d59a;

  --shadow:0 18px 45px rgba(3,1,5,.55);
  --shadow-soft:0 10px 28px rgba(3,1,5,.34);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{
  min-width:320px;
  color:var(--text);
  font:14px/1.5 var(--font-ui);
  background:
    radial-gradient(circle at 88% 8%,rgba(196,41,163,.09),transparent 24%),
    radial-gradient(circle at 68% 24%,rgba(225,236,26,.035),transparent 30%),
    var(--bg);
  overflow:hidden;
}

button,input,select{font:inherit;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}
[hidden]{display:none!important}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}
::selection{background:var(--accent2);color:#fff}

.app-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  grid-template-areas:"workspace inspector";
  gap:12px;
  width:100%;
  height:100dvh;
  padding:12px;
}

/* Inspector */
.inspector{
  grid-area:inspector;
  min-width:0;
  min-height:0;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line2) transparent;
  padding:16px 14px 18px;
  border:1px solid var(--line2);
  border-radius:var(--radius-panel);
  background:linear-gradient(180deg,rgba(24,14,35,.98),rgba(17,10,25,.98));
  box-shadow:var(--shadow-soft);
}

.inspector-header{padding:1px 1px 2px}
.app-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  color:var(--accent);
  font:800 10px/1 var(--font-code);
  letter-spacing:.11em;
  text-transform:uppercase;
}
.app-kicker::before{
  content:"";
  width:20px;
  height:1px;
  flex:0 0 auto;
  background:var(--accent);
}
.inspector h1{
  margin:0;
  color:var(--text-strong);
  font-size:18px;
  line-height:1.15;
  font-weight:780;
  letter-spacing:-.025em;
}
.inspector-header p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.45;
}

.control-section{
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.section-title{
  margin:0 0 10px;
  color:var(--heading);
  font-size:10.5px;
  font-weight:800;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.field{
  display:grid;
  min-width:0;
  gap:6px;
}
.field-gap{margin-top:10px}
.field label,
.range-head label{
  color:var(--heading);
  font-size:12px;
  font-weight:700;
  line-height:1.25;
}
input[type="text"],
input[type="number"],
select{
  width:100%;
  height:36px;
  min-width:0;
  padding:0 10px;
  border:1px solid var(--control-border);
  border-radius:var(--radius-control);
  background:var(--panel2);
  color:var(--text);
  outline:none;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
select:hover,
input[type="text"]:hover,
input[type="number"]:hover{background:var(--surface-hover)}
input[type="text"]{
  background:var(--code-bg);
  color:var(--code-text);
  font:12px/1 var(--font-code);
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(225,236,26,.12);
}

.control-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.control-grid-span{grid-column:1/-1}
.range-field{
  min-width:0;
  padding:9px 9px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-group);
  background:rgba(24,14,35,.62);
}
.range-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.range-head label{
  min-width:0;
  overflow-wrap:anywhere;
}
.range-head output{
  flex:0 0 auto;
  color:var(--text-strong);
  font:11px/1 var(--font-code);
  font-variant-numeric:tabular-nums;
}

input[type="range"]{
  --range-progress:0%;
  width:100%;
  height:20px;
  margin:7px 0 0;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  border:1px solid var(--line2);
  border-radius:999px;
  background:linear-gradient(
    to right,
    var(--accent) 0,
    var(--accent) var(--range-progress),
    var(--panel3) var(--range-progress),
    var(--panel3) 100%
  );
}
input[type="range"]::-webkit-slider-thumb{
  width:14px;
  height:14px;
  margin-top:-6px;
  border:1px solid rgba(8,5,13,.8);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 2px rgba(225,236,26,.08);
  appearance:none;
  -webkit-appearance:none;
}
input[type="range"]::-moz-range-track{
  height:4px;
  border:1px solid var(--line2);
  border-radius:999px;
  background:var(--panel3);
}
input[type="range"]::-moz-range-progress{
  height:4px;
  border-radius:999px;
  background:var(--accent);
}
input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border:1px solid rgba(8,5,13,.8);
  border-radius:50%;
  background:var(--accent);
}
input[type="range"]:focus-visible{outline-offset:1px}

.select-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:9px;
}

.palette-preview{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:9px;
  min-height:34px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-group);
  background:rgba(17,10,25,.62);
}
.palette-preview-label{
  color:var(--muted);
  font-size:10.5px;
}
.pal{display:flex;align-items:center;gap:4px}
.palette-preview.is-custom{display:block}
.custom-palette-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:7px;
}
.custom-color{display:flex;align-items:center;gap:7px;min-width:0}
.custom-color input[type="text"]{padding:0 6px}
.custom-color-swatch{
  position:relative;
  flex:0 0 20px;
  height:20px;
  border:1px solid var(--control-border);
  border-radius:3px;
}
.custom-color-swatch input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  opacity:0;
  cursor:pointer;
}
.custom-color-swatch:has(input:focus-visible){
  outline:3px solid var(--accent);
  outline-offset:3px;
}
.sw{
  width:14px;
  height:14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:3px;
}

.toggle-group{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:9px;
}
.toggle-chip{
  display:flex;
  align-items:center;
  min-width:0;
  min-height:34px;
  gap:7px;
  padding:7px 9px;
  border:1px solid var(--line2);
  border-radius:var(--radius-control);
  background:var(--panel3);
  color:var(--text);
  font-size:11.5px;
  cursor:pointer;
  transition:.15s ease;
}
.toggle-chip:hover{background:var(--surface-hover)}
.toggle-chip-wide{grid-column:1/-1}
.toggle-chip input{
  flex:0 0 auto;
  margin:0;
  accent-color:var(--accent);
}
.toggle-chip.is-disabled{
  opacity:.45;
  cursor:not-allowed;
}

.action-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:10px;
}
button{
  min-width:0;
  min-height:36px;
  padding:7px 10px;
  border:1px solid var(--control-border);
  border-radius:var(--radius-control);
  background:var(--panel2);
  color:var(--text);
  cursor:pointer;
  transition:.15s ease;
}
button:hover{background:var(--surface-hover)}
button:active{transform:translateY(1px)}
button.primary{
  border-color:transparent;
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:800;
  box-shadow:0 0 18px rgba(225,236,26,.12);
}
button.primary:hover{
  background:var(--accent-hover);
  box-shadow:0 0 22px rgba(225,236,26,.18);
}
.helper{
  margin:8px 1px 0;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.45;
}

/* Workspace */
.workspace{
  grid-area:workspace;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid var(--line2);
  border-radius:var(--radius-panel);
  background:var(--panel);
  box-shadow:var(--shadow);
}
.canvas-stage{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%,rgba(45,25,56,.38),transparent 54%),
    linear-gradient(180deg,#0d0913,#08050d);
}
#c{
  display:block;
  flex:0 0 auto;
  max-width:100%;
  max-height:100%;
  border:1px solid rgba(149,118,162,.35);
  background:#09101d;
  box-shadow:0 18px 46px rgba(0,0,0,.42);
}

.canvas-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:40px;
  padding:8px 11px;
  border-top:1px solid var(--line);
  background:rgba(17,10,25,.96);
  color:var(--muted);
  font:10px/1.35 var(--font-code);
}
.status-group{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
}
.status-group span{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
.status-group span+span::before{
  content:"·";
  margin:0 7px;
  color:var(--line2);
}
.status-seed{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--code-text);
}

/* Responsive */
@media(max-width:1180px){
  .app-shell{grid-template-columns:minmax(0,1fr) 330px}
}

@media(max-width:920px){
  .custom-palette-grid{grid-template-columns:1fr}
  .app-shell{
    grid-template-columns:minmax(0,1fr) 300px;
    gap:10px;
    padding:10px;
  }
  .control-grid,
  .select-grid{grid-template-columns:1fr}
  .control-grid-span{grid-column:auto}
}

@media(max-width:720px){
  .custom-palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body{overflow:auto}
  .app-shell{
    display:flex;
    flex-direction:column;
    width:100%;
    height:auto;
    min-height:100dvh;
    padding:8px;
  }
  .inspector{
    overflow:visible;
    padding:15px 13px 16px;
  }
  .workspace{
    min-height:64vh;
    order:-1;
  }
  .canvas-stage{
    min-height:56vh;
    padding:12px;
  }
  .control-grid,
  .select-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .control-grid-span{grid-column:1/-1}
  .canvas-status{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .status-seed{width:100%}
}

@media(max-width:480px){
  .custom-palette-grid{grid-template-columns:1fr}
  .control-grid,
  .select-grid,
  .toggle-group,
  .action-grid{grid-template-columns:1fr}
  .control-grid-span,
  .toggle-chip-wide{grid-column:auto}
  .palette-preview{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(pointer:coarse){
  input[type="text"],
  input[type="number"],
  select,
  button,
  .toggle-chip{min-height:44px}
  input[type="range"]{height:30px}
  input[type="range"]::-webkit-slider-thumb{
    width:20px;
    height:20px;
    margin-top:-9px;
  }
  input[type="range"]::-moz-range-thumb{
    width:20px;
    height:20px;
  }
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
}