:root{
  --outer-rail:51px;--outer-frame:#070707;--outer-hover:#202023;--outer-selected:#303033;
  --background:#101010;--foreground:#ececec;--card:#161616;--card-2:#1b1b1d;--popover:#1a1a1a;
  --primary:#e8e7e3;--primary-foreground:#111;--secondary:#202023;--muted-foreground:#8a8a8a;--faint:#6b6b6b;
  --border:rgba(255,255,255,.07);--overlay-1:rgba(255,255,255,.035);--overlay-2:rgba(255,255,255,.06);--overlay-3:rgba(255,255,255,.09);
  --input:#1f1f22;--brand:#6ea8ff;--success:#70dba0;--warning:#ff9e57;--danger:#ff7278;--info:#ffd36b;--violet:#b99bff;
  --code:#0b0b0c;--add:rgba(112,219,160,.10);--del:rgba(255,114,120,.10);
  --tk-key:#c792ea;--tk-str:#a5d6a7;--tk-num:#f78c6c;--tk-com:#6b737e;--tk-fn:#82aaff;--tk-tag:#ff8b8b;
  --shadow-floating:0 8px 30px rgb(0 0 0/.5);
  --ease:cubic-bezier(.2,.8,.2,1);
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --panel-w:400px;
}
html[data-theme=light]{
  color-scheme:light;--outer-frame:#e7eaf0;--outer-hover:#dce0e8;--outer-selected:#d0d6e0;
  --background:#f7f8fa;--foreground:#20242c;--card:#ffffff;--card-2:#f0f2f5;--popover:#fff;
  --primary:#20242c;--primary-foreground:#fff;--secondary:#e5e8ed;--muted-foreground:#596375;--faint:#647083;
  --border:rgba(30,40,60,.1);--overlay-1:rgba(30,40,60,.035);--overlay-2:rgba(30,40,60,.06);--overlay-3:rgba(30,40,60,.09);
  --input:#eceef2;--brand:#245caa;--success:#21794a;--warning:#945315;--danger:#bd3038;--info:#84650c;--violet:#6941c6;
  --code:#f3f4f7;--add:rgba(33,121,74,.09);--del:rgba(189,48,56,.08);
  --tk-key:#7c3aed;--tk-str:#1f7a3f;--tk-num:#b45309;--tk-com:#7b8494;--tk-fn:#1d4ed8;--tk-tag:#b42318;
  --shadow-floating:0 8px 30px rgb(30 40 60/.16);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{font:13px/1.45 var(--font-sans);color:var(--foreground);background:var(--outer-frame);display:grid;grid-template-columns:var(--outer-rail) minmax(0,1fr);grid-template-rows:43px minmax(0,1fr) 34px;height:100dvh;overflow:clip;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:where(button,a,input,textarea,[tabindex]):focus{outline:none}
a{color:inherit;text-decoration:none}
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.sm .icon,.icon.sm{width:15px;height:15px}
.mono{font-family:var(--font-mono);font-size:12px}
.muted{color:var(--muted-foreground)}
.faint{color:var(--faint)}
*{scrollbar-width:thin;scrollbar-color:var(--overlay-3) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--overlay-3);border-radius:10px;border:3px solid transparent;background-clip:content-box}

/* Outer frame */
.outer-header{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:2px;padding:0 8px}
.ibtn{display:grid;place-items:center;width:35px;height:35px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--foreground);flex:none;transition:background var(--d,160ms) var(--ease)}
.ibtn:hover,.ibtn:focus-visible{background:var(--outer-hover)}
.ibtn[disabled]{opacity:.5;cursor:default;background:transparent}
.crumbs{display:flex;align-items:center;gap:6px;margin-left:6px;font-weight:600;min-width:0}
.crumbs a{padding:4px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crumbs a:hover,.crumbs a:focus-visible{background:var(--outer-hover)}
.crumbs .sep{color:var(--faint)}
.header-end{margin-left:auto;display:flex;align-items:center;gap:2px}
.rail{grid-column:1;grid-row:2/4;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0}
.rail a{position:relative;display:grid;place-items:center;width:35px;height:35px;border-radius:7px;color:var(--foreground);transition:background 160ms var(--ease)}
.rail a:hover,.rail a:focus-visible{background:var(--outer-hover)}
.rail a.active{background:var(--outer-selected)}
.rail .new-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.rail .bottom{margin-top:auto}
.footer{grid-column:2;grid-row:3;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 4px;font-size:12px}
.sample{color:var(--info)}
.stage{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) var(--panel-cols,0px);margin-right:8px;min-height:0;transition:grid-template-columns 300ms var(--ease)}
.stage.has-panel{--panel-cols:calc(var(--panel-w) + 8px)}
.stage.dragging{transition:none}
.card-ws{background:var(--background);border-radius:12px;overflow:clip;min-width:0;min-height:0;display:flex;flex-direction:column}
.panel-clip{overflow:clip;min-width:0;position:relative}
.panel{position:absolute;inset:0 auto 0 8px;width:var(--panel-w);background:var(--background);border-radius:12px;display:flex;flex-direction:column;transition:transform 300ms var(--ease)}
.stage:not(.has-panel) .panel{transform:translateX(calc(var(--panel-w) + 16px));visibility:hidden;transition:transform 300ms var(--ease),visibility 0s 300ms}
.resizer{position:absolute;left:0;top:0;bottom:0;width:8px;cursor:col-resize;z-index:2}
.resizer:hover::after,.resizer:focus-visible::after{content:"";position:absolute;left:3px;top:40%;height:20%;width:2px;border-radius:2px;background:var(--overlay-3)}
@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important;animation-duration:1ms!important}}

/* Tooltip */
[data-tip]{position:relative}
.tip{position:fixed;z-index:50;padding:5px 8px;border-radius:6px;background:var(--popover);box-shadow:var(--shadow-floating);font-size:12px;pointer-events:none;white-space:nowrap;opacity:0;transform:translateY(2px);transition:opacity 120ms,transform 120ms}
.tip.show{opacity:1;transform:none}

/* Workspace scroll */
.scroll{flex:1;min-height:0;overflow:auto}
.wrap{max-width:896px;margin:0 auto;padding:28px 24px 96px}
h1{font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em}
h2{font-size:14px;font-weight:600;margin:0}
h3{font-size:13px;font-weight:600;margin:0}
p{margin:0}
.stack{display:flex;flex-direction:column;gap:16px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 12px;border:0;border-radius:8px;background:var(--secondary);color:var(--foreground);white-space:nowrap;transition:background 160ms var(--ease),opacity 160ms}
.btn:hover,.btn:focus-visible{background:var(--overlay-3)}
.btn.primary{background:var(--primary);color:var(--primary-foreground)}
.btn.primary:hover,.btn.primary:focus-visible{opacity:.86}
.btn.ghost{background:transparent}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--overlay-2)}
.btn.sm{height:28px;padding:0 10px;font-size:12px;border-radius:7px}
.btn[aria-disabled=true]{opacity:.5;cursor:default}
.cbtn{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--muted-foreground);flex:none;transition:background 160ms,color 160ms}
.cbtn:hover,.cbtn:focus-visible{background:var(--overlay-2);color:var(--foreground)}
.cbtn.ok{color:var(--success)}

/* Index */
.index-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.composer{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:12px;background:var(--card);margin-bottom:24px;transition:background 160ms}
.composer:focus-within{background:var(--card-2)}
.composer input,.composer textarea{flex:1;min-width:0;border:0;background:transparent;padding:6px 0;resize:none}
.composer input::placeholder,.composer textarea::placeholder{color:var(--faint)}
.composer .spark{color:var(--violet)}
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.search{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:8px;background:var(--input);flex:1;max-width:320px;color:var(--muted-foreground)}
.search input{flex:1;border:0;background:transparent;min-width:0;color:var(--foreground)}
.search input::placeholder{color:var(--faint)}
kbd{font:11px var(--font-mono);padding:1px 5px;border-radius:4px;background:var(--overlay-2);color:var(--muted-foreground)}
.seg{flex:none;display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--input)}
.seg button{height:28px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--muted-foreground);transition:background 160ms,color 160ms}
.seg button[aria-pressed=true]{background:var(--card);color:var(--foreground)}
.seg button:hover,.seg button:focus-visible{color:var(--foreground)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pcard{display:grid;grid-template-rows:148px auto;border-radius:12px;background:var(--card);overflow:clip;transition:background 160ms,transform 200ms var(--ease)}
.pcard:hover,.pcard:focus-visible{background:var(--card-2)}
.pcard .thumb{position:relative;overflow:clip;background:var(--code)}
.pcard .body{display:grid;grid-template-rows:20px 18px 20px 24px;gap:6px;padding:12px 14px 14px}
.pcard .title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600}
.pcard .title span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.s-ready{color:var(--success)}.s-building{color:var(--warning)}.s-failed{color:var(--danger)}.s-running{color:var(--brand)}.s-queued{color:var(--muted-foreground)}.s-review{color:var(--violet)}.s-info{color:var(--info)}
.avatars{display:flex;align-items:center}
.av{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700;color:#111;flex:none}
.avatars .av+.av{margin-left:-6px;box-shadow:0 0 0 2px var(--card)}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted-foreground)}
.meta-row .when{white-space:nowrap}
.newcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:12px;background:transparent;color:var(--muted-foreground);min-height:262px;border:0;transition:background 160ms,color 160ms}
.newcard:hover,.newcard:focus-visible{background:var(--overlay-1);color:var(--foreground)}
.newcard .plus{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--overlay-2)}
.list{display:flex;flex-direction:column;gap:2px;border-radius:12px;overflow:clip}
.lrow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 120px 90px;align-items:center;gap:12px;min-height:48px;padding:0 14px;background:var(--card);transition:background 160ms}
.lrow:hover,.lrow:focus-visible{background:var(--card-2)}

/* Mini app thumbnails (sample previews) */
.mini{position:absolute;inset:14px 18px 0;border-radius:8px 8px 0 0;background:var(--background);padding:10px 12px;font-size:9px;overflow:clip}
.mini .bar{height:6px;border-radius:3px;background:var(--overlay-3);margin-bottom:6px}
.mini .task{display:flex;align-items:center;gap:6px;height:16px}
.mini .box{width:8px;height:8px;border-radius:2px;background:var(--overlay-3)}
.mini .box.on{background:var(--success)}
.mini .chip{margin-left:auto;padding:0 4px;border-radius:3px;background:rgba(255,158,87,.18);color:var(--warning);font-size:8px}
.mini.hero{display:grid;align-content:center;justify-items:center;gap:6px;background:#121a2b}
html[data-theme=light] .mini.hero{background:#e8eefb}
.mini.term{background:var(--code);font-family:var(--font-mono);color:var(--muted-foreground);line-height:1.6}
.pix{display:grid;grid-template-columns:repeat(16,1fr);gap:1px;position:absolute;inset:14px 18px 0;border-radius:8px 8px 0 0;overflow:clip;background:#0e1420}
.pix i{aspect-ratio:1}

/* Project */
.pbar{display:flex;align-items:center;gap:12px;padding:14px 20px 0}
.pmark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--card-2);color:var(--brand);flex:none}
.pname{display:flex;flex-direction:column;min-width:0}
.pname .repo{display:flex;align-items:center;gap:4px;color:var(--muted-foreground)}
.pbar .end{margin-left:auto;display:flex;align-items:center;gap:6px}
.tabs{display:flex;align-items:center;gap:2px;padding:12px 16px 0;overflow-x:auto}
.tab{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px;border-radius:8px;color:var(--muted-foreground);white-space:nowrap;transition:background 160ms,color 160ms}
.tab:hover,.tab:focus-visible{background:var(--overlay-1);color:var(--foreground)}
.tab[aria-current=page]{background:var(--overlay-2);color:var(--foreground)}
.count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--overlay-2);font-size:11px;color:var(--muted-foreground)}
.count.live{background:rgba(110,168,255,.16);color:var(--brand)}
.tabsep{height:1px;background:var(--border);margin:10px 20px 0}
.pwrap{max-width:none;padding:20px 20px 96px;container-type:inline-size}

/* Provenance chain */
.chain{display:flex;align-items:center;flex-wrap:wrap;gap:0;row-gap:6px}
.node{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;background:var(--overlay-2);color:var(--muted-foreground);font-size:12px;white-space:nowrap;transition:background 160ms,color 160ms}
.node:hover,.node:focus-visible,.node.on{background:var(--overlay-3);color:var(--foreground)}
.node .k{font-weight:600;color:var(--foreground)}
.arrow{width:18px;height:1px;background:var(--faint);position:relative;flex:none;opacity:.7}
.arrow::after{content:"";position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left-color:var(--faint);border-right:0}
.headcommit{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:var(--card)}
.headcommit .top{display:flex;align-items:center;gap:10px;min-width:0}
.headcommit .msg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ref-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dd{position:relative}
.dd-trigger{display:grid;grid-template-columns:16px minmax(0,1fr) 16px;align-items:center;gap:7px;height:32px;width:180px;padding:0 8px 0 10px;border:0;border-radius:8px;background:var(--input);text-align:left;transition:background 160ms}
.dd-trigger:hover,.dd-trigger:focus-visible,.dd-trigger[aria-expanded=true]{background:var(--overlay-3)}
.dd-trigger .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-trigger .chev{transform:rotate(90deg);transition:transform 160ms;color:var(--muted-foreground)}
.dd-trigger[aria-expanded=true] .chev{transform:rotate(-90deg)}
.menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:240px;padding:4px;border-radius:10px;background:var(--popover);box-shadow:var(--shadow-floating);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity 140ms,transform 140ms}
.menu.open{opacity:1;transform:none;pointer-events:auto}
.opt{display:grid;grid-template-columns:16px minmax(0,1fr) auto 16px;align-items:center;gap:8px;min-height:32px;padding:0 8px;border-radius:7px;cursor:pointer}
.opt.hl{background:var(--overlay-2)}
.opt .tick{color:var(--success);visibility:hidden}
.opt[aria-selected=true] .tick{visibility:visible}
.menu .mhead{padding:6px 8px 4px;font-size:11px;color:var(--faint)}

.files{border-radius:12px;background:var(--card);overflow:clip}
.frow{display:grid;grid-template-columns:22px minmax(140px,1fr) minmax(0,2fr) 110px;align-items:center;gap:10px;min-height:38px;padding:0 14px;transition:background 140ms}
.frow+.frow{box-shadow:inset 0 1px 0 var(--border)}
.frow:hover,.frow:focus-visible{background:var(--overlay-1)}
.frow .cm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted-foreground)}
.frow .cm .who{color:var(--foreground)}
.frow .age{text-align:right;color:var(--faint);font-variant-numeric:tabular-nums}
.ficon{color:var(--muted-foreground)}
.ficon.dir{color:var(--brand)}
.readme{padding:20px 24px;border-radius:12px;background:var(--card)}
.readme h2{font-size:18px;margin-bottom:8px}
.readme p{color:var(--muted-foreground);margin-bottom:10px}
.readme ul{margin:0 0 10px;padding-left:18px;color:var(--muted-foreground)}
.code{border-radius:12px;background:var(--code);overflow:auto;font:12px/1.65 var(--font-mono)}
.code table{border-collapse:collapse;width:100%}
.code td{padding:0 12px;white-space:pre;vertical-align:top}
.code td.ln{width:1%;text-align:right;color:var(--faint);user-select:none;padding-right:8px}
.code tr.add{background:var(--add)}.code tr.del{background:var(--del)}
.code tr.add td.sg{color:var(--success)}.code tr.del td.sg{color:var(--danger)}
.code td.sg{width:1%;padding:0 4px;color:var(--faint);user-select:none}
.code tr.hunk td{color:var(--brand);background:var(--overlay-1)}
.tk-k{color:var(--tk-key)}.tk-s{color:var(--tk-str)}.tk-n{color:var(--tk-num)}.tk-c{color:var(--tk-com);font-style:italic}.tk-f{color:var(--tk-fn)}.tk-t{color:var(--tk-tag)}
.inlinecode{font:12px var(--font-mono);padding:1px 5px;border-radius:5px;background:var(--overlay-2);color:var(--tk-str)}
.filehead{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;border-radius:12px 12px 0 0;background:var(--card)}
.filehead+.code{border-radius:0 0 12px 12px}

.two{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:start}
.about{display:flex;flex-direction:column;gap:14px;padding:4px 0}
.about .k{font-size:11px;color:var(--faint);margin-bottom:4px}
.envmini{display:flex;flex-direction:column;gap:6px}
.envmini a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;margin:0 -8px;border-radius:7px}
.envmini a:hover,.envmini a:focus-visible{background:var(--overlay-1)}

/* Changes and runs: master-detail */
.md{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:12px;align-items:start}
.mlist{display:flex;flex-direction:column;gap:2px;border-radius:12px;overflow:clip;position:sticky;top:0}
.mitem{display:grid;grid-template-rows:18px 18px 18px;gap:4px;padding:12px 14px;background:var(--card);transition:background 140ms;cursor:pointer}
.mitem:hover,.mitem:focus-visible{background:var(--card-2)}
.mitem[aria-selected=true]{background:var(--overlay-3)}
.mitem .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mitem .r{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted-foreground);min-width:0}
.mitem .r span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail{display:flex;flex-direction:column;gap:14px;min-width:0}
.dcard{padding:16px;border-radius:12px;background:var(--card);display:flex;flex-direction:column;gap:12px;min-width:0}
.checks{display:flex;flex-direction:column;gap:2px}
.check{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:32px;padding:0 8px;margin:0 -8px;border-radius:7px}
.check:hover{background:var(--overlay-1)}
.branchline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted-foreground)}
.branch{font:12px var(--font-mono);padding:2px 7px;border-radius:6px;background:rgba(110,168,255,.12);color:var(--brand)}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.actions .grow{flex:1}

/* Run steps */
.steps{display:flex;flex-direction:column;position:relative}
.step{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;padding:8px 0;position:relative}
.step::before{content:"";position:absolute;left:11.5px;top:30px;bottom:-8px;width:1px;background:var(--border)}
.step:last-child::before{display:none}
.sdot{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--overlay-2);z-index:1}
.sdot.model{color:var(--violet);background:rgba(185,155,255,.14)}
.sdot.app{color:var(--brand);background:rgba(110,168,255,.12)}
.sdot.fail{color:var(--danger);background:rgba(255,114,120,.13)}
.sdot.ok{color:var(--success);background:rgba(112,219,160,.13)}
.step .kind{font-size:11px;font-weight:600;letter-spacing:.02em}
.kind.model{color:var(--violet)}.kind.app{color:var(--brand)}
.step .what{font-weight:500}
.step .why{color:var(--muted-foreground);margin-top:2px}
.step .t{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.logbox{margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--code);font:11.5px/1.6 var(--font-mono);white-space:pre-wrap;color:var(--muted-foreground)}
.logbox .e{color:var(--danger)}.logbox .ok{color:var(--success)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted-foreground)}
.legend span{display:inline-flex;align-items:center;gap:6px}

/* Deployments */
.envs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.env{display:grid;grid-template-rows:130px auto;border-radius:12px;background:var(--card);overflow:clip}
.env .thumb{position:relative;background:var(--code);overflow:clip}
.env .body{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px}
.env .row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.env .url{color:var(--brand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl{border-radius:12px;background:var(--card);overflow:auto}
table.t{width:100%;border-collapse:collapse;min-width:640px}
.t th{position:sticky;top:0;background:var(--card);text-align:left;font-weight:500;color:var(--faint);font-size:12px;padding:10px 12px;white-space:nowrap}
.t td{padding:0 12px;height:44px;white-space:nowrap}
.t tbody tr.r{transition:background 140ms}
.t tbody tr.r:hover{background:var(--overlay-1)}
.t tbody tr.r+tr.x+tr.r td,.t tbody tr.r+tr.x+tr.r{box-shadow:inset 0 1px 0 var(--border)}
.t td.num{text-align:right;font-variant-numeric:tabular-nums}
.disc{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--muted-foreground)}
.disc:hover,.disc:focus-visible{background:var(--overlay-2);color:var(--foreground)}
.disc .icon{transition:transform 200ms var(--ease)}
.disc[aria-expanded=true] .icon{transform:rotate(90deg)}
tr.x td{padding:0;height:auto}
.xwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms var(--ease)}
.xwrap.open{grid-template-rows:1fr}
.xwrap>div{overflow:hidden;min-height:0}
.xin{padding:0 12px 14px 50px}

/* Settings */
.settings{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:start}
.snav{display:flex;flex-direction:column;gap:1px;position:sticky;top:0}
.snav .g{font-size:11px;color:var(--faint);padding:10px 8px 4px}
.snav a{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:7px;color:var(--muted-foreground);transition:background 140ms,color 140ms}
.snav a:hover,.snav a:focus-visible{background:var(--overlay-1);color:var(--foreground)}
.snav a[aria-current=page]{background:var(--overlay-2);color:var(--foreground)}
.sform{display:flex;flex-direction:column;gap:24px;min-width:0;container-type:inline-size}
.sgroup{display:flex;flex-direction:column}
.sgroup>h2{margin-bottom:4px}
.sgroup>.desc{color:var(--muted-foreground);margin-bottom:12px}
.surface{border-radius:12px;background:var(--card);padding:4px 16px}
.field{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:16px;align-items:center;padding:12px 0}
.field+.field{box-shadow:inset 0 1px 0 var(--border)}
.field .lab{display:flex;flex-direction:column;gap:2px}
.field .lab small{color:var(--muted-foreground);font-size:12px}
@container (max-width:520px){.field{grid-template-columns:minmax(0,1fr);gap:6px}}
.inp{height:32px;width:100%;padding:0 10px;border:0;border-radius:8px;background:var(--input);transition:background 160ms}
.inp:hover,.inp:focus{background:var(--overlay-3)}
.inp.mono{font-family:var(--font-mono);font-size:12px}
.inp.invalid{background:rgba(255,114,120,.14)}
.err{color:var(--danger);font-size:12px;margin-top:4px;min-height:16px}
.toggle{position:relative;width:34px;height:20px;border:0;border-radius:10px;background:var(--overlay-3);padding:0;flex:none;transition:background 180ms}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform 180ms var(--ease)}
.toggle[aria-checked=true]{background:var(--success)}
.toggle[aria-checked=true]::after{transform:translateX(14px)}
.toggle:focus-visible{background:var(--overlay-3);filter:brightness(1.25)}
.toggle[aria-checked=true]:focus-visible{background:var(--success)}
.toggle[aria-disabled=true]{opacity:.5;cursor:default}
.perm{display:grid;grid-template-columns:minmax(160px,1fr) repeat(5,72px);align-items:center;gap:8px;min-height:48px}
.perm+.perm{box-shadow:inset 0 1px 0 var(--border)}
.perm.h{min-height:36px;font-size:11px;color:var(--faint)}
.perm>*:not(:first-child){justify-self:center;text-align:center}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who .n{display:flex;flex-direction:column;min-width:0}
.who small{color:var(--muted-foreground);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.secret{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:56px}
.secret+.secret{box-shadow:inset 0 1px 0 var(--border)}
.island{position:fixed;left:50%;bottom:52px;z-index:40;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 14px;border-radius:12px;background:var(--popover);box-shadow:var(--shadow-floating);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:transform 200ms var(--ease),opacity 200ms}
.island.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}

/* Live panel */
.phead{display:flex;align-items:center;gap:2px;height:43px;padding:0 4px 0 8px;flex:none}
.ptab{height:30px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--muted-foreground);transition:background 140ms,color 140ms}
.ptab:hover,.ptab:focus-visible{background:var(--overlay-1);color:var(--foreground)}
.ptab[aria-selected=true]{background:var(--overlay-2);color:var(--foreground)}
.phead .sp{flex:1}
.pbody{flex:1;min-height:0;overflow:auto;padding:4px 12px 16px}
.browser{border-radius:10px;background:var(--card);overflow:clip}
.urlbar{display:flex;align-items:center;gap:6px;height:36px;padding:0 6px 0 10px;font:12px var(--font-mono);color:var(--muted-foreground)}
.urlbar span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo{padding:18px 16px 22px;background:#fbfaf7;color:#1d1d1f;min-height:300px}
.todo h4{margin:0 0 2px;font-size:18px;letter-spacing:-.01em}
.todo .sub{color:#7a7a7a;font-size:12px;margin-bottom:14px}
.todo .add{display:flex;gap:6px;margin-bottom:12px}
.todo .add div{flex:1;height:32px;border-radius:8px;background:#efede8;display:flex;align-items:center;padding:0 10px;color:#9a978f;font-size:12px}
.todo .add b{display:grid;place-items:center;width:32px;border-radius:8px;background:#1d1d1f;color:#fff;font-weight:500}
.todo .item{display:flex;align-items:center;gap:10px;height:40px;padding:0 4px;font-size:13px}
.todo .item+.item{box-shadow:inset 0 1px 0 #ecebe6}
.todo .cb{width:16px;height:16px;border-radius:5px;background:#e7e5df;flex:none}
.todo .cb.on{background:#1d1d1f}
.todo .item.done span{color:#a3a09a;text-decoration:line-through}
.todo .due{margin-left:auto;font-size:11px;padding:2px 7px;border-radius:6px;background:#fdecdc;color:#a8521a}
.todo .due.late{background:#fde2e2;color:#b42318}
.envswitch{margin:10px 0}
.feed{display:flex;flex-direction:column;gap:2px}
.ev{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:10px 8px;border-radius:8px}
.ev:hover{background:var(--overlay-1)}
.ev .l1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ev .l2{color:var(--muted-foreground);font-size:12px;margin-top:2px}
.ev .ts{color:var(--faint);font-size:11px;margin-left:auto}
.thinking{display:inline-flex;align-items:center;gap:6px;color:var(--violet);font-size:12px}
.ux-dots{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--ux-dots-size,32px);height:var(--ux-dots-size,32px);gap:calc(var(--ux-dots-size,32px)*.14);color:inherit;vertical-align:middle}
.ux-dots__dot{width:calc(var(--ux-dots-size,32px)*.24);height:calc(var(--ux-dots-size,32px)*.24);flex:none;border-radius:50%;background:currentColor;animation:ux-dots-bounce var(--ux-dots-speed,1s) ease-in-out infinite;animation-delay:calc(var(--ux-dots-speed,1s)*var(--ux-dots-phase,0))}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes ux-dots-bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(calc(var(--ux-dots-size,32px)*-.3));opacity:1}}
@keyframes ux-dots-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.ux-spinner{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--ux-spinner-size,14px);height:var(--ux-spinner-size,14px);color:inherit}
.ux-spinner svg{width:100%;height:100%;animation:ux-spin 1s linear infinite}
@keyframes ux-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ux-dots__dot{animation:ux-dots-pulse 1.4s ease-in-out infinite!important;animation-duration:1.4s!important}.ux-spinner svg{animation:ux-dots-pulse 1.4s ease-in-out infinite!important;animation-duration:1.4s!important}}
.fade{animation:fade 220ms var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@container (max-width:760px){.two{grid-template-columns:minmax(0,1fr)}.md{grid-template-columns:minmax(0,1fr)}.mlist{position:static}.settings{grid-template-columns:minmax(0,1fr)}.snav{position:static;flex-direction:row;flex-wrap:wrap}.snav .g{display:none}}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  body{grid-template-columns:0 minmax(0,1fr)}
  .rail{display:none}
  .stage{margin:0 8px}
  .stage.has-panel{--panel-cols:0px}
  .wrap,.pwrap{padding:20px 16px 96px}
  .frow{grid-template-columns:22px minmax(0,1fr) 70px}.frow .cm{display:none}
  .lrow{grid-template-columns:minmax(0,1fr) 90px}.lrow>:nth-child(2),.lrow>:nth-child(3){display:none}
  .perm{grid-template-columns:minmax(120px,1fr) repeat(5,44px)}
  .btn,.tab{min-height:44px}
  .composer{flex-wrap:wrap;padding:10px}
  .composer input{flex:1 1 calc(100% - 40px);min-height:36px}
  .composer .dd{flex:1}.composer .dd-trigger{width:100%!important;height:44px}
  .search{max-width:none}
  .crumbs a:not(:last-child),.crumbs .sep{display:none}
  .pbar .end .btn span{display:none}
}

/* ---------- anson.sh additions ---------- */
:root{--anson:#d4a574;--panel-w:380px;--rail-open:200px}
html[data-theme=light]{--anson:#9a6a35}
html[data-rail=open]{--outer-rail:var(--rail-open)}
body{transition:grid-template-columns 260ms var(--ease)}

/* Rail with labels when expanded (Command + B). */
.rail{overflow:hidden}
.rail a,.rail button.rbtn{position:relative;display:flex;align-items:center;gap:10px;width:35px;height:35px;padding:0 8.5px;border:0;border-radius:7px;background:transparent;color:var(--foreground);white-space:nowrap;overflow:hidden;transition:background 160ms var(--ease),width 260ms var(--ease)}
.rail a:hover,.rail a:focus-visible,.rail button.rbtn:hover,.rail button.rbtn:focus-visible,.rail button.rbtn[aria-expanded=true]{background:var(--outer-hover)}
.rail .lbl{font-size:13px;font-weight:500;opacity:0;transition:opacity 160ms}
.rsocial{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:8px}
.rsocial a .icon.brand{width:18px;height:18px;flex:none;fill:currentColor;stroke:none}
.rsocial a .icon.sm{width:13px;height:13px;margin-left:auto;opacity:0;color:var(--faint);transition:opacity 160ms}
html[data-rail=open] .rsocial a .icon.sm{opacity:1}
.rsocial+.rbtn.bottom{margin-top:6px}
html[data-rail=open] .rail{align-items:stretch;padding:8px}
html[data-rail=open] .rail a,html[data-rail=open] .rail button.rbtn{width:100%}
html[data-rail=open] .rail .lbl{opacity:1}
.rail .bottom{margin-top:auto}
.rbtn .avatar{width:20px;height:20px;margin-left:-1px}
.avatar{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--anson);color:#1a1208;font-weight:700;font-size:11px}
.rt .div{transition:transform 260ms var(--ease)}
html[data-rail=open] .rt .div{transform:translateX(3px)}

/* Account menu (UX rules 74 and 75). */
.acct{position:fixed;z-index:55;left:8px;bottom:44px;width:222px;padding:4px;border-radius:10px;background:var(--popover);box-shadow:var(--shadow-floating);font-size:13px;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity 140ms,transform 140ms}
.acct.open{opacity:1;transform:none;pointer-events:auto}
.acct .who{display:flex;align-items:center;gap:8px;padding:6px 8px 8px}
.acct .who .n{display:flex;flex-direction:column;min-width:0}
.acct .who small{font-size:13px}
.acct .who small.s-ready{color:var(--success)}
.acct .sep{height:1px;background:var(--border);margin:4px 0}
.acct .mi{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;height:28px;padding:0 8px;border-radius:7px;color:var(--foreground)}
.acct .mi .icon{width:15px;height:15px;color:var(--muted-foreground)}
.acct .mi.hl{background:var(--overlay-2)}

/* Footer */
.footer{gap:12px}
.brand{display:inline-flex;align-items:center;gap:7px;color:var(--muted-foreground)}
.brand b{font-weight:600;color:var(--foreground)}
.brand .amark{width:16px;height:16px;border-radius:4px;flex:none}
.brand img{width:15px;height:15px}

/* Home */
.hero{display:flex;flex-direction:column;gap:14px;padding:12px 0 8px}
.hero h1{font-size:28px;line-height:1.2;letter-spacing:-.02em;max-width:760px}
.hero .lede{font-size:14.5px;line-height:1.6;color:var(--muted-foreground);max-width:640px}
.hero .actions{margin-top:4px}
.avail{display:inline-flex;align-items:center;gap:8px;font-size:12.5px}
.sec{display:flex;flex-direction:column;gap:12px;margin-top:36px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sec-head a{color:var(--muted-foreground);font-size:12.5px;padding:4px 6px;border-radius:6px}
.sec-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 4px}.sec-head a:hover,.sec-head a:focus-visible{background:var(--overlay-1);color:var(--foreground)}
.psite{margin-left:auto;flex:none}.psite .icon{width:14px;height:14px}
.osside .ossite{margin-left:8px}.osside .ossite-a{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;background:var(--card);color:var(--brand);font-weight:600}.osside .ossite-a:hover,.osside .ossite-a:focus-visible{background:var(--overlay-2)}.osside .ossite-a .icon{width:13px;height:13px}
.lp-btns{display:flex;flex-wrap:wrap;gap:8px}.brand a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sec-head a:hover,.sec-head a:focus-visible{background:var(--overlay-1);color:var(--foreground)}
.sec-desc{color:var(--muted-foreground);margin-top:-6px}
.now{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pcard .thumb img,.pcard .thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform 400ms var(--ease)}
.pcard:hover .thumb img,.pcard:hover .thumb video{transform:scale(1.03)}
.pcard .thumb img.cover,.pcard .thumb video{object-position:center}
.livecover{position:absolute;inset:0;overflow:hidden}
.pcard .body{grid-template-rows:20px 36px 20px}
.pcard .title span:first-child{flex:none;max-width:62%}
.pcard .title span+span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .big{font:650 30px var(--font-sans);letter-spacing:-.02em;color:var(--foreground)}
.tile small{display:block;margin-top:6px;font:12px var(--font-sans);color:var(--muted-foreground);text-align:center}
.pcard .desc{color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:18px}
.tile{position:absolute;inset:0;display:grid;place-items:center;align-content:center;font:500 17px var(--font-mono);color:var(--muted-foreground);background:var(--code)}
.lit{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:20px;padding:18px 18px 18px 20px;border-radius:12px;background:var(--card)}
.lit{transition:background 160ms}.lit:hover,.lit:focus-visible{background:var(--card-2)}
.lit .big{font-size:30px;font-weight:650;letter-spacing:-.02em;line-height:1}
.lit .stat{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 16px;border-radius:10px;background:var(--overlay-1)}
.lit ul{margin:4px 0 0;padding-left:18px;color:var(--muted-foreground);display:flex;flex-direction:column;gap:4px}
.lit ul b{color:var(--foreground);font-weight:600}
.wlist{display:flex;flex-direction:column;gap:2px;border-radius:12px;overflow:clip}
.wrow{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center;gap:12px;min-height:56px;padding:8px 14px;background:var(--card);transition:background 160ms}
.wrow:hover,.wrow:focus-visible{background:var(--card-2)}
.wrow .t{font-weight:600}
.wrow .s{color:var(--muted-foreground);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrow .d{text-align:right;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.proofs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.pgroup{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border-radius:12px;background:var(--card);transition:background 160ms}
.pgroup:hover,.pgroup:focus-visible{background:var(--card-2)}
.pgh{display:flex;align-items:center;gap:10px}
.pgh img{width:28px;height:28px;border-radius:7px;flex:none}
.pgh>span{display:flex;flex-direction:column;line-height:1.3}
.pgh .faint{font-size:12px}
.pstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pstats div{display:flex;flex-direction:column;gap:4px}
.pstats b{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:1.1}
.pstats span{color:var(--muted-foreground);font-size:12px;line-height:1.4}
.psrc{color:var(--faint);font-size:11.5px;margin-top:auto}
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:28px;border-radius:12px;overflow:clip}
.proof div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--card)}
.proof b{font-size:22px;font-weight:650;letter-spacing:-.02em;line-height:1.1}
.proof span{color:var(--muted-foreground);font-size:12px;line-height:1.4}
.thesis{margin-top:-4px;font-size:14px;line-height:1.6;color:var(--muted-foreground);max-width:720px}
.why{padding:12px 14px;border-radius:12px;background:rgba(110,168,255,.08)}
html[data-theme=light] .why{background:rgba(36,92,170,.07)}
.why .k{font-size:11.5px;font-weight:600;color:var(--brand);margin-bottom:4px}
.why p{color:var(--foreground)}
.personal{color:var(--muted-foreground);margin-top:36px;font-size:12.5px}

/* Work detail */
.pmark img{width:22px;height:22px;object-fit:contain}
.pmark .ltr{font:700 14px var(--font-mono);color:var(--anson)}
.prose{display:flex;flex-direction:column;gap:12px;max-width:680px}
.prose p{color:var(--muted-foreground);line-height:1.6}
.prose p.lead{color:var(--foreground);font-size:14.5px}
.built{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;border-radius:12px;overflow:clip}
.built li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:10px 14px;background:var(--card)}
.built li .icon{width:15px;height:15px;margin-top:2px;color:var(--success)}
.built li b{font-weight:600}
.built li span{color:var(--muted-foreground)}
.attrib{display:flex;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(255,211,107,.07);color:var(--foreground)}
html[data-theme=light] .attrib{background:rgba(132,101,12,.08)}
.attrib .icon{width:16px;height:16px;color:var(--info);margin-top:1px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:12px;background:var(--overlay-2);color:var(--muted-foreground);font-size:12px;white-space:nowrap}
.links{display:flex;flex-direction:column;gap:2px}
.links a{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:0 -8px;border-radius:7px;color:var(--brand)}
.links a:hover,.links a:focus-visible{background:var(--overlay-1)}
.links a .icon{width:14px;height:14px}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.shot{display:grid;grid-template-rows:190px auto;border:0;padding:0;border-radius:12px;background:var(--card);overflow:clip;text-align:left;transition:background 160ms}
.shot:hover,.shot:focus-visible{background:var(--card-2)}
.shot .im{position:relative;overflow:clip;background:var(--code)}
.shot .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.shot .cap{padding:10px 14px 12px;display:flex;flex-direction:column;gap:2px}
.shot .cap span{color:var(--muted-foreground);font-size:12px}
.chain .node.k{color:var(--foreground)}

/* Lightbox: one viewer surface (UX rule 35). */
.lb{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:56px 24px;background:rgb(0 0 0/.9);opacity:0;pointer-events:none;transition:opacity 180ms}
.lb.open{opacity:1;pointer-events:auto}
.lb figure{margin:0;display:flex;flex-direction:column;gap:10px;max-width:min(1280px,100%);max-height:100%}
.lb img{max-width:100%;max-height:calc(100dvh - 160px);object-fit:contain;border-radius:10px;background:var(--code)}
.lb figcaption{display:flex;align-items:center;gap:12px;color:#ddd;font-size:13px}
.lb figcaption span{flex:1}
.lb .ibtn{color:#eee}
.lb .ibtn:hover,.lb .ibtn:focus-visible{background:rgb(255 255 255/.12)}

/* Work: stack and timeline */
.oshero{margin:4px 0 22px;padding:8px;border-radius:16px;background:rgba(185,155,255,.08)}
html[data-theme=light] .oshero{background:rgba(105,65,198,.07)}
.osmain{border-radius:12px;transition:background 160ms}
.osmain:hover,.osmain:focus-visible{background:rgba(185,155,255,.08)}
.oscover{display:block;width:100%;aspect-ratio:1200/644;object-fit:cover;border-radius:10px}
.ostext{display:flex;flex-direction:column;gap:10px;min-width:0;padding-right:8px}
.osname{display:flex;align-items:center;gap:10px}
.osname img{width:34px;height:34px;border-radius:9px}
.osname h2{font-size:22px;letter-spacing:-.01em}
.oslead{font-size:16px;line-height:1.4;color:var(--foreground)}
.osfacts{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12.5px;color:var(--muted-foreground)}
.osfacts b{font-size:15px;color:var(--foreground);margin-right:3px}
.osopen{align-self:flex-start}
.osmap{display:flex;flex-direction:column;gap:2px;padding:8px 0 0}
.osrow{display:grid;grid-template-columns:170px minmax(0,1fr) 34px 24px;align-items:center;gap:10px;height:44px;padding:0 12px;border:0;border-radius:10px;background:var(--card);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background 140ms}
.osrow:hover,.osrow:focus-visible{background:var(--overlay-2, var(--overlay-1))}
.osrow .osl{font-size:13px;font-weight:600}
.oslogos{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.oslogos .osmini{width:24px;height:24px;border-radius:6px;object-fit:contain;flex:none}
.oslogos .osmini.on-dark{padding:3px}
.oscount{text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums}
.osrow>.icon{transform:rotate(90deg);color:var(--faint);justify-self:center}
.osside{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 4px 2px;font-size:12.5px}
.osside button{height:28px;padding:0 10px;border:0;border-radius:8px;background:var(--card);color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background 140ms}
.osside button:hover,.osside button:focus-visible{background:var(--overlay-1)}
.sec,.layer{scroll-margin-top:16px}
.org+.org{margin-top:18px}
.orgh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px}
.orgh h3{font-size:13.5px;font-weight:600}
.orgh img{width:20px;height:20px;border-radius:5px;align-self:center}
.orgh .faint{font-size:12px}
.osfacts b{color:var(--foreground)}
.layer{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;padding:16px 0}
.layer+.layer{box-shadow:inset 0 1px 0 var(--border)}
.lh{display:flex;flex-direction:column;gap:4px;padding-top:4px}
.lname{font-weight:600;font-size:13px}
.lh p{font-size:12px;line-height:1.45}
.parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.part{display:grid;grid-template-rows:34px 36px 18px;gap:8px;padding:12px 14px;border-radius:12px;background:var(--card);transition:background 160ms}
.part:hover,.part:focus-visible{background:var(--card-2)}
.part .pt{display:flex;align-items:center;gap:10px;min-width:0}
.part .ptx{display:flex;flex-direction:column;gap:1px;min-width:0}
.part .ptx b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:17px}
.part .ptx .faint{font-size:11.5px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plogo{width:32px;height:32px;border-radius:8px;object-fit:contain;flex:none}
.on-dark{background:#15171c;padding:5px}
.on-light{background:#fff;padding:3px}
.pml{width:28px;height:28px;border-radius:7px;object-fit:contain}
.pmark:has(.pml){background:transparent}
.tl-logo{width:16px;height:16px;border-radius:4px;object-fit:contain;flex:none;align-self:center}
.pcard .thumb .tile img.tlogo,.tile img.tlogo{position:static;inset:auto;width:56px;height:56px;border-radius:13px;object-fit:contain;transform:none}
.pcard:hover .thumb .tile img.tlogo{transform:none}
.tile img.tlogo.on-dark{padding:8px}
.tile:has(.tlogo){gap:10px}
.lg-l{display:none}
html[data-theme=light] .lg-d{display:none}
html[data-theme=light] .lg-l{display:inline-block}
.part .pt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.part .pt .faint{font-size:11.5px;white-space:nowrap}
.part .pr{color:var(--muted-foreground);font-size:12.5px;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.part .pf{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;min-width:0}
.part .pf .status{font-size:11.5px;min-width:0}
.tl{list-style:none;margin:8px 0 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:var(--border)}
.tlm{padding:18px 0 6px 34px;font-size:12px;font-weight:600;color:var(--faint)}
.tli{display:grid;grid-template-columns:23px minmax(0,1fr);gap:11px;align-items:start}
.tld{display:grid;place-items:center;width:23px;height:38px;position:relative;z-index:1}
.tld .dot{width:9px;height:9px;box-shadow:0 0 0 4px var(--background)}
.tli a{display:flex;flex-direction:column;gap:2px;padding:9px 12px;margin-bottom:4px;border-radius:10px;transition:background 140ms;min-width:0}
.tli a:hover,.tli a:focus-visible{background:var(--overlay-1)}
.tlt{display:flex;align-items:baseline;gap:10px;min-width:0}
.tli.key a{background:rgba(185,155,255,.08)}
.credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.credits a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;background:var(--card);font-size:12.5px;transition:background 160ms}
.credits a:hover,.credits a:focus-visible{background:var(--card-2)}
.credits b{font-size:13px}
.credits .ck{font-size:11px;font-weight:600}
.credits .crtop{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.credits .crtop img{width:28px;height:28px;border-radius:7px;object-fit:contain;flex:none}
.why.osrole{background:rgba(185,155,255,.08)}
.why.osrole .k{color:var(--violet)}
.learnt{color:var(--warning);font-weight:600}
.s-warn2{color:var(--warning)}
.lnets{display:flex;flex-direction:column;gap:10px;margin-top:6px}.lnets h2{margin:0}
.lnet{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lnet li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding-bottom:12px}
.lnet li::before{content:'';position:absolute;left:10px;top:22px;bottom:0;width:2px;border-radius:1px;background:var(--overlay-3)}.lnet li:last-child::before{display:none}
.lnd{display:grid;place-items:center;width:22px;height:22px;margin-top:10px}.lnd .dot{width:10px;height:10px;border-radius:50%;background:currentColor}
.lnc{display:flex;flex-direction:column;gap:8px;min-width:0;padding:11px 13px;border-radius:12px;background:var(--overlay-1)}
.lnh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lnn{display:flex;flex-wrap:wrap;gap:6px}
.lnchip{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:6px;padding:4px 9px;border-radius:8px;background:var(--overlay-2);font-size:12.5px}.lnchip span{color:var(--muted-foreground);font-size:12px}
.lns{font-size:12px;color:var(--muted-foreground)}
.pline{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--success)}.pline .icon{width:14px;height:14px}
.sibs{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px 12px}
.sibs a{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:12.5px;color:var(--muted-foreground);transition:color 140ms}
.sibs .mt{position:relative;display:block;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:var(--code);transition:opacity 140ms}
.sibs .mt img,.sibs .mt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}.sibs .mt img.cover{object-position:center}
.sibs .mt .oshero-svg{position:absolute;inset:0;width:100%;height:100%;padding:3px;box-sizing:border-box}
.sibs .mt .mt-tile{position:absolute;inset:0;display:grid;place-items:center;font:650 20px var(--font-sans);color:var(--foreground)}.sibs .mt .mt-tile img.mlogo{position:static;inset:auto;width:32px;height:32px;border-radius:8px;object-fit:contain}
.sibs .mt svg.fig{position:absolute;inset:0;width:100%;height:100%;padding:5px 8px;box-sizing:border-box}
.sibs .nm{padding:2px 6px;margin:0 -6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background 140ms,color 140ms}
.sibs a:hover,.sibs a:focus-visible{color:var(--foreground)}.sibs a:hover .mt{opacity:.86}.sibs a:focus-visible .nm{background:var(--overlay-3)}
@container (max-width:700px){.layer{grid-template-columns:minmax(0,1fr);gap:8px}}

.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.skill{display:grid;grid-template-rows:96px 18px 54px 18px;gap:6px;padding:10px 12px 12px;border-radius:12px;background:var(--card);transition:background 160ms}
.skill .sf{display:block;border-radius:8px;background:var(--code);overflow:hidden}
.skill .sf .fig{display:block;width:100%;height:96px}
.skfig{border-radius:12px;background:var(--code);padding:10px}
.skfig .fig{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
/* Figure vocabulary: theme tokens only, no gradients. */
.fig{font-family:var(--font-sans)}
.f-box{fill:var(--card-2);stroke:var(--overlay-3);stroke-width:1}
.f-acc{fill:color-mix(in srgb,var(--violet) 16%,var(--card-2));stroke:var(--violet);stroke-width:1}
.f-goodb{fill:color-mix(in srgb,var(--success) 14%,var(--card-2));stroke:var(--success)}
.f-warnb{fill:color-mix(in srgb,var(--warning) 14%,var(--card-2));stroke:var(--warning)}
.f-top{fill:var(--overlay-2)}
.f-t{font-size:9.5px;font-weight:600;fill:var(--foreground);text-anchor:middle}
.f-s{font-size:8.5px;fill:var(--foreground)}
.f-mid{text-anchor:middle}
.f-faint{fill:var(--muted-foreground)}
.f-strong{font-weight:600}
.f-code{font-family:var(--font-mono);font-size:8px;fill:var(--tk-fn)}
.f-cmt{font-family:var(--font-mono);font-size:8px;fill:var(--tk-com)}
.f-good{fill:var(--success)} .f-warn{fill:var(--warning)} .f-bad{fill:var(--danger)} .f-accp{fill:var(--violet);font-weight:600}
.f-inv{fill:#111;font-weight:700}
.f-bar{fill:var(--overlay-3)} .f-acc-bar{fill:var(--violet);opacity:.6}
.f-barv{fill:var(--overlay-3)}
.f-acc-fill{fill:var(--violet)} .f-acc-fill2{fill:var(--violet);opacity:.75}
.f-good-fill{fill:var(--success)} .f-warn-fill{fill:var(--warning)} .f-bad-fill{fill:var(--danger)}
.f-ln{stroke:var(--faint);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.f-ln.f-acc{stroke:var(--violet);fill:none} .f-ln.f-good{stroke:var(--success)} .f-ln.f-bad,.f-bad.f-ln{stroke:var(--danger)}
path.f-bad{stroke:var(--danger);fill:none} path.f-good{stroke:var(--success);fill:none} path.f-acc{fill:none;stroke:var(--violet)}
.f-ah{fill:var(--faint)} .f-ah.f-acc{fill:var(--violet)} .f-ah.f-good{fill:var(--success)}
.f-dash{stroke-dasharray:3 3}
.f-thick{stroke-width:2.2}
.f-sep{stroke:var(--border);stroke-width:1;fill:none}
.f-axis{stroke:var(--overlay-3);stroke-width:1.2;fill:none}
.f-dot{fill:var(--overlay-3)}
.f-okc{fill:rgba(112,219,160,.18);stroke:var(--success)} .f-okm{stroke:var(--success);stroke-width:1.6;fill:none}
.f-noc{fill:rgba(255,114,120,.16);stroke:var(--danger)} .f-nom{stroke:var(--danger);stroke-width:1.6;fill:none}
.f-pill{fill:var(--card-2)} .f-pill.f-accp{fill:color-mix(in srgb,var(--violet) 18%,var(--card-2))} .f-pill.f-goodp{fill:color-mix(in srgb,var(--success) 18%,var(--card-2))}
text.f-goodp{fill:var(--success);font-weight:600}
.f-hi{fill:rgba(185,155,255,.16);stroke:var(--violet);stroke-dasharray:3 2}
.f-big{font-size:64px;font-weight:300;fill:var(--muted-foreground);text-anchor:middle}
.f-wall{fill:rgba(110,168,255,.10)}
.f-dock{fill:var(--overlay-2)}
.f-rail{fill:var(--overlay-2)}
.f-track{fill:var(--overlay-2)}
.f-cell1{fill:rgba(110,168,255,.16)} .f-cell2{fill:rgba(112,219,160,.16)} .f-cell3{fill:rgba(255,158,87,.16)}
/* Skill detail, after the ShappyOS Skills page */
.skwait{display:grid;place-items:center;min-height:320px;color:var(--muted-foreground)}
.skinstr .article-md,.skfiles .article-md{padding:6px 18px 18px;font-size:14px}
.skmd h2{font-size:17px;margin:26px 0 10px}
.skfiles{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.skfiles nav{display:flex;flex-direction:column;gap:1px;position:sticky;top:0}
.skpath{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:12px var(--font-mono);color:var(--muted-foreground)}
.skrow{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;height:32px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:var(--foreground);text-align:left;transition:background 140ms}
.skrow:hover,.skrow:focus-visible{background:var(--overlay-1)}
.skrow.on{background:var(--overlay-2)}
.skrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skrow small{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
.skrow .icon{color:var(--muted-foreground)}
.skrules{display:flex;flex-direction:column;gap:8px}
.skrules article{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:14px 16px;border-radius:12px;background:var(--card);line-height:1.55}
.skrules .rn{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--overlay-2);color:var(--muted-foreground);font-size:12px;font-variant-numeric:tabular-nums}
.skill:hover,.skill:focus-visible{background:var(--card-2)}
.skill .sn{font:600 12.5px var(--font-mono);color:var(--violet);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skill .sd{color:var(--muted-foreground);font-size:12.5px;line-height:18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.skill .sm{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;white-space:nowrap}
.pipe{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pipe .node{height:auto;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 11px;border-radius:10px;font-size:11px}
.pipe .node .k{font:600 12px var(--font-mono);color:var(--foreground)}

.lchart{display:block;width:100%;height:auto}
.lc-bar{fill:var(--violet);opacity:.55} .lc-peak{fill:var(--violet)}
.lc-base{stroke:var(--overlay-3);stroke-width:1}
.lc-ax{font:11px var(--font-sans);fill:var(--faint);text-anchor:middle}
.lc-lab{font:600 11px var(--font-sans);fill:var(--foreground);text-anchor:middle}
.prs{display:flex;flex-direction:column;gap:2px;border-radius:12px;overflow:clip}
.prs a{display:grid;grid-template-columns:96px 190px minmax(0,1fr);gap:12px;align-items:center;min-height:38px;padding:6px 14px;background:var(--card);font-size:12.5px;transition:background 140ms}
.prs a:hover,.prs a:focus-visible{background:var(--card-2)}
.prs .pr-repo{color:var(--brand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prs .pr-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.prs a{grid-template-columns:minmax(0,1fr)}}

/* Writing index */
.feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-radius:12px;background:var(--card);overflow:clip;margin-bottom:24px;transition:background 160ms}
.feat:hover,.feat:focus-visible{background:var(--card-2)}
.feat .im{position:relative;min-height:250px;background:var(--code)}
.feat .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat .tx{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px 24px}
.feat h2{font-size:21px;line-height:1.25;letter-spacing:-.01em}
.feat .readmore{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:500}
.topic{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtool{flex-wrap:wrap}
.topics{overflow-x:auto;max-width:100%;scrollbar-width:none}.topics::-webkit-scrollbar{display:none}
.topics button{white-space:nowrap}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.acard{display:grid;grid-template-rows:150px auto;border-radius:12px;background:var(--card);overflow:clip;transition:background 160ms}
.acard:hover,.acard:focus-visible{background:var(--card-2)}
.acard .im{position:relative;overflow:clip;background:var(--code)}
.acard .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease)}
.acard:hover .im img{transform:scale(1.03)}
.acard .tx{display:grid;grid-template-rows:16px 40px 36px 16px;gap:6px;padding:12px 14px 14px}
.acard .at{line-height:20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard .ad{color:var(--muted-foreground);font-size:12.5px;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard .am{color:var(--faint);font-size:12px;line-height:16px}
.wrow .d{line-height:1.5}

/* Article reader */
.card-ws{position:relative}
.rprog{position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none}
.rprog i{display:block;height:100%;width:0;background:var(--brand);transition:width 80ms linear}
.rwrap{container-type:inline-size}
.reader{display:grid;grid-template-columns:minmax(0,680px) 190px;gap:56px;justify-content:center;padding:36px 28px 96px}
.post h1{font-size:30px;line-height:1.2;letter-spacing:-.02em;margin-top:8px}
.post .dek{font-size:16px;line-height:1.55;color:var(--muted-foreground);margin-top:10px}
.pmeta{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--faint);font-size:12.5px}
.pcover{margin:20px 0 28px;border-radius:12px;overflow:clip;background:var(--code)}
.pcover img{display:block;width:100%;height:auto}
.article-md{font-size:15px;line-height:1.72}
.article-md p{margin:0 0 16px}
.article-md h2{font-size:19px;line-height:1.3;margin:36px 0 12px}
.article-md h3{font-size:16px;margin:28px 0 10px}
.article-md ul,.article-md ol{margin:0 0 16px;padding-left:22px}
.article-md li{margin:5px 0}
.article-md a{color:var(--brand)}
.article-md a:hover{text-decoration:underline}
.article-md img{display:block;max-width:100%;height:auto;border-radius:10px;margin:22px 0}
.article-md figure{margin:22px 0}
.article-md figure img{margin:0}
.article-md figcaption{color:var(--muted-foreground);font-size:13px;margin-top:8px}
.article-md video{display:block;width:100%;border-radius:10px;margin:22px 0;background:var(--code)}
.article-md blockquote{margin:0 0 16px;padding:12px 16px;border-radius:10px;background:var(--overlay-1);color:var(--muted-foreground)}
.article-md hr{border:0;height:1px;background:var(--border);margin:30px 0}
.article-md b{font-weight:600}
.excerpt{margin:0 0 26px}.excerpt h2{font-size:14px;margin:0 0 4px}.excerpt p{font-size:13px;margin:0 0 10px}
.litrepos td.muted{white-space:normal;min-width:220px;line-height:1.4;padding-top:8px;padding-bottom:8px}
.how{margin:0 0 22px}
.how video{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#000}
.how figcaption{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--faint)}
.facts td{white-space:normal;padding-top:10px;padding-bottom:10px;line-height:1.4}
.osvis{padding:10px;border-radius:12px;background-color:var(--card);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23888' fill-opacity='.18'/%3E%3C/svg%3E")}
.osvis .ill{width:100%}
.osmain{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding:14px 10px 6px}
.osmain .ostext{padding:0}
.ill .i-band{fill:var(--card-2);opacity:.55;transition:opacity 300ms} .ill .i-lit .i-band{opacity:1;fill:color-mix(in srgb,var(--violet) 14%,var(--card-2))}
.ill .i-lit text{fill:var(--violet)} .ill .i-conn{stroke:var(--violet);stroke-opacity:.6}
.ill .i-tile{fill:var(--card)} .ill .i-bub{fill:var(--card-2)} .ill .i-tiled{fill:#15171c}
.ill .i-sep{stroke:var(--border);stroke-width:1;fill:none} .ill .i-railic{fill:var(--card-2)} .ill .i-railon{fill:var(--violet)}
.ill .i-chipk{fill:color-mix(in srgb,var(--violet) 18%,var(--card-2))} .ill .i-k{fill:var(--violet);font:600 10.5px var(--font-sans)}
.ill .i-think{fill:var(--card)} .ill .i-tdot{fill:var(--muted-foreground)}
.ill .i-st{font:600 11.5px var(--font-sans)} .ill .i-work{fill:var(--info)} .ill .i-done{fill:var(--success)}
.ill .i-rel{fill:color-mix(in srgb,var(--info) 16%,var(--card-2))} .ill .i-relt{fill:var(--info)}
.ill .hfloat{transform-box:fill-box;transform-origin:center;animation:hfloat 2.2s ease-in-out infinite alternate} .ill .f1{animation-delay:-.7s} .ill .f2{animation-delay:-1.4s}
@keyframes hfloat{from{transform:translateY(1px)}to{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.ill .hfloat{animation:none}}
.pcard .thumb .oshero-svg{position:absolute;inset:0;width:100%;height:100%;padding:6px;box-sizing:border-box}
.v2player{margin:0 0 22px}
.v2head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.v2tabs{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
.v2tab{height:30px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--muted-foreground);font:500 13px var(--font-sans);cursor:pointer;transition:background 140ms,color 140ms}
.v2tab:hover,.v2tab:focus-visible{background:var(--overlay-1);color:var(--foreground)}
.v2tab[aria-selected=true]{background:var(--overlay-2);color:var(--foreground)}
.v2player .win{box-shadow:none}
.v2scope svg.av{display:block;width:100%;height:auto;border-radius:0;font-size:inherit;font-weight:inherit;color:inherit}
.v2bar{height:3px;margin-top:8px;border-radius:2px;background:var(--overlay-1);overflow:hidden}.v2bar i{display:block;height:100%;width:0;background:var(--brand)}
.v2player figcaption{display:flex;flex-direction:column;gap:3px;margin-top:10px}.v2player figcaption b{font-size:15px}.v2player figcaption span{color:var(--muted-foreground);font-size:13.5px;line-height:1.45}
.v2note{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--faint)}
.ill .sc-panel{fill:color-mix(in srgb,var(--violet) 12%,var(--card))} .ill .sc-side{fill:var(--overlay-1)} .ill .sc-note{fill:var(--card)} .ill .sc-line{fill:var(--muted-foreground);opacity:.35}
.ill .sc-new .sc-note{fill:color-mix(in srgb,var(--violet) 28%,var(--card))} .ill .sc-u{fill:var(--card-2)} .ill .sc-ut{fill:var(--foreground)}
.ill .sc-tool{fill:color-mix(in srgb,var(--violet) 22%,var(--card-2))} .ill .sc-code{fill:var(--violet);font:600 11px var(--font-mono)} .ill .sc-arrow{stroke:var(--violet);stroke-opacity:.7}
.ill .sc-ask{fill:var(--card-2)} .ill .sc-k{fill:var(--violet);font:600 10.5px var(--font-sans)} .ill .sc-ok{fill:var(--violet)} .ill .sc-okt{fill:#160f24;font:600 10.5px var(--font-sans)} .ill .sc-press .sc-ok{fill:color-mix(in srgb,var(--violet) 60%,#fff)}
.ill .sc-hub{fill:color-mix(in srgb,var(--violet) 16%,var(--card-2))}
.ill.sc .i-step{fill:var(--violet)} .ill.sc .i-sel rect{fill:var(--violet)} .ill.sc .i-sel text{fill:#160f24}
/* before.css */
/* Batch "before": accents and parts for mercers, pollen8, faros, diablo-gold and ebay-arbitrage. */
.ill.before-mer{--lit:#62b5f2} html[data-theme=light] .ill.before-mer{--lit:#0b62a3}
.ill.before-p8{--lit:#4fd1c5} html[data-theme=light] .ill.before-p8{--lit:#0f766e}
.ill.before-far{--lit:#8bd450} html[data-theme=light] .ill.before-far{--lit:#3b7d12}
.ill.before-d3{--lit:#e6b450} html[data-theme=light] .ill.before-d3{--lit:#8f600c}
.ill.before-eb{--lit:#f2a65a} html[data-theme=light] .ill.before-eb{--lit:#a8540e}
.ill.before .i-sel text{fill:var(--card)}
.ill.before .before-acct{fill:var(--lit)}
.ill .before-okt{fill:var(--success);font:600 12px var(--font-sans)}
.ill .before-line{fill:var(--muted-foreground);opacity:.35}
.ill .before-page{fill:var(--card)}
/* Mercers */
.ill .before-tag{fill:var(--overlay-2)} .ill .before-tagt{fill:var(--foreground);font:600 12px var(--font-sans)}
.ill .before-on .before-tag{fill:var(--lit)} .ill .before-on .before-tagt{fill:var(--card)}
.ill .before-track{fill:var(--overlay-2)} .ill .before-fill{fill:var(--lit)}
.ill .before-strike{stroke:var(--danger);stroke-width:1.6;fill:none}
.ill .before-white{fill:#fff}
.ill .before-cb{fill:none;stroke:var(--lit);stroke-width:1.6} .ill .before-cbt{fill:none;stroke:var(--lit);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ill .before-reddot{fill:var(--danger)}
.ill .before-pulse{fill:none;stroke:var(--success);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:before-pulse 2.2s ease-out infinite}
@keyframes before-pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}
/* Pollen8 */
.ill .before-scr{fill:var(--card)} .ill .before-sky{fill:color-mix(in srgb,var(--lit) 10%,var(--card))}
.ill .before-bld{fill:color-mix(in srgb,var(--muted-foreground) 32%,var(--card))} .ill .before-bld8{fill:color-mix(in srgb,var(--lit) 55%,var(--card))}
.ill .before-bwin{fill:var(--card);opacity:.55} .ill .before-ground{fill:color-mix(in srgb,var(--muted-foreground) 18%,var(--card))}
.ill .before-pill{fill:color-mix(in srgb,var(--card) 85%,transparent)} .ill .before-pillt{fill:var(--foreground);font:600 12px var(--font-sans)}
.ill .before-map{fill:color-mix(in srgb,var(--muted-foreground) 8%,var(--card))}
.ill .before-st{fill:none;stroke:color-mix(in srgb,var(--muted-foreground) 22%,var(--card));stroke-width:8;stroke-linecap:round}
.ill .before-park{fill:color-mix(in srgb,var(--success) 22%,var(--card))}
.ill .before-pin{fill:var(--muted-foreground)} .ill .before-pin.before-main{fill:var(--lit)} .ill .before-pinh{fill:var(--card)}
.ill .before-plan{fill:none;stroke:var(--muted-foreground);stroke-width:1.4} .ill .before-room{fill:color-mix(in srgb,var(--lit) 32%,var(--card))}
.ill .before-fac{fill:color-mix(in srgb,var(--muted-foreground) 18%,var(--card-2))} .ill .before-win{fill:color-mix(in srgb,var(--lit) 35%,var(--card))}
.ill .before-door{fill:color-mix(in srgb,var(--muted-foreground) 40%,var(--card))}
.ill .before-code{fill:var(--code)} .ill .before-kw{fill:var(--lit)}
.ill .before-panel{fill:color-mix(in srgb,var(--lit) 12%,var(--card-2))}
.ill .before-cur{fill:var(--foreground);stroke:var(--card);stroke-width:1.2;stroke-linejoin:round}
.ill .before-phone{transform-box:fill-box;transform-origin:50% 100%;transition:transform .9s ease-in-out}
.ill .before-phone.before-tl{transform:rotate(-6deg)} .ill .before-phone.before-tr{transform:rotate(6deg)}
.ill .before-veil{fill:var(--card);fill-opacity:.62}
/* Faros */
.ill .before-old{fill:var(--overlay-2)} .ill .before-moved{opacity:.45;transition:opacity .4s}
.ill .before-bar{fill:color-mix(in srgb,var(--lit) 72%,var(--card))}
.ill .before-base{fill:none;stroke:var(--muted-foreground);stroke-width:1.8;stroke-dasharray:5 4}
.ill .before-tgt{fill:none;stroke:var(--success);stroke-width:1.8;stroke-dasharray:5 4}
.ill .before-wx{fill:none;stroke:var(--info);stroke-width:2.2;stroke-linecap:round}
/* Diablo III trading */
.ill .before-fleet{fill:none;stroke:var(--lit);stroke-width:1.6;stroke-dasharray:6 5}
.ill .before-coin{fill:#f2c14e;stroke:#9a6a12;stroke-width:1.2}
.ill .before-mon{fill:none;stroke:var(--muted-foreground);stroke-width:1.5;stroke-linecap:round}
.ill .before-clk{fill:none;stroke:var(--overlay-2);stroke-width:3} .ill .before-arc{fill:none;stroke:var(--lit);stroke-width:3;stroke-linecap:round}
.ill .before-hand{fill:none;stroke:var(--foreground);stroke-width:1.6;stroke-linecap:round}
.ill .before-sos{fill:color-mix(in srgb,var(--lit) 14%,var(--card-2))}
/* eBay and Amazon arbitrage */
.ill .before-pkg path{fill:color-mix(in srgb,var(--lit) 20%,var(--card-2));stroke:var(--lit);stroke-width:1.6;stroke-linejoin:round}
.ill .before-pkg path[fill=none]{fill:none}
.ill .before-slip{fill:var(--card);stroke:var(--lit);stroke-width:1.4} .ill .before-slipl{fill:none;stroke:var(--muted-foreground);stroke-width:1.4;stroke-linecap:round}
.ill .before-house{fill:none;stroke:var(--foreground);stroke-width:1.6;stroke-linejoin:round}
.ill .before-bar1{fill:color-mix(in srgb,var(--muted-foreground) 45%,var(--card))} .ill .before-gap{fill:var(--lit)}
.ill .before-day{fill:var(--overlay-2)} .ill .before-day.before-dayon{fill:var(--lit)}
@media (prefers-reduced-motion:reduce){.ill .before-pulse{animation:none;opacity:0}.ill .before-phone,.ill .before-moved{transition:none}}
.ill .before-tab{fill:color-mix(in srgb,var(--muted-foreground) 14%,var(--card-2))}
.ill .before-nch rect{fill:color-mix(in srgb,var(--muted-foreground) 16%,var(--card-2))}

/* core-tools.css */
/* core-tools batch: Monologos, Plansman, Speakee, envars, wtfis, mkserve. Each figure has class "ct" and its own accent class. */
.ill.ct-mono{--lit:#ec8a55} html[data-theme=light] .ill.ct-mono{--lit:#ad4613}
.ill.ct-plan{--lit:#9693fa} html[data-theme=light] .ill.ct-plan{--lit:#4f46d8}
.ill.ct-speak{--lit:#a5b4fc} html[data-theme=light] .ill.ct-speak{--lit:#4f46e5}
.ill.ct-env{--lit:#a598ff} html[data-theme=light] .ill.ct-env{--lit:#5146e5}
.ill.ct-wtf{--lit:#61f3be} html[data-theme=light] .ill.ct-wtf{--lit:#0b7a55}
.ill.ct-mk{--lit:#4ccbf5} html[data-theme=light] .ill.ct-mk{--lit:#0b6e9e}
.ill.ct .i-sel text{fill:#141414} html[data-theme=light] .ill.ct .i-sel text{fill:#fff}
.ill.ct .ct-term{fill:var(--code)}
.ill.ct .ct-p{fill:var(--lit);font-weight:600}
.ill.ct .ct-dim{fill:var(--muted-foreground)}
.ill.ct .ct-okt{fill:var(--success)}
.ill.ct .ct-acc{fill:var(--lit)}
.ill.ct .ct-accm{fill:var(--lit);font:600 11.5px var(--font-mono)}
.ill.ct .ct-hl{fill:color-mix(in srgb,var(--lit) 22%,transparent)}
.ill.ct .ct-bg{fill:var(--overlay-2)}
.ill.ct .ct-on .ct-bg{fill:color-mix(in srgb,var(--lit) 20%,var(--card-2))}
.ill.ct .ct-in{fill:var(--card)}
.ill.ct .ct-side{fill:var(--overlay-2)}
.ill.ct .ct-bub{fill:color-mix(in srgb,var(--lit) 16%,var(--card-2))}
.ill.ct .ct-s11{fill:var(--muted-foreground);font:11px var(--font-sans)}
.ill.ct .ct-m11{fill:var(--muted-foreground);font:11px var(--font-mono)}
.ill.ct .ct-h{fill:var(--foreground);font:600 16px var(--font-sans)}
.ill.ct .ct-mh{fill:var(--foreground);font:600 11.5px var(--font-mono)}
.ill.ct .ct-icon{fill:none;stroke:var(--muted-foreground);stroke-width:1.4;stroke-linejoin:round}
.ill.ct .ct-iacc{fill:none;stroke:var(--lit);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.ill.ct .ct-pillon{fill:color-mix(in srgb,var(--lit) 30%,var(--card-2))}
.ill.ct .ct-warn{fill:var(--warning)}
.ill.ct .ct-open rect.i-bx{fill:color-mix(in srgb,var(--warning) 14%,var(--card-2))}
.ill.ct .ct-wave{fill:none;stroke:var(--lit);stroke-width:2.4;stroke-linecap:round;opacity:.22;transition:opacity .2s}
.ill.ct .ct-wave.ct-w1,.ill.ct .ct-wave.ct-w2,.ill.ct .ct-wave.ct-w3,.ill.ct .ct-wave.ct-w4{opacity:1}
.ill.ct .ct-frame{fill:none;stroke:var(--lit);stroke-opacity:.55;stroke-width:1.4;stroke-dasharray:4 5}
.ill.ct .ct-t12{fill:var(--foreground);font:12px var(--font-sans)}

/* experiments.css */
/* Experiments batch. Every rule starts with .ill.experiments, because this file loads before the base .ill rules. */
.ill.experiments-trymeepo{--lit:#8fe3a5} html[data-theme=light] .ill.experiments-trymeepo{--lit:#1d7a3c}
.ill.experiments-stuntfactor{--lit:#bef34f} html[data-theme=light] .ill.experiments-stuntfactor{--lit:#4c7300}
.ill.experiments-hakban{--lit:#9a97f6} html[data-theme=light] .ill.experiments-hakban{--lit:#4a46c8}
.ill.experiments-hermes-admin{--lit:#3fd0bf} html[data-theme=light] .ill.experiments-hermes-admin{--lit:#0f766e}
.ill.experiments-demo-walkthrough{--lit:#c6ef8a} html[data-theme=light] .ill.experiments-demo-walkthrough{--lit:#467a0e}
.ill.experiments-buzz-sso{--lit:#ffbf3c} html[data-theme=light] .ill.experiments-buzz-sso{--lit:#935d00}
.ill.experiments-morpho{--lit:#bba9f2} html[data-theme=light] .ill.experiments-morpho{--lit:#5b47a0}
/* Light accents in dark mode need dark text on accent chips. */
.ill.experiments .i-sel text{fill:#14170f} html[data-theme=light] .ill.experiments .i-sel text{fill:#fff}
/* Chips inside cards: a stronger fill, then the usual states. */
.ill.experiments .experiments-c .i-ch{fill:var(--overlay-3)}
.ill.experiments .i-sel .i-ch{fill:var(--lit)}
.ill.experiments .i-okchip .i-ch{fill:color-mix(in srgb,var(--success) 22%,var(--card-2))}
.ill.experiments .experiments-warn .i-ch{fill:color-mix(in srgb,var(--warning) 20%,var(--card-2))} .ill.experiments .experiments-warn text{fill:var(--warning)}
.ill.experiments .i-press .i-ch{fill:color-mix(in srgb,var(--lit) 55%,var(--card-2))}
/* The final line. */
.ill.experiments .experiments-les{fill:color-mix(in srgb,var(--lit) 12%,var(--card-2))}
.ill.experiments .experiments-k{fill:var(--lit);font:600 12px var(--font-sans)}
.ill.experiments .experiments-lt{fill:var(--foreground);font:500 12.5px var(--font-sans)}
.ill.experiments .experiments-bulb{fill:none;stroke:var(--lit);stroke-width:1.6;stroke-linecap:round}
/* Shared pieces. */
.ill.experiments .experiments-row{fill:var(--overlay-3)}
.ill.experiments .experiments-doc,.ill.experiments .experiments-track{fill:var(--overlay-3)}
.ill.experiments .experiments-docl{fill:none;stroke:var(--muted-foreground);stroke-opacity:.6;stroke-width:1.4;stroke-linecap:round}
.ill.experiments .experiments-logobg{fill:#14231a}
.ill.experiments .experiments-ico{fill:none;stroke:var(--muted-foreground);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ill.experiments .experiments-icoa{fill:none;stroke:var(--lit);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ill.experiments .experiments-ring{fill:none;stroke:var(--lit);stroke-width:2}
.ill.experiments .experiments-av{fill:color-mix(in srgb,var(--lit) 34%,var(--card-2))}
.ill.experiments .experiments-warnico{fill:none;stroke:var(--warning);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ill.experiments .experiments-warnt{fill:var(--warning);font:12px var(--font-sans)}
.ill.experiments .experiments-okt{fill:var(--success);font:12px var(--font-sans)}
/* Medallion results. */
.ill.experiments .experiments-bronze{fill:#c98c55} .ill.experiments .experiments-silver{fill:#aab3bd} .ill.experiments .experiments-gold{fill:#e5b53f}
html[data-theme=light] .ill.experiments .experiments-bronze{fill:#a4672e} html[data-theme=light] .ill.experiments .experiments-silver{fill:#7d8896} html[data-theme=light] .ill.experiments .experiments-gold{fill:#c18f12}
.ill.experiments .experiments-band{fill:color-mix(in srgb,var(--lit) 26%,transparent)}
.ill.experiments .experiments-dotm{fill:var(--muted-foreground)}
/* StuntFactor. */
.ill.experiments .experiments-body{fill:color-mix(in srgb,var(--muted-foreground) 40%,var(--card-2))}
.ill.experiments .experiments-limb{fill:none;stroke:color-mix(in srgb,var(--muted-foreground) 40%,var(--card-2));stroke-width:10;stroke-linecap:round} .ill.experiments .experiments-leg{stroke-width:13}
.ill.experiments .experiments-space{fill:color-mix(in srgb,var(--lit) 30%,transparent)}
.ill.experiments .experiments-spaceline{fill:none;stroke:var(--lit);stroke-width:2;stroke-linejoin:round}
.ill.experiments .experiments-art{fill:var(--foreground)}
/* Hermes Admin. */
.ill.experiments .experiments-bezel{fill:color-mix(in srgb,var(--foreground) 11%,var(--card))} .ill.experiments .experiments-scr{fill:var(--card)}
.ill.experiments .experiments-vm{fill:color-mix(in srgb,var(--foreground) 6%,var(--card))}
.ill.experiments .experiments-blue{fill:#2f7cf6} .ill.experiments .experiments-bw{fill:#fff;font:12px var(--font-sans)}
.ill.experiments .experiments-grey{fill:color-mix(in srgb,var(--foreground) 10%,var(--card))} .ill.experiments .experiments-bt{fill:var(--foreground);font:12px var(--font-sans)}
/* Demo Walkthrough and Morpho. */
.ill.experiments .experiments-bar{fill:color-mix(in srgb,var(--muted-foreground) 50%,transparent)}
.ill.experiments .experiments-line{fill:var(--muted-foreground);opacity:.35}
.ill.experiments .experiments-img{fill:var(--overlay-2)}
.ill.experiments .experiments-hlrow{fill:color-mix(in srgb,var(--lit) 16%,transparent)}
.ill.experiments .experiments-play{fill:#14170f} html[data-theme=light] .ill.experiments .experiments-play{fill:#fff}
.ill.experiments .experiments-playl{fill:none;stroke:#14170f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} html[data-theme=light] .ill.experiments .experiments-playl{stroke:#fff}
.ill.experiments .experiments-cur{fill:var(--foreground);stroke:var(--card);stroke-width:1.4;stroke-linejoin:round}
.ill.experiments .experiments-on{fill:var(--lit)}
.ill.experiments .experiments-hot{stroke:var(--lit);stroke-opacity:1;stroke-width:2}
.ill.experiments .experiments-win,.ill.experiments .experiments-prompt{fill:var(--card)}
.ill.experiments .experiments-dot{fill:var(--muted-foreground);opacity:.3}
.ill.experiments .experiments-pressed{opacity:.6}

/* products-a.css */
/* products-a: accents and parts for Charli Voice, Bukkumaku, YapHaus, Tune It Own It, SchnapShot and Hermesaki. */
.ill.x-charli-voice{--lit:#c8f560} html[data-theme=light] .ill.x-charli-voice{--lit:#4d7a00}
.ill.x-bukkumaku{--lit:#ff5a36} html[data-theme=light] .ill.x-bukkumaku{--lit:#c93a1b}
.ill.x-yaphaus{--lit:#ffb627} html[data-theme=light] .ill.x-yaphaus{--lit:#9a5800}
.ill.x-tuneitownit{--lit:#ff7a45} html[data-theme=light] .ill.x-tuneitownit{--lit:#c2461a}
.ill.x-schnapshot{--lit:#ff5c47} html[data-theme=light] .ill.x-schnapshot{--lit:#c7301d}
.ill.x-hermesaki{--lit:#ef6a43} html[data-theme=light] .ill.x-hermesaki{--lit:#b3421e}
/* Dark text on the light accents of the dark theme. */
.ill.x-charli-voice .i-sel text,.ill.x-yaphaus .i-sel text{fill:#17140a}
html[data-theme=light] .ill.x-charli-voice .i-sel text,html[data-theme=light] .ill.x-yaphaus .i-sel text{fill:#fff}
.ill.products-a .pa-eye{fill:#17140a} html[data-theme=light] .ill.products-a .pa-eye{fill:#fff}
.ill.products-a .pa-mouth{fill:none;stroke:#17140a;stroke-width:1.6;stroke-linecap:round} html[data-theme=light] .ill.products-a .pa-mouth{stroke:#fff}
/* Shared parts */
.ill.products-a .pa-pill{fill:color-mix(in srgb,var(--lit) 20%,var(--card-2))} .ill.products-a .pa-pt{fill:var(--lit);font:600 11px var(--font-sans)}
.ill.products-a .pa-ico,.ill.products-a .pa-ico *{fill:none;stroke:var(--muted-foreground);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ill.products-a .pa-chipc rect{fill:var(--card)}
.ill.products-a .i-sel rect{fill:var(--lit)} .ill.products-a .i-press rect{fill:color-mix(in srgb,var(--lit) 55%,var(--card-2))}
.ill.products-a .i-okchip rect{fill:color-mix(in srgb,var(--success) 22%,var(--card-2))}
/* Charli Voice */
.ill.products-a .pa-cv-ink{fill:none;stroke:#13200a;stroke-width:2.6;stroke-linecap:round}
.ill.products-a .pa-cv-mic rect,.ill.products-a .pa-cv-mic path{fill:none;stroke:#13200a;stroke-width:2.2;stroke-linecap:round}
html[data-theme=light] .ill.products-a .pa-cv-ink,html[data-theme=light] .ill.products-a .pa-cv-mic rect,html[data-theme=light] .ill.products-a .pa-cv-mic path{stroke:#fff}
.ill.products-a .pa-cv-st{fill:var(--lit);font:600 12px var(--font-sans)}
.ill.products-a .pa-cv-ring{fill:var(--lit);opacity:.07;transition:opacity .45s} .ill.products-a .pa-cv-ring.pa-r2{opacity:.13}
.ill.products-a .pa-cv-ring.pa-on{opacity:.2} .ill.products-a .pa-cv-ring.pa-r2.pa-on{opacity:.3}
.ill.products-a .pa-cv-bar{fill:var(--muted-foreground);opacity:.4;transition:fill .3s,opacity .3s}
.ill.products-a .pa-live .pa-cv-bar{fill:var(--lit);opacity:.9}
.ill.products-a .pa-cv-bub{fill:color-mix(in srgb,var(--foreground) 9%,var(--card))}
.ill.products-a .pa-cv-say{fill:var(--foreground);font:500 13px var(--font-sans)}
.ill.products-a .pa-bad{fill:var(--danger);text-decoration:line-through}
.ill.products-a .pa-cv-bt{fill:var(--danger);font:600 12px var(--font-sans)}
.ill.products-a .pa-cv-fix{fill:color-mix(in srgb,var(--lit) 12%,var(--card-2))}
.ill.products-a .pa-cv-k{fill:var(--lit);font:600 12px var(--font-sans)} .ill.products-a .pa-cv-good{fill:var(--lit);font-weight:700}
.ill.products-a .pa-cv-re{fill:none;stroke:var(--lit);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ill.products-a .pa-srv{fill:color-mix(in srgb,var(--lit) 8%,var(--card-2));stroke:color-mix(in srgb,var(--lit) 45%,transparent);stroke-width:1.2;stroke-dasharray:5 4}
/* Bukkumaku */
.ill.products-a .pa-bk-search{fill:color-mix(in srgb,var(--foreground) 6%,var(--card))}
.ill.products-a .pa-bk-tile{fill:var(--card)} .ill.products-a .pa-bk-ln{fill:var(--muted-foreground);opacity:.35}
.ill.products-a .pa-bk-vid{fill:#2b2421} .ill.products-a .pa-bk-vt{fill:#f4ede6;font:600 11px var(--font-sans)}
.ill.products-a .pa-hit rect{stroke:var(--lit);stroke-width:2}
.ill.products-a .pa-bk-panel{fill:var(--card)}
.ill.products-a .pa-bk-sun{fill:#ffc24a} .ill.products-a .pa-bk-play{fill:#fff;opacity:.92} .ill.products-a .pa-bk-tri{fill:#2b2421}
.ill.products-a .pa-bk-badge{fill:#fff;font:700 12px var(--font-sans)}
.ill.products-a .pa-bk-mark{fill:var(--lit);stroke:var(--card);stroke-width:2}
/* YapHaus */
.ill.products-a .pa-yh-field{fill:color-mix(in srgb,var(--lit) 10%,var(--card-2))}
.ill.products-a .pa-yh-url{fill:var(--foreground);font:500 14px var(--font-mono)}
.ill.products-a .pa-yh-name{fill:var(--lit);text-decoration:underline}
.ill.products-a .pa-yh-host{fill:var(--foreground);font:600 12px var(--font-mono)}
.ill.products-a .pa-yh-pend{fill:var(--card);stroke:var(--muted-foreground);stroke-width:1.5}
.ill.products-a .pa-yh-pend.pa-act{stroke:var(--lit);stroke-width:2.4}
.ill.products-a .pa-yh-ghost{fill:none;stroke:var(--muted-foreground);stroke-opacity:.4;stroke-width:1.2;stroke-dasharray:5 5}
.ill.products-a .pa-av1{fill:var(--violet)} .ill.products-a .pa-av2{fill:var(--success)} .ill.products-a .pa-av3{fill:var(--info)}
.ill.products-a .pa-av-t{fill:var(--card);font:700 12px var(--font-sans)}
/* Tune It Own It */
.ill.products-a .pa-tu-bub{fill:color-mix(in srgb,var(--foreground) 8%,var(--card))}
.ill.products-a .pa-tu-say{fill:var(--foreground);font:500 12px var(--font-sans)}
.ill.products-a .pa-tu-new{fill:none;stroke:var(--muted-foreground);stroke-opacity:.7;stroke-width:1.2;stroke-dasharray:4 3}
.ill.products-a .pa-tu-paper{fill:#f7f5f0} html[data-theme=light] .ill.products-a .pa-tu-paper{fill:#fbfaf6;stroke:rgba(30,40,60,.1)}
.ill.products-a .pa-tu-ink{fill:#232323} .ill.products-a .pa-tu-eye{fill:#fff}
.ill.products-a .pa-tu-leg{fill:none;stroke:#232323;stroke-width:2;stroke-linecap:round}
.ill.products-a .pa-tu-spk{fill:none;stroke:#f06a35;stroke-width:2.4;stroke-linecap:round}
.ill.products-a .pa-tu-gnd{fill:none;stroke:#b9b3a8;stroke-width:1.6;stroke-linecap:round}
.ill.products-a .pa-tu-prop{fill:#fff;stroke:#232323;stroke-width:1.4}
.ill.products-a .pa-tu-lap{fill:#cfd2d6;stroke:#232323;stroke-width:1.4;stroke-linejoin:round}
/* SchnapShot */
.ill.products-a .pa-sn-page{fill:#f3ece4} .ill.products-a .pa-sn-dotg{fill:#d8cfc5}
.ill.products-a .pa-sn-h{fill:#2a211c;font:700 15px var(--font-sans)}
.ill.products-a .pa-sn-ln{fill:#ddd2c6} .ill.products-a .pa-sn-imgph{fill:#e6dcd1}
.ill.products-a .pa-sn-ig *{fill:none;stroke:#b3a596;stroke-width:1.6;stroke-linejoin:round}
.ill.products-a .pa-sn-btn{fill:#2a211c} .ill.products-a .pa-sn-bt{fill:#fff;font:600 11.5px var(--font-sans)}
.ill.products-a .pa-sn-sel{fill:color-mix(in srgb,var(--lit) 8%,transparent);stroke:var(--lit);stroke-width:2;stroke-dasharray:6 4}
.ill.products-a .pa-sn-cross{stroke:#2a211c;stroke-width:1.8}
.ill.products-a .pa-sn-key{fill:color-mix(in srgb,var(--foreground) 10%,var(--card));transition:fill .2s} .ill.products-a .pa-down .pa-sn-key{fill:var(--lit)}
.ill.products-a .pa-sn-kt{fill:var(--foreground);font:600 14px var(--font-sans)} .ill.products-a .pa-down .pa-sn-kt{fill:#fff}
.ill.products-a .pa-sn-arrow{fill:#f5a623} .ill.products-a .pa-sn-ak{fill:none;stroke:#2a1a05;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ill.products-a .pa-sn-win{fill:var(--card-2)}
.ill.products-a .pa-sn-preset{fill:color-mix(in srgb,#4d8dff 20%,var(--card-2))}
.ill.products-a .pa-sn-pt{fill:#8db4ff;font:600 11px var(--font-sans)} html[data-theme=light] .ill.products-a .pa-sn-pt{fill:#1f5fd6}
.ill.products-a .pa-sn-ph{fill:color-mix(in srgb,var(--foreground) 6%,var(--card))}
.ill.products-a .pa-sn-red{fill:#e0553a} .ill.products-a .pa-sn-card{fill:#fff}
.ill.products-a .pa-sn-th{fill:#fff;font:700 15px var(--font-sans)}
.ill.products-a .pa-sn-copy{fill:#2f7cf6} .ill.products-a .pa-sn-ct{fill:#fff;font:600 12px var(--font-sans)}
.ill.products-a .pa-sn-cg *{fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.ill.products-a .pa-sn-okt{fill:var(--success);font:600 12px var(--font-sans)}
/* Hermesaki */
.ill.products-a .pa-hm-prompt{fill:color-mix(in srgb,var(--lit) 12%,var(--card-2))}
.ill.products-a .pa-hm-ln{fill:var(--muted-foreground);opacity:.35}

/* products-b.css */
/* Batch products-b: accents and own parts. Bright accents carry dark text on selected chips in the dark theme. */
.ill.products-b-juc{--lit:#ec8d4f} html[data-theme=light] .ill.products-b-juc{--lit:#a24e18}
.ill.products-b-shimex{--lit:#f2c443} html[data-theme=light] .ill.products-b-shimex{--lit:#8a6200}
.ill.products-b-silo{--lit:#b9f36d} html[data-theme=light] .ill.products-b-silo{--lit:#3f6d0c}
.ill.products-b-ailised{--lit:#8a8dff} html[data-theme=light] .ill.products-b-ailised{--lit:#3a3ed6}
.ill.products-b-spine{--lit:#a898ff} html[data-theme=light] .ill.products-b-spine{--lit:#5b45d6}
.ill.products-b-dromio{--lit:#6cc9e8} html[data-theme=light] .ill.products-b-dromio{--lit:#0f6f92}
.ill.products-b .i-sel text{fill:#121212} html[data-theme=light] .ill.products-b .i-sel text{fill:#fff}
.ill .products-b-frame{fill:none;stroke:var(--lit);stroke-opacity:.55;stroke-width:1.4;stroke-dasharray:5 5}
.ill .products-b-cur{fill:var(--foreground);stroke:var(--card);stroke-width:1.2;stroke-linejoin:round}
.ill.products-b .products-b-type{fill:var(--lit)}
.ill rect.products-b-chin{fill:color-mix(in srgb,var(--foreground) 9%,var(--card-2))}
.ill .products-b-bronze{fill:#c9874c} .ill .products-b-silver{fill:#b9c0cb} .ill .products-b-gold{fill:#e8c14f}
html[data-theme=light] .ill .products-b-bronze{fill:#9a5a24} html[data-theme=light] .ill .products-b-silver{fill:#7d8693} html[data-theme=light] .ill .products-b-gold{fill:#a8840f}
.ill .products-b-onlight{display:none} html[data-theme=light] .ill .products-b-onlight{display:inline} html[data-theme=light] .ill .products-b-ondark{display:none}
.ill .products-b-pulse{animation:products-b-pulse 1.2s ease-in-out infinite} .ill .products-b-p1{animation-delay:.2s} .ill .products-b-p2{animation-delay:.4s}
@keyframes products-b-pulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ill .products-b-pulse{animation:none}}

.illfig{margin:0 0 20px;padding:10px;border-radius:12px;background-color:var(--card);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23888' fill-opacity='.18'/%3E%3C/svg%3E")}
.illfig figcaption{display:flex;align-items:center;gap:6px;margin:6px 4px 0;font-size:12px;color:var(--faint)}
.ill{display:block;width:100%;height:auto;--lit:#ff7a45}
html[data-theme=light] .ill{--lit:#bc3b12}
.ill .i-bx{fill:var(--card-2)} .ill .i-ch{fill:var(--card-2)} .ill .i-row{fill:var(--overlay-1)}
.ill .i-t{fill:var(--foreground);font:600 13px var(--font-sans)} .ill .i-m{fill:var(--muted-foreground);font:12px var(--font-sans)}
.ill .i-c{fill:var(--foreground);font:600 12px var(--font-sans)} .ill .i-mono{fill:var(--foreground);font:11.5px var(--font-mono)}
.ill .i-step{fill:var(--lit);font:600 13.5px var(--font-sans)} .ill .i-eq{fill:var(--lit);font:700 15px var(--font-sans)}
.ill .i-ln{stroke:var(--muted-foreground);stroke-opacity:.45;stroke-width:1.4;fill:none} .ill .i-dash{stroke-dasharray:3 4}
.ill .i-badln{stroke:var(--danger);stroke-opacity:.8;stroke-dasharray:4 4}
.ill .i-acc{fill:var(--lit)} .ill .i-accl{fill:none;stroke:var(--lit);stroke-width:2} .ill .i-coin{fill:var(--warning)}
.ill .i-okc{fill:var(--success)} .ill .i-noc{fill:var(--danger)} .ill .i-okp{fill:none;stroke:var(--card);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ill .i-off{opacity:.4} .ill .i-node{fill:var(--card-2);stroke:var(--lit);stroke-width:2}
.ill .i-sel rect{fill:var(--lit)} .ill .i-sel text{fill:#fff} .ill .i-okchip rect{fill:color-mix(in srgb,var(--success) 22%,var(--card-2))} .ill .i-okchip text{fill:var(--success)}
.ill .i-press rect{fill:color-mix(in srgb,var(--lit) 55%,var(--card-2))} .ill .i-new rect{fill:color-mix(in srgb,var(--lit) 22%,var(--card-2))}
.ill .i-glow rect.i-bx{fill:color-mix(in srgb,var(--lit) 22%,var(--card-2))} .ill .i-rust{fill:color-mix(in srgb,var(--lit) 14%,var(--card-2))}
.ill .i-track{fill:var(--card-2)} .ill .i-fill{fill:var(--warning)} .ill .i-okb{fill:var(--success);opacity:.85} .ill .i-warnb{fill:var(--warning)}
.ill .i-beat{fill:var(--card-2);stroke:var(--success);stroke-width:2} .ill .i-beaton{fill:var(--success)}
.ill .i-spark{fill:none;stroke:var(--lit);stroke-width:2.2;stroke-linejoin:round} .ill .i-code{fill:var(--muted-foreground);opacity:.5}
.ill .i-share{fill:none;stroke:var(--lit);stroke-width:5;stroke-linecap:round} .ill .i-big{stroke-width:9} .ill .i-dotg{fill:var(--muted-foreground);opacity:.5}
.cblock{margin:0 0 18px;border-radius:12px;background:var(--code);overflow:clip}
.chead{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 4px 0 14px;font:11.5px var(--font-mono);color:var(--faint)}
.cblock .code{border-radius:0;padding-bottom:10px}
.tblwrap{margin:0 0 18px;border-radius:12px;background:var(--card);overflow:auto}
.mdt{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.5}
.mdt th{text-align:left;font-weight:500;font-size:12px;color:var(--faint);padding:10px 14px;white-space:nowrap}
.mdt td{padding:9px 14px;vertical-align:top;box-shadow:inset 0 1px 0 var(--border)}
.cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:40px;padding:18px;border-radius:12px;background:var(--card)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.pn a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;background:var(--card);transition:background 160ms}
.pn a:hover,.pn a:focus-visible{background:var(--card-2)}
.pn a:last-child{text-align:right}
.pn small{color:var(--faint);font-size:11.5px}
.toc{position:sticky;top:36px;align-self:start;display:flex;flex-direction:column;gap:1px}
.toc .k{font-size:11.5px;color:var(--faint);padding:0 8px 6px}
.toc button{border:0;background:transparent;text-align:left;padding:5px 8px;border-radius:7px;color:var(--muted-foreground);font-size:12.5px;line-height:1.35;transition:background 140ms,color 140ms}
.toc button:hover,.toc button:focus-visible{background:var(--overlay-1);color:var(--foreground)}
.toc button.on{background:var(--overlay-2);color:var(--foreground)}
@container (max-width:980px){.reader{grid-template-columns:minmax(0,680px)}.toc{display:none}}

/* CV */
.role .when small{display:block;margin-top:2px;color:var(--faint);font-size:11px}
.cvsum p{color:var(--muted-foreground);line-height:1.65;margin:0 0 10px;max-width:760px}
.cvfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:6px}.cvfacts div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--card)}.cvfacts b{font-size:18px}.cvfacts span{font-size:12px;color:var(--muted-foreground)}
.cvpts{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}.cvpts li{color:var(--muted-foreground);line-height:1.5}.cvpts a{color:var(--foreground)}.cvpts a:hover{color:var(--brand)}
.cvev{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--success)!important}
.cvskill{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;padding:12px 0}.cvskill+.cvskill{box-shadow:inset 0 1px 0 var(--border)}.cvskill span{color:var(--muted-foreground)}
.cvint{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--muted-foreground)}
.cvseg a{display:inline-flex;align-items:center;gap:6px;padding:0 10px;width:auto}
.lp-wrap{max-width:1080px}.lp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.lp{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:12px;align-items:start}
.lp-main,.lp-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.lp-card{padding:18px 20px;border-radius:14px;background:var(--card)}.lp-card h2{font-size:17px;margin-bottom:12px}
.lp-top{padding:0;overflow:hidden}
.lp-banner{height:110px;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:10px;overflow:hidden;padding:0 22px 0 170px;background-color:var(--card-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23888' fill-opacity='.22'/%3E%3C/svg%3E")}
.lp-banner .lp-bl{width:30px;height:30px;border-radius:8px;object-fit:contain;opacity:.92}.lp-banner .lp-bl.on-dark{background:#15171c;padding:4px}
.lp-av{width:128px;height:128px;margin:-64px 0 0 20px;border-radius:50%;display:grid;place-items:center;background:var(--anson);color:#1a1208;font:800 42px var(--font-sans);box-shadow:0 0 0 5px var(--card);position:relative}
.lp-id{padding:10px 20px 4px}.lp-id h1{font-size:24px}.lp-head{font-size:15px;margin:4px 0 6px;line-height:1.45}
.lp-faint{color:var(--muted-foreground);font-size:13px}.lp-links{display:flex;gap:14px;margin:6px 0 12px;font-size:13px}.lp-links a{color:var(--brand);font-weight:600}
.lp-acts{display:flex;flex-wrap:wrap;gap:8px}
.lp-open{display:flex;flex-direction:column;gap:2px;margin:16px 20px 18px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--success) 10%,var(--card-2));font-size:13px}.lp-open span{color:var(--muted-foreground)}
.lp-about{max-height:calc(3 * 1.6em);overflow:hidden}.lp-about.open{max-height:none}
.lp-about p{color:var(--foreground);line-height:1.6;margin:0 0 10px}
.lp-more{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--muted-foreground);font:600 13px var(--font-sans);cursor:pointer}.lp-more:hover,.lp-more:focus-visible{background:var(--overlay-1);color:var(--foreground)}.lp-more[aria-expanded=true] .icon{transform:rotate(-90deg)}.lp-more .icon{transform:rotate(90deg);transition:transform 160ms}
.lp-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.lp-feat a{display:flex;flex-direction:column;gap:4px;border-radius:10px;overflow:hidden;background:var(--card-2);padding-bottom:10px;transition:background 140ms}.lp-feat a:hover{background:var(--overlay-2)}
.lp-feat img,.lp-fimg{width:100%;aspect-ratio:16/9;object-fit:cover;display:grid;place-items:center;background:var(--overlay-1)}.lp-feat .lp-flogo{width:44px;height:44px;border-radius:10px}.lp-feat b{font-size:13px;padding:4px 10px 0}.lp-feat span{font-size:12px;color:var(--muted-foreground);padding:0 10px}
.lp-xp{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px}.lp-logo{width:48px;height:48px;border-radius:10px;object-fit:contain;background:var(--card-2)}.lp-logo.ini{display:grid;place-items:center;font:700 14px var(--font-sans);color:var(--muted-foreground)}.lp-logo.on-dark{background:#15171c;padding:6px}.lp-logo.pad{padding:5px}
.lp-xpb h3{font-size:15px}.lp-xpb>div{font-size:13.5px}.lp-p{margin-top:8px;color:var(--foreground);line-height:1.55;font-size:13.5px}
.lp-pts{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5}.lp-pts a{color:var(--foreground)}.lp-pts a:hover{color:var(--brand)}
.lp-ev{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:var(--success)}.lp-skl{display:flex;gap:6px;margin-top:8px;font-size:12.5px;color:var(--muted-foreground)}.lp-skl .icon{flex:none;margin-top:2px}
.lp-sep{height:1px;background:var(--border);margin:16px 0 16px 62px}
.lp-skill{display:flex;flex-direction:column;gap:3px;padding:10px 0}.lp-skill+.lp-skill{box-shadow:inset 0 1px 0 var(--border)}.lp-skill .lp-faint{display:flex;align-items:center;gap:6px}
.lp-groups{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:12px;box-shadow:inset 0 1px 0 var(--border)}.lp-groups div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;font-size:13px}.lp-groups span{color:var(--muted-foreground)}
.lp-hl{display:flex;flex-direction:column;gap:12px}.lp-hl div{display:flex;flex-direction:column;gap:2px}.lp-hl b{font-size:20px}.lp-hl span{font-size:12.5px;color:var(--muted-foreground)}
.lp-side-links{display:flex;flex-direction:column;gap:2px}.lp-side-links a{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:8px;font-size:13.5px}.lp-side-links a:hover{background:var(--overlay-1)}
@media (max-width:900px){.lp{grid-template-columns:minmax(0,1fr)}.lp-feat{grid-template-columns:repeat(2,minmax(0,1fr))}.cvfacts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.lp-banner{padding:0 12px 0 112px;height:96px;gap:6px}.lp-banner .lp-bl:nth-child(-n+5){display:none}.lp-banner .lp-bl{width:22px;height:22px}.lp-av{width:96px;height:96px;margin-top:-48px;font-size:32px}.cvskill,.lp-groups div{grid-template-columns:minmax(0,1fr);gap:2px}}
.cvhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cvhead p{color:var(--muted-foreground);margin-top:4px}
.role{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:16px 0}
.role+.role{box-shadow:inset 0 1px 0 var(--border)}
.role .when{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;padding-top:2px}
.role h3{font-size:14px}
.role .org{color:var(--muted-foreground);margin:2px 0 8px}
.role p{color:var(--muted-foreground);line-height:1.6}
.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;border-radius:12px;overflow:clip}
.skills div{padding:10px 14px;background:var(--card);color:var(--muted-foreground)}
.skills b{color:var(--foreground);font-weight:600}

/* Ask Anson: the ShappyChat drawer style */
.chat{display:flex;flex-direction:column;height:100%;min-height:0}
.chat .phead .ttl{display:flex;align-items:center;gap:8px;padding:0 6px;font-weight:600}
.chat .phead .ttl img{width:18px;height:18px}
.cstat{font-size:11.5px;font-weight:400}
.cbody{flex:1;min-height:0;overflow:auto;padding:8px 14px 12px;display:flex;flex-direction:column;gap:14px}
.welcome{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:12px;background:var(--card)}
.welcome img{width:34px;height:34px}
.welcome p{color:var(--muted-foreground);line-height:1.55}.welcome p.scripted{color:var(--info);font-size:12.5px}.welcome p.scripted.live{color:var(--success)}
.msg.bot .txt .scripted-tag{margin-top:6px;font-size:11.5px;color:var(--info)}
.sugs{display:flex;flex-wrap:wrap;gap:6px}
.sug{height:30px;padding:0 11px;border:0;border-radius:15px;background:rgba(185,155,255,.12);color:var(--violet);font-size:12.5px;transition:background 160ms}
.sug:hover,.sug:focus-visible{background:rgba(185,155,255,.22)}
.msg{display:flex;gap:8px;max-width:100%}
.msg.user{justify-content:flex-end}
.msg.user .bub{max-width:85%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--overlay-3);line-height:1.5;white-space:pre-wrap}
.msg.bot img.ga{width:20px;height:20px;flex:none;margin-top:1px}
.msg.bot .txt{min-width:0;line-height:1.6}
.msg.bot .txt p+p,.msg.bot .txt p+ul,.msg.bot .txt ul+p{margin-top:8px}
.msg.bot .txt ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:4px}
.msg.bot .txt a{color:var(--violet)}
.msg.bot .txt a:hover{text-decoration:underline}
.msg.bot .think{display:inline-flex;align-items:center;gap:6px;color:var(--violet);font-size:12px;min-height:20px}
.cfoot{flex:none;padding:8px 12px 10px}
.cbox{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 12px;border-radius:14px;background:var(--input);transition:background 160ms}
.cbox:focus-within{background:var(--overlay-3)}
/* One line is exactly as tall as the send button (30 px), so text and button share one centre line. More lines grow upward. */
.cbox textarea{flex:1;min-width:0;min-height:30px;max-height:120px;border:0;background:transparent;resize:none;line-height:20px;padding:5px 0}
.cbox textarea::placeholder{color:var(--faint)}
.send{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:9px;background:var(--violet);color:#160f24;flex:none;transition:opacity 160ms}
.send[aria-disabled=true]{opacity:.5;cursor:default}
.powered{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:11.5px;color:var(--faint)}
.powered a{color:var(--violet)}

/* Mobile: a bottom navigation bar replaces the rail, and the chat opens as a sheet. */
.mnav{display:none}
@media (max-width:760px){
  body{grid-template-rows:43px minmax(0,1fr) 58px}
  .footer{grid-column:1/-1;padding:0 8px}
  .footer .brand,.footer .sample{display:none}
  #railToggle{display:none}
  body.chat-open .mnav a.active{background:transparent;color:var(--muted-foreground)}
  .mnav{display:flex;align-items:center;justify-content:space-around;width:100%}
  .mnav a,.mnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:56px;height:48px;border:0;border-radius:10px;background:transparent;color:var(--muted-foreground);font-size:11px}
  .mnav a.active,.mnav button[aria-pressed=true]{color:var(--foreground);background:var(--outer-selected)}
  .panel-clip{position:fixed;inset:43px 0 58px;z-index:40;pointer-events:none}
  .stage.has-panel .panel-clip{pointer-events:auto}
  .panel{inset:0;width:auto;left:8px;right:8px}
  .stage:not(.has-panel) .panel{transform:translateY(calc(100% + 16px))}
  .now{grid-template-columns:minmax(0,1fr)}
  .lit{grid-template-columns:minmax(0,1fr)}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proofs{grid-template-columns:minmax(0,1fr)}
  .role{grid-template-columns:minmax(0,1fr);gap:4px}
  .skills{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:23px}
  .wrow{grid-template-columns:minmax(0,1fr) 80px}
  .acct{bottom:66px;left:auto;right:8px}
  .shots{grid-template-columns:minmax(0,1fr)}
  .feat{grid-template-columns:minmax(0,1fr)}
  .layer{grid-template-columns:minmax(0,1fr);gap:8px}
  .skills-grid{grid-template-columns:minmax(0,1fr)}
  .skfiles{grid-template-columns:minmax(0,1fr)}
  .skfiles nav{position:static}
  .osmain{grid-template-columns:minmax(0,1fr);gap:14px}
  .osvis{padding:4px}
  .ostext{padding:0 4px 4px}
  .osrow{grid-template-columns:118px minmax(0,1fr) 28px;height:48px}
  .osrow>.icon{display:none}
  .oslogos .osmini:nth-child(n+5),.oslogos>.faint{display:none}
  .feat .im{min-height:190px}
  .reader{padding:24px 16px 96px}
  .post h1{font-size:24px}
  .pn{grid-template-columns:minmax(0,1fr)}
  .pn a:last-child{text-align:left}
  .wtool .search{flex:1 1 100%}
}
@media (min-width:761px) and (max-width:1180px){.now{grid-template-columns:repeat(2,minmax(0,1fr))}}