/* Morph Engine: the full Lab inside the new site, with soft segmented tracks.
   The Lab's colour variables are mapped onto the page palette, which follows the work being built. */
html.engine{--bg:var(--ground)!important;--fg:var(--ink)!important;--mut:var(--soft)!important;
  --card:var(--ground)!important;--hov:color-mix(in srgb,var(--ground) 88%,var(--ink))!important;
  --acc:var(--accent)!important;--mono:"Archivo",system-ui,sans-serif;color-scheme:normal;
  --track:color-mix(in srgb,var(--ground) 92%,var(--ink));--track2:color-mix(in srgb,var(--ground) 86%,var(--ink));--r:12px}
html.engine body{font-family:"Archivo",system-ui,sans-serif;font-stretch:100%;background:var(--ground);color:var(--ink);transition:background-color .7s,color .7s}
html.engine button{font-family:"Archivo",system-ui,sans-serif;transition:background-color .2s,color .2s}

/* title */
/* desktop: title on the left; token field, Randomize and PFP Mode on the right, level with the title's foot.
   The work and the bar under it fit the first screen: the stage is sized from the height left below the title. */
.engine-title{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;padding:24px var(--gut) 18px}
.engine-title h1{margin:0;font:800 clamp(30px,3.3vw,48px)/.9 "Archivo";font-stretch:var(--wide);letter-spacing:-.03em;flex:none}
html.engine .engine-title>.seedbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:1;min-width:0}
html.engine .engine-title .tokenbox{width:min(320px,100%)}
.engine-title p{margin:0;color:var(--soft);font-size:16px}

/* token field + actions: above the work, aligned with its edges; the parameter panel starts level with them */
html.engine .top{display:none!important}
html.engine .top .brand,html.engine #theme,html.engine #status,html.engine .seedlab,html.engine #seed,html.engine #keepTraits,
html.engine .seedbar .tsep,html.engine .seedbar .pub-off,html.engine [data-ex="html"],html.engine .hint,html.engine .export,html.engine .tlegend{display:none!important}
html.engine .stagecol>.seedbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none}
html.engine .tokenbox{display:flex;align-items:center;gap:2px;background:var(--track);border-radius:999px;padding:4px;width:min(340px,100%)}
html.engine #token{display:block!important;flex:1;min-width:0;height:36px;border:0;background:transparent;color:var(--ink);font:500 15px "Archivo";padding:0 12px;border-radius:999px;text-align:left}
html.engine #token::placeholder{color:var(--soft)}
html.engine .tokenbox button{height:36px;min-width:36px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:500 14px "Archivo"}
html.engine .tokenbox button:hover{background:var(--track2)}
html.engine #tokenGo{display:block!important;background:var(--ground);box-shadow:0 1px 2px rgba(0,0,0,.08)}
html.engine .actions{display:flex;gap:10px}
html.engine #dice,html.engine #pfpTop{height:44px;padding:0 20px;border-radius:999px;font:600 14px "Archivo";border:0}
html.engine #dice{background:var(--ink);color:var(--ground)}html.engine #dice:hover{background:var(--accent);color:var(--on-accent)}
html.engine #pfpTop{background:var(--track);color:var(--ink)}html.engine #pfpTop:hover{background:var(--track2)}

/* layout */
html.engine .lab{height:calc(100vh - var(--labtop,150px));min-height:420px;grid-template-columns:360px minmax(0,1fr)}
@media (min-width:821px){
  html.engine .stagewrap{width:min(100%,calc((100vh - var(--labtop,150px) - 84px) * var(--ar,1.7778)));margin:0 auto}
  html.engine .stagewrap .stage{width:100%}
}
html.engine .controls{border-right:0;padding:6px var(--gut) 48px}
html.engine .controls .grp:first-child{padding-top:4px}
html.engine .stagewrap{gap:24px}
html.engine .stagecol{padding:6px var(--gut) 40px 8px;gap:20px}
html.engine .stage{border-radius:var(--r);box-shadow:none;background:var(--ground)}

/* parameters: soft segmented tracks, as wide as the panel */
html.engine .controls .grp{padding:18px 0 10px;border:0}
html.engine .controls h2,html.engine .panel h2{font:700 15px/1 "Archivo";font-stretch:110%;letter-spacing:-.005em;text-transform:none;color:var(--ink);margin:0 0 6px}
html.engine .field{margin:12px 0 0}
html.engine .field>.flab{font-size:13px;color:var(--soft);margin-bottom:6px}
html.engine .field>.flab output{font:500 12px "Archivo";color:var(--ink)}
html.engine .seg{display:flex;flex-wrap:wrap;gap:2px;background:var(--track);border:0;border-radius:var(--r);padding:3px}
html.engine .seg button{flex:1 1 74px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:500 13px "Archivo";padding:8px 6px;text-align:center}
html.engine .seg button:hover{background:var(--track2)}
html.engine .seg button[aria-pressed=true]{background:var(--ink);color:var(--ground);box-shadow:0 1px 3px rgba(0,0,0,.12)}
html.engine .seg.steps button,html.engine .seg[data-n="2"] button,html.engine .seg[data-n="3"] button,html.engine .seg[data-n="4"] button{flex:1 1 0;min-width:0}
html.engine .seg[data-n="5"] button,html.engine .seg[data-n="6"] button,html.engine .seg[data-n="7"] button{flex:1 1 30%}
html.engine .swatches{gap:2px;background:var(--track);border:0;border-radius:var(--r);padding:3px}
html.engine .swatches .sw{border:0;border-radius:9px;background:transparent;font:500 12px "Archivo";color:var(--ink)}
html.engine .swatches .sw:hover{background:var(--track2)}
html.engine .swatches .sw .chips{border-radius:6px;border:0}
html.engine .swatches .sw[aria-pressed=true]{background:var(--ink);color:var(--ground)}
html.engine input[type=range]{accent-color:var(--ink);width:100%}
html.engine .help{font:13px/1.5 "Archivo";color:var(--soft);letter-spacing:0;margin-top:8px}

/* preview controls: one soft bar like a player, frames as a track */
html.engine .tools{gap:12px;align-items:center}
html.engine .tools .tgroup{display:flex;align-items:center;gap:2px;background:var(--track);border-radius:999px;padding:4px}
html.engine .tools .tgroup>*{margin:0}
html.engine .tools button{height:34px;min-width:34px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:500 13px "Archivo";padding:0 12px}
html.engine .tools button:hover:not(:disabled){background:var(--track2)}
html.engine .tools .zv{min-width:48px;text-align:center;font:500 13px "Archivo";color:var(--soft);letter-spacing:0}
html.engine .tools .tsep{display:none}
html.engine #frames .mono-lab{display:none}
html.engine #frames button[aria-pressed=true]{background:var(--ink);color:var(--ground)}
html.engine .mdl{display:inline-flex!important}
html.engine #mdlBtn{background:var(--ink);color:var(--ground);font-weight:600}
html.engine #mdlBtn:hover{background:var(--accent)!important;color:var(--on-accent)}

/* download: a small card that opens upwards */
html.engine .mdl-menu{top:auto;bottom:calc(100% + 10px);right:auto;left:0;min-width:220px;padding:6px;gap:2px;border:0;border-radius:16px;background:var(--ground);
  box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(0,0,0,.18)}
html.engine .mdl-menu button{border:0;border-radius:10px;padding:11px 14px;font:500 14px "Archivo";color:var(--ink);background:transparent;text-align:left;height:auto}
html.engine .mdl-menu button:hover{background:var(--track)}

/* traits */
html.engine .below{grid-template-columns:minmax(0,1fr)}
html.engine .panel{border:0;border-radius:var(--r);background:var(--track)}
html.engine .tgrid dt{font:12px "Archivo";letter-spacing:0;text-transform:none;color:var(--soft)}

/* phones: the work and its tools; parameters stay on desktop. Randomize and PFP Mode in a bottom bar */
html.engine .mbar{display:none}
.engine-mobile-note{display:none}
@media (max-width:820px){
  html.engine .lab{height:auto;min-height:0;display:flex;flex-direction:column}
  html.engine .stagecol{order:-1;padding:0 var(--gut) 24px}
  html.engine .controls{display:none!important}
  html.engine .top{padding-bottom:16px}
  html.engine #dice,html.engine #pfpTop{display:none!important}
  html.engine .stagecol>.seedbar{display:block}
  html.engine .tokenbox{width:100%;background:none;padding:0;gap:8px;border-radius:0}
  html.engine #seedPrev{order:1}html.engine #token{order:2}html.engine #seedNext{order:3}html.engine #tokenGo{order:4}
  html.engine #token{flex:1;height:34px;border:0;border-radius:0;text-align:center;font:500 12.5px "Archivo";padding:0;background:transparent}
  html.engine #token::placeholder{font-weight:500;font-size:12.5px;color:var(--soft)}
  html.engine .tokenbox button{height:34px;min-width:34px;font-size:12.5px;color:var(--ink)}
  html.engine #tokenGo{background:none;box-shadow:none;font:500 12.5px "Archivo";padding:0 6px}
  .engine-title p{text-wrap:balance}
  /* one thin bar: play, fit, full screen, frames, download */
  html.engine .tools{display:flex;flex-wrap:nowrap;align-items:center;gap:0;background:var(--track);border-radius:999px;padding:3px;overflow-x:auto;scrollbar-width:none}
  html.engine .tools .tgroup{background:transparent;padding:0;flex-wrap:nowrap}
  html.engine .tools button{height:30px;min-width:30px;padding:0 9px;font-size:12.5px}
  html.engine #zoomOut,html.engine #zoomIn,html.engine .tools .zv{display:none!important}
  html.engine .fl{display:none}
  html.engine #frames{margin-left:auto}
  html.engine .tools .tgroup:first-child{order:2}html.engine #frames{order:1;margin-left:0;margin-right:auto}
  html.engine .engine-mobile-note{margin-top:2px}
  html.engine #undo,html.engine #history{display:none!important}
  .engine-mobile-note{display:block;margin:0;padding:12px 16px;border-radius:var(--r);background:var(--track);font-size:14px;color:var(--soft)}
  html.engine .below{padding-bottom:96px}
  html.engine .mbar{display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:15;gap:10px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--ground);box-shadow:0 -1px 0 var(--line)}
  html.engine .mbar button{flex:1;height:48px;border-radius:999px;font:600 15px "Archivo";border:0;background:var(--track);color:var(--ink)}
  html.engine .mbar #mRand{background:var(--ink);color:var(--ground)}
  .engine-title p{font-size:15px}
  .engine-title{padding:30px var(--gut) 22px}.engine-title h1{font-size:34px;line-height:1}
  /* download: a sheet at the bottom of the screen (the tool bar scrolls sideways and would clip a dropdown) */
  html.engine .mdl-menu{position:fixed;left:var(--gut);right:var(--gut);bottom:calc(14px + env(safe-area-inset-bottom));top:auto;min-width:0;z-index:60;padding:8px;
    box-shadow:0 0 0 1px var(--line),0 -12px 50px rgba(0,0,0,.28)}
  html.engine .mdl-menu button{padding:14px 16px;font-size:15px}
}