/* TYPE IN SPACE — 3D motion lettering lab (AlgoType fork)
   dark studio chrome, CMYK accents, technical monospace labels */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#E8E4DA;
  --paper:#141414;
  --c:#00A4E4;
  --m:#E4007D;
  --y:#F5C400;
  --hair:rgba(232,228,218,.26);
  --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>");
}
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;border-right:1px solid var(--hair);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}
#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}
#cv{position:absolute;top:0;left:0;display:block;cursor:grab}
#cv:active{cursor:grabbing}
#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,textarea: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}
#textin{
  width:100%;border:1.2px solid var(--ink);outline:none;background:transparent;
  font-family:inherit;font-weight:700;font-size:16px;letter-spacing:.04em;
  line-height:1.35;padding:8px 9px;color:var(--ink);
  resize:none;overflow-y:auto;max-height:120px;display:block;
}
#textin::placeholder{color:rgba(232,228,218,.25)}

.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}
.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}

/* ---------- IG story safe-zone overlay (preview only, never exported) ---------- */
#safezone{position:absolute;display:none;pointer-events:none;z-index:5}
#safezone::before{content:'';position:absolute;inset:14% 6% 20% 6%;border:1px dashed var(--hair)}
body.safe-on #safezone{display:block}

/* ---------- 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}
}