/* =============================================================================
   dieHaut — mobile-first floating type over a full-window SO-101 gripper.
   The deck is pointer-transparent except for the cards, so a drag on the visible
   gripper always reaches the WebGL canvas and a drag on a card always swipes.
   ========================================================================== */

:root{
  --bg:#0a0c12;
  --ink:#eef2fa;
  --muted:#96a2b7;
  --glass:rgba(14,18,27,.78);
  --glass-hi:rgba(30,37,52,.72);
  --line:rgba(255,255,255,.10);
  --line-hi:rgba(255,255,255,.18);
  --accent:#e3a17c;          /* warm clay — the skin, and anything decoded from it */
  --accent-deep:#c77f5b;     /* pressed / hover */
  --field:#7aa2ff;           /* cool blue — raw magnetic field */
  --bad:#ff6b6b;
  --ok:#5fd39b;
  --pad:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --card-h:60svh;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
  overscroll-behavior:none;
}
a{color:var(--accent)}
code{font:500 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- stage ---------- */
#stage{position:fixed; inset:0; z-index:0}
#viewport{position:absolute; inset:0}
#viewport canvas{display:block}
#scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 6%, transparent 38%, rgba(6,8,13,.5) 100%),
    linear-gradient(to top, rgba(6,8,13,.97) 0%, rgba(6,8,13,.9) 34%,
                    rgba(6,8,13,.42) 58%, transparent 76%);
}

/* Swipe surface under the gripper. Sits above the stage so it takes the touch,
   below the deck so cards, links and buttons still work normally. Phones only:
   on desktop the pointer has the arrows and the keyboard. */
#swipezone{position:fixed; left:0; right:0; bottom:0; top:62%; z-index:10; display:none}
@media (max-width:899px){ #swipezone{display:block} }

/* ---------- top bar ---------- */
.topbar{
  position:fixed; z-index:30; top:0; left:0; right:0;
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 10px) var(--pad) 10px;
  background:linear-gradient(to bottom, rgba(6,8,13,.86), rgba(6,8,13,0));
}
.brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  background:none; border:0; padding:0; color:var(--ink); text-align:left; cursor:pointer;
}
.brand__mark{font-weight:700; font-size:18px; letter-spacing:-.015em}
.brand__accent{color:var(--accent)}
.brand__sub{font-size:11px; color:var(--muted); letter-spacing:.01em}
.topbar__actions{display:flex; gap:8px; flex-shrink:0}
.pill{
  display:inline-block; text-decoration:none; line-height:1.25;
  border:1px solid var(--line-hi); background:var(--glass); color:var(--ink);
  padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:500;
  cursor:pointer; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.pill:hover{background:var(--glass-hi)}
.pill--primary{background:var(--accent); border-color:var(--accent); color:#20120a; font-weight:650}
.pill--primary:hover{background:var(--accent-deep)}
@media (max-width:520px){ .pill:not(.pill--primary){display:none} }

/* ---------- deck ---------- */
.deck{position:fixed; inset:0; z-index:20; pointer-events:none; overflow:hidden}
.track{display:flex; height:100%; width:100%; transition:transform .52s cubic-bezier(.4,.02,.2,1)}
.slide{
  flex:0 0 100%; height:100%; position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 var(--pad);   /* the card is width:100% of what is left, never wider */
}

/* the card: bottom sheet on phones, left column on desktop */
.card{
  pointer-events:auto;
  width:100%; max-width:620px;
  max-height:var(--card-h);
  margin:0 0 calc(var(--safe-b) + 78px);
  padding:0 2px 0 0;              /* no panel — the scrim below carries legibility */
  overflow-y:auto; overscroll-behavior:contain;
  text-shadow:0 1px 14px rgba(6,8,13,.95), 0 0 34px rgba(6,8,13,.75);
}
.card.is-clipped{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%);
}
.card::-webkit-scrollbar{width:6px}
.card::-webkit-scrollbar-thumb{background:var(--line-hi); border-radius:3px}

.step{
  margin:0 0 6px; font-size:11px; font-weight:650; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.step--mid{margin-top:20px; padding-top:14px; border-top:1px solid var(--line)}
.card h2{margin:0 0 10px; font-size:23px; line-height:1.2; letter-spacing:-.02em; font-weight:700}
.card h2 em{font-style:italic; color:var(--accent)}
.card p{margin:0 0 11px; color:#cdd6e6}
.card p b{color:var(--ink)}
.note{font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:11px; margin-top:13px}
.note--tight{border:0; padding-top:0; margin-top:8px}
.who{font-size:13.5px; color:var(--muted)}
.honest{
  border-left:2px solid var(--accent); padding:1px 0 1px 12px; font-size:13.5px;
}

/* ---------- hero ---------- */
.slide--hero{align-items:flex-end}
.hero{
  pointer-events:auto; text-align:center; padding:0 8px; max-width:640px;
  margin-bottom:calc(var(--safe-b) + 104px);
  text-shadow:0 1px 14px rgba(6,8,13,.95), 0 0 34px rgba(6,8,13,.75);
}
.eyebrow{margin:0 0 10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.hero h1{
  margin:0; font-size:clamp(52px,16vw,104px); line-height:.92; letter-spacing:-.045em; font-weight:700;
  text-shadow:0 8px 40px rgba(0,0,0,.7);
}
.hero__lede{margin:16px 0 10px; font-size:clamp(17px,4.4vw,22px); line-height:1.35; color:var(--ink)}
.hero__sub{margin:0 auto 22px; max-width:460px; font-size:14px; color:var(--muted)}
.hero__hint{margin:14px 0 0; font-size:11.5px; color:var(--muted); letter-spacing:.02em}
.startbtn{
  display:inline-block; text-decoration:none;
  border:0; border-radius:999px; background:var(--accent); color:#20120a;
  font:650 15px/1 inherit; padding:14px 26px; cursor:pointer;
  box-shadow:0 10px 30px rgba(227,161,124,.28);
}
.startbtn:hover{background:var(--accent-deep)}

/* ---------- problem: the dataset schema ---------- */
.schema{list-style:none; margin:12px 0 14px; padding:0; font-size:13px}
.schema li{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding:7px 10px; border:1px solid var(--line); border-radius:9px; margin-bottom:5px;
}
.schema .ok{color:var(--ok); font-size:12px}
.schema .no{color:var(--bad); font-size:12px; font-weight:600}
.schema li.miss{border-color:rgba(255,107,107,.45)}
.schema li.miss code{color:var(--bad)}

/* ---------- beats / lists ---------- */
.stack{display:flex; flex-direction:column; gap:11px; margin:4px 0 2px}
.beat{
  font-size:13.5px; line-height:1.5; color:#c4cede;
  border-left:2px solid var(--line-hi); padding-left:12px;
}
.beat b{color:var(--ink); display:inline}
.kill{margin:8px 0 0; padding-left:20px; font-size:13.5px; color:#c4cede}
.kill li{margin-bottom:8px}
.kill b{color:var(--ink)}
.road{list-style:none; margin:12px 0 0; padding:0; font-size:13.5px; color:#c4cede}
.road li{display:grid; grid-template-columns:24px 1fr; gap:14px; padding:10px 0; border-top:1px solid var(--line)}
.road li:first-child{border-top:0; padding-top:0}
.road .v{font:650 10.5px/1.8 ui-monospace,Menlo,monospace; color:var(--accent); letter-spacing:.07em}
.road .t{line-height:1.5}
.road b{color:var(--ink)}
.closing{
  margin:22px 0 0; padding-top:16px; border-top:1px solid var(--line-hi);
  font-size:16px; line-height:1.45; font-weight:500; color:var(--ink);
}
.endcta{display:flex; gap:10px; align-items:center; margin-top:22px}

/* ---------- touch slide ---------- */
.card--touch{max-height:min(52svh,460px)}
.touchcue{font-size:13.5px; color:var(--muted)}
.modes{display:flex; gap:6px; margin:2px 0 12px}
.mode{
  flex:1; border:1px solid var(--line-hi); background:rgba(255,255,255,.03); color:var(--muted);
  border-radius:9px; padding:9px 8px; font:600 12.5px/1 inherit; cursor:pointer;
}
.mode.is-on{background:var(--accent); border-color:var(--accent); color:#20120a}
.readout{min-height:104px}
.readout__cap{margin:0 0 6px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.taxels{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:4px 10px}
.taxels li{
  display:grid; grid-template-columns:20px 1fr; gap:6px; align-items:center;
  font:500 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--muted);
}
.taxels .n{color:var(--field); opacity:.8}
.taxels .v{color:#b9c6dd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kv{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.kv div{border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.kv dt{margin:0 0 3px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.kv dd{margin:0; font:650 16px/1.2 ui-monospace,Menlo,monospace; color:var(--accent)}
.kv div:nth-child(3){grid-column:1 / -1}
.kv div:nth-child(3) dd{color:#b9c6dd; font-size:13px}
.err{
  margin:10px 0 0; font:600 12.5px/1.4 ui-monospace,Menlo,monospace; color:var(--muted);
  border:1px solid var(--line); border-radius:9px; padding:8px 10px;
}
.err.is-bad{color:var(--bad); border-color:rgba(255,107,107,.45)}
.err.is-ok{color:var(--ok); border-color:rgba(95,211,155,.4)}

/* ---------- nav ---------- */
.navarrow{
  position:fixed; z-index:31; bottom:calc(var(--safe-b) + 22px);
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-hi); background:var(--glass); cursor:pointer;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.navarrow::before{
  content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
}
.navarrow.prev{left:var(--pad)} .navarrow.prev::before{transform:translateX(2px) rotate(135deg)}
.navarrow.next{right:var(--pad)} .navarrow.next::before{transform:translateX(-2px) rotate(-45deg)}
.navarrow[disabled]{opacity:.25; cursor:default}
.dots{
  position:fixed; z-index:31; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 34px); display:flex; gap:7px;
}
.dots button{
  width:7px; height:7px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.28);
}
.dots button.is-on{background:var(--accent); transform:scale(1.35)}
.swipehint{
  position:fixed; z-index:31; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 52px); margin:0;
  font-size:11px; letter-spacing:.1em; color:var(--muted); pointer-events:none;
  transition:opacity .4s; animation:pulse 2.4s ease-in-out infinite;
}
.swipehint[hidden]{display:none}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.95}}
.status{
  position:fixed; z-index:31; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 76px); margin:0; font-size:11.5px; color:var(--muted);
  pointer-events:none;
}
.status:empty{display:none}

.footnote{
  position:absolute; left:var(--pad); right:var(--pad);
  bottom:calc(var(--safe-b) + 96px); margin:0; pointer-events:auto;
  font-size:11px; line-height:1.5; color:var(--muted); opacity:.8;
  text-shadow:0 1px 12px rgba(6,8,13,.95);
}

/* ---------- portrait: the footnote stacks under the card ---------- */
/* On desktop the footnote is pinned to the bottom-left, clear of everything. On a
   phone that band is exactly where the card's CTA lands, so the last step becomes
   a column and the two stack instead of overlapping. */
@media (max-width:899px){
  .slide--end{flex-direction:column; align-items:stretch; justify-content:flex-end}
  .slide--end .card{margin-bottom:14px; max-height:none}
  .slide--end .footnote{
    position:static; left:auto; right:auto; bottom:auto;
    margin:0 0 calc(var(--safe-b) + 78px);
  }
}

/* ---------- desktop: card left, gripper right ---------- */
@media (min-width:900px){
  :root{--card-h:min(80svh,720px)}
  .slide{align-items:center; justify-content:flex-start}
  .card{margin:0 auto 0 clamp(8px,3vw,56px); width:min(46vw,560px); padding:0 2px 0 0}
  .card--touch{max-height:min(74svh,600px)}
  .card h2{font-size:27px}
  .slide--hero{justify-content:flex-start; align-items:center}
  .hero{text-align:left; margin:0 auto 0 clamp(8px,3vw,56px); padding:0}
  .hero__sub{margin-left:0}
  #scrim{background:
    radial-gradient(90% 70% at 80% 45%, transparent 26%, rgba(6,8,13,.45) 100%),
    linear-gradient(to right, rgba(6,8,13,.95) 0%, rgba(6,8,13,.78) 32%,
                    rgba(6,8,13,.3) 58%, transparent 78%);}
  .dots{bottom:calc(var(--safe-b) + 26px)}
  .navarrow{bottom:calc(var(--safe-b) + 18px)}
  .swipehint,.status{bottom:calc(var(--safe-b) + 46px)}
}

@media (prefers-reduced-motion:reduce){
  .track{transition:none}
  .swipehint{animation:none}
}