:root{
  --nav:#103c30; --nav-hover:#1b4c3d; --nav-active:#285045;
  --accent:#285045; --accent-deep:#103c30;
  --violet:#7950f2; --violet-d:#7048e8; --violet-t:#5f3dc4; --violet-0:#f3f0ff;
  --bg:#ffffff; --surface:#f8f9fa; --ink:#212529; --ink-muted:#868e96;
  --border:#dee2e6; --border-d:#ced4da;
  --pos:#3E8C57; --neg:#B5552D; --warm-light:#F4F2EE; --warm-mid:#CFCBC4;
  --amber:#C49A3D; --stone:#94908A;
  --page:#0d1614;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--page);color:#e9ecef;
  font-family:"Cabinet Grotesk","Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}

.wrap{max-width:1180px;margin:0 auto;padding:28px 16px 64px}
.masthead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.masthead h1{font-size:23px;font-weight:700;margin:0;letter-spacing:-.01em;color:#fff}
.masthead p{margin:4px 0 0;color:#9aa5a1;font-size:14px;max-width:64ch}
.mh-note{font-size:12px;color:#7d8a86;text-align:right;line-height:1.5}

/* the app frame: the real viewport, scaled to whatever width we get */
.stage{position:relative;width:100%;border-radius:10px;overflow:hidden;background:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.45);border:1px solid #23312d}
.frame{position:relative;width:1384px;height:900px;transform-origin:top left;display:flex;
  background:#fff;color:var(--ink);font-size:14px;overflow:hidden}
.no-anim *{transition:none!important;animation:none!important}

/* ---------- navbar (263px, #103c30) ---------- */
.nav{width:263px;flex:0 0 263px;background:var(--nav);display:flex;flex-direction:column;padding:9px}
.nav .logo{font-size:17.5px;font-weight:600;color:#fff;padding:1px 6px 10px;letter-spacing:-.01em}
.spot{display:flex;align-items:center;gap:7px;height:32px;padding:0 9px;border-radius:7px;
  background:rgba(255,255,255,.07);color:#fff;font-size:12.25px}
.spot svg{width:13px;height:13px;opacity:.75}
.spot .kbd{margin-left:auto;font-size:10.5px;opacity:.6;border:1px solid rgba(255,255,255,.22);
  border-radius:3px;padding:0 4px;line-height:14px}
.ntabs{display:flex;gap:0;margin:15px 2px 6px;border-bottom:1px solid rgba(255,255,255,.12)}
.ntab{padding:5px 12px;font-size:13px;font-weight:500;color:#ced4da;border-bottom:2px solid transparent;margin-bottom:-1px}
.ntab.on{color:#fff;border-bottom-color:#fff}
.nlbl{font-size:10.5px;color:#868e96;padding:12px 10.5px 4px}
.nitem{display:flex;align-items:center;gap:10px;height:36px;padding:0 10.5px;border-radius:7px;
  font-size:12.25px;color:#adb5bd;transition:background .15s,color .15s}
.nitem svg{width:15px;height:15px;flex:0 0 15px;stroke-width:1.6}
.nitem.hot{background:var(--nav-hover);color:#fff}
.nitem.on{background:var(--nav-active);color:#fff}
.nitem .chev{margin-left:auto;display:flex;transition:transform .25s}
.nitem .chev svg{width:12px;height:12px}
.nitem.open .chev{transform:rotate(90deg)}
.nkids{max-height:0;overflow:hidden;transition:max-height .32s ease;margin-left:17px}
.nkids.open{max-height:130px}
.nkid{display:flex;align-items:center;height:36px;padding:0 14px;border-radius:0 7px 7px 0;
  font-size:12.25px;color:#adb5bd;transition:background .15s,color .15s}
.nkid.hot{background:var(--nav-hover);color:#fff}
.nkid.on{background:var(--nav-active);color:#fff}
.newbadge{margin-left:7px;font-size:7.875px;font-weight:700;text-transform:uppercase;letter-spacing:.22px;
  background:var(--violet);color:#fff;border-radius:3px;padding:1px 4px}
.nfoot{margin-top:auto;display:flex;align-items:center;gap:9px;padding:9px 6px}
.nfoot .tav{width:24px;height:24px;border-radius:5px;background:rgba(255,255,255,.1);color:#868e96;
  display:grid;place-items:center;font-size:10.15px;font-weight:700}
.nfoot .tnm{font-size:12.25px;color:#adb5bd}

/* ---------- main ---------- */
.app{flex:1;min-width:0;position:relative;background:#fff;overflow:hidden}
.screen{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .28s}
.frame[data-screen="list"]   .screen[data-screen="list"],
.frame[data-screen="report"] .screen[data-screen="report"]{opacity:1}

/* list screen */
.lhead{padding:14px 18px 10px}
.lhead h2{margin:0;font-size:15.75px;font-weight:600;color:#141414}
.lhead p{margin:3px 0 0;font-size:10.5px;color:var(--ink-muted)}
.lbody{padding:4px 18px}
table.rt{width:100%;border-collapse:collapse}
table.rt th{text-align:left;font-size:10.08px;font-weight:600;color:var(--ink-muted);
  text-transform:uppercase;letter-spacing:.04em;padding:7px 10px;border-bottom:2px solid var(--border)}
table.rt td{padding:10px;border-bottom:1px solid var(--warm-light);vertical-align:middle}
tr.rrow{transition:background .15s}
tr.rrow.hot{background:var(--warm-light)}
.rname{font-size:12.25px;font-weight:600;display:flex;align-items:center;gap:7px;color:var(--ink)}
.rprompt{font-size:10.08px;color:var(--ink-muted);margin-top:2px;max-width:420px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcell{font-size:11.38px;color:var(--ink)}
.rsub{font-size:10.08px;color:var(--ink-muted)}
.chip{display:inline-flex;align-items:center;font-size:8.75px;font-weight:500;color:var(--ink-muted);
  border:1px solid var(--border);border-radius:3px;padding:1px 5px}

/* report screen */
.rhead{display:flex;align-items:flex-start;padding:9px 14px 0 12px;gap:12px}
.rtitle{font-size:15.75px;font-weight:600;color:#141414;margin:0;line-height:1.2}
.rdraft{font-size:8.75px;font-weight:500;color:var(--ink-muted);border:1px solid var(--border);
  border-radius:3px;padding:0 5px;display:inline-block;margin-top:5px}
.rwhen{font-size:10.5px;color:var(--ink-muted);margin-top:4px}
.racts{margin-left:auto;display:flex;align-items:center;gap:7px;padding-top:6px}
.b{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;
  border-radius:7px;font-size:12.25px;font-weight:500;border:1px solid transparent;
  background:transparent;transition:background .15s,border-color .15s;font-family:inherit;white-space:nowrap}
.b svg{width:14px;height:14px}
.b.subtle{color:var(--violet)}
.b.subtle.hot{background:var(--violet-0)}
.b.default{border-color:var(--border-d);color:#000;background:#fff}
.b.default.hot{background:var(--surface)}
.b.filled{background:var(--accent);color:#fff}
.b.filled.hot{background:var(--accent-deep)}
.ai{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:#141414;
  background:transparent;transition:background .15s;position:relative}
.ai svg{width:16px;height:16px;stroke-width:1.7}
.ai.hot{background:var(--surface)}
.tip{position:absolute;top:36px;right:0;background:#141414;color:#fff;font-size:10.5px;
  padding:3px 7px;border-radius:4px;white-space:nowrap;opacity:0;transform:translateY(-3px);
  transition:opacity .16s,transform .16s;pointer-events:none;z-index:50}
.ai.hot .tip{opacity:1;transform:translateY(0)}

/* prompt panel */
.prompt{margin:12px 14px 0 12px;border:1px solid #e5dbff;background:#faf8ff;border-radius:8px;padding:9px 12px}
.prow{display:flex;align-items:center;gap:8px}
.plbl{font-size:9.625px;font-weight:600;color:var(--violet-d);letter-spacing:.04em}
.pacts{margin-left:auto;display:flex;align-items:center;gap:9px}
.pacts svg{width:12px;height:12px;color:var(--violet)}
.pedit{font-size:10.5px;font-weight:500;color:var(--violet)}
.ptext{font-size:11.375px;color:var(--violet-t);margin-top:4px;line-height:1.5}

/* the report iframe area */
.rframe{margin:12px 14px 0 12px;height:620px;overflow:hidden;position:relative;background:#fff}
.rdoc{padding:20px 21px 0;transition:transform .9s cubic-bezier(.4,0,.2,1)}
.rdoc h1{font-size:25.9px;font-weight:700;color:var(--accent-deep);margin:0 0 5px;line-height:1.2}
.rdoc .sub{font-size:12.88px;color:var(--ink-muted);margin:0}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:24px 0 20px}
.stat{border:1px solid var(--border);border-radius:8px;padding:11px 13px}
.stat .l{font-size:10.92px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);font-weight:600;margin:0}
.stat .v{font-size:23.8px;font-weight:700;margin:4px 0 0;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--neg)}
.stat .d{font-size:11.48px;color:var(--ink-muted);margin:2px 0 0}
.sech{font-size:16.1px;font-weight:700;margin:22px 0 4px;color:var(--ink)}
.secd{font-size:12.32px;color:var(--ink-muted);margin:0 0 14px;max-width:65ch}
/* the horizontal-scroll wrapper is the whole point of the PDF story */
.tblwrap{overflow:hidden;position:relative}
table.rank{border-collapse:collapse;font-size:11.48px;font-variant-numeric:tabular-nums;width:1010px}
table.rank thead th{text-align:left;font-weight:600;font-size:10.08px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-muted);padding:8px 9px;border-bottom:2px solid var(--border);white-space:nowrap}
table.rank thead th.num{text-align:right}
table.rank tbody td{padding:9px;border-bottom:1px solid var(--warm-light);vertical-align:middle}
table.rank tbody td.num{text-align:right}
.rankcell{font-weight:700;font-size:12.88px;color:var(--accent);width:28px;text-align:center}
.stylecell{display:flex;align-items:center;gap:10px;min-width:200px}
.thumb{width:48px;height:64px;flex:0 0 48px;border-radius:4px;border:1px solid var(--border);
  background:var(--warm-light);display:grid;place-items:center;overflow:hidden}
.thumb svg{width:26px;height:34px;color:var(--warm-mid)}
.sname{font-weight:600;font-size:11.9px;line-height:1.25;color:var(--accent)}
.smeta{font-size:10.08px;color:var(--ink-muted);margin-top:1px}
.fit{display:inline-flex;align-items:center;justify-content:center;width:36px;height:24px;
  border-radius:4px;font-weight:700;font-size:10.92px;color:#fff}
.fit.prob{background:var(--neg)} .fit.poor{background:var(--amber)} .fit.mod{background:var(--stone)}
/* the two bands that were missing: a good or excellent score rendered as
   white text on no background, i.e. invisible */
.fit.good{background:var(--pos)} .fit.exc{background:var(--accent)}
.imb{font-size:10.92px;font-weight:600}
.imb.lg{color:var(--neg)} .imb.sm{color:#6A5ACD}
.reasonbar{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:3px 0 2px;width:132px}
.reasonbar .f{background:var(--neg)} .reasonbar .c{background:var(--amber)}
.reasonbar .q{background:var(--stone)} .reasonbar .o{background:var(--warm-mid)}
.rleg{display:flex;gap:9px;font-size:10.08px;color:var(--ink-muted)}
.rleg span{display:inline-flex;align-items:center;gap:3px}
.rdot{width:8px;height:8px;border-radius:2px;display:inline-block}
/* the columns that sit off the right edge until you scroll */
.clipedge{position:absolute;right:0;top:0;bottom:0;width:46px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 72%)}
.cutfade{position:absolute;left:0;right:0;bottom:0;height:72px;pointer-events:none;
  background:linear-gradient(transparent,#fff 74%)}

/* right rail */
.frame[data-screen="list"] .rail{display:none}
.rail{width:319px;flex:0 0 319px;border-left:1px solid var(--border);display:flex;flex-direction:column;background:#fff}
.railtabs{display:flex;border-bottom:1px solid var(--border)}
.railtab{flex:1;text-align:center;padding:9px 6px;font-size:12.25px;color:#000;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.railtab.on{border-bottom-color:var(--accent);font-weight:500;color:var(--accent)}
.railhint{font-size:10.5px;color:var(--ink-muted);padding:12px 14px 0}
.runlbl{font-size:9.625px;font-weight:600;color:var(--ink-muted);letter-spacing:.04em;padding:14px 14px 6px}
.run{margin:0 14px 8px;border:1px solid var(--border);border-radius:7px;padding:8px 10px;
  transition:border-color .15s,box-shadow .15s}
.run.hot{border-color:var(--border-d)}
.run.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(40,80,69,.1)}
.run .r1{display:flex;align-items:baseline}
.run .tm{font-size:11.375px;font-weight:500;color:#242424}
.run .dt{margin-left:auto;font-size:10.5px;color:var(--ink-muted)}
.run .r2{display:flex;align-items:center;gap:6px;margin-top:3px}
.run .ok{font-size:10.5px;color:var(--pos);display:inline-flex;align-items:center;gap:4px}
.run .ok .d{width:6px;height:6px;border-radius:50%;background:var(--pos)}
.run .dur{margin-left:auto;font-size:10.5px;color:var(--ink-muted)}


:root{--g0:#f8f9fa;--g1:#f1f3f5;--g2:#e9ecef;--g3:#dee2e6;--g4:#ced4da;
  --g5:#adb5bd;--g6:#868e96;--g7:#495057;--g9:#212529}
.tabrow{display:flex;justify-content:space-between;align-items:center;gap:16px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);flex:1}
.tab{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;font-size:12.25px;
  color:var(--g7);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.pill{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 5px;border-radius:999px;background:var(--g1);color:var(--g6);font-size:9.625px;font-weight:600}
.tab.active .pill{background:#e6fcf5;color:#099268}

/* Real demo product shots: the S3 originals are 1536x1536 PNGs at ~2MB each,
   so they are downscaled to 96px JPEGs and inlined — 13MB becomes 25KB and the
   page stays self-contained. background-size:contain matches the app's
   object-fit:contain inside a 3:4 box. */
.thumb{background-repeat:no-repeat;background-position:center;background-size:contain;background-color:#fff}
.thumb.s1{background-image:url(/assets/t1.jpg)}
.thumb.s2{background-image:url(/assets/t2.jpg)}
.thumb.s3{background-image:url(/assets/t3.jpg)}
.thumb.s4{background-image:url(/assets/t4.jpg)}
.thumb.s5{background-image:url(/assets/t5.jpg)}
.thumb.s6{background-image:url(/assets/t6.jpg)}
.thumb.s7{background-image:url(/assets/t7.jpg)}
.thumb.s8{background-image:url(/assets/t8.jpg)}
.thumb.s9{background-image:url(/assets/t9.jpg)}
.thumb.s10{background-image:url(/assets/t10.jpg)}

/* cursor */
.cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:90;pointer-events:none;
  transition:transform 620ms cubic-bezier(.33,.9,.35,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.cursor svg{width:22px;height:22px;display:block}
.ripple{position:absolute;left:-9px;top:-9px;width:40px;height:40px;border-radius:50%;
  border:2px solid var(--violet);opacity:0}
.cursor.clicked .ripple{animation:rip .55s ease-out}
@keyframes rip{0%{opacity:.85;transform:scale(.25)}100%{opacity:0;transform:scale(1)}}

/* title / end cards */
.card{position:absolute;inset:0;z-index:80;background:rgba(13,22,20,.96);color:#fff;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .45s;padding:40px}
.card.show{opacity:1}
.card h3{font-size:34px;font-weight:700;margin:0;letter-spacing:-.02em}
.card p{font-size:16px;color:#9fb1ac;margin:0;max-width:56ch;line-height:1.6}
.card ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:9px;text-align:left}
.card li{font-size:15px;color:#cddbd6;display:flex;gap:11px;align-items:flex-start}
.card li b{color:#fff;font-weight:600}
.card li .n{width:23px;height:23px;flex:0 0 23px;border-radius:50%;background:var(--nav-active);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;color:#fff}

/* caption + controls */
.capbar{background:#121e1b;border:1px solid #23312d;border-top:0;border-radius:0 0 10px 10px;
  padding:15px 20px;display:flex;align-items:center;gap:16px;min-height:66px}
.capstep{font-size:11px;font-weight:700;color:#6f8079;letter-spacing:.08em;white-space:nowrap}
.captext{font-size:16px;color:#eef3f1;line-height:1.45;margin:0}
.controls{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.ctrl{display:inline-flex;align-items:center;gap:7px;background:#1b2b27;border:1px solid #2a3c37;color:#d5e0dc;
  border-radius:6px;padding:7px 13px;font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s}
.ctrl:hover{background:#243832;border-color:#3a514a}
.ctrl svg{width:14px;height:14px}
.scrub{flex:1;min-width:200px;height:6px;background:#243832;border-radius:3px;position:relative;cursor:pointer}
.scrub .prog{position:absolute;left:0;top:0;bottom:0;background:var(--nav-active);border-radius:3px;width:0}
.time{font-size:12px;color:#7d8a86;font-variant-numeric:tabular-nums;white-space:nowrap}
.chapters{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.chap{background:transparent;border:1px solid #2a3c37;color:#8fa19b;border-radius:999px;padding:5px 12px;
  font-size:12.5px;cursor:pointer;font-family:inherit;transition:all .15s}
.chap:hover{border-color:#44605a;color:#cddbd6}
.chap.on{background:var(--nav-active);border-color:var(--nav-active);color:#fff;font-weight:500}

@media (max-width:760px){
  .masthead{flex-direction:column}.mh-note{text-align:left}.captext{font-size:14px}
}