create-pmos 0.123.0 → 0.125.0

package/workspace/public/pm/console3.css

@@ -0,0 +1,1480 @@
+/* pm/console3.css — the console3 mockup's CSS for the Work, Briefing and Calendar views, lifted from
+ * prototype/pmos-console-handoff/mockups/console3.html (the <style> block, lines 5 to 966) by a generator that
+ *   1. prefixes every selector with `.c3` (a view's root carries class `c3`, so nothing here reaches another page),
+ *   2. turns the mockup's `.ph` phone class into `.c3.ph` (the view toggles it under 640px),
+ *   3. maps the mockup's colour variables to the D38 tokens: --bg background, --fg foreground, --mfg muted-foreground,
+ *      --ok success, --warn warning, --bad destructive, --opp purple, --acc accent; --card, --muted, --border, --ring,
+ *      --mono and --sans are the same names in tokens.css,
+ *   4. renames every @keyframes to c3-NAME (the sheet cannot collide with components.css),
+ *   5. leaves out what the three views do not draw: the shell, dock, sheets, palette, toast, banner, phone tray, and the
+ *      Initiatives, Reports and Release classes.
+ * Rules the mockup does not have are marked "console3.css addition" at the end of the file.
+ * White text on the blue accent and the alpha-mask colour read --on-accent and --mask from tokens.css; the scrim and shadow
+ * alphas stay as written. */
+.c3{
+  --fs-1:11px;--fs-2:12px;--fs-3:14px;--fs-4:16px;--fs-5:20px;--fs-6:28px;
+  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
+  --acc:oklch(0.623 0.214 259.815);--accw:oklch(0.623 0.214 259.815 / 18%);
+  --sh1:0 1px 2px oklch(0 0 0 / 40%);
+  --sh2:0 2px 6px oklch(0 0 0 / 35%),0 14px 32px oklch(0 0 0 / 45%);
+  --sh3:0 8px 20px oklch(0 0 0 / 45%),0 32px 70px oklch(0 0 0 / 55%);
+  --hi:inset 0 1px 0 oklch(1 0 0 / 7%);
+  color:var(--foreground);font:var(--fs-3)/1.5 var(--sans);container-type:inline-size;min-width:0;
+}
+[data-pm-theme="light"] .c3,html[data-pm-page-theme="light"] .c3{
+  --acc:oklch(0.488 0.243 264.376);--accw:oklch(0.488 0.243 264.376 / 12%);
+  --sh1:0 1px 2px oklch(0.2 0.02 250 / 7%),0 1px 1px oklch(0.2 0.02 250 / 4%);
+  --sh2:0 2px 4px oklch(0.2 0.02 250 / 6%),0 10px 24px oklch(0.2 0.02 250 / 9%);
+  --sh3:0 6px 16px oklch(0.2 0.02 250 / 12%),0 28px 64px oklch(0.2 0.02 250 / 18%);
+  --hi:inset 0 1px 0 oklch(1 0 0 / 70%);
+}
+.c3 b,.c3 strong{font-weight:600}
+.c3 h1,.c3 h2,.c3 h3{line-height:1.3;text-wrap:balance}
+.c3 [hidden]{display:none!important}
+.c3 button{font:inherit;color:inherit;cursor:pointer}
+.c3 button:focus-visible,.c3 input:focus-visible,.c3 select:focus-visible,.c3 textarea:focus-visible,.c3 summary:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+.c3 .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
+.c3 .ic.sm{width:14px;height:14px}
+.c3 .ic.lg{width:22px;height:22px}
+.c3 .dim{color:var(--muted-foreground)}
+.c3 .mono{font-family:var(--mono)}
+.c3 .ib{border:1px solid var(--border);background:var(--background);width:34px;height:34px;display:inline-grid;place-items:center;border-radius:8px;position:relative;color:var(--foreground);flex:none}
+.c3 .ib[aria-pressed="true"],.c3 .ib.on{background:var(--foreground);color:var(--background);border-color:var(--foreground)}
+.c3 .ib.pri{background:var(--foreground);color:var(--background);border-color:var(--foreground)}
+.c3 .ib.sm{width:30px;height:30px}
+.c3 .ib:disabled{opacity:.35;cursor:not-allowed}
+@media (hover:hover){
+.c3 .ib:hover{border-color:var(--ring)}
+.c3 .chip2.lk:hover,.c3 .tt:hover{color:var(--acc)}
+}
+.c3 .bdg{font:500 var(--fs-1) var(--mono);background:var(--acc);color:var(--on-accent);min-width:16px;height:16px;border-radius:8px;display:inline-grid;place-items:center;padding:0 4px}
+.c3 .bdg.g{background:var(--muted);color:var(--muted-foreground)}
+.c3 .seg{display:inline-flex;border:1px solid var(--border);padding:2px;gap:2px;background:var(--muted);border-radius:8px}
+.c3 .seg button{border:0;background:transparent;padding:4px 10px;display:flex;gap:6px;align-items:center;font:500 var(--fs-2) var(--mono);color:var(--muted-foreground);border-radius:6px}
+.c3 .seg button[aria-pressed="true"]{background:var(--background);color:var(--foreground);box-shadow:0 0 0 1px var(--border)}
+.c3 .card{border:1px solid var(--border);background:var(--card);padding:14px;display:grid;gap:10px;align-content:start;border-radius:8px}
+.c3 .card h3,.c3 .sh h2{margin:0;font:500 var(--fs-2) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;display:flex;gap:8px;align-items:center}
+.c3 .sh{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--foreground)}
+.c3 .sh .r{display:flex;gap:6px;align-items:center;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
+.c3 .sec{display:grid;gap:10px}
+.c3{display:grid;gap:16px;align-content:start}
+.c3 .g21{grid-template-columns:minmax(0,2fr) minmax(220px,1fr)}
+.c3.ph .g21{grid-template-columns:minmax(0,1fr)}
+.c3 .list{list-style:none;margin:0;padding:0;display:grid}
+.c3 .nrow,.c3 .drow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:10px 2px;border-bottom:1px solid var(--border);align-items:start;transition:opacity .18s,transform .18s,max-height .18s}
+.c3 .nrow.leave,.c3 .drow.leave,.c3 .row.leave{opacity:0;transform:translateX(24px)}
+.c3 .ki{width:30px;height:30px;border-radius:8px;background:var(--muted);display:grid;place-items:center;color:var(--muted-foreground)}
+.c3 .ki.hot{background:var(--accw);color:var(--acc)}
+.c3 .nb{min-width:0}
+.c3 .tt{border:0;background:transparent;padding:0;text-align:left;font-weight:500;color:var(--foreground);overflow-wrap:anywhere}
+.c3 .chips{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:4px;align-items:center}
+.c3 .chip2{display:inline-flex;gap:4px;align-items:center;font:var(--fs-2) var(--mono);color:var(--muted-foreground);border:0;background:transparent;padding:0}
+.c3 .chip2.lk{cursor:pointer}
+.c3 .tag{font:500 var(--fs-1) var(--mono);padding:1px 6px;background:var(--muted);color:var(--muted-foreground);border-radius:4px;white-space:nowrap}
+.c3 .fl{font:500 var(--fs-1) var(--mono);padding:1px 6px;border:1px solid var(--border);color:var(--muted-foreground);border-radius:4px}
+.c3 .fl.p1{color:var(--destructive);border-color:var(--destructive)}
+.c3 .fl.p2{color:var(--warning);border-color:var(--warning)}
+.c3 .fl.p3{color:var(--acc);border-color:var(--acc)}
+.c3 .why{font-size:var(--fs-3);color:var(--muted-foreground);margin-top:6px;animation:c3-fadein .2s}
+.c3 .acts{display:flex;gap:6px;align-items:center}
+.c3 .av{width:22px;height:22px;border-radius:50%;background:var(--muted);color:var(--foreground);border:1px solid var(--border);font:500 var(--fs-1) var(--mono);display:inline-grid;place-items:center;padding:0}
+@media (hover:hover){
+.c3 .av:hover{border-color:var(--acc);color:var(--acc)}
+}
+.c3 .av.lg{width:40px;height:40px;font-size:var(--fs-4)}
+.c3 .st{display:inline-flex;gap:4px;align-items:center;font:500 var(--fs-2) var(--mono)}
+.c3 .st.ok{color:var(--success)}
+.c3 .st.warn{color:var(--warning)}
+.c3 .st.bad{color:var(--destructive)}
+.c3 .st.acc{color:var(--acc)}
+.c3 .dotc{width:8px;height:8px;border-radius:50%;background:var(--ring);display:inline-block}
+.c3 .dotc.ok{background:var(--success)}
+.c3 .dotc.warn{background:var(--warning)}
+.c3 .dotc.bad{background:var(--destructive)}
+.c3 .dotc.acc{background:var(--acc)}
+.c3 .dotc.pulse{animation:c3-pulse 1.6s infinite}
+.c3 .fold{border:1px dashed var(--ring);padding:8px 12px;font:var(--fs-2) var(--mono);color:var(--muted-foreground);border-radius:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+.c3 .fold.w{border-color:var(--warning);color:var(--warning)}
+.c3 .fold.a{border-color:var(--acc);color:var(--acc)}
+.c3 .incident{border:1px solid var(--destructive);color:var(--destructive);padding:10px 14px;border-radius:8px;display:flex;gap:10px;align-items:center}
+.c3 .hero{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center}
+.c3 .hero b{font-size:var(--fs-5);font-weight:600;line-height:1.3}
+.c3 .hs{display:inline-flex;gap:6px;align-items:center;font:500 var(--fs-2) var(--mono)}
+.c3 .chips2{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
+.c3 .pill{border:1px solid var(--border);background:var(--background);padding:3px 10px;font:var(--fs-3) var(--sans);color:var(--muted-foreground);display:inline-flex;gap:6px;align-items:center;border-radius:16px}
+.c3 .pill[aria-pressed="true"]{background:var(--foreground);color:var(--background);border-color:var(--foreground)}
+.c3 .pill .c{font:var(--fs-1) var(--mono)}
+.c3 .tbl{width:100%;border-collapse:collapse;font-size:var(--fs-3)}
+.c3 .tbl th{font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:6px 8px 6px 0}
+.c3 .tbl td{padding:8px 8px 8px 0;border-top:1px solid var(--border);vertical-align:middle}
+.c3 .chart{width:100%;height:auto;display:block}
+.c3 .chart text{font:var(--fs-1) var(--mono);fill:var(--muted-foreground)}
+.c3 .chart .t{fill:var(--foreground)}
+.c3 .chart.sm{max-width:300px}
+.c3 .chart.md{max-width:920px}
+.c3.ph .chart.day text{font-size:var(--fs-5)}
+.c3.ph .chart.day .bl,.c3.ph .chart.day .fr{display:none}
+.c3 .chart .hit{fill:transparent;cursor:pointer}
+.c3 .grow{transform-origin:left center;transform-box:fill-box;animation:c3-grow .6s ease-out backwards}
+.c3 .pop{transform-origin:center;transform-box:fill-box;animation:c3-popin .4s .3s ease-out backwards}
+.c3 .growy{transform-origin:center bottom;transform-box:fill-box;animation:c3-growy .5s ease-out backwards}
+.c3 .ping{transform-origin:center;transform-box:fill-box;animation:c3-ping 1.8s ease-out infinite}
+.c3 .wave{display:flex;gap:3px;align-items:center;height:32px}
+.c3 .wave i{width:3px;background:var(--acc);border-radius:2px;height:8px;animation:c3-wave 1s ease-in-out infinite}
+.c3 .wave i:nth-child(2n){animation-delay:.2s}
+.c3 .wave i:nth-child(3n){animation-delay:.4s}
+.c3 .wave i:nth-child(5n){animation-delay:.6s}
+.c3 .term{font:var(--fs-2)/1.5 var(--mono);background:var(--muted);padding:8px 10px;min-height:96px;max-height:200px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:6px}
+.c3 .form{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
+.c3 input[type=text],.c3 select,.c3 textarea{font:inherit;font-size:var(--fs-3);padding:6px 8px;border:1px solid var(--border);background:var(--background);color:var(--foreground);min-width:0;border-radius:6px}
+.c3 .form input[type=text]{flex:1 1 140px}
+.c3 .q{border:1px solid var(--border);border-radius:8px;padding:10px;display:grid;gap:6px;align-content:start}
+.c3 .q h4{margin:0;font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;display:flex;gap:6px;align-items:center}
+.c3 .q .li{font-size:var(--fs-3);display:flex;gap:6px;align-items:center;justify-content:space-between}
+.c3 .view{animation:c3-fadein .25s}
+.c3.ph .tabs,.c3.ph .dock,.c3.ph .hide-ph{display:none!important}
+.c3.ph .bottombar{display:flex}
+.c3.ph .shell{grid-template-columns:minmax(0,1fr)}
+.c3.ph .grid{grid-template-columns:minmax(0,1fr)}
+.c3.ph .nrow,.c3.ph .drow{grid-template-columns:auto minmax(0,1fr)}
+.c3.ph .nrow .acts,.c3.ph .drow .acts{grid-column:2}
+.c3.ph .quad{grid-template-columns:minmax(0,1fr)}
+.c3.ph .top h1 .hide-ph{display:none}
+.c3 .show-ph{display:none}
+.c3.ph .show-ph{display:block}
+.c3 .cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
+.c3 .cal .dh{font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-align:center;padding:2px}
+.c3 .cd{border:1px solid var(--border);border-radius:8px;background:var(--background);min-height:78px;padding:6px;display:grid;align-content:space-between;gap:4px;text-align:left;position:relative;overflow:hidden}
+.c3 .cd .n{font:500 var(--fs-2) var(--mono)}
+.c3 .cd.out{opacity:.4}
+.c3 .cd.we{background:var(--muted)}
+.c3 .cd.today{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
+.c3 .cd .m{font-size:var(--fs-2);display:flex;gap:2px;flex-wrap:wrap;line-height:1}
+.c3 .cd .heat{position:absolute;left:0;right:0;bottom:0;background:var(--acc);opacity:.22;transition:height .4s}
+.c3.ph .cd{min-height:56px;padding:4px}
+.c3 .job{display:grid;gap:6px}
+.c3 .job .jl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;font-size:var(--fs-3);align-items:baseline}
+.c3 .job .jl b{font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em}
+.c3 .bul{font:500 var(--fs-4)/1 var(--mono);width:26px;height:26px;border:0;background:transparent;color:var(--foreground);display:grid;place-items:center;border-radius:6px;padding:0}
+@media (hover:hover){
+.c3 .bul:hover{background:var(--muted)}
+}
+.c3 .bul.dn{color:var(--muted-foreground)}
+.c3 .legend{display:flex;gap:6px 14px;flex-wrap:wrap;font:var(--fs-2) var(--mono);color:var(--muted-foreground);align-items:center}
+.c3.ph .cmp{grid-template-columns:minmax(0,1fr)}
+.c3 .rise{animation:c3-rise .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0)*38ms)}
+@keyframes c3-rise{from{opacity:0;transform:translateY(12px)}}
+.c3 .draw{stroke-dasharray:1;animation:c3-draw 1.1s cubic-bezier(.3,.6,.2,1) backwards}
+@keyframes c3-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
+.c3 .rg{animation:c3-ringin 1s cubic-bezier(.3,.6,.2,1) backwards}
+@keyframes c3-ringin{from{stroke-dasharray:0 999}}
+.c3 .st.ok .ic path{stroke-dasharray:30;animation:c3-tick .5s .15s ease-out backwards}
+@keyframes c3-tick{from{stroke-dashoffset:30}}
+.c3 .cd .heat{transform-origin:bottom;animation:c3-sy .7s ease-out backwards}
+@keyframes c3-sy{from{transform:scaleY(0)}}
+.c3 .pbar{height:8px;background:var(--muted);border-radius:4px;overflow:hidden;min-width:80px}
+.c3 .pbar i{display:block;height:100%;background:var(--acc);border-radius:4px;transform-origin:left;animation:c3-grow .8s cubic-bezier(.3,.6,.2,1) backwards}
+.c3.noanim .grow,.c3.noanim .growy,.c3.noanim .pop,.c3.noanim .rise,.c3.noanim .draw,.c3.noanim .rg,.c3.noanim .cd .heat,.c3.noanim .pbar i,.c3.noanim .st.ok .ic path{animation:none}
+.c3 .bump{animation:c3-bump .5s cubic-bezier(.3,1.6,.5,1)}
+@keyframes c3-bump{40%{transform:scale(1.5)}}
+@keyframes c3-toastin{from{opacity:0;transform:translate(-50%,18px) scale(.94)}}
+.c3 .dots{display:inline-flex;gap:3px;align-items:center}
+.c3 .dots i{width:5px;height:5px;border-radius:50%;background:var(--acc);animation:c3-dot 1.2s ease-in-out infinite}
+.c3 .dots i:nth-child(2){animation-delay:.15s}
+.c3 .dots i:nth-child(3){animation-delay:.3s}
+@keyframes c3-dot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
+.c3 #tabbtns{display:flex;gap:4px}
+.c3 .seg button{transition:background .2s,color .2s,box-shadow .2s}
+.c3 button.card,.c3 .ki,.c3 .ib,.c3 .pill{transition:transform .18s cubic-bezier(.3,.7,.2,1),box-shadow .2s,background .15s,border-color .15s,color .15s}
+@media (hover:hover){
+.c3 button.card:hover{transform:translateY(-2px);box-shadow:0 8px 22px oklch(0 0 0 / 8%)}
+.c3 .nrow:hover .ki{transform:scale(1.08)}
+.c3 .pill:hover{border-color:var(--ring)}
+}
+.c3 .ib:active,.c3 .pill:active,.c3 .chip2.lk:active{transform:scale(.93)}
+.c3 .nrow.leave,.c3 .drow.leave,.c3 .row.leave{opacity:0;transform:translateX(26px);max-height:0!important;padding-block:0!important;border-width:0}
+.c3 .lens .lbl{display:inline}
+.c3.ph .lens .lbl{display:none}
+.c3 .lvl{font:500 var(--fs-1) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);padding:6px 2px 0}
+.c3 .vz{padding:4px 0 0}
+.c3 .vz .chart{max-width:540px}
+.c3{container-type:inline-size}
+.c3 .brief{position:relative;isolation:isolate;display:grid;gap:16px}
+.c3 .brief::before{content:"";position:absolute;left:-24px;right:-24px;top:-28px;height:380px;background:radial-gradient(60% 100% at 12% 0%,var(--accw),transparent 70%);z-index:-1;pointer-events:none}
+.c3 .bcols{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:20px;align-items:start}
+.c3 .bcol{display:grid;gap:16px;min-width:0}
+.c3 .bcol.r{position:sticky;top:12px}
+@container (max-width:859px){
+.c3 .bcols{grid-template-columns:minmax(0,1fr)}
+.c3 .bcol{display:contents}
+.c3 .bcol.r{position:static}
+.c3 .o1{order:1}
+.c3 .o2{order:2}
+.c3 .o3{order:3}
+.c3 .o4{order:4}
+.c3 .o5{order:5}
+.c3 .o6{order:6}
+.c3 .o7{order:7}
+}
+.c3 .brief .card{box-shadow:var(--sh1),var(--hi);border-radius:12px}
+.c3 .brief .sect{padding:6px 16px 10px}
+.c3 .brief .sect .sh2{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0 8px;border-bottom:1px solid var(--border)}
+.c3 .brief .sect .sh2 h2{margin:0;font:500 var(--fs-2) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;display:flex;gap:8px;align-items:center}
+.c3 .brief .nrow,.c3 .brief .drow{border-radius:8px;transition:background .15s,opacity .2s,transform .2s,max-height .2s}
+@media (hover:hover){
+.c3 .brief .nrow:hover,.c3 .brief .drow:hover{background:color-mix(in oklab,var(--muted) 60%,transparent)}
+}
+.c3 .brief .card.glass{box-shadow:var(--sh2),var(--hi)}
+.c3 .glass{background:color-mix(in oklab,var(--card) 78%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:var(--sh2),var(--hi)}
+.c3 .gate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 22px;padding:18px 20px;border-radius:16px;border:1px solid color-mix(in oklab,var(--acc) 30%,var(--border));background:linear-gradient(125deg,var(--accw),transparent 58%),var(--card);box-shadow:var(--sh2),var(--hi);position:relative}
+.c3 .gate.done{background:linear-gradient(125deg,color-mix(in oklab,var(--success) 14%,transparent),transparent 58%),var(--card);border-color:color-mix(in oklab,var(--success) 32%,var(--border))}
+.c3 .gate h2{margin:0;font-size:var(--fs-5);line-height:1.3;font-weight:600;text-wrap:balance}
+.c3 .eyebrow{display:flex;gap:6px;align-items:center;font:500 var(--fs-1) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
+.c3 .gate.done .eyebrow{color:var(--success)}
+.c3 .gate .side{display:grid;justify-items:center;align-content:start;gap:2px;grid-row:1/span 3;grid-column:2}
+@container (max-width:520px){
+.c3 .gate{grid-template-columns:minmax(0,1fr)}
+.c3 .gate .side{grid-row:auto;grid-column:1;justify-items:start}
+}
+.c3 .flow{stroke-dasharray:4 5;animation:c3-flow 1.4s linear infinite}
+@keyframes c3-flow{to{stroke-dashoffset:-9}}
+.c3 .fuse{height:4px;border-radius:2px;background:var(--muted);overflow:hidden;width:150px;max-width:40%}
+.c3 .fuse i{display:block;height:100%;border-radius:2px;transform-origin:left;animation:c3-grow .9s cubic-bezier(.3,.6,.2,1) backwards}
+.c3.noanim .fuse i{animation:none}
+.c3 .xp{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s cubic-bezier(.2,.7,.2,1),opacity .25s}
+.c3 .xp.open{grid-template-rows:1fr;opacity:1}
+.c3 .xp>.xi{overflow:hidden;min-height:0}
+.c3 .chev{transition:transform .25s cubic-bezier(.3,.7,.2,1)}
+.c3 [aria-expanded="true"] .chev{transform:rotate(90deg)}
+.c3 .pbs{display:flex;gap:3px;height:12px;align-items:center}
+.c3 .pbs button{border:0;padding:0;height:10px;border-radius:5px;transition:flex .4s,transform .15s,opacity .2s}
+@media (hover:hover){
+.c3 .pbs button:hover{transform:scaleY(1.5)}
+}
+.c3 .prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;border:0;background:transparent;text-align:left;padding:8px 6px;border-radius:8px;transition:background .15s}
+@media (hover:hover){
+.c3 .prow:hover{background:color-mix(in oklab,var(--muted) 70%,transparent)}
+}
+.c3 .cmpill{border:1px solid var(--border);border-radius:16px;padding:2px 10px;font:var(--fs-2) var(--mono);white-space:nowrap}
+.c3 .cmpill.win{border-color:var(--acc);background:var(--accw)}
+.c3 .swap{animation:c3-swap .38s cubic-bezier(.2,.7,.2,1)}
+@keyframes c3-swap{from{opacity:0;transform:translateY(6px) scale(.99)}}
+@keyframes c3-wy{50%{outline-color:color-mix(in oklab,var(--acc) 30%,transparent)}}
+.c3.ph .whyp{display:none}
+.c3 .bcol.r{max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:4px;margin:-4px}
+.c3 .ribbon .chart{max-width:520px;margin-inline:auto}
+.c3 .vday{position:relative;height:361px;margin-top:2px;user-select:none}
+.c3 .vday .hr{position:absolute;left:0;right:0;border-top:1px solid var(--border);font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
+.c3 .vday .hr span{position:absolute;top:-7px;left:0;padding-right:5px;background:color-mix(in oklab,var(--card) 70%,transparent)}
+.c3 .vday .vb{position:absolute;left:44px;right:0;border:0;border-radius:8px;background:var(--acc);color:var(--on-accent);text-align:left;padding:4px 10px;font-size:var(--fs-2);line-height:1.3;overflow:hidden;box-shadow:var(--sh1);transition:transform .18s cubic-bezier(.3,.7,.2,1),box-shadow .18s;animation:c3-swap .5s cubic-bezier(.2,.7,.2,1) backwards}
+.c3 .vday .vb small{display:block;font:var(--fs-1) var(--mono);opacity:.88}
+.c3 .vday .vb.hot{background:var(--destructive)}
+@media (hover:hover){
+.c3 .vday .vb:hover{transform:translateX(3px);box-shadow:var(--sh2)}
+}
+.c3 .vday .vf{position:absolute;left:44px;right:0;border-radius:8px;background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in oklab,var(--muted) 90%,transparent) 6px 8px);display:grid;place-items:center;font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
+.c3 .vday .vnow{position:absolute;left:36px;right:0;height:0;border-top:2px solid var(--foreground);z-index:3}
+.c3 .vday .vnow::before,.c3 .vday .vnow::after{content:"";position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--foreground)}
+.c3 .vday .vnow::after{animation:c3-ping 1.8s ease-out infinite}
+.c3 .vday .vdl{position:absolute;left:44px;right:0;height:0;border-top:2px solid var(--destructive);z-index:2}
+.c3 .vday .vdl span{position:absolute;right:0;top:-18px;font:500 var(--fs-1) var(--mono);color:var(--destructive)}
+.c3 .vday .vsc{position:absolute;left:36px;right:0;height:0;border-top:1px solid color-mix(in oklab,var(--foreground) 45%,transparent);pointer-events:none;opacity:0;transition:opacity .15s;z-index:5}
+.c3 .vday .vsc span{position:absolute;right:0;top:-19px;background:var(--foreground);color:var(--background);font:var(--fs-1) var(--mono);padding:1px 7px;border-radius:5px;white-space:nowrap}
+.c3 .lbar{display:flex;gap:2px;height:10px;margin-top:6px}
+.c3 .lbar i{display:block;height:100%;border-radius:5px;transform-origin:left;animation:c3-grow .9s cubic-bezier(.3,.6,.2,1) backwards}
+.c3.noanim .vday .vb,.c3.noanim .lbar i{animation:none}
+.c3 .deck{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 10px 6px;margin:-10px -10px -2px;scrollbar-width:none;overscroll-behavior-x:contain}
+.c3 .deck::-webkit-scrollbar{display:none}
+.c3 .fc{flex:0 0 min(94%,700px);scroll-snap-align:start;min-height:244px;border-radius:16px;padding:16px 20px 14px;border:1px solid var(--border);background:var(--card);box-shadow:var(--sh1),var(--hi);position:relative;display:grid;align-content:space-between;gap:8px;transform:scale(.965);opacity:.72;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .4s,box-shadow .25s;cursor:pointer;outline:none}
+.c3 .fc.on{transform:none;opacity:1;box-shadow:var(--sh2),var(--hi)}
+.c3 .fc:focus-visible{box-shadow:0 0 0 2px var(--ring),var(--sh2)}
+@media (hover:hover){
+.c3 .fc.on:hover{transform:translateY(-2px);box-shadow:var(--sh3),var(--hi)}
+}
+.c3 .fc.k-decision{background:linear-gradient(125deg,var(--accw),transparent 58%),var(--card);border-color:color-mix(in oklab,var(--acc) 30%,var(--border))}
+.c3 .fc.k-decision.ok{background:linear-gradient(125deg,color-mix(in oklab,var(--success) 14%,transparent),transparent 58%),var(--card);border-color:color-mix(in oklab,var(--success) 30%,var(--border))}
+.c3 .fc h2{margin:6px 0 0;font-size:var(--fs-5);line-height:1.3;font-weight:600;text-wrap:balance}
+.c3 .fc .go{position:absolute;right:16px;bottom:12px;font-size:var(--fs-1);color:var(--muted-foreground);display:flex;gap:2px;align-items:center;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
+@media (hover:hover){
+.c3 .fc.on:hover .go{opacity:1;transform:none}
+}
+.c3 .dk{display:flex;gap:6px;justify-content:center;align-items:center}
+.c3 .dkd{width:7px;height:7px;border-radius:4px;border:0;background:var(--ring);padding:0;opacity:.5;transition:width .35s cubic-bezier(.3,.7,.2,1),background .3s,opacity .3s}
+.c3 .dkd[aria-current="true"]{width:26px;background:var(--acc);opacity:1}
+.c3 .brief .nrow,.c3 .brief .drow{position:relative;touch-action:pan-y;grid-template-columns:auto minmax(0,1fr) auto;cursor:pointer}
+.c3 .brief .nrow{grid-template-columns:auto minmax(0,1fr)}
+.c3 .brief .qa{position:absolute;right:4px;top:6px;display:flex;gap:6px;padding:4px 4px 4px 26px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--card) 96%,transparent) 26%);opacity:0;transform:translateX(8px);transition:opacity .18s,transform .18s;pointer-events:none;z-index:2}
+.c3 .brief .nrow:hover .qa,.c3 .brief .nrow:focus-within .qa,.c3 .brief .nrow:focus .qa,.c3 .brief .drow:hover .qa,.c3 .brief .drow:focus .qa,.c3 .brief .hrow:hover .qa{opacity:1;transform:none;pointer-events:auto}
+@media (hover:none){
+.c3 .brief .qa{position:static;opacity:1;transform:none;pointer-events:auto;background:none;grid-column:2;padding:0}
+}
+.c3 .brief .nrow:focus-visible,.c3 .brief .drow:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
+.c3 .brief .nrow.swr{background:color-mix(in oklab,var(--success) 16%,transparent)}
+.c3 .brief .nrow.swl{background:color-mix(in oklab,var(--warning) 16%,transparent)}
+.c3 .rowbtn{display:flex;width:100%;justify-content:space-between;align-items:center;border:0;background:transparent;padding:12px 0;text-align:left}
+.c3 .hrow.undone .nb{text-decoration:line-through;color:var(--muted-foreground)}
+.c3 .dotb{border:0;background:transparent;padding:3px;display:inline-flex}
+.c3 .dotb .dotc{width:10px;height:10px}
+.c3 .dotp{width:10px;height:10px;border-radius:50%;border:1.5px dashed var(--ring);display:inline-block;margin:3px}
+.c3 .yc{display:grid;place-items:center;height:26px;border-radius:6px;font:500 var(--fs-1) var(--mono)}
+.c3 .yc.c1{background:var(--acc);color:var(--on-accent)}
+.c3 .yc.c2{background:var(--accw);color:var(--acc)}
+.c3 .yc.c3{border:1px solid var(--ring);color:var(--muted-foreground)}
+.c3 .yc.c4{border:1px dashed var(--ring);color:var(--muted-foreground)}
+.c3 .deck{align-items:flex-start}
+.c3 .fc{--tc:var(--acc);will-change:transform}
+.c3 .fc[data-tag]{background:linear-gradient(125deg,color-mix(in oklab,var(--tc) 11%,transparent),transparent 58%),var(--card);border-color:color-mix(in oklab,var(--tc) 26%,var(--border))}
+.c3 .fc.on{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
+@media (hover:hover){
+.c3 .fc.on:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px);transition:transform .12s ease-out,opacity .4s,box-shadow .25s}
+}
+.c3 .fc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px 170px at var(--mx,50%) var(--my,0%),color-mix(in oklab,var(--foreground) 7%,transparent),transparent 70%);opacity:0;transition:opacity .25s}
+.c3 .fc.on:hover::after{opacity:1}
+.c3 .fc .ff{display:grid;gap:8px;align-content:space-between;min-height:212px}
+.c3 .fc .fb{display:none}
+.c3 .fc.back .ff{display:none}
+.c3 .fc.back .fb{display:grid;gap:12px}
+.c3 .fc.back{min-height:0;cursor:default;align-content:start}
+.c3 .fc.fl-out{animation:c3-flout .17s ease-in forwards}
+.c3 .fc.fl-in{animation:c3-flin .3s cubic-bezier(.2,.8,.2,1)}
+@keyframes c3-flout{to{transform:perspective(900px) rotateY(88deg);opacity:.6}}
+@keyframes c3-flin{from{transform:perspective(900px) rotateY(-88deg);opacity:.6}}
+.c3 .fc[data-tag=critical].on:not(.back):not(.ok)::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--tc);pointer-events:none;animation:c3-cpulse 3s ease-out infinite}
+@keyframes c3-cpulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.02)}}
+.c3 .tg{display:inline-flex;gap:5px;align-items:center;font:500 var(--fs-1) var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 9px 2px 7px;border-radius:999px;color:var(--tc);background:color-mix(in oklab,var(--tc) 13%,transparent)}
+.c3 .tg.f{background:var(--tc);color:var(--background)}
+.c3 .tg .ic{width:14px;height:14px}
+.c3 .fc .flipg{position:absolute;right:16px;top:14px;color:var(--muted-foreground);opacity:.35;transition:opacity .2s,transform .4s}
+@media (hover:hover){
+.c3 .fc.on:hover .flipg{opacity:.9;transform:rotate(-90deg)}
+}
+.c3 .fc.back .flipg{display:none}
+.c3 .rsv{position:absolute;right:14px;top:12px;display:flex;gap:5px;align-items:center;font:500 var(--fs-1) var(--mono);color:var(--success)}
+.c3 .fh{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer}
+.c3 .fh .why2{font-size:var(--fs-2);color:var(--muted-foreground);display:flex;gap:5px;align-items:center}
+.c3 .case{display:grid;gap:10px;cursor:default}
+.c3 .case .sit{margin:0;font-size:var(--fs-3);line-height:1.45;font-weight:500;text-wrap:pretty}
+.c3 .chgl{list-style:none;margin:0;padding:0;display:grid;gap:6px}
+.c3 .chgl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:var(--fs-3)}
+.c3 .chgl li>.ic{color:var(--muted-foreground)}
+.c3 .chgl li.ok>.ic{color:var(--success)}
+.c3 .chgl li.warn>.ic{color:var(--warning)}
+.c3 .chgl li.bad>.ic{color:var(--destructive)}
+.c3 .chgl .tag{justify-self:end}
+.c3 .opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:stretch}
+.c3 .opt{--tc:var(--acc);text-align:left;border:1px solid var(--border);background:var(--card);border-radius:12px;padding:10px 12px;display:grid;gap:7px;align-content:start;opacity:.74;transition:transform .2s,box-shadow .2s,opacity .2s,border-color .2s;position:relative}
+.c3 .opt.rec{border-color:color-mix(in oklab,var(--tc) 55%,var(--border));box-shadow:var(--sh2),0 0 0 3px color-mix(in oklab,var(--tc) 10%,transparent);opacity:1;background:linear-gradient(160deg,color-mix(in oklab,var(--tc) 9%,transparent),transparent 60%),var(--card)}
+.c3 .opt[aria-pressed=true]{opacity:1;border-color:var(--tc);outline:2px solid color-mix(in oklab,var(--tc) 38%,transparent);outline-offset:1px}
+.c3 .opt:not(.rec)[aria-pressed=false]{filter:saturate(.7)}
+@media (hover:hover){
+.c3 .opt:hover{transform:translateY(-2px);opacity:1}
+}
+.c3 .opt .rk{display:inline-flex;gap:4px;align-items:center;font:500 var(--fs-1) var(--mono);color:var(--tc)}
+.c3 .opt .rk:empty{display:none}
+.c3 .opt .rk,.c3 .opt b{padding-right:24px}
+.c3 .opt b{font-size:var(--fs-3);font-weight:600;line-height:1.3}
+.c3 .opt .fx{display:grid;gap:3px;font-size:var(--fs-2);color:var(--muted-foreground)}
+.c3 .opt .fx span{display:flex;gap:6px;align-items:center}
+.c3 .opt .fx .ok{color:var(--success)}
+.c3 .opt .fx .warn{color:var(--warning)}
+.c3 .opt .fx .bad{color:var(--destructive)}
+.c3 .opt .pk{position:absolute;right:10px;top:10px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ring);display:grid;place-items:center;color:var(--background)}
+.c3 .opt[aria-pressed=true] .pk{background:var(--tc);border-color:var(--tc)}
+.c3 .opt .pk .ic{width:11px;height:11px;stroke-width:3;opacity:0}
+.c3 .opt[aria-pressed=true] .pk .ic{opacity:1}
+.c3 .conf{height:3px;border-radius:2px;background:var(--muted);overflow:hidden}
+.c3 .conf i{display:block;height:100%;background:var(--tc);transform-origin:left;animation:c3-grow .8s backwards}
+.c3 .slt{--p:0;position:relative;height:44px;border-radius:22px;background:var(--muted);border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;user-select:none;touch-action:none}
+.c3 .slt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--p)*100%);background:color-mix(in oklab,var(--tc) 30%,transparent)}
+.c3 .slt .lb{position:relative;font:500 var(--fs-2) var(--mono);letter-spacing:.04em;opacity:calc(1 - var(--p)*1.5);background:linear-gradient(90deg,var(--muted-foreground) 38%,var(--foreground) 50%,var(--muted-foreground) 62%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:c3-shim 2.6s linear infinite}
+@keyframes c3-shim{from{background-position:120% 0}to{background-position:-120% 0}}
+.c3 .slt .th{position:absolute;left:3px;top:3px;width:36px;height:36px;border-radius:50%;border:0;background:var(--tc);color:var(--background);display:grid;place-items:center;box-shadow:var(--sh2);cursor:grab;transition:transform .3s cubic-bezier(.3,1.4,.5,1);animation:c3-thint 4.5s ease-in-out 1.2s infinite;touch-action:none}
+.c3 .slt .th:active{cursor:grabbing;animation:none}
+.c3 .slt .th.nd{animation:c3-nudge .8s}
+@keyframes c3-thint{0%,84%,100%{transform:none}92%{transform:translateX(12px)}}
+@keyframes c3-nudge{30%{transform:translateX(18px)}60%{transform:translateX(4px)}}
+.c3 .slt.alt{--tc:var(--muted-foreground)}
+.c3 .cft{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:var(--fs-2);color:var(--muted-foreground)}
+.c3 .cft span{display:inline-flex;gap:5px;align-items:center}
+.c3 .cft .cm{display:inline-flex;gap:6px;align-items:center}
+.c3 .cft .cm .conf{width:56px}
+.c3 .qd{border-left:2px solid var(--ring);padding:2px 0 2px 10px;font-size:var(--fs-3);white-space:pre-wrap;margin:0}
+.c3 .fun{display:grid;gap:4px}
+.c3 .fun div{display:grid;grid-template-columns:62px 1fr 34px;gap:8px;align-items:center;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .fun i{display:block;height:8px;border-radius:4px;background:var(--ring);transform-origin:left;animation:c3-grow .7s backwards}
+.c3 .fun .hot i{background:var(--destructive)}
+.c3 .fun .hot{color:var(--destructive)}
+.c3 .brief .nrow .nb,.c3 .brief .drow .nb{padding-right:52px}
+.c3 .sg{position:absolute;right:30px;top:12px;display:flex;gap:7px;align-items:center;pointer-events:none}
+.c3 .nrow .sg{right:8px}
+.c3 .sg .g{display:inline-flex;opacity:.2;transition:opacity .2s}
+.c3 .sg .g .ic{width:15px;height:15px}
+.c3 .sg .g.y{opacity:.95;color:var(--acc)}
+.c3 .sg .g.y.l{animation:c3-sgl 3.2s ease-in-out infinite}
+.c3 .sg .g.y.r{animation:c3-sgr 3.2s ease-in-out infinite}
+@keyframes c3-sgl{0%,70%,100%{transform:none}82%{transform:translateX(-3px)}}
+@keyframes c3-sgr{0%,70%,100%{transform:none}82%{transform:translateX(3px)}}
+@media (hover:hover){
+.c3 .nrow:hover .sg .g,.c3 .drow:hover .sg .g{opacity:.55}
+.c3 .nrow:hover .sg .g.y,.c3 .drow:hover .sg .g.y{opacity:1}
+}
+.c3 .brief .nrow>*:not(.rv):not(.xp):not(.sg),.c3 .brief .drow>*:not(.rv):not(.xp):not(.sg){transform:translateX(calc(var(--dx,0px)*.55))}
+.c3 .brief .nrow.dr,.c3 .brief .drow.dr{transition:none;cursor:grabbing}
+.c3 .rv{position:absolute;top:50%;translate:0 -50%;opacity:var(--d,0);pointer-events:none}
+.c3 .rv.l{left:10px;color:var(--warning)}
+.c3 .rv.r{right:10px;color:var(--success)}
+.c3 .brief .nrow.swr,.c3 .brief .drow.swr{background:color-mix(in oklab,var(--success) 15%,transparent)}
+.c3 .brief .nrow.swl,.c3 .brief .drow.swl{background:color-mix(in oklab,var(--warning) 15%,transparent)}
+.c3 .stance{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:0 2px 8px}
+.c3 .stance>div:nth-child(2){flex:1;min-width:0;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
+.c3 .stance b{font-size:var(--fs-3)}
+.c3 .stance .dim{font-size:var(--fs-3)}
+.c3 .dp button{padding:4px 8px}
+.c3 .lens{display:flex;align-items:center;gap:6px;max-width:100%}
+.c3 .lens .seg{overflow-x:auto;min-width:0}
+.c3 .lh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:2px 0 6px}
+.c3 .lh b{font-size:var(--fs-3);line-height:1.3;display:block;text-wrap:balance}
+.c3 .lh .dim{font-size:var(--fs-2);line-height:1.35}
+.c3 .rpane.zi{animation:c3-zin .38s cubic-bezier(.2,.8,.2,1)}
+.c3 .rpane.zo{animation:c3-zout .38s cubic-bezier(.2,.8,.2,1)}
+@keyframes c3-zin{from{opacity:0;transform:scale(1.07)}}
+@keyframes c3-zout{from{opacity:0;transform:scale(.93)}}
+.c3 .rdet{display:grid;gap:6px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card);box-shadow:var(--sh1);margin-top:8px;animation:c3-fadein .25s}
+.c3 .rdet .rr{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-3)}
+.c3 .rdet .rr .ic{margin-top:2px;color:var(--muted-foreground)}
+.c3 .vday .vb.rt{background:var(--muted);color:var(--muted-foreground);box-shadow:none}
+.c3 .vday .vb.sel{outline:2px solid var(--foreground);outline-offset:1px}
+.c3 .brief .nrow>*:not(.rv):not(.xp):not(.sg),.c3 .brief .drow>*:not(.rv):not(.xp):not(.sg){transition:transform .28s cubic-bezier(.3,1.3,.5,1)}
+.c3 .brief .nrow.dr>*,.c3 .brief .drow.dr>*{transition:none}
+.c3 .brief .dr{user-select:none}
+.c3 .deck{scroll-padding-inline:10px;-webkit-mask-image:linear-gradient(90deg,var(--mask) calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,var(--mask) calc(100% - 22px),transparent)}
+.c3 .brief .list{margin-inline:-8px}
+.c3 .brief .nrow,.c3 .brief .drow{padding-inline:8px}
+.c3 .brief .sect{padding-bottom:10px}
+.c3 .stance{padding:0 2px 10px}
+.c3 .ib{position:relative}
+@keyframes c3-bdn{from{transform:translateY(-70px);opacity:0}}
+.c3.ph .grab{display:block}
+@keyframes c3-slideup{from{transform:translateY(60px);opacity:0}}
+@keyframes c3-eqb{0%,100%{height:4px}50%{height:15px}}
+.c3 .sbb::before{display:none}
+.c3.ph .drow>.acts:has(.chev){display:none}
+.c3 .tick{overflow:hidden;border:1px solid var(--border);border-radius:8px;background:var(--card);padding:7px 0;box-shadow:var(--sh1);cursor:pointer;-webkit-mask-image:linear-gradient(90deg,transparent,var(--mask) 14px,var(--mask) calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,var(--mask) 14px,var(--mask) calc(100% - 14px),transparent)}
+.c3 .tkt{display:inline-flex;white-space:nowrap;animation:c3-tk 38s linear infinite;will-change:transform}
+.c3 .tick:active .tkt,.c3 .tick:hover .tkt{animation-play-state:paused}
+@keyframes c3-tk{to{transform:translateX(-50%)}}
+.c3 .tki{display:inline-flex;gap:6px;align-items:center;padding-right:30px;font-size:var(--fs-3)}
+.c3 .tki b{font:500 var(--fs-1) var(--mono);letter-spacing:.06em;text-transform:uppercase}
+.c3.ph .lens .seg button{padding:4px 7px}
+.c3 .bs .sb .ribbon{width:100%}
+.c3 .calbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
+.c3 .calbody{display:grid;gap:12px;min-width:0}
+.c3 .calbody.zi{animation:c3-zin .38s cubic-bezier(.2,.8,.2,1)}
+.c3 .calbody.zo{animation:c3-zout .38s cubic-bezier(.2,.8,.2,1)}
+.c3 .calbody.sn{animation:c3-slnext .3s cubic-bezier(.2,.8,.2,1)}
+.c3 .calbody.sp{animation:c3-slprev .3s cubic-bezier(.2,.8,.2,1)}
+@keyframes c3-slnext{from{opacity:0;transform:translateX(28px)}}
+@keyframes c3-slprev{from{opacity:0;transform:translateX(-28px)}}
+.c3 .fc.solo{flex:none;width:100%;scroll-snap-align:none;opacity:1}
+.c3 .fc.solo .ff{min-height:0;gap:14px}
+.c3 .fc.solo .fcm{align-items:flex-start}
+.c3 .stg{display:flex;gap:6px}
+.c3 .sgb{border:1px solid var(--border);background:var(--card);border-radius:10px;padding:4px 8px;display:flex;gap:6px;align-items:center;font:500 var(--fs-2) var(--mono);color:var(--muted-foreground);transition:background .2s,border-color .2s}
+.c3 .sgb svg.ic{width:16px;height:16px}
+.c3 .sgb[aria-pressed="true"]{background:var(--accw);border-color:var(--acc);color:var(--foreground)}
+.c3 .vday .vb.past{opacity:.45}
+.c3 .vday .vb.skip{background:repeating-linear-gradient(135deg,var(--muted) 0 6px,transparent 6px 12px);color:var(--muted-foreground);text-decoration:line-through;box-shadow:none;outline:1px dashed var(--ring)}
+.c3 .cmain{display:flex;flex-direction:column;gap:8px;min-height:0}
+.c3 .pdots{display:flex;gap:6px;flex-wrap:wrap}
+.c3 .pdots i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px dashed var(--ring);color:var(--muted-foreground)}
+.c3 .pdots i.d{border:0;background:color-mix(in oklab,var(--success) 16%,transparent);color:var(--success)}
+.c3 .pdots .ic{width:14px;height:14px}
+.c3 .dstrip{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:6px 8px 2px;box-shadow:var(--sh1)}
+.c3 .dstrip .hit{fill:transparent;cursor:pointer}
+.c3 .card{padding:var(--sp-4);gap:var(--sp-3)}
+.c3 .fc{padding:var(--sp-4)}
+.c3 .brief .sect{padding:var(--sp-1) var(--sp-4) var(--sp-3)}
+.c3 .brief .sect .sh2{padding:var(--sp-3) 0 var(--sp-2)}
+.c3 .brief .list{margin-inline:calc(var(--sp-2)*-1)}
+.c3 .brief .nrow,.c3 .brief .drow{padding:var(--sp-3) var(--sp-2)}
+.c3 .brief .sect .list{margin-top:var(--sp-1)}
+.c3 .bcol,.c3 .bcols{gap:var(--sp-4)}
+.c3 .calwrap{display:grid;gap:var(--sp-4)}
+.c3 .calbar{margin:0}
+.c3 .calbody{gap:var(--sp-4)}
+.c3 .lh,.c3 .stance{padding:0}
+.c3 .case{gap:var(--sp-3)}
+.c3 .chgl{gap:var(--sp-2)}
+.c3 .opts{gap:var(--sp-3)}
+.c3 .rdet{padding:var(--sp-3);margin-top:var(--sp-2)}
+.c3.ph .brief .list{margin-inline:calc(var(--sp-2)*-1)}
+.c3 .tdy{display:inline-flex;gap:6px;align-items:center;font:500 var(--fs-2) var(--mono);border:1px solid var(--border);background:var(--muted);color:var(--muted-foreground);border-radius:999px;padding:4px 12px;min-height:32px}
+.c3 .tdy.on{background:var(--acc);border-color:var(--acc);color:var(--on-accent);cursor:pointer;animation:c3-tdyin .4s cubic-bezier(.3,1.4,.5,1);box-shadow:var(--sh2)}
+.c3 .tdy:not(.on){opacity:.7;cursor:default}
+.c3 .tdy .ic{width:14px;height:14px}
+@keyframes c3-tdyin{from{transform:scale(.85);opacity:0}}
+.c3 .sfc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--sp-5);align-items:start}
+.c3 .sfh{display:flex;gap:8px;align-items:center;font:500 var(--fs-2) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-3)}
+.c3 .sfr{display:flex;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-3)}
+.c3 .stt{display:grid;justify-items:center;gap:0;padding:6px 2px;border-radius:10px;background:color-mix(in oklab,var(--c) 10%,transparent);color:var(--c)}
+.c3 .stt b{font:600 var(--fs-4)/1.2 var(--mono)}
+.c3 .stt i{font:500 var(--fs-1) var(--mono);font-style:normal;color:var(--muted-foreground);letter-spacing:.02em}
+.c3 .fcl{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);border:0;font:inherit;color:inherit}
+.c3 .fli{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--sh1);cursor:pointer;transition:transform .15s,box-shadow .2s}
+.c3 .fli>b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 var(--fs-1) var(--mono);background:color-mix(in oklab,var(--tc) 14%,transparent);color:var(--tc)}
+.c3 .fli .ft{font-weight:600;line-height:1.3}
+.c3 .fli .fw{font-size:var(--fs-2);color:var(--muted-foreground);margin-top:2px}
+.c3 .fli .fm{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:6px;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .fli .fm span{display:inline-flex;gap:4px;align-items:center}
+.c3 .fli .fm .rc{color:var(--acc)}
+@media (hover:hover){
+.c3 .fli:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
+}
+.c3 .pg{width:100%;max-width:1100px;height:auto;display:block}
+.c3 .chart.md{max-width:880px;margin-inline:auto}
+.c3 .pg text{font:var(--fs-2) var(--mono);fill:var(--muted-foreground)}
+.c3 .pg .t{fill:var(--foreground)}
+.c3 .pgl{display:flex;gap:var(--sp-4);flex-wrap:wrap;font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
+.c3 .prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-2);border-bottom:1px solid var(--border)}
+.c3 .prow .ki{width:28px;height:28px}
+.c3 .prow small{display:block;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .chip-s{display:inline-flex;gap:4px;align-items:center;font:500 var(--fs-2) var(--mono);color:var(--c)}
+.c3 .dir{--tc:var(--warning)}
+.c3 .dial{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:2px 0}
+.c3 .dial span{display:grid;justify-items:center;gap:4px;font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em}
+.c3 .dial span i{display:block;width:100%;height:8px;border-radius:4px;background:var(--muted)}
+.c3 .dial span.on{color:var(--foreground)}
+.c3 .dial span.on i{background:var(--c);box-shadow:0 0 0 3px color-mix(in oklab,var(--c) 22%,transparent)}
+.c3 .sevs{display:flex;gap:var(--sp-3);flex-wrap:wrap;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .sevs span{display:inline-flex;gap:4px;align-items:center}
+.c3 .krg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
+.c3 .krg:last-child{border-bottom:0}
+.c3 .krg b{display:block;line-height:1.3}
+.c3 .krg small{display:block;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .krt{position:relative;height:10px;border-radius:5px;background:var(--muted);margin:8px 0 10px}
+.c3 .krt i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--c)}
+.c3 .krt u{position:absolute;top:-4px;width:2px;height:18px;background:var(--foreground);text-decoration:none}
+.c3 .krt s{position:absolute;top:-3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:2px dashed var(--c);background:var(--card);text-decoration:none}
+.c3 .krt em{position:absolute;top:14px;font:var(--fs-1) var(--mono);font-style:normal;color:var(--muted-foreground);transform:translateX(-50%);white-space:nowrap}
+.c3 .sgl{display:grid;gap:0}
+.c3 .sgr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-3);align-items:start;padding:var(--sp-3) var(--sp-2);border-bottom:1px solid var(--border);cursor:pointer;border-radius:8px;position:relative}
+.c3 .sgr:last-child{border-bottom:0}
+@media (hover:hover){
+.c3 .sgr:hover{background:color-mix(in oklab,var(--muted) 60%,transparent)}
+}
+.c3 .sgr .ki{width:30px;height:30px}
+.c3 .sgr .st1{font-weight:600;line-height:1.3}
+.c3 .sgr .st2{font-size:var(--fs-2);color:var(--muted-foreground);margin-top:2px}
+.c3 .sgr .st3{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:6px;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .sgr .st3 span{display:inline-flex;gap:4px;align-items:center}
+.c3 .sgr .sv{font:500 var(--fs-1) var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--c)}
+.c3 .sgr .xp{grid-column:1/-1}
+.c3 .sgr .spk{width:64px;height:26px}
+.c3 .calwrap .bcol.r{position:static;max-height:none;overflow:visible;padding:0;margin:0}
+.c3 .cmain>section{flex:1;min-height:0;display:flex!important;flex-direction:column;gap:6px!important}
+.c3 .cmain .fc{overflow-y:auto;scrollbar-width:none}
+.c3 .fc .fcm{gap:var(--sp-3)}
+.c3 .fc .chgl{margin:0}
+.c3 .fc .fcl{margin:0}
+.c3 .fc .stt-row{margin-top:2px}
+.c3 .fc .pdots{margin-top:2px}
+.c3 .fc .ff{grid-template-rows:auto minmax(0,1fr);align-content:stretch;gap:var(--sp-3)}
+.c3 .cf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"t h" "f f";gap:var(--sp-3) var(--sp-5);align-items:center;align-content:space-between;height:100%}
+.c3 .fc:not(.back){grid-template-rows:minmax(0,1fr)}
+.c3 .cf .cfa{grid-area:t;min-width:0}
+.c3 .cf .cfh{grid-area:h;min-width:0;display:grid;align-content:center;justify-items:end}
+.c3 .cf h2{font-size:var(--fs-5);line-height:1.25;margin:0;text-wrap:balance}
+.c3 .cf .cfs{color:var(--muted-foreground);font-size:var(--fs-3);margin-top:var(--sp-1);text-wrap:pretty}
+.c3 .cf .cff{grid-area:f;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap;border-top:1px solid color-mix(in oklab,var(--tc) 18%,var(--border));padding-top:var(--sp-3)}
+.c3 .cf .cfx{display:flex;gap:6px var(--sp-4);flex-wrap:wrap;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .cf .cfx span{display:inline-flex;gap:5px;align-items:center}
+.c3 .cf .cfr{display:inline-flex;gap:6px;align-items:center;color:var(--tc);font:500 var(--fs-2) var(--mono)}
+.c3 .cf .cfr.n{color:var(--muted-foreground)}
+.c3 .hero{width:100%;max-width:360px}
+.c3 .hero svg{width:100%;height:auto;display:block}
+.c3 .hero .hr svg,.c3 .hero .hg svg{width:auto;height:auto;flex:none}
+.c3 .hero svg.ic{width:16px;height:16px;flex:none}
+.c3 .hero svg.ic.sm{width:14px;height:14px}
+.c3 .hero text{font:var(--fs-1) var(--mono);fill:var(--muted-foreground)}
+.c3 .hero .t{fill:var(--foreground)}
+.c3 .hn{display:grid;gap:2px}
+.c3 .hn .a{display:flex;align-items:baseline;gap:6px}
+.c3 .hn .a b{font:600 44px/1 var(--mono);letter-spacing:-.02em}
+.c3 .hn .a span{font:500 var(--fs-4) var(--mono);color:var(--muted-foreground)}
+.c3 .hn .d{font:500 var(--fs-2) var(--mono)}
+.c3 .hr{display:flex;gap:var(--sp-4);align-items:center;justify-content:flex-end}
+.c3 .hr .c{display:grid;gap:2px;min-width:0}
+.c3 .hr .c b{font-size:var(--fs-4);line-height:1.2}
+.c3 .hr .c span{font-size:var(--fs-2);color:var(--muted-foreground)}
+.c3 .hrw{display:grid;gap:var(--sp-2)}
+.c3 .hrr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-2);align-items:center;font-size:var(--fs-3);line-height:1.3}
+.c3 .hrr .ic{color:var(--muted-foreground)}
+.c3 .hrr.ok .ic,.c3 .hrr.ok i{color:var(--success)}
+.c3 .hrr.warn .ic,.c3 .hrr.warn i{color:var(--warning)}
+.c3 .hrr.bad .ic,.c3 .hrr.bad i{color:var(--destructive)}
+.c3 .hrr i{font:500 var(--fs-1) var(--mono);font-style:normal;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.04em}
+.c3 .hbs{display:grid;gap:var(--sp-3)}
+.c3 .hbr{display:grid;gap:4px}
+.c3 .hbr .l{display:flex;justify-content:space-between;font-size:var(--fs-2);gap:8px}
+.c3 .hbr .l i{font:var(--fs-2) var(--mono);font-style:normal;color:var(--muted-foreground)}
+.c3 .hbr .tk{height:8px;border-radius:4px;background:var(--muted);overflow:hidden}
+.c3 .hbr .tk u{display:block;height:100%;border-radius:4px;background:var(--c);text-decoration:none;transform-origin:left;animation:c3-grow .7s backwards}
+.c3 .htl{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--sp-2);width:100%}
+.c3 .htl>div{display:grid;justify-items:center;gap:0;padding:10px 6px;border-radius:12px;background:color-mix(in oklab,var(--c) 10%,transparent);text-align:center}
+.c3 .htl b{font:600 var(--fs-6)/1.1 var(--mono);color:var(--c)}
+.c3 .htl span{font-size:var(--fs-2);color:var(--muted-foreground);line-height:1.3}
+.c3 .hg{display:flex;gap:var(--sp-3);align-items:center;justify-content:flex-end;min-width:0}
+.c3 .hg svg{width:64px;height:64px;flex:none}
+.c3 .hg .ki{width:56px!important;height:56px!important;flex:none}
+.c3 .hch{display:grid;gap:var(--sp-3);position:relative;padding-left:18px}
+.c3 .hch::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(var(--ring) 0 4px,transparent 4px 8px)}
+.c3 .hch>div{position:relative;font-size:var(--fs-2);line-height:1.25}
+.c3 .hch{gap:var(--sp-2)}
+.c3 .hch>div::before{content:"";position:absolute;left:-18px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--card)}
+.c3 .hch>div{white-space:nowrap}
+.c3 .hch b{font-size:var(--fs-2);margin-right:6px}
+.c3 .hch span{font:var(--fs-2) var(--mono);color:var(--c)}
+.c3 .cdeck{display:grid;gap:8px}
+.c3 .fc{container-type:inline-size;container-name:card}
+.c3 .cf{grid-template-areas:"t h" "f f"}
+.c3 .cfk{display:none;gap:var(--sp-3);align-items:stretch}
+.c3 .kp{display:grid;gap:0;padding:6px 12px;border-radius:12px;background:color-mix(in oklab,var(--c,var(--tc)) 10%,transparent);min-width:78px}
+.c3 .kp b{font:600 var(--fs-5)/1.2 var(--mono);color:var(--c,var(--tc))}
+.c3 .kp b span{text-transform:none;font:inherit;letter-spacing:0;color:inherit}
+.c3 .kp span{font-size:var(--fs-1);color:var(--muted-foreground);letter-spacing:.03em;text-transform:uppercase;font-family:var(--mono)}
+@container card (min-width:500px){
+.c3 .fc .cf{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"t h" "k h" "f f";grid-template-rows:auto minmax(0,1fr) auto;align-items:start}
+.c3 .fc .cf .cfh{align-self:stretch;align-content:center}
+.c3 .fc .cf .cfk{display:flex;align-self:end}
+.c3 .fc .hero{max-width:430px}
+.c3 .fc .hero svg{max-height:176px}
+}
+@container card (min-width:400px) and (max-width:499px){
+.c3 .fc .cf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"t h" "f f"}
+.c3 .fc .cf .cfk{display:none}
+}
+@container card (max-width:399px){
+.c3 .fc .cf{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "k" "t" "f";grid-template-rows:minmax(0,1fr) auto auto auto;gap:var(--sp-2);align-content:stretch}
+.c3 .fc .cf .cfh{justify-items:center;align-self:center;min-height:92px}
+.c3 .fc .cf .cfk{display:flex}
+.c3 .fc .cf .kp{flex:1;min-width:0;padding:4px 8px;text-align:center}
+.c3 .fc .cf .kp b{font-size:var(--fs-4)}
+.c3 .fc .hero{max-width:none}
+.c3 .fc .hero svg{max-height:132px}
+.c3 .fc .cf h2{font-size:var(--fs-4)}
+.c3 .fc .cf .cfs{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--fs-2)}
+.c3 .fc .cf .cff{padding-top:var(--sp-2);gap:var(--sp-1) var(--sp-3)}
+.c3 .fc .cf .cfx span:nth-child(n+2){display:none}
+.c3 .fc .hn .a b{font-size:40px}
+.c3 .fc .hg .hch{display:none}
+.c3 .fc .hg,.c3 .fc .hr{justify-content:center}
+.c3 .fc .hbs{gap:var(--sp-2)}
+.c3 .fc .htl b{font-size:var(--fs-5)}
+.c3 .fc .htl>div{padding:6px 4px}
+.c3 .fc .hrw .hrr:nth-child(n+4){display:none}
+}
+.c3 .fc .hero .draw{animation:none}
+.c3 .fc.on .hero .draw{animation:c3-draw 1s ease-out backwards}
+.c3 .fc.on .hero .rg{animation:c3-ringin 1s ease-out backwards}
+.c3 .fc.on .hbr u{animation:c3-grow .8s backwards}
+.c3 .fc.on .htl>div{animation:c3-popin .45s cubic-bezier(.3,1.4,.5,1) backwards}
+.c3 .fc.on .htl>div:nth-child(2){animation-delay:.08s}
+.c3 .fc.on .htl>div:nth-child(3){animation-delay:.16s}
+.c3 .fc.on .htl>div:nth-child(4){animation-delay:.24s}
+.c3 .fc.on .htl>div:nth-child(5){animation-delay:.32s}
+.c3 .fc.on .hrr{animation:c3-fadein .4s backwards}
+.c3 .fc.on .hrr:nth-child(2){animation-delay:.08s}
+.c3 .fc.on .hrr:nth-child(3){animation-delay:.16s}
+.c3 .fc.on .kp{animation:c3-fadein .5s backwards}
+.c3 .fc.on .kp:nth-child(2){animation-delay:.1s}
+.c3 .fc.on .kp:nth-child(3){animation-delay:.2s}
+.c3 .hero rect[data-a],.c3 .hero g[data-a]{cursor:pointer;transition:filter .15s,opacity .15s}
+.c3 .hero rect[data-a]:hover,.c3 .hero g[data-a]:hover{filter:brightness(1.12) saturate(1.2)}
+.c3 .hrr[data-a]{cursor:pointer;border-radius:8px;transition:background .15s}
+.c3 .hrr[data-a]:hover{background:color-mix(in oklab,var(--muted) 70%,transparent)}
+.c3 .hbr{cursor:default;transition:transform .15s}
+@media (hover:hover){
+.c3 .hbr:hover{transform:translateX(2px)}
+.c3 .hbr:hover u{filter:saturate(1.4)}
+}
+.c3 .hn svg{cursor:crosshair;touch-action:pan-y}
+.c3 .hn .cur{opacity:0;transition:opacity .15s}
+.c3 .hn svg:hover .cur{opacity:1}
+.c3 .wrow .chips .jc{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.c3 .fl2{display:flex;gap:var(--sp-4);flex-wrap:wrap;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .flow{display:grid;gap:var(--sp-2)}
+.c3 .flow>div{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;font-size:var(--fs-2)}
+.c3 .flow .b{height:10px;border-radius:5px;background:var(--muted);overflow:hidden}
+.c3 .flow .b i{display:block;height:100%;border-radius:5px;background:var(--c);transform-origin:left;animation:c3-grow .7s backwards}
+.c3 .jobr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);align-items:center;padding:var(--sp-2) 0;border-bottom:1px solid var(--border)}
+.c3 .jobr:last-child{border-bottom:0}
+.c3 .jobr b{display:block;line-height:1.3}
+.c3 .jobr small{font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+@keyframes c3-fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
+@keyframes c3-slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
+@keyframes c3-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
+@keyframes c3-popin{from{transform:scale(0)}to{transform:scale(1)}}
+@keyframes c3-growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
+@keyframes c3-pulse{0%,100%{opacity:1}50%{opacity:.35}}
+@keyframes c3-ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.2);opacity:0}}
+@keyframes c3-wave{0%,100%{height:6px}50%{height:28px}}
+@media (prefers-reduced-motion: reduce){
+.c3 *::before,.c3 *::after{animation:none!important;transition:none!important}
+}
+.c3 svg.pg .crit{font-weight:600}
+@keyframes c3-recp{50%{opacity:.3}}
+.c3.ph .recg .rt{display:none}
+.c3 .c3add{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-2)}
+.c3 .c3add .form input[type=text]{border-radius:20px;padding:8px 14px;font-size:var(--fs-4)}
+.c3 .c3add .chips2{min-height:22px}
+.c3 .c3spin{display:inline-flex;animation:c3-c3spin 1.1s linear infinite}
+@keyframes c3-c3spin{to{transform:rotate(360deg)}}
+@media (prefers-reduced-motion:reduce){
+.c3 .c3spin{animation:none}
+}
+.c3 .c3steps{display:grid;gap:var(--sp-2)}
+.c3 .c3sh{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}
+.c3 .c3sh h4{margin:0;font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;display:flex;gap:6px;align-items:center}
+.c3 .c3steps ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
+.c3 .c3steps li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-2);align-items:start;font-size:var(--fs-3)}
+.c3 .c3steps li .c3sg{color:var(--muted-foreground);padding-top:2px}
+.c3 .c3steps li.ok .c3sg{color:var(--success)}
+.c3 .c3steps li.warn .c3sg{color:var(--warning)}
+.c3 .c3stt.dn{text-decoration:line-through;color:var(--muted-foreground)}
+.c3 .c3res{display:block;font-size:var(--fs-2);margin-top:2px}
+.c3 .c3sd{grid-column:1/-1;border-left:2px solid var(--border);padding-left:var(--sp-3)}
+.c3 .c3jf{display:grid;gap:var(--sp-2)}
+.c3 .c3jf label{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--sp-2);align-items:center}
+.c3 .c3jf input{width:100%}
+.c3.ph .c3add{width:100%;margin:0}
+.c3.ph .c3add .chips2:empty{display:none}
+.c3 input[type=date],.c3 input[type=time]{font:inherit;font-size:var(--fs-3);padding:6px 8px;border:1px solid var(--border);background:var(--background);color:var(--foreground);min-width:0;border-radius:6px}
+.c3 .nrow[data-ag] .c3strip:empty{display:none}
+/* console3.css addition: the slide placeholder on a case file that cannot send yet (the mockup's slider always works). */
+.c3 .slt[aria-disabled="true"]{opacity:.55}
+.c3 .slt[aria-disabled="true"] .th{animation:none;cursor:not-allowed}
+/* console3.css addition: a row's case file is drawn only while it is open; the mockup draws every case file. */
+.c3 .xp:not(.open)>.xi{visibility:hidden}
+/* console3.css addition: a pill that is not built yet reads as off. */
+.c3 .pill:disabled{opacity:.5;cursor:not-allowed}
+/* console3.css addition: the slide thumb is a real button; the mockup's has no disabled look. */
+.c3 .slt .th:disabled{cursor:not-allowed}
+/* console3.css addition: a card takes a vertical swipe (open or close the case file) without the page scrolling under it. The mockup sets this on the phone only (.ph1 .fc). */
+.c3 .fc{touch-action:pan-x}
+
+/* ====== R4b: the Initiatives lifecycle lens, Releases, Timeline, Reports, outbox, slide, document panel, new-initiative sheet, sessions and agent card. ======
+ * The generator that produced the rules above (see the header) dropped the classes these views draw. The rules below are
+ * the same generator run again over the mockup (console3.html lines 5 to 966) with only the shell dropped (stage, dock,
+ * sheet, palette, toast, banner, scrim, phone tray); the ones the three first views already had are not repeated. The
+ * header lines "left out: the Initiatives, Reports and Release classes" are superseded by this block. One deliberate change:
+ * the mockup's `.sn` (a timeline snapshot button) is scoped as `.sntrack .sn`, because `.calbody.sn` above is the Calendar's
+ * slide animation class and a bare `.sn` rule would restyle it. */
+.c3 .mk{font:var(--fs-2) var(--mono);width:14px;text-align:center}
+.c3 .mk.w{color:var(--success)}
+.c3 .mk.n{color:var(--acc)}
+.c3 .mk.b{color:var(--warning)}
+.c3 .mk.w{animation:c3-pulse 1.6s infinite}
+.c3 .hx{display:grid;gap:6px;padding:4px 0 8px 36px;font-size:var(--fs-3)}
+.c3 .hx div{display:flex;gap:8px;align-items:flex-start}
+.c3 .hx .ic{margin-top:2px;color:var(--muted-foreground)}
+.c3 .lc{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
+.c3 .lc>div{display:grid;justify-items:center;gap:4px;font:var(--fs-1) var(--mono);color:var(--muted-foreground);text-align:center}
+.c3 .lc i{display:block;width:100%;height:8px;border-radius:4px;background:var(--muted)}
+.c3 .lc>div.d i{background:var(--success)}
+.c3 .lc>div.n i{background:var(--acc);box-shadow:0 0 0 3px var(--accw)}
+.c3 .lc>div.n{color:var(--foreground)}
+.c3 .lkrow{display:flex;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-1) 0 var(--sp-2)}
+.c3 .dfi ins{background:color-mix(in oklab,var(--success) 22%,transparent);text-decoration:none;border-radius:3px}
+.c3 .dfi del{background:color-mix(in oklab,var(--destructive) 18%,transparent);text-decoration:line-through;border-radius:3px}
+.c3 .dsec{border-left:3px solid var(--border);padding:var(--sp-2) var(--sp-3);display:grid;gap:4px}
+.c3 .dsec.warn{border-color:var(--warning);background:color-mix(in oklab,var(--warning) 7%,transparent);border-radius:0 8px 8px 0}
+.c3 .dsec h4{margin:0;font:600 var(--fs-3) var(--sans,inherit)}
+.c3 .dsec p,.c3 .dsec .dt{margin:0;font-size:var(--fs-3);line-height:1.5}
+.c3 .dsec .dt[contenteditable=true]{outline:2px solid var(--acc);border-radius:6px;padding:4px 6px;background:var(--card)}
+.c3 .dsec .mt{display:flex;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-1);color:var(--muted-foreground);font-family:var(--mono)}
+.c3 .dpn{display:grid;gap:var(--sp-3)}
+.c3 .dpn textarea,.c3 .dpn input,.c3 .wform input,.c3 .wform select{width:100%;font:inherit;font-size:var(--fs-3);padding:8px 10px;border:1px solid var(--ring);border-radius:8px;background:var(--card);color:var(--foreground);box-sizing:border-box}
+.c3 .dpn textarea{min-height:72px;resize:vertical}
+.c3 .hx{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
+.c3 .hx li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-2);font-size:var(--fs-2);align-items:start}
+.c3 .hx .w{color:var(--muted-foreground);font:var(--fs-1) var(--mono)}
+.c3 .hx small{display:block;color:var(--muted-foreground)}
+.c3 .sntrack{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative;margin-bottom:var(--sp-3)}
+.c3 .sntrack::before{content:"";position:absolute;left:10%;right:10%;top:9px;height:2px;background:var(--border)}
+.c3 .sntrack .sn{background:none;border:0;display:grid;justify-items:center;gap:2px;cursor:pointer;color:var(--foreground);padding:0}
+.c3 .sntrack .sn i{width:14px;height:14px;border-radius:50%;background:var(--card);border:2px solid var(--ring);z-index:1;transition:transform .2s}
+.c3 .sntrack .sn[data-past=true] i{border-color:var(--acc)}
+.c3 .sntrack .sn[aria-pressed=true] i{background:var(--acc);transform:scale(1.35)}
+.c3 .sntrack .sn b{font:500 var(--fs-1) var(--mono)}
+.c3 .sntrack .sn span{font-size:var(--fs-1);color:var(--muted-foreground);text-align:center;line-height:1.2}
+.c3 .snh{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
+.c3 .lc{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
+.c3 .c3rel{display:grid;gap:var(--sp-3)}
+.c3 .c3dt{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
+.c3 .c3dt>span:first-child{width:56px}
+.c3 .c3ag{display:grid;gap:var(--sp-2)}
+.c3 .c3ag:empty{display:none}
+.c3 .c3res2{display:grid;gap:var(--sp-2)}
+.c3 .c3strip{align-items:center}
+.c3 .c3mv{align-items:center}
+.c3 .c3res2 .tg,.c3 .c3ag .tg{justify-self:start;width:auto}
+/* console3.css addition: a view that mounts where there is no .c3 root (the document rail, the outbox, the sessions panel, the sheet)
+   carries `c3 c3e`. c3e keeps a nested or embedded root from taking the page-level grid and container of `.c3` above. */
+.c3.c3e{display:block;container-type:normal}
+.c3.c3e>*+*{margin-top:var(--sp-3)}
+/* console3.css addition: the slide as a bare control (outbox) has no .case or .fc to set --tc; slide-confirm.js sets it on the control itself. */
+.c3 .slt.done{opacity:.7}
+.c3 .slt-hint{font:var(--fs-2) var(--mono);color:var(--muted-foreground);min-height:16px;margin-top:var(--sp-1)}
+/* console3.css addition: a row of the lifecycle lens that opens an initiative; the mockup's `.tt` is a span, here it is a button. */
+.c3 .tt.btn{border:0;background:transparent;padding:0;text-align:left;font:inherit;color:inherit}
+.c3 .nrow .tt.btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+/* console3.css addition: a card in a deck that opens a real record (the mockup's cards flip; these open the initiative). */
+.c3 .fc.lnk{cursor:pointer}
+/* console3.css addition: the swipe-reveal strips of a run row are drawn by the swipe gesture; the agent card keeps them quiet at rest. */
+.c3 .c3ag .fold.w{display:grid;gap:6px}
+/* console3.css addition: a gantt row that is on the critical path reads in the mockup's bold label (svg.pg .crit above); here its bar is outlined. */
+.c3 svg.pg .critbar{stroke:var(--destructive);stroke-width:1.5;fill:none}
+/* console3.css addition: a text control inside a case file row that is not in a .form (summary lines, the reply tray). */
+.c3 .form.row{display:flex;gap:var(--sp-2);align-items:center}
+.c3 .form.row input[type=text]{flex:1 1 140px}
+/* console3.css addition: a select next to pills, in .chips2. */
+.c3 .chips2 select{flex:0 1 auto}
+/* ===== console3 wave E2b: the shell strip (ticker, bell, recording group), the banner, the popups and the phone tiles =====
+ * Lifted from console3.html: .nbdg, .banner, .scrim, .sheet.bs, .grab, .nli, .eq (lines 489 to 513), .tickrow, .tray, .tl (539 to 552),
+ * .recg, .recdot (916 to 924). Same generator rules as above (.c3 prefix, mockup variables to D38 tokens). Two differences: the mockup's
+ * tile class `.tl` is also its timeline class, so the tile is scoped as `.tray .tl`; and the shell strip, the sheet base rules (the
+ * mockup's lines 143 to 145, 180, 496 to 498) are added here because the three views never drew a sheet. */
+.c3.c3shell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2);align-items:center;padding:6px var(--sp-3);border-bottom:1px solid var(--border);background:var(--background)}
+.c3.c3shell[hidden]{display:none}
+.c3 .shell-tick{min-width:0}
+.c3 .shell-tools{display:inline-flex;gap:var(--sp-2);align-items:center}
+.c3.c3shell.ph{grid-template-columns:minmax(0,1fr);padding:var(--sp-2) var(--sp-3)}
+.c3 .tickrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
+.c3 .tki{display:inline-flex}
+.c3 .tick.static{padding:7px 12px;-webkit-mask-image:none;mask-image:none}
+.c3 .tick.static .tkt{animation:none;display:flex}
+.c3 .nbdg{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--destructive);color:var(--on-accent);font:600 var(--fs-1) var(--mono);display:grid;place-items:center;padding:0 4px;box-shadow:0 0 0 2px var(--background)}
+.c3 .nbdg[hidden]{display:none}
+.c3 .banner{position:fixed;top:12px;left:50%;translate:-50% 0;z-index:30;display:flex;gap:8px;align-items:center;max-width:min(430px,calc(100vw - 24px));padding:9px 14px;border-radius:14px;background:var(--foreground);color:var(--background);font-size:var(--fs-3);box-shadow:var(--sh3);cursor:pointer;border:0;text-align:left;animation:c3-bdn .5s cubic-bezier(.3,1.4,.5,1)}
+.c3 .banner b{font:500 var(--fs-1) var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
+.c3 .banner .bx{margin-left:var(--sp-2);background:none;border:0;color:inherit;cursor:pointer;opacity:.75;padding:0 2px}
+.c3.c3pop{position:fixed;inset:0;z-index:60;pointer-events:none;container-type:normal}
+.c3.c3pop>*{pointer-events:auto}
+.c3 .scrim{position:fixed;inset:0;background:oklch(0 0 0 / 32%);z-index:19;animation:c3-fadein .2s}
+.c3 .sheet{position:fixed;top:12px;right:12px;bottom:12px;width:340px;background:var(--card);border:1px solid var(--ring);border-radius:12px;box-shadow:0 12px 40px oklch(0 0 0 / 18%);z-index:20;display:grid;grid-template-rows:auto 1fr;animation:c3-slidein .22s ease-out}
+.c3 .sheet .sb{padding:var(--sp-4);overflow:auto;display:grid;gap:var(--sp-3);align-content:start}
+.c3 .sheet .sh2{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}
+.c3 .sheet.bs{z-index:20}
+.c3 .grab{display:none;width:36px;height:4px;border-radius:2px;background:var(--ring);margin:8px auto 0;opacity:.6}
+.c3.ph .grab{display:block}
+.c3.ph .sheet{top:auto;left:0;right:0;bottom:0;width:auto;max-height:78%;border-radius:16px 16px 0 0}
+.c3.ph .sheet.bs{animation:c3-slideup .3s cubic-bezier(.2,.8,.2,1);max-height:84%}
+.c3 .nli{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:10px 4px;border-bottom:1px solid var(--border);border-radius:8px;color:inherit;font:inherit;cursor:pointer}
+.c3 .nli .ki{width:30px;height:30px}
+.c3 .nli .t{font-size:var(--fs-3);line-height:1.35}
+.c3 .nli .w{font:var(--fs-1) var(--mono);color:var(--muted-foreground);text-align:right}
+@media (hover:hover){.c3 .nli:hover{background:var(--muted)}}
+.c3 .eq{display:inline-flex;gap:2px;align-items:flex-end;height:16px;color:var(--acc)}
+.c3 .eq i{width:3px;background:currentColor;border-radius:2px;animation:c3-eqb .9s ease-in-out infinite}
+.c3 .eq i:nth-child(2){animation-delay:.2s}.c3 .eq i:nth-child(3){animation-delay:.4s}
+.c3 .tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
+.c3 .tray .tl{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:8px 2px 6px;display:grid;justify-items:center;gap:0;box-shadow:var(--sh1),var(--hi);position:relative;transition:transform .15s;color:inherit;font:inherit;cursor:pointer;min-height:64px}
+.c3 .tray .tl:active{transform:scale(.96)}
+.c3 .tray .tl .ic{color:var(--muted-foreground)}
+.c3 .tray .tl .n{font:600 var(--fs-4)/1.2 var(--mono)}
+.c3 .tray .tl .l{font-size:var(--fs-1);color:var(--muted-foreground)}
+.c3 .tray .tl.hot::after{content:"";position:absolute;top:8px;right:16px;width:7px;height:7px;border-radius:50%;background:var(--destructive)}
+.c3 .recg{display:inline-flex;align-items:stretch;border:1px solid color-mix(in oklch,var(--destructive) 55%,transparent);border-radius:8px;overflow:hidden;color:var(--destructive);background:color-mix(in oklch,var(--destructive) 7%,var(--card))}
+.c3 .recg>*{display:inline-flex;align-items:center;gap:6px;padding:0 10px;height:32px;font:500 var(--fs-2) var(--mono);color:inherit}
+.c3 .recg>*+*{border-left:1px solid color-mix(in oklch,var(--destructive) 35%,transparent)}
+.c3 .recg button{border:0;background:none;cursor:pointer;color:inherit}
+.c3 .recg button:hover{background:color-mix(in oklch,var(--destructive) 14%,transparent)}
+.c3 .recg[hidden]{display:none}
+.c3 .recdot{width:8px;height:8px;border-radius:50%;background:var(--destructive);animation:c3-recp 1.2s ease-in-out infinite}
+.c3 .recdot.static,.c3 .recg.paused .recdot{animation:none}
+.c3 .recg.paused .recdot{background:var(--muted-foreground)}
+.c3 .recg.paused{color:var(--muted-foreground);border-color:var(--border)}
+.c3 .recg .pmc-icon{width:14px;height:14px}
+.fr-link .shell-recdot{position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--destructive);box-shadow:0 0 0 2px var(--background)}
+.fr-link .shell-recdot[hidden]{display:none}
+.c3.c3shell.ph{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
+.c3.c3shell.ph .shell-tools{display:contents}
+.c3.c3shell.ph [data-shell="bell"]{order:-2}
+.c3.c3shell.ph .shell-tick{order:-1}
+.c3.c3shell.ph .recg{order:1;grid-column:1/-1;justify-self:start}
+.c3.c3shell.ph .tray{order:2;grid-column:1/-1}
+.c3 .tray .tl .n[hidden]{display:none}
+
+/* ── Phone tap targets ── every control is at least 44px on a phone (pm-r27, pm-frame-phone, pm-reports-phone). The mockup's
+ * 34px and 30px icon buttons and 23px to 26px segment and pill buttons grow here; the family row wraps rather than run off screen. */
+@media (max-width: 760px) {
+  .c3 .ib, .c3 .ib.sm { width: 44px; height: 44px; }
+  .c3 .slt { height: 52px; border-radius: 26px; }
+  .c3 .slt .th { width: 44px; height: 44px; }
+  .c3 .seg { flex-wrap: wrap; }
+  .c3 .seg button, .c3 .pill { min-height: 44px; }
+}
+
+/* ===== console3 shell page (/c3.html, pm/c3-shell.js): the header, the tab bar, the three-column layout and the dock =====
+ * Lifted from console3.html (lines 39 to 60 .stage .shell .main .top .tools .tabs .ind, 156 to 172 .dock .dk-h .dk-p, 869 the
+ * narrow rule). Class names differ from the mockup's (`c3top`, `c3tabs`, `c3grid`, `c3main`, `c3dock`) because `.c3.ph .tabs` and
+ * `.c3.ph .dock` above hide the mockup's own names on a phone, and this page keeps its tabs there. Append-only. */
+.c3.c3pg{overflow-x:clip;max-width:1412px;margin:0 auto;padding:16px 16px 24px;min-height:100vh}
+.c3 .c3grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
+.c3 .c3main{min-width:0;display:grid;gap:14px;container-type:inline-size;align-content:start}
+.c3 .c3top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
+.c3 .c3top h1{margin:0;font-size:var(--fs-5);font-weight:600;display:flex;gap:8px;align-items:center}
+.c3 .c3top .sub{font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .c3top .tools{display:flex;gap:6px;align-items:center}
+.c3 .c3top a.ib{text-decoration:none}
+.c3 .c3top .ib .bdg{position:absolute;top:-6px;right:-6px;box-shadow:0 0 0 2px var(--background)}
+.c3 .c3pg-bell{display:inline-flex;gap:6px;align-items:center}
+.c3 .c3pg-menuwrap{position:relative;display:inline-flex}
+.c3 .c3pg-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:25;min-width:200px;display:grid;gap:2px;padding:6px;background:var(--card);border:1px solid var(--ring);border-radius:10px;box-shadow:var(--sh3)}
+.c3 .c3pg-mi{display:flex;gap:8px;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:6px;color:var(--foreground);text-decoration:none;font:inherit;font-size:var(--fs-3);cursor:pointer}
+.c3 .c3pg-mi:hover,.c3 .c3pg-mi:focus-visible{background:var(--muted)}
+.c3 .c3pg-tick{display:contents}
+.c3[data-tab="brief"] .c3pg-tick{display:none}
+.c3 .c3tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
+.c3 .c3tabs::-webkit-scrollbar{display:none}
+.c3 .c3tabs button{border:0;background:transparent;padding:8px 12px;color:var(--muted-foreground);border-bottom:2px solid transparent;white-space:nowrap;display:flex;gap:8px;align-items:center;font-size:var(--fs-3);cursor:pointer}
+.c3 .c3tabs button[aria-selected="true"]{color:var(--foreground);font-weight:500}
+.c3 .c3tabs .ind{position:absolute;bottom:-1px;left:0;height:2px;background:var(--foreground);transition:transform .35s cubic-bezier(.3,.7,.2,1),width .35s cubic-bezier(.3,.7,.2,1);pointer-events:none;border-radius:2px}
+.c3 .c3tabs .bdg{font:500 var(--fs-1) var(--mono);background:var(--acc);color:var(--on-accent);min-width:16px;height:16px;border-radius:8px;display:inline-grid;place-items:center;padding:0 4px}
+.c3 .c3pg-pane{min-width:0}
+.c3 .c3pg-pane[hidden]{display:none}
+.c3 .c3pg-pane>.brief{display:block}
+/* the Briefing's middle column draws the day timeline and the pulse; the gantt is the pulse here (it is the Calendar tab's to draw in full) */
+.c3 .c3pg-midcal [data-cv="gantt"]{display:none}
+.c3 .c3pg-midcal .calwrap{gap:var(--sp-3)}
+.c3 .c3pg-initbody>[hidden]{display:none}
+.c3 .c3dock{position:sticky;top:12px;width:330px;border:1px solid var(--border);background:var(--card);display:flex;flex-direction:column;max-height:calc(100vh - 24px);border-radius:10px;overflow:hidden}
+.c3 .c3dock[hidden]{display:none}
+.c3 .c3dock.rail{width:46px;align-items:center;padding-block:8px;gap:8px;overflow:visible}
+.c3 .c3dock .dk-h{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border)}
+.c3 .c3dock .dk-h select{flex:1;min-width:0;font:500 var(--fs-2) var(--mono);border:0;background:transparent;padding:4px;color:var(--foreground)}
+.c3 .c3dock .dk-h a.ib{text-decoration:none}
+.c3 .c3dock .dk-p{padding:10px;display:grid;gap:8px;overflow:auto;flex:1;align-content:start}
+.c3 .c3dock .dk-p .card{box-shadow:none}
+.c3 .c3dock .dk-f{padding:8px 10px;border-top:1px solid var(--border);display:flex;gap:6px}
+.c3 .c3dock .dk-f a.pill{text-decoration:none;display:inline-flex;gap:6px;align-items:center}
+@media (max-width:980px){.c3 .c3grid{grid-template-columns:minmax(0,1fr)}.c3 .c3dock{position:static;width:auto;max-height:none}}
+@media (max-width:760px){
+  .c3.c3pg{padding:12px 12px 20px}
+  .c3 .c3tabs button{min-height:44px}
+  .c3 .c3pg-mi{min-height:44px}
+  .c3 .c3dock .dk-h select{min-height:44px}
+  .c3 .c3dock .dk-f a.pill{min-height:44px}
+  .c3 .tt.btn{min-height:44px}
+  .c3pg .seg button,.c3pg .pill{min-width:44px}
+  .c3pg input,.c3pg select,.c3pg textarea{min-height:44px}
+  .c3pg .tick{min-height:44px;display:flex;align-items:center}
+  .c3pg .vday .vb{min-height:44px}
+  .c3pg .dkd,.c3pg .dkd[aria-current="true"]{width:44px;height:44px;background:transparent;opacity:1;position:relative;border-radius:0}
+  .c3pg .dkd::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:7px;height:7px;border-radius:4px;background:var(--ring);opacity:.5;transition:width .35s cubic-bezier(.3,.7,.2,1),background .3s}
+  .c3pg .dkd[aria-current="true"]::before{width:26px;background:var(--acc);opacity:1}
+}
+
+/* ===== console3 fidelity pass (/c3.html): the dock's tree, the Briefing's middle column, the Work flow card ===== */
+/* the dock tree: lifted from console3.html lines 157 to 168 (.dk-tree .br .bn .ss .sr .nm .mk), the .c3 prefix added */
+.c3 .dk-tree{overflow:auto;padding:6px 8px;max-height:280px;border-bottom:1px solid var(--border);display:grid;gap:2px}
+.c3 .br{display:grid;gap:2px}
+.c3 .br>.bn{display:flex;gap:6px;align-items:center;font:var(--fs-2) var(--mono);color:var(--muted-foreground);padding:4px 4px 0;overflow-wrap:anywhere}
+.c3 .br>.ss{margin-left:12px;border-left:1px solid var(--border);padding-left:8px;display:grid;gap:2px}
+.c3 .sr{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:6px;align-items:center;width:100%;border:0;background:transparent;text-align:left;padding:5px 6px;border-radius:6px}
+.c3 .sr[aria-current="true"]{background:var(--muted)}
+.c3 .sr .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-3)}
+.c3 .sr .ic{color:var(--muted-foreground)}
+.c3 .mk.w{animation:c3-pulse 1.6s infinite}
+.c3 .c3dock .dk-p .term{min-height:72px;max-height:168px}
+.c3 .c3dock .dk-d{padding:6px 10px;border-top:1px solid var(--border);overflow:auto;max-height:240px}
+.c3 .c3dock .dk-d summary{cursor:pointer;font-size:var(--fs-2);padding:4px 0}
+.c3 .c3dock .dk-runs{display:grid;gap:8px;padding-top:6px}
+.c3 .c3dock .dk-p .form{display:flex;gap:6px;align-items:center}
+.c3 .c3dock .dk-p .form input[type=text]{flex:1;min-width:0}
+.c3 .c3dock .dk-p .form input:disabled{opacity:.6;cursor:not-allowed}
+.c3 .c3dock.rail .ib .mk{width:auto}
+/* the Briefing's middle column is the mockup's ribbon: the zoom switch, no previous/next row */
+.c3 .c3pg-midcal .calbar>.chips2{display:none}
+@media (prefers-reduced-motion:reduce){.c3 .mk.w{animation:none}}
+@media (max-width:760px){
+  .c3 .sr{min-height:44px}
+  .c3 .br .chip2.lk,.c3 .c3dock .dk-d summary{min-height:44px;display:inline-flex;align-items:center}
+  .c3 .c3dock .dk-p .form .ib{width:44px;height:44px}
+  .c3 .c3add .ib{width:44px;height:44px}
+  .c3 .fl2{gap:var(--sp-2)}
+  .c3 .lkrow .chip2.lk{min-height:44px}
+  .c3 .pill{min-height:44px}
+}
+.c3 .c3pg-pane{display:grid;gap:12px;align-content:start}
+.c3 .c3pg-pane>.brief{display:block}
+.c3 .lkrow{margin-bottom:var(--sp-3)}
+@media (max-width:760px){
+  .c3 .stance{flex-wrap:wrap}
+  .c3 .stance>div:nth-child(2){flex:1 1 calc(100% - 56px)}
+}
+/* demo mode (?demo=1, c3-demo.js): the header pill, and the mockup's extra card and list furniture it feeds */
+.c3 .c3pg-demo{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;font:500 var(--fs-1) var(--mono);letter-spacing:.04em;white-space:nowrap;color:var(--warning);background:color-mix(in oklab,var(--warning) 14%,transparent);border:1px solid color-mix(in oklab,var(--warning) 45%,transparent)}
+.c3 .fc .tag.pov{margin-left:6px;vertical-align:middle}
+.c3 svg.mat{width:100%;height:auto;display:block}
+.c3 svg.mat text{font:var(--fs-2) var(--mono);fill:var(--muted-foreground)}
+.c3 svg.mat .t{fill:var(--foreground)}
+.c3 .sgr .spk{align-self:center}
+@media (max-width:760px){
+  .c3[data-c3-demo] .nrow .tt{min-height:44px;display:inline-flex;align-items:center}
+}
+@media (max-width:760px){
+  .c3[data-c3-demo] .c3top .tools{flex-wrap:wrap;justify-content:flex-start}
+  .c3[data-c3-demo] .c3pg-demo{flex:1 0 100%;justify-content:center}
+}
+
+/* ── the mockup's dock, closed up (console3.html .dock, line 156 on): the body wrapper, a disabled box that reads as the mockup's, no foot row ── */
+.c3 .c3dock .dk-body{display:flex;flex-direction:column;min-height:0;overflow:auto;flex:1}
+.c3 .c3dock .dk-body[hidden],.c3 .c3dock .dk-d[hidden]{display:none}
+.c3 .c3dock .dk-p .form input:disabled{opacity:1;cursor:text;background:var(--background);color:var(--foreground)}
+.c3 .c3dock .dk-p .form .ib.pri:disabled{opacity:1}
+.c3 .c3dock .dk-p .form .ib:disabled:not(.pri){opacity:1;cursor:default}
+.c3 .c3dock a.chip2.lk{text-decoration:none}
+.c3 .c3dock .dk-d{border-top:0}
+
+/* c3 tickets/docs/signals: the mockup's RACI grid and document coverage matrix (console3.html lines 839 to 843 and 870 to 876), plus small additions */
+.c3 .rcg{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,.5fr));gap:6px;align-items:center;font-size:var(--fs-2)}
+.c3 .rcg .h{font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-align:center;text-transform:uppercase}
+.c3 .rcg .c{display:grid;place-items:center;min-height:26px;border-radius:8px;font:600 var(--fs-2) var(--mono)}
+.c3 .rcg .c.R{background:var(--accw);color:var(--acc)}.c3 .rcg .c.A{background:var(--acc);color:var(--on-accent)}.c3 .rcg .c.C,.c3 .rcg .c.I{color:var(--muted-foreground)}
+.c3 .dxm{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,.55fr));gap:var(--sp-2) var(--sp-3);align-items:center;font-size:var(--fs-2)}
+.c3 .dxm.c4{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,.55fr))}
+.c3 .dxm .h{font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-transform:uppercase;text-align:center}
+.c3 .dxm .c{display:grid;place-items:center}
+.c3 .dxm .c i{width:14px;height:14px;border-radius:50%;background:var(--success)}
+.c3 .dxm .c i.w{background:transparent;border:3px solid var(--warning)}
+.c3 .dxm .c i.o{background:transparent;border:2px dashed var(--ring)}
+.c3 .dxm .c i.x{background:var(--destructive)}
+
+/* the deck's stance row and its gap, as the mockup draws them (console3.html line 2336: gap 8px; .ib.sm is 30px) */
+.c3 [data-c3pg="deck-host"] .brief,.c3 [data-c3pg="plan"] .brief{gap:8px}
+@media (min-width:761px){.c3 .stance .ib{width:30px;height:30px}}
+
+/* the review rows and the handled fold (console3.html lines 296 to 298, 474 to 475) */
+.c3 .src-dots{display:inline-flex;gap:3px;align-items:center}
+.c3 .src-dots i{width:6px;height:6px;border-radius:50%;background:var(--success)}
+.c3 .src-dots i.old{background:transparent;border:1.5px solid var(--warning)}
+.c3 .hx[hidden]{display:none}
+.c3 .chip2.lk[title^="Approving"]{cursor:default}
+.c3 [data-c3pg="trust"] .rowbtn{gap:10px}
+.c3 [data-c3pg="trust"] .rowbtn>.chips2:first-child{white-space:nowrap;flex:none}
+.c3 [data-c3pg="trust"] .rowbtn>.chips2:last-child{flex-wrap:wrap;justify-content:flex-end;min-width:0}
+.c3 [data-c3pg="trust"] [hidden]{display:none}
+/* the mockup draws the glow behind the Briefing's own deck only, not behind the plan row of the other tabs */
+.c3 [data-c3pg="plan"] .brief::before{display:none}
+
+/* c3 roadmap/breakdown: the mockup's .wform, .wbs, .wbed (console3.html lines 890 to 910 and 926 to 928) and the controls of the two sub-views */
+.c3 .wform{display:grid;gap:var(--sp-2);padding:var(--sp-3);border:1px dashed var(--ring);border-radius:10px;margin-bottom:var(--sp-2)}
+.c3 .wform input[type=number]{width:100%}
+.c3 .wbs .nrow{padding-block:8px}
+.c3 .wbs .chv{background:none;border:0;padding:0;width:20px;height:20px;display:grid;place-items:center;color:var(--muted-foreground);cursor:pointer;transition:transform .15s}
+.c3 .wbs .chv[aria-expanded=true]{transform:rotate(90deg)}
+.c3 .wbed{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--border);margin-top:8px}
+.c3 .wbed .lb{width:68px;font:500 var(--fs-1) var(--mono);letter-spacing:.06em;color:var(--muted-foreground);text-transform:uppercase;flex:none}
+.c3 .wbed input{flex:1;min-width:120px;font:inherit;font-size:var(--fs-3);border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:var(--card);color:var(--foreground)}
+.c3 .wbed .chip2 .chv{width:16px;height:16px}
+.c3 [data-in-view="roadmap"] .case,.c3 [data-in-view="breakdown"] .xi .wbed{margin-top:8px}
+.c3 [data-in-view="roadmap"] .opt{font:inherit;color:inherit;cursor:pointer}
+.c3.ph [data-in-view="roadmap"] .pill,.c3.ph [data-in-view="breakdown"] .pill,.c3.ph [data-in-view="roadmap"] .opt,.c3.ph [data-in-view="roadmap"] .wform input,.c3.ph [data-in-view="roadmap"] .wform select,
+.c3.ph [data-in-view="breakdown"] .wform input,.c3.ph [data-in-view="breakdown"] .wform select,.c3.ph [data-in-view="breakdown"] .wbed input{min-height:44px}
+.c3.ph [data-in-view="roadmap"] .ib,.c3.ph [data-in-view="breakdown"] .ib,.c3.ph [data-in-view="breakdown"] .chv{min-width:44px;min-height:44px}
+@media (max-width:760px){.c3 [data-c3pg="below-line"],.c3 [data-c3pg="trust"] .rowbtn,.c3 [data-c3pg="handled"] .rowbtn{min-height:44px}}
+
+/* ===== console3 shared primitives: c3-sheet.js, c3-case.js, c3-swipe.js, c3-expand.js =====
+ * Lifted from console3.html: .sheet.wide (line 227), .sheet.dw (914), .ph .sheet.wide (182). Colours use --acc/--accent only. */
+.c3 .sheet.wide{width:600px}
+.c3.ph .sheet.wide{width:auto}
+@media (min-width:761px){.c3 .sheet.dw{width:min(780px,calc(100% - 24px))}}
+@media (max-width:760px){.c3 .sheet.dw{max-height:92%}}
+.c3 .sheet:focus{outline:none}
+.c3 .sheet.bs.dragging{transition:none}
+.c3 .sheet .sh2 .ib{flex:none}
+@media (prefers-reduced-motion:reduce){.c3 .sheet,.c3 .scrim,.c3.ph .sheet.bs{animation:none}}
+/* a slide that cannot be used: the action goes outside and no outbox is connected. The reason sits under it (c3-case.js). */
+.c3 .slt.off{opacity:.55;--tc:var(--muted-foreground)}
+.c3 .slt.off .th{cursor:not-allowed;animation:none}
+.c3 .slt.off .lb{animation:none}
+.c3 .slt-why{display:flex;gap:6px;align-items:center;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+/* the thumb keeps its look and gets a 44px hit area on any width */
+.c3 .slt .th::after{content:"";position:absolute;inset:-4px}
+/* a swipe reveals the action's label beside its icon (c3-swipe.js) */
+.c3 .rv{display:inline-flex;gap:4px;align-items:center}
+.c3 .rv .rvl{font:500 var(--fs-1) var(--mono);letter-spacing:.04em;white-space:nowrap}
+.c3 .nrow[data-swipe],.c3 .drow[data-swipe]{touch-action:pan-y}
+.c3 .nrow[data-swipe]:focus-visible,.c3 .drow[data-swipe]:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+.c3.ph .opt,.c3.ph .nrow[data-swipe],.c3.ph .drow[data-swipe]{min-height:44px}
+.c3 .case .conf-fig{font:600 var(--fs-1) var(--mono);color:var(--tc)}
+
+/* ── Reports interactions (report-families-view.js): the undo toast, the demo's hidden outbox host, 44px controls on a phone ── */
+.c3.c3e.c3rp-toast{display:flex;font-family:var(--sans);position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;gap:var(--sp-3);align-items:center;max-width:calc(100vw - 32px);padding:10px 14px;border-radius:12px;background:var(--foreground);color:var(--background);font-size:var(--fs-3);box-shadow:0 8px 28px rgba(0,0,0,.25);animation:c3-toastin .25s}
+.c3.c3e.c3rp-toast .chip2{color:var(--background);border-color:currentColor;min-height:32px;border:0;text-decoration:underline;font-family:var(--sans)}
+.c3 [data-c3pg="outbox-host"][data-rp-hide]{display:none}
+.c3 .nrow.cutr .tt{text-decoration:line-through}
+.c3.ph .pill,.c3.ph .nrow .chip2.lk,.c3.ph .nrow .chip2[disabled],.c3.ph .c3rp-toast .chip2{min-height:44px}
+.c3.ph .ib.sm[data-a="docopen"]{min-width:44px;min-height:44px}
+.c3 [data-report-families] .lkrow{margin:var(--sp-4) 0 4px}
+
+/* ===== console3 wave C3: the meeting card, the stage, the case sheets, the pulse press and the dock (calendar-views.js, c3-dock.js) ===== */
+.c3 .vday .vb.hot{background:var(--destructive);background:oklch(from var(--destructive) l calc(c * .81) h)}
+.c3 .rdet .st.lk{font:inherit}
+.c3 .rdet .rr .st{display:inline}
+.c3 .krw{display:grid}
+.c3 .krw>.xp{padding:0 var(--sp-1)}
+.c3 .krw>.krg[aria-expanded="true"]{border-bottom-color:transparent}
+.c3 [data-cv="stage-head"]{gap:var(--sp-2)}
+.c3 [data-c3pg-prow]{cursor:pointer}
+.c3 [data-c3pg-prow][hidden]{display:none}
+.c3 .pbs>span[role="button"]{position:relative;cursor:pointer;transition:opacity .2s,transform .15s}
+.c3 .pbs>span[role="button"]:hover{transform:scaleY(1.5)}
+.c3 .pbs>span[role="button"]::after{content:"";position:absolute;inset:-17px 0}
+.c3 .chart .hit:focus-visible,.c3 svg.pg g[role="button"]:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
+.c3 [data-cv-cell][data-cv-ev]{min-height:24px}
+.c3 .dk-confirm{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:var(--fs-2)}
+@media (max-width:760px){
+  .c3 .rdet .chip2,.c3 .rdet .st.lk,.c3 [data-cv="stage"] .sgb,.c3 [data-cv="stage"] .chip2,.c3 [data-cv="stage"] .ib,.c3 .dotb{min-height:44px;min-width:44px}
+  .c3 .rdet .st.lk{display:inline-flex;align-items:center}
+  .c3 [data-c3pg-prow]{min-height:44px}
+  .c3 [data-cv-ev]{min-height:44px;display:inline-flex!important;align-items:center}
+  .c3 .c3dock .dk-p .form .ib,.c3 .dk-confirm .chip2,.c3 .dk-confirm .ib{min-height:44px;min-width:44px}
+}
+
+/* ── Work tab: toast buttons and case-file extras (pm-work-view.js) ── */
+.c3.c3e.c3rp-toast.err{background:var(--destructive);color:var(--on-accent)}
+.c3 .case .cft .chip2.lk[aria-expanded]{margin-left:auto}
+.c3 .c3jf[hidden]{display:none}
+.c3 .case .c3slide .slt:not(.off):not(.alt){--tc:var(--acc) !important}
+.c3 .br>button.bn:hover{color:var(--foreground)}
+.c3 .br>button.bn[aria-current="true"]{color:var(--foreground)}
+@media (max-width:760px){.c3 .br>button.bn{min-height:44px}}
+.c3.ph .case .chip2.lk,.c3.ph .case .c3steps .pill{min-height:44px}
+
+/* ===== console3 Briefing and global behaviour: the toast, the palette, why-each-element, the case file in a row, the bell's unread dot =====
+ * Lifted from console3.html: .toast (152 to 153, 245), .pal (146 to 151), .why-on and .whyp (308 to 315), .incident (99), .nli .u (507). Mockup variables to D38 tokens
+ * (--fg/--bg/--bad to --foreground/--background/--destructive); the brand colour is --acc. */
+.c3 .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--foreground);color:var(--background);padding:8px 14px;display:flex;gap:14px;align-items:center;font-size:var(--fs-3);z-index:40;max-width:calc(100vw - 32px);border-radius:8px;box-shadow:var(--sh3);animation:c3-toastin .4s cubic-bezier(.34,1.56,.64,1)}
+.c3 .toast button{background:transparent;border:0;color:inherit;text-decoration:underline;padding:0 6px;min-height:44px;min-width:44px;font:inherit;cursor:pointer}
+@keyframes c3-toastin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translateX(-50%)}}
+@media (prefers-reduced-motion:reduce){.c3 .toast{animation:none}}
+.c3 .pal{position:fixed;inset:0;background:oklch(0 0 0 / 30%);z-index:30;display:grid;place-items:start center;padding-top:12vh}
+.c3 .pal>div{width:min(480px,92vw);background:var(--card);border:1px solid var(--ring);border-radius:12px;overflow:hidden;animation:c3-fadein .15s;box-shadow:var(--sh3)}
+.c3 .pal input{width:100%;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:12px 14px;font-size:var(--fs-4);background:transparent;color:var(--foreground);min-height:44px}
+.c3 .pal input:focus{outline:none}
+.c3 .pal ul{max-height:50vh;overflow:auto;margin:0;padding:0;list-style:none}
+.c3 .pal li button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:transparent;padding:8px 14px;min-height:44px;text-align:left;color:inherit;font:inherit;cursor:pointer}
+.c3 .pal li button[aria-selected=true],.c3 .pal li button:focus-visible{background:var(--muted);outline:none}
+@media (hover:hover){.c3 .pal li button:hover{background:var(--muted)}}
+.c3 .why-on [data-n]{position:relative;outline:1px dashed color-mix(in oklab,var(--acc) 60%,transparent);outline-offset:3px;border-radius:10px}
+.c3 .why-on [data-n]::before{content:attr(data-n);position:absolute;top:-9px;left:-9px;z-index:4;width:20px;height:20px;border-radius:6px;background:var(--acc);color:var(--on-accent);font:600 var(--fs-1) var(--mono);display:grid;place-items:center;box-shadow:var(--sh2)}
+.c3 .why-on [data-n].wy{outline:2px solid var(--acc);outline-offset:4px;animation:c3-wy 1.8s ease-in-out infinite}
+@keyframes c3-wy{50%{outline-color:color-mix(in oklab,var(--acc) 30%,transparent)}}
+@media (prefers-reduced-motion:reduce){.c3 .why-on [data-n].wy{animation:none}}
+.c3 .whyp{position:fixed;left:16px;bottom:16px;width:340px;max-width:calc(100vw - 32px);z-index:15;border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:grid;gap:8px;animation:c3-fadein .25s}
+.c3 .whyp b.n{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:6px;background:var(--acc);color:var(--on-accent);font:600 var(--fs-1) var(--mono);margin-right:6px}
+.c3 .incident{border:1px solid var(--destructive);color:var(--destructive);padding:10px 14px;border-radius:8px;display:flex;gap:10px;align-items:center;margin:0 var(--sp-3) var(--sp-2)}
+.c3 .incident .dim{color:var(--muted-foreground)}
+.c3 .nli .w{display:grid;gap:4px;justify-items:end}
+.c3 .nli .u{width:8px;height:8px;border-radius:50%;background:var(--acc)}
+.c3.noscrim:not(.ph) .scrim{display:none}
+/* a case file inside a row: the agent's block, and the options and the slide hidden while a run is on */
+.c3 .case.ag-busy .opts,.c3 .case.ag-busy .c3slide{display:none}
+.c3 .c3res2{display:grid;gap:var(--sp-2)}
+.c3 .c3res2 .tbl{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
+.c3 .c3res2 .tbl th,.c3 .c3res2 .tbl td{text-align:left;padding:4px 8px;border-bottom:1px solid var(--border)}
+.c3 .nrow .xp .case{margin-top:var(--sp-2)}
+/* the row's swipe strips draw the label beside the icon; the key hint of the case sits under the row */
+.c3 .nrow .tt,.c3 .drow .tt{cursor:pointer}
+/* controls on the Briefing keep a 44px hit area on a phone, without changing how they look */
+.c3.ph .chip2.lk,.c3.ph .pill,.c3.ph .rowbtn,.c3.ph .nrow .av,.c3.ph .drow .av{min-height:44px}
+.c3 button.av{position:relative;border:0;cursor:pointer}
+.c3 button.av::after{content:"";position:absolute;inset:-11px}
+.c3 .pbs>button{position:relative}
+.c3 .pbs>button::after{content:"";position:absolute;inset:-17px 0}
+.c3 .pbs>button[aria-pressed=true]{transform:scaleY(1.5)}
+.c3 .pseg:focus-visible,.c3 .prow:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+/* the phone preview: a 390px frame over the page, the page itself in an iframe so its own phone layout answers */
+.c3 .c3pg-prev{position:fixed;inset:0;z-index:25;display:grid;place-items:center;align-content:center;gap:var(--sp-2);pointer-events:none}
+.c3 .c3pg-prev>*{pointer-events:auto}
+.c3 .c3pg-prev>button{justify-self:center}
+.c3 .c3pg-mi[disabled]{opacity:.5;cursor:not-allowed}
+.c3 .c3pg-menu .c3pg-mi{min-height:44px}
+
+/* Initiatives rows, cases and sheets (c3-roadmap, c3-breakdown, c3-tickets, c3-docs, c3-doc-sheet, c3-signals, lifecycle-lens, new-initiative-sheet) */
+/* the slide inside a case takes the page accent: slide-confirm.js sets --tc to --accent, which is a near-white grey on this page */
+.c3 .case .slt:not(.alt):not(.off){--tc:var(--acc) !important}
+.c3 [data-in-view="signals"] .sgr .spk{align-self:start}
+.c3pop .wbed{border-top:0;margin-top:0;padding-top:0}
+.c3pop .dsec .dt[contenteditable]{min-height:44px}
+.c3 .rv .rvl{font:var(--fs-1) var(--mono);margin-left:6px}
+.c3 [data-rm-off] input{width:100%;font:inherit;font-size:var(--fs-3);padding:8px 10px;border:1px solid var(--ring);border-radius:8px;background:var(--card);color:var(--foreground);min-height:44px}
+.c3 .xi .fold .c3slide{margin-top:var(--sp-2)}
+@media (max-width:640px){
+  .c3.ph .nrow .chip2.lk,.c3.ph .sgr .chip2.lk,.c3.ph .xi .chip2.lk,.c3pop.ph .chip2.lk{min-height:44px}
+  .c3.ph .nrow .pill,.c3.ph .xi .pill,.c3pop.ph .pill,.c3pop.ph .seg button,.c3pop.ph .ib,.c3pop.ph .wbed input,.c3pop.ph .dpn input,.c3pop.ph .dpn textarea{min-height:44px}
+  .c3pop.ph .ib{min-width:44px}
+  .c3.ph .xi .opt{min-height:44px}
+}
+@media (max-width:640px){
+  .c3pop.ph .seg button{min-width:44px}
+}
+
+/* ── the shared toast (pm/c3-toast.js): the error tone ── */
+.c3 .toast.err{background:var(--destructive);color:var(--on-accent)}
+
+/* ── the dock under the mockup's class names (`dock`, `dock rail`), so a selector written for the mockup finds it; the phone rule that hides `.dock` must not hide this one ── */
+.c3.ph .c3dock.dock:not([hidden]){display:flex!important}
+.c3 .c3dock .dk-p .form input[data-off]{opacity:1;cursor:not-allowed;background:var(--background);color:var(--foreground)}
+.c3 .ib[data-off]{opacity:.5;cursor:not-allowed}
+
+/* ── Work: the jobs card's "All N items" block and the + New job line, as the mockup draws them (console3.html lines 949-954) ── */
+.c3 .c3all{display:grid;gap:var(--sp-2);font-size:var(--fs-2)}
+.c3 .c3all>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--sp-2);align-items:baseline}
+.c3 .c3all>div>span:last-child{display:grid;gap:2px}
+.c3 .c3all .dn{text-decoration:line-through;color:var(--muted-foreground)}
+.c3 .c3all>div.hd{grid-template-columns:1fr;font-size:var(--fs-2)}
+.c3 .c3jnew{list-style:none;padding:var(--sp-2) 0}
+/* the More menu hangs off the page root, fixed under its button: no ancestor can clip it or stack over it */
+.c3 .c3pg-menu{position:fixed;right:auto;z-index:90;overflow:auto}
+.c3 .c3pg-kbd{margin-left:auto;font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
+
+/* ── Calendar: the recording dot on the Calendar tab, the After notes, the Week time grid (calendar-views.js, shell-recording.js) ── */
+.c3 [role="tab"][data-c3-tab]{position:relative}
+.c3 [data-c3-tab] .shell-recdot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--destructive);box-shadow:0 0 0 2px var(--background)}
+.c3 [data-c3-tab] .shell-recdot[hidden]{display:none}
+.c3 .recg .rt{max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.c3 [data-cv="notes"] .tbl select{min-height:32px;max-width:100%;font:var(--fs-2) var(--mono)}
+.c3 [data-cv="week-grid"] .wb{cursor:pointer}
+.c3 [data-cv="week-grid"] .wb:focus-visible rect:first-of-type,.c3 svg.pg .pgrow:focus-visible rect{outline:2px solid var(--ring)}
+@media (max-width:760px){.c3 [data-cv="notes"] .tbl select{min-height:44px}.c3 [data-cv="notes"] .tbl{display:block;overflow-x:auto}}
+
+/* ── Lifecycle panels (console3 wave L1). Lifted from console3.html lines 835 to 858 (.evm, .gt, .gtr, .sc, .scr, .sct), with the same token map as above.
+ * Additions the mockup does not have: a gate that is not applicable or that the engine does not claim (.gt i.na, .gt i.u), the add forms of the empty states (.lfm), and the
+ * untraced flag. ── */
+.c3 .evm{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.5fr));gap:var(--sp-2) var(--sp-3);align-items:center;font-size:var(--fs-2)}
+.c3 .evm .h{font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-transform:uppercase;text-align:center}
+.c3 .evm .c{display:grid;place-items:center}
+.c3 .evm .c i{width:14px;height:14px;border-radius:50%;background:var(--success)}
+.c3 .evm .c i.o{background:transparent;border:2px dashed var(--ring)}
+.c3 .evm .c i.x{background:var(--destructive)}
+.c3 .gt{display:flex;gap:6px;align-items:center}
+.c3 .gt i{flex:1;height:8px;border-radius:4px;background:var(--muted)}
+.c3 .gt i.d{background:var(--success)}
+.c3 .gt i.h{background:linear-gradient(90deg,var(--success) 50%,var(--muted) 50%)}
+.c3 .gt i.na{background:transparent;border:1px dashed var(--ring);opacity:.6}
+.c3 .gt i.u{background:repeating-linear-gradient(135deg,var(--muted) 0 4px,transparent 4px 8px);border:1px solid var(--border)}
+.c3 .gtr{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;font-size:var(--fs-2);padding:6px 0;border-bottom:1px solid var(--border)}
+.c3 .gtr:last-child{border-bottom:0}
+.c3 .sc{display:grid;gap:var(--sp-3)}
+.c3 .scr{display:grid;gap:4px}
+.c3 .scr .l{display:flex;justify-content:space-between;font-size:var(--fs-2)}
+.c3 .scr .tk{position:relative;height:10px;border-radius:5px;background:var(--muted)}
+.c3 .scr .tk u{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--c);text-decoration:none}
+.c3 .scr .tk s{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--foreground);text-decoration:none}
+.c3 .sct{width:100%;height:auto;display:block}
+.c3 .sct text{font:var(--fs-1) var(--mono);fill:var(--muted-foreground)}
+.c3 .sct .t{fill:var(--foreground)}
+.c3 .sct circle{cursor:pointer;transition:r .15s}
+.c3 .sct circle:hover{stroke:var(--foreground);stroke-width:2}
+.c3 .gtl{display:grid;grid-template-columns:repeat(6,1fr);font:var(--fs-1) var(--mono);color:var(--muted-foreground);text-align:center}
+.c3 .lfm{display:grid;gap:var(--sp-2);margin-top:var(--sp-2)}
+.c3 .lfm label{display:grid;gap:2px;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+.c3 .lfm input,.c3 .lfm select{min-height:44px;padding:0 var(--sp-3);border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--foreground);font:var(--fs-3) var(--sans)}
+.c3 .lfm .row2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
+.c3 .lfm button{min-height:44px}
+.c3 .lfm .err{color:var(--destructive);font-size:var(--fs-2)}
+.c3 .st.unt{color:var(--warning)}
+@container (max-width:520px){.c3 .gtr{grid-template-columns:minmax(0,1fr) auto}.c3 .gtr>.hbs{grid-column:1/-1;order:3}.c3 .lfm .row2{grid-template-columns:1fr}}
+.c3.ph .gtr{grid-template-columns:minmax(0,1fr) auto}.c3.ph .gtr>.hbs{grid-column:1/-1;order:3}.c3.ph .lfm .row2{grid-template-columns:1fr}
+.c3 .c3top .recg{position:relative;z-index:31}   /* the recording controls stay above the centred banner, which a long tools row can run under */
+
+/* console3.css addition (Calendar Quarter and Year, c3-cal-strategy.js): the mockup's .syn grid (lines 679 to 685) and .nsm (690, 694), the .c3 prefix and
+ * the D38 tokens in place of the mockup's names. The grid's column count is set inline, because a repository has as many key results as it has. */
+.c3 .syn{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:6px;align-items:center}
+.c3 .syn .h{font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;text-align:center;display:grid;justify-items:center;gap:2px;min-width:0;overflow-wrap:anywhere}
+.c3 .syn .l{font-size:var(--fs-2);line-height:1.3;min-width:0;overflow-wrap:anywhere}
+.c3 .syn .c{display:flex;justify-content:center;gap:3px;min-height:20px;align-items:center}
+.c3 .syn .c i{width:10px;height:10px;border-radius:50%;background:var(--acc)}
+.c3 .syn .c i.o{background:transparent;border:1.5px dashed var(--ring)}
+.c3 .syn .c.gap{color:var(--destructive);font:var(--fs-1) var(--mono)}
+.c3 .nsm{width:100%;height:auto}
+.c3 .nsm text{font:var(--fs-1) var(--mono);fill:var(--muted-foreground)}
+.c3 [data-cs] .sgr{min-height:44px}
+.c3 [data-cs="deck"] .dkd{position:relative}
+.c3 .cs-empty{display:grid;gap:6px}
+.c3 .cs-empty .fold{align-items:flex-start}
+
+/* Timeline (c3-timeline.js): the track follows the number of checks (the mockup has exactly five), a check is a 44px target, and the forecast matrix is a table. */
+.c3 .sntrack[data-n]::before{left:calc(50% / var(--n));right:calc(50% / var(--n))}
+.c3 .sntrack .sn{min-height:44px;align-content:start;padding-top:2px}
+.c3 .fcm{width:100%;border-collapse:collapse;display:table}
+.c3 .fcm td,.c3 .fcm th{padding:6px 8px;font-size:var(--fs-2);text-align:center}
+.c3 .fcm td button{width:100%;min-height:44px;border:0;border-radius:6px;padding:4px 2px;background:transparent;font:var(--fs-2) var(--mono);cursor:pointer}
+.c3.ph .recg>*{min-height:44px;min-width:44px;height:44px}
+.c3.ph [data-cv="notes"] .link,.c3.ph [data-cv="notes"] .ib.pri{min-height:44px;min-width:44px}
+.c3.ph [data-cv="notes"] a{display:inline-flex;align-items:center;min-height:44px}
+
+/* ===== The Terminal page and the run cards (c3-terminal.js, sessions-panel.js, run-card.js, c3-terminal-results.js, c3-terminal-edge.js) =====
+ * From agent-surfaces.html: .card (here .c3t-card), .tag/.lab, .claims, .tl, .q, .ci, .ask, .fail, .raw, .draft, .run, .prog, .filebox, .dk (deck), .tbl, .dg,
+ * .tlr (the Past timeline), .edge. Colours are the console's own tokens: the mockup's ok, warn, bad, opp are --success, --warning, --destructive, --purple. */
+.c3 .c3t-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:var(--sp-4);display:grid;gap:var(--sp-3);touch-action:pan-y;min-width:0;transition:transform .18s,border-color .2s}
+.c3 .c3t-card.busy{border-color:var(--acc)}
+.c3 .c3t-card.flash{animation:c3-c3tfl 1.2s}
+@keyframes c3-c3tfl{0%,60%{box-shadow:0 0 0 3px color-mix(in oklab,var(--acc) 14%,transparent)}100%{box-shadow:none}}
+.c3 .c3t-card[data-swipe]>*:not(.rv){transform:translateX(calc(var(--dx,0px)*.55));transition:transform .28s cubic-bezier(.3,1.3,.5,1)}
+.c3 .c3t-card[data-swipe].dr>*{transition:none}
+.c3 .c3t-card[data-swipe].dr{cursor:grabbing;user-select:none}
+.c3 .c3t-card[data-swipe]:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+.c3 .c3t-card .top{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
+.c3 .c3t-card .top>.dim:last-child{margin-left:auto}
+.c3 .c3t-card h3{font-size:var(--fs-5);line-height:1.3;font-weight:600;margin:0;text-wrap:balance;overflow-wrap:anywhere}
+.c3 .c3t-card .dim{color:var(--muted-foreground)}
+.c3 .c3t-run{display:grid;gap:var(--sp-2)}
+.c3 .c3t-run .line{display:flex;align-items:center;gap:var(--sp-2)}
+.c3 .c3t-run .line .t{flex:1;min-width:0;font:var(--fs-2) var(--mono);color:var(--acc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.c3 .c3t-obs{display:flex;gap:6px;flex-wrap:wrap}
+.c3 .c3t-obs .chip2{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
+.c3 .prog{display:flex;gap:3px}
+.c3 .prog i{flex:1;height:3px;border-radius:2px;background:var(--border);transition:background .3s}
+.c3 .prog i.d{background:var(--acc)}
+.c3 .c3t-card .ask,.c3 .c3t-node .ask,.c3 .c3t-card .fail{display:grid;gap:var(--sp-2);border:1px solid var(--warning);background:color-mix(in oklab,var(--warning) 9%,transparent);border-radius:10px;padding:var(--sp-3)}
+.c3 .c3t-card .fail{border-color:var(--destructive);background:color-mix(in oklab,var(--destructive) 8%,transparent)}
+.c3 .c3t-card .fail.w{border-color:var(--warning);background:color-mix(in oklab,var(--warning) 9%,transparent)}
+.c3 .raw{background:var(--muted);border-radius:8px;padding:var(--sp-2) var(--sp-3);font:var(--fs-1)/1.6 var(--mono);color:var(--muted-foreground);overflow-wrap:anywhere;white-space:pre-wrap}
+.c3 .c3t-card .draft{background:var(--muted);border-radius:10px;padding:var(--sp-3);font-size:var(--fs-3);white-space:pre-wrap;overflow-wrap:anywhere}
+.c3 .c3t-tray{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
+.c3 .c3t-tray input,.c3 .c3t-panel input{flex:1;min-width:120px;border:1px solid var(--border);border-radius:99px;padding:6px 12px;background:var(--card);color:var(--foreground);font:inherit;font-size:var(--fs-2)}
+.c3 .c3t-tray input[readonly],.c3 .c3t-panel input[readonly]{opacity:.6;cursor:not-allowed}
+.c3 .c3t-card .pill.rec{background:var(--acc);color:var(--on-accent);border-color:var(--acc)}
+.c3 .c3t-card .pill.on,.c3 .c3t .pill.on{background:color-mix(in oklab,var(--acc) 12%,transparent);color:var(--acc);border-color:var(--acc)}
+.c3 .c3t-card .pill:disabled{opacity:.5;cursor:not-allowed}
+.c3 .dotp{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none;display:inline-block;animation:c3-c3tbl 1s infinite alternate}
+@keyframes c3-c3tbl{to{opacity:.35}}
+/* claims and their labels */
+.c3 .lab{font:500 var(--fs-1)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:4px;flex:none;width:92px;text-align:center;display:inline-block}
+.c3 .l-fact{background:color-mix(in oklab,var(--success) 16%,transparent);color:var(--success)}
+.c3 .l-est{background:color-mix(in oklab,var(--warning) 18%,transparent);color:var(--warning)}
+.c3 .l-ass{background:var(--muted);color:var(--muted-foreground)}
+.c3 .l-rep{background:color-mix(in oklab,var(--purple) 16%,transparent);color:var(--purple)}
+.c3 .l-unl{background:transparent;color:var(--destructive);border:1px dashed var(--destructive)}
+.c3 .l-obs{background:var(--muted);color:var(--muted-foreground)}
+.c3 .l-you{background:color-mix(in oklab,var(--acc) 12%,transparent);color:var(--acc)}
+.c3 .c3t-claims{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none}
+.c3 .c3t-claims li,.c3 .c3t-bul{display:flex;gap:var(--sp-2);align-items:baseline;min-width:0}
+.c3 .c3t-claims li>span:last-child,.c3 .c3t-bul>span:last-child{min-width:0;overflow-wrap:anywhere}
+.c3 .c3t-src{font-size:var(--fs-1)}
+/* heroes */
+.c3 .c3t-tl{position:relative;height:46px}
+.c3 .c3t-tl .axis{position:absolute;left:0;right:0;top:22px;height:2px;background:var(--border)}
+.c3 .c3t-tl .gap{position:absolute;top:20px;height:6px;border-radius:3px;background:color-mix(in oklab,var(--destructive) 55%,transparent)}
+.c3 .c3t-tl .mk{position:absolute;top:14px;width:2px;height:18px;background:var(--foreground)}
+.c3 .c3t-tl .mk span{position:absolute;white-space:nowrap;font:var(--fs-1) var(--mono);color:var(--muted-foreground);transform:translateX(-50%);left:1px}
+.c3 .c3t-tl .pr span{top:-14px}
+.c3 .c3t-tl .fc{background:var(--acc)}
+.c3 .c3t-tl .fc span{top:20px;color:var(--acc)}
+.c3 .c3t-q{margin:0;padding:var(--sp-2) var(--sp-3);border-left:3px solid var(--purple);background:var(--muted);border-radius:0 8px 8px 0;font-size:var(--fs-3)}
+.c3 .c3t-q cite{display:block;font:var(--fs-1) var(--mono);color:var(--muted-foreground);font-style:normal;margin-top:4px}
+.c3 .c3t-ci{display:flex;align-items:center;gap:var(--sp-1)}
+.c3 .c3t-ci i{width:28px;height:10px;border-radius:3px;background:var(--border)}
+.c3 .c3t-ci i.ok{background:var(--success)}.c3 .c3t-ci i.bad{background:var(--destructive)}.c3 .c3t-ci i.run{background:var(--acc);animation:c3-c3tbl 1s infinite alternate}
+.c3 .c3t-ci .dim{margin-left:var(--sp-2)}
+/* result bodies */
+.c3 .c3t-opts{display:grid;gap:var(--sp-2)}
+.c3 .c3t-opts .opt-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--sp-3);padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:10px}
+.c3 .c3t-opts .opt-r.rec{border-color:var(--acc);background:color-mix(in oklab,var(--acc) 10%,transparent)}
+.c3 .c3t-file{border:1px solid var(--border);border-radius:10px;overflow:hidden}
+.c3 .c3t-file .fh{display:flex;gap:var(--sp-2);align-items:center;padding:var(--sp-2) var(--sp-3);background:var(--muted);flex-wrap:wrap}
+.c3 .c3t-file .fh b{flex:1;min-width:0}
+.c3 .c3t-file .fb{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-2)}
+.c3 .c3t-file .ft{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--border);overflow-wrap:anywhere}
+.c3 .c3t-md h4{margin:var(--sp-2) 0 2px;font-size:var(--fs-3)}.c3 .c3t-md p{margin:2px 0}.c3 .c3t-md ul{margin:2px 0;padding-left:18px}
+.c3 .c3t-note{margin:0;font-size:var(--fs-3)}
+.c3 .c3t-dk{position:relative;border:1px solid var(--border);border-radius:12px;overflow:hidden;touch-action:pan-y;user-select:none;display:block}
+.c3 .c3t-dk .sl{padding:var(--sp-4);min-height:170px;display:flex;flex-direction:column;gap:var(--sp-2)}
+.c3 .c3t-dk .sl h4{margin:0;font-size:var(--fs-5);font-weight:600}
+.c3 .c3t-dk .nv{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--border);background:var(--muted)}
+.c3 .c3t-dk .nv .dim{flex:1;text-align:center}
+.c3 .c3t-deck .foot{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2);justify-content:space-between}
+.c3 .c3t-tbl .tw{overflow-x:auto}
+.c3 .c3t-tbl .tbl{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
+.c3 .c3t-tbl .tbl td,.c3 .c3t-tbl .tbl th{padding:6px 10px 6px 0;border-bottom:1px solid var(--border);text-align:left}
+.c3 .c3t-tbl .tbl td.n,.c3 .c3t-tbl .tbl th.n{font-family:var(--mono);text-align:right}
+.c3 .c3t-th{background:none;border:0;padding:0 4px;font:inherit;color:inherit;cursor:pointer;white-space:nowrap;min-height:44px}
+.c3 .c3t-dg .dg{border:1px solid var(--border);border-radius:10px;background:var(--card);overflow:auto}
+.c3 .c3t-dg svg{display:block;max-width:100%;height:auto}
+.c3 .c3t-dg .nd{fill:var(--card);stroke:var(--border);stroke-width:1.5}.c3 .c3t-dg .cp{stroke:var(--acc);fill:color-mix(in oklab,var(--acc) 12%,transparent)}
+.c3 .c3t-dg text{fill:var(--foreground);font:500 12px var(--mono)}.c3 .c3t-dg .ed{stroke:var(--muted-foreground);fill:none;stroke-width:1.5}.c3 .c3t-dg .ec{stroke:var(--acc);fill:none;stroke-width:2.5}
+.c3 .c3t-dg summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
+.c3 .c3t-draft{display:grid;gap:var(--sp-2)}
+.c3 .sayb{display:grid;gap:4px}
+.c3 .sayb .m{padding:6px 12px;border-radius:12px;max-width:100%;overflow-wrap:anywhere}
+.c3 .sayb .m.me{justify-self:end;background:var(--acc);color:var(--on-accent)}.c3 .sayb .m.bot{background:var(--muted)}
+.c3 .c3t-back{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--sp-3);margin:0;font:var(--fs-2) var(--mono)}
+.c3 .c3t-back dt{color:var(--muted-foreground)}.c3 .c3t-back dd{margin:0;overflow-wrap:anywhere}
+/* the page and its groups */
+.c3 .c3t-page{display:grid;gap:var(--sp-3);min-width:0}
+.c3 .c3t-demo select{border:1px solid var(--border);border-radius:99px;padding:6px 12px;background:var(--card);color:var(--foreground);font:var(--fs-2) var(--sans);max-width:100%}
+.c3 .c3t-note{min-height:0}
+.c3 .c3t-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-3);align-items:start}
+.c3 .c3t-cards>*{min-width:0}
+.c3 .c3t-sect{display:grid;gap:var(--sp-2)}
+.c3 .c3t-sect .sh2{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
+.c3 .c3t-sect .sh2 h2{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--fs-4)}
+.c3 .c3t .c3t-row{cursor:pointer}
+.c3 .c3t .c3t-row .xp{cursor:default}
+.c3 .c3t .c3t-row .xi{display:grid;gap:var(--sp-2);padding-top:var(--sp-2)}
+.c3 .c3t-chev{color:var(--muted-foreground);align-self:center;transition:transform .2s}
+.c3 .c3t-row[aria-expanded="true"] .c3t-chev{transform:rotate(90deg)}
+.c3 .c3t-sw{width:52px;min-height:44px;background:none;border:0;padding:0;display:inline-flex;align-items:center;cursor:pointer}
+.c3 .c3t-sw i{display:block;width:36px;height:20px;border-radius:99px;background:var(--border);position:relative}
+.c3 .c3t-sw i::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:6px;background:var(--on-accent);transition:transform .15s}
+.c3 .c3t-sw[aria-checked="true"] i{background:var(--acc)}.c3 .c3t-sw[aria-checked="true"] i::after{transform:translateX(16px)}
+.c3 .c3t-sw:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+.c3 .c3t-panel{display:grid;gap:var(--sp-2);border:1px solid var(--border);border-radius:10px;padding:var(--sp-3)}
+.c3 .c3t-panel .feed{display:flex;flex-direction:column;gap:var(--sp-2);max-height:220px;overflow:auto}
+.c3 .c3t-panel .m{padding:6px 12px;border-radius:12px;max-width:88%;overflow-wrap:anywhere}
+.c3 .c3t-panel .m.me{align-self:flex-end;background:var(--acc);color:var(--on-accent)}.c3 .c3t-panel .m.bot{background:var(--muted)}
+.c3 .c3t-panel .m.st{color:var(--muted-foreground);font:var(--fs-2) var(--mono);padding:0}
+.c3 .c3t-tl2 .tlr{display:flex;gap:var(--sp-2);align-items:baseline;padding:6px 0;border-bottom:1px solid var(--border)}
+.c3 .c3t-tl2 .tlr .lab{width:78px}
+.c3 .c3t-edge{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--sp-4);align-items:start}
+.c3 .elist{display:flex;flex-direction:column;gap:2px}
+.c3 .elist .eh{margin-top:var(--sp-3);font:500 var(--fs-1) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
+.c3 .elist button{text-align:left;padding:8px 12px;border-radius:8px;color:var(--muted-foreground);font-size:var(--fs-3);width:100%;background:none;border:0;min-height:44px;cursor:pointer}
+.c3 .elist button[aria-pressed="true"]{background:color-mix(in oklab,var(--acc) 12%,transparent);color:var(--acc)}
+.c3 .c3t-node{border:1px solid var(--border);border-radius:12px;padding:var(--sp-3);display:grid;gap:var(--sp-3);background:var(--card);min-width:0}
+.c3 .c3t-node .top{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
+.c3 .c3t-node .tm{display:grid;gap:var(--sp-2)}
+@media (max-width:760px){
+  .c3 .c3t-edge{grid-template-columns:minmax(0,1fr)}
+  .c3 .c3t .pill,.c3 .c3t-card .pill,.c3 .c3t-card .ib,.c3 .c3t .ib,.c3 .c3t .chip2.lk,.c3 .c3t-card .chip2.lk,.c3 .c3t-card select,.c3 .c3t-demo select,.c3 .c3t-tray input,.c3 .c3t-panel input,.c3 .c3t .seg button{min-height:44px}
+  .c3 .c3t .ib,.c3 .c3t-card .ib{min-width:44px}
+  .c3 .c3t-cards{grid-template-columns:minmax(0,1fr)}
+  .c3 .c3t-card{padding:var(--sp-3)}
+}
+@media (prefers-reduced-motion:reduce){.c3 .c3t-card.flash,.c3 .dotp,.c3 .c3t-ci i.run{animation:none}.c3 .c3t-card[data-swipe]>*:not(.rv){transition:none}}
+/* the header and dock icons: the agent button (spark) and the terminal button (>_) are told apart by a thin ring on the agent one */
+.c3 .c3top .ib[data-c3pg="agent-button"]{border-color:color-mix(in oklab,var(--acc) 45%,var(--border))}
+.c3 .c3top .ib[data-c3pg="agent-button"] .ic{color:var(--acc)}
+.c3 .c3dock .dk-h .ib[data-c3pg="dock-agent"] .ic{color:var(--acc)}
+.c3 .c3dock .dk-h .ib .bdg{position:absolute;top:-6px;right:-6px;box-shadow:0 0 0 2px var(--card)}
+.c3 .c3t-card h3{font:600 var(--fs-5)/1.3 var(--sans);text-transform:none;letter-spacing:0;color:var(--foreground)}
+.c3 .c3t-obs .chip2{display:inline-block;background:var(--muted);color:var(--muted-foreground);border-radius:99px;padding:2px 10px;font:var(--fs-1)/1.5 var(--mono);border:0}
+.c3 .c3t-obs .chip2 b{color:var(--foreground);font-weight:500}
+.c3 .c3t-card .tg{width:max-content}
+@media (max-width:760px){
+  .c3 .c3t .pill,.c3 .c3t-card .pill,.c3 .c3t .chip2.lk,.c3 .c3t-card .chip2.lk,.c3 .c3t-th{min-width:44px;justify-content:center}
+}
+.c3 .cs-empty .fold{flex-wrap:nowrap;align-items:flex-start}
+.c3 .cs-empty .fold .ic{flex:none;margin-top:2px}
+
+/* the header Sessions button is a pill in look only: its class is not .pill, so a "try" pill is the first button.pill of a page (the mockup's header has no such pill) */
+.c3 .psess{border:1px solid var(--border);background:var(--background);padding:3px 10px;font:var(--fs-3) var(--sans);color:var(--muted-foreground);display:inline-flex;gap:6px;align-items:center;border-radius:16px;transition:transform .18s cubic-bezier(.3,.7,.2,1),box-shadow .2s,background .15s,border-color .15s,color .15s}
+.c3 .psess:hover{border-color:var(--ring)}
+.c3 .psess:active{transform:scale(.93)}
+@media (max-width:760px){.c3 .psess{min-height:44px}}
+.c3 .psess .c{font:var(--fs-1) var(--mono)}