/* TEXTURA — parametric texture lab chrome
   monochrome editorial base, dual theme, technical monospace labels */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#141414;
  --paper:#EDEAE3;
  --c:#00A4E4;
  --m:#E4007D;
  --y:#F5C400;
  --hair:rgba(20,20,20,.3);
  --field:#fff;
  --hover:#fff;
  --chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M13 6L8 11L3 6' stroke='%23141414' stroke-linejoin='bevel'/></svg>");
}
[data-theme=dark]{
  --ink:#E8E4DA;
  --paper:#161616;
  --hair:rgba(232,228,218,.28);
  --field:#0d0d0d;
  --hover:#000;
  --chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M13 6L8 11L3 6' stroke='%23E8E4DA' stroke-linejoin='bevel'/></svg>");
}
body,#panel,button,select,input{transition:background-color .18s,color .18s,border-color .18s}
html,body{height:100%}
body{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  background:var(--paper);
  color:var(--ink);
  display:flex;flex-direction:column;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
#topbar{display:flex;align-items:stretch;border-bottom:1px solid var(--hair);flex:0 0 auto}
#brand{padding:10px 16px;display:flex;flex-direction:column;justify-content:center;min-width:232px}
#brand b{font-size:14px;letter-spacing:.16em;font-weight:800}
#brand span{font-size:8.5px;letter-spacing:.2em;opacity:.6;margin-top:4px}
#topfill{flex:1}
#topctl{display:flex;align-items:center;padding:0 12px;border-left:1px solid var(--hair)}
#themeBtn{
  border:none;background:transparent;color:var(--ink);
  width:30px;height:30px;font-size:15px;line-height:1;cursor:pointer;padding:0;
}
#themeBtn:hover{opacity:.55;background:transparent}
#themeBtn:active{transform:none}
#brandmark{
  display:flex;align-items:center;padding:0 16px;
  border-right:1px solid var(--hair);color:var(--ink);
}
#brandmark svg{height:17px;width:auto;display:block}
#brandmark:hover{opacity:.55}

/* ---------- layout ---------- */
main{flex:1;display:flex;min-height:0}
#stage{flex:1;display:flex;flex-direction:column;min-width:0;padding:16px 16px 10px}
#cwrap{position:relative;flex:1;border:1px solid var(--hair);min-height:0;overflow:hidden}
#cwrap.noframe{border-color:transparent}
#cv{position:absolute;top:0;left:0;display:block}
#cv.framed{outline:1px solid var(--hair)}
#caption{
  padding:9px 2px 2px;font-size:10px;letter-spacing:.13em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85;
}

/* ---------- control panel ---------- */
#panel{
  width:312px;flex:0 0 auto;border-left:1px solid var(--hair);
  overflow-y:auto;background:var(--paper);padding-bottom:36px;
}
#panel::-webkit-scrollbar{width:5px}
#panel::-webkit-scrollbar-thumb{background:var(--hair)}
.sec{padding:12px 14px 14px;border-bottom:1px solid var(--hair)}
.sec h3{
  font-size:9px;letter-spacing:.22em;font-weight:700;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;text-transform:uppercase;
}
.sec h3::after{content:'';flex:1;height:1px;background:var(--hair)}

.row{display:grid;grid-template-columns:86px 1fr 42px;align-items:center;gap:8px;margin:7px 0}
.row label{font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.row .val{font-size:9px;text-align:right;opacity:.75;font-variant-numeric:tabular-nums}

/* ---------- inputs ---------- */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:1.5px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:9px;height:13px;background:var(--ink);margin-top:-5.75px;border:none}
input[type=range]:hover::-webkit-slider-thumb{background:var(--c)}
input[type=range]::-moz-range-track{height:1.5px;background:var(--ink)}
input[type=range]::-moz-range-thumb{width:9px;height:13px;background:var(--ink);border:none;border-radius:0}

button{
  font-family:inherit;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1.2px solid var(--ink);color:var(--ink);
  padding:7px 8px;cursor:pointer;
}
button:hover{background:var(--hover)}
button.on{background:var(--ink);color:var(--paper)}
button:active{transform:translateY(1px)}

select,input[type=number]{
  font-family:inherit;font-size:10px;letter-spacing:.08em;
  background:transparent;border:1.2px solid var(--ink);
  padding:6px;color:var(--ink);width:100%;border-radius:0;
}
select{
  appearance:none;-webkit-appearance:none;
  background-image:var(--chev);
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:11px 11px;
  padding-right:26px;
}
button.ic{position:relative;padding-left:26px;padding-right:26px}
button.ic .bl{display:inline-block}
button.ic .bi{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:13px;height:13px}
button.ic .bi svg{display:block;width:100%;height:100%}
select:focus,input:focus{outline:1.5px solid var(--c);outline-offset:-1.5px}
input[type=color]{
  width:100%;height:27px;border:1.2px solid var(--ink);background:transparent;
  padding:0;cursor:pointer;border-radius:0;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:none}
input[type=color]::-moz-color-swatch{border:none}

.sysgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg{display:flex}
.seg button{flex:1;border-right-width:0;padding:7px 2px}
.seg button:last-child{border-right-width:1.2px}
/* stacked boxed controls share one stroke (Figma node 1:1448) */
.sec>button+select,.sec>select+.seg,.sec>button+.seg,.sec>.seg+.seg{margin-top:-1.2px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:7px 0}
.duo .cell label{display:block;font-size:8.5px;letter-spacing:.14em;margin-bottom:4px;text-transform:uppercase}
.wide{width:100%;margin-top:6px}
.seedrow{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:stretch}
.lforow{display:grid;grid-template-columns:76px 1fr;gap:6px;align-items:stretch;margin:2px 0 7px}
.lfodiv{height:1px;background:var(--hair);margin:12px 0}
.hint{font-size:8.5px;letter-spacing:.1em;opacity:.5;margin-top:8px;line-height:1.5}

/* ---------- mobile: fullscreen preview, panel becomes a bottom sheet ---------- */
#actionbar,#scrim{display:none}
@media (max-width:720px){
  body{height:100dvh}
  #brand{min-width:0;padding:8px 12px}
  #brand span{display:none}
  #stage{padding:10px 10px calc(64px + env(safe-area-inset-bottom))}
  #caption{display:none}
  #panel{
    position:fixed;left:0;right:0;bottom:0;width:auto;max-height:72dvh;z-index:30;
    border-left:none;border-top:1px solid var(--hair);
    transform:translateY(100%);transition:transform .28s ease;
    overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:calc(36px + env(safe-area-inset-bottom));
  }
  #panel::before{content:'';display:block;width:44px;height:4px;background:var(--hair);margin:8px auto 2px}
  body.sheet-open #panel{transform:translateY(0)}
  #scrim{
    display:block;position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;transition:opacity .28s;
  }
  body.sheet-open #scrim{opacity:1;pointer-events:auto}
  #actionbar{
    display:flex;position:fixed;left:10px;right:10px;z-index:20;
    bottom:calc(10px + env(safe-area-inset-bottom));
  }
  #actionbar button{flex:1;padding:14px 2px;background:var(--paper);touch-action:manipulation}
  #actionbar button+button{border-left-width:0}
}