/* Next Token revisions, 24 October 2026. Shared by /creative and /office.
   05 / The difference becomes an explorer: six tabs, a cloud-or-local switch and a small working demo per difference.
   Colours come from the page: --bwd-cloud marks what the cloud does, --bwd-local what the local machine does. */

.bwd{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:clamp(20px,3.4vw,56px);margin-top:48px;align-items:start}
.bwd .difference-list{margin:0;padding:0;list-style:none}

/* ---------- Tabs ---------- */
.bwd-tabs{display:flex;flex-direction:column;gap:4px;position:sticky;top:24px}
.bwd-tab{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;width:100%;text-align:left;padding:16px 18px;background:transparent;color:var(--c-muted);border:0;border-left:3px solid transparent;font:inherit;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.bwd-tab-n{font:600 15px/1.5 var(--font-display);font-variant-numeric:tabular-nums;color:var(--bwd-index,var(--c-muted))}
.bwd-tab-t{display:block;font:500 17px/1.3 var(--font-display);color:inherit}
.bwd-tab-t small{display:block;font:14px/1.4 var(--font-body);color:var(--c-muted);margin-bottom:3px}
.bwd-tab[aria-selected=true]{background:var(--bwd-panel,var(--c-panel));color:var(--c-bone);border-left-color:var(--bwd-cloud)}
.bwd[data-mode=local] .bwd-tab[aria-selected=true]{border-left-color:var(--bwd-local)}
@media (hover:hover) and (pointer:fine){.bwd-tab:not([aria-selected=true]):hover{color:var(--c-bone);background:color-mix(in srgb,var(--bwd-panel,var(--c-panel)) 55%,transparent)}}
.bwd-tab:focus-visible{outline:2px solid var(--c-bone);outline-offset:-2px}

/* ---------- Stage ---------- */
.bwd-stage{background:var(--bwd-panel,var(--c-panel));padding:clamp(20px,3vw,40px);min-width:0}
.bwd-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:clamp(20px,2.4vw,32px)}
.bwd-switch{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--bwd-well,var(--c-deep))}
.bwd-switch button{border:0;padding:11px 18px;background:transparent;color:var(--c-muted);font:500 16px/1.2 var(--font-body);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.bwd-switch button[aria-pressed=true][data-mode=cloud]{background:var(--bwd-cloud);color:var(--bwd-ink)}
.bwd-switch button[aria-pressed=true][data-mode=local]{background:var(--bwd-local);color:var(--bwd-ink)}
.bwd-switch button:focus-visible{outline:2px solid var(--c-bone);outline-offset:2px}
.bwd-hint{font-size:14px;color:var(--c-muted);margin:0}
.bwd-switch.is-hinting{animation:bwd-hint 1.4s ease 2}
@keyframes bwd-hint{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--bwd-local) 55%,transparent)}}

.bwd .difference-item{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2vw,26px);padding:0;border:0;animation:none}
.bwd .difference-item[hidden]{display:none}
.bwd .difference-item>.difference-index{display:none}
.bwd .difference-item h3{font-size:clamp(26px,2.5vw,38px)}
.bwd .difference-item>div:last-child{grid-column:auto}
.bwd .difference-item>div:last-child>p:first-child{font-size:clamp(17px,1.2vw,19px);color:var(--c-bone)}

/* ---------- Demo frame ---------- */
.bwd-demo{background:var(--bwd-well,var(--c-deep));padding:clamp(16px,2.2vw,28px);min-width:0}
.bwd-say{margin:16px 0 0;font:16px/1.5 var(--font-body);color:var(--c-bone);min-height:3em}
.bwd-say b{color:var(--bwd-cloud);font-weight:600}
.bwd[data-mode=local] .bwd-say b{color:var(--bwd-local)}
.bwd-opts{display:flex;flex-wrap:wrap;gap:6px}
.bwd-opts button{border:0;padding:9px 14px;background:var(--bwd-chip,var(--c-raised));color:var(--c-bone);font:500 15px/1.2 var(--font-body);cursor:pointer;font-variant-numeric:tabular-nums;transition:background-color .18s ease,color .18s ease,opacity .18s ease}
.bwd-opts button[aria-pressed=true]{background:var(--c-bone);color:var(--bwd-ink)}
.bwd-opts button:disabled{opacity:.38;cursor:not-allowed;text-decoration:line-through}
.bwd-opts button:focus-visible,.bwd-act:focus-visible{outline:2px solid var(--c-bone);outline-offset:2px}
.bwd-act{border:0;padding:12px 18px;background:var(--bwd-cloud);color:var(--bwd-ink);font:600 16px/1.2 var(--font-body);cursor:pointer;transition:background-color .18s ease,opacity .18s ease}
.bwd[data-mode=local] .bwd-act{background:var(--bwd-local)}
.bwd-act:disabled{opacity:.4;cursor:not-allowed}
.bwd .bwd-act.is-quiet{background:var(--bwd-chip,var(--c-raised));color:var(--c-bone)}
.bwd-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
.bwd-label{font:14px/1.4 var(--font-body);color:var(--c-muted);margin:0 0 8px}

/* ---------- Flow: where the file goes ---------- */
.bwd-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(48px,.55fr) minmax(0,1.05fr);align-items:stretch;min-height:300px}
.bwd-home{align-self:center;display:grid;gap:10px;padding:16px;background:var(--bwd-panel,var(--c-panel));outline:2px solid transparent;outline-offset:6px;transition:outline-color .35s ease}
.bwd[data-mode=local] .bwd-home{outline-color:var(--bwd-local)}
.bwd-k{font:600 14px/1.3 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted)}
.bwd-file{margin:0;display:grid;gap:6px}
.bwd-file img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.bwd-file figcaption{font:13px/1.3 ui-monospace,"SF Mono",Menlo,monospace;color:var(--c-muted);overflow-wrap:anywhere}
.bwd-badge{font:600 14px/1.3 var(--font-body);color:var(--bwd-ink);background:var(--bwd-local);padding:6px 10px;justify-self:start;opacity:0;transition:opacity .3s ease}
.bwd[data-mode=local] .bwd-badge{opacity:1}
.bwd-wires{width:100%;height:100%;display:block;overflow:visible}
.bwd-wires path{fill:none;stroke:var(--bwd-cloud);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:3 9;transition:opacity .35s ease}
.bwd[data-mode=local] .bwd-wires path{opacity:.12;stroke:var(--c-muted)}
@media (prefers-reduced-motion:no-preference){.bwd[data-mode=cloud] .bwd-wires path{animation:bwd-flow .9s linear infinite}}
@keyframes bwd-flow{to{stroke-dashoffset:-12}}
.bwd-dests{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(3,1fr);gap:8px}
.bwd-dests li{display:grid;align-content:center;gap:4px;padding:12px 14px;background:color-mix(in srgb,var(--bwd-cloud) 16%,var(--bwd-panel,var(--c-panel)));border-left:3px solid var(--bwd-cloud);transition:opacity .35s ease,background-color .35s ease,border-color .35s ease}
.bwd-dests b{font:600 16px/1.25 var(--font-body);color:var(--c-bone)}
.bwd-dests span{font:14px/1.4 var(--font-body);color:var(--c-muted)}
.bwd[data-mode=local] .bwd-dests li{background:transparent;border-left-color:var(--c-line)}
.bwd[data-mode=local] .bwd-dests b{color:var(--c-muted);text-decoration:line-through;text-decoration-thickness:1px}

/* A narrow demo (tablets, small laptops) stacks the diagram: the file first, then where it goes. */
.bwd-demo{container-type:inline-size}
@container (max-width:620px){
  .bwd-flow{grid-template-columns:1fr;min-height:0;gap:10px}
  .bwd-wires{display:none}
  .bwd-file{grid-template-columns:120px 1fr;align-items:center;gap:12px}
  .bwd-dests{grid-template-rows:none!important}
}

/* ---------- Meter: credits, prompts and versions ---------- */
.bwd-gauge{display:grid;gap:8px}
.bwd-bar{height:12px;background:var(--bwd-chip,var(--c-raised));position:relative;overflow:hidden}
.bwd-bar i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--bwd-cloud);transition:width .35s ease,background-color .3s ease}
.bwd[data-mode=local] .bwd-bar i{background:var(--bwd-local)}
.bwd-read{display:flex;justify-content:space-between;gap:12px;font:15px/1.4 var(--font-body);color:var(--c-muted)}
.bwd-read strong{color:var(--c-bone);font-weight:600;font-variant-numeric:tabular-nums}
.bwd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;margin-top:16px;min-height:118px;align-content:start}
.bwd-tiles>*{aspect-ratio:1;display:block;width:100%;object-fit:cover;background:var(--bwd-chip,var(--c-raised))}
.bwd-tiles>span{display:grid;place-items:center;font:600 13px var(--font-body);color:var(--c-bone);font-variant-numeric:tabular-nums}
.bwd-tiles>.is-new{animation:bwd-develop .6s ease both}
@keyframes bwd-develop{from{opacity:0;filter:blur(6px) brightness(1.6)}}

/* ---------- Year: what changes between January and December ---------- */
.bwd-year-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bwd-month{font:600 24px/1.2 var(--font-display);color:var(--c-bone);font-variant-numeric:tabular-nums}
.bwd-range{width:100%;margin:14px 0 4px;accent-color:var(--bwd-cloud);height:28px}
.bwd[data-mode=local] .bwd-range{accent-color:var(--bwd-local)}
.bwd-ticks{display:grid;grid-template-columns:repeat(12,1fr);font:12px/1 var(--font-body);color:var(--c-muted);text-align:center}
.bwd-status{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px}
.bwd-status li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;background:var(--bwd-panel,var(--c-panel));font:15px/1.35 var(--font-body);color:var(--c-bone)}
.bwd-status em{font-style:normal;font-weight:600;font-size:14px;padding:5px 9px;white-space:nowrap;background:var(--bwd-chip,var(--c-raised));color:var(--c-bone);transition:background-color .3s ease,color .3s ease}
.bwd-status em.is-live{background:var(--bwd-local);color:var(--bwd-ink)}
.bwd-status em.is-gone{background:var(--bwd-cloud);color:var(--bwd-ink)}
.bwd-status li.is-gone>span{color:var(--c-muted);text-decoration:line-through;text-decoration-thickness:1px}

/* ---------- Brief: whose policy decides ---------- */
.bwd-verdict{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:18px;background:var(--bwd-panel,var(--c-panel))}
.bwd-stamp{font:700 15px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:12px 14px;border:2px solid var(--bwd-cloud);color:var(--bwd-cloud);transform:rotate(-3deg)}
.bwd[data-mode=local] .bwd-stamp{border-color:var(--bwd-local);color:var(--bwd-local)}
.bwd-verdict p{margin:0;font:16px/1.5 var(--font-body);color:var(--c-bone)}

/* ---------- Brief: the picture beside the verdict (26 Oct) ---------- */
.bwd-brief{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:18px;align-items:start}
.bwd-brief .bwd-verdict{display:block}
.bwd-brief-fig{margin:0;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bwd-chip,var(--c-raised))}
.bwd-brief-art{width:100%;height:100%;transition:filter .35s ease}
.bwd-brief-art img,.bwd-brief-art svg{width:100%;height:100%;display:block;object-fit:cover}
.bwd[data-mode=cloud] .bwd-brief-art{filter:blur(3px) grayscale(.85) brightness(.85)}
.bwd-brief-fig::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(0,0,0,.26) 0 10px,transparent 10px 22px);opacity:0;transition:opacity .35s ease;pointer-events:none}
.bwd[data-mode=cloud] .bwd-brief-fig::after{opacity:1}
.bwd-brief-flag{position:absolute;left:12px;top:12px;z-index:2;padding:7px 11px;font:700 13px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;background:var(--bwd-cloud);color:var(--bwd-ink)}
.bwd[data-mode=local] .bwd-brief-flag{background:var(--bwd-local)}
.bwd-brief-fig figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:8px 10px;font:13px/1.35 var(--font-body);background:rgba(10,15,13,.72);color:#fbfaf6}
@container (max-width:620px){.bwd-brief{grid-template-columns:1fr}}

/* ---------- Chat: the question a client asks ---------- */
.bwd-chat{display:grid;gap:10px}
.bwd-bubble{max-width:88%;padding:12px 14px;font:16px/1.5 var(--font-body)}
.bwd-bubble.is-them{justify-self:start;background:var(--c-bone);color:var(--bwd-ink)}
.bwd-bubble.is-us{justify-self:end;background:var(--bwd-panel,var(--c-panel));color:var(--c-bone);border-left:3px solid var(--bwd-cloud);min-height:3em}
.bwd[data-mode=local] .bwd-bubble.is-us{border-left-color:var(--bwd-local)}
.bwd-bubble ol{margin:6px 0 0;padding-left:20px}
.bwd-bubble li{margin:3px 0}
.bwd-bubble small{display:block;color:var(--c-muted);font-size:13px;margin-bottom:4px}
.bwd-bubble.is-them small{color:var(--c-ink-muted)}

/* ---------- Retention: who still holds a copy ---------- */
.bwd-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bwd-col{background:var(--bwd-panel,var(--c-panel));padding:12px;min-height:220px}
.bwd-col h4{margin:0 0 10px;font:600 14px/1.3 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted)}
.bwd-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bwd-col li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;background:var(--c-bone);color:var(--bwd-ink);font:14px/1.35 var(--font-body);transition:opacity .3s ease}
.bwd-col li button{border:0;background:var(--bwd-ink);color:var(--c-bone);font:600 13px var(--font-body);padding:6px 9px;cursor:pointer}
.bwd-col li.is-ghost{background:transparent;color:var(--c-bone);outline:1px dashed var(--bwd-cloud);outline-offset:-1px}
.bwd-col li.is-ghost small{color:var(--bwd-cloud);font-weight:600}
.bwd[data-mode=local] .bwd-col.is-vendor{display:none}
.bwd[data-mode=local] .bwd-cols{grid-template-columns:1fr}
.bwd-empty{font:14px/1.4 var(--font-body);color:var(--c-muted);padding:9px 2px}

/* ---------- Search: does the question leave the building ---------- */
.bwd-query{display:flex;gap:8px;flex-wrap:wrap}
.bwd-query output{flex:1 1 260px;padding:12px 14px;background:var(--c-bone);color:var(--bwd-ink);font:16px/1.4 var(--font-body)}
.bwd-pipe{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
/* Steps not yet run read as waiting (dashed, no fill), not as faded: their text keeps full contrast. */
.bwd-pipe li{padding:12px;background:transparent;outline:1px dashed var(--c-line);outline-offset:-1px;font:14px/1.4 var(--font-body);color:var(--c-muted);transition:background-color .3s ease,outline-color .3s ease}
.bwd-pipe li b{display:block;font-size:15px;color:var(--c-muted);margin-bottom:3px}
.bwd-pipe li.is-on{background:var(--bwd-panel,var(--c-panel));outline-color:transparent}
.bwd-pipe li.is-on b{color:var(--c-bone)}
.bwd-pipe li.is-web{background:color-mix(in srgb,var(--bwd-cloud) 22%,var(--bwd-panel,var(--c-panel)));outline:1px solid var(--bwd-cloud);outline-offset:-1px}
.bwd-pipe li.is-off{display:none}
.bwd-pipe code{display:block;margin-top:6px;font:13px/1.4 ui-monospace,"SF Mono",Menlo,monospace;color:var(--c-bone);overflow-wrap:anywhere}

/* ---------- Phones and tablets ---------- */
@media (max-width:920px){
  .bwd{grid-template-columns:1fr;gap:16px}
  .bwd-tabs{position:static;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:6px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .bwd-tabs::-webkit-scrollbar{display:none}
  .bwd-tab{flex:0 0 auto;width:auto;max-width:240px;scroll-snap-align:start;border-left:0;border-top:3px solid transparent;background:var(--bwd-panel,var(--c-panel));grid-template-columns:auto 1fr;padding:12px 14px}
  .bwd-tab[aria-selected=true]{border-top-color:var(--bwd-cloud)}
  .bwd[data-mode=local] .bwd-tab[aria-selected=true]{border-top-color:var(--bwd-local)}
  .bwd-tab-t{font-size:15px}
  .bwd-stage{margin-inline:calc(var(--gutter) * -1)}
  .bwd-flow{grid-template-columns:1fr;min-height:0;gap:10px}
  .bwd-wires{display:none}
  .bwd-file{grid-template-columns:110px 1fr;align-items:center;gap:12px}
  .bwd-dests{grid-template-rows:none!important}
  .bwd-pipe{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .bwd-cols{grid-template-columns:1fr}
  .bwd-switch{width:100%}
  .bwd-switch button{flex:1 1 0;padding-inline:10px}
}

/* ---------- Reference: one master, the shots made from it (25 Oct) ---------- */
.bwd-ref{margin:0;display:grid;grid-template-columns:minmax(0,1.1fr) 40px minmax(0,1.7fr);align-items:center;gap:14px}
.bwd-ref img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.bwd-ref-src{outline:2px solid var(--c-bone);outline-offset:4px}
.bwd-ref-src span,.bwd-ref-shots span{display:block;margin-top:8px;font:13px/1.35 var(--font-body);color:var(--c-muted)}
.bwd-ref-src span{color:var(--c-bone);font-weight:600}
.bwd-ref-arrow{width:40px;height:24px;fill:none;stroke:var(--c-bone);stroke-width:2}
.bwd-ref-shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bwd-holds{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bwd-holds li{padding:12px 14px;background:var(--bwd-panel,var(--c-panel));font:14px/1.45 var(--font-body);color:var(--c-muted)}
.bwd-holds b{display:block;color:var(--c-bone);font-size:15px;margin-bottom:2px}
/* ---------- Training: product shots, the machine, the file, any format (25 Oct) ---------- */
.bwd-train{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bwd-train li{position:relative;padding:14px;background:var(--bwd-panel,var(--c-panel));display:grid;gap:6px;align-content:start;font:14px/1.45 var(--font-body);color:var(--c-muted)}
.bwd-train li+li::before{content:'';position:absolute;left:-12px;top:50px;width:12px;height:2px;background:var(--c-bone)}
.bwd-train b{color:var(--c-bone);font-size:15px;margin-top:6px}
.bwd-train-shots{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:35px;gap:2px}
.bwd-train-shots img{width:100%;height:100%;object-fit:cover;display:block}
.bwd-train-icon,.bwd-aspects{display:block;height:72px;width:100%;fill:none;stroke:var(--c-bone);stroke-width:2;stroke-linejoin:round}
.bwd-file-chip{height:72px;display:grid;align-content:center;justify-items:start;gap:8px}
.bwd-file-chip svg{width:22px;height:28px;fill:none;stroke:var(--c-bone);stroke-width:1.6;stroke-linejoin:round}
.bwd-file-chip code{font:12px/1.3 ui-monospace,"SF Mono",Menlo,monospace;background:var(--c-bone);color:var(--bwd-ink);padding:6px 8px;overflow-wrap:anywhere}
@container (max-width:620px){
  .bwd-ref{grid-template-columns:1fr}
  .bwd-ref-arrow{transform:rotate(90deg);justify-self:center}
  .bwd-holds{grid-template-columns:1fr}
  .bwd-train{grid-template-columns:1fr 1fr}
  .bwd-train li+li::before{display:none}
}

/* ---------- Example pages light up as they come into view: nothing moves ---------- */
@property --bw-p{syntax:'<percentage>';inherits:false;initial-value:0%}
.bw-scan{position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(to bottom,transparent 0,transparent calc(var(--bw-p) - 70px),color-mix(in srgb,var(--bw-scan,#fff) 16%,transparent) calc(var(--bw-p) - 3px),var(--bw-scan,#fff) calc(var(--bw-p) - 2px),var(--bw-scan,#fff) var(--bw-p),color-mix(in srgb,#000 38%,transparent) var(--bw-p),color-mix(in srgb,#000 38%,transparent) 100%)}
.bw-scan.is-run{animation:bw-scan 1.5s cubic-bezier(.45,0,.25,1) forwards}
@keyframes bw-scan{from{--bw-p:0%}to{--bw-p:102%}}
.bw-dim{opacity:.35;transition:opacity .9s ease}
.bw-dim.bw-lit{opacity:1}