/* The Three-Day Yes: the finish on the Live Build and the Before-class sheet, in light and dark.
   Loaded after each page's own styles. Every colour is light-dark(light, dark): the light value is
   the page's original, so light mode is unchanged, and the scheme follows <meta name="color-scheme">
   (see site.css). The page's own variables are remapped here, so Claude's sheets follow too.
   Artwork stays light like paper (the drawing, previews). Print is always light (site.css). */
body[data-nav]{
  --page:light-dark(#F6F5F2,#09090B);
  --card:light-dark(#FFFFFF,#131317);
  --head:light-dark(#F1F0EC,#1D1D22);
  --ink:light-dark(#17171B,#EDEDF0);
  --dim:light-dark(#6B6B74,#A3A4AE);
  --dark:light-dark(#0F0F10,#16161B);
  --red-soft:light-dark(#FDE7E8,#2C0E12);
  --green:light-dark(#146B38,#3DDC84);--green-soft:light-dark(#E6F4EC,#0D2A19);
  --amber:light-dark(#6B4E00,#F7C948);--amber-soft:light-dark(#FBF1D6,#2A2208);
  --blue:light-dark(#2347B8,#9AB2FF);--blue-soft:light-dark(#E8EDFB,#151C35);
  --line:light-dark(rgba(23,23,27,.09),rgba(255,255,255,.08));
  --line-2:light-dark(rgba(23,23,27,.14),rgba(255,255,255,.13));
  --line-3:light-dark(rgba(23,23,27,.24),rgba(255,255,255,.22));
  --surface-2:light-dark(#FBFAF8,#0F0F13);
  --glass:light-dark(rgba(255,255,255,.82),rgba(20,20,25,.7));
  --glass-2:light-dark(rgba(255,255,255,.55),rgba(255,255,255,.025));
  --muted-text:light-dark(#56555F,#A3A4AE);
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-card:0 1px 2px light-dark(rgba(23,23,27,.04),rgba(0,0,0,.4)),0 10px 30px -18px light-dark(rgba(23,23,27,.18),rgba(0,0,0,.7));
  --shadow-lift:0 2px 6px light-dark(rgba(23,23,27,.06),rgba(0,0,0,.4)),0 30px 60px -20px light-dark(rgba(23,23,27,.25),rgba(0,0,0,.8));
  --edge:inset 0 1px 0 light-dark(rgba(255,255,255,.9),rgba(255,255,255,.045));
}
@media screen{
  html{scroll-padding-top:96px}
  body{background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .35s,color .35s}
  ::selection{background:rgba(240,22,33,.22)}

  /* type */
  h1,h2,h3{letter-spacing:-.035em;text-wrap:balance}
  h2{letter-spacing:-.04em}
  .lede{text-wrap:pretty;color:var(--muted-text)}
  .kick{letter-spacing:.14em;font-size:11px}
  a{color:light-dark(#F01621,#FF5560)}
  .hero2{padding:64px 0 34px}
  .hero2 h1{font-size:clamp(42px,6.4vw,80px);line-height:1;letter-spacing:-.042em;font-weight:800}
  .hero2 h1 .red{font-style:italic;font-weight:700;letter-spacing:-.04em;background:linear-gradient(135deg,light-dark(#F01621,#FF4A55) 20%,light-dark(#B80D18,#F01621));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
  .hero2 .lede{font-size:clamp(17px,1.4vw,20px);max-width:640px}

  /* surfaces */
  .card,.out,.quote,.stage,.loop div,.relaymap div,.stepper div,.modes button,.sheet{border-color:var(--line)}
  .card{border-radius:20px;box-shadow:var(--shadow-card),var(--edge)}
  .card.dark,.dark{background:radial-gradient(120% 140% at 100% 0%,rgba(240,22,33,.16),transparent 45%),linear-gradient(180deg,light-dark(#17171B,#1A1A20),light-dark(#0C0C0F,#111115));border:1px solid light-dark(rgba(255,255,255,.06),rgba(255,255,255,.09));box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.06);color:#fff}
  .stage{border-radius:26px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-card),var(--edge);padding:clamp(18px,2.6vw,30px)}
  .stage-head h3{font-size:clamp(22px,2.2vw,28px)}
  .stage.locked{opacity:.45;filter:grayscale(.5) blur(.3px)}
  .sheet{background:var(--card);border-radius:20px;box-shadow:var(--shadow-card)}
  .say,pre.prompt,#impBox,[style*="background:#FBFAF8"]{background:var(--surface-2)!important}
  .line{border-bottom-color:var(--line-3)}
  .box,.drop{border-color:var(--line-3)}
  .fact.missing textarea{background:light-dark(#fff7f7,#2a0d10)}
  .p-dark{background:light-dark(#17171B,#EDEDF0);color:light-dark(#fff,#17171B)}
  .pill{background:var(--head);color:var(--ink)}

  /* the six outcomes */
  .out{border-radius:18px;padding:20px;box-shadow:var(--shadow-card),var(--edge);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
  .out:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:rgba(240,22,33,.28)}
  .out .ic{border-radius:13px;color:light-dark(#F01621,#FF6B72);background:linear-gradient(135deg,light-dark(#FDE9EA,#2C0E12),light-dark(#FBD3D5,#3A1016));box-shadow:inset 0 1px 0 light-dark(#fff,rgba(255,255,255,.06))}
  .loop div{border-radius:16px;box-shadow:var(--shadow-card),var(--edge)}
  .loop div.c{background:radial-gradient(120% 120% at 100% 0%,rgba(240,22,33,.22),transparent 60%),linear-gradient(180deg,#25252B,#111114);border-color:light-dark(#111114,rgba(240,22,33,.35));color:#fff}
  .learn div{border-left-color:#F01621}

  /* buttons */
  .btn{font-weight:700;font-size:16px;padding:14px 24px;letter-spacing:-.01em;background:linear-gradient(135deg,#F01621,#C8101B);color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 20px -10px rgba(240,22,33,.55);transition:transform .2s,box-shadow .25s var(--ease),filter .2s}
  .btn:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 14px 30px -10px rgba(240,22,33,.6)}
  .btn:active{transform:scale(.97)}
  .btn.dk{background:linear-gradient(180deg,light-dark(#2B2B31,#F4F4F6),light-dark(#121215,#DCDCE2));color:light-dark(#fff,#17171B);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px -10px rgba(0,0,0,.5)}
  .btn.dk:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px -10px rgba(0,0,0,.45)}
  .btn.ghost{background:var(--glass);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(0,0,0,.05);font-weight:600;color:var(--ink)}
  .btn.ghost:hover{background:light-dark(#fff,rgba(255,255,255,.08));border-color:var(--line-3);filter:none}
  .dark .btn.ghost,.card.dark .btn.ghost,.promptcard .btn.ghost,.wow .btn.ghost,#cele .btn.ghost{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.16)!important;color:#fff!important}
  .dark .btn.ghost:hover,.promptcard .btn.ghost:hover,.wow .btn.ghost:hover{background:rgba(255,255,255,.12)!important}
  .dark .btn.dk,.promptcard .btn.dk{background:linear-gradient(180deg,#F4F4F6,#DCDCE2);color:#17171B}

  /* fields */
  input,textarea{border:1px solid var(--line-2);background:light-dark(#fff,rgba(255,255,255,.035));color:var(--ink);border-radius:12px;font-size:15.5px;transition:border-color .2s,box-shadow .25s var(--ease),background .2s}
  input:hover,textarea:hover{border-color:var(--line-3)}
  input:focus,textarea:focus{outline:none;background:light-dark(#fff,rgba(255,255,255,.05));border-color:rgba(240,22,33,.7);box-shadow:0 0 0 4px rgba(240,22,33,.15),0 0 24px -6px rgba(240,22,33,.45)}
  input::placeholder,textarea::placeholder{color:light-dark(#8E8D96,#70717C)}
  .pastebox textarea{background:light-dark(#fff,rgba(255,255,255,.035))}
  button:focus-visible,a:focus-visible{outline:2px solid #F01621;outline-offset:3px}
  label{font-weight:700;letter-spacing:-.01em}
  label small,.fillsheet .fq small,.fillsheet .fq .eg{color:var(--dim)}

  /* live build */
  .modes button{border:1px solid var(--line-2);border-radius:18px;padding:16px 18px;background:var(--glass);color:var(--dim);transition:border-color .2s,box-shadow .25s var(--ease),transform .2s}
  .modes button b{color:var(--ink)}
  .modes button:hover{border-color:var(--line-3);transform:translateY(-1px)}
  .modes button.on{border-color:transparent;box-shadow:0 0 0 2px #F01621,0 12px 28px -14px rgba(240,22,33,.55);background:var(--card)}
  .relaymap div{border-radius:14px;background:var(--glass)}
  .relaymap div.open{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:var(--card)}
  .stepper div{border-radius:14px;background:var(--card)}
  .promptcard{border-radius:22px;padding:20px;color:#fff;background:radial-gradient(120% 100% at 100% 0%,rgba(240,22,33,.14),transparent 50%),linear-gradient(180deg,light-dark(#18181C,#1A1A20),light-dark(#0D0D10,#111115));border:1px solid light-dark(rgba(255,255,255,.06),rgba(255,255,255,.09));box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.05)}
  pre.live{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:14px;scrollbar-width:thin;scrollbar-color:#3a3a40 transparent}
  .promptcol{top:96px}
  .pastebox{border:1.5px dashed var(--line-3);background:var(--glass-2);border-radius:20px;transition:border-color .2s,background .2s}
  .pastebox:focus-within{border-color:rgba(240,22,33,.5);background:light-dark(rgba(255,255,255,.85),rgba(255,255,255,.04))}
  .chips button{background:var(--card);color:var(--ink);border-color:var(--line-2);transition:background .2s,border-color .2s,color .2s}
  .chips button:hover{border-color:var(--line-3)}
  .chips button.on{background:linear-gradient(180deg,light-dark(#2B2B31,#F4F4F6),light-dark(#121215,#DCDCE2));color:light-dark(#fff,#17171B);border-color:transparent}
  .chips button.on:before{color:light-dark(#ff8a90,#F01621)}
  .stylepick button{background:var(--card);border:1px solid var(--line-2);border-radius:16px;transition:box-shadow .25s var(--ease),transform .2s}
  .stylepick .nm{color:var(--dim)}.stylepick .nm b{color:var(--ink)}
  .stylepick button:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
  .stylepick button.on{border-color:transparent;box-shadow:0 0 0 2px #F01621,0 12px 28px -14px rgba(240,22,33,.55)}
  .browser,.site,.pic{border-color:var(--line);border-radius:18px;box-shadow:var(--shadow-card)}
  .browser{background:var(--card)}
  .browser .bar span{background:light-dark(#fff,rgba(255,255,255,.06))}
  .browser .bar i{background:light-dark(#d5d1c8,#3d3d44)}
  .wire div{background:var(--head)}
  .wire div.addon{background:var(--red-soft);color:light-dark(#F01621,#FF6B72)}
  .pic,.site{color-scheme:light}
  .wow{border-radius:26px;color:#fff;background:radial-gradient(90% 120% at 50% 0%,rgba(240,22,33,.22),transparent 55%),linear-gradient(180deg,#1A1A20,#0C0C0F);border:1px solid light-dark(transparent,rgba(255,255,255,.08));box-shadow:var(--shadow-lift)}
  .need{background:var(--red-soft);color:light-dark(#F01621,#FF6B72)}
  .rstatus.err,.status.err{color:light-dark(#F01621,#FF6B72)}
  .modal{background:light-dark(rgba(12,12,15,.5),rgba(0,0,0,.65));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .modal .card{border-radius:24px;background:var(--card);box-shadow:0 40px 100px -20px rgba(0,0,0,.5)}
  .quote{background:var(--card)}
  td,th{border-top-color:var(--line)}
  footer{border-top-color:var(--line);color:var(--dim)}

  /* sections enter as they scroll in (progressive: only where supported) */
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .out,.loop div,.learn div,.stage,.card:not(.dark){animation:app-in linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
      @keyframes app-in{from{opacity:0;transform:translateY(18px)}}
    }
  }
}