/* Object Bench concept: a test facility. Concrete greys, steel lines, and one safety yellow used for a passed check, hazard tape and bay
   labels; red only for a failed check. Scoped to this folder. */
:root{--bg:#0b0b0d;--panel:#131316;--panel-2:#18181c;--line:#2a2a31;--line-2:#3a3a44;--text:#ecebe6;--dim:#93929b;--pass:#f2b441;--fail:#e5534b;--mono:ui-monospace,"Cascadia Mono",Consolas,monospace;--sans:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --tape:repeating-linear-gradient(-45deg,var(--pass) 0 12px,#15130c 12px 24px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;color:var(--text);font:16px/1.5 var(--sans);
  background:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/100% 48px,linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) 0 0/48px 100%,var(--bg)}
.concept-bar{background:#2a2110;color:#f2d28a;font:12px/1.4 var(--mono);padding:7px 16px;text-align:center}
.hazard{height:8px;background:var(--tape)}
.top{display:flex;align-items:center;gap:22px;padding:14px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);background:rgba(11,11,13,.9)}
.brand{font:700 15px/1 var(--mono);letter-spacing:.18em;white-space:nowrap}
.brand span{margin-left:12px;padding:3px 7px;border:1px solid var(--pass);color:var(--pass);font-size:10px;letter-spacing:.2em}
/* Pages: the menu on the left picks one section; only that one is on screen (bench.js route). */
.shell{display:grid;grid-template-columns:216px minmax(0,1fr);align-items:start}
main>section:not(.on){display:none}
.bays{position:sticky;top:0;display:flex;flex-direction:column;gap:2px;height:100vh;padding:22px 12px;border-right:1px solid var(--line);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.bays-group{margin:14px 12px 4px;color:var(--dim);font:10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.bays-group:first-child{margin-top:0}
.bays a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:4px;color:var(--dim);font:12px/1 var(--mono);letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.bays a span{color:var(--pass);opacity:.75}
.bays a:hover{color:var(--text);background:var(--panel-2)}
.bays a[aria-current=page]{color:var(--text);background:var(--panel-2);box-shadow:inset 2px 0 0 var(--pass)}
.bays a[aria-current=page] span{opacity:1}
.studio-id{margin-left:auto;color:var(--dim);font:12px/1 var(--mono);white-space:nowrap}
main{padding:0 clamp(16px,4vw,48px) 64px}
.btn:focus-visible,.tool:focus-visible,.card-pick:focus-visible,.flip:focus-visible,.film button:focus-visible,select:focus-visible,.bays a:focus-visible{outline:2px solid var(--pass);outline-offset:2px}

.eyebrow{margin:0 0 14px;color:var(--dim);font:12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bay{padding:4px 8px;background:var(--pass);color:#17130a;font-weight:700;letter-spacing:.16em}
h1{margin:0;font-size:clamp(32px,4.4vw,62px);line-height:1.02;letter-spacing:-.02em;font-weight:700}
h1 b{color:var(--pass);font-weight:700}
h2{margin:0;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em}
.sec-head p:last-child{margin:8px 0 0;color:var(--dim);max-width:74ch}

/* BAY 01: the bench */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(24px,5vh,52px) 0}
.prompt{margin:22px 0 0;padding:12px 14px 12px 16px;border:1px solid var(--line);border-left:4px solid var(--pass);background:var(--panel);color:#cfcdc6;font:14px/1.5 var(--mono)}
.prompt b{font-weight:400}
.prompt span{display:block;color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.said{margin-top:22px;min-height:112px}
.said-who{margin:0;color:var(--dim);font:12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.said-claim{margin:8px 0 0;font-size:clamp(20px,2.2vw,28px);line-height:1.2;transition:color .3s}
.said-claim.struck{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--fail);text-decoration-thickness:3px}
.said-result{margin:8px 0 0;color:var(--fail);font-weight:600;min-height:24px}
.hero-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--line-2);border-radius:4px;background:transparent;color:var(--text);font:600 14px/1 var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{border-color:#5a5a66}
.btn.primary{background:var(--pass);color:#17130a;border-color:var(--pass)}

.stage{min-width:0;width:min(100%,calc(74vh + 96px));justify-self:end}
.frame-wrap{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:8px;align-items:center}
.flip{height:64px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel);color:var(--text);font:400 26px/1 var(--sans);cursor:pointer}
.flip:hover{border-color:var(--pass);color:var(--pass)}
.frame{position:relative;aspect-ratio:1/1;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#0e0e12}
.frame iframe,.card-view iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* measuring marks along the bench frame */
.frame.ticks::before,.frame.ticks::after{content:"";position:absolute;z-index:2;pointer-events:none;opacity:.5}
.frame.ticks::before{left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(90deg,var(--pass) 0 1px,transparent 1px 5%)}
.frame.ticks::after{top:0;bottom:0;left:0;width:8px;background:repeating-linear-gradient(0deg,var(--pass) 0 1px,transparent 1px 5%)}
.plate{position:absolute;right:10px;top:14px;z-index:3;padding:5px 9px;background:rgba(11,11,13,.82);border:1px solid var(--line-2);font:11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);pointer-events:none}
.plate b{color:var(--pass);font-weight:700}
.shutter{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#0e0e12;color:var(--pass);font:700 12px/1 var(--mono);letter-spacing:.3em;opacity:0;pointer-events:none;transition:opacity .22s}
.frame.shut .shutter{opacity:1}
.film{display:flex;gap:6px;margin:10px 48px 0;overflow-x:auto;scrollbar-width:thin}
.film button{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:7px 9px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--dim);text-align:left;font:11px/1.35 var(--mono);cursor:pointer}
.film button b{display:block;color:var(--text);font:600 13px/1.2 var(--sans)}
.film button[aria-selected="true"]{border-color:var(--pass);background:#1d1a10}
.film button .st{color:var(--pass)}.film button .st.bad{color:var(--fail)}
.stage-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 48px 0;font:12px/1 var(--mono);color:var(--dim)}
.lock{border:1px solid var(--line-2);border-radius:999px;padding:5px 9px}
.lock.off{color:var(--pass);border-color:var(--pass)}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.tool{height:30px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel);color:var(--text);font:12px/1 var(--mono);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tool:hover{border-color:#5a5a66}
.tool[aria-pressed="true"]{border-color:var(--pass);color:var(--pass)}
.tool.slider input{width:90px;accent-color:var(--pass)}

/* BAY 02: inspection wall */
.wall-sec,.cmp-sec,.tests-sec{padding-top:34px;margin-top:8px;border-top:1px solid var(--line)}
.cmp-sec,.tests-sec,.how{margin-top:44px}
.wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.card{position:relative;border:1px solid var(--line-2);border-radius:6px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.card::before{content:"";display:block;height:5px;background:var(--tape);opacity:.55}
.card.sel{border-color:var(--pass)}
.card-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.card-name{font-weight:700;font-size:17px}
.card-sub{color:var(--dim);font:11px/1.3 var(--mono)}
.card-stat{margin-left:auto;text-align:right;padding:6px 10px;border:1px dashed var(--line-2);font:700 14px/1.2 var(--mono)}
.card-stat small{display:block;color:var(--dim);font-weight:400;font-size:11px}
.lights{display:flex;gap:14px;padding:8px 14px;border-bottom:1px solid var(--line);font:11px/1 var(--mono);color:var(--dim);letter-spacing:.08em}
.lights span{display:inline-flex;align-items:center;gap:6px}
.lights i{width:9px;height:9px;border-radius:50%;border:1px solid #55555f;display:inline-block}
.lights .on{color:var(--text)}
.lights .on i{background:var(--pass);border-color:var(--pass);box-shadow:0 0 0 3px rgba(242,180,65,.16)}
.card-body{min-height:0}
.said-open{margin:0;padding:8px 14px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--dim);font:12px/1.3 var(--mono);text-align:left;cursor:pointer}
.said-open:hover,.said-open[aria-pressed=true]{color:var(--text)}
.said-open:disabled{cursor:default}
/* What a build said: one panel along the bottom, opened for one build. The cards stay a grid of objects. */
dialog.said-drawer{padding:0;border:0;background:#101014;color:var(--text)}
dialog.said-drawer[open]{position:fixed;inset:auto 0 0 216px;width:auto;height:min(42vh,420px);max-width:none;max-height:none;margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line-2);box-shadow:0 -12px 40px rgba(0,0,0,.45)}
main.said-on{padding-bottom:min(42vh,420px)}
.said-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 8px}
.said-head .eyebrow{margin:0}
.said-count{margin:4px 0 0;color:var(--dim);font:12px/1.3 var(--mono)}
.said-list{list-style:none;margin:0;padding:0 16px 16px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;align-content:start}
.said-row{width:100%;text-align:left;display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;padding:8px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--text);font:13px/1.35 var(--sans);cursor:pointer}
.said-row:hover{border-color:#5a5a66}
.said-row .mk{width:22px;height:22px;border-radius:50%;border:1px solid #55555f;display:grid;place-items:center;font:700 12px/1 var(--mono);color:var(--dim)}
.said-row.pass .mk{background:var(--pass);border-color:var(--pass);color:#17130a}
.said-row.fail{border-color:var(--fail)}
.said-row.fail .mk{background:var(--fail);border-color:var(--fail);color:#fff}
.said-row .tx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.said-row.on .tx{-webkit-line-clamp:unset;display:block}
.said-row .why{grid-column:2;color:var(--dim);font:12px/1.35 var(--mono)}
.said-fold{grid-column:1/-1}
.said-fold summary{padding:8px;border:1px solid var(--line);border-radius:4px;color:var(--dim);font:12px/1.3 var(--mono);cursor:pointer}
.said-fold summary:hover{color:var(--text)}
.said-fold .said-list{padding:8px 0 0}
.card-view{position:relative;aspect-ratio:1/1;background:#0e0e12}
.card-pick{position:absolute;left:8px;bottom:8px;z-index:2;height:26px;padding:0 9px;border:1px solid var(--line-2);border-radius:4px;background:rgba(11,11,13,.78);color:var(--text);font:11px/1 var(--mono);cursor:pointer}
.failed{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px;background:#0e0e12;color:var(--dim);font:13px/1.45 var(--mono)}
.failed b{align-self:flex-start;padding:4px 8px;border:2px solid var(--fail);color:var(--fail);font-size:12px;letter-spacing:.16em;transform:rotate(-3deg)}
.failed code{color:var(--text);white-space:pre-wrap;word-break:break-word}
/* BAY 03: compare bench */
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px;max-width:1100px}
.cmp-side{min-width:0;display:flex;flex-direction:column;gap:8px}
.pick{display:flex;align-items:center;gap:10px;color:var(--dim);font:12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
select{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel);color:var(--text);font:14px/1 var(--sans)}
.cmp-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.facts{width:100%;max-width:1100px;margin-top:14px;border-collapse:collapse;font:14px/1.4 var(--sans)}
.facts th,.facts td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.facts th{width:26%;color:var(--dim);font:12px/1.4 var(--mono);font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.facts td{width:37%}
.facts tr.diff th{box-shadow:inset 3px 0 0 var(--pass);color:var(--text)}
.facts .yes{color:var(--pass)}.facts .no{color:var(--fail)}
.pick{align-items:flex-start}.pick>span{min-width:38px;padding-top:9px}
.pick .film{flex:1;min-width:0;margin:0;flex-wrap:wrap;overflow:visible;letter-spacing:0;text-transform:none}
.pick .film button{flex:1 1 38%;letter-spacing:0;text-transform:none}
.pick .film button[aria-pressed="true"]{border-color:var(--pass);background:#1d1a10}
.pick .film button:disabled{opacity:.35;cursor:not-allowed}
.pick .film button:focus-visible{outline:2px solid var(--pass);outline-offset:2px}
.cmp-test{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:10px 0}
.cmp-test-name{color:var(--text);font:600 20px/1.2 var(--sans)}
.cmp-test label{display:flex;align-items:center;gap:8px;color:var(--dim);font:12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.cmp-test select{flex:none;max-width:260px}
.facts tr.diff td{font-size:16px;font-weight:600;color:var(--text);background:rgba(255,255,255,.04)}
.facts tr.diff th{color:var(--text);font-size:13px}
.facts tr.diff th .tag{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:3px;background:var(--pass);color:#0b0b0d;font:600 10px/1.3 var(--mono);letter-spacing:.08em}
.facts tr.same{opacity:.6}.facts tr.same td{font-size:13px;color:var(--dim)}
.facts caption{caption-side:bottom;padding-top:8px;color:var(--dim);font:12px/1.4 var(--mono);text-align:left}

@media (min-width:1500px){.cmp-sec{display:grid;grid-template-columns:minmax(0,1100px) minmax(320px,1fr);column-gap:32px;align-items:start}.cmp-sec .sec-head{grid-column:1/-1}.cmp-sec .cmp,.cmp-sec .cmp-tools{grid-column:1}.cmp-sec .facts{grid-column:2;grid-row:2/4;margin-top:22px}}

/* BAY 04: work orders */
.orders{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:22px}
.order{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.order.live{border-color:var(--pass)}
a.order{color:inherit;text-decoration:none}
a.order:hover{border-color:var(--pass)}
.order.ready{border-color:var(--line-2)}
.order.ready .state{color:var(--text);border-color:var(--text)}
.order-top{display:flex;align-items:center;gap:8px;font:11px/1 var(--mono);color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.order-top .no{color:var(--text)}
.order-top .state{margin-left:auto;padding:3px 6px;border:1px solid var(--line-2)}
.order.live .state{border-color:var(--pass);color:var(--pass)}
.order h3{margin:0;font-size:17px}
.order .task{margin:0;color:#cfcdc6;font:13px/1.45 var(--mono)}
.order dl{margin:2px 0 0;display:grid;grid-template-columns:54px minmax(0,1fr);gap:3px 8px;font-size:13px;color:var(--dim)}
.order dt{font:11px/1.6 var(--mono);letter-spacing:.08em;color:var(--pass)}
.order dd{margin:0}
.group-title{grid-column:1/-1;margin:10px 0 -2px;color:var(--dim);font:12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}

.order .src{margin-top:auto;color:var(--dim);font:11px/1.4 var(--mono);letter-spacing:.06em}
.order .src:hover{color:var(--pass)}
.next-empty{grid-column:1/-1;margin:0;color:var(--dim);font:13px/1.45 var(--mono)}

.how{padding-top:28px;border-top:1px solid var(--line);max-width:80ch}
.how ul{margin:14px 0 0;padding-left:18px;color:#cfcdc6}
.how li{margin:8px 0}
.probe{position:fixed;left:-400px;top:0;width:200px;height:200px;visibility:hidden;pointer-events:none}

/* Gallery: one square per test. The write-up (group, name, description, score) stays off the card (user 2026-10-04). */
.shots{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.shot{display:block;padding:0;border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none}
.shot:hover,.shot:focus-visible{border-color:var(--pass);outline:0}
.shot-view{position:relative;aspect-ratio:1/1;background:#0e0e12;overflow:hidden}
.shot-view iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;pointer-events:none}   /* over the still picture: left in the flow it sat behind it, so Play showed nothing */
/* Still pictures (taken in the same studio by the results tool): a card is a picture until Play is pressed; the live view covers it. */
img.still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card-play{left:auto;right:8px}
.card-inspect{position:absolute;left:8px;bottom:8px;z-index:3;display:flex;flex-wrap:wrap;gap:4px;max-width:calc(100% - 84px)}
.card-inspect .card-pick{position:static}
.card-inspect .card-pick.short{color:var(--fail)}
.card-say{position:absolute;left:8px;right:8px;top:8px;z-index:3;padding:7px 10px;border:1px solid var(--line-2);border-radius:4px;background:rgba(11,11,13,.86);color:var(--text);font:12px/1.4 var(--sans)}
.shot-view .card-play{z-index:3}
.shot-tabs{margin:18px 0 0}
.shot-tabs+.shots{margin-top:14px}
.board-src .tool{margin-left:4px;vertical-align:baseline}
.charts.models{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.charts.models .bar-row{grid-template-columns:minmax(0,170px) minmax(0,1fr) minmax(0,92px)}
.lost{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;border:0;background:#0e0e12;color:var(--dim);font:13px/1.45 var(--mono);text-align:center;cursor:pointer}
.lost:hover{color:var(--text)}
.wall-sec>.prompt{margin-bottom:18px}
.best{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(16px,3vw,40px);align-items:center;margin:0 0 22px;padding:18px;border:1px solid var(--pass);background:var(--panel)}
.best .frame{aspect-ratio:16/11}
.best h3{margin:0 0 8px;font-size:clamp(24px,3vw,38px);line-height:1.1}
.best-text p:not(.eyebrow){margin:0 0 16px;color:var(--dim);max-width:52ch}
@media (max-width:900px){.best{grid-template-columns:minmax(0,1fr)}}
/* Leaderboard: one measured thing per tab; text keeps text colors, the first place carries the accent on its bar only. */
.board-box{margin-bottom:22px}
.charts-title{margin:0 0 12px;font-size:17px}
/* Question-first block on the gallery, the "how this is counted" line on a leaderboard tab, and the same-checks picture pair. */
.ask{margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.ask-what{margin:0;font-size:clamp(18px,2vw,22px);max-width:60ch}
.ask .hero-actions{margin:14px 0 12px}
.ask .chart-note{margin:0}
.howfold{margin:0 0 14px}
.howfold summary{color:var(--dim);font-size:13.5px;cursor:pointer}
.howfold summary:focus-visible{outline:2px solid var(--pass);outline-offset:2px}
.howfold .chart-note{margin:8px 0 0}
/* Line-up page: one column per picked model; the table scrolls sideways inside its box when many are picked, the page never does. */
.line-pick{margin:0 0 16px}
.line-pick .film button{flex:0 1 220px}
.line-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.line{border-collapse:collapse;font:12px/1.3 var(--mono)}
.line caption{padding:8px 0;color:var(--dim);text-align:left}
.line th,.line td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}
.line tr:first-child th{color:var(--text);font:600 13px/1.2 var(--sans);border-bottom-color:var(--line-2)}
.line th{position:sticky;left:0;background:var(--panel);color:var(--text);font-weight:400}
.line th a{color:var(--text)}
.line th small,.line td small{display:block;margin-top:3px;color:var(--dim);font-size:10px;letter-spacing:.06em}
.line td{min-width:150px;color:var(--dim)}
.line td.won{color:var(--text);box-shadow:inset 2px 0 0 var(--pass)}
.line td img{display:block;width:120px;height:120px;margin-bottom:6px;border:1px solid var(--line-2);border-radius:4px;background:#0e0e12}
.line td b{display:block;color:var(--text);font-weight:700}
.line td b.short{color:var(--fail)}
/* The Looks page (index.html#looks). */
.looks-tools{position:sticky;top:0;z-index:5;margin:0 0 14px;padding:10px 0;background:var(--bg,#0b0b0e);color:var(--dim);font-size:13px}
.looks{margin-bottom:16px}
.looks h3{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;font-size:20px}
.looks h3 small{color:var(--dim);font:12px/1 var(--mono)}
.looks-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.looks-row figure{margin:0}
#looksRows.orbit .shot-view iframe,#gallery.orbit .shot-view iframe{pointer-events:auto}
.looks-row .shot-view{border:1px solid var(--line-2);border-radius:6px}
.looks-row figcaption{margin-top:8px;font:600 16px/1.2 var(--sans)}
.looks-row .looks-pick{display:block;margin-top:8px}
.looks-picks{margin:0 0 14px;color:var(--dim);font-size:13px}
.looks-out[hidden]{display:none}
#looksRows.big .looks-row{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.looks-out{display:block;width:100%;max-width:760px;margin:0 0 14px;padding:10px;background:transparent;color:inherit;border:1px solid var(--line-2);border-radius:6px;font:12px/1.5 var(--mono)}
.more-stats{grid-column:1/-1;margin:0}
.more-stats>.charts{margin:14px 0 0}
.best-tag{display:block;margin-top:3px;font:10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.look-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:760px}
.look-pair figure{margin:0}
.look-pair img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:6px;background:#0e0e12}
.look-pair figcaption{margin-top:6px;color:var(--dim);font:12px/1.3 var(--mono);letter-spacing:.06em}
.board-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0 12px;border-bottom:1px solid var(--line)}
.board-tabs button{padding:8px 12px;border:0;border-bottom:2px solid transparent;background:none;color:var(--dim);font:13px/1.2 var(--sans);cursor:pointer}
.board-tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--text)}
.board-tabs button:disabled{cursor:default;opacity:.6}
.board-tabs small{margin-left:6px;font:10px/1 var(--mono);letter-spacing:.06em}
.board-rows{list-style:none;margin:0;padding:0}
.board-rows li{display:grid;grid-template-columns:34px minmax(0,220px) minmax(0,1fr) 84px 64px;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.board-place{font:700 18px/1 var(--mono);color:var(--dim)}
.board-rows li.first .board-place{color:var(--pass)}
.board-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-lane{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.board-lane i{display:block;height:100%;border-radius:2px;background:#8f8e97}
.board-rows li.first .board-lane i{background:var(--pass)}
.board-val{font:700 15px/1 var(--mono);text-align:right;white-space:nowrap}
.board-n{font:11px/1 var(--mono);color:var(--dim);text-align:right;white-space:nowrap}
@media (max-width:700px){.board-rows li{grid-template-columns:28px minmax(0,1fr) 78px}.board-lane,.board-n{display:none}}
/* Cost against checks: a plain scatter in the page's own colors; a hollow dot's cost is worked out, the edge line is the accent. */
.plot-tools{margin:0 0 12px}
.plot-scope{flex:none;max-width:260px;height:30px;font-size:12px}
.plot-wrap{max-width:900px}
.plot-svg{display:block;width:100%;height:auto;overflow:visible}
.plot-grid{stroke:var(--line);stroke-width:1}
.plot-tick{fill:var(--dim);font:11px var(--mono)}
.plot-axis{fill:var(--dim);font:12px var(--sans)}
.plot-pt circle{fill:var(--text);stroke:var(--bg);stroke-width:2}
.plot-pt.worked circle{fill:var(--panel);stroke:var(--text)}
.plot-pt.edge circle{stroke:var(--pass);stroke-width:2.5}
.plot-pt:focus{outline:none}
.plot-pt:focus circle,.plot-pt:hover circle{stroke:var(--pass);stroke-width:3}
.plot-label{fill:var(--text);font:12px var(--mono)}
.plot-join{fill:none;stroke:var(--line-2);stroke-width:1.5}
.plot-edge{fill:none;stroke:var(--pass);stroke-width:2;stroke-dasharray:6 4}
.plot-read{min-height:1.5em;margin:6px 0 4px;color:var(--text)}
.plot-table{margin:6px 0 10px}
.plot-table td{min-width:110px}
/* Stats: one chart per measured thing. Text keeps text colors; a mark's meaning is its icon and label, not its color alone. */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:16px;margin-bottom:16px}
.chart{padding:18px 20px;border:1px solid var(--line);background:var(--panel)}
.chart h3{margin:0 0 4px;font-size:17px}
.chart-note{margin:0 0 14px;color:var(--dim);font-size:13.5px;max-width:62ch}
.chart-key{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;color:var(--dim);font:12px/1 var(--mono)}
.chart-key .seg{min-width:22px;margin-left:10px;border-radius:4px}.chart-key .seg:first-child{margin-left:0}
.bar-row{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,96px);align-items:center;gap:12px;padding:5px 0}
.bar-name,.bar-val{font:12px/1.3 var(--mono);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-val{color:var(--dim);text-align:right}
.bar-lane{min-width:0;border-left:1px solid var(--line-2)}
.bar-track{display:flex;gap:2px;height:22px;min-width:0}
.seg{display:grid;place-items:center;min-width:0;padding:0 4px;border-radius:0 4px 4px 0;font:700 11px/22px var(--mono);white-space:nowrap;overflow:hidden}
.seg.yes{background:var(--pass);color:#17130a}.seg.no{background:var(--fail);color:#fff}.seg.open{background:#6b6b78;color:#fff}.seg.plain{background:#8f8e97}
.bar-track .seg:not(:last-child){border-radius:0}
.grid{border-collapse:separate;border-spacing:2px;font:12px/1.3 var(--mono)}
.grid th{padding:6px 10px 6px 0;color:var(--dim);font-weight:400;text-align:left;white-space:nowrap}
.grid tr:first-child th{text-align:center;padding:0 0 4px;letter-spacing:.1em}
.grid td{width:62px;height:28px;text-align:center;font-weight:700}
.grid td.yes{background:var(--pass);color:#17130a}.grid td.no{background:var(--fail);color:#fff}.grid td.open{background:#6b6b78;color:#fff}
.chart dl.none{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0;font:12px/1.4 var(--mono)}
.chart dl.none dd{margin:0;color:var(--dim)}
.recorded{margin:8px 0 0;padding-left:18px;color:var(--dim);font-size:14px;max-width:86ch}.recorded li{margin:6px 0}.recorded b{color:var(--text)}
@media (max-width:1100px){.shell{grid-template-columns:minmax(0,1fr)}.bays{position:static;flex-direction:row;flex-wrap:wrap;height:auto;padding:8px clamp(16px,4vw,48px);border-right:0;border-bottom:1px solid var(--line)}.bays a{padding:8px 10px}.bays a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--pass)}}
@media (max-width:1000px){.hero{grid-template-columns:1fr}.stage{justify-self:stretch;width:100%}.wall{grid-template-columns:1fr}}
@media (max-width:560px){.cmp{grid-template-columns:1fr}.frame-wrap{grid-template-columns:32px minmax(0,1fr) 32px}.film,.stage-bar{margin-left:0;margin-right:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.said-claim,.shutter{transition:none}}

/* Share view (?share=1): the compare bench alone as an exact 1920 x 1080 picture for a post or a 10 s loop. Nothing else is on screen. */
.share-head,.share-cap{display:none}
html.share,html.share body{overflow:hidden}
html.share .hazard,html.share header.top,html.share .bays,html.share .sec-head,html.share .cmp-tools,html.share .facts,html.share .pick,html.share .failed-note{display:none}
html.share .shell{display:block}
html.share main{padding:0}
html.share #compare{position:fixed;left:0;top:0;width:1920px;height:1080px;margin:0;padding:40px 64px 44px;box-sizing:border-box;display:flex;flex-direction:column;background:#0b0b0e}
html.share .share-head{display:flex;align-items:baseline;gap:28px;padding-bottom:18px;border-bottom:1px solid var(--line-2)}
html.share .share-brand{font:700 22px/1 var(--mono);letter-spacing:.28em;color:var(--pass)}
html.share .share-test{font:700 40px/1.1 var(--sans);color:var(--text)}
html.share .share-note{margin-left:auto;font:18px/1 var(--mono);letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
html.share .cmp{flex:1;min-height:0;max-width:none;margin:26px 0 0;gap:48px}
html.share .cmp-side{gap:20px;min-height:0}
html.share .frame{aspect-ratio:auto;flex:1;min-height:0}
html.share .share-cap{display:block}
html.share .share-name{font:700 38px/1.15 var(--sans);color:var(--text)}
html.share .share-verdict{margin-top:10px;font:700 26px/1.2 var(--mono);color:var(--fail,#e5484d)}
html.share .share-verdict.all{color:var(--pass)}
html.share .share-made{margin-top:10px;font:20px/1.35 var(--mono);color:var(--dim)}
html.share .share-head{width:100%;max-width:none;box-sizing:border-box;flex:none}
html.share .cmp{grid-template-rows:minmax(0,1fr)}
html.share .cmp-side{height:100%}
html.share .share-cap{flex:none;height:150px;overflow:hidden}
html.share .share-verdict{color:var(--dim)}
html.share .share-verdict.all{color:var(--pass)}
html.share .share-verdict.some{color:var(--fail)}
html.share .share-made{font-size:18px}

/* Share view, second design (user 2026-10-03, on the first: "this needs to be way better"): the two pictures with a head-to-head
   spine between them (one row per measured thing, a bar each way from the middle) and, under each picture, every stage stamped. */
.share-spine{display:none}
html.share .cmp{grid-template-columns:minmax(0,1fr) 440px minmax(0,1fr);gap:40px}
html.share .frame{border-color:var(--line-2);border-radius:4px}
html.share .share-spine{display:flex;flex-direction:column;justify-content:center;gap:34px;min-width:0}
html.share .spine-label{text-align:center;font:14px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
html.share .spine-vals{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:12px;font:700 30px/1 var(--mono);color:var(--text);white-space:nowrap}
html.share .spine-vals .win{color:var(--pass)}
html.share .spine-bars{display:grid;grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);align-items:center;margin-top:12px;height:20px}
html.share .spine-bars i{display:block;height:10px;background:#6b6b78}
html.share .spine-bars .l{justify-self:end;border-radius:5px 0 0 5px}
html.share .spine-bars .r{border-radius:0 5px 5px 0}
html.share .spine-bars b{display:block;height:20px;background:var(--text)}
html.share .spine-bars .win{background:var(--pass)}
html.share .spine-foot{margin-top:2px;text-align:center;font:13px/1.5 var(--mono);color:var(--dim)}
html.share .share-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 24px;height:auto;padding-top:6px;overflow:visible}
html.share .share-name{font:700 36px/1.1 var(--sans);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.share .share-stages{grid-column:1/-1;display:flex;flex-wrap:nowrap;gap:8px;margin:0}
html.share .share-stage{padding:8px 10px;white-space:nowrap;border:2px solid var(--line-2);font:700 15px/1 var(--mono);letter-spacing:.12em;color:var(--dim)}
html.share .share-stage.yes{border-color:var(--pass);color:var(--pass)}
html.share .share-stage.no{border-color:var(--fail);color:var(--fail)}
html.share .share-stage.yes,html.share .share-stage.no{animation:share-stamp 20s linear infinite both}
html.share .share-score{text-align:right;font:700 56px/1 var(--mono);letter-spacing:-.02em;color:var(--dim)}
html.share .share-score.all{color:var(--pass)}
html.share .share-score.some{color:var(--fail)}
/* The count in words is said by the big numeral and the spine's first row; it stays in the page for readers and the share tool. */
html.share .share-verdict{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* A stamp lands, holds for the rest of the loop, and clears just before it lands again: the restart is shown, not hidden. */
@keyframes share-stamp{0%{opacity:.18;transform:scale(1.5) rotate(-5deg)}1.6%{opacity:1;transform:scale(.96)}3%{transform:none}96%{opacity:1;transform:none}100%{opacity:.18;transform:none}}
@media (prefers-reduced-motion:reduce){html.share .share-stage{animation:none!important}}
/* The pictures are wider than tall, so a wide object seen from the front is never cut by the frame's sides. */
html.share .frame{flex:none;height:660px}
html.share .cmp-side{justify-content:center}
/* Fix pass (2026-10-03): each build's name sits above its picture, large (it used to fall off the bottom); ties go last and small;
   one measured verdict sentence tops the page. */
html.share .share-cap{order:-1;padding-top:0}
html.share .share-name{font-size:36px}   /* 46px cut "Claude Code · Sonnet 5.5" short beside the score */
html.share .share-head{flex-wrap:wrap;row-gap:14px}
html.share .share-sum{flex:0 0 100%;font:700 30px/1.2 var(--sans);color:var(--text)}
html.share .share-sum:empty{display:none}
html.share .spine-row.tie .spine-vals{font-size:20px;margin-top:6px;color:var(--dim)}
html.share .spine-row.tie .spine-bars{display:none}
html.share .spine-row.tie .spine-label{font-size:12px}

/* Share layouts for social posts (user 2026-10-05). "wide" is everything above, unchanged. The three 1080-wide layouts put the two
   pictures side by side on top and the measured rows under them in two columns; a row that is level on both sides is left out there
   (the big count above each picture already says it). Sizes: the platform table in the tnai-media-social skill. */
html.share-square #compare{width:1080px;height:1080px;padding:34px 44px 30px}
html.share-feed #compare{width:1080px;height:1350px;padding:44px 44px 40px}
/* tall: TikTok, Reels and Shorts lay their own buttons and caption over the right edge and the bottom, and their bars over the top. */
html.share-tall #compare{width:1080px;height:1920px;padding:250px 136px 400px 48px;justify-content:center}
html.share-square .share-note,html.share-feed .share-note,html.share-tall .share-note{display:none}
html.share-square .share-head,html.share-feed .share-head,html.share-tall .share-head{gap:18px;row-gap:10px;padding-bottom:14px}
html.share-square .share-brand,html.share-feed .share-brand,html.share-tall .share-brand{font-size:17px}
html.share-square .share-test,html.share-feed .share-test,html.share-tall .share-test{font-size:30px}
html.share-square .share-sum,html.share-feed .share-sum,html.share-tall .share-sum{font-size:25px}
html.share-square .cmp,html.share-feed .cmp,html.share-tall .cmp{flex:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"a b" "s s";gap:26px 28px;margin-top:20px}
html.share-square .cmp-side,html.share-feed .cmp-side,html.share-tall .cmp-side{height:auto;gap:14px;justify-content:flex-start}
html.share-square .cmp-side:first-child,html.share-feed .cmp-side:first-child,html.share-tall .cmp-side:first-child{grid-area:a}
html.share-square .cmp-side:last-child,html.share-feed .cmp-side:last-child,html.share-tall .cmp-side:last-child{grid-area:b}
html.share-square .share-spine,html.share-feed .share-spine,html.share-tall .share-spine{grid-area:s;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 44px;align-content:start}
html.share-square .spine-row.tie,html.share-feed .spine-row.tie,html.share-tall .spine-row.tie{display:none}
html.share-square .spine-foot,html.share-feed .spine-foot,html.share-tall .spine-foot{grid-column:1/-1;margin-top:0}
html.share-square .share-cap,html.share-feed .share-cap,html.share-tall .share-cap{gap:10px 12px}
html.share-square .share-name,html.share-feed .share-name,html.share-tall .share-name{font-size:27px}
html.share-square .share-score,html.share-feed .share-score,html.share-tall .share-score{font-size:42px}
html.share-square .share-stage,html.share-feed .share-stage,html.share-tall .share-stage{padding:7px 8px;font-size:13px;letter-spacing:.08em}
html.share-square .spine-label,html.share-feed .spine-label,html.share-tall .spine-label{font-size:13px;letter-spacing:.14em}
html.share-square .spine-vals,html.share-feed .spine-vals,html.share-tall .spine-vals{font-size:28px}
html.share-square .frame{height:590px}
html.share-feed .frame{height:860px}
html.share-tall .frame{height:880px}
html.share-tall .share-name{font-size:23px}
html.share-tall .share-stage{padding:6px 6px;font-size:12px;letter-spacing:.04em}
html.share-tall .spine-vals{font-size:25px}
html.share .share-spine{gap:26px}
/* The compare section's wide-screen rule sets align-items:start, which made the pair shrink to its captions' width here. */
html.share .cmp{width:100%;align-self:stretch;box-sizing:border-box}

/* "big" share layout (user 2026-10-05, beside a competitor's post: "make sure we use up all the space"): the two pictures fill the
   1920 x 1080 frame; cost and time sit in the strip above each picture and the middle column is left out. */
.share-quick{display:none}
html.share-big #compare{padding:26px 32px 28px}
html.share-big .share-head{padding-bottom:14px;row-gap:8px}
html.share-big .cmp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:16px}
html.share-big .share-spine{display:none}
html.share-big .cmp-side{gap:12px;justify-content:flex-start}
html.share-big .share-cap{grid-template-columns:auto minmax(0,1fr) auto;gap:10px 20px}
html.share-big .share-name{grid-column:1/3;font-size:40px}
html.share-big .share-stages{grid-column:1/2}
html.share-big .share-quick{grid-column:2/4;display:flex;justify-content:flex-end;align-items:baseline;gap:12px;font:700 30px/1 var(--mono);color:var(--text);white-space:nowrap}
html.share-big .share-quick-k{font:700 15px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
html.share-big .share-quick b{margin-right:16px;font-weight:700}
html.share-big .share-quick b:last-child{margin-right:0}
html.share-big .frame{flex:1;height:auto;min-height:0}
html.share-big .cmp-side{height:100%}
/* When each model came out, under its name in every share layout (user 2026-10-05). */
html.share .share-rel{grid-column:1/-1;margin-top:-6px;font:700 15px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
html.share .share-rel:empty{display:none}
html.share-square .share-rel,html.share-feed .share-rel,html.share-tall .share-rel{margin-top:-4px;font-size:13px}
html.share-square .frame{height:528px}
html.share-feed .frame{height:800px}
/* big layout: no large count beside the name (user 2026-10-05: "remove the 4/4 on both"); the four stamped stages under the name say it. */
html.share-big .share-score{display:none}
html.share-big .share-name{grid-column:1/-1}