/* Company twin demos (/twin/<slug>/). Same look as /compute/twin/.
   Light theme, no orange (Leif 2026-10-01 18:09). --amber is kept as the name of the ce-net job colour, now cobalt. */
:root{--night:oklch(98.5% .004 250);--night-2:#fff;--line:oklch(86% .01 250);--ink:oklch(22% .03 250);--muted:oklch(46% .022 250);
--amber:oklch(50% .19 262);--own:oklch(76% .025 250);--idle:oklch(94% .006 250);--ok:oklch(58% .13 165);--down:oklch(55% .2 25)}
*{box-sizing:border-box}html,body{margin:0;background:var(--night);color:var(--ink);font:16px/1.55 "IBM Plex Sans",system-ui,sans-serif}
a{color:var(--amber)}.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:18px 0}
.brand{font:600 1.1rem "Space Grotesk",sans-serif;color:var(--ink);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand span{color:var(--muted)}
header a:last-child{white-space:nowrap;font-size:.92rem}
header a[href="/mcp"]{margin-left:auto;white-space:nowrap;font-size:.92rem}
h1{font:600 clamp(1.9rem,5vw,3.2rem)/1.07 "Space Grotesk",sans-serif;margin:24px 0 12px;letter-spacing:-.02em}
h2{font:600 1.25rem "Space Grotesk",sans-serif;margin:0 0 10px}
.lede{color:var(--muted);max-width:680px;margin:0 0 20px}
.truth{color:var(--muted);font-size:.85rem;max-width:760px;margin:-14px 0 14px}
.herocta{margin:0 0 18px}
.reel{margin:0 0 8px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#eef0f3}.reel video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.reel figcaption{background:var(--night-2);color:var(--muted);font-size:.85rem;padding:8px 14px}
.facts{font-size:.9rem;color:var(--muted);max-width:760px;margin:0}.facts li{margin:4px 0}
.grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);margin:26px 0 30px}
.grid>.panel:last-child{order:-1}
@media(min-width:900px){#controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 24px}#controls .stats{grid-column:1/-1}}
.panel{background:var(--night-2);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}
.panel label{display:grid;gap:4px;font-size:.88rem;color:var(--muted);margin-bottom:14px}
.panel label b{color:var(--ink);font:500 1rem "JetBrains Mono",monospace}
.panel label em{font-style:normal;font-size:.74rem;color:var(--amber)}
input[type=range]{width:100%;accent-color:var(--amber)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px}
.stat{background:var(--night);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.stat span{display:block;font-size:.76rem;color:var(--muted)}.stat b{font:600 1.2rem "Space Grotesk",sans-serif;overflow-wrap:anywhere}
.stat.money b{color:var(--amber)}.stat.good b{color:var(--ok)}
canvas{width:100%;height:auto;display:block;border-radius:8px;background:var(--night)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.82rem;color:var(--muted);margin:10px 0 0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.clock{font:500 .9rem "JetBrains Mono",monospace;color:var(--muted);margin-bottom:8px}
.log{font:400 .8rem/1.5 "JetBrains Mono",monospace;color:var(--muted);margin:12px 0 0;padding:10px 12px;background:var(--night);border:1px solid var(--line);border-radius:8px;min-height:6.2em;overflow:hidden}
.log div{margin-bottom:4px}.log b{color:var(--ok);font-weight:500}.log s{color:var(--down);text-decoration:none}
table.src{border-collapse:collapse;font-size:.85rem;width:100%;max-width:760px;margin:0 0 30px}
table.src td,table.src th{border-bottom:1px solid var(--line);padding:6px 8px 6px 0;text-align:left;vertical-align:top}
table.src th{color:var(--muted);font-weight:500}.src .pub{color:var(--ok)}.src .ass{color:var(--amber)}
.lead{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:0 0 40px;max-width:640px}
@media (min-width:720px){.lead{grid-template-columns:1fr 1fr}}
.lead h2{grid-column:1/-1;margin:0}
.lead label{display:grid;gap:6px;font-size:.92rem}
.lead .wide{grid-column:1/-1}
.lead input,.lead textarea{width:100%;min-width:0;font:inherit;padding:10px 12px;border:1px solid rgba(127,127,127,.45);border-radius:8px;background:transparent;color:inherit}
.lead .hp{position:absolute;left:-9999px}
.lead button{border:0;cursor:pointer;font:inherit;font-weight:600;justify-self:start}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 60px}
.button{background:var(--amber);color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:600}
.small{font-size:.82rem;color:var(--muted)}