:root{
  --paper:#F6F7F7; --card:#FFFFFF; --ink:#1A1D1E; --ink2:#566063; --ink3:#7E888B; --line:#E2E6E7; --line2:#EEF1F1;
  --accent:#B5532D; --accent-soft:#FBF2EB; --ok:#2F7A5E; --ok-soft:#EBF5F1; --wait:#8A5E0B; --wait-soft:#FBF6E9; --nib:#2F7A5E;
  --hl-a:#FBF0CF; --hl-b:#DDEFE7; --hl-c:#E9E5F7; --sheet:#FBF8F1; --lms:#2D3B45; --lms-ink:#FFFFFF;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Literata",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#17191A; --card:#1F2223; --ink:#ECEEEE; --ink2:#A7AFB1; --ink3:#838C8E; --line:#2F3435; --line2:#262A2B;
  --accent:#E08F66; --accent-soft:#2B2420; --ok:#7FBFA2; --ok-soft:#1D2A26; --wait:#D9B45C; --wait-soft:#2C2820; --nib:#7FBFA2;
  --hl-a:#4A401E; --hl-b:#1F3A31; --hl-c:#2F2B45; --sheet:#25231F; --lms:#11181D; --lms-ink:#ECEEEE; } }
:root[data-theme="dark"]{
  --paper:#17191A; --card:#1F2223; --ink:#ECEEEE; --ink2:#A7AFB1; --ink3:#838C8E; --line:#2F3435; --line2:#262A2B;
  --accent:#E08F66; --accent-soft:#2B2420; --ok:#7FBFA2; --ok-soft:#1D2A26; --wait:#D9B45C; --wait-soft:#2C2820; --nib:#7FBFA2;
  --hl-a:#4A401E; --hl-b:#1F3A31; --hl-c:#2F2B45; --sheet:#25231F; --lms:#11181D; --lms-ink:#ECEEEE; }

*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3,p{margin:0} mark{color:inherit;border-radius:2px;padding:1px 2px}
mark.a{background:var(--hl-a)} mark.b{background:var(--hl-b)} mark.c{background:var(--hl-c)}
u.nibmark{text-decoration:underline dotted var(--nib);text-decoration-thickness:1.5px;text-underline-offset:4px}
.tn{font-variant-numeric:tabular-nums}

/* shell */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100%}
.rail{background:var(--card);border-right:1px solid var(--line);padding:16px 12px 24px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto}
.brand{padding:2px 8px 14px;display:block} .brandrow{display:inline-flex;align-items:center;gap:8px} .wordmark{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1;color:var(--ink)} .ymark{flex:0 0 auto;display:block;color:var(--ink)} .lmsb .ymark{color:var(--lms-ink);--mark-ground:var(--lms)}
.newbtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-weight:600;font-size:13.5px;margin-bottom:10px;width:100%}
.newbtn:hover{border-color:var(--ink3)}
.ri{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;font-size:13.5px;color:var(--ink2);width:100%}
.ri:hover{background:var(--paper)} .ri.on{background:var(--paper);color:var(--ink);font-weight:600}
.ri .dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px} .ri .sq{width:9px;height:9px;border-radius:2px;flex:0 0 9px}
.ri .n{margin-left:auto;font-size:12px;color:var(--ink3)} .ri.kid{padding-left:26px;font-size:13px}
.rh{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);padding:16px 8px 5px}
.radd{font-size:12.5px;color:var(--ink3);padding:6px 8px;width:100%} .radd:hover{color:var(--ink)}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:10px;padding:10px 24px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.menub{display:none;border:1px solid var(--line);border-radius:7px;padding:5px 9px;font-size:13px}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink3);min-width:0;flex-wrap:wrap}
.crumbs button{color:var(--ink2)} .crumbs button:hover{color:var(--ink);text-decoration:underline} .crumbs b{color:var(--ink);font-weight:600}
.top .sp{flex:1 1 auto}
.search{border:1px solid var(--line);border-radius:8px;padding:6px 11px;font-size:13px;color:var(--ink3);background:var(--paper);display:flex;gap:18px;align-items:center}
.search kbd{font:inherit;font-size:11px;border:1px solid var(--line);border-radius:4px;padding:0 5px;background:var(--card)}
.av{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center;flex:0 0 30px}
.av.sm{width:22px;height:22px;font-size:10.5px;flex:0 0 22px}
.view{display:grid;grid-template-columns:minmax(0,1fr);flex:1 1 auto}
.view.hasnib{grid-template-columns:minmax(0,1fr) 336px}
.page{padding:32px 24px 72px;min-width:0} .page > .in{max-width:900px;margin:0 auto} .page.wide > .in{max-width:1120px}

/* type */
.h1{font-family:var(--serif);font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
.sub{font-size:13px;color:var(--ink3);margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.lk{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px} .lk:hover{text-decoration-color:var(--ink3);color:var(--ink)}
.prose{font-size:14px;line-height:1.65;color:var(--ink2);max-width:66ch}
.sec{margin-top:36px} .sec:first-child{margin-top:0}
.sh{display:flex;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:2px;flex-wrap:wrap}
.sh h2{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} .sh .c{font-size:12px;color:var(--ink3)}
.sh .r{margin-left:auto;font-size:12px;color:var(--ink3);display:flex;gap:4px;align-items:center}
.seg{display:flex;gap:2px} .seg button{font-size:12px;font-weight:600;color:var(--ink3);padding:3px 9px;border-radius:5px;border:1px solid transparent}
.seg button.on{background:var(--card);color:var(--ink);border-color:var(--line)} .seg button:hover{color:var(--ink)}

/* rows */
.row{display:flex;align-items:baseline;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line2);font-size:14px;width:100%}
button.row:hover,.row.click:hover{background:var(--card)}
.row .n{flex:0 0 18px;font-size:12px;color:var(--ink3)} .row .t{font-weight:500;color:var(--ink)} .row .m{flex:1 1 auto;font-size:12.5px;color:var(--ink3);min-width:0}
.row .w{font-size:12.5px;color:var(--ink3);white-space:nowrap;text-align:right}
.wk{padding:12px 10px;border-bottom:1px solid var(--line2)} .wk.now{background:var(--accent-soft);border-radius:8px;border-bottom-color:transparent}
.wk-m{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .wk-t{font-size:15px;font-weight:600;color:var(--ink)} button.wk-t:hover{text-decoration:underline;text-underline-offset:3px}
.wk-k{font-size:12px;color:var(--ink3)} .wk-m .st{margin-left:auto} .wk-d{font-size:12.5px;color:var(--ink3);flex:0 0 58px;text-align:right}
.wa{display:flex;align-items:baseline;gap:10px;margin:7px 0 0 14px;padding-left:12px;border-left:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.wa .a{flex:1 1 auto;min-width:0} .wa .b{font-size:12px;color:var(--ink3);white-space:nowrap}
.wa.th{border-left-color:var(--wait)} .wa.th .a:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--wait);margin-right:8px;vertical-align:1px}
.st{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.st.prog{color:var(--accent)} .st.wait{color:var(--wait)} .st.none{color:var(--ink3)} .st.done{color:var(--ok)}
.defs{display:grid;grid-template-columns:140px minmax(0,1fr);gap:0} .defs > *{padding:10px 4px;border-bottom:1px solid var(--line2);font-size:13.5px}
.defs dt{color:var(--ink3);font-size:12.5px} .defs dd{margin:0;color:var(--ink2);line-height:1.55}
.empty{border:1px dashed var(--line);border-radius:10px;padding:28px 20px;text-align:center;color:var(--ink3);font-size:13.5px;display:flex;flex-direction:column;gap:12px;align-items:center}

/* controls */
.btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:7px 13px;border-radius:7px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);white-space:nowrap}
.btn:hover{opacity:.88} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn.ghost:hover{border-color:var(--ink3);opacity:1}
.btn.sm{font-size:12px;padding:4px 10px;border-radius:6px} .btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;background:var(--card);white-space:nowrap}
.chip.lms{color:#3D5F8F;border-color:#C5D3E6;background:#EEF3FA} .chip.ag{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)} .chip.warn{color:var(--wait);border-color:var(--wait);background:var(--wait-soft)}
:root[data-theme="dark"] .chip.lms{color:#9DB8DE;border-color:#34455C;background:#1B2430}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.lms{color:#9DB8DE;border-color:#34455C;background:#1B2430}}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.tog{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:13px;color:var(--ink2);width:100%}
.tog:last-child{border-bottom:0} .tog .sw{margin-left:auto;width:30px;height:18px;border-radius:999px;background:var(--line);position:relative;flex:0 0 30px;transition:background .15s}
.tog .sw:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--card);transition:left .15s}
.tog[aria-pressed="true"] .sw{background:var(--ok)} .tog[aria-pressed="true"] .sw:after{left:14px}
.tog .v{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);width:24px;text-align:right}
@media (prefers-reduced-motion:reduce){.tog .sw,.tog .sw:after{transition:none}}
.banner{display:flex;gap:10px;align-items:baseline;font-size:12.5px;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 12px;margin-top:16px;flex-wrap:wrap}
.banner b{color:var(--ink)} .banner.private{border-style:dashed}

/* nib panel */
.nibp{border-left:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;min-width:0;position:sticky;top:51px;align-self:start;height:calc(100vh - 51px)}
.nib-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:13.5px}
.nib-h .orb{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 34% 32%,#F7DDB2,#D9A472 58%,#B5763F)} .nib-h .r{margin-left:auto;display:flex;gap:4px}
.nib-tabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--line)} .nib-tabs button{font-size:12.5px;font-weight:600;color:var(--ink3);padding:5px 9px 8px;border-bottom:2px solid transparent}
.nib-tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.nib-b{flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.turn{font-size:13px;line-height:1.55} .turn .who{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:3px;display:flex;gap:8px} .turn .who time{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none}
.turn.you p{background:var(--paper);border-radius:9px;padding:8px 11px} .turn.ref p{color:var(--ink2);border-left:2px solid var(--line);padding-left:10px}
.prop{border:1px dashed var(--nib);border-radius:9px;padding:10px 12px;font-size:13px;background:var(--ok-soft)}
.prop .pt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nib);margin-bottom:4px} .prop .pd{color:var(--ink);line-height:1.5}
.prop .pn{font-size:12.5px;color:var(--accent);margin-top:6px} .prop .pf{display:flex;gap:6px;align-items:center;margin-top:9px} .prop .ps{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-left:auto}
.prop.taken{border-style:solid} .prop.left{border-color:var(--line);background:transparent} .prop.left .pt{color:var(--ink3)}
.composer{margin:0 14px 14px;border:1px solid var(--line);border-radius:11px;padding:9px 11px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink3);background:var(--paper);width:calc(100% - 28px)}
.composer .plus{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:var(--card);flex:0 0 24px;color:var(--ink2)}
.tr{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:13px} .tr:last-child{border-bottom:0}
.tr .d{width:8px;height:8px;border-radius:50%;flex:0 0 8px;margin-top:6px} .tr .x{flex:1 1 auto;min-width:0} .tr b{display:block;font-weight:600;color:var(--ink)} .tr span{font-size:12.5px;color:var(--ink3)} .tr time{font-size:12px;color:var(--ink3);white-space:nowrap}

/* home */
.home{padding:64px 24px 72px} .home .in{max-width:760px;margin:0 auto}
.hello{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.02em;text-align:center;margin-bottom:22px}
.bigc{display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:13px 15px;font-size:15px;color:var(--ink3);width:100%}
.bigc:hover{border-color:var(--ink3)} .moves{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.move{font-size:13px;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px} .move:hover{border-color:var(--ink3);color:var(--ink)}
.rec{display:flex;gap:12px;padding:12px 8px;border-radius:9px;width:100%;align-items:flex-start} .rec:hover{background:var(--card)}
.rec .d{width:9px;height:9px;border-radius:50%;flex:0 0 9px;margin-top:7px} .rec .x{flex:1 1 auto;min-width:0} .rec b{display:block;font-size:15px;font-weight:600} .rec p{font-size:13px;color:var(--ink2)} .rec time{font-size:12.5px;color:var(--ink3);white-space:nowrap;margin-top:3px}

/* inbox, lists with a detail pane */
.split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0;min-height:calc(100vh - 51px)}
.split > .l{padding:24px;min-width:0} .split > .d{border-left:1px solid var(--line);background:var(--card);padding:24px;min-width:0}
.ib{display:flex;gap:12px;padding:12px;border-radius:10px;border:1px solid transparent;width:100%;align-items:flex-start} .ib:hover{background:var(--card)} .ib.on{background:var(--card);border-color:var(--line)}
.ib .x{flex:1 1 auto;min-width:0} .ib .ti{font-size:14.5px;font-weight:600} .ib .ex{font-size:13px;color:var(--ink2);margin:2px 0 6px} .ib time{font-size:12.5px;color:var(--ink3);white-space:nowrap} .ib.dim{opacity:.62}
.h2{font-family:var(--serif);font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em} .quote{font-family:var(--serif);font-size:15px;line-height:1.55;border-left:2px solid var(--line);padding-left:12px;margin:14px 0;color:var(--ink)}
.kv{display:flex;gap:10px;font-size:13px;color:var(--ink2);padding:8px 0;border-bottom:1px solid var(--line2)} .kv b{margin-left:auto;color:var(--ink);font-weight:600;text-align:right}

/* library + agents grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px;min-height:138px;width:100%} .tile:hover{border-color:var(--ink3)}
.tile .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)} .tile .t{font-size:14.5px;font-weight:600;line-height:1.35} .tile .c{font-size:12.5px;color:var(--ink2)}
.tile .f{margin-top:auto;padding-top:10px;border-top:1px solid var(--line2);font-size:12px;color:var(--ink3);display:flex;gap:10px} .tile .f em{font-style:normal;margin-left:auto}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}

/* surfaces */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px} .sheet{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:20px 22px;font-family:var(--serif);font-size:14px;line-height:1.6}
.sheet .hd{font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);display:flex;margin-bottom:12px} .sheet .hd span{margin-left:auto}
.q{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)} .q:last-child{border-bottom:0} .q .no{font-weight:700;flex:0 0 22px;color:var(--ink2)} .q.flag{background:var(--wait-soft);margin:0 -8px;padding:8px;border-radius:5px}
.ans{padding:12px 0;border-bottom:1px solid var(--line2)} .ans .al{display:flex;gap:8px;align-items:center;margin-bottom:4px;font-size:12px;color:var(--ink3);font-weight:700} .ans .al .chip{margin-left:auto}
.ans .at{font-family:var(--serif);font-size:15px} .ans .was{text-decoration:line-through;color:var(--ink3);margin-right:8px} .ans .fl{font-size:13px;color:var(--ink2);margin-top:8px;background:var(--wait-soft);border-radius:8px;padding:9px 11px}
.doc{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:26px 30px;font-family:var(--serif);font-size:15.5px;line-height:1.75;max-width:70ch} .doc p + p{margin-top:14px} .doc .anchor{background:var(--wait-soft);border-radius:3px}
.legend{display:flex;gap:16px;font-size:12.5px;color:var(--ink3);margin-top:12px;flex-wrap:wrap}
.tblw{overflow-x:auto;margin-top:6px} table.tb{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.tb th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap} .tb th.y{color:var(--accent)}
.tb td{padding:9px 10px;border-bottom:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.plot{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:6px} .plot svg{display:block;width:100%;height:auto} .plot text{fill:var(--ink3);font-family:var(--sans);font-size:12px}
.callout{border:1px solid var(--wait);background:var(--wait-soft);border-radius:10px;padding:14px 16px;margin-top:14px;font-size:14px;line-height:1.55} .callout .k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--wait);margin-bottom:6px}
.board{background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:20px 20px;border:1px solid var(--line);border-radius:10px;padding:18px;margin-top:6px}
.cl{font-size:13px;font-weight:700;color:var(--ink3);margin:18px 0 10px} .cl:first-child{margin-top:0} .objs{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.obj{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px 12px;width:210px;max-width:100%;font-size:13px;display:block} button.obj:hover{border-color:var(--ink3)}
.obj .ok{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px} .obj .ot{font-weight:600;line-height:1.4} .obj .om{font-size:12px;color:var(--ink3);margin-top:4px}
.obj.note{background:var(--wait-soft)} .obj.prop2{border:1px dashed var(--nib);background:var(--ok-soft)} .wave{display:flex;align-items:flex-end;gap:2px;height:22px;margin-top:8px} .wave i{flex:1;background:var(--ink3);opacity:.5;border-radius:1px}
.parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:8px} .part{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px 12px} .part.none{border-style:dashed}
.part b{display:block;font-size:14px} .part span{font-size:12.5px;color:var(--ink3);display:block;margin:2px 0 8px}
.step{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:14px;color:var(--ink2)} .step .no{flex:0 0 18px;font-size:12px;color:var(--ink3);padding-top:2px} .step em{font-style:normal;font-weight:600;color:var(--accent);display:block;font-size:13px}
.step.missed{color:var(--ink3)} .slot{border:1px dashed var(--line);border-radius:9px;padding:22px;text-align:center;color:var(--ink3);font-size:13.5px;margin-top:12px;display:flex;flex-direction:column;gap:10px;align-items:center}
.flip{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:40px 24px;text-align:center;font-family:var(--serif);font-size:20px;line-height:1.4;max-width:520px;margin:10px auto 0} .flip .bk{font-family:var(--sans);font-size:14px;color:var(--ink2);margin-top:18px;padding-top:18px;border-top:1px solid var(--line2)}
.bar{height:6px;border-radius:3px;background:var(--line);display:flex;overflow:hidden;margin:10px 0 6px} .bar i{display:block;height:100%}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:8px} .num{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px 13px} .num b{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em} .num span{font-size:12.5px;color:var(--ink3)}
.refl{margin-top:8px} .refl .rq{font-size:12.5px;font-weight:600;color:var(--ink3);margin-top:14px} .refl .ra{font-family:var(--serif);font-size:15px;line-height:1.6;margin-top:4px;border-left:2px solid var(--accent);padding-left:12px}
.crit{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-top:10px;background:var(--card)} .crit .ch{display:flex;gap:10px;align-items:baseline} .crit .ch b{font-size:14px} .crit .ch .pts{margin-left:auto;font-weight:700;font-size:14px;white-space:nowrap}
.crit .cd{font-size:12.5px;color:var(--ink3);margin-top:2px} .crit .nibsays{margin-top:10px;font-size:13px;line-height:1.55;color:var(--ink2);background:var(--ok-soft);border-radius:8px;padding:9px 11px} .crit .nibsays b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--nib);display:block;margin-bottom:3px}
.scale{display:flex;gap:4px;margin-top:10px} .scale button{width:34px;height:30px;border:1px solid var(--line);border-radius:6px;font-weight:600;font-size:13px;text-align:center} .scale button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* a session: the conversation is the work */
.sess{display:grid;grid-template-columns:228px minmax(0,1fr) 332px;min-height:calc(100vh - 51px)}
.sess-c{display:flex;flex-direction:column;min-width:0} .sess-in{padding:32px 24px 96px;max-width:820px;width:100%;margin:0 auto;flex:1 1 auto}
.sess-t{display:flex;flex-direction:column;gap:14px;margin-top:20px} .sess-t .turn{font-size:14.5px} .sess-t .turn.you p{padding:11px 14px;font-size:15px} .sess-t .prop{font-size:14px}
.sess-comp{position:sticky;bottom:16px;margin:0 auto 20px;width:min(772px,calc(100% - 48px));background:var(--card);padding:13px 15px;font-size:14.5px;box-shadow:0 0 0 14px var(--paper),0 10px 30px -18px rgba(0,0,0,.35)}
.sess-l{border-right:1px solid var(--line);padding:20px 12px;min-width:0} .thr{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:8px;width:100%;font-size:13.5px;color:var(--ink2);border:1px solid transparent} .thr:hover{background:var(--card)} .thr.on{background:var(--card);border-color:var(--line);color:var(--ink)} .thr b{font-weight:600;line-height:1.35} .thr span{font-size:12px;color:var(--ink3)}
.sess-r{border-left:1px solid var(--line);background:var(--card);padding:20px 18px 40px;min-width:0} .sess-r .sec{margin-top:26px} .sess-r .sec:first-child{margin-top:0}
.tog.locked{cursor:default;color:var(--ink3)} .tog.locked .v{color:var(--ink3);text-transform:none;letter-spacing:0;font-weight:500;font-size:12px}
/* a piece of work: the stream, and the file it acts on */
.lg{flex:0 0 auto;vertical-align:-2px} .lg.mono{display:inline-flex;align-items:center;justify-content:center;border-radius:4px;color:#fff;font-weight:700;line-height:1} .apps{display:inline-flex;gap:5px;align-items:center}
.wa .b{display:inline-flex;gap:6px;align-items:center}
.wsplit{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,36%,540px);min-height:calc(100vh - 51px)}
.stream{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)} .compbar{position:sticky;bottom:0;background:var(--paper);padding:10px 24px 18px;border-top:1px solid var(--line2)} .compbar .composer{margin:0 auto;width:100%;max-width:696px;background:var(--card);padding:12px 14px;font-size:14px}
.stream-in{padding:28px 32px 28px;flex:1 1 auto;max-width:760px;width:100%;margin:0 auto} .stream .h1{font-size:24px}
.feed{margin-top:26px;position:relative;padding-left:4px} .feed:before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1.5px;background:var(--line)}
.fi{position:relative;padding:0 0 22px 26px} .fdot{position:absolute;left:0;top:4px;width:10px;height:10px;border-radius:50%;background:var(--ink3);box-shadow:0 0 0 4px var(--paper)} .fdot.t{background:var(--nib)} .fdot.a{background:#4A6FA5} .fdot.g{background:var(--ink3)} .fdot.w{background:var(--wait)} .fdot.p{background:#C96A4B}
.fh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;width:100%;font-size:14px} .fh b{font-weight:600;color:var(--ink)} .fh span{font-size:12px;color:var(--ink3)} .fh time{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap} button.fh:hover b{text-decoration:underline;text-underline-offset:3px}
.fi.open .fh b{font-size:15px} .fsum{font-size:13px;color:var(--ink2);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fturns{display:flex;flex-direction:column;gap:12px;margin-top:12px} .fturns .turn{font-size:14px} .fb{margin-top:8px;border:1px solid var(--line);border-radius:9px;padding:2px 12px;background:var(--card)}
.pane{background:var(--card);padding:18px 18px 40px;min-width:0} .fwin{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.fbar{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--card);font-size:13px;flex-wrap:wrap} .fbar span{color:var(--ink3);font-size:12px} .fbar .sp{flex:1 1 auto}
.ftabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--line);background:var(--card);overflow-x:auto} .ftabs button{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--ink3);padding:5px 9px 7px;border-bottom:2px solid transparent;white-space:nowrap} .ftabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.fbody{padding:16px 16px 20px} .fbody .two{grid-template-columns:minmax(0,1fr);gap:0;margin-top:0!important} .fbody .doc{max-width:none;border:0;padding:6px 8px;background:transparent} .fbody .sec:first-child{margin-top:0} .fnote{font-size:12px;color:var(--ink3);margin-top:10px}
.final{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:12px;padding:18px 20px;border:1.5px solid var(--ink);border-radius:12px;background:var(--card)} .final:hover{box-shadow:0 12px 30px -20px rgba(0,0,0,.4)}
.fin-t{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.01em} .fin-m{display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--ink3);flex-wrap:wrap}
.fin-th{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding-top:12px;border-top:1px solid var(--line2);font-size:13.5px} .fin-th b{display:block;font-weight:600} .fin-th span span{font-size:12.5px;color:var(--ink3)} .fin-th .fdot{position:static;margin-top:5px;background:var(--nib);box-shadow:none;flex:0 0 10px} .fin-au{font-size:12.5px;color:var(--ink3)}
/* messages: quiet bubbles, small chips; colour lives on the rail */
.fi.open .fturns{position:relative;margin:12px 0 0 -21px;padding-left:21px;border-left:2px solid var(--nib)} .fi.open > .fdot.t{box-shadow:0 0 0 4px var(--paper),0 0 0 5.5px var(--nib)}
.mw{position:relative} .mw:before{content:"";position:absolute;left:-26px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--nib);box-shadow:0 0 0 3px var(--paper)}
.msg{border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:var(--card);font-size:14px;line-height:1.55;color:var(--ink)} .msg.you{background:transparent;border-color:var(--ink3)} .msg p{margin:0}
.mcs{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:6px 0 0 4px} .mcs time{margin-left:auto;font-size:11.5px;color:var(--ink3)}
.mc{display:inline-flex;align-items:center;font-size:11.5px;color:var(--ink3);border:1px solid var(--line);border-radius:999px;padding:1px 8px;background:var(--card)} button.mc:hover{border-color:var(--ink3);color:var(--ink)}
.mc.nib{color:var(--nib);border-color:transparent;background:var(--ok-soft);font-weight:600} .mc.no{color:var(--wait);border-color:var(--wait);background:var(--wait-soft)} .mc.ref{color:var(--ink2);font-variant-numeric:tabular-nums} .mc.act{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.chg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .chg li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 12px;font-size:13.5px} .chg b{font-weight:600;grid-column:1} .chg span{grid-column:1;color:var(--ink2)} .chg em{grid-column:2;grid-row:1;font-style:normal;font-size:11.5px;color:var(--ink3)} .chg em.taken{color:var(--ok)} .chg i{grid-column:1;font-style:normal;font-size:12.5px;color:var(--ink3)}
.mchoice{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
/* previews that look like what they are */
.gdoc{background:#fff;color:#1f1f1f;border:1px solid var(--line);border-radius:3px;padding:26px 26px 30px 42px;font-family:Arial,Helvetica,sans-serif;font-size:13.5px;line-height:1.7;max-width:640px;margin:0 auto;box-shadow:0 1px 3px rgba(0,0,0,.08)} .gdoc p{position:relative;margin:0 0 12px} .gdoc p.hl{background:#FFF3C4;box-shadow:-8px 0 0 #FFF3C4,8px 0 0 #FFF3C4} .gdoc .pn{position:absolute;left:-32px;top:2px;font-size:10px;color:#9aa0a6} .gdoc s{color:#9aa0a6} .gdoc .anchor{background:transparent}
.gsheet{border:1px solid var(--line);border-radius:3px;overflow-x:auto;background:#fff;color:#1f1f1f;font-family:Arial,Helvetica,sans-serif} .gsheet table{border-collapse:collapse;width:100%;font-size:12.5px} .gsheet th{background:#f1f3f4;color:#5f6368;font-weight:400;font-size:11px;padding:3px 8px;border:1px solid #dadce0;text-align:center} .gsheet td{padding:5px 9px;border:1px solid #e3e5e8;white-space:nowrap} .gsheet td.rn{background:#f1f3f4;color:#5f6368;font-size:11px;text-align:center;width:30px} .gsheet td.hd{font-weight:700} .gsheet td.hl{background:#FFF3C4}
.gtabs{display:flex;gap:2px;background:#f1f3f4;border-top:1px solid #dadce0;padding:0 8px} .gtabs span{font-size:12px;color:#5f6368;padding:6px 12px} .gtabs span.on{background:#fff;color:#188038;font-weight:700} .gtabs span.hl{background:#FFF3C4}
.figjam{background:#f5f5f5;background-image:radial-gradient(#d9d9d9 1px,transparent 1px);background-size:16px 16px;border:1px solid var(--line);border-radius:3px;padding:22px;display:flex;flex-direction:column;gap:22px}
.fsec{border:1.5px solid #c4b5fd;border-radius:6px;background:rgba(237,233,254,.45);padding:26px 14px 14px;position:relative} .fsec-t{position:absolute;top:-11px;left:10px;background:#8b5cf6;color:#fff;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:4px;font-family:Arial,sans-serif} .fsec-b{display:flex;flex-wrap:wrap;gap:12px}
.sticky{width:138px;min-height:120px;padding:11px 11px 8px;font-family:"Comic Sans MS","Marker Felt",Arial,sans-serif;font-size:12.5px;line-height:1.35;color:#1f1f1f;box-shadow:0 2px 5px rgba(0,0,0,.16);display:flex;flex-direction:column} .sticky p{margin:0;flex:1} .sticky span{font-family:Arial,sans-serif;font-size:10px;color:rgba(0,0,0,.5);margin-top:6px}
.sticky.y{background:#FFE066} .sticky.p{background:#FFB8D2} .sticky.g{background:#B9F0C4} .sticky.b{background:#A8D8FF} .fimg{width:170px;font-family:Arial,sans-serif;font-size:11px;color:#444} .fimg .ph{height:104px;background:linear-gradient(135deg,#cfd8dc,#eceff1);border:1px solid #b0bec5;margin-bottom:5px}
/* timeline */
.tl{margin-top:10px;overflow-x:auto} .tl-in{min-width:640px} .tl-h{display:grid;font-size:11.5px;color:var(--ink3);border-bottom:1px solid var(--line);padding:0 0 6px 200px} .tl-h div{border-left:1px solid var(--line2);padding-left:6px}
.tl-r{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;border-bottom:1px solid var(--line2);min-height:38px} .tl-r > button{font-size:13px;font-weight:500;padding-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tl-r > button:hover{text-decoration:underline}
.tl-t{position:relative;height:38px} .tl-b{position:absolute;top:12px;height:14px;border-radius:7px;min-width:14px} .tl-b.prog{background:var(--accent)} .tl-b.wait{background:var(--wait)} .tl-b.none{background:var(--line);border:1px solid var(--ink3)} .tl-b.done{background:var(--ok)}
.tl-now{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--accent)} .tl-end{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--ink)} .tl-end .tl-lab{top:auto;bottom:-20px} .tl-lab{position:absolute;top:-19px;font-size:11px;font-weight:700;white-space:nowrap;transform:translateX(-50%)}
.cols3{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:12px;margin-top:10px;overflow-x:auto} .col h3{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px} .col .obj{width:100%;margin-bottom:8px}

/* overlays */
.scrim{position:fixed;inset:0;background:rgba(10,14,15,.38);z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:9vh 16px 24px;overflow-y:auto}
.modal{background:var(--card);border:1px solid var(--line);border-radius:14px;width:560px;max-width:100%;box-shadow:0 30px 60px -28px rgba(0,0,0,.45);overflow:hidden}
.modal .mh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px} .modal .mh .x{margin-left:auto;color:var(--ink3);font-size:18px;line-height:1;padding:2px 6px}
.modal .mb{padding:14px 18px 18px} .modal .mf{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.opt{display:flex;gap:12px;align-items:center;padding:10px 8px;border-radius:8px;width:100%;font-size:14px} .opt:hover{background:var(--paper)} .opt .oi{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink2);flex:0 0 30px;background:var(--paper)}
.opt .ox{flex:1 1 auto;min-width:0} .opt .ox span{display:block;font-size:12.5px;color:var(--ink3)} .opt em{font-style:normal;font-size:12px;color:var(--ink3)}
.pal-q{padding:14px 18px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink3);display:flex;gap:8px;align-items:center} .pal-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:12px 18px 4px}
.pop{position:absolute;right:16px;top:48px;background:var(--card);border:1px solid var(--line);border-radius:12px;width:280px;box-shadow:0 22px 44px -22px rgba(0,0,0,.4);z-index:30;padding:8px}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:13px;font-weight:500;padding:9px 16px;border-radius:999px;z-index:60;max-width:calc(100% - 32px)}

/* phone capture + first run + LMS frame */
.stagec{display:flex;gap:40px;justify-content:center;align-items:flex-start;flex-wrap:wrap} .phone{width:300px;max-width:100%;border:9px solid var(--ink);border-radius:36px;background:var(--card);overflow:hidden;flex:0 0 auto}
.phone .scr{min-height:540px;display:flex;flex-direction:column} .phone .pt{padding:12px 16px;font-weight:700;font-size:14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px} .phone .pb{padding:14px 16px;flex:1 1 auto;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.shot{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:12px;font-family:var(--serif);font-size:12px;line-height:1.5;transform:rotate(-1deg)} .vf{background:#23282A;border-radius:10px;padding:18px;display:flex;align-items:center;justify-content:center;min-height:300px}
.stepsn{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap} .stepsn button{font-size:12.5px;font-weight:600;color:var(--ink3);padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card)} .stepsn button.on{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.lmsf{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)} .lmsb{background:var(--lms);color:var(--lms-ink);padding:10px 16px;display:flex;gap:12px;align-items:center;font-size:13px;flex-wrap:wrap} .lmsb b{font-size:14px} .lmsb .sp{flex:1 1 auto} .lmsb .ltag{font-size:11.5px;opacity:.8}
.lmsin{padding:24px} .tcols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px}

@media(max-width:1100px){ .wsplit{grid-template-columns:minmax(0,1fr)} .stream{border-right:0;border-bottom:1px solid var(--line)} .sess{grid-template-columns:minmax(0,1fr)} .sess-l{border-right:0;border-bottom:1px solid var(--line)} .sess-r{border-left:0;border-top:1px solid var(--line)} .view.hasnib{grid-template-columns:minmax(0,1fr)} .nibp{position:static;height:auto;border-left:0;border-top:1px solid var(--line)} .nib-b{max-height:none} .split{grid-template-columns:minmax(0,1fr)} .split > .d{border-left:0;border-top:1px solid var(--line)} }
@media(max-width:820px){ .app{grid-template-columns:minmax(0,1fr)} .rail{display:none;position:fixed;inset:0 auto 0 0;width:270px;z-index:50;height:100%;box-shadow:0 0 0 100vmax rgba(10,14,15,.38)} .app.open .rail{display:flex} .menub{display:block}
  .top{padding:10px 16px} .page,.home,.split > .l,.split > .d,.lmsin{padding-left:16px;padding-right:16px} .two,.tcols{grid-template-columns:minmax(0,1fr)} .parts{grid-template-columns:repeat(2,minmax(0,1fr))} .search span{display:none}
  .defs{grid-template-columns:minmax(0,1fr)} .defs dt{border-bottom:0;padding-bottom:0} .h1{font-size:24px} .hello{font-size:25px} .wk-m .st{margin-left:0} .wk-d{flex:0 0 auto;text-align:left} .wk-d:empty{display:none} .doc{padding:18px} }

/* the way in, and the pieces the live build adds on top of the prototype's styles */
.signin{min-height:100vh;display:grid;place-items:center;padding:40px 20px;background:var(--paper)}
.signin-in{width:100%;max-width:560px}
.signin .h1{margin:22px 0 10px;font-size:34px;line-height:1.15;letter-spacing:-.01em}
.signin .sub{font-size:14.5px;line-height:1.6;color:var(--ink2);max-width:52ch}
.signin .btns{margin-top:26px}
.pilot-note{margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink3)}
.pilot-note span{display:inline-flex;align-items:center;gap:6px}
.pilot{margin-top:26px;display:flex;flex-direction:column;gap:22px}
.pilot-h{display:flex;align-items:center;gap:8px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.pilot-h b{font-size:13.5px} .pilot-h span{font-size:12px;color:var(--ink3)}
.who-card{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;margin-top:8px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.who-card:hover{border-color:var(--ink3);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.who-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.who-card b{font-size:14.5px}
.who-x{display:flex;flex-direction:column;gap:2px;min-width:0}
.who-x span{font-size:12.5px;color:var(--ink3)}
.who-go{margin-left:auto;font-size:12.5px;color:var(--ink3);opacity:0;transition:opacity .12s}
.who-card:hover .who-go,.who-card:focus-visible .who-go{opacity:1}
.fine{font-size:12px;line-height:1.6;color:var(--ink3);max-width:52ch;margin:4px 0 0}
input.in,select.in,textarea.in{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;background:var(--card);color:var(--ink)}
label.l{display:block;font-size:12.5px;color:var(--ink3);margin:10px 0 4px}
.err{color:var(--wait);font-size:13px;margin-top:8px}