/* ===========================================================================
   404motivation — the Studio, at /motivation/make/.

   One screen. The page itself never scrolls; each panel scrolls inside its own
   frame. That is the difference between a tool and a document: when the poster
   is always visible, a choice is a glance, and when it is not, every choice
   costs a scroll up and a scroll back.

   The rule holds only where there is room for it. Below 1024px the columns
   cannot coexist, so the lock is released and the page becomes an ordinary
   scrolling one — a 100vh no-scroll layout on a phone is a trap, not a feature.
   ======================================================================== */

@import url("faces.css");

:root{
  --void:#070709; --void-2:#050507; --void-1:#0a0a10; --void-3:#0d0a0e;
  --panel:#121217; --panel-2:#17171e; --line:#26262f;
  --white:#fff; --gray:#888899; --dim:#5a5a68;
  --cyan:#00f0ff; --green:#39ff14; --pink:#ff007f; --ember:#ff7a18; --ember-soft:#ffb061;
  --glass-bg:linear-gradient(160deg, rgba(22,22,30,.72), rgba(10,10,14,.55));
  --glass-border:rgba(255,255,255,.10);
  --edge-top:inset 0 1px 0 rgba(255,255,255,.07);
  --shadow-2:0 8px 24px -6px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --ease:cubic-bezier(.16,1,.3,1);
  --disp:"Syne","Space Grotesk",system-ui,sans-serif;
  --body:"Space Grotesk",system-ui,sans-serif;
  --mono:"Courier Prime",ui-monospace,monospace;
  --serif:"EB Garamond",Georgia,serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0,240,255,.05), transparent 60%),
    radial-gradient(90% 70% at 100% 110%, rgba(255,122,24,.045), transparent 55%),
    linear-gradient(180deg,var(--void-1) 0%,var(--void-2) 45%,var(--void-3) 100%);
  color:var(--white);font-family:var(--body);
}
#webgl-bg{
  position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;
}
#webgl-bg.on{opacity:1}
@media (max-width:760px){ #webgl-bg{display:none} }

a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;position:fixed;z-index:99;background:var(--cyan);color:#000;padding:.6em 1em;border-radius:6px}

/* ------------------------------------------------------------- the lock --- */
@media (min-width:1024px){
  html,body{overflow:hidden}      /* the page holds still; the panels move */
  .studio{height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr)}
  .bays{
    display:grid;gap:1rem;padding:0 1.2rem 1.2rem;min-height:0;
    grid-template-columns:minmax(280px,1fr) minmax(360px,1.15fr) minmax(300px,1fr);
  }
  .bay{min-height:0;display:flex;flex-direction:column}
  .bay-scroll{overflow-y:auto;min-height:0;flex:1}
}
/* Below that it is a normal page. */
@media (max-width:1023px){
  .studio{padding-bottom:2rem}
  .bays{display:grid;gap:1rem;padding:0 1rem 1rem;grid-template-columns:1fr}
  .bay-scroll{max-height:52vh;overflow-y:auto}
}

/* ---------------------------------------------------------------- chrome -- */
.topbar{
  display:flex;align-items:center;gap:1.2rem;padding:.9rem 1.2rem;
  border-bottom:1px solid var(--line);position:relative;z-index:1;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.topbar .mark{
  font-family:var(--disp);font-weight:800;font-size:1rem;letter-spacing:.02em;
  text-decoration:none;margin-right:auto;
}
.topbar .mark i{font-style:normal;color:var(--cyan)}
.topbar a{color:var(--gray);text-decoration:none}
.topbar a:hover,.topbar a:focus-visible{color:var(--white)}

.studio{position:relative;z-index:1}

/* ----------------------------------------------------------------- bays --- */
.card{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:var(--shadow-2),var(--edge-top);border-radius:12px;
  display:flex;flex-direction:column;min-height:0;
}
.card + .card{margin-top:1rem}
.card > h2{
  margin:0;padding:.85rem 1rem;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-weight:400;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:.5rem;
}
.card > h2 em{font-style:normal;margin-left:auto;color:var(--dim)}
.card .body{padding:1rem;min-height:0}
.card .body.tight{padding:.7rem}

/* ------------------------------------------------------------- the list --- */
.qlist{list-style:none;margin:0;padding:0}
.qlist li{border-bottom:1px solid var(--line)}
.qlist button{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:.8rem .9rem;color:inherit;font:inherit;
}
.qlist button:hover,.qlist button:focus-visible{background:var(--panel-2)}
.qlist .line{display:block;color:#e6e6ee;font-size:.92rem;line-height:1.4}
.qlist .by{
  display:block;margin-top:.35rem;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
}
.qlist .by em{font-style:normal;color:var(--ember)}

.search{
  width:100%;background:rgba(255,255,255,.04);color:var(--white);
  border:1px solid var(--line);border-radius:4px;padding:.6em .75em;
  font-family:var(--body);font-size:.9rem;
}
.search:focus{outline:2px solid var(--cyan);outline-offset:1px}

.tabs{display:flex;gap:.35rem;margin:.7rem 0 0;flex-wrap:wrap}
.tab{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  background:transparent;color:var(--gray);border:1px solid var(--line);border-radius:2px;
  padding:.55em .8em;cursor:pointer;
}
.tab[aria-selected="true"]{background:var(--white);color:#000;border-color:var(--white)}

/* ----------------------------------------------------------- the editor --- */
.fld{display:block;margin:0 0 .7rem}
.fld > span{
  display:block;margin:0 0 .3rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.fld textarea,.fld input{
  width:100%;background:rgba(255,255,255,.04);color:var(--white);
  border:1px solid var(--line);border-radius:4px;padding:.6em .75em;
  font-family:var(--disp);font-size:.92rem;line-height:1.45;resize:vertical;
}
.fld textarea:focus,.fld input:focus{outline:2px solid var(--cyan);outline-offset:1px}
.fld-row{display:grid;gap:.7rem;grid-template-columns:1fr 1fr}

/* ----------------------------------------------------------- the stage ---- */
.stage{align-items:center;justify-content:center}
.stage .body{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:1rem;
}
#poster{
  max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border-radius:6px;background:#000;box-shadow:var(--shadow-2);
}
.stage-foot{
  padding:.7rem 1rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
}
.cap{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin:0 auto 0 0;
}
.btn{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.75em 1.1em;border-radius:3px;cursor:pointer;border:1px solid transparent;
  background:linear-gradient(135deg,var(--ember),#ff9440);color:#170701;font-weight:700;
  transition:transform .3s var(--ease),box-shadow .3s ease;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px -10px rgba(255,122,24,.5)}
.btn.ghost{background:transparent;color:var(--white);border-color:var(--line)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--cyan);box-shadow:none}

/* --------------------------------------------------------- the choosers --- */
.tmpl{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.tmpl button{
  aspect-ratio:4/5;border:1px solid var(--line);border-radius:6px;cursor:pointer;
  background:#0d0d12;position:relative;overflow:hidden;padding:0;
}
.tmpl button[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
.tmpl button span{
  position:absolute;left:0;right:0;bottom:0;padding:.35em .45em;
  font-family:var(--mono);font-size:.54rem;letter-spacing:.06em;text-transform:uppercase;
  color:#cfcfdb;background:linear-gradient(transparent,rgba(0,0,0,.85));text-align:left;
}
.tmpl canvas{width:100%;height:100%;display:block}

.pal{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.pal button{
  border:1px solid var(--line);border-radius:6px;cursor:pointer;background:#0d0d12;
  padding:0;overflow:hidden;
}
.pal button[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
.pal canvas{width:100%;height:44px;display:block}
.pal span{
  display:block;padding:.35em;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.08em;text-transform:uppercase;color:#cfcfdb;
}
.fmt{display:flex;gap:.45rem;flex-wrap:wrap}
.fmt button{
  flex:1 1 auto;min-height:40px;cursor:pointer;border-radius:3px;
  background:transparent;color:var(--gray);border:1px solid var(--line);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
}
.fmt button[aria-pressed="true"]{background:var(--white);color:#000;border-color:var(--white)}

.moods{display:flex;flex-wrap:wrap;gap:.4rem}
.moods button{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.55em .8em;cursor:pointer;border-radius:2px;
  background:transparent;color:var(--gray);border:1px solid var(--line);
}
.moods button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--cyan),#7ee8d0);color:#04141a;
  border-color:transparent;font-weight:700;
}
.hint{margin:0 0 .7rem;font-size:.76rem;color:var(--dim)}

/* scrollbars that belong to this room rather than to the operating system */
.bay-scroll::-webkit-scrollbar{width:10px}
.bay-scroll::-webkit-scrollbar-track{background:transparent}
.bay-scroll::-webkit-scrollbar-thumb{background:#22222b;border-radius:99px;border:3px solid transparent;background-clip:content-box}
.bay-scroll::-webkit-scrollbar-thumb:hover{background:#33333f;background-clip:content-box}
.bay-scroll{scrollbar-width:thin;scrollbar-color:#22222b transparent}

:focus-visible{outline:2px solid var(--cyan)!important;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover{transform:none!important;transition:none!important}
}

/* The no-scroll page has no room for a noscript essay, so the fallback tells
   the truth in one line and sends the reader somewhere that works without JS. */
.nojs{
  margin:1.2rem;padding:1rem 1.2rem;border:1px solid var(--line);
  border-left:2px solid var(--ember);border-radius:0 8px 8px 0;color:#a6a6b4;font-size:.9rem;
}