/* ============================================================
   Artzen guides, shared stylesheet

   The reference is artzenmedia.com. Its actual signature, taken
   off the live page rather than guessed at:

     - bento tiles, small coloured glyph top left, arrow top right
     - a giant ghost wordmark behind the avatar, barely visible
     - mono uppercase grey for every label
     - colour ONLY inside ~18px glyphs, never as a fill
     - no large bright surfaces anywhere on the page

   That last rule is why a white button felt wrong here. An action
   is a tile you can click, not a bright slab.
   ============================================================ */

:root{
  --bg:        #0C0C0C;
  --tile:      #141414;
  --tile-hi:   #181818;
  --field:     #0F0F0F;
  --white:     #FFFFFF;
  --secondary: #8C8C8C;
  --tertiary:  #737373;
  --faint:     #4A4A4A;
  --hairline:  rgba(255,255,255,.07);
  --edge:      rgba(255,255,255,.14);
  --blue:      #1FB7F9;
  --yellow:    #FFEA00;
  --amber:     #FFC24A;
  --ease:      cubic-bezier(.22,.68,.16,1);
  --mono:      "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --max-w:     500px;
}

/* Framer calls the headline face "Inter Display". It is not a separate Google
   family, it is Inter at its display optical size, so ask for the opsz axis and
   pin it at 32 rather than requesting a family that silently fails to load. */
h1,h2,.step__t,.thesis,.tile__title{font-variation-settings:'opsz' 32}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:24px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* The 18px grid, kept. Fades out below the hero so the reading half stays calm. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 88%);
}

/* Film grain, same as the join page. Reads as film stock and stops the hero
   light banding into rings on phone screens. */
body::after{
  content:"";
  position:fixed; top:-50%; left:-50%; width:200%; height:200%;
  z-index:4; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(0,0)}
}

.progress{
  position:fixed; top:0; left:0; height:1px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:rgba(255,255,255,.3);
  z-index:95;
}

.wrap{
  position:relative; z-index:1;
  width:100%; max-width:var(--max-w);
  margin:0 auto;
  padding:0 22px calc(72px + env(safe-area-inset-bottom));
}

/* ---------------- masthead ----------------
   The homepage move: a huge ghost wordmark with the avatar sitting in the notch
   between its two lines. It drifts a few pixels on scroll, which is the whole
   animation budget for this part of the page. */
.mast{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding:38px 0 0;
}
.mast__mark{
  position:absolute; top:24px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  font-size:clamp(52px,15.5vw,70px);
  line-height:.94;
  font-weight:600;
  letter-spacing:-.045em;
  font-variation-settings:'opsz' 32;
  color:rgba(255,255,255,.055);
  white-space:nowrap;
  user-select:none; pointer-events:none;
  will-change:transform;
}
.mast__mark i{font-style:normal; display:block}
.mast__mark i:first-child{transform:translateX(-.17em)}
.mast__mark i:last-child{transform:translateX(.17em)}

.mast .pf{margin-top:30px}
/* ---------------- profile ---------------- */
.pf{
  position:relative; display:block; flex:none;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--ease);
}
.pf__glow{
  position:absolute; inset:-20px; border-radius:50%;
  background:radial-gradient(circle, rgba(30,100,255,.2) 0%, rgba(31,183,249,.06) 50%, transparent 70%);
  filter:blur(13px); pointer-events:none; opacity:.9;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.pf__circle{
  display:block;                 /* a <span> is inline, so width, height and the
                                    border-radius clip are all ignored without this */
  position:relative; z-index:1;
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,#0A0A20,#101030);
}
.pf__circle img{width:100%; height:100%; object-fit:cover; display:block}
.pf__badge{position:absolute; z-index:2; right:0; bottom:0; width:33%; height:33%}
.pf__badge::before{content:""; position:absolute; inset:11%; border-radius:50%; background:var(--bg)}
.pf__badge svg{position:relative; display:block; width:100%; height:100%}
.pf--md{width:62px; height:62px}
.pf--lg{width:68px; height:68px}
.pf:hover{transform:translateY(-2px)}
.pf:hover .pf__glow{opacity:1; transform:scale(1.12)}

/* ---------------- hero ---------------- */
.hero{padding:48px 0 0}
.hero__num{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--faint);
  margin:0 0 16px;
}
h1{
  margin:0;
  font-size:clamp(32px,8.2vw,40px);
  line-height:1.04;
  font-weight:600;
  letter-spacing:-.038em;
  color:var(--white);
}
h1 .emo{
  font-size:.74em; margin-left:.16em; display:inline-block;
  transform-origin:60% 80%;
  animation:tilt 4.6s var(--ease) infinite;
}
@keyframes tilt{
  0%,72%,100%{transform:rotate(0deg)}
  78%{transform:rotate(-11deg)} 84%{transform:rotate(8deg)} 90%{transform:rotate(-4deg)}
}

.lede{margin:20px 0 0; color:var(--secondary); font-size:16px; line-height:26px}
.lede b{color:var(--white); font-weight:500}

.meta{
  margin:24px 0 0;
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:-.01em; text-transform:uppercase; color:var(--faint);
}

/* ---------------- tile ----------------
   The unit the whole homepage is built from. Glyph top left, affordance top
   right, title and subtitle below. Every action on this page is one of these. */
.tile{
  position:relative; display:block;
  background:var(--tile);
  border:1px solid var(--hairline);
  border-radius:18px;
  padding:18px 20px 20px;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.tile__top{display:flex; align-items:center; justify-content:space-between; margin:0 0 34px}
.tile__glyph{width:19px; height:19px; display:block}
.tile__meta{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:-.02em; color:var(--faint);   /* no uppercase: the homepage
                                                  shows "16.3k+", not "16.3K+" */
}
.tile__arrow{width:15px; height:15px; color:var(--tertiary); display:block; transition:transform .3s var(--ease), color .3s var(--ease)}
.tile__title{display:block; font-size:16px; line-height:22px; font-weight:600; letter-spacing:-.026em; color:var(--white)}
.tile__sub{display:block; margin-top:3px; font-size:14px; line-height:20px; color:var(--secondary)}

/* A faint wash bleeding in from the corner, the way the preview art bleeds into
   the cards on the homepage. It is what stops a flat tile reading as a box. */
.tile__wash{
  position:absolute; right:-30%; top:-70%;
  width:80%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(31,183,249,.13) 0%, transparent 68%);
  pointer-events:none; opacity:.75;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.tile--yellow .tile__wash{background:radial-gradient(circle, rgba(255,234,0,.09) 0%, transparent 68%)}

a.tile:hover{background:var(--tile-hi); border-color:var(--edge); transform:translateY(-2px)}
a.tile:hover .tile__arrow{transform:translate(2px,-2px); color:var(--white)}
a.tile:hover .tile__wash{opacity:1; transform:scale(1.12)}
a.tile:active{transform:translateY(0)}

.cta{margin:34px 0 0}
.cta__note{margin:14px 4px 0; font-size:13px; line-height:20px; color:var(--faint); text-align:center}

/* The index at / lists every guide as a tile, one per row. Same component as a
   CTA, so the library and the actions read as one system. */
.index{display:flex; flex-direction:column; gap:12px}

/* ---------------- sections ---------------- */
.rule{height:1px; background:var(--hairline); margin:50px 0; border:0}

h2{
  margin:0 0 16px;
  font-size:21px; line-height:28px; font-weight:600;
  letter-spacing:-.03em; color:var(--white);
}
p{margin:0 0 14px; color:var(--secondary)}
p:last-child{margin-bottom:0}
p b{color:var(--white); font-weight:500}

/* ---------------- step ---------------- */
.step{
  background:var(--tile);
  border:1px solid var(--hairline);
  border-radius:18px;
  padding:24px 20px;
  margin:0 0 12px;
  transition:border-color .4s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .step:hover{border-color:rgba(255,255,255,.11)}
}
.step__head{display:flex; align-items:baseline; gap:12px; margin:0 0 20px}
.step__n{
  flex:none;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:-.02em; color:var(--faint);
}
.step__t{
  font-size:17px; line-height:24px; font-weight:600;
  letter-spacing:-.028em; color:var(--white);
}

/* ---------------- media slots ----------------
   A 9:16 pair per step: the locked-off original and the Grok result. The mono
   placeholder sits behind the <video>, so a guide with no clips yet still holds
   its layout and reads as deliberate rather than broken. */
/* Collapsed until a clip actually loads. A guide shipped before its footage is
   ready shows no empty boxes at all, and the pairs appear on their own the moment
   the MP4s land in clips/. Height rather than display:none, so the browser still
   fetches the metadata that flips them on. */
.clips{
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
  height:0; margin:0; overflow:hidden; visibility:hidden;
}
.clips.ready{height:auto; margin:0 0 18px; visibility:visible}
.slot{
  position:relative; aspect-ratio:9/16;
  border-radius:12px; overflow:hidden;
  background:var(--field);
  box-shadow:inset 0 0 0 1px var(--hairline);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.slot video{position:relative; z-index:1; width:100%; height:100%; display:block; object-fit:cover}
.slot__ph{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font-family:var(--mono); font-size:9px; font-weight:400;
  letter-spacing:.02em; text-transform:uppercase; color:#3A3A3A;
  text-align:center; padding:0 8px;
}
.slot__ph svg{width:17px; height:17px; opacity:.5}
.slot__tag{
  position:absolute; z-index:2; left:9px; top:9px;
  font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.48);
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.slot__tag--after{color:rgba(255,255,255,.9)}
.slot__replay{
  position:absolute; z-index:3; right:8px; bottom:8px;
  width:24px; height:24px; display:none; place-items:center;
  border-radius:50%; background:rgba(6,6,6,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:rgba(255,255,255,.8); opacity:0; transition:opacity .25s var(--ease);
}
.slot.has-clip .slot__replay{display:grid}
.slot:hover .slot__replay{opacity:1}
.slot__replay svg{width:11px; height:11px}

/* ---------------- prompt ---------------- */
.prompt{
  position:relative;
  background:var(--field);
  border-radius:12px;
  box-shadow:inset 0 0 0 1px var(--hairline);
  padding:15px 48px 15px 15px;
  font-family:var(--mono); font-size:12.5px; line-height:21px; color:#CFCFCF;
  word-break:break-word;
  transition:box-shadow .3s var(--ease);
}
.prompt.copied{box-shadow:inset 0 0 0 1px var(--edge)}

/* The prompts are long. Collapsed they show four lines and fade out, so the box
   stays the size it was, and a tap opens the rest. The mask does the fading, so
   there is no gradient overlay to keep in sync with the panel colour. */
.prompt .txt{
  display:block;
  max-height:84px;
  overflow:hidden;
  transition:max-height .42s var(--ease);
}
.prompt.has-more{cursor:pointer; padding-bottom:30px}
.prompt.has-more .txt{
  -webkit-mask-image:linear-gradient(180deg,#000 46%,transparent 96%);
          mask-image:linear-gradient(180deg,#000 46%,transparent 96%);
}
.prompt.has-more.open .txt{
  max-height:var(--full,900px);
  -webkit-mask-image:none; mask-image:none;
}
.prompt__more{
  position:absolute; right:11px; bottom:8px;
  width:22px; height:22px; display:none; place-items:center;
  color:var(--faint); pointer-events:none;
  transition:transform .42s var(--ease), color .25s var(--ease);
}
.prompt.has-more .prompt__more{display:grid}
.prompt.has-more:hover .prompt__more{color:var(--secondary)}
.prompt.open .prompt__more{transform:rotate(180deg)}
.prompt__more svg{width:15px; height:15px; display:block}
.copy{
  position:absolute; top:9px; right:9px;
  width:30px; height:30px; display:grid; place-items:center;
  border:0; border-radius:8px; background:transparent;
  color:var(--faint); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.copy:hover{background:rgba(255,255,255,.05); color:var(--white)}
.copy.done{color:var(--blue)}
.copy svg{width:14px; height:14px; display:block}
.copy .tick{display:none}
.copy.done .clip{display:none}
.copy.done .tick{display:block}

.note{margin:16px 0 0; font-size:14.5px; line-height:23px; color:var(--secondary)}
.note b{color:var(--white); font-weight:500}

.toast{
  position:fixed; left:50%; bottom:calc(34px + env(safe-area-inset-bottom));
  transform:translate(-50%,10px); z-index:96;
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:11px;
  background:rgba(20,20,20,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--hairline), 0 14px 36px rgba(0,0,0,.7);
  font-size:12.5px; letter-spacing:-.01em; color:var(--secondary);
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .3s var(--ease);
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast svg{width:13px; height:13px; color:var(--blue)}

/* ---------------- the trap ----------------
   Same tile, no fill. The colour lives in the 13px glyph, which is exactly how
   the homepage uses its yellow gift and purple waveform icons. */
.trap{
  background:transparent;
  border:1px solid var(--hairline);
  border-radius:18px;
  padding:24px 20px;
  margin:0 0 12px;
}
.trap__head{
  display:flex; align-items:center; gap:9px; margin:0 0 16px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--tertiary);
}
.trap__head svg{width:14px; height:14px; flex:none; color:var(--amber)}

/* ---------------- recap ---------------- */
ol.recap{margin:0; padding:0; list-style:none; counter-reset:r}
ol.recap li{
  counter-increment:r; position:relative;
  padding:0 0 0 32px; margin:0 0 14px;
  color:var(--secondary); font-size:15px; line-height:24px;
}
ol.recap li::before{
  content:counter(r,decimal-leading-zero);
  position:absolute; left:0; top:2px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  color:var(--faint); letter-spacing:-.02em;
}
.thesis{
  margin:28px 0 0;
  font-size:17px; line-height:27px; font-weight:500;
  letter-spacing:-.024em; color:var(--white);
}

/* ---------------- close ---------------- */
.signoff{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; margin:52px 0 0}
.signoff__n{font-size:15px; color:var(--white); letter-spacing:-.012em}
.signoff__h{font-size:13.5px; color:var(--tertiary)}

.foot{
  margin:48px 0 0; padding:22px 0 0;
  border-top:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:-.01em; text-transform:uppercase; color:#3C3C3C;
}
.foot a{color:#3C3C3C; text-decoration:none; transition:color .2s var(--ease)}
.foot a:hover{color:var(--secondary)}

/* ---------------- entrance ---------------- */
.rise{opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rise.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .rise{opacity:1; transform:none; transition:none}
  body::after,h1 .emo{animation:none}
  .mast__mark{transform:translateX(-50%) !important}
  html{scroll-behavior:auto}
}

/* Desktop is the afterthought: nearly everyone arrives from a phone DM. It only
   gets more room, never a different layout. */
@media (min-width:600px){
  :root{--max-w:540px}
  .step,.trap{padding:28px 24px}
  .tile{padding:20px 24px 24px}
  .rule{margin:58px 0}
}