:root{--bg:#08090a;--panel:#0f1011;--panel2:#16171a;--line:rgb(255 255 255/.09);--line2:rgb(255 255 255/.16);--text:#f2f3f5;--text2:#a9aeb7;--accent:#8b95ff;--accent-ink:#0b0c10;--ok:#4cc38a;--warn:#e5b450;--sans:Inter,"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono","Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color-scheme:dark}
:root[data-theme=light]{--bg:#fafafa;--panel:#fff;--panel2:#f2f3f5;--line:#e4e4e7;--line2:#d4d4d8;--text:#111214;--text2:#52565e;--accent:#3d48c9;--accent-ink:#fff;--ok:#16794a;--warn:#8a5a00;color-scheme:light}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans)}
a{color:var(--accent);text-underline-offset:2px}a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:9;background:var(--panel);padding:.5rem 1rem}
header.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.top nav{max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:.25rem 1rem;flex-wrap:wrap;padding:.6rem 1rem}
header.top nav a{color:var(--text2);text-decoration:none;font-size:14px}header.top nav a:hover,header.top nav a[aria-current]{color:var(--text)}
.brand{font-family:var(--mono);font-weight:700;color:var(--text)!important;margin-right:auto;font-size:15px!important}.brand span{color:var(--accent)}
.kbd,kbd{font-family:var(--mono);font-size:12px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:0 .35rem;color:var(--text2);background:var(--panel)}
.iconbtn{background:none;border:1px solid var(--line2);color:var(--text2);border-radius:6px;padding:.2rem .5rem;font:13px var(--mono);cursor:pointer}.iconbtn:hover{color:var(--text)}
main{max-width:1040px;margin:0 auto;padding:1.5rem 1rem 3rem}
h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.1;letter-spacing:-.03em;margin:.5rem 0 .75rem}
h2{font-size:1.35rem;letter-spacing:-.02em;margin:2.5rem 0 .75rem}h3{font-size:1.05rem;margin:1.5rem 0 .4rem}
p{color:var(--text2)}main>p:first-of-type{font-size:1.05rem}b,strong,h1,h2,h3{color:var(--text)}
.eyebrow{font:12px var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.12em}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;margin:1rem 0}
.warn{background:color-mix(in srgb,var(--warn) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-left:3px solid var(--warn);border-radius:8px;padding:.7rem .9rem;color:var(--text)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text2);background:var(--panel2);text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line)}
td{padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text2)}tr:last-child td{border-bottom:0}
td:first-child,td:first-child a{color:var(--text);font-weight:600}
td.price{font-family:var(--mono);color:var(--text);white-space:nowrap;font-weight:600}
td small,.verified{display:inline-block;font:11px var(--mono);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);border-radius:999px;padding:0 .45rem;margin-top:.25rem}
td small::before,.verified::before{content:"✓ "}
td.price small{color:var(--text2);border-color:var(--line2)}td.price small::before{content:""}
.meter{display:flex;gap:2px;margin-top:.4rem;flex-wrap:wrap}.meter i{width:9px;height:9px;border-radius:2px;background:var(--line)}.meter i.on{background:var(--accent)}
.meter-l{font:11px var(--mono);color:var(--text2);margin-top:.15rem}
/* palette */
.hero{display:grid;gap:1.25rem;margin-top:1rem}
.palette{background:var(--panel);border:1px solid var(--line2);border-radius:12px;overflow:hidden;box-shadow:5px 5px 0 var(--line2)}
.palette .bar{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.palette .bar span{font-family:var(--mono);color:var(--accent)}
.palette input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:16px var(--mono);outline:none}
.palette ul{list-style:none;margin:0;padding:.35rem;max-height:320px;overflow:auto}
.palette li{display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem;padding:.5rem .7rem;border-radius:7px;cursor:pointer}
.palette li[aria-selected=true]{background:var(--panel2);box-shadow:inset 2px 0 0 var(--accent)}
.palette li .n{color:var(--text);font-weight:600}.palette li .p{font-family:var(--mono);color:var(--text)}.palette li .u{grid-column:1/-1;font-size:13px;color:var(--text2)}
.palette .foot{display:flex;gap:1rem;flex-wrap:wrap;padding:.5rem 1rem;border-top:1px solid var(--line);font:12px var(--mono);color:var(--text2)}
#picker label{display:block;margin:.7rem 0 .2rem;font-size:14px;color:var(--text)}
select{display:block;width:100%;margin-top:.3rem;background:var(--panel2);color:var(--text);border:1px solid var(--line2);border-radius:7px;padding:.5rem .6rem;font:15px var(--sans)}
#go,.btn{display:inline-block;background:var(--accent)!important;color:var(--accent-ink)!important;border:0;border-radius:7px;padding:.6rem 1.1rem!important;font:600 15px var(--sans);cursor:pointer;text-decoration:none!important;margin-top:.75rem}
#out ol{padding-left:1.2rem;color:var(--text2)}#out li{margin:.4rem 0}
#newsletter{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.vsgrid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.vsgrid a{display:block;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);text-decoration:none;color:var(--text);font-weight:600}.vsgrid a:hover{border-color:var(--accent)}.vsgrid small{display:block;color:var(--text2);font-weight:400}
.crumbs{font:12px var(--mono);color:var(--text2)}.crumbs a{color:var(--text2)}
footer{max-width:1040px;margin:0 auto;padding:1rem 1rem 3rem;border-top:1px solid var(--line);color:var(--text2)}footer hr{display:none}footer small{color:var(--text2)}footer a{color:var(--text2)}
.sitelinks small{display:flex;flex-wrap:wrap;gap:.2rem .5rem;line-height:2}
@media (min-width:860px){.hero{grid-template-columns:1.25fr 1fr;align-items:start}}
@media (prefers-reduced-motion:no-preference){a,.palette li,.vsgrid a{transition:background-color .12s,border-color .12s,color .12s}}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem 1rem;border-top:1px solid var(--line)}.chip{background:var(--panel2);border:1px solid var(--line2);color:var(--text2);border-radius:999px;padding:.15rem .6rem;font:12px var(--mono);cursor:pointer}.chip:hover{color:var(--text);border-color:var(--accent)}
.card h2:first-child{margin-top:0}td small,.verified{white-space:nowrap}
/* ---- v2: texture, stage, motion, loadout, mobile cards ---- */
body{background-image:url(/assets/img/grain.webp);background-size:128px 128px;background-attachment:fixed}
:root[data-theme=light] body{background-blend-mode:multiply}
.stage{position:relative;height:clamp(220px,34vw,380px);margin:1rem -1rem 0;border-block:1px solid var(--line);overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%)}
.stage picture,.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateY(calc(var(--py,0px)*-.25))}
.stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity .6s}
.stage.live canvas{opacity:1}.stage.live picture{opacity:0;transition:opacity .6s}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgb(0 0 0/.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.5}
.stage .hud{position:absolute;left:1rem;bottom:.7rem;z-index:2;font:12px var(--mono);color:var(--text2);background:color-mix(in srgb,var(--bg) 70%,transparent);padding:.2rem .5rem;border:1px solid var(--line2);border-radius:5px}
.stage .hud b{color:var(--accent)}
@media (min-width:1072px){.stage{margin-inline:calc((1040px - 100vw)/2 + 0px)}}
/* HUD corners on panels */
.palette,#picker{position:relative}
.palette::before,#picker::before{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;background:linear-gradient(var(--accent),var(--accent)) top left/14px 2px,linear-gradient(var(--accent),var(--accent)) top left/2px 14px,linear-gradient(var(--accent),var(--accent)) bottom right/14px 2px,linear-gradient(var(--accent),var(--accent)) bottom right/2px 14px;background-repeat:no-repeat}
#picker h2::before{content:"▸ ";color:var(--accent)}
#picker h2::after{content:"LOADOUT";float:right;font:11px var(--mono);letter-spacing:.15em;color:var(--text2);border:1px solid var(--line2);padding:.1rem .4rem;border-radius:4px;margin-top:.35rem}
#out ol{list-style:none;padding:0;counter-reset:slot;display:grid;gap:.5rem}
#out li{counter-increment:slot;background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:8px;padding:.6rem .8rem;margin:0}
#out li::before{content:"SLOT 0" counter(slot);display:block;font:11px var(--mono);letter-spacing:.12em;color:var(--accent)}
/* motion */
@media (prefers-reduced-motion:no-preference){
 .js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease,cubic-bezier(.16,1,.3,1)),transform .6s cubic-bezier(.16,1,.3,1)}
 .js .rv.in{opacity:1;transform:none}
 .js .meter.rv{opacity:1;transform:none}
 .js .meter.rv i.on{transform:scale(.2);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s;transition-delay:calc(var(--i)*18ms)}
 .js .meter.rv.in i.on{transform:none;opacity:1}
 #out li{animation:slotin .45s cubic-bezier(.16,1,.3,1) both}#out li:nth-child(2){animation-delay:.08s}#out li:nth-child(3){animation-delay:.16s}
 @keyframes slotin{from{opacity:0;transform:translateX(-12px)}}
 .vsgrid a:hover{transform:translateY(-2px)}
}
/* mobile: tables reflow to cards */
@media (max-width:640px){
 .tablewrap{border:0;background:none;overflow:visible}
 .tablewrap table,.tablewrap tbody,.tablewrap tr,.tablewrap td{display:block;width:100%}
 .tablewrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .tablewrap tr{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin:0 0 .6rem;padding:.4rem .2rem}
 .tablewrap td{border:0;padding:.25rem .7rem .25rem 8.6rem;position:relative;min-height:1.6rem}
 .tablewrap td[data-label]::before{content:attr(data-label);position:absolute;left:.7rem;top:.45rem;width:7.4rem;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text2)}
 .tablewrap td[data-label=""]{padding-left:.7rem}
 .tablewrap td[data-label=""]::before{display:none}
 .stage{margin-inline:-1rem}
}
.stage:not(.live) .hud{display:none}
/* v3: type with a point of view; cards as a dense list instead of SaaS card kit */
h1,h2,.brand{font-family:var(--mono);letter-spacing:-.04em}h1{font-weight:800;font-size:clamp(1.8rem,4.6vw,2.9rem)}h2{font-weight:700;letter-spacing:-.02em}
.eyebrow{text-transform:none;letter-spacing:.02em}
.vsgrid{display:block;border-top:1px solid var(--line)}.vsgrid a{display:flex;justify-content:space-between;gap:1rem;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:.7rem .2rem}
.vsgrid a:hover{transform:none;background:var(--panel)}.vsgrid small{font:13px var(--mono);color:var(--text2)}
/* v5: icons, logos, source pills, cost bars */
.ic{width:14px;height:14px;vertical-align:-2px;flex:none}
.lg{display:inline-block;width:16px;height:16px;flex:none;vertical-align:-3px;margin-right:.4rem;background:currentColor;-webkit-mask:var(--lg) center/contain no-repeat;mask:var(--lg) center/contain no-repeat}
.lg-xl{width:.9em;height:.9em;vertical-align:-.08em;margin-right:.35em}
.lg-cursor{--lg:url(logos/cursor.svg?v=1)}.lg-claude-code{--lg:url(logos/claude-code.svg?v=1)}.lg-codex{--lg:url(logos/codex.svg?v=2)}.lg-copilot{--lg:url(logos/copilot.svg?v=1)}.lg-windsurf{--lg:url(logos/windsurf.svg?v=1)}
a.tl{display:inline-flex;align-items:center}
.thl{display:inline-flex;align-items:center}
a.src{display:inline-flex;align-items:center;gap:.3rem;min-height:28px;padding:.15rem .6rem;border:1px solid var(--line2);border-radius:999px;font:12px var(--mono);color:var(--text2);text-decoration:none;background:var(--panel2)}
a.src:hover,a.src:focus-visible{color:var(--text);border-color:var(--accent)}
a.src .ic{width:12px;height:12px;opacity:.8}
td small,.verified{display:inline-flex;align-items:center;gap:.25rem;margin-top:.35rem}
td small::before,.verified::before{content:"";width:10px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
td.price small::before{display:none}
.flag{color:var(--warn);display:inline-flex;vertical-align:-1px}
.warn .ic,.flag .ic{color:var(--warn)}
#theme{display:inline-flex;align-items:center;gap:.35rem}#theme .t-d{display:none}:root[data-theme=light] #theme .t-l{display:none}:root[data-theme=light] #theme .t-d{display:inline}
.palette .bar span .ic{width:16px;height:16px;vertical-align:-3px}
.stage .hud b.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:.3rem;vertical-align:1px}
h1.withlogo{display:flex;align-items:center;flex-wrap:wrap}
.vl{display:inline-flex;gap:.1rem;margin-right:.35rem;color:var(--text2);vertical-align:-1px}.vl .lg{margin-right:0;width:14px;height:14px}
.costbars{display:grid;gap:.55rem;margin:.6rem 0}
.cb{display:grid;grid-template-columns:minmax(120px,170px) 1fr 70px;align-items:center;gap:.7rem}
.cbn{display:inline-flex;align-items:center;font-weight:600}
.cbt{height:12px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.cbt i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--accent));border-radius:inherit;transform-origin:left}
.cb b{font:600 13px var(--mono);text-align:right}
.cbnote{color:var(--text2);font-size:.92rem}
.tm{margin-top:.8rem;opacity:.85}
@media (max-width:640px){.cb{grid-template-columns:1fr 64px}.cbt{grid-column:1/-1;grid-row:2}}
@media (prefers-reduced-motion:no-preference){
 .js .costbars.rv{opacity:1;transform:none}
 .js .costbars.rv .cbt i{transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
 .js .costbars.rv .cb:nth-child(2) .cbt i{transition-delay:.12s}.js .costbars.rv .cb:nth-child(3) .cbt i{transition-delay:.24s}
 .js .costbars.rv.in .cbt i{transform:none}
 a.src,.card,.cb{transition:border-color .15s,color .15s,background-color .15s,transform .15s}
 a.src:hover{transform:translateY(-1px)}
 .card:hover{border-color:var(--line2)}
 .vsgrid a:hover .vl{color:var(--accent)}
}