/* Three material studies. Layout and task interactions are shared. */
:root{--ink:#dce4f0;--muted:#a8b6cc;--line:#7792bb30;--accent:#91c5ff;--surface:#182237;--title:#f2f5fa;--secondary:#a8b6cc;--tertiary:#95a6bf}
body{transition:background-color .2s}body:before{display:none}body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.15' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.style-picker{margin:20px 0 0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border:1px solid #7186ab42;border-radius:10px;background:#121c31e0;box-shadow:inset 0 1px #ffffff0b,0 7px 24px #0002}.picker-intro{display:grid;grid-template-columns:auto 1fr;gap:2px 12px}.picker-kicker{grid-column:1/-1;color:#9aacc7;font-size:9px;letter-spacing:2px}.picker-intro strong{color:#eef3ff;font-size:13px;font-weight:600}.picker-intro>span:last-child{color:#b1bed3;font-size:11px;align-self:center}.style-options{display:flex;gap:5px;flex-shrink:0}.style-options button{background:transparent;border:1px solid transparent;color:#adbbd2;padding:8px 11px;border-radius:6px;font-size:11px}.style-options button[aria-pressed=true]{background:#334764;color:#f0f6ff;border-color:#96b5df6b;box-shadow:inset 0 1px #fff1,0 2px 6px #0003}.style-options i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:#99b8db}.style-options button[data-style=b] i{background:#c3abff}.style-options button[data-style=c] i{background:#5cdeef}
.hero{margin-top:23px}h1{color:var(--title);font-weight:600;font-size:28px;text-shadow:none}h2{font-size:15px;color:var(--title);font-weight:600}h3,.task-title,.agent-name{color:var(--ink)}p,.small,.task-meta,.agent-desc,.agent-state,.metric label,.metric em,.crumb,.hero p,.header-right,.eyebrow,.timeline time,.footer,.detail-row b,.composer textarea::placeholder{color:var(--secondary)}.agent-desc,.agent-state{font-size:11px}.agent-name{font-size:13px}.task-meta{font-size:12px}.metric em{font-size:11px}.panel .small{color:var(--secondary)!important}.composer textarea{font-size:14px;min-height:66px}.composer textarea::placeholder{color:var(--secondary)}.composer-bottom>.small{color:var(--secondary)!important}.task-title{font-size:14px}.metric strong{color:var(--title);font-weight:500;text-shadow:none}.metric strong span{color:var(--secondary)!important}.tag,.badge{color:#b8c8df}.badge.green{background:#2451444d;color:#9de5c8;border-color:#72c69e40}.badge.amber{background:#68512c40;color:#efd099;border-color:#d3af6b40}.waiting-box h3{color:#efd099}.waiting-box p{color:#c1c9d9}.timeline div{color:#ccd7e9}.link{color:var(--accent)}.aside-foot span:last-child{color:var(--secondary)!important}.notice{color:#b8c7dd;font-size:11px}.panel{isolation:isolate}.panel:before{left:12px;right:12px}.panel:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px #ffffff0b,inset 0 -1px #0005;z-index:-1}.primary{font-size:12px;font-weight:600}.filters button{color:#b3c2d8}.chips button{color:#c1d0e5}.agent-icon{font-size:15px}.panel,.metric{border-radius:11px}.task{padding:17px 0}.agent{padding:15px 0}
/* A / graphite: opaque layered metal, restrained accent. */
html[data-style=a] body{background:radial-gradient(ellipse at 85% 0,#23334a50,transparent 50%),#0b101a}
html[data-style=a] aside{background:linear-gradient(140deg,#172132,#0d1421);border-color:#98a8bd26;box-shadow:8px 0 30px #0002}
html[data-style=a] .panel{background:linear-gradient(135deg,#1d293c,#151e2e 70%);border-color:#91a6c136;backdrop-filter:none;box-shadow:0 13px 24px #0004,0 2px 3px #0003,inset 0 1px #fff1}
html[data-style=a] .panel:before{background:linear-gradient(90deg,#dcecff21,#dcecff08,transparent)}
html[data-style=a] .composer{border-color:#9bb8dd5e;background:linear-gradient(130deg,#223148,#182235 70%)}
html[data-style=a] .metric{background:linear-gradient(145deg,#1b2639,#141d2b);border-color:#8b9ab82e;box-shadow:0 6px 14px #0003,inset 0 1px #fff1}
html[data-style=a] .primary{background:linear-gradient(#94bce5,#6f98c7);color:#0b1a2e;border-color:#c0dcf8;box-shadow:inset 0 1px #fff6,0 4px 0 #365274,0 8px 15px #0004}
html[data-style=a] .primary:hover{background:linear-gradient(#b0d2f4,#87afda)}
html[data-style=a] .nav button{color:#b3c2d5}html[data-style=a] .nav button.active{background:linear-gradient(100deg,#34455c99,#24324655);color:#f0f5ff;border-color:#a1b8d242;box-shadow:inset 2px 0 #b1d1f5}
html[data-style=a] .agent-icon,html[data-style=a] .task-icon{background:linear-gradient(145deg,#34465e,#243248);color:#bfd8f4;border-color:#92a8c348;box-shadow:inset 0 1px #fff1,0 3px 6px #0002}
html[data-style=a] .notice{background:#182336;border-color:#6f839c30;border-left-color:#9eb8d8}
html[data-style=a] .chips button{background:#29374b66;border-color:#8195b536}
/* B / aurora: substantial translucent glass, localized bloom. */
html[data-style=b]{--accent:#b7caff;--secondary:#b7bed9;--title:#f5f4ff}
html[data-style=b] body{background:radial-gradient(ellipse at 35% 10%,#47429d55,transparent 42%),radial-gradient(ellipse at 100% 40%,#20689855,transparent 50%),radial-gradient(ellipse at 65% 95%,#67377933,transparent 45%),#0c1025}
html[data-style=b] body:before{display:block;border:0;left:30%;top:24%;width:440px;height:440px;filter:blur(70px);background:linear-gradient(135deg,#386dde50,#9c5cce30);box-shadow:none;z-index:-1}
html[data-style=b] aside{background:linear-gradient(150deg,#253155c4,#15152cdb);border-color:#c0b6ff3d;backdrop-filter:blur(28px);box-shadow:10px 0 35px #0505193d}
html[data-style=b] .panel{background:linear-gradient(135deg,#677bbf29,#1d285ab3 65%,#1a2149b8);border-top-color:#d1d7ff66;border-left-color:#c7cfff42;border-right-color:#8d9cdb38;border-bottom-color:#6576a644;backdrop-filter:blur(28px) saturate(125%);box-shadow:0 20px 36px #03061e66,0 3px 5px #03061e55,inset 0 1px 1px #e2e8ff29}
html[data-style=b] .panel:before{left:20px;right:22%;background:linear-gradient(90deg,#dbe5ff77,#c39aef66,transparent)}
html[data-style=b] .composer{background:linear-gradient(125deg,#8a97d433,#33457c9c 60%,#283364a6);box-shadow:0 24px 45px #05081d77,0 0 42px #847de716,inset 0 1px #f0edff38;border-top-color:#c8c9ff88}
html[data-style=b] .metric{background:linear-gradient(135deg,#7995c52b,#30376788);border-top-color:#cadbff55;border-bottom-color:#101735aa;box-shadow:0 10px 22px #04051b55,inset 0 1px #fff2;backdrop-filter:blur(20px)}
html[data-style=b] .primary{background:linear-gradient(110deg,#878bd4,#668bda);border-color:#c1caff99;box-shadow:inset 0 1px #f6f0ff70,inset 0 -2px #263e8155,0 6px 18px #1a164c99,0 0 22px #b3a1ff26;color:#fff}
html[data-style=b] .primary:hover{background:linear-gradient(110deg,#a09fea,#7c9bea)}
html[data-style=b] .nav button{color:#c2c8e4}html[data-style=b] .nav button.active{background:linear-gradient(110deg,#8795dd40,#726eaf22);border-color:#cac7ff55;box-shadow:inset 2px 0 #c4c3ff,0 5px 16px #080b2933;color:#f4f2ff}
html[data-style=b] .agent-icon{background:linear-gradient(145deg,#919ae149,#3a4c8055);border-top-color:#c7d5ff80;color:#dfddff;box-shadow:inset 0 1px #fff2,0 4px 8px #0d123d55}
html[data-style=b] .style-picker{background:linear-gradient(120deg,#3b426c99,#22345388);border-top-color:#b6bbeb55;backdrop-filter:blur(20px)}
html[data-style=b] .notice{background:linear-gradient(90deg,#8e83c526,#354e7522);border-left-color:#c4b6f1}
html[data-style=b] .chips button{background:#a7b2ff10;border-color:#cad4ff33}
/* C / deep sea: dark machined shells, cyan keylines. */
html[data-style=c]{--accent:#79d6ee;--secondary:#a0baca;--title:#effaff}
html[data-style=c] body{background:radial-gradient(ellipse at 90% 2%,#064a6150,transparent 45%),radial-gradient(ellipse at 40% 85%,#13345935,transparent 55%),#040d16}
html[data-style=c] body:after{opacity:.12;background-image:linear-gradient(#7ed8ef12 1px,transparent 1px),linear-gradient(90deg,#7ed8ef12 1px,transparent 1px);background-size:48px 48px}
html[data-style=c] aside{background:linear-gradient(130deg,#0d202d,#06111d);border-right-color:#58b3c933;box-shadow:10px 0 40px #0004}
html[data-style=c] .panel{background:linear-gradient(130deg,#112b3be8,#0a1b2aef);border-radius:7px;border-color:#5ca5be40;border-top-color:#8bdbed66;box-shadow:0 15px 30px #0006,inset 0 1px #b0edff0d,inset 0 -2px #0004;backdrop-filter:blur(8px)}
html[data-style=c] .panel:before{height:2px;left:0;right:68%;top:-1px;background:linear-gradient(90deg,#86dff3,#659be575,transparent);box-shadow:0 0 12px #6cbdda33}
html[data-style=c] .composer{background:linear-gradient(115deg,#15364ae6,#0c2031f0);border-left-color:#88daef80;box-shadow:0 18px 38px #0006,0 0 30px #277fa20c}
html[data-style=c] .metric{background:linear-gradient(130deg,#102c3c,#0a1927);border-radius:6px;border-top-color:#7ac8de55;border-left-color:#6bb1c83b;box-shadow:0 8px 16px #0004}
html[data-style=c] .metric strong{color:#c4f1ff;text-shadow:0 0 18px #7edfff22;font-variant-numeric:tabular-nums}
html[data-style=c] .primary{background:linear-gradient(#72d1e4,#4da4bd);border-color:#adebfa;color:#052432;border-radius:5px;box-shadow:inset 0 1px #e8ffff88,0 3px 0 #1e566b,0 6px 20px #3dcbf024}
html[data-style=c] .primary:hover{background:linear-gradient(#94e6f5,#6bc0d5)}
html[data-style=c] .nav button{color:#a3c0d0}html[data-style=c] .nav button.active{background:linear-gradient(90deg,#33758d55,#19415930);border-color:#66bfd04d;box-shadow:inset 2px 0 #80dfed;color:#ddf9ff}
html[data-style=c] .agent-icon,html[data-style=c] .task-icon{background:linear-gradient(145deg,#254f61,#123244);border-color:#71bbcc55;color:#b5ecf6;border-radius:5px;box-shadow:inset 0 1px #d4f8ff24}
html[data-style=c] .tag{background:#0c2e3d;border-color:#60a7ba44;color:#afd6e4}html[data-style=c] .style-picker{background:#0c1d2c;border-color:#5b9db240}
html[data-style=c] .notice{background:#0c25343d;border-left-color:#70c9df;color:#a9c9d9}html[data-style=c] .chips button{background:#1c536240;border-color:#6cb5c438;color:#b8dce8}
@media(max-width:1050px){.style-picker{align-items:flex-start;flex-direction:column}.style-options{width:100%}.style-options button{flex:1}.picker-intro{grid-template-columns:1fr}.picker-kicker{grid-column:auto}}
@media(max-width:650px){.style-picker{padding:12px;margin-top:14px}.style-options{gap:2px}.style-options button{padding:8px 4px;font-size:10px}.picker-intro>span:last-child{font-size:11px}.agent-desc,.agent-state{font-size:10px}}
@media(prefers-reduced-motion:reduce){body{transition:none}}

/* B color-only revision: preserve all typography, geometry and timing above. */
html[data-style=b]{--accent:#8fdcff;--title:#edf7ff;--ink:#dcecf8;--secondary:#a9bfd4}
html[data-style=b] body{background:radial-gradient(ellipse at 35% 10%,#20498a55,transparent 42%),radial-gradient(ellipse at 100% 40%,#12708845,transparent 50%),radial-gradient(ellipse at 65% 95%,#343e7b33,transparent 45%),#080f22}
html[data-style=b] body:before{background:linear-gradient(135deg,#2475bf50,#575ea230)}
html[data-style=b] aside{background:linear-gradient(150deg,#15304ec4,#101b30db);border-color:#7bbde83d}
html[data-style=b] .panel{background:linear-gradient(135deg,#4a91b729,#193650b3 65%,#152c49b8);border-top-color:#abdfff66;border-left-color:#99d4f242;border-right-color:#6fa8ca38;border-bottom-color:#47718f44}
html[data-style=b] .panel:before{background:linear-gradient(90deg,#b5eaff77,#80a7ec66,transparent)}
html[data-style=b] .composer{background:linear-gradient(125deg,#5eabd033,#264f739c 60%,#1e3a5ca6);border-top-color:#9cddff88}
html[data-style=b] .metric{background:linear-gradient(135deg,#57a5bd2b,#21415f88);border-top-color:#a3e0ff55;border-bottom-color:#0b2237aa}
html[data-style=b] .primary{background:linear-gradient(110deg,#3374b6,#408cae);border-color:#9bdfff99;color:#f1fcff;text-shadow:0 1px 2px #11324b55}
html[data-style=b] .primary:hover{background:linear-gradient(110deg,#438acb,#50a0bf)}
html[data-style=b] .nav button{color:#acc4da}
html[data-style=b] .nav button.active{background:linear-gradient(110deg,#59a9d440,#457ba522);border-color:#96daff55;color:#e7f8ff}
html[data-style=b] .agent-icon{background:linear-gradient(145deg,#69b5d149,#28577955);border-top-color:#a4e4ff80;color:#c3efff}
html[data-style=b] .style-picker{background:linear-gradient(120deg,#243e6099,#173c5288);border-top-color:#8cc9eb55}
html[data-style=b] .style-options button[aria-pressed=true]{background-color:#284e68;color:#e1f6ff;border-color:#84cee56b}
html[data-style=b] .notice{background:linear-gradient(90deg,#548eb326,#254f6822);border-left-color:#80c5ec;color:#a5bed5}
html[data-style=b] .chips button{background:#70c5e510;border-color:#91d6f433;color:#b9daec}
html[data-style=b] h1,html[data-style=b] h2,html[data-style=b] .composer .panel-head h2{color:#edf7ff}
html[data-style=b] .task-title{color:#e2f3ff}
html[data-style=b] .task-meta{color:#a2bed6}
html[data-style=b] .metric strong{color:#cff3ff}
html[data-style=b] .metric label{color:#bad6e6}
html[data-style=b] .metric em{color:#99b7d0}
html[data-style=b] .metric strong span{color:#aacddd!important}
html[data-style=b] .hero p{color:#a5bfd6}
html[data-style=b] .eyebrow{color:#82accb}
html[data-style=b] .agent-name{color:#dcefff}
html[data-style=b] .agent-desc{color:#a5bfd5}
html[data-style=b] .agent-state{color:#a8dbed}
html[data-style=b] .badge{color:#b2d4e7;background-color:#1b3c5680;border-color:#6dbbd044}
html[data-style=b] .badge.green{color:#8fe9d3;background:#16494199;border-color:#65ceb842}
html[data-style=b] .badge.amber{color:#f2ce95;background:#4c3e2999;border-color:#c8a26555}
html[data-style=b] .waiting-box{background:linear-gradient(115deg,#504d3229,#243d4e22);border-left-color:#cfb374}
html[data-style=b] .waiting-box h3{color:#efd09c}
html[data-style=b] .waiting-box p{color:#bdd3e2}
html[data-style=b] .link{color:#94dcff}
html[data-style=b] .composer textarea{color:#e0f4ff!important}
html[data-style=b] .composer textarea::placeholder{color:#9ebbd0}
html[data-style=b] .composer-bottom>.small{color:#a9c6dc!important}
html[data-style=b] .filters button{color:#a4c2d9}
html[data-style=b] .filters button.selected{color:#d9f5ff;background:#2d6a8766}
html[data-style=b] .timeline div{color:#bedbe9}
html[data-style=b] .timeline time{color:#8cacc8}
html[data-style=b] .picker-intro strong{color:#d8edfc}
html[data-style=b] .picker-intro>span:last-child{color:#a8c1d8}
html[data-style=b] .detail-row{color:#cfe7f5}
html[data-style=b] .detail-row b{color:#99bcd5}
html[data-style=b] .plan-step{color:#d5f0ff;background-color:#1c466366;border-left-color:#8ad9f4}
html[data-style=b] dialog{background:linear-gradient(145deg,#173c54,#0d2239);border-color:#83cfff66}