/* Copied from Feedback V2 (feedback-v2/site/index.template.html) on 2026-10-15 so the hub looks the same. */
  :root{
    --bg0:#0a0c11; --steel:#171c26; --steel2:#1e2531; --line:#2c3543; --line2:#3a4557;
    --ink:#eaf0f7; --muted:#94a2b6; --silver:#cbd5e2;
    --red:#e5325a; --red2:#ff4d6d; --pink:#ff6ea8; --pink2:#ff97c4;
    --redglow:rgba(229,50,90,.55); --pinkglow:rgba(255,110,168,.5);

    /* VERDICT palette. These three mean a grade and nothing else. No section
       band may use them, or a whole band reads as a score. */
    --pass:#33d17e; --pass-t:rgba(51,209,126,.16);
    --soft:#f6b53f; --soft-t:rgba(246,181,63,.16);
    --fail:#ff5470; --fail-t:rgba(255,84,112,.18);
    --none:#8c9bb0; --none-t:rgba(140,155,176,.14);

    /* SECTION palette. Deliberately deeper and more desaturated than the
       verdict palette above, and applied only to a border and an icon chip,
       never as a background fill. Rafi ruled on this on 2026-08-01 after the
       baseline visual review flagged that a green band could be read as a
       grade. The crimson is pushed well away from the pink so the two do not
       look like the same section colour twice. */
    --tone-pink:#ff57a3;    --tone-pink-g:rgba(255,87,163,.50);
    --tone-crimson:#b81f3c; --tone-crimson-g:rgba(184,31,60,.50);
    --tone-green:#2e8b60;   --tone-green-g:rgba(46,139,96,.45);
    --tone-orange:#b4661f;  --tone-orange-g:rgba(180,102,31,.45);

    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --disp:"Chakra Petch",-apple-system,BlinkMacSystemFont,sans-serif;
    --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --grad:linear-gradient(135deg,var(--red),var(--pink));
  }
  *{box-sizing:border-box}
  html,body{background:var(--bg0)}
  body{margin:0;color:var(--ink);font:15px/1.6 var(--body);-webkit-font-smoothing:antialiased}
  a{color:var(--pink2)}

  /* layered background */
  .bgfx{position:fixed;inset:0;z-index:-3;background:
    radial-gradient(1100px 620px at 10% -8%, rgba(229,50,90,.20), transparent 60%),
    radial-gradient(1000px 700px at 104% 4%, rgba(255,110,168,.15), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(63,120,255,.07), transparent 60%),
    linear-gradient(180deg,#0a0c11,#0d1017 45%,#0a0c11)}
  .bgfx::before{content:"";position:absolute;inset:0;opacity:.6;
    background-image:linear-gradient(rgba(130,150,180,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(130,150,180,.045) 1px,transparent 1px);background-size:46px 46px;
    -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 55%,transparent 100%);
    mask-image:radial-gradient(120% 90% at 50% 0%,#000 55%,transparent 100%)}
  .bgfx::after{content:"";position:absolute;inset:0;opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cg%20fill='none'%20stroke='%23e5325a'%20stroke-width='1'%20opacity='0.10'%3E%3Cpath%20d='M0%2028H52V84H108V140H160'/%3E%3Cpath%20d='M28%200V44H84V96H140V160'/%3E%3C/g%3E%3Cg%20fill='%23ff6ea8'%20opacity='0.14'%3E%3Ccircle%20cx='52'%20cy='84'%20r='2.4'/%3E%3Ccircle%20cx='108'%20cy='140'%20r='2.4'/%3E%3Ccircle%20cx='84'%20cy='96'%20r='2.4'/%3E%3C/g%3E%3C/svg%3E")}
  .scan{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.020) 0 1px,transparent 1px 3px)}

  /* §9C. Rafi: "It should be more dynamic of a webpage where it goes all the
     way to the edge of the section width wise, and dynamically wraps depending
     on the size of your browser."
     The dead space was mine. §6 defect 3 complained that beat notes ran to about
     a 95 character measure, and the rebuild answered it with hard `max-width`
     caps between 68ch and 74ch on eleven prose selectors. Those caps do nothing
     on a narrow window and leave half of every card empty on a wide one.
     Every cap is now gone and text fills its section. Line length is controlled
     the two ways Rafi named instead: the container width, and a fluid clamp on
     the prose size so the measure narrows as the type grows. */
  .wrap{max-width:min(100%,940px);margin:0 auto;padding:20px 22px 100px}
  /* One knob, so the measure cannot drift apart between sections. */
  :root{--prose:clamp(13.5px,0.35vw + 12.2px,15px)}
  h1,h2,h3,h4{font-family:var(--disp);letter-spacing:.005em;margin:0;font-weight:700}

  /* top bar / nav */
  .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;
    padding-bottom:15px;border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:19px;
    letter-spacing:.06em;cursor:pointer;text-decoration:none}
  .brand.static{cursor:default}
  .shuriken{width:23px;height:23px;background:var(--grad);flex:0 0 auto;
    clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
    filter:drop-shadow(0 0 6px var(--redglow))}
  .brand b{background:linear-gradient(180deg,#fff,#c7d0dc);-webkit-background-clip:text;background-clip:text;color:transparent}
  .homebtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--silver);
    padding:9px 16px;border:1px solid var(--line2);border-radius:10px;background:rgba(30,37,49,.7);transition:.15s}
  .homebtn:hover{border-color:var(--red);color:#fff;box-shadow:0 0 16px -6px var(--redglow)}
  .homebtn svg{width:14px;height:14px}

  /* ===== HERO BANNER (full width) ===== */
  .herobanner{position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:20px;
    margin:0 0 20px;padding:20px 40px;
    background:
      radial-gradient(680px 320px at 6% -20%, rgba(229,50,90,.30), transparent 62%),
      radial-gradient(760px 380px at 102% 0%, rgba(255,110,168,.22), transparent 58%),
      linear-gradient(180deg,rgba(24,29,39,.96),rgba(11,14,20,.97));
    box-shadow:0 0 0 1px rgba(255,110,168,.10),0 40px 90px -50px var(--pinkglow)}
  .herobanner::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
    background-image:linear-gradient(rgba(130,150,180,.05) 1px,transparent 1px),
      linear-gradient(90deg,rgba(130,150,180,.05) 1px,transparent 1px);background-size:38px 38px;
    -webkit-mask-image:radial-gradient(90% 120% at 100% 0%,#000 30%,transparent 75%);
    mask-image:radial-gradient(90% 120% at 100% 0%,#000 30%,transparent 75%)}
  .herobanner .brk{position:absolute;width:26px;height:26px;opacity:.8;z-index:2;border-color:var(--red2)}
  .herobanner .brk.tl{top:14px;left:14px;border-left:2px solid;border-top:2px solid}
  .herobanner .brk.br{bottom:14px;right:14px;border-right:2px solid;border-bottom:2px solid}
  .heroshuriken{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:280px;height:280px;
    opacity:.10;pointer-events:none;background:var(--silver);
    clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
  .heroshuriken.small{width:150px;height:150px;right:-10px;opacity:.09}
  .hero-in{position:relative;z-index:1;max-width:680px}
  .hero-badge{display:inline-block;max-width:100%;padding:9px 26px;border-radius:999px;
    border:1px solid rgba(255,110,168,.34);background:rgba(255,110,168,.07);
    box-shadow:0 0 26px -10px var(--pinkglow),0 0 0 1px rgba(255,110,168,.06) inset}
  .hero-badge-txt{display:block;white-space:nowrap;font-family:var(--disp);font-weight:700;
    font-size:clamp(20px,3.4vw,34px);line-height:1;letter-spacing:.02em;
    background:linear-gradient(180deg,#f6f9fd 0%,#cfd8e4 44%,#8f9bad 56%,#eef3f9 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 12px rgba(0,0,0,.55))}
  .accentbar{height:3px;width:130px;border-radius:6px;background:var(--grad);margin:12px 0 0;box-shadow:0 0 16px -2px var(--redglow)}
  .hero-lead{margin-top:12px}
  .hero-lead .l0{color:#cdd8e6;font-size:15px;font-weight:500}
  .hero-lead ol{margin:8px 0 0;padding:0;list-style:none;counter-reset:hl}
  .hero-lead li{counter-increment:hl;position:relative;padding:7px 0 7px 44px;color:#d7e0ec;font-size:14.5px;
    border-top:1px solid rgba(130,150,180,.14)}
  .hero-lead li::before{content:counter(hl);position:absolute;left:0;top:5px;width:27px;height:27px;border-radius:9px;
    background:var(--grad);color:#fff;font:700 15px var(--disp);display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 16px -5px var(--redglow)}
  .hero-foot{margin-top:14px;padding-top:12px;border-top:1px solid rgba(130,150,180,.14);
    color:#9fb0c2;font-size:13.5px;line-height:1.55}
  .hero-foot b{color:#dce5f0}
  @media(max-width:640px){.herobanner{padding:32px 24px}}

  /* results hero (smaller) */
  .rhero{position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:18px;margin:0 0 24px;padding:30px 32px;
    background:radial-gradient(600px 260px at 4% -10%, rgba(229,50,90,.22), transparent 60%),
      linear-gradient(180deg,rgba(24,29,39,.96),rgba(11,14,20,.97));
    box-shadow:0 0 0 1px rgba(255,110,168,.08),0 34px 70px -46px var(--pinkglow)}
  .rhero .brk{position:absolute;width:22px;height:22px;opacity:.8;border-color:var(--red2)}
  .rhero .brk.tl{top:12px;left:12px;border-left:2px solid;border-top:2px solid}
  .rhero .brk.br{bottom:12px;right:12px;border-right:2px solid;border-bottom:2px solid}
  .rhero h1{font-size:30px;line-height:1.08;
    background:linear-gradient(180deg,#f6f9fd,#b7c2d1);-webkit-background-clip:text;background-clip:text;color:transparent}
  /* The orientation line. It used to be a single ~11px low-contrast mono run and
     it was the least legible thing on the page, which is a poor fate for the
     writer's only orientation. Now: bigger, split into labelled chips, and the
     values carry real contrast. */
  .rhero .meta-line{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
  .rhero .meta-line .mi{display:inline-flex;align-items:baseline;gap:7px;
    padding:6px 12px;border:1px solid var(--line2);border-radius:9px;background:rgba(13,16,22,.55)}
  .rhero .meta-line .mk{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9fb0c2}
  .rhero .meta-line .mv{font:600 13.5px var(--body);color:#f2f6fb}

  /* cards / inputs */
  .card{position:relative;background:linear-gradient(180deg,rgba(30,37,49,.92),rgba(19,24,32,.92));
    border:1px solid var(--line);border-radius:16px;padding:22px}
  .card::before,.card::after{content:"";position:absolute;width:15px;height:15px;opacity:.5;border-color:var(--red2)}
  .card::before{top:9px;left:9px;border-left:2px solid;border-top:2px solid}
  .card::after{bottom:9px;right:9px;border-right:2px solid;border-bottom:2px solid}
  .shadow{box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 26px 60px -34px rgba(0,0,0,.85)}
  label{display:block;font-weight:600;margin:15px 0 6px;font-size:13.5px;color:var(--silver)}
  input[type=text],input[type=email],input[type=password],textarea,select{width:100%;background:#0d1119;border:1px solid var(--line);
    color:var(--ink);border-radius:10px;padding:11px 13px;font:inherit}
  input::placeholder,textarea::placeholder{color:#5c6a7d}
  input:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(229,50,90,.22)}
  input[type=file]{width:100%;color:var(--muted);margin-top:6px;font-size:13px}
  .rowf{display:flex;gap:14px;flex-wrap:wrap}
  .rowf>div{flex:1;min-width:200px}
  .toggle{display:flex;gap:10px;margin:6px 0 4px;flex-wrap:wrap}
  .toggle button{flex:1;min-width:190px;padding:13px;border:1px solid var(--line);background:#0d1119;color:var(--silver);
    border-radius:11px;cursor:pointer;font:600 15px var(--disp);letter-spacing:.02em;transition:.15s}
  .toggle button.active{border-color:var(--red);color:#fff;
    background:linear-gradient(180deg,rgba(229,50,90,.22),rgba(229,50,90,.06));box-shadow:0 0 18px -6px var(--redglow)}
  .checkrow{display:flex;align-items:flex-start;gap:10px;margin-top:9px;cursor:pointer}
  .checkrow input{width:17px;height:17px;flex:0 0 auto;margin-top:2px;accent-color:var(--red)}
  .checkrow span{font-size:13.5px;color:#b3bfce;line-height:1.5}
  .btn{margin-top:20px;width:100%;padding:14px;border:0;border-radius:12px;background:var(--grad);
    color:#fff;font:700 16px var(--disp);letter-spacing:.03em;cursor:pointer;text-transform:uppercase;
    box-shadow:0 10px 30px -12px var(--redglow);transition:filter .15s,transform .05s}
  .btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
  .btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}
  .muted{color:var(--muted)} .hint{color:var(--muted);font-size:13px;margin-top:6px}
  .err{color:var(--red2);margin-top:12px;font-size:14px} .hidden{display:none}

  /* recent list */
  h2.block{font-size:19px;letter-spacing:.02em}
  h2.block::before{content:"// ";color:var(--red2);font-family:var(--mono);font-weight:600}
  table.list{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
  table.list th{font:600 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
    text-align:left;padding:0 10px 11px;border-bottom:1px solid var(--line)}
  table.list td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
  table.list tr:last-child td{border-bottom:0}
  table.list tbody tr:hover td{background:rgba(229,50,90,.05)}
  table.list a{font-weight:600;text-decoration:none;color:var(--ink)}
  table.list a:hover{color:var(--pink2)}

  /* pills */
  .pill{display:inline-block;font:700 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;
    padding:6px 10px;border-radius:999px;border:1px solid transparent}
  .pill.done{background:var(--pass-t);color:var(--pass);border-color:rgba(51,209,126,.35);box-shadow:0 0 14px -5px rgba(51,209,126,.6)}
  .pill.processing,.pill.pending{background:var(--soft-t);color:var(--soft);border-color:rgba(246,181,63,.35)}
  .pill.error{background:var(--fail-t);color:var(--fail);border-color:rgba(255,84,112,.35)}

  /* grade chips (green / yellow / red / neutral). VERDICT palette only. */
  .g{display:inline-block;font:700 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;
    padding:6px 9px;border-radius:6px;border:1px solid transparent;white-space:nowrap}
  .g.strong,.g.pass{background:var(--pass-t);color:var(--pass);border-color:rgba(51,209,126,.4);box-shadow:0 0 12px -5px rgba(51,209,126,.7)}
  .g.okay{background:var(--soft-t);color:var(--soft);border-color:rgba(246,181,63,.4)}
  .g.weak,.g.fail{background:var(--fail-t);color:var(--fail);border-color:rgba(255,84,112,.45);box-shadow:0 0 12px -5px rgba(255,84,112,.7)}
  .g.neutral{background:var(--none-t);color:var(--none);border-color:rgba(140,155,176,.34)}
  /* The optional-beat pill carries a whole sentence, not a one-word verdict, so
     it opts out of the uppercase mono treatment. Set in caps and nowrap it read
     as WAS OPTIONAL SO OK IT IS ABSENT and was five times the width of PASS. */
  .g.optional{text-transform:none;white-space:normal;font:600 11px var(--body);
    letter-spacing:0;padding:5px 10px;line-height:1.35}

  /* ===== collapsible section bands =====
     One neutral background for every band. Section identity is carried by the
     border, the icon chip and the heading tint ONLY, so no band can be mistaken
     for a grade. */
  .band{position:relative;border-radius:20px;margin:0 0 22px;overflow:hidden;
    border:1px solid var(--line2);
    background:linear-gradient(180deg,rgba(22,27,36,.72),rgba(12,15,21,.72))}
  .band[open]{box-shadow:0 34px 70px -44px rgba(0,0,0,.8)}
  .sbar{position:relative;list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
    padding:20px 22px;user-select:none;transition:background .15s}
  .sbar::-webkit-details-marker{display:none}
  .sbar:hover{background:rgba(255,255,255,.025)}
  .sicon{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.14)}
  .sicon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8}
  .sbar .stext{flex:1;min-width:0}
  .sbar h2{font-size:22px;line-height:1.14;letter-spacing:.01em}
  .sbar .ssum{display:block;margin-top:5px;font-size:13.5px;color:#a7b4c4}
  .chev{flex:0 0 auto;width:16px;height:16px;color:var(--muted);transition:transform .2s}
  .band[open] .chev{transform:rotate(180deg)}
  .sbody{padding:4px 22px 24px}
  .sblurb{color:#aab6c6;font-size:calc(var(--prose) + 1px);margin:6px 0 14px}
  .sblurb b{color:#fff}

  /* the four section tones */
  /* Headings stay neutral on the three non-pink tones. An earlier pass tinted
     them and the crimson heading came out a light salmon that read as a second
     pink, which is the exact confusion the review warned about. Border and icon
     carry the tone, as ruled. The pink band keeps its gradient heading because
     Rafi likes that band as it is. */
  .band .sbar h2{background:linear-gradient(180deg,#f4f8fd,#aeb9c9);-webkit-background-clip:text;background-clip:text;color:transparent}
  .band.tone-crimson{border-color:rgba(184,31,60,.78)}
  .band.tone-crimson .sicon{background:linear-gradient(135deg,#8f1730,#c9294a);box-shadow:0 0 20px -6px var(--tone-crimson-g)}
  .band.tone-green{border-color:rgba(46,139,96,.78)}
  .band.tone-green .sicon{background:linear-gradient(135deg,#1f6244,#35a071);box-shadow:0 0 20px -6px var(--tone-green-g)}
  .band.tone-orange{border-color:rgba(180,102,31,.78)}
  .band.tone-orange .sicon{background:linear-gradient(135deg,#7e4614,#c97824);box-shadow:0 0 20px -6px var(--tone-orange-g)}
  .band.tone-pink{border-color:rgba(255,87,163,.78)}
  .band.tone-pink .sicon{background:linear-gradient(135deg,var(--red),var(--tone-pink));box-shadow:0 0 22px -5px var(--tone-pink-g)}
  .band.tone-pink .sbar h2{background:linear-gradient(90deg,#ff8ab8,#ff3f78);-webkit-background-clip:text;background-clip:text;color:transparent}

  .divider{height:1px;border:0;margin:18px 0;background:linear-gradient(90deg,transparent,rgba(255,110,168,.35),transparent)}

  /* The FIRST TEN SECONDS and cold-read blocks were deleted 2026-08-01
     (§9B.1, §9B.2) along with their payload fields. */

  /* ===== FOUR MAIN QUESTIONS ===== */
  /* One question per line. The old two-across grid and its `wide` flag are gone. */
  .dims{display:block;margin-top:4px}
  .dim{border:1px solid var(--line);border-radius:13px;padding:15px 17px;background:rgba(11,14,20,.6);margin:0 0 13px}
  .dim:last-child{margin-bottom:0}
  .dimhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
  .dim h4{font-size:16.5px;color:#fff;line-height:1.3}
  /* §9B.4. The four questions are numbered on screen. */
  .qnum{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
    border-radius:7px;margin-right:10px;vertical-align:1px;
    background:rgba(255,87,163,.13);border:1px solid rgba(255,87,163,.35);
    color:var(--pink2);font:700 12px var(--mono)}
  /* §9B.5. Rafi: the grade should be a major visual element. It was 10px mono
     in the corner, which is smaller than the section labels around it. */
  .gbig{flex:0 0 auto;display:inline-block;border:1px solid;border-radius:10px;
    padding:7px 15px;font:700 clamp(15px,1.1vw+11px,19px)/1 var(--disp);
    letter-spacing:.02em;white-space:nowrap}
  .gbig.strong{background:var(--pass-t);color:var(--pass);border-color:rgba(51,209,126,.5);
    box-shadow:0 0 22px -8px rgba(51,209,126,.8)}
  .gbig.okay{background:var(--soft-t);color:var(--soft);border-color:rgba(246,181,63,.5)}
  .gbig.weak{background:var(--fail-t);color:var(--fail);border-color:rgba(255,84,112,.55);
    box-shadow:0 0 22px -8px rgba(255,84,112,.8)}
  .gbig.neutral{background:var(--none-t);color:var(--none);border-color:rgba(140,155,176,.4)}
  /* Two checkpoint grades per question, 2026-08-02, replacing the old single
     `points` bullet list. Each is its own small card: a label (0:30 / 1:00), a
     grade pill, and a short note. */
  .ckrow{display:flex;gap:14px;margin-top:12px}
  .ck{flex:1 1 0;min-width:0;border:1px solid var(--line);border-radius:11px;
    padding:12px 14px;background:rgba(255,255,255,.02)}
  .ckhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
  .cklabel{font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--silver)}
  .ck .gbig{padding:4px 11px;font-size:13.5px}
  .cknote{font-size:var(--prose);line-height:1.6;color:#b6c2d1;margin:0}
  .dim .sub{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
    font-size:12.5px;line-height:1.6;color:#9fb0c2}
  .dim .sub b{color:var(--silver);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;display:block;margin-bottom:3px}
  .dim.strong{border-color:rgba(51,209,126,.28)}
  .dim.okay{border-color:rgba(246,181,63,.28)}
  .dim.weak{border-color:rgba(255,84,112,.3)}
  .dim.neutral{border-color:rgba(140,155,176,.28)}

  /* ===== WORKING VS NOT WORKING =====
     Two columns, then Changes to Consider full width underneath both. The old
     three-across block was cramped even at full width. */
  .syngrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:4px}
  @media(min-width:720px){.syngrid{grid-template-columns:1fr 1fr}}
  /* §9C. The baseline visual review never looked at a narrow window at all.
     Below 640px the section padding, the question head and the grade all have
     to give: a `gbig` chip beside a three line question forces a squeeze that
     reads as a bug. The formula table stays scrollable rather than shrinking,
     because four columns of prose at phone width is worse than a swipe. */
  @media(max-width:640px){
    .wrap{padding:16px 14px 80px}
    .sbody{padding:4px 14px 20px}
    .dimhead{flex-direction:column;align-items:flex-start;gap:10px}
    .gbig{font-size:16px;padding:6px 13px}
    .dim,.noteitem,.acard{padding:14px}
    .qnum{width:22px;height:22px;font-size:11px;margin-right:8px}
    .ckrow{flex-direction:column;gap:10px}
  }
  .syncol{border:1px solid var(--line);border-radius:12px;padding:15px 17px;background:rgba(11,14,20,.6)}
  .syncol.full{grid-column:1/-1}
  .syncol h4{font:700 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;display:flex;align-items:center;gap:8px}
  .syncol h4::before{content:"";width:9px;height:9px;border-radius:2px;flex:0 0 auto;transform:rotate(45deg)}
  .syncol.good h4{color:var(--pass)} .syncol.good h4::before{background:var(--pass);box-shadow:0 0 8px var(--pass)} .syncol.good{border-color:rgba(51,209,126,.3)}
  .syncol.warn h4{color:var(--soft)} .syncol.warn h4::before{background:var(--soft);box-shadow:0 0 8px var(--soft)} .syncol.warn{border-color:rgba(246,181,63,.3)}
  .syncol.act h4{color:var(--pink2)} .syncol.act h4::before{background:var(--pink);box-shadow:0 0 8px var(--pink)} .syncol.act{border-color:rgba(255,110,168,.32)}
  .syncol ul{margin:0;padding-left:18px} .syncol li{margin:0 0 9px;font-size:var(--prose);line-height:1.6;color:#b6c2d1} .syncol li:last-child{margin-bottom:0}

  /* ===== BEAT SHEET ===== */
  .beat{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
  .beat:first-of-type{border-top:0}
  /* Beat numbers are NEVER colour graded. They are an index, not a score. */
  .beatnum{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    font:700 14px var(--disp);border:1px solid var(--line2);background:rgba(30,37,49,.7);color:var(--silver)}
  .beatbody{flex:1;min-width:0}
  .beattop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .beatname{font-family:var(--disp);font-weight:700;font-size:16.5px;color:#fff;
    background:none;border:0;padding:0;cursor:pointer;text-align:left;
    border-bottom:1px dashed rgba(255,110,168,.5)}
  .beatname:hover{color:var(--pink2)}
  .beatname .qmark{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
    margin-left:6px;border-radius:50%;border:1px solid rgba(255,110,168,.55);color:var(--pink2);
    font:700 10px var(--mono);vertical-align:1px}
  .beatwin{font:600 11px var(--mono);letter-spacing:.05em;color:var(--muted);
    border:1px solid var(--line2);border-radius:999px;padding:3px 9px}
  .beatfound{font:600 11px var(--mono);letter-spacing:.05em;color:var(--pink2)}
  .beatnote{margin:8px 0 0;font-size:var(--prose);line-height:1.65;color:#b6c2d1}
  .srcnote{margin:0 0 14px;font-size:12.5px;color:var(--muted);
    border-left:2px solid var(--line2);padding-left:12px}

  /* beat definition popup */
  .modalbg{position:fixed;inset:0;z-index:50;background:rgba(5,7,11,.72);
    display:flex;align-items:center;justify-content:center;padding:24px}
  .modal{max-width:560px;width:100%;background:linear-gradient(180deg,rgba(30,37,49,.99),rgba(16,20,27,.99));
    border:1px solid var(--line2);border-left:4px solid var(--tone-orange);border-radius:16px;padding:22px 24px;
    box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
  .modal .mtop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
  .modal h3{font-size:19px;color:#fff;line-height:1.25}
  .modal .mwin{font:600 11px var(--mono);letter-spacing:.05em;color:var(--muted);
    border:1px solid var(--line2);border-radius:999px;padding:3px 9px;display:inline-block;margin-top:9px}
  .modal p{margin:13px 0 0;font-size:14px;line-height:1.68;color:#c3cdda}
  .modal .msrc{margin-top:14px;padding-top:11px;border-top:1px solid var(--line);
    font-size:12px;color:var(--muted)}
  .modal .mclose{flex:0 0 auto;background:none;border:1px solid var(--line2);color:var(--silver);
    width:30px;height:30px;border-radius:8px;cursor:pointer;font:700 15px var(--body);line-height:1}
  .modal .mclose:hover{border-color:var(--red);color:#fff}

  /* ===== WRITERS GUIDE NOTES ===== */
  .noteitem{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:12px 0;background:rgba(11,14,20,.55)}
  /* §9E.1. The headline is the writing guide's own sentence now, so it has to
     hold at both lengths this table contains: seven words for S5-I16, and a
     forty word paragraph for S5-I30. Slightly smaller than the invented titles
     it replaced, with more line height, so a paragraph still reads as a
     headline rather than as a wall. `.noterule` was deleted with the separate
     quoted line, which would now print the same string twice. */
  .notetitle{font-family:var(--disp);font-weight:700;font-size:17px;color:#fff;line-height:1.34;margin:0}
  .notewhere{font:600 11px var(--mono);letter-spacing:.05em;color:var(--muted);
    border:1px solid var(--line2);border-radius:999px;padding:3px 9px;margin-left:10px;
    vertical-align:3px;white-space:nowrap}
  .noteexp{margin:11px 0 0;font-size:var(--prose);line-height:1.65;color:#b6c2d1}
  .notefix{margin:12px 0 0;border-top:1px solid var(--line);padding-top:11px}
  .notefix .lbl{font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--pink2);
    display:block;margin-bottom:5px}
  .notefix p{margin:0;font-size:var(--prose);line-height:1.65;color:#c3cdda}

  /* ===== ALTERNATIVE OPENINGS ===== */
  .acard{position:relative;border-radius:14px;padding:19px 21px;margin:14px 0;
    background:rgba(11,14,20,.5);border:1px solid rgba(255,87,163,.26)}
  .acard:hover{border-color:rgba(255,87,163,.5);box-shadow:0 0 26px -12px var(--tone-pink-g)}
  .ahead{display:flex;align-items:flex-start;gap:14px}
  .anum{flex:0 0 auto;width:40px;height:40px;border-radius:11px;
    background:linear-gradient(135deg,var(--red),var(--tone-pink));color:#fff;
    font:700 17px var(--disp);display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 20px -6px var(--tone-pink-g);border:1px solid rgba(255,255,255,.15)}
  .astyle{font-family:var(--disp);font-weight:700;font-size:19px;color:#fff;letter-spacing:.01em;line-height:1.25}
  .adesc{color:#9fb0c2;font-size:var(--prose);margin:9px 0 0;line-height:1.6}
  .ablock{margin:14px 0 0}
  .ablock .lbl{font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--pink2);
    display:block;margin-bottom:5px}
  .ablock p{margin:0;font-size:var(--prose);line-height:1.65;color:#c3cdda}
  .afixes{margin:14px 0 0}
  .afixes .lbl{font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--pink2);
    display:block;margin-bottom:6px}
  .afixes ul{margin:0;padding-left:18px}
  .afixes li{font-size:var(--prose);color:#b3bfce;line-height:1.6;margin:0 0 6px}
  .afixes li:last-child{margin-bottom:0}
  .fwrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line2);background:rgba(13,16,22,.7);margin-top:14px}
  table.formula{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
  table.formula th,table.formula td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
    padding:11px 13px;vertical-align:top;text-align:left}
  table.formula tr td:last-child,table.formula tr th:last-child{border-right:0}
  table.formula tbody tr:last-child td{border-bottom:0}
  table.formula thead th{background:linear-gradient(180deg,#232b39,#1a2028);color:var(--silver);
    font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.05em}
  table.formula td.tc{font:700 12.5px var(--mono);color:var(--pink2);white-space:nowrap}
  table.formula td{color:#b6c2d1;line-height:1.6}
  /* §9F.4. The "From your script" column is the only part of this table that is
     about the writer's own material, so it is tinted to read as theirs rather
     than as more instruction. A cell the script cannot fill is dimmed and
     italic: an honest gap is information, and burying it would waste it. */
  table.formula th.fmine,table.formula td.fmine{background:rgba(255,87,163,.055)}
  table.formula th.fmine{color:var(--pink2)}
  table.formula td.fmine{color:#dfe6ef}
  table.formula td.fgap{color:var(--muted);font-style:italic}
  /* .aqs (the "Ask yourself" block) was deleted 2026-08-02, the §9G bridge-shape
     verdict. Of the two shapes built to be compared on a real script, "From your
     script" won: it ties the formula to material already in the writer's draft,
     which is more actionable than a generic reflective question. The `questions`
     payload key is still produced and still lint-checked, it is simply no longer
     rendered. */
  .alinks{margin:14px 0 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .alinks .lbl{font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--pink2)}
  .alink{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
    border:1px solid rgba(255,87,163,.42);background:rgba(255,87,163,.09);color:#ffc0dc;
    border-radius:9px;padding:7px 13px;font:600 12.5px var(--body)}
  .alink:hover{border-color:var(--tone-pink);color:#fff;box-shadow:0 0 18px -8px var(--tone-pink-g)}
  .alink svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

  .marksnote-wrap{margin:22px 0 0;border-left:2px solid var(--line2);padding-left:12px}
  .marksnote-title{font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--pink2);margin-bottom:5px}
  .marksnote{font-size:12.5px;color:var(--muted);margin:0}

  .warnbar{border:1px solid rgba(246,181,63,.35);background:var(--soft-t);border-radius:12px;
    padding:13px 16px;margin:0 0 20px;font-size:13.5px;color:#e6d3ab;line-height:1.6}
  .warnbar b{color:var(--soft)}

  .empty{background:rgba(13,16,22,.6);border:1px dashed var(--line2);border-radius:12px;padding:16px;color:var(--muted)}
  .statusbox{position:relative;background:linear-gradient(180deg,rgba(30,37,49,.9),rgba(16,20,27,.95));border:1px solid var(--line2);border-radius:14px;padding:24px}
  .foot{color:var(--muted);font-size:11px;margin-top:36px;text-align:center;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
  .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--muted);border-top-color:var(--pink);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-2px;margin-right:9px}
  @keyframes sp{to{transform:rotate(360deg)}}
  /* ---- sign-in pill + "Ask Claude" report chat (added 2026-10-11) ---- */
  .whopill{position:fixed;right:12px;bottom:12px;z-index:50;font-size:11px;color:var(--muted);background:rgba(13,17,25,.92);
    border:1px solid var(--line);border-radius:999px;padding:5px 12px}
  .whopill a{color:var(--pink2);cursor:pointer;text-decoration:none}
  .chatbox{margin-top:26px;border:1px solid rgba(255,110,168,.3);border-radius:14px;background:rgba(255,110,168,.04);overflow:hidden}
  .chathead{display:flex;gap:12px;align-items:center;padding:14px 16px;cursor:pointer}
  .chathead b{color:#fff;font-size:14px} .chathead .muted{font-size:12px;margin:2px 0 0}
  .chathead .tog{margin-left:auto;color:var(--pink2);font-size:12px;font-weight:700}
  .chatbody{border-top:1px solid rgba(255,110,168,.2)}
  .chatbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px 0}
  .chatbar select{flex:1;min-width:0;width:auto;font-size:12px;padding:6px 8px}
  .chatbar button,.chatstart button{font-size:12px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:#0d1119;color:#ddd;cursor:pointer}
  .chatstart{display:flex;flex-wrap:wrap;gap:8px}
  .chatlog{max-height:28rem;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
  .cm{border-radius:10px;padding:9px 12px;font-size:14px;white-space:pre-wrap;word-wrap:break-word;line-height:1.5}
  .cm.u{align-self:flex-end;max-width:85%;background:rgba(229,50,90,.16);border:1px solid rgba(229,50,90,.35);color:#fff}
  .cm.a{background:#121722;border:1px solid var(--line);color:#ddd}
  .chatform{display:flex;gap:8px;padding:12px 16px;border-top:1px solid rgba(255,110,168,.2)}
  .chatform textarea{flex:1;min-width:0;resize:vertical;font-size:14px}
  .chatform .btn{width:auto;margin:0;padding:0 18px}
  .chatnote{font-size:12px;color:var(--soft);padding:0 16px}
  /* pinned chat + copy buttons (added 2026-10-12) */
  .cm.a.md{white-space:normal}
  .md p{margin:0 0 .6em} .md p:last-child{margin-bottom:0}
  .md h3,.md h4,.md h5,.md h6{color:#fff;font-size:15px;margin:.9em 0 .35em} .md h3:first-child,.md h4:first-child{margin-top:0}
  .md strong{color:#fff} .md ul,.md ol{margin:.2em 0 .7em;padding-left:1.3em} .md li{margin:.25em 0} .md li::marker{color:var(--pink2)}
  .md code{background:rgba(255,255,255,.08);border-radius:4px;padding:0 .35em;font-size:.9em}
  .md pre{background:#0a0d13;border:1px solid var(--line);border-radius:8px;padding:.6em .8em;overflow-x:auto}
  .md pre code{background:none;padding:0}
  .md blockquote{border-left:3px solid var(--pink);margin:.5em 0;padding-left:.8em;color:#c9d3df}
  .md hr{border:0;border-top:1px solid var(--line);margin:.8em 0}
  .md .mdtable{overflow-x:auto;margin:.5em 0} .md table{border-collapse:collapse;font-size:13px}
  .md th,.md td{border:1px solid var(--line2);padding:5px 9px;text-align:left;vertical-align:top} .md th{color:#fff;background:rgba(255,255,255,.04)}
  .chatpin{position:sticky;top:0;z-index:40;margin:0 -6px 18px;padding:10px 6px 12px;
    background:rgba(9,11,16,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .chatpin .chatbox{margin-top:0}
  .chatpin .chatlog{max-height:38vh}
  .copysec{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:8px;
    border:1px solid var(--line2);background:rgba(13,17,25,.85);color:#c9d3df;cursor:pointer;margin-right:4px}
  .copysec:hover{border-color:var(--pink);color:#fff}
  .copysec.ok,.copyall .btn.ok{border-color:rgba(51,209,126,.5);color:var(--pass)}
  .copyall{display:flex;align-items:center;gap:14px;border:1px solid var(--line2);border-radius:14px;padding:12px 16px;margin:18px 0 22px;background:rgba(13,17,25,.6)}
  .copyall p{margin:0;font-size:12.5px;color:var(--muted)} .copyall b{display:block;color:#fff;font-size:14px}
  .copyall .btn{width:auto;margin:0 0 0 auto;padding:10px 18px;white-space:nowrap}