/* Experiment pages. Deliberately bare: the sketch is the page. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:#000;color:#fff;
  font-family:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex;flex-direction:column;
}
a{color:inherit}
.xtop{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:26px 30px 0;
}
.xback{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px 9px 12px;border-radius:999px;
  background:#f2f2f4;color:#0b0b0d;
  font-size:13.5px;text-decoration:none;
  transition:background .18s ease,transform .18s ease;
}
.xback:hover{background:#fff;transform:translateY(-1px)}
.xname{font-size:15px;font-weight:500;letter-spacing:-.01em}
.xnote{font-size:13.5px;color:rgba(255,255,255,.55);letter-spacing:-.005em}
.xstage{flex:1;min-height:0;padding:22px 30px 30px}
.xstage canvas{
  display:block;width:100%;height:100%;
  border-radius:16px;
  background:#0b0b0d;
  border:1px solid rgba(255,255,255,.11);
  touch-action:none;cursor:crosshair;
}
.xstage.paper canvas{background:#f4f1e8;border-color:rgba(0,0,0,.12);cursor:text}
.xfield{
  display:block;width:min(560px,100%);margin:16px auto 0;
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.2);
  color:#fff;font:inherit;font-size:15px;padding:9px 2px;outline:none;text-align:center;
}
.xfield:focus{border-color:#83eff0}
.xfield::placeholder{color:rgba(255,255,255,.35)}
@media (max-width:700px){ .xtop,.xstage{padding-left:16px;padding-right:16px} }

/* control bar: each sketch declares its own controls and this builds them */
.xctl{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:14px 30px 26px;
}
.xctl .grp{display:flex;align-items:center;gap:9px}
.xctl label{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap}
.xctl input[type=range]{
  -webkit-appearance:none;appearance:none;width:132px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.18);outline:none;
}
.xctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:#83eff0;cursor:pointer;border:0;
}
.xctl .val{font-size:12px;color:rgba(255,255,255,.4);min-width:38px;font-variant-numeric:tabular-nums}
.xctl button{
  padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  background:transparent;color:#fff;font:inherit;font-size:13px;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.xctl button:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.34)}
.xctl .sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:rgba(255,255,255,.75)}
.xctl .sw input{accent-color:#83eff0}
.xhint{font-size:13px;color:rgba(255,255,255,.4);margin-left:auto}
@media (max-width:700px){ .xctl{padding-left:16px;padding-right:16px;gap:14px} }