/* ═══════════════════════════════════════════════════════════════════════════
   IdeaMesh — "Slush" skin (from slush.md), loaded AFTER the engine's own styles.

   Same system as the dashboard: pastel paper, crushed Anton display type,
   six sticker colors as a shared set, a 1px black outline on every card, pill,
   chip and node, no shadows, no gradients, no glass. Nothing structural changes;
   every selector below already exists in index.html — this only re-dresses it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#dceeff; --ink:#000000;
  --muted:#333333; --accent:#5c4ade; --accent2:#55db9c; --pain:#fb4903; --comp:#ffd731;
  --glass:#ffffff; --line:#000000;
  --blue:#4da2ff; --mint:#55db9c; --lav:#e9ccff; --ember:#fb4903; --sun:#ffd731; --violet:#5c4ade;
  --paper:#ffffff; --sky:#dceeff; --concrete:#cccccc; --mist:#e9e9e9;
  --ground:#e2f6ea; /* Ideate's ground: pale mint. Each tool gets its own ground; the shell's bar above stays sky. */
  --disp:'Anton',Impact,ui-sans-serif,sans-serif;
  --ui:'Inter',ui-sans-serif,system-ui,sans-serif;
}
html, body{background:var(--ground);color:var(--ink);font-family:var(--ui);font-weight:500;letter-spacing:-.01em}
*{backdrop-filter:none!important;box-shadow:none!important;text-shadow:none!important}

/* ── type: display is Anton, crushed; labels are caps with open tracking ── */
h1, .qcard h2, #ptitle, .fn h4, .fn-hdr h4, #hc-title, .dv-title, #ideas h3, .cmp-col h4, .vd-word, .vd-delib h3, .ask-head b{
  font-family:var(--disp)!important;font-weight:400!important;text-transform:uppercase;line-height:.88!important;font-style:normal!important;letter-spacing:.005em;
}
h1{font-size:clamp(56px,8vw,140px);line-height:.78!important;letter-spacing:0;max-width:none}
h1 em{color:var(--ink);font-style:normal;-webkit-text-stroke:2px #000;color:var(--sun)}

.vd-one{font-family:var(--ui)!important;font-style:normal!important;font-weight:700}
.kicker, .qcard .qnum, #ptype, #pbrief .bl, .fn .fk, .conf2, .est2, .pchip, .psec, #hc-type, #hc-platform, .dv-kicker, .dv-h, .mhead, .cmp-col .cplat, .cmp-verdict .wlabel, .vd-col h5, .vd-first .fl3, .ac-stat .l, .ad .adnet, .meter .ml, .stale2{
  letter-spacing:.032em!important;font-weight:700!important;color:var(--ink);
}
.kicker{color:var(--ink);font-size:12px}
.sub, .qcard .qsub, #pmeta, .fn p, .fn .row, .dv-text, .dv-trend span, .dv-feat span, .hc-row, .hc-foot, .icard .meta2, .iempty, .cmp-take, .vd-pt span, .vd-blk .how, .ask-head .ctxchip, #ideas .sub2, .dv-list li, .msg.think, .cookline, .pdet, .pstep, .awhat, .appbox .as2, .appbox .st2, #fm-plabel, #flow-hud, #hud .pill, .legend{
  color:var(--ink)!important;
}
.sub{font-size:18px;font-weight:500;max-width:44ch}

/* ── header ─────────────────────────────────────────────────────────────── */
.logo{font-family:var(--disp);font-size:20px;text-transform:uppercase;letter-spacing:0;display:inline-flex;align-items:center;gap:8px}
.logo i{color:var(--ink);background:var(--sun);border:1px solid #000;border-radius:1600px;padding:2px 10px;font-size:14px}
#statuspill, #homebtn, #ideasbtn, #savemeshbtn, #regenbtn, .legend, #hud .pill, #flow-hud, #fm-plabel, .toast{
  background:var(--paper)!important;border:1px solid #000!important;border-radius:1600px!important;color:var(--ink)!important;
  font-weight:700;font-size:12px;letter-spacing:.032em;text-transform:uppercase;
}
#ideasbtn b{color:#111;background:var(--sun);border-radius:1600px;padding:0 6px;margin-left:4px}
#statuspill .spin, #fm-plabel .cs, .cookline .cs, .dv-load .spin{border-color:#000;border-top-color:transparent}

/* ── veils: flat paper, no radial dimming ─────────────────────────────── */
.veil{background:var(--ground)}
#vIdea, #vQa{background:var(--ground)}
#vIdea .kicker, #vQa .kicker{display:inline-block;background:var(--lav);border:1px solid #000;border-radius:1600px;padding:6px 14px;margin-bottom:14px}
#vIdea h1 em{font-style:italic;font-synthesis:style;-webkit-text-stroke:2px #000;color:var(--sun)}
.back{color:var(--ink);font-weight:700;letter-spacing:.032em;text-transform:uppercase;font-size:12px;border:1px solid #000;border-radius:1600px;padding:8px 14px;background:var(--paper)}
.wander{color:var(--ink);border-bottom:1px solid #000;font-weight:700;letter-spacing:.032em;text-transform:uppercase;font-size:12px}

/* ── the two button shapes of the whole system ────────────────────────── */
.btn, .fn .fbtn, .hc-btn, .ac-adsbtn, .ask-in button, .dtab{
  border-radius:1600px!important;border:1px solid #000!important;background:var(--paper)!important;color:var(--ink)!important;
  font-weight:700!important;font-size:13px;letter-spacing:.032em;text-transform:uppercase;
}
.btn.primary, .fn .fbtn.p, .hc-btn.primary, .ask-in button, .dtab.on, #askfab{
  background:#000!important;color:#fff!important;border:1px solid #000!important;border-radius:1600px!important;
}
.btn.primary:hover, .fn .fbtn.p:hover{filter:none;background:#1a1a1a!important}
.btn:hover, .hc-btn:hover{transform:translateY(-1px)}

#askfab{font-weight:700;letter-spacing:.032em;text-transform:uppercase;font-size:13px}

/* ── chips, tags, pills: outlined, sticker-filled when active ─────────── */
.chip, .conf2, .est2, .pchip, .dv-badge, .ac-tag, .icard .luc, .ask-sugg span, #hc-type, #hc-platform, #ptype, .stale2, .vd-solv, .dv-feat .eff{
  border:1px solid #000!important;border-radius:1600px!important;background:var(--paper)!important;color:var(--ink)!important;
}
.chip.on{background:var(--sun)!important}



.tg.crowded, .tg.rising, .tg.sleepy, .tg.underserved, .tg.strong, .tg.good, .tg.wild{color:var(--ink)!important}
.pchip.mob{background:var(--mint)!important} .pchip.web{background:var(--blue)!important}
.dv-badge.plat{background:var(--lav)!important}
.ac-tag.ads{background:var(--sun)!important}
.vd-solv.yes{background:var(--mint)!important} .vd-solv.partially{background:var(--sun)!important} .vd-solv.no{background:var(--ember)!important;color:#fff!important}
.dv-feat .eff{background:var(--lav)!important;border-radius:1600px!important}
 
.conf2.strong{background:var(--mint)!important} .conf2.medium{background:var(--sun)!important}
.est2{background:var(--sun)!important}
.stale2{background:var(--ember)!important;color:#fff!important}

/* ── cards: paper, outlined, 20px; elevated ones 40px ─────────────────── */
.qcard, #panel, .fn, #hovercard, .dive-doc, .cmp-doc, .vd-doc, #ideas, .icard, .cmp-col, .vd-col, .vd-blk, .vd-cond, .vd-first, .vd-banner, .ac-stat, .ad, .appbox, .prow, .dv-feat, #pbrief, .iempty, #ask, .msg.mesh, .cmp-verdict, #ideabox .inputwrap{
  background:var(--paper)!important;border:1px solid #000!important;color:var(--ink)!important;
}
.qcard, .dive-doc, .cmp-doc, .vd-doc, #ask, #ideabox .inputwrap{border-radius:40px!important}
.fn, #hovercard, .icard, .cmp-col, .vd-col, .vd-banner, .ad, .appbox, .vd-first, .vd-cond, #pbrief{border-radius:20px!important}
.vd-blk, .ac-stat, .prow, .dv-feat, .msg.mesh, .iempty{border-radius:16px!important}
#panel, #ideas{border-radius:0!important;border-left:1px solid #000!important;background:var(--paper)!important}
#cmpbar{background:var(--paper)!important}
/* the six stickers, spread across the tinted cards */


#pbrief{background:var(--sky)!important}
.cmp-verdict{background:var(--mint)!important}
.cmp-col.winner{background:var(--sun)!important}
.vd-banner.BUILD{background:var(--mint)!important} .vd-banner.BUILD_IF{background:var(--sun)!important} .vd-banner.DONT_BUILD{background:var(--ember)!important;color:#fff!important}
.vd-banner.BUILD .vd-word, .vd-banner.BUILD_IF .vd-word{color:var(--ink)!important} .vd-banner.DONT_BUILD .vd-word{color:#fff!important}
.vd-cond{background:var(--sun)!important} .vd-first{background:var(--lav)!important}
.msg.user{background:#000!important;color:#fff!important;border-radius:16px!important}
.fn-open{background:var(--lav)!important} .fn-val{background:var(--mint)!important}
.fn-idea.mob{background:var(--mint)!important} .fn-idea.web{background:var(--blue)!important}
.fn-you{background:var(--sun)!important} .fn-market{background:var(--sky)!important} .fn-icp{background:var(--lav)!important}
.fn-hdr{background:none!important;border:none!important}
.fn-hdr h4{font-size:44px}
.fn .row, .fn .cite2, .fn-idea .proof2{border-left:2px solid #000!important;color:var(--ink)!important}
.fn .fk{color:var(--ink)!important}
.fn:hover, .fn.dragging{border-color:#000!important}
.fn.dragging{outline:2px solid #000;outline-offset:2px}
.appbox .av.mob{background:var(--mint)!important;color:#000} .appbox .av.web{background:var(--blue)!important;color:#000}
.appbox .av{border:1px solid #000;border-radius:12px!important}
.appbox .st2 b, .appbox.web .st2 b, .ac-stat .v, .ac-stat.rev .v, .cmp-luc, .fn-player .rev{color:var(--ink)!important}

/* ── inputs ─────────────────────────────────────────────────────────────── */
#ideabox input, .qcard textarea, .ask-in input{background:var(--paper)!important;color:var(--ink)!important;border:1px solid #000!important;border-radius:1600px!important;font-weight:500}
.qcard textarea{border-radius:20px!important}
#ideabox .hint b{color:var(--ink);border-bottom:1px solid #000}
.dot{background:var(--paper);border:1px solid #000;width:9px;height:9px} .dot.on{background:#000}

/* ── waterfall board: paper bands on sky ────────────────────────────────── */




 


.cookbar{background:var(--mist)!important;border:1px solid #000;animation:none;border-radius:1600px}
.cookbar.g{background:var(--mint)!important}
.fbtn.cooking::after{display:none}


/* ── flow mesh (node canvas) ───────────────────────────────────────────── */
#flow{background:var(--ground)!important}
#flow-edges path{stroke:#000!important;stroke-width:1.5}
#flow-edges path.g{stroke:#000!important} #flow-edges path.f{stroke:#000!important;stroke-dasharray:4 4}
#fm-pbar .track{background:var(--paper);border-bottom:1px solid #000}
#fm-pbar .fill{background:var(--sun)!important;border-bottom:1px solid #000} #fm-pbar .fill::after{display:none}
#fm-plabel .pct{color:var(--ink)}
.meter i{background:var(--paper);border:1px solid #000;width:11px;height:11px}
.meter i.on.v{background:var(--mint)!important} .meter i.on.s{background:var(--ember)!important}
.meter b{color:var(--ink)}

/* ── bars & gauges: flat, outlined ─────────────────────────────────────── */
.dv-bar .tr, .fbar .fl2{background:var(--mist)!important;border:1px solid #000;border-radius:1600px!important}
.dv-bar .fl, .fbar .fv{background:var(--blue)!important;color:#000!important;border-radius:1600px!important}
.dv-trend .ar.up{color:var(--ink)} .dv-trend .ar.flat{color:var(--ink)} .dv-trend .ar.down{color:var(--ember)}
.dv-trend, .dv-feat{border-color:#000!important}
.dv-verdict{border-left:3px solid #000!important;color:var(--ink)!important}
.dv-mocks img{border:1px solid #000!important;border-radius:16px!important}
.vd-gauge svg circle{stroke:#000}

/* ── overlays: pale scrim instead of dark blur ─────────────────────────── */
#dive, #compare, #verdict{background:rgba(220,238,255,.85)!important}
.dive-doc .x, .cmp-doc .x, .vd-doc .x, #panel .x, .ask-head .x2{color:var(--ink)!important}

/* ── legend dots + lines the JS colors inline are patched in index.html ─── */
.ldot{border:1px solid #000}
.icard .nm2:hover{color:var(--ink);text-decoration:underline}
.icard input[type=checkbox]{accent-color:#000}

/* ══ THE HOME — the spec's hero order: display, then the buttons, then the line ═
   One column, a lot of air. The wheel is its own band below. */
#vHome{background:var(--ground);justify-content:flex-start;align-items:stretch;text-align:left;overflow-y:auto;overflow-x:hidden;padding:0;z-index:5}
body:has(.veil:not(.hidden)) #c, body:has(.veil:not(.hidden)) #bg{display:none}
.legend{display:none!important}
.home-wrap{position:relative;width:100%;z-index:2}
.home-hero{position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:64px 40px 56px;display:flex;flex-direction:column;justify-content:flex-start}
#vHome h1{font-size:clamp(64px,9.6vw,152px);line-height:.88!important;margin:0 0 30px;max-width:none;text-align:left}
#vHome h1 em{font-style:italic;font-synthesis:style;-webkit-text-stroke:2px #000;color:var(--sun)}
#vHome .ctas{justify-content:flex-start;gap:10px;margin:0 0 22px}
.btn.xl{padding:16px 30px!important;font-size:15px!important;border-radius:1600px!important}
.home-sub{font-size:clamp(15px,1.2vw,18px);font-weight:500;line-height:1.4;max-width:58ch;margin:0}
.home-spin{position:relative;z-index:2;background:var(--paper);border-top:1px solid #000;padding:44px 40px 72px}
.home-spin>*{max-width:1360px;margin-left:auto;margin-right:auto}
.spin-head{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:28px}
.spin-head .kicker{margin-bottom:8px}
.wheel-note{margin:0 60px 6px 0;font-size:16px;max-width:36ch;text-align:left}
#landed{margin:0}

/* header: no wordmark; whatever pills are showing sit in the centre */
header{justify-content:center;gap:8px;row-gap:8px;flex-wrap:wrap;padding:14px 24px}
.spacer{display:none}
#statuspill{max-width:min(46vw,520px)}
#statustext{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.logo[hidden]{display:none}

/* where the ribbon was: a sheet of tag stickers, top right of the headline */
.tagstk{position:absolute;right:4%;top:auto;bottom:10%;width:34%;display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:none;z-index:1}
.tagstk .rpill.big{font-size:15px;padding:12px 20px;transform:rotate(var(--rot,0deg));white-space:nowrap}
.tagstk .rpill.big:nth-child(2){margin-right:14%} .tagstk .rpill.big:nth-child(3){margin-right:4%} .tagstk .rpill.big:nth-child(4){margin-right:22%}
.rpill.ember{background:var(--ember);color:#fff} .rpill.lav{background:var(--lav)} .rpill.mint{background:var(--mint)}
@media(max-width:1100px){.tagstk{display:none}}

/* stickers, pinned around the poster */
#home-stickers{position:absolute;inset:0;pointer-events:none;z-index:3}
.stk{position:absolute;pointer-events:auto;transition:transform .2s;animation:bob 5s ease-in-out infinite;animation-delay:var(--d,0s)}
.stk:hover{transform:rotate(var(--rot,0deg)) scale(1.08)!important;animation-play-state:paused}
.stk svg{display:block;overflow:visible}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(prefers-reduced-motion:reduce){.stk{animation:none}}

/* the roulette block */
.home-roul{width:100%;margin-top:64px;text-align:left}
.home-roul-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.home-roul-head .kicker{margin-bottom:8px}
.disp-sm{font-family:var(--disp);font-weight:400;font-style:italic;font-synthesis:style;font-size:clamp(44px,5vw,80px);line-height:.88;text-transform:uppercase}
.home-roul-head .sub{margin:0;max-width:40ch;font-size:16px}
.roul{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:24px;align-items:start}
.rcard{border:1px solid #000;border-radius:20px;background:var(--paper);padding:24px;position:relative;text-align:left}
.rcard.lg{border-radius:40px} .rcard.lav{background:var(--lav)}
.wheelcard{display:flex;flex-direction:column;align-items:center;gap:16px}
.wheelwrap{position:relative;width:min(300px,78vw);aspect-ratio:1}
.wheelwrap .ptr{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:3;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid #000}
.wheelwrap .ptr::after{content:"";position:absolute;left:-11px;top:-25px;border-left:11px solid transparent;border-right:11px solid transparent;border-top:20px solid var(--sun)}
#wheel{width:100%;height:100%;border-radius:50%;display:block;border:1px solid #000;transition:transform 4.4s cubic-bezier(.13,.72,.16,1)}
.wheelwrap .hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:84px;height:84px;border-radius:50%;background:var(--paper);border:1px solid #000;display:grid;place-items:center;font-family:var(--disp);font-size:14px;text-transform:uppercase;text-align:center;line-height:.9;cursor:pointer;transition:transform .12s,background .12s}
.wheelwrap .hub:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--sun)}
.wheelwrap.landed .hub{background:var(--sun)}
.idle{padding:40px 24px;text-align:center;font-size:18px;max-width:38ch;margin:0 auto}
.idea{display:flex;flex-direction:column;gap:16px}
.idea .tags{display:flex;gap:6px;flex-wrap:wrap}
.rpill{display:inline-flex;align-items:center;border-radius:1600px;border:1px solid #000;background:var(--paper);font-weight:700;font-size:11px;letter-spacing:.032em;text-transform:uppercase;padding:6px 12px}
.rpill.blue{background:var(--blue)} .rpill.sun{background:var(--sun)} .rpill.violet{background:var(--violet);color:#fff}
.idea h3{font-family:var(--disp)!important;font-size:clamp(44px,5.4vw,72px);line-height:.88!important;margin:0;text-transform:uppercase;font-weight:400;font-style:italic;font-synthesis:style}
.idea .what{font-size:18px;margin:0;line-height:1.35}
.idea .rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.idea .rows div{border:1px solid #000;border-radius:20px;padding:12px 14px;background:var(--paper);font-size:14px}
.idea .rows .lb{display:block;font-weight:700;font-size:11px;letter-spacing:.032em;text-transform:uppercase;margin-bottom:4px}
.meters{display:flex;gap:24px;flex-wrap:wrap}
.meter2 .mh{font-weight:700;font-size:11px;letter-spacing:.032em;text-transform:uppercase;margin-bottom:6px}
.dots{display:flex;gap:4px;margin:0}
.dots i{width:16px;height:16px;border-radius:50%;border:1px solid #000;background:var(--paper);opacity:0;animation:pop .2s ease-out forwards}
.dots i.f{background:var(--mint)} .dots.c i.f{background:var(--ember)}
@keyframes pop{to{opacity:1}}
.idea .acts{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:1000px){.roul{grid-template-columns:1fr}.home-hero{padding:48px 24px 40px}.home-spin{padding:40px 24px 64px}}

/* the find-me-one progress readout: its own row under the header, never on the pills */
#fm-plabel{top:70px!important;max-width:min(70vw,720px)}
#fm-plabel #fm-ptext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52vw;display:inline-block;vertical-align:bottom}

/* the questionnaire's skip is a plain text link, not a pill */
.qskip{border:0!important;background:none!important;border-radius:0!important;padding:0!important;font-weight:700;font-size:12px;letter-spacing:.032em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;color:var(--ink);cursor:pointer}
.qskip:hover{background:none!important;text-decoration-thickness:2px}

/* ══ band 4 of the waterfall: the ideas, as the roulette card, in a grid ═════ */






.rcard.sky{background:var(--sky)} .rcard.mint{background:var(--mint)}


/* framed by the shell: My Ideas is in the stage bar, not the engine header */
/* (the shell no longer has a stage bar; the engine keeps its own My Ideas) */

/* the idea box on the mesh: short label as the title */
.fn-you h4{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:30px;line-height:.95;text-transform:uppercase;margin:6px 0 8px}
.fn-you h4:empty{display:none}

/* ── idea board: what users hate + your moves ── */
















/* ── the verdict ── */



























/* on the idea board the buttons live in the page, not floating over it */




/* revenue: three scenarios, not one wide range */








/* meters on the verdict card: black dots on white, so they read on green/yellow/orange */





/* find-me-one questions: a lavender card, sticker chips, a sun-yellow idea box */
.qcard{background:var(--lav)!important;border-color:transparent!important}
.qcard .qnum{display:inline-block;background:var(--sun);border:1px solid #000;border-radius:1600px;padding:5px 12px;margin-bottom:14px}
.chip:hover{background:var(--sun)!important}
.qcard textarea{background:var(--paper)!important}
#ideabox .inputwrap{background:var(--sun)!important;border:1px solid #000!important;padding:8px!important;box-shadow:none!important;backdrop-filter:none!important}
#ideabox .hint{color:var(--ink)}

/* ── the run pill: a run is cooking (or done) somewhere else on this page ── */
#jobpill{position:fixed;left:18px;bottom:18px;z-index:70;display:none;align-items:center;gap:8px;background:#000;color:#fff;border:1px solid #000;border-radius:1600px;padding:10px 14px 10px 12px;font-size:12px;font-weight:600;letter-spacing:.01em;max-width:min(92vw,560px)}
#jobpill.show{display:inline-flex}
#jobpill b{font-weight:700;text-transform:uppercase;letter-spacing:.04em}
#jobpill .sp{width:12px;height:12px;border-radius:50%;border:2px solid #ffd731;border-top-color:transparent;animation:spin .7s linear infinite;flex:0 0 auto}
#jobpill i{font-style:normal;cursor:pointer;background:#ffd731;color:#000;border-radius:1600px;padding:5px 10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:11px;margin-left:4px}
#jobpill i.x{background:#fff;padding:5px 8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── the composer home ── */
.cwrap{max-width:1000px;margin:34px auto 0;padding:0 24px}
.cmodes{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.cmode{border:1px solid #000;border-radius:1600px;background:#fff;padding:9px 16px;font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;cursor:pointer}
.cmode.on{background:#000;color:#fff}
.csp{flex:1}
.chint{font-size:12.5px;font-weight:600;opacity:.75}
.composer{background:#fff;border:1px solid #000;border-radius:28px;padding:16px 16px 14px}
.composer textarea{width:100%;border:0;background:transparent;font:inherit;font-size:18px;line-height:1.45;padding:6px 8px;resize:vertical;min-height:84px}
.composer textarea:focus{outline:none}
.ctools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:12px;margin-top:6px;border-top:1px dashed #000}
.ctools .chip{cursor:pointer}
.ctry{margin-top:10px;font-size:12.5px;font-weight:600;opacity:.8}
.ctry b{cursor:pointer;border-bottom:1px solid #000;margin:0 2px}
.cq{display:flex;flex-direction:column;gap:10px;padding:4px 6px 2px}
.cqrow{display:grid;grid-template-columns:200px 1fr;gap:10px;align-items:start}
.cql{font-weight:700;font-size:12px;letter-spacing:.03em;text-transform:uppercase;padding-top:6px}
.cqchips{display:flex;gap:6px;flex-wrap:wrap}
.cnotes{width:100%;border:1px solid #000!important;border-radius:1600px!important;padding:8px 14px!important;font:inherit;font-size:13px}
@media(max-width:760px){.cqrow{grid-template-columns:1fr}}
.runs{max-width:1000px;margin:30px auto 0;padding:0 24px 30px}
.rhead{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.rhead h2{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:30px;text-transform:uppercase;margin:0;line-height:1}
.rday{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin:14px 0 8px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.rtile{background:#fff;border:1px solid #000;border-radius:18px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:104px;transition:transform .15s}
.rtile:hover{transform:translateY(-2px)}
.rtile.live{background:#fff8d6}
.rtile .rk{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
.rtile b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:20px;line-height:.95;text-transform:uppercase}
.rtile .rmeta{margin-top:auto;display:flex;gap:4px;flex-wrap:wrap}
.rtile .sp{display:inline-block;width:9px;height:9px;border-radius:50%;border:2px solid #000;border-top-color:transparent;animation:spin .7s linear infinite;vertical-align:-1px}
.home-spin{margin-top:10px}
/* home polish: long titles clamp; the floating header stays out of the composer's way */
.rtile b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body:has(#vHome:not(.hidden)) header{display:none!important}

/* find me one: one question at a time, inside the box */
.cqstep{padding:6px 8px 2px}
.cqnum{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:8px}
.cqdots{display:inline-flex;gap:4px} .cqdots i{width:8px;height:8px;border-radius:50%;border:1px solid #000;background:#fff;display:block} .cqdots i.on{background:#ffd731} .cqdots i.done{background:#000}
.cqq{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;line-height:.95;margin:0 0 6px}
.cqsub{font-size:13px;opacity:.75;margin-bottom:12px}
.cqchips.big .chip{font-size:13px;padding:9px 16px}
.cqstep .cnotes{margin-top:12px}
.cqstep .cqown{display:flex;gap:8px;align-items:center;margin-top:12px}.cqstep .cqown .cnotes{margin-top:0;flex:1;min-width:0}
.cqchips .chip.own{border-style:dashed!important}
/* the web picker: industries, professions and people each wear a colour; a pick is always the yellow */
.cqchips .chip.g-ind:not(.on):not(:hover){background:#c9f2e4!important}
.cqchips .chip.g-prof:not(.on):not(:hover){background:#cfe5ff!important}
.cqchips .chip.g-ppl:not(.on):not(:hover){background:#ffd9ec!important}
.cqlegend{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 12px;font-size:12px;font-weight:600}
.cqlegend span{display:inline-flex;align-items:center;gap:6px}
.cqlegend i{width:12px;height:12px;border-radius:50%;border:1px solid #000;display:inline-block}
.cqlegend .g-ind i{background:#c9f2e4}.cqlegend .g-prof i{background:#cfe5ff}.cqlegend .g-ppl i{background:#ffd9ec}

/* ── the Find-me-one canvas: a colour per type, edges you can see, app cards you can read ── */
.fn{box-shadow:none!important;backdrop-filter:none!important}
.fn .fk{display:inline-flex!important;align-items:center;gap:6px;background:#000;color:#fff!important;border-radius:1600px;padding:4px 10px;font-size:10.5px!important;letter-spacing:.06em!important;margin-bottom:10px!important}
.fn-you{background:var(--sun)!important} .fn-market{background:var(--blue)!important} .fn-icp{background:var(--lav)!important} .fn-niche{background:var(--mint)!important}
.fn-player{background:#fff!important} .fn-player .fk{background:var(--violet)}
.fn-idea.mob{background:var(--mint)!important} .fn-idea.web{background:var(--blue)!important} .fn-open{background:var(--lav)!important} .fn-val{background:var(--mint)!important}
.fn-hdr{background:none!important;border:0!important} .fn-hdr .fk{background:#000}
.fn-hdr h4{font-size:44px!important;line-height:.9!important}
.fn h4{font-family:'Anton',Impact,sans-serif!important;font-weight:400!important;text-transform:uppercase;font-size:24px!important;line-height:.95!important}
.fn p, .fn .row{font-size:13.5px!important;line-height:1.5!important}
/* edges: coloured like the node they leave, dashed and flowing */
#flow-edges path{fill:none;stroke-width:2.5!important;stroke:#000;stroke-opacity:.55;stroke-dasharray:9 9;stroke-linecap:round;animation:flowdash 1.2s linear infinite}
#flow-edges path.under{stroke:#000;stroke-opacity:.12;stroke-width:8!important;stroke-dasharray:none;animation:none}
#flow-edges path.f{stroke-opacity:.35;stroke-dasharray:4 8}
#flow-edges path.from-you{stroke:var(--sun)!important;stroke-opacity:1!important} #flow-edges path.from-market{stroke:var(--blue)!important;stroke-opacity:1!important} #flow-edges path.from-icp{stroke:var(--lav)!important;stroke-opacity:1!important}
#flow-edges path.from-niche{stroke:var(--mint)!important;stroke-opacity:1!important} #flow-edges path.from-player{stroke:var(--violet)!important;stroke-opacity:1!important} #flow-edges path.from-hdr{stroke:#000!important;stroke-opacity:.5!important}
#flow-edges .tip{fill:#000} #flow-edges .tip.from-you{fill:var(--sun)} #flow-edges .tip.from-market{fill:var(--blue)} #flow-edges .tip.from-icp{fill:var(--lav)} #flow-edges .tip.from-niche{fill:var(--mint)} #flow-edges .tip.from-player{fill:var(--violet)}
@keyframes flowdash{to{stroke-dashoffset:-36}}
@media (prefers-reduced-motion:reduce){#flow-edges path{animation:none}}
/* app cards: readable */
.fn-player .appgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.appbox{padding:12px 12px 10px!important;border-radius:16px!important}
.appbox .ah{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.appbox .ah img, .appbox .av{width:40px!important;height:40px!important;border-radius:12px!important;border:1px solid #000;flex:0 0 auto;display:grid;place-items:center;font-family:'Anton',Impact,sans-serif;font-size:18px}
.appbox .an2{font-size:16px!important;font-weight:700!important;line-height:1.1;white-space:normal!important}
.appbox .as2{font-size:11.5px!important;opacity:.7}
.appbox .awhat{font-size:13px!important;line-height:1.45!important;margin:4px 0 8px}
.appbox .stats{display:flex;gap:12px;flex-wrap:wrap}
.appbox .stats b, .appbox .st, .appbox .rev{font-size:15px!important;font-weight:700!important}
.appbox .st2, .appbox .sub3{font-size:10.5px!important;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.appbox .pchip{font-size:10.5px!important}

/* no visible scrollbars anywhere · people who want to scroll just scroll */
*{scrollbar-width:none!important;-ms-overflow-style:none!important}
*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
/* ── the spin box: composer-width, wheel waits center, idea slides in right ── */
.home-spin{background:transparent;border-top:0;padding:6px 24px 0}
.spinbox{max-width:1000px;margin:18px auto 0;background:var(--paper);border:1px solid #000;border-radius:20px;padding:22px 26px 26px}
.sb-head{display:flex;align-items:baseline;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.sb-head .disp-sm{font-size:30px}
.sb-note{font-size:12.5px;font-weight:600;color:#333}
.roul{position:relative;display:block;min-height:352px;grid-template-columns:none}
.rw{position:absolute;left:50%;top:0;transform:translateX(-50%);transition:left .85s cubic-bezier(.6,.05,.25,1),transform .85s cubic-bezier(.6,.05,.25,1);z-index:2}
.roul.landed .rw{left:0;transform:none}
#roulette-wheel .wheelcard{width:296px}
#landed{position:absolute;left:330px;right:0;top:0;opacity:0;transform:translateX(46px) scale(.985);transition:opacity .5s .4s,transform .55s .4s cubic-bezier(.3,1.2,.4,1);pointer-events:none;margin:0}
.roul.landed #landed{opacity:1;transform:none;pointer-events:auto}
@media(max-width:900px){.roul{min-height:0}.rw{position:static;transform:none;display:flex;justify-content:center}#landed{position:static;margin-top:14px;transform:none}}
/* every sector owns a color: a band on its nodes, dots on the headers, colored wires */
.fn.sec{border-top:5px solid var(--sc,#4da2ff)!important}
.fn.sec .fk::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--sc,#4da2ff);border:1px solid #000;margin-right:7px;vertical-align:-1px}
/* the spin is just the ball: no box, no button · touch it to spin */
.home-spin{padding:10px 24px 0}
.home-spin .sb-head{max-width:1000px;margin:16px auto 10px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.roul{max-width:1000px;margin:0 auto;position:relative;min-height:340px}
.rw .wheelwrap{width:320px;height:320px;cursor:pointer}
.rw .wheelwrap:hover{transform:scale(1.015)}
#landed{left:350px}
@media(max-width:900px){#landed{left:0}}
/* ══ the spin, final: the composer's own box · wheel glides left INSIDE it,
   the idea lands on the right as a lavender sticker card, box grows to fit ══ */
.home-spin{padding:0 24px}
.home-spin .sb-head{max-width:none;margin:0}
.spincomposer{margin-top:14px;padding:18px 22px 22px}
.spincomposer .sb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 4px 14px}
.spincomposer .sb-head .kicker{margin-bottom:4px}
.spincomposer .sb-head .disp-sm{font-size:30px;line-height:1}
.spincomposer .roul{position:relative;min-height:336px;max-width:none;margin:0;padding:0}
.spincomposer .rw{position:absolute;left:50%;top:0;transform:translateX(-50%);transition:left .85s cubic-bezier(.6,.05,.25,1),transform .85s cubic-bezier(.6,.05,.25,1);z-index:2}
.spincomposer .roul.landed .rw{left:0;transform:none}
.spincomposer .rw .wheelwrap{width:320px;height:320px;cursor:pointer}
.spincomposer #landed{position:static;margin-left:348px;left:auto;right:auto;top:auto;opacity:0;transform:translateX(46px) scale(.985);transition:opacity .5s .4s,transform .55s .4s cubic-bezier(.3,1.2,.4,1);pointer-events:none}
.spincomposer #landed:empty{display:none}
.spincomposer .roul.landed #landed{opacity:1;transform:none;pointer-events:auto}
/* the idea card is its own color: a lavender sticker with ink text, inside the box */
.spincomposer #landed{background:#e9ccff!important;border:1px solid #000!important;border-radius:20px!important;color:#000!important;padding:18px 20px}
.spincomposer #landed p, .spincomposer #landed .lb, .spincomposer #landed h1, .spincomposer #landed h2, .spincomposer #landed h3{color:#000!important}
@media(max-width:900px){
  .spincomposer .roul{min-height:0}
  .spincomposer .rw{position:static;transform:none;display:flex;justify-content:center}
  .spincomposer #landed{margin-left:0;margin-top:14px;transform:none}
}
/* spin box: black around it, wider than the composer, wheel centered, idea card compact */
.home-spin{background:transparent!important;border:0!important}
.runs{background:transparent!important}
.home-spin .cwrap{max-width:1240px}
.spincomposer .roul{min-height:330px}
.spincomposer #landed{margin-left:352px;margin-right:6px;padding:16px 18px;font-size:12.5px;line-height:1.45}
.spincomposer #landed h1, .spincomposer #landed h2, .spincomposer #landed .disp, .spincomposer #landed .disp-sm{font-size:26px!important;line-height:.95!important}
.spincomposer #landed p{font-size:13px!important}
.spincomposer #landed .rows div, .spincomposer #landed .lb{font-size:11.5px!important}
.spincomposer #landed .rpill{font-size:10px;padding:4px 9px}
.spincomposer #landed .btn{font-size:11.5px;padding:9px 14px}
/* ── one width for the whole home: composer, spin box, your runs share the same edges ── */
.cwrap, .home-spin .cwrap{max-width:1240px!important;margin-left:auto!important;margin-right:auto!important;padding:0 24px!important;box-sizing:border-box}
.runs{max-width:1240px!important;margin:26px auto 0!important;padding:0 24px!important;box-sizing:border-box}
.runs .rhead{padding-left:0;padding-right:0}
/* narrow: the wheel drops back to the middle and the idea card comes underneath */
@media(max-width:1100px){
  .spincomposer .roul{min-height:0}
  .spincomposer .rw{position:static;transform:none;display:flex;justify-content:center;transition:none}
  .spincomposer .roul.landed .rw{position:static;transform:none}
  .spincomposer #landed{margin:14px 0 0;transform:none;max-width:none}
}
.home-spin{padding-left:0!important;padding-right:0!important}

/* ── ideate: the heading, the idea box, the save button ── */
.home-head{padding-top:26px;padding-bottom:4px}
/* the same face and size the Distribute tab's title uses, one line */
#vHome h1.home-title{font-family:var(--disp)!important;font-weight:400;font-style:italic;font-synthesis:style;text-transform:uppercase;font-size:clamp(38px,5.2vw,60px)!important;letter-spacing:.01em;line-height:1!important;margin:0 0 8px;text-align:left}
.btn.save{background:#fff;color:#000;border:1px solid #000;box-shadow:0 3px 0 #000;font-weight:800}
.btn.save:hover{background:var(--sun,#ffd731)}
.vd-doc{position:relative}
.vd-save{position:absolute;top:14px;right:56px;z-index:5}
.ideabox .rtile.box{min-height:112px}
.rt-top{display:flex;gap:6px;align-items:center}
.rt-name{font-weight:800;font-size:15px;line-height:1.25}
.rt-meta{font-size:12px;color:var(--muted,#6f6c66);margin-top:auto}
.box-wrap{max-width:900px;margin:0 auto;padding:110px 24px 80px}
.box-wrap .disp-sm{margin:0 0 12px}
.bx-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bx-what{font-size:17px;line-height:1.5;max-width:720px;margin:0 0 16px;outline:none;border-radius:12px;padding:6px 8px;margin-left:-8px}
.bx-what:focus{background:#fff}
.bx-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.bx-sec{background:#fff;color:#111;border:1px solid #000;border-radius:20px;padding:18px 20px;margin-bottom:14px}
.bx-sec p, .bx-sec li, .bx-line, .bx-fdet, .bx-sec .bx-k, .bx-sec .chint, .bx-fname{color:#111}
/* the box view sits on the dark ground: page text is ink, cards are paper with black type */
#vSheet .box-wrap, #vSheet .box-wrap .disp-sm, #vSheet .bx-what, #vSheet .bx-meta .chint, #vSheet .lab-k, #vSheet .bx-head .lab-ce{color:var(--ink,#f3efe6)}
#vSheet .bx-what:focus, #vSheet .bx-head .lab-ce:focus{background:#fff;color:#111!important}
.bx-sec p{margin:0;line-height:1.55}
.bx-sec ol{margin:8px 0 0;padding-left:20px;line-height:1.55}
.bx-k{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:12px;margin-bottom:10px;display:flex;gap:10px;align-items:baseline}
.bx-k .chint{text-transform:none;letter-spacing:0;font-weight:500}
.bx-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bx-feat{display:grid;grid-template-columns:200px 1fr auto auto;gap:12px;align-items:start;padding:10px 0;border-top:1px solid #eee}
.bx-feat:first-child{border-top:0}
.bx-fname{font-weight:800;outline:none}
.bx-fdet{color:#333;line-height:1.45;outline:none}
.bx-fname:focus, .bx-fdet:focus{background:var(--lav,#e9ccff);border-radius:8px;padding:0 4px}
.bx-rm{cursor:pointer;color:#999}
.bx-rm:hover{color:#fb4903}
.bx-add{display:flex;gap:8px;margin-top:12px}
.bx-add input{flex:1;border:1px solid #000;border-radius:1600px;padding:10px 16px;font:inherit}
.bx-line{line-height:1.5;padding:4px 0}
#bx-notes{width:100%;border:1px solid #000;border-radius:14px;padding:12px 14px;font:inherit;line-height:1.5;resize:vertical}
.bx-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.bx-mgrid img{width:100%;border-radius:16px;border:1px solid #000}
@media (max-width:700px){.bx-two{grid-template-columns:1fr}.bx-feat{grid-template-columns:1fr}}
.box-wrap, .bx-feat, .bx-sec{text-align:left}

/* ── the screens in the idea box ── */

/* ── the spin's landed card: lavender plate, black type, each meter on its own paper tile ── */
.rcard.lav, .rcard.lav h3, .rcard.lav .what, .rcard.lav .rows, .rcard.lav .lb, .rcard.lav .mh, .rcard.lav .tags{color:#000}
.rcard.lav .lb{color:#3b2a5a;font-weight:800}
.rcard.lav .meters{display:flex;gap:12px;margin-top:14px}
.rcard.lav .meter2{flex:1;background:#fff;border:1px solid #000;border-radius:16px;padding:12px 14px}
.rcard.lav .meter2:nth-child(2){background:var(--sun,#ffd731)}
.rcard.lav .meter2 .mh{color:#000}
.rcard.lav .dots i{background:#fff;border-color:#000}
.rcard.lav .dots i.f{background:#000}
.rcard.lav .dots.c i.f{background:var(--ember,#fb4903)}
.rcard.lav .rpill:not(.violet):not(.blue):not(.sun):not(.ember){background:#fff;color:#000}

/* ═══ THE IDEA BOX VIEW · a scrolling page, not a centred overlay ═══
   The veil was centred flex with no scroll, so the title, the features header, the notes and
   the screens sat outside the viewport. Now: top row (back, build), the idea, three numbered
   steps with their own buttons, features + plan on the left, notes sticky on the right,
   screens full width below. */
#vBox{justify-content:flex-start!important;align-items:stretch!important;text-align:left!important;overflow-y:auto;overflow-x:hidden;padding:0;background:var(--ground)}
#vBox .box-wrap{max-width:1240px;width:100%;box-sizing:border-box;margin:0 auto;padding:22px 24px 120px}
.bx-top{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.bx-top .back{position:static;cursor:pointer;font-size:12px}
.bx-head{max-width:880px;margin-bottom:22px}
#vBox .box-wrap .disp-sm{font-size:clamp(40px,5vw,72px);margin:0 0 12px}
#vBox .bx-what{margin-left:0;padding:8px 10px;max-width:800px}
#vBox .btn.sm{padding:9px 14px;font-size:11.5px;white-space:nowrap}
.bx-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}
.bx-side{position:sticky;top:0}
#vBox .bx-sec textarea, #vBox .bx-sec input{width:100%;box-sizing:border-box;background:#fff!important;color:#111!important;border:1px solid #000!important;border-radius:14px;padding:12px 14px;font:inherit;font-size:14px;line-height:1.5}
#vBox .bx-side textarea{min-height:320px;resize:vertical;display:block}
#vBox .bx-add input{border-radius:1600px;padding:10px 16px}
#vBox .bx-sec{margin-bottom:14px}
#vBox .bx-screens{margin-top:0}
.bx-foot{margin-top:24px;display:flex;justify-content:flex-end}
.bx-foot span{cursor:pointer;font-size:12px;opacity:.6;text-decoration:underline;color:var(--ink)}
.bx-foot span:hover{opacity:1;color:var(--ember)}
@media(max-width:1000px){.bx-grid{grid-template-columns:1fr}.bx-side{position:static}}
/* hints inside the box's white cards stay black (the night sheet forces .chint to ink) */
#vSheet .bx-sec .chint{color:#111!important;opacity:.65}
#sheet-brief .chint{color:#111!important;opacity:.65}
#vBox .bx-sec .iempty{color:#111;border-color:#bbb;background:transparent}
/* the floating My Ideas pill is the box itself; it steps aside while a box is open */
body:has(#vBox:not(.hidden)) #ideasbtn{display:none}

/* ── the Idea Lab: the doc, its prompt dock, the research cards, the brief drawer ── */
#vSheet{position:fixed;inset:0;overflow:auto;z-index:350;background:var(--ground);display:block;align-items:initial;justify-content:initial;text-align:left}
#vSheet .lab-wrap{margin:0 auto;padding-top:28px}
.lab-wrap{padding-bottom:180px}
.lab-k{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:11px;opacity:.7;margin-bottom:6px}
.lab-loading{display:flex;gap:10px;align-items:center;opacity:.7;font-size:14px;margin-top:10px}.lab-loading i{width:10px;height:10px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .8s linear infinite}
.lab-ce{outline:none;border-radius:8px;min-width:24px}.lab-ce:empty::before{content:attr(data-ph);opacity:.45}.lab-ce:focus{background:var(--lav,#e9ccff);color:#111;padding:0 4px}
.bx-head .lab-ce.disp-sm{display:block}.bx-meta .rpill .lab-ce{display:inline}
.lab-what{font-size:15px;line-height:1.6;max-width:760px;margin:6px 0 4px;opacity:.9}.lab-what p{margin:0 0 8px}
.lab-runlink{cursor:pointer;margin-left:14px;text-decoration:underline dotted}
.lab-hero .lab-fname.big{font-size:20px;font-weight:900;margin-bottom:4px}.lab-like{margin-top:6px;font-size:13px;color:#555;font-style:italic}
.lab-feat, .lab-screen{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:start;padding:10px 0;border-top:1px solid #eee}
.lab-feat:first-child, .lab-screen:first-child{border-top:0}
.lab-feat.off .lab-fbody{opacity:.45;text-decoration:line-through}
.lab-keep input{width:18px;height:18px;margin-top:2px;accent-color:#000}
.lab-fname{font-weight:800;outline:none;color:#111}.lab-fdet{color:#333;line-height:1.45;outline:none;margin-top:2px}.lab-fnote{margin-top:4px;font-size:13px;color:#7a5a00;background:#fff7d6;border-radius:8px;padding:3px 8px;outline:none}.lab-fnote.empty{background:transparent;color:#aaa;padding:0}.lab-fnote.empty:focus{background:#fff7d6;color:#7a5a00;padding:3px 8px}
.lab-fname:empty::before, .lab-fdet:empty::before, .lab-fnote:empty::before{content:attr(data-ph);color:#666}
.lab-fname:focus, .lab-fdet:focus{background:var(--lav,#e9ccff);border-radius:8px;padding:0 4px}
.lab-from{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#999;padding-top:4px;white-space:nowrap}
.lab-sn{width:24px;height:24px;border-radius:50%;background:#000;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.lab-mv{display:flex;flex-direction:column;gap:2px;font-size:10px;line-height:1;cursor:pointer;color:#666}.lab-mv b{padding:2px 4px}.lab-mv b:hover{color:#000}.lab-mv b.dim{opacity:.25;pointer-events:none}
.flash{animation:lab-flash 2.2s ease-out}@keyframes lab-flash{0%{background:#fff3b0}70%{background:#fff3b0}100%{background:transparent}}
.bx-k.lab-sub{margin-top:18px}
.lab-wins{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lab-win{border:1px solid #e6e6e6;border-radius:16px;padding:12px;background:#fafafa;color:#111}.lab-win.web{background:#f5f8ff}
.lab-wt{display:flex;gap:10px;align-items:center;margin-bottom:6px}.lab-wt b{display:block;font-size:14px}.lab-wt span{font-size:12px;color:#666}.lab-wt a{margin-left:auto;color:#000;text-decoration:none;font-weight:700}
.lab-logo{width:36px;height:36px;border-radius:9px;object-fit:cover;background:#fff;border:1px solid #eee}.lab-logo.app{border-radius:10px}
.lab-wl{font-size:13px;line-height:1.45;margin:3px 0;color:#222}.lab-wl i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#888;margin-right:6px}.lab-wl a{color:#000}
.lab-shots{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:none}.lab-shots::-webkit-scrollbar{display:none}.lab-shots img{height:120px;border-radius:8px;border:1px solid #ddd;cursor:zoom-in;flex:none}
.lab-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.lab-look{border:1.5px solid #e6e6e6;border-radius:16px;overflow:hidden;background:#fff;color:#111;transition:border-color .2s,box-shadow .2s}.lab-look.on{border-color:#000;box-shadow:0 0 0 3px #ffd731}
.lab-lv{position:relative;aspect-ratio:16/10;background:#111}.lab-lv img, .lab-lv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.lab-lv video{opacity:0;transition:opacity .25s}.lab-look:hover .lab-lv video{opacity:1}
.lab-lt{padding:10px 12px 4px}.lab-lt b{display:block;font-size:14px}.lab-lt span{font-size:11px;color:#777;text-transform:uppercase;letter-spacing:.06em}
.lab-lp{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 6px}.lab-lp i{font-style:normal;font-size:10.5px;padding:2px 7px;border-radius:999px;background:#f1f1f1;color:#444}
.lab-la{display:flex;gap:8px;padding:6px 12px 12px}.lab-la .btn{text-decoration:none}
.lab-brief{white-space:pre-wrap;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;background:#0e0e11;color:#f3efe6;border-radius:14px;padding:16px;max-height:520px;overflow:auto;margin:0}
.lab-chatsec #lab-chat{display:flex;flex-direction:column;gap:10px}.lab-chatsec .tr-q{align-self:flex-end;max-width:70%;padding:9px 13px;border-radius:14px 14px 4px 14px;background:#ffd731;color:#111;font-size:13.5px;font-weight:700}
.lab-chatsec .tr-a{align-self:flex-start;max-width:88%;padding:12px 14px;border-radius:14px 14px 14px 4px;background:#f6f6f6;border:1px solid #e6e6e6;font-size:13.5px;line-height:1.5;color:#111;white-space:normal}.lab-chatsec .tr-a.cook{color:#888}
.lab-chatsec .tr-a p{margin:0 0 8px;color:#111}.lab-chatsec .tr-a ol li{color:#111}.lab-chatsec .tr-a h4{color:#7a5a00}
.lab-opsline{margin-top:8px;font-size:12px;font-weight:700;color:#0a7a3f}.lab-cost{margin-top:4px;font-size:11px;color:#555}
.lab-pend{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#lab-dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(760px,94vw);z-index:360;display:flex;flex-direction:column;gap:8px;align-items:center}
.lab-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.lab-chips .rpill{cursor:pointer;background:rgba(20,20,24,.85);color:#f3efe6;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}.lab-chips .rpill:hover{background:#ffd731;color:#111}
#lab-ask{width:100%;display:flex;align-items:stretch;border-radius:16px;background:rgba(24,24,29,.96);border:1.5px solid rgba(255,255,255,.18);box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden;backdrop-filter:blur(10px)}
#lab-ask:focus-within{border-color:rgba(255,215,49,.7)}
#lab-q{flex:1;resize:none;border:0;outline:0;background:transparent;color:#f3efe6;font:15px/1.4 inherit;padding:14px 16px;min-height:50px;max-height:160px}
#lab-q::placeholder{color:rgba(243,239,230,.45)}
#lab-send{width:54px;border:0;background:#ffd731;color:#111;font-size:20px;font-weight:900;cursor:pointer}#lab-send:disabled{opacity:.5;cursor:wait}
#sheet-brief{position:fixed;top:0;right:0;bottom:0;width:min(560px,96vw);z-index:370;background:#fff;color:#111;border-left:1.5px solid #000;box-shadow:-20px 0 60px rgba(0,0,0,.35);display:flex;flex-direction:column;padding:18px 20px}
#sheet-brief.hidden{display:none}
.lab-bhead{display:flex;gap:12px;align-items:center;margin-bottom:10px}.lab-bhead b{font-size:18px}.lab-bx{border:0;background:transparent;font-size:24px;cursor:pointer;line-height:1}
#lab-brieftext{flex:1;border:1px solid #000;border-radius:14px;padding:14px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;resize:none;outline:none}
.lab-bacts{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
@media (max-width:700px){.lab-feat, .lab-screen{grid-template-columns:auto 1fr auto}.lab-from{display:none}}
.lab-setprice{cursor:pointer;opacity:.75;border-style:dashed}.lab-setprice:hover{opacity:1}
/* the price pill: black figures on the yellow pill, not the doc's pale ink */
#vSheet .bx-meta .rpill.sun, #vSheet .bx-meta .rpill.sun .lab-ce{color:#111}
#vSheet .bx-meta .rpill.sun .lab-ce:focus{background:#fff;color:#111}

/* the idea doc: the dashboard's sticker colours, one per section, black type and black outlines; the cards inside stay paper */
#vSheet .bx-sec.s-hero{background:#ffd731}
#vSheet .bx-sec.s-feats{background:#55db9c}
#vSheet .bx-sec.s-screens{background:#dceeff}
#vSheet .bx-sec.s-space{background:#e9ccff}
#vSheet .bx-sec.s-service{background:#c9f2e4}
.lab-pipe{margin:2px 0 0;padding:0 0 0 18px}.lab-pipe li{margin:2px 0}
#vSheet .bx-sec.s-moat{background:#bcdcff}
#vSheet .bx-sec.s-rest{background:#ffd9ec}
#vSheet .bx-sec.s-brief{background:#fff}
#vSheet .bx-sec.lab-chatsec{background:#ececec}
#vSheet .lab-feat, #vSheet .lab-screen{border-top-color:rgba(0,0,0,.16)}
#vSheet .lab-win, #vSheet .lab-win.web{background:#fff;border:1px solid #000;cursor:pointer;transition:transform .12s}
#vSheet .lab-win:hover{transform:translateY(-1px)}
#vSheet .lab-chatsec .tr-a{background:#fff;border-color:#000}
#vSheet .bx-sec .lab-fname:focus, #vSheet .bx-sec .lab-fdet:focus, #vSheet .bx-sec .bx-fname:focus, #vSheet .bx-sec .bx-fdet:focus{background:#fff}
/* the space's app cards: every screenshot strip sits on the card's bottom edge, so a row lines up whatever the text above did */
#vSheet .lab-wins{align-items:stretch}
#vSheet .lab-win{display:flex;flex-direction:column}
#vSheet .lab-win .lab-shots{margin-top:auto;padding-top:10px}
.rcard .rlogo{width:52px;height:52px;border-radius:14px;border:1px solid #000;display:block;margin-bottom:10px;background:#fff}
/* self-made marks: an idea's own logo on its lab tile, its drawer row and its doc; a glyph for every run */
.rt-logo{margin-bottom:2px}.rt-mk{width:40px;height:40px;border-radius:11px;border:1px solid #000;background:#fff;display:block;object-fit:cover}
.rt-mk.sm{width:26px;height:26px;border-radius:7px;flex:0 0 auto}.rt-mk.lg{width:64px;height:64px;border-radius:16px;margin-bottom:12px}
.rtile .rt-mk{margin-bottom:2px}.ic-logo{display:inline-flex;align-items:center;margin-right:8px;flex:0 0 auto}.icard .top2{display:flex;align-items:center}
.rt-wm{display:inline-flex;align-items:center;height:40px;max-width:100%;padding:0 12px;border-radius:11px;border:1px solid #000;font-size:14px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-wm.sm{height:26px;padding:0 8px;font-size:11px;border-radius:7px}.rt-wm.lg{height:64px;padding:0 18px;font-size:22px;border-radius:16px;margin-bottom:12px}
.bx-logo{margin-bottom:6px}
/* the logo studio inside the doc */
#vSheet .bx-logo{display:flex;align-items:center;gap:12px;margin-bottom:8px}#vSheet .bx-logo .rt-mk.lg,#vSheet .bx-logo .rt-wm.lg{margin-bottom:0}
#vSheet .bx-sec.s-logo{background:#fff}
.logo-cur{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.logo-cur .rt-mk.lg,.logo-cur .rt-wm.lg{margin-bottom:0}.logo-cur-t{flex:1;min-width:200px}.logo-cur-t b{display:block;font-size:14px;color:#111}
.logo-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}.logo-row input{flex:1;min-width:220px;border:1px solid #000;border-radius:12px;padding:9px 12px;font:inherit;font-size:13px;background:#fff;color:#111}.logo-row input:disabled{opacity:.5}
#vSheet .s-logo textarea,#vSheet .s-char textarea{width:100%;box-sizing:border-box;margin-top:8px;border:1px solid #000;border-radius:14px;padding:12px 14px;font:inherit;font-size:13.5px;line-height:1.45;background:#fff;color:#111;resize:vertical}
.logo-cands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.logo-cands img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;border:2px solid #e6e6e6;cursor:pointer;background:#fff;transition:transform .12s}.logo-cands img:hover{transform:translateY(-2px)}.logo-cands img.on{border-color:#000;box-shadow:0 0 0 3px #ffd731}
@media (max-width:700px){.logo-cands{grid-template-columns:repeat(2,minmax(0,1fr))}}
#vSheet .s-logo .lab-k,#vSheet .s-char .lab-k{color:#111;opacity:.7}
#vSheet .s-logo textarea,#vSheet .s-logo textarea:focus,#vSheet .s-char textarea,#vSheet .s-char textarea:focus{background:#fff!important;color:#111!important;border:1px solid #000!important}
/* the spin lands smoothly: the wheel glides from the centre into the left column while the idea fades in on the right; both stay in flow, so nothing jumps or overlaps */
.spincomposer .roul{container-type:inline-size;display:grid!important;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:24px;align-items:start;min-height:352px;position:relative}
.spincomposer .rw{position:relative!important;left:auto!important;top:auto!important;transform:translateX(calc(50cqw - 50%));transition:transform .9s cubic-bezier(.6,.05,.25,1)}
.spincomposer .roul.landed .rw{transform:none}
.spincomposer #landed{position:relative!important;left:auto!important;right:auto!important;top:auto!important;margin:0!important;opacity:0;visibility:hidden;transform:translateX(28px) scale(.985);transition:opacity .55s .35s,transform .6s .35s cubic-bezier(.3,1.2,.4,1),visibility 0s .35s;pointer-events:none}
.spincomposer .roul.landed #landed{opacity:1;visibility:visible;transform:none;pointer-events:auto}
@media(max-width:900px){.spincomposer .roul{display:block!important}.spincomposer .rw{transform:none!important;margin:0 auto}.spincomposer #landed{margin-top:14px!important}}
/* the landed card: the meters keep white dots with mint and ember fills in both themes; the logo sits by the name; the hero feature has its own box */
html[data-theme="dark"] body .rcard.rcard.lav .dots i,body .rcard.rcard.lav .dots i{background:#fff!important;border-color:#000!important}
html[data-theme="dark"] body .rcard.rcard.lav .dots i.f,body .rcard.rcard.lav .dots i.f{background:#55db9c!important}
html[data-theme="dark"] body .rcard.rcard.lav .dots.c i.f,body .rcard.rcard.lav .dots.c i.f{background:#fb4903!important}
.rcard.lav .rhead{display:flex;align-items:center;gap:14px;margin-bottom:8px}.rcard.lav .rhead .rlogo{margin-bottom:0;flex:0 0 auto}.rcard.lav .rhead h3{margin:0}
.rcard.lav .rhero{background:#fff;border:1px solid #000;border-radius:16px;padding:12px 14px;margin:12px 0 0}.rcard.lav .rhero .lb{display:block;margin-bottom:4px}.rcard.lav .rhero b{font-size:15px;display:block;color:#000}.rcard.lav .rhero p{margin:4px 0 0;font-size:13px;line-height:1.45;color:#222}
/* the landed idea, compact: the wheel shrinks into the left column with the buttons stacked under it; the idea reads in two columns on the right */
.spincomposer .roul{transition:grid-template-columns .9s cubic-bezier(.6,.05,.25,1)}
.spincomposer .roul.landed{grid-template-columns:minmax(240px,300px) minmax(0,1fr)!important;gap:20px}
.spincomposer .wheelwrap{transition:width .9s cubic-bezier(.6,.05,.25,1)}
.spincomposer .roul.landed .wheelwrap{width:min(260px,70vw);height:auto;aspect-ratio:1}   /* a circle: the height follows the width it glides to, never the 320px it started at */
#racts{display:none;flex-direction:column;gap:8px;margin-top:14px;width:min(260px,70vw)}.roul.landed #racts{display:flex}
#racts .btn{width:100%;justify-content:center;text-align:center}
#landed .idea{padding:16px 18px 18px}
#landed .idea .rhead{margin-bottom:6px}#landed .idea .rhead .rlogo{width:44px;height:44px;border-radius:12px}
#landed .idea h3{font-size:28px!important;line-height:.95!important;margin:0}
#landed .idea .what{font-size:13.5px;line-height:1.45;margin:6px 0 0}
#landed .idea .rhero{padding:10px 12px;margin-top:10px}#landed .idea .rhero b{font-size:14px}#landed .idea .rhero p{font-size:12.5px}
#landed .idea .rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}#landed .idea .rows>div{padding:9px 11px;font-size:12.5px;line-height:1.4}#landed .idea .rows .lb{font-size:10.5px}
#landed .idea .meters{margin-top:10px;gap:8px}#landed .idea .meter2{padding:9px 11px}#landed .idea .meter2 .mh{font-size:10.5px;margin-bottom:4px}#landed .dots i{width:12px;height:12px}
#landed .idea .tags{margin-bottom:6px}
@media(max-width:900px){#landed .idea .rows{grid-template-columns:1fr}#racts{width:100%;margin:12px auto 0}}
/* meter fills on the landed card win over the night theme's ID-weighted rule */
html[data-theme="dark"] body #landed .dots i,body #landed .dots i{background:#fff!important;border-color:#000!important}
html[data-theme="dark"] body #landed .dots i.f,body #landed .dots i.f{background:#55db9c!important}
html[data-theme="dark"] body #landed .dots.c i.f,body #landed .dots.c i.f{background:#fb4903!important}
/* web wordmarks keep their width in flex rows */
.rt-wm{max-width:none;flex:0 0 auto}.ic-logo .rt-wm.sm{max-width:170px}.rt-logo .rt-wm{max-width:100%}.bx-logo .rt-wm.lg,.logo-cur .rt-wm.lg{max-width:min(380px,100%)}
.spincomposer .rw{display:flex;flex-direction:column;align-items:center}
/* the landed card, tighter: everything sits close; the proof is two or three app boxes */
#landed .idea{padding:14px 16px 16px}#landed .idea .tags{margin-bottom:4px}#landed .idea .what{margin:4px 0 0}
#landed .idea .rhero{margin:8px 0 0!important;padding:9px 11px}
#landed .idea .rows{margin:8px 0 0!important;gap:6px}#landed .idea .rows>div{padding:8px 10px}
#landed .idea .meters{margin:8px 0 0!important;gap:6px}
#landed .proofs{margin-top:8px}#landed .proofs>.lb{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3b2a5a;margin:0 0 5px 2px}
#landed .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#landed .pbox{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #000;border-radius:12px;padding:7px 9px;cursor:pointer;min-width:0;transition:transform .12s}#landed .pbox:hover{transform:translateY(-1px)}
#landed .pbox img{width:30px;height:30px;border-radius:8px;flex:0 0 auto;background:#eee}#landed .pbox div{min-width:0}#landed .pbox b{display:block;font-size:12px;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#landed .pbox span{display:block;font-size:11px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){#landed .pgrid{grid-template-columns:1fr 1fr}}
/* the landed card's blocks sit 8px apart, whatever the card's own gap says */
#landed .idea{display:flex;flex-direction:column;gap:8px!important}
#landed .idea .tags,#landed .idea .rhead,#landed .idea .what,#landed .idea .rhero,#landed .idea .rows,#landed .proofs,#landed .idea .meters{margin:0!important}
/* the living character: a drawn sprite beside the logo, idling, never a mascot in your face */
.rt-sprite{width:64px;height:64px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid #000;animation:sprite-bob 3.2s ease-in-out infinite;transform-origin:50% 100%}
.rt-sprite.sm{width:40px;height:40px;border-radius:10px}.rt-sprite.lg{width:64px;height:64px}
.rt-sprite.empty{display:grid;place-items:center;font:800 22px 'Inter',sans-serif;color:#999;animation:none}
@keyframes sprite-bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-4px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.rt-sprite{animation:none}}
.rt-logo{display:flex;align-items:center;gap:8px}
#vSheet .bx-sec.s-char{background:#ffe3f1}
.logo-cands.chars img{object-fit:contain;background:#fff}
/* who should the character be: four cards, one of each kind */
.char-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.char-opt{background:#fff;border:1px solid #000;border-radius:14px;padding:10px 12px;cursor:pointer;transition:transform .12s;min-width:0}.char-opt:hover{transform:translateY(-2px)}.char-opt.on{background:#fff3b0;outline:3px solid #ffd731;outline-offset:0}
.char-opt .ck{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3b2a5a;margin-bottom:4px}.char-opt b{display:block;font-size:14px;color:#000;margin-bottom:4px}.char-opt p{margin:0 0 4px;font-size:12px;line-height:1.4;color:#222}.char-opt p.pers{color:#444}.char-opt i{display:block;font-size:11.5px;line-height:1.4;color:#666;font-style:normal;margin-top:4px}
@media(max-width:900px){.char-opts{grid-template-columns:1fr 1fr}}
/* a saved idea: its Save button became the door into its Idea Lab doc */
.btn.saved-go, .hc-btn.saved-go, .fn .fbtn.saved-go{background:var(--mint);color:#000;border:1px solid #000;font-weight:800;cursor:pointer}
.btn.saved-go:hover, .hc-btn.saved-go:hover, .fn .fbtn.saved-go:hover{background:#7be6b4}
.icard{cursor:pointer}.icard:hover{border-color:var(--ink)!important}
/* ── the Idea Lab's waiting: a doodle that draws itself, a pencil, a line that changes every 2.5s, a bar that eases toward 90%, the seconds; four blank cards drawing when four options are coming ── */
.lab-wait{background:#fff;color:#111;border:1px solid #000;border-radius:20px;padding:16px 18px;margin:12px 0;max-width:880px}
.bx-sec .lab-wait{margin:10px 0 4px;max-width:none}
.lw-main{display:flex;gap:16px;align-items:center}
.lw-art{position:relative;flex:0 0 auto;width:68px;height:68px;border-radius:18px;background:var(--sun,#ffd731);border:1px solid #000;display:grid;place-items:center;color:#111;overflow:hidden}
.lw-doodle{width:52px;height:52px}
.lw-doodle path{stroke-dasharray:1;stroke-dashoffset:1;animation:lw-draw 3.4s cubic-bezier(.45,.05,.35,1) infinite;animation-delay:calc(var(--d,0) * .28s + var(--i,0) * .45s)}
@keyframes lw-draw{0%{stroke-dashoffset:1;opacity:1}42%{stroke-dashoffset:0;opacity:1}82%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.lw-pencil{position:absolute;width:22px;height:22px;left:6px;top:6px;animation:lw-pencil 3.4s ease-in-out infinite;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
@keyframes lw-pencil{0%{transform:translate(8px,30px) rotate(-8deg)}20%{transform:translate(30px,10px) rotate(6deg)}40%{transform:translate(36px,34px) rotate(-4deg)}60%{transform:translate(14px,38px) rotate(8deg)}80%{transform:translate(26px,20px) rotate(-6deg)}100%{transform:translate(8px,30px) rotate(-8deg)}}
.lw-body{flex:1;min-width:0}
.lw-line{font-weight:800;font-size:15px;line-height:1.3;color:#111;min-height:20px}
.lw-line.in{animation:lw-line .45s cubic-bezier(.2,.8,.2,1)}
@keyframes lw-line{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lw-bar{position:relative;height:10px;margin:9px 0 7px;border-radius:999px;background:#eef0f2;border:1px solid #000;overflow:hidden}
.lw-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--mint,#55db9c),var(--sun,#ffd731));transition:width .45s ease-out}
.lw-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-100%);animation:lw-shim 1.4s ease-in-out infinite}
.lab-wait.done .lw-bar i{transition:width .3s ease-out}.lab-wait.done .lw-doodle path{animation:none;stroke-dashoffset:0}
.lw-meta{font-size:12px;color:#444;font-variant-numeric:tabular-nums}.lw-sec{font-weight:800;color:#111}
.lw-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.lw-card{position:relative;aspect-ratio:1;border-radius:18px;border:1px solid #000;display:grid;place-items:center;overflow:hidden;color:#111;animation:lw-bob 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * .3s)}
.lw-card:nth-child(1){background:#fff3b0}.lw-card:nth-child(2){background:#c9f2e4}.lw-card:nth-child(3){background:#f1e3ff}.lw-card:nth-child(4){background:#dceeff}
.lw-card .lw-doodle{width:56%;height:56%}
.lw-card::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.7) 50%,transparent 75%);transform:translateX(-110%);animation:lw-shim 1.8s ease-in-out infinite;animation-delay:calc(var(--i) * .2s)}
@keyframes lw-shim{to{transform:translateX(110%)}}
@keyframes lw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:700px){.lw-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.lw-art{width:56px;height:56px}.lw-doodle{width:42px;height:42px}}
.lab-chatsec .tr-a.cook{width:min(560px,88%)}.lab-chatsec .tr-a.cook .lab-wait{margin:0;border:0;padding:0;background:transparent}.lab-chatsec .tr-a.cook .lw-art{width:52px;height:52px;border-radius:14px}.lab-chatsec .tr-a.cook .lw-doodle{width:40px;height:40px}
/* the doc's own skeleton under the wait, so the page has a shape while it loads */
.lab-skel{display:grid;gap:12px;max-width:880px}.lab-skel i{display:block;height:120px;border-radius:20px;border:1px solid rgba(0,0,0,.18);background:linear-gradient(100deg,rgba(255,255,255,.35) 30%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.35) 70%);background-size:300% 100%;animation:lw-skel 1.8s ease-in-out infinite}
.lab-skel i:nth-child(1){background-color:#ffd731}.lab-skel i:nth-child(2){background-color:#55db9c;height:180px}.lab-skel i:nth-child(3){background-color:#dceeff}
@keyframes lw-skel{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.lw-doodle path{animation:none;stroke-dashoffset:0}.lw-pencil,.lw-card,.lw-card::after,.lw-bar i::after,.lab-skel i{animation:none}.lw-line.in{animation:none}.lw-bar i{transition:none}}

/* ── your character: the card (the drawing or a sketch, kind, name, look, colours), the change box, the buttons ── */
#vSheet .s-yourchar .yc-drop{cursor:pointer;text-decoration:underline dotted}
.yc-card{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid #000;border-radius:18px;padding:14px}
.yc-art{flex:0 0 auto;width:132px;height:132px;border-radius:16px;border:1px solid #000;background:#fff;display:grid;place-items:center;overflow:hidden;position:relative}
.yc-art img{width:100%;height:100%;object-fit:contain;animation:sprite-bob 3.2s ease-in-out infinite;transform-origin:50% 100%}
.yc-art.empty{background:#fff3f9;color:#111}.yc-art.empty .lw-doodle{width:64px;height:64px}.yc-art.empty .lw-doodle path{animation:none;stroke-dashoffset:0;stroke-dasharray:.04 .03}
.yc-art.empty span{position:absolute;bottom:8px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#555}
.yc-t{flex:1;min-width:0;color:#111}
.yc-kind{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3b2a5a;background:#f1e3ff;border:1px solid #000;border-radius:999px;padding:2px 8px}
.yc-name{display:block;font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:34px;line-height:.95;margin:6px 0 4px;color:#111}
.yc-t p{margin:0 0 4px;font-size:13.5px;line-height:1.45;color:#222}.yc-t p.yc-line{font-weight:700;color:#111}.yc-t p.yc-pers{color:#444;font-style:italic}
.yc-pal{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px}.yc-palk{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#444;margin-right:4px}
.yc-sw{position:relative;width:30px;height:30px;border-radius:9px;border:1px solid #000;cursor:pointer;transition:transform .12s}.yc-sw:hover{transform:translateY(-2px)}
.yc-sw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.yc-stale{margin-top:8px;font-size:12.5px;font-weight:700;color:#7a3a00;background:#fff3b0;border:1px solid #000;border-radius:10px;padding:5px 9px;display:inline-block}
.yc-change{display:flex;gap:8px;margin-top:12px}.yc-change input{flex:1;min-width:0;border:1px solid #000;border-radius:12px;padding:10px 12px;font:inherit;font-size:13.5px;background:#fff;color:#111}
.yc-cost{margin-top:6px}
.yc-prompt{margin-top:10px}.yc-prompt summary{cursor:pointer;font-size:12.5px;font-weight:700;color:#111}.yc-prompt textarea{width:100%;box-sizing:border-box;margin-top:8px;border:1px solid #000;border-radius:14px;padding:12px 14px;font:inherit;font-size:13.5px;line-height:1.45;background:#fff;color:#111;resize:vertical}
#vSheet .s-yourchar .yc-change input,#vSheet .s-yourchar .yc-prompt textarea,#vSheet .s-yourchar .logo-row input{background:#fff!important;color:#111!important;border:1px solid #000!important}
#vSheet .s-yourchar .iempty{color:#111}#vSheet .s-yourchar .iempty a{cursor:pointer;text-decoration:underline;font-weight:800}
@media (max-width:700px){.yc-card{flex-direction:column}.yc-art{width:100%;height:180px}}
@media (prefers-reduced-motion:reduce){.yc-art img{animation:none}}

/* ── Who we serve (the doc's section under the header) and the two build doors ── */
#vSheet .bx-sec.s-serve{background:#ffcfb0}
.sv-person{font-size:19px;font-weight:800;line-height:1.35;color:#111;margin:4px 0 12px;max-width:820px}
.sv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sv-card, .sv-svc{background:#fff;border:1px solid #000;border-radius:16px;padding:12px 14px;color:#111}
.sv-card .lab-k, .sv-svc .lab-k{color:#111;opacity:.7}
.sv-pay{display:block}.sv-q{display:block;margin:2px 0}.sv-q em{display:block;font-style:normal;font-size:11px;color:#777;margin:0 0 4px 8px}
.sv-svc{margin-top:12px}.sv-promise{font-size:16px;font-weight:800;color:#111;margin:2px 0 10px}
.sv-days{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}.sv-days>div{background:#fff3e8;border-radius:12px;padding:8px 10px;font-size:13px;line-height:1.45}.sv-days i{display:block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#a24a12;margin-bottom:2px}
.sv-ce:focus{background:#fff3b0!important;color:#111}
@media (max-width:760px){.sv-grid, .sv-days{grid-template-columns:1fr}}
#vSheet .bx-sec.s-build{background:#111;color:#f3efe6}#vSheet .bx-sec.s-build .bx-k, #vSheet .bx-sec.s-build .chint{color:#f3efe6!important}
.lab-doors{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lab-doors.one{grid-template-columns:minmax(0,560px)}
.lab-door{background:#fff;color:#111;border:1px solid #000;border-radius:18px;padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:transform .12s,box-shadow .12s}
.lab-door:hover{transform:translateY(-2px);box-shadow:0 6px 0 #ffd731}.lab-door b{font-size:17px;color:#111}.lab-door p{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:#333}.lab-door .btn{align-self:flex-start;margin-top:auto}
.ld-i{width:40px;height:40px;border-radius:12px;background:#ffd731;border:1px solid #000;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#111}
.lab-door:nth-child(2) .ld-i{background:#e9ccff}
.btn.lab-ccbtn{background:#ffd731!important;color:#111!important}
@media (max-width:760px){.lab-doors{grid-template-columns:1fr}}
/* the Claude Code panel: a drawer like the brief, paper in both themes */
#lab-kit{position:fixed;top:0;right:0;bottom:0;width:min(640px,96vw);z-index:370;background:#fff;color:#111;border-left:1.5px solid #000;box-shadow:-20px 0 60px rgba(0,0,0,.35);padding:18px 20px 28px;overflow-y:auto}
#lab-kit.hidden{display:none}
#lab-kit .chint{color:#111!important;opacity:.65}
.kit-lead{margin:0 0 14px;font-size:14px;line-height:1.55;color:#222}
.kit-step{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:14px 0;border-top:1px solid #e6e6e6}
.kit-n{width:28px;height:28px;border-radius:50%;background:#111;color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:13px}
.kit-sb>b{font-size:15px;color:#111}
.kit-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:10px;max-height:330px;overflow-y:auto;padding:2px 2px 4px}
.kit-look{border:1.5px solid #e2e2e2;border-radius:14px;padding:6px;cursor:pointer;background:#fff;transition:border-color .15s,transform .12s}.kit-look:hover{transform:translateY(-1px);border-color:#999}
.kit-look.on{border-color:#000;box-shadow:0 0 0 3px #ffd731}
.kl-v{aspect-ratio:9/16;border-radius:9px;background:#f1f1f1;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:26px;color:#777}.kl-v.w{aspect-ratio:16/10}.kl-v img{width:100%;height:100%;object-fit:cover;display:block}
.kit-look b{display:block;font-size:12px;margin-top:5px;color:#111;line-height:1.2}.kit-look span{display:block;font-size:10.5px;color:#777;line-height:1.25}
.kit-look.none .kl-v{background:repeating-linear-gradient(135deg,#fafafa 0 8px,#f0f0f0 8px 16px);aspect-ratio:auto;min-height:72px}
.kit-pick{margin-top:8px;line-height:1.45}.kit-sw i{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid #000;margin-right:3px;vertical-align:-2px}
.kit-files{list-style:none;margin:10px 0 0;padding:0;font-size:13px}.kit-files li{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:5px 0;border-top:1px dashed #eee}.kit-files li:first-child{border-top:0}
.kit-files code, .kit-how code, .kit-mcp code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:#f3f3f3;border-radius:6px;padding:1px 6px;color:#111}.kit-files span{color:#444}
.kit-wait{margin-top:10px}.kit-warn{margin-top:10px}.kit-warn span, .kit-alt span{text-decoration:underline;cursor:pointer;font-weight:700}
.kit-acts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.kit-how{margin:6px 0 12px;padding-left:20px;font-size:13.5px;line-height:1.8;color:#222}
.kit-mcp{background:#f5f0ff;border:1px solid #000;border-radius:14px;padding:12px 14px}.kit-mcp b{color:#111}.kit-mcp p{margin:4px 0 10px;font-size:13px;line-height:1.5;color:#333}.kit-mcp .btn{text-decoration:none;display:inline-block}
.kit-alt{margin-top:14px}
#lab-kit .err{color:#b42318;font-size:13px}
@media (max-width:560px){.kit-files li{grid-template-columns:1fr}}