#ptr{position:fixed;top:0;left:0;right:0;height:0;overflow:hidden;z-index:60;
  display:flex;align-items:flex-end;justify-content:center;pointer-events:none;
  transition:height .18s ease}
#ptr.drag{transition:none}
#ptr i{display:block;width:26px;height:26px;margin-bottom:7px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--cobalt);
  transform:rotate(0deg);transition:transform .1s linear}
#ptr.go i{animation:ptrspin .7s linear infinite;border-top-color:var(--cobalt)}
@keyframes ptrspin{to{transform:rotate(360deg)}}
.rfr{background:none;border:0;cursor:pointer;color:var(--muted);font-size:13px;
  padding:2px 5px;line-height:1;border-radius:100px}
.rfr:hover{color:var(--ink)}
.rfr.spin{animation:ptrspin .7s linear infinite}

*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#0e0d09;--paper:#f7f5ef;--dim:#6b675c;--line:#e3dfd4;--lime:#caf000}
html{-webkit-text-size-adjust:100%}
body{background:#08080b;color:#e8e6f0;
  font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  padding:34px 22px 120px;line-height:1.45}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto}
header{margin-bottom:26px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
h1{font-size:30px;letter-spacing:-.03em;font-weight:700}
h1 em{font-style:normal;background:var(--lime);padding:0 8px;border-radius:3px}
.sub{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;color:var(--dim)}
.back{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
h2{font-size:13px;font-family:"JetBrains Mono",monospace;font-weight:400;color:var(--dim);
  text-transform:uppercase;letter-spacing:.14em;margin:38px 0 14px;
  display:flex;align-items:center;gap:10px}
h2 b{color:var(--ink);font-weight:700}
h2 .ln{flex:1;height:1px;background:var(--line)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.it{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:0 0 14px;overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .18s,transform .18s}
.it:hover{box-shadow:0 14px 30px -18px rgba(14,13,9,.5);transform:translateY(-2px)}
.band{height:5px;background:var(--c)}
.img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#efece4}
.noimg{width:100%;aspect-ratio:16/10;background:
  repeating-linear-gradient(135deg,#f1eee6 0 9px,#ece9e0 9px 18px);
  display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",monospace;font-size:9.5px;color:#a9a496;letter-spacing:.1em}
.pad{padding:13px 15px 0;display:flex;flex-direction:column;flex:1}
.cat{font-family:"JetBrains Mono",monospace;font-size:8.5px;text-transform:uppercase;
  letter-spacing:.13em;color:var(--c);font-weight:700}
.ttl{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.28;margin:5px 0 0}
.q{font-size:12.5px;line-height:1.5;color:#4a463c;margin-top:8px;font-style:italic;
  border-left:2px solid var(--c);padding-left:9px}
.why{font-size:12.5px;line-height:1.5;color:#4a463c;margin-top:8px}
.note{font-size:11.5px;line-height:1.5;color:var(--dim);margin-top:7px}
.foot{margin-top:auto;padding-top:11px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lnk{font-family:"JetBrains Mono",monospace;font-size:10px;text-decoration:none;
  border:1px solid var(--line);border-radius:100px;padding:4px 10px;color:var(--dim)}
.lnk:hover{border-color:var(--c);color:var(--c)}
.tag{font-family:"JetBrains Mono",monospace;font-size:8.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 8px;border-radius:100px;background:#f2efe7;color:var(--dim)}
.tag.cap{background:var(--lime);color:#0e0d09;font-weight:700}
.tag.t3{background:#efe7f7;color:#7a44ff}

/* ---- filters and collapse ----
   Coloured chips that match the card bands, a count on each, and a section head
   that folds. Nothing here changes the data — it only decides what is on screen,
   so there is no state worth persisting beyond convenience. */
.bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px}
.chip{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.04em;
  border:1px solid var(--line);background:#fff;color:var(--dim);border-radius:100px;
  padding:5px 11px;cursor:pointer;transition:.14s;display:inline-flex;gap:6px;align-items:center}
.chip b{font-weight:700}
/* every pill wears the colour of the thing it filters for — the same colour as
   that category's band on the card */
.chip{border-left:3px solid var(--cc,var(--line))}
.chip b{color:var(--cc,var(--dim))}
.chip:hover{border-color:var(--cc,#0e0d09);color:var(--cc,#0e0d09)}
.chip.on{background:var(--cc,#0e0d09);border-color:var(--cc,#0e0d09);color:#fff}
.chip.on b{color:#fff}
.chip.on b{color:#fff}
.chip.flag.on{background:var(--lime);border-color:#0e0d09;color:#0e0d09}
/* the read pills carry the same colour they mean on the card, so the bar reads
   at a glance rather than as seven identical grey lozenges */
.chip.r-warm  {--cc:#0f9d58}
.chip.r-tight {--cc:#c2410c}
.chip.r-flat  {--cc:#6b675c}
.chip.r-boring{--cc:#2b4cf0}
.chip.r-unread{--cc:#9a9486}
.chip.r-cand  {--cc:#0e0d09}
.chip.r-wild  {--cc:#7c3aed}
.chip.r-cap   {--cc:#b8860b}
.chip.flag{border-left:3px solid var(--cc,var(--line))}
.chip.flag.on{background:var(--cc,#0e0d09);border-color:var(--cc,#0e0d09);color:#fff}
.chip.flag.on b{color:#fff}
.bar .sp{flex:1}
.tool{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--dim);
  background:none;border:0;cursor:pointer;padding:5px 8px;border-bottom:1px solid var(--line)}
.tool:hover{color:var(--ink);border-color:var(--ink)}
h2{cursor:pointer;user-select:none}
h2 .cv{display:inline-block;font-size:9px;transition:transform .18s;color:var(--dim)}
h2.shut .cv{transform:rotate(-90deg)}
.grid.shut{display:none}
.nores{padding:40px 0;text-align:center;color:var(--dim);
  font-family:"JetBrains Mono",monospace;font-size:12px}

.reads{display:flex;gap:5px;margin-top:11px;flex-wrap:wrap}
.reads button{flex:1;min-width:58px;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  padding:6px 3px;border:1px solid var(--line);border-radius:8px;background:#fbfaf7;
  color:var(--dim);cursor:pointer;transition:.14s}
.reads button:hover{border-color:var(--c);color:var(--c)}
.reads button.on{background:var(--lime);border-color:var(--ink);color:#0e0d09;font-weight:700}
.said{font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--dim);margin-top:7px}
/* The comment button sits ON the card, not in the kebab menu. Learned the hard
   way on the board this came from: 43 comments left in one morning through a
   two-tap menu, which meant the box used most was the hardest one to reach.
   Same panel as edit, opened straight onto the textarea. */
.say{margin-top:8px;display:flex}
.say button{flex:1;font-family:"JetBrains Mono",monospace;font-size:10px;padding:7px 6px;
  border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--dim);
  cursor:pointer;transition:.14s;letter-spacing:.04em}
.say button:hover{border-style:solid;border-color:var(--c);color:var(--c);background:#fbfaf7}
.ed.only input{display:none}
.gen-wrap{margin-left:auto}
.gen{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.04em;
  padding:7px 14px;border-radius:100px;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;transition:.14s}
.gen:hover{background:var(--lime);color:var(--ink)}
.gen.off{background:transparent;color:var(--dim);border-color:var(--line);cursor:default}
.gen.busy{background:transparent;color:var(--dim);border-style:dashed;cursor:default}
.gen-wrap{display:flex;align-items:center;gap:9px}
.nudge{font-family:"JetBrains Mono",monospace;font-size:11.5px;line-height:1.65;
  background:#fbfbe8;border:1px solid #e4e4b8;border-radius:12px;
  padding:12px 15px;margin:0 0 18px;color:#5c5a3a;display:flex;gap:12px;
  align-items:flex-start}
.nudge b{color:#2c2b14;font-weight:400}
.nudge code{background:#fff;border:1px solid #e4e4b8;border-radius:4px;padding:1px 6px}
.nudge button{margin-left:auto;background:none;border:0;color:#a6a482;font-size:16px;
  cursor:pointer;line-height:1;padding:0 2px}
.nudge button:hover{color:#5c5a3a}
.nudge .go{margin-left:0;background:var(--ink);color:var(--paper);border-radius:100px;
  padding:5px 13px;font-size:11px;font-family:inherit}
.nudge .go:hover{background:var(--lime);color:var(--ink)}

/* the feedback panel */
#fbwrap{position:fixed;inset:0;background:rgba(14,13,9,.42);z-index:80;
  display:none;align-items:flex-start;justify-content:center;padding:40px 20px;
  overflow-y:auto}
#fbwrap.on{display:flex}
#fb{background:var(--paper);border-radius:18px;max-width:680px;width:100%;
  padding:30px 32px 26px;box-shadow:0 30px 70px -30px rgba(14,13,9,.7)}
#fb h3{font-size:22px;letter-spacing:-.025em;margin-bottom:7px}
#fb .lede{font-size:13.5px;color:var(--dim);line-height:1.55;margin-bottom:8px}
#fb .promise{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#5c5a3a;
  background:#fbfbe8;border:1px solid #e4e4b8;border-radius:9px;padding:9px 12px;
  margin-bottom:20px;line-height:1.6}
#fb .fq{font-size:14.5px;font-weight:600;margin:19px 0 7px;line-height:1.35}
#fb textarea{width:100%;padding:11px 13px;font-size:14px;font-family:inherit;
  line-height:1.5;border:1px solid var(--line);border-radius:11px;background:#fff;
  min-height:74px;resize:vertical}
#fb textarea:focus{outline:none;border-color:var(--ink)}
#fb .opt{margin-top:20px;font-size:12.5px;color:var(--dim);display:flex;gap:9px;
  align-items:flex-start;line-height:1.5}
#fb .opt input{margin-top:3px}
#fb .btns{margin-top:20px;display:flex;gap:9px;align-items:center}
#fb .btns button{font-family:"JetBrains Mono",monospace;font-size:12px;padding:11px 20px;
  border-radius:100px;border:1.5px solid var(--ink);background:var(--ink);
  color:var(--paper);cursor:pointer}
#fb .btns button:hover{background:var(--lime);color:var(--ink)}
#fb .btns button.ghost{background:transparent;color:var(--dim);border-color:var(--line)}
#fb pre{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px;
  font-size:11.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  max-height:340px;overflow-y:auto;margin-top:16px}
.who{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--dim);
  display:flex;align-items:center;gap:5px}
.ag{font-family:"JetBrains Mono",monospace;font-size:10px;padding:4px 9px;
  border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--dim);
  cursor:pointer;transition:.14s}
.ag:hover{border-color:var(--ink);color:var(--ink)}
.ag.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.yn{display:flex;gap:7px;margin-top:12px}
.yn button{flex:1;font-family:"JetBrains Mono",monospace;font-size:11px;padding:9px 6px;
  border-radius:9px;cursor:pointer;border:1.5px solid var(--ink);transition:.14s}
.yn .yes{background:var(--ink);color:var(--paper)}
.rsn.yes .go{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.yn .yes:hover{background:#2b4cf0;border-color:#2b4cf0}
.yn .no{background:transparent;color:var(--dim);border-color:var(--line)}
.yn .no:hover{border-color:#c2410c;color:#c2410c}
.it.gone{opacity:.32}
/* the smaller version. the rule for tight: the answer is not a lesser want,
   it is a first move in the same direction. */
.step{margin-top:9px;padding:8px 10px;border-radius:9px;background:#eefbf3;
  border:1px solid #cdeddb;font-size:12.5px;line-height:1.45;color:#14532d}
.step b{display:block;font-family:"JetBrains Mono",monospace;font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-bottom:3px}
.step a{color:#14532d}
/* a body read asks WHY, the same as a decline does. tight is the one that
   matters — the answer to tight is something SMALLER in the same direction, and
   only you can say which direction. */
.rwhy{margin-top:8px;display:none}
.rwhy.on{display:block}
.rwhy textarea{width:100%;font-family:"Inter",sans-serif;font-size:13px;padding:7px 9px;
  border:1.5px solid var(--line);border-radius:9px;background:#fbfaf7;color:var(--ink);
  resize:vertical;min-height:32px}
.rwhy textarea:focus{outline:0;border-color:var(--c)}
.rwhy .rb{display:flex;gap:6px;margin-top:5px}
.rwhy button{flex:1;font-family:"JetBrains Mono",monospace;font-size:10px;padding:6px 5px;
  border-radius:8px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--dim)}
.rwhy .go{background:var(--c);border-color:var(--c);color:#fff}
.rwhy .hint{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--dim);
  margin-bottom:4px;display:block}
/* ---- card styles ----
   The canvas view was scrapped: it was not liked, and a spatial layout of 110
   things is a picture of nothing anyway. These are the same list, at three
   densities. GALLERY is the one closest to an actual vision board — pictures
   big, words out of the way, because that is what a vision board is for. */
body.compact .grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px}
body.compact .it{border-radius:11px}
body.compact .img,body.compact .noimg{aspect-ratio:3/2}
body.compact .pad{padding:9px 10px 0}
body.compact .ttl{font-size:13px;line-height:1.25}
body.compact .cat{font-size:8px}
body.compact .q,body.compact .why,body.compact .note,body.compact .said,
body.compact .fac,body.compact .rel,body.compact .repl,body.compact .cmts,
body.compact .lnk{display:none}
body.compact .reads button{font-size:8.5px;min-width:0;padding:5px 2px}
body.compact .foot{padding-top:8px}
/* a card that folded several in keeps every sentence, as qualities of the one thing */
.fac{margin-top:9px;padding-left:11px;border-left:2px solid var(--c);
  font-size:12.5px;line-height:1.5;color:#4a463c}
.fac div{margin-bottom:5px}
.fac div:last-child{margin-bottom:0}
/* superseded. kept and shown, because WHICH thing replaced WHICH is the most
   useful history this board has — the Jimny is the precedent. dimmed, small,
   and out of the way, but never deleted. */
#retired .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px}
#retired .it{opacity:.5}
#retired .it:hover{opacity:1}
#retired .img,#retired .noimg{aspect-ratio:16/7}
#retired .ttl{font-size:13.5px;text-decoration:line-through;text-decoration-thickness:1px}
.repl{font-family:"JetBrains Mono",monospace;font-size:10px;color:#7a4a12;
  background:#fdf5e8;border-radius:7px;padding:5px 8px;margin-top:7px;line-height:1.45}
.repl a{color:#7a4a12}
.lad{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:#5b6478;background:#eef1f5;border-radius:100px;
  padding:2px 8px}
/* overlaps. surfaced rather than merged, because which of two near-identical
   wants survives is your call and not the board's. */
.rel{margin-top:9px;font-size:11.5px;line-height:1.45;color:#7a4a12;
  background:#fdf5e8;border:1px solid #f0e0c4;border-radius:9px;padding:7px 9px}
.rel b{color:#5c3608}
.rel a{color:#7a4a12;text-decoration:underline;text-decoration-color:#e0c9a0}
.rel.dupe{background:#fdecec;border-color:#f3cfcf;color:#8a2b2b}
.rel.dupe b,.rel.dupe a{color:#8a2b2b}
/* scrapping something already on the board — same reason box as a decline */
.scr{margin-top:10px;display:none}
.scr.on{display:block}
.scr textarea{width:100%;font-family:"Inter",sans-serif;font-size:13px;padding:8px 10px;
  border:1.5px solid var(--line);border-radius:9px;background:#fbfaf7;color:var(--ink);
  resize:vertical;min-height:34px}
.scr textarea:focus{outline:0;border-color:#c2410c}
.scr .rb{display:flex;gap:6px;margin-top:6px}
.scr button{flex:1;font-family:"JetBrains Mono",monospace;font-size:10.5px;padding:7px 6px;
  border-radius:8px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--dim)}
.scr .go{background:#c2410c;border-color:#c2410c;color:#fff}
/* "not mine" asks why. one line, skippable, and it is the only thing that can
   stop the same shape of item being proposed at you again. */
.rsn{margin-top:10px;display:none}
.rsn.on{display:block}
.rsn textarea{width:100%;font-family:"Inter",sans-serif;font-size:13px;padding:8px 10px;
  border:1.5px solid var(--line);border-radius:9px;background:#fbfaf7;color:var(--ink);
  resize:vertical;min-height:34px}
.rsn textarea:focus{outline:0;border-color:#c2410c}
.rsn .rb{display:flex;gap:6px;margin-top:6px}
.rsn button{flex:1;font-family:"JetBrains Mono",monospace;font-size:10.5px;padding:7px 6px;
  border-radius:8px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--dim)}
.rsn .go{background:#c2410c;border-color:#c2410c;color:#fff}

/* the quiet control. the page is to be looked at, not operated, so the dots sit
   faint on the card and only come up under the cursor. */
.dots{position:absolute;top:13px;right:11px;z-index:3;width:27px;height:27px;padding:0;
  border-radius:100px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#57534a;font-size:14px;
  line-height:1;cursor:pointer;opacity:.5;transition:.15s;display:flex;
  align-items:center;justify-content:center}
.it:hover .dots{opacity:1}
.dots:hover{background:#fff;color:var(--ink)}
.pop{position:absolute;top:44px;right:11px;z-index:6;display:none;min-width:136px;
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:5px;
  box-shadow:0 16px 34px -14px rgba(14,13,9,.45)}
.pop.on{display:block}
.pop button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#4a463c;
  padding:7px 9px;border-radius:7px}
.pop button:hover{background:#f4f1e9;color:var(--ink)}
.pop button.dec:hover{color:#c2410c}

.ed{margin-top:11px;display:none;flex-direction:column;gap:7px}
.ed.on{display:flex}
.ed input,.ed textarea{width:100%;font-family:inherit;font-size:13px;color:var(--ink);
  background:#fbfaf7;border:1px solid var(--line);border-radius:9px;padding:8px 9px}
.ed textarea{font-size:12.5px;min-height:64px;line-height:1.45;resize:vertical}
.ed input:focus,.ed textarea:focus{outline:none;border-color:var(--c)}
.edb{display:flex;gap:7px}
.edb button{flex:1;font-family:"JetBrains Mono",monospace;font-size:10.5px;padding:8px 6px;
  border-radius:9px;cursor:pointer;border:1.5px solid var(--ink)}
.edb .sv{background:var(--ink);color:var(--paper)}
.edb .sv:hover{background:#2b4cf0;border-color:#2b4cf0}
.edb .cn{background:transparent;color:var(--dim);border-color:var(--line)}

/* what you said about the item, waiting for a session to act on it */
.cmt{font-size:12px;line-height:1.5;color:#4a463c;margin-top:8px;
  background:#f6f4ec;border-radius:9px;padding:8px 10px}
.cmt b{display:block;margin-bottom:3px;font-family:"JetBrains Mono",monospace;font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:400}

/* landed. achieved, not removed — full colour, full picture, nothing dimmed,
   and nothing anywhere counts them. */
.tag.done{background:var(--lime);color:#0e0d09;font-weight:700}
.it.done .band{height:9px}
.it.done .ttl::before{content:"\2713\00a0";color:#0f9d58}
#landed{display:none}
#landed.on{display:block}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);font-family:"JetBrains Mono",monospace;
  font-size:11.5px;padding:10px 16px;border-radius:100px;opacity:0;
  transition:opacity .2s;pointer-events:none;z-index:50}
.toast.on{opacity:1}
.ro{font-family:"JetBrains Mono",monospace;font-size:11px;color:#8a3b12;
  background:#fdf1e7;border:1px solid #f0d9c4;border-radius:10px;padding:9px 13px;margin-bottom:18px}
@media(max-width:640px){body{padding:22px 14px 90px}h1{font-size:24px}.grid{gap:12px}}


/* ─── the interview ─── */
body{background:#08080b;color:#e8e6f0;min-height:100dvh;
  font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  line-height:1.45;display:flex;flex-direction:column}

/* the thin progress line, top of the window. deliberately not a percentage and
   not a "6 of 33" badge in the corner — a number that big, that early, reads as
   a chore. the line just quietly fills. */
#bar{position:fixed;top:0;left:0;height:2px;background:var(--lime);width:0;
  transition:width .3s ease;z-index:50}

.hd{padding:26px 30px 0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
h1{font-size:19px;letter-spacing:-.03em;font-weight:700}
h1 em{font-style:normal;background:var(--lime);padding:0 7px;border-radius:3px}
.sec{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.14em;margin-left:auto}

main{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 24px 40px}
.card{width:100%;max-width:660px}
.blurb{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--dim);
  letter-spacing:.03em;margin-bottom:22px;padding-bottom:14px;
  border-bottom:1px solid var(--line)}
.q{font-size:27px;font-weight:600;letter-spacing:-.025em;line-height:1.25}
.hint{font-size:13.5px;color:var(--dim);margin-top:11px;line-height:1.5}
textarea,input.one{width:100%;margin-top:20px;padding:15px 17px;font-size:16px;
  font-family:inherit;line-height:1.5;border:1px solid var(--line);border-radius:13px;
  background:#fff;color:var(--ink);resize:vertical}
textarea:focus,input.one:focus{outline:none;border-color:var(--ink)}
textarea{min-height:150px}
textarea.big{min-height:230px}

.row{margin-top:16px;display:flex;align-items:center;gap:10px}
button{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em;
  padding:11px 20px;border-radius:100px;cursor:pointer;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--paper);transition:.14s}
button:hover{background:var(--lime);color:var(--ink)}
button.ghost{background:transparent;color:var(--dim);border-color:var(--line)}
button.ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.count{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--dim)}
.kbd{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--dim);
  margin-top:16px;letter-spacing:.03em}
.kbd b{color:var(--ink);font-weight:400;border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;background:#fff}

/* the last screen */
.done .q{font-size:31px}
.done .hint{font-size:15px;margin-top:16px}
.big-btn{margin-top:26px;font-size:14px;padding:15px 28px}
.warn{margin-top:20px;font-family:"JetBrains Mono",monospace;font-size:11px;
  color:#8a3b12;background:#fdf3ee;border:1px solid #f0d9cc;border-radius:11px;
  padding:13px 15px;line-height:1.6}
.warn code{background:#fff;padding:1px 6px;border-radius:4px;border:1px solid #f0d9cc}
.stage{margin-top:22px;font-family:"JetBrains Mono",monospace;font-size:12px;
  color:var(--dim)}
.stage b{color:var(--ink);font-weight:400}
.who{margin-top:22px;font-family:"JetBrains Mono",monospace;font-size:11px;
  color:var(--dim);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.who b{color:var(--ink);font-weight:400}
.ag{font-family:"JetBrains Mono",monospace;font-size:11px;padding:5px 12px;
  border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--dim)}
.ag:hover{border-color:var(--ink);color:var(--ink);background:#fff}
.ag.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}


/* ─── auth ─── */
.auth{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.authbox{width:100%;max-width:360px}
.authbox h1{font-size:28px;margin-bottom:6px}
.authbox .sub2{font-size:13.5px;color:var(--dim);margin-bottom:24px;line-height:1.5}
.authbox label{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:14px 0 5px}
.authbox input{width:100%;padding:12px 14px;font-size:16px;font-family:inherit;
  border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink)}
.authbox input:focus{outline:none;border-color:var(--ink)}
.authbox button.primary{width:100%;margin-top:20px;padding:13px;font-size:15px;
  font-weight:600;border:0;border-radius:11px;background:var(--ink);color:var(--paper);
  cursor:pointer;font-family:inherit}
.authbox button.primary:hover{background:var(--lime);color:var(--ink)}
.authbox button.primary:disabled{opacity:.5;cursor:default}
.authbox .swap{margin-top:16px;font-size:13px;color:var(--dim);text-align:center}
.authbox .swap a{cursor:pointer;border-bottom:1px solid var(--line)}
.authbox .err{margin-top:14px;font-size:13px;color:#8a3b12;background:#fdf3ee;
  border:1px solid #f0d9cc;border-radius:10px;padding:11px 13px;line-height:1.5}
.hide{display:none!important}

/* the category picker and the per-day dial */
.catgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cat{font-family:"JetBrains Mono",monospace;font-size:12px;padding:8px 14px;
  border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--dim);
  cursor:pointer;transition:.14s;border-left:3px solid var(--cc,var(--line))}
.cat:hover{border-color:var(--ink);color:var(--ink)}
.cat.on{background:var(--cc,var(--ink));border-color:var(--cc,var(--ink));color:#fff}
.cat.add{border-style:dashed;border-left-style:dashed}
.dial{display:flex;gap:6px;margin-top:24px;flex-wrap:wrap}
.pip{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:var(--dim);font-family:"JetBrains Mono",monospace;
  font-size:14px;cursor:pointer;transition:.14s}
.pip:hover{border-color:var(--ink);color:var(--ink)}
.pip.on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:700}
.dialnote{margin-top:12px;font-size:13px;color:var(--dim);min-height:20px}


/* ═══ THE INTERVIEW, reskinned to the deck ═══════════════════════════════ */
:root{--void:#08080b;--edge2:#2e2e3b;--dim2:#76748a}
#screen-interview{background:var(--void);color:#e8e6f0;min-height:100dvh;
  display:flex;flex-direction:column;
  font-family:"JetBrains Mono",ui-monospace,monospace}
#screen-interview::before{content:"";position:fixed;inset:0;pointer-events:none;
  z-index:0;background:radial-gradient(120% 70% at 50% -8%,#1b1b24 0%,rgba(27,27,36,0) 62%)}
#screen-interview > *{position:relative;z-index:1}

#bar{position:fixed;top:0;left:0;height:2px;background:var(--lime);width:0;
  transition:width .35s ease;z-index:50}

#screen-interview .hd{padding:24px 28px 0;display:flex;align-items:baseline;gap:14px}
#screen-interview .hd h1{font-family:Fraunces,Georgia,serif;font-size:18px;font-weight:600;
  letter-spacing:-.015em;font-variation-settings:"SOFT" 40,"WONK" 1;color:#e8e6f0}
#screen-interview .hd h1 em{font-style:normal;background:none;color:var(--lime);padding:0}
#screen-interview .sec{margin-left:auto;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim2)}

#screen-interview main{flex:1;display:flex;align-items:center;justify-content:center;
  padding:28px 22px 44px}

/* the question, on a card */
#screen-interview .card{width:100%;max-width:560px;background:linear-gradient(180deg,#14141c,#101017);
  border:1px solid var(--edge2);border-radius:22px;padding:26px 26px 24px;
  box-shadow:0 30px 70px -34px #000}
#screen-interview .card.done{background:none;border:0;box-shadow:none;text-align:center}
#screen-interview .blurb{font-size:10.5px;letter-spacing:.05em;color:var(--dim2);
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #22222c}
#screen-interview .q{font-family:Fraunces,Georgia,serif;font-size:25px;line-height:1.22;
  letter-spacing:-.02em;font-weight:500;color:#f2f0f8;
  font-variation-settings:"SOFT" 30,"WONK" 1;text-wrap:balance}
#screen-interview .hint{font-size:12.5px;color:var(--dim2);margin-top:11px;line-height:1.6}
#screen-interview textarea,#screen-interview input.one{width:100%;margin-top:18px;
  padding:14px 16px;font-size:15px;font-family:"JetBrains Mono",monospace;line-height:1.55;
  border:1px solid var(--edge2);border-radius:13px;background:#0b0b11;color:#e8e6f0;resize:vertical}
#screen-interview textarea:focus,#screen-interview input.one:focus{outline:none;
  border-color:var(--lime)}
#screen-interview textarea{min-height:130px}
#screen-interview textarea.big{min-height:190px}

#screen-interview .row{margin-top:16px;display:flex;align-items:center;gap:9px}
#screen-interview .row button{font-family:"JetBrains Mono",monospace;font-size:12px;
  letter-spacing:.05em;padding:11px 20px;border-radius:100px;cursor:pointer;
  border:1.5px solid var(--lime);background:var(--lime);color:#101008;font-weight:700;
  transition:.14s}
#screen-interview .row button:hover{background:#e0ff4d;border-color:#e0ff4d}
#screen-interview .row button.ghost{background:transparent;color:var(--dim2);
  border:1px solid var(--edge2);font-weight:400}
#screen-interview .row button.ghost:hover{border-color:#4a4959;color:#c9c7d6}
#screen-interview .count{margin-left:auto;font-size:11px;color:var(--dim2);
  font-variant-numeric:tabular-nums}
#screen-interview .kbd{margin-top:14px;font-size:10px;color:#4a4959;letter-spacing:.04em}
#screen-interview .kbd b{color:#8f8da3;font-weight:400;border:1px solid var(--edge2);
  border-radius:4px;padding:1px 5px;background:#15151d}

/* the pickers */
#screen-interview .catgrid{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
#screen-interview .cat{font-family:"JetBrains Mono",monospace;font-size:11.5px;
  padding:8px 14px;border-radius:100px;border:1px solid var(--edge2);background:#15151d;
  color:#a9a7b8;cursor:pointer;transition:.14s;border-left:3px solid var(--cc,var(--edge2))}
#screen-interview .cat:hover{border-color:#4a4959;color:#e8e6f0}
#screen-interview .cat.on{background:var(--cc,var(--lime));border-color:var(--cc,var(--lime));
  color:#101008;font-weight:700}
#screen-interview .cat.add{border-style:dashed;border-left-style:dashed}
#screen-interview .dial{display:flex;gap:6px;margin-top:22px;flex-wrap:wrap}
#screen-interview .pip{width:42px;height:42px;border-radius:12px;border:1px solid var(--edge2);
  background:#15151d;color:var(--dim2);font-family:"JetBrains Mono",monospace;font-size:13px;
  cursor:pointer;transition:.14s}
#screen-interview .pip:hover{border-color:#4a4959;color:#e8e6f0}
#screen-interview .pip.on{background:var(--lime);border-color:var(--lime);color:#101008;
  font-weight:700}
#screen-interview .dialnote{margin-top:12px;font-size:12px;color:var(--dim2);min-height:19px}

/* the last screen */
#screen-interview .done .q{font-size:29px}
#screen-interview .big-btn{margin-top:24px;padding:15px 30px;border-radius:100px;
  background:var(--lime);border:0;color:#101008;font-family:"JetBrains Mono",monospace;
  font-size:14px;font-weight:700;cursor:pointer}
#screen-interview .big-btn:disabled{background:#1a1a24;color:var(--dim2);cursor:default}
#screen-interview .stage{margin-top:14px;font-size:12px;color:var(--dim2);
  font-variant-numeric:tabular-nums}


/* ═══ ONE PALETTE, EVERYWHERE ════════════════════════════════════════════ */
:root{--void:#08080b;--edge2:#2e2e3b;--dim2:#76748a;--lime:#caf000}
html,body{background:#08080b}
body{background:#08080b;color:#e8e6f0;
  font-family:"JetBrains Mono",ui-monospace,monospace}

/* ─── sign in / sign up ─── */
.auth{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:26px;background:#08080b;position:relative}
.auth::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 70% at 50% -8%,#1b1b24 0%,rgba(27,27,36,0) 62%)}
.authbox{width:100%;max-width:390px;position:relative;z-index:1;
  background:linear-gradient(180deg,#14141c,#101017);border:1px solid var(--edge2);
  border-radius:22px;padding:30px 28px 26px;box-shadow:0 30px 70px -34px #000}
.authbox h1{font-family:Fraunces,Georgia,serif;font-size:25px;font-weight:600;
  letter-spacing:-.02em;font-variation-settings:"SOFT" 40,"WONK" 1;color:#f2f0f8;
  margin-bottom:7px}
.authbox h1 em{font-style:normal;background:none;padding:0;color:var(--lime)}
.authbox .sub2{font-size:12.5px;color:var(--dim2);margin-bottom:22px;line-height:1.6}
.authbox label{display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--dim2);margin:15px 0 6px}
.authbox input{width:100%;padding:12px 15px;font-size:15px;
  font-family:"JetBrains Mono",monospace;border:1px solid var(--edge2);border-radius:12px;
  background:#0b0b11;color:#e8e6f0}
.authbox input:focus{outline:none;border-color:var(--lime)}
.authbox button.primary{width:100%;margin-top:22px;padding:14px;font-size:14px;
  font-weight:700;border:0;border-radius:100px;background:var(--lime);color:#101008;
  cursor:pointer;font-family:"JetBrains Mono",monospace;letter-spacing:.04em;
  transition:.14s}
.authbox button.primary:hover{background:#e0ff4d}
.authbox button.primary:disabled{background:#1a1a24;color:var(--dim2);cursor:default}
.authbox .swap{margin-top:18px;font-size:12px;color:var(--dim2);text-align:center}
.authbox .swap a{cursor:pointer;color:#c9c7d6;border-bottom:1px solid var(--edge2)}
.authbox .swap a:hover{color:var(--lime);border-color:var(--lime)}
.authbox .err{margin-top:16px;font-size:12px;color:#ff9a7d;background:#1d1216;
  border:1px solid #3a2029;border-radius:11px;padding:11px 13px;line-height:1.55}
#livenote{font-size:11.5px}


/* ⛔ LAST WORD ON THE GROUND. The old light palette was still on html and body
   and showed as a pale frame around every screen. */
html,body{background:#08080b !important;color:#e8e6f0;overflow-x:clip;max-width:100%}
/* the day counters, actually centred in their boxes */
#screen-interview .pip{display:inline-flex;align-items:center;justify-content:center;
  padding:0;line-height:1;font-variant-numeric:tabular-nums}
.pip{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}


/* the foil. Sits over the panel, never intercepts a click, and is invisible
   until the pointer is actually on the card. */
.cardgloss{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  mix-blend-mode:overlay;opacity:0;transition:opacity 300ms ease-out;z-index:3}
.authbox,#screen-interview .card{position:relative;isolation:isolate}
/* the fields sit above the foil so typing never looks washed out */
.authbox > *,#screen-interview .card > *{position:relative;z-index:4}


/* ⛔ NEXT WAS A LIME PILL IN A FIELD OF COLOURED PILLS, so it read as one more
   category and got missed three times running. The fix is not a different
   colour, it is a different SHAPE and a rule above it: this control leaves the
   screen, and nothing else on it does. */
#screen-interview .catgrid + .row,
#screen-interview .dial ~ .row{
  margin-top:22px;padding-top:18px;border-top:1px solid #22222c}
#screen-interview .catgrid + .row button,
#screen-interview .dial ~ .row button{
  border-radius:10px;               /* square-ish: the pills are all round */
  padding:12px 26px;
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 0 0 1px rgba(202,240,0,.25), 0 10px 26px -14px rgba(202,240,0,.6)}
#screen-interview .catgrid + .row button::after,
#screen-interview .dial ~ .row button::after{content:"→";font-size:13px;opacity:.8}
#screen-interview .catgrid + .row button.ghost::after{content:""}



/* ═══ PHONES ═════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .auth{padding:16px;min-height:100dvh}
  .authbox{padding:24px 20px 22px;border-radius:18px}
  .authbox h1{font-size:22px}
  #screen-interview .hd{padding:16px 16px 0}
  #screen-interview main{padding:16px 14px 30px;min-height:calc(100dvh - 60px)}
  #screen-interview .card{padding:20px 18px 18px;border-radius:18px}
  #screen-interview .q{font-size:21px}
  #screen-interview textarea{min-height:110px;font-size:16px}
  #screen-interview textarea.big{min-height:150px}
  #screen-interview .catgrid{gap:6px}
  #screen-interview .cat{font-size:10.5px;padding:7px 12px}
  #screen-interview .pip{width:38px;height:38px}
  /* 16px on inputs or iOS zooms the whole page when you focus one */
  .authbox input{font-size:16px}
}