@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,100..1000&display=swap');

/* Counterform Carnival — biomorphic poster toy
   Palette: 3 inks + black/white ONLY
   --terra #E4572E · --moss #2E7D5B · --gold #EFA00B · --ink #16130E · --paper #FFF9EF */
:root{
  --terra:#E4572E;
  --moss:#2E7D5B;
  --gold:#EFA00B;
  --ink:#16130E;
  --paper:#FFF9EF;
  --card:#FFFDF7;
  --radius-l:34px;
  --radius-m:22px;
  --shadow:0 18px 50px -18px rgba(22,19,14,.35);
  --font-ui:"Fraunces",Georgia,serif;
  --font-poster:"Roboto Flex",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:var(--font-ui);
  background-image:
    radial-gradient(1100px 500px at 110% -10%, rgba(228,87,46,.14), transparent 60%),
    radial-gradient(900px 520px at -10% 20%, rgba(46,125,91,.14), transparent 60%),
    radial-gradient(700px 500px at 50% 115%, rgba(239,160,11,.16), transparent 60%);
  min-height:100vh;
  overflow-x:hidden;
}
/* floating css spores */
.spore-field{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.mote{position:absolute;border-radius:50%;opacity:.5;animation:drift 14s ease-in-out infinite alternate}
.m1{width:14px;height:14px;left:8%;top:70%;background:var(--terra);animation-delay:-2s}
.m2{width:9px;height:9px;left:18%;top:20%;background:var(--moss)}
.m3{width:18px;height:18px;left:88%;top:30%;background:var(--gold);opacity:.4;animation-delay:-5s}
.m4{width:7px;height:7px;left:76%;top:78%;background:var(--moss);animation-delay:-8s}
.m5{width:11px;height:11px;left:60%;top:8%;background:var(--terra);opacity:.35;animation-delay:-4s}
.m6{width:22px;height:16px;left:40%;top:88%;background:var(--gold);opacity:.3;border-radius:60% 40% 55% 45%;animation-delay:-11s}
@keyframes drift{from{transform:translateY(0) translateX(0) scale(1)}to{transform:translateY(-46px) translateX(24px) scale(1.25)}}

.masthead{
  position:relative;z-index:1;max-width:1080px;margin:0 auto;
  padding:28px 20px 6px;display:flex;gap:16px;align-items:flex-start;
}
.brand-blob svg{filter:drop-shadow(0 8px 14px rgba(46,125,91,.35));animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.07) rotate(3deg)}}
.kicker{margin:2px 0 4px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);font-weight:700}
h1{margin:0;font-size:clamp(34px,6vw,58px);line-height:.95;letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" 50}
h1 em{font-style:italic;color:var(--terra)}
.sub{margin:8px 0 0;max-width:46ch;font-size:16px;opacity:.82}
#motionBtn{margin-left:auto;flex:none}

#app{
  position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:14px 20px 10px;
  display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start;
}
.pod{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--radius-l);
  box-shadow:var(--shadow);padding:22px;
}
.controls{border-radius:30px 46px 30px 52px / 46px 30px 52px 30px;position:sticky;top:14px}
.stage-pod{border-radius:46px 30px 52px 30px / 30px 52px 30px 46px;padding:16px}

.field{display:block;margin:0 0 16px}
.label{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:14px;letter-spacing:.04em;margin-bottom:8px}
.label small,.label output{font-family:var(--font-poster);font-weight:600;background:var(--ink);color:var(--paper);border-radius:999px;padding:2px 10px;font-size:12px}
#wordInput{
  width:100%;font:inherit;font-size:24px;font-weight:600;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);border-radius:18px 26px 18px 26px / 26px 18px 26px 18px;
  padding:10px 14px;outline:none;transition:transform .15s ease, box-shadow .15s ease;
}
#wordInput:focus{transform:rotate(-.5deg) scale(1.01);box-shadow:0 0 0 4px rgba(239,160,11,.45)}

input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:999px;border:2px solid var(--ink);
  background:linear-gradient(90deg,var(--moss),var(--gold),var(--terra))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:58% 42% 55% 45%/48% 55% 45% 52%;
  background:var(--paper);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);transition:transform .12s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15) rotate(8deg)}
input[type=range]::-moz-range-track{height:12px;border-radius:999px;border:2px solid var(--ink);
  background:linear-gradient(90deg,var(--moss),var(--gold),var(--terra))}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:58% 42% 55% 45%/48% 55% 45% 52%;background:var(--paper);border:3px solid var(--ink)}

.layouts{border:none;padding:0;margin:0 0 16px}
.layouts legend{padding:0}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.seg button{
  font:inherit;font-size:13px;font-weight:700;padding:9px 4px;cursor:pointer;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);border-radius:14px 18px 14px 18px;transition:all .15s;
}
.seg button:hover{transform:translateY(-2px)}
.seg button.on{background:var(--moss);color:var(--paper);box-shadow:0 4px 0 var(--ink)}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.pill{
  font:inherit;font-weight:700;font-size:15px;border:2px solid var(--ink);border-radius:999px;
  padding:10px 16px;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;box-shadow:0 4px 0 var(--ink);
}
.pill:hover{transform:translateY(-2px) rotate(-.5deg)}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.pill.solid{background:var(--ink);color:var(--paper)}
.pill.chaos{background:var(--terra);color:var(--paper);animation:wiggle 3.2s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}92%{transform:rotate(0)}94%{transform:rotate(-2deg) scale(1.03)}96%{transform:rotate(2deg)}98%{transform:rotate(0)}}
.pill.ghost{background:var(--paper);color:var(--ink)}
.hint{font-size:13px;opacity:.65;margin:12px 2px 0}

.poster-frame{
  border:2px solid var(--ink);border-radius:28px;overflow:hidden;background:var(--paper);
  border-radius:38px 22px 44px 24px / 24px 44px 22px 38px;
}
#poster{display:block;width:100%;height:auto;cursor:crosshair;touch-action:manipulation}
.caption{display:flex;justify-content:space-between;gap:10px;padding:12px 8px 2px;font-size:14px}
#captionWord{font-weight:800;font-style:italic;color:var(--terra)}
#captionMeta{font-family:var(--font-poster);font-size:12.5px;opacity:.7}

.colophon{max-width:1080px;margin:0 auto;padding:8px 22px 34px;font-size:13px;opacity:.7;position:relative;z-index:1}

@media (max-width:860px){
  #app{grid-template-columns:1fr}
  .controls{position:static;order:2}
  .stage-pod{order:1}
  .masthead{flex-wrap:wrap}
  #motionBtn{margin-left:0}
}
@media (max-width:375px){
  .masthead{padding:20px 14px 2px}
  #app{padding:10px 12px}
  .pod{padding:16px}
  .seg{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .mote,.brand-blob svg,.pill.chaos{animation:none}
}