:root{
  --v6-bg:#080b09;
  --v6-surface:#0f1511;
  --v6-surface-2:#151d17;
  --v6-surface-3:#1a241d;
  --v6-line:#29382f;
  --v6-line-strong:#3b5444;
  --v6-text:#f3f7f4;
  --v6-muted:#8d9a92;
  --v6-muted-2:#647169;
  --v6-accent:#70e59a;
  --v6-accent-soft:#baf8ce;
  --v6-accent-dim:rgba(112,229,154,.12);
}

body{
  background:
    radial-gradient(circle at 12% -4%,rgba(75,170,108,.12),transparent 28rem),
    linear-gradient(180deg,#090d0a 0%,#070a08 68%);
}

.app{
  width:min(1220px,calc(100% - 16px));
  padding-top:8px;
}

.topbar{
  min-height:48px;
  margin:0 2px 6px;
  align-items:center;
}
.topbar h1{
  font-size:clamp(1.16rem,4vw,1.7rem);
  letter-spacing:.11em;
}
.top-actions{gap:6px}
.top-actions .button{
  min-height:36px;
  padding-inline:11px;
  background:transparent;
}

.panel{
  border-color:var(--v6-line);
  background:rgba(15,21,17,.96);
  box-shadow:0 16px 46px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.018);
}

.source-panel{
  padding:11px !important;
  border-radius:15px;
}
.source-panel .field{margin:0}
.source-panel .field>span{
  font-size:.72rem;
  font-weight:760;
  letter-spacing:.09em;
  font-variant:all-small-caps;
}
.source-panel textarea{
  min-height:76px;
  margin-top:1px;
  border-radius:11px;
  background:var(--v6-surface-2);
  font-size:1rem;
}
.source-field{position:relative}
.source-count{
  position:absolute;
  top:0;
  right:2px;
  color:var(--v6-muted-2);
  font-size:.66rem;
  font-variant-numeric:tabular-nums;
}

/* Real tabbed controls. */
.workspace{
  gap:11px;
  margin-top:0;
}
.controls{
  padding:0 10px 10px;
  overflow:hidden;
}
.control-tabs{
  position:sticky;
  top:0;
  z-index:12;
  display:flex;
  gap:3px;
  margin:0 -10px 7px;
  padding:6px;
  overflow-x:auto;
  border-bottom:1px solid var(--v6-line);
  background:rgba(13,18,15,.985);
  scrollbar-width:none;
}
.control-tabs::-webkit-scrollbar{display:none}
.control-tab{
  flex:1 0 auto;
  min-height:34px;
  padding:0 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--v6-muted);
  font:inherit;
  font-size:.7rem;
  font-weight:780;
  letter-spacing:.07em;
  font-variant:all-small-caps;
  cursor:pointer;
}
.control-tab.active{
  background:var(--v6-accent-dim);
  color:var(--v6-accent-soft);
}
.controls.v6-tabs-ready>details{display:none}
.controls.v6-tabs-ready>details.v6-active{display:block}
.controls.v6-tabs-ready>details{
  margin:0;
  padding:7px 9px 10px;
  border:1px solid var(--v6-line);
  border-radius:13px;
  background:rgba(18,25,20,.55);
}
.controls.v6-tabs-ready>details+details.v6-active{margin-top:7px}
.controls.v6-tabs-ready>details>summary{display:none}

.field,.range-field{margin:9px 0;gap:5px}
.field>span,.range-field>span,.mini-label{
  color:var(--v6-muted);
  font-size:.77rem;
}
textarea,select,input[type="number"],input[type="text"]{
  min-height:40px;
  border-radius:10px;
  border-color:var(--v6-line);
  background:var(--v6-surface-2);
}
textarea:focus,select:focus,input[type="number"]:focus,input[type="text"]:focus{
  border-color:rgba(112,229,154,.55);
  background:var(--v6-surface-3);
  box-shadow:0 0 0 3px rgba(112,229,154,.055);
}

input[type="range"]{
  --pct:50%;
  height:24px;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:9px;
  border-color:var(--v6-line);
  background:linear-gradient(90deg,var(--v6-accent) 0 var(--pct),var(--v6-surface-3) var(--pct) 100%);
}
input[type="range"]::-webkit-slider-thumb{
  width:19px;
  height:19px;
  margin-top:-6px;
  border-radius:7px;
}
input[type="range"]::-moz-range-track{
  height:9px;
  background:var(--v6-surface-3);
}
input[type="range"]::-moz-range-progress{
  height:9px;
  border-radius:999px;
  background:var(--v6-accent);
}
input[type="range"]::-moz-range-thumb{
  width:19px;
  height:19px;
  border-radius:7px;
}
.check-row{
  min-height:34px;
  gap:8px;
  color:var(--v6-muted);
  font-size:.79rem;
}
.check-row input{width:18px;height:18px}

.button{
  min-height:38px;
  border-radius:10px;
  border-color:var(--v6-line);
  background:var(--v6-surface-2);
}
.button.primary{
  border-color:rgba(112,229,154,.5);
  background:var(--v6-accent);
}
.note{font-size:.71rem;color:var(--v6-muted-2)}

/* Preview dock. */
.output-panel{
  padding:10px;
  border-color:var(--v6-line-strong);
}
.output-head{
  align-items:center;
  margin-bottom:7px;
}
.live-title{
  display:flex;
  align-items:center;
  gap:6px;
}
.live-dot{
  width:7px;height:7px;
  border-radius:3px;
  background:var(--v6-accent);
  box-shadow:0 0 10px rgba(112,229,154,.55);
}
.section-title{
  font-size:.77rem;
  letter-spacing:.11em;
}
.stats{
  margin-top:1px;
  color:var(--v6-muted-2);
  font-size:.67rem;
}
.output-actions{gap:5px}
.output-actions .button{
  min-height:35px;
  padding-inline:9px;
}
.output-actions .icon-button{
  width:35px;
  min-height:35px;
  padding:0;
}
.preview{
  min-height:245px;
  padding:26px 14px;
  border-radius:12px;
  border-color:var(--v6-line);
  background:
    radial-gradient(circle at center,rgba(112,229,154,.025),transparent 58%),
    linear-gradient(rgba(255,255,255,.013) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px),
    #080c09;
  background-size:auto,24px 24px,24px 24px,auto;
}
.preview-zoom{
  top:6px;
  right:6px;
  padding:3px;
  gap:2px;
  border-radius:9px;
  border-color:var(--v6-line);
  background:rgba(8,12,9,.91);
}
.zoom-button,.zoom-value{
  height:27px;
  border-radius:7px;
}
.zoom-button{width:28px}
.zoom-value{min-width:42px;font-size:.62rem}
.fit-button{min-width:34px;color:var(--v6-accent-soft)}
.density-wrap{margin:8px 0}
.density-graph{height:36px;border-radius:8px}
#rawOutput{min-height:112px}

/* Shape explanation shown only on Shape tab. */
.shape-help{
  margin:3px 0 8px;
  padding:8px 9px;
  border:1px solid rgba(112,229,154,.12);
  border-radius:9px;
  background:rgba(112,229,154,.035);
  color:var(--v6-muted);
  font-size:.7rem;
  line-height:1.35;
}
.shape-help strong{color:var(--v6-accent-soft)}

@media(min-width:900px){
  .controls{
    max-height:calc(100dvh - 20px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
}

@media(max-width:800px){
  .app{width:min(100% - 10px,760px);padding-top:5px}
  .topbar{min-height:42px}
  .topbar h1{font-size:1.12rem}
  .top-actions .button{min-height:33px;padding-inline:9px}

  .source-panel textarea{min-height:70px}

  .workspace{display:block}
  .controls{
    margin-top:6px;
    padding-bottom:calc(var(--dock-height) + 17px + env(safe-area-inset-bottom));
  }
  .control-tabs{top:0;margin-inline:-10px;padding:5px}
  .control-tab{min-height:32px;padding-inline:8px;font-size:.66rem}

  .output-panel.fixed{
    left:5px;
    right:5px;
    bottom:calc(5px + env(safe-area-inset-bottom));
    height:var(--dock-height);
    max-height:var(--dock-height);
    border-color:var(--v6-line-strong);
    box-shadow:0 17px 56px rgba(0,0,0,.78);
    backdrop-filter:blur(14px);
  }
  .output-panel.fixed[data-edge="top"]{
    top:calc(5px + env(safe-area-inset-top));
    bottom:auto;
  }
  .output-panel.fixed .preview{
    height:calc(var(--dock-height) - 69px);
    padding:10px 7px;
  }
  .output-panel.fixed.show-density .preview{
    height:calc(var(--dock-height) - 111px);
  }
  .output-panel.fixed.compact{
    height:89px;
    max-height:89px;
  }
  .output-panel.fixed.compact .preview{
    height:36px;
    padding:1px 5px;
    font-size:min(21px,var(--preview-font-size,38px)) !important;
    line-height:1.3 !important;
  }
  .output-panel.fixed.compact .preview-zoom{display:none}
}

@media(max-width:470px){
  .output-actions{gap:4px}
}