/* Oct 7: phone fixes (kept out of the generated desk-opener.css) */
@media (max-width:980px){
  #top.desk-opener .do-ident .deck{max-width:none}
}
@media (max-width:640px){
  #top.desk-opener .do-hero{min-height:0}
  /* whole desk at phone width, no drag; the faded far end runs off the left edge */
  #top.desk-opener{--dw:calc((100vw - 16px) * 1.52)}
  #top.desk-opener .desk-frame{overflow:hidden;overflow:clip;touch-action:pan-y;padding-top:calc(var(--dw) * .1);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px);mask-image:linear-gradient(to right,transparent 0,#000 28px)}
  #top.desk-opener .desk-stage{width:var(--dw);height:calc(var(--dw) * .4333);margin-left:calc(100vw - 8px - var(--dw) * .991)}
  #top.desk-opener .swipe{display:none!important}
}
/* WebKit paints a stray box at the viewport's top-left for a filtered element holding an iframe; use box-shadow instead */
.argos-device{filter:none}
.argos-device .device-scale{box-shadow:0 25px 45px #19241926}
/* hidden gloss cards sit past the right edge until shown; never let anything widen the page */
html,body{overflow-x:clip}

/* opening bar: what this is (flush left / top), disciplines (flush right) */
@media(min-width:701px){
  html body .opening-base.base-three{display:flex;justify-content:space-between;align-items:baseline;gap:24px}
  html body .opening-base.base-three .base-mid{text-align:left;white-space:nowrap}
  html body .opening-base.base-three .base-disc{justify-content:flex-end;text-align:right}
}
html body .opening-base.base-three .base-mid{text-align:left}
@media(max-width:700px){
  /* bars between disciplines; a bar that would start a wrapped line is clipped off the left edge */
  .opening-base.base-three .base-disc{justify-content:flex-start;gap:4px 0!important;margin-left:-17px;clip-path:inset(0 0 0 17px)}
  .opening-base.base-three .base-disc>span{position:relative;padding-left:17px;white-space:nowrap}
  .opening-base.base-three .base-disc>span::before{content:"|";position:absolute;left:6px;opacity:.55}
}

/* project nav on phones: one row; the section you're in shows its name, the rest are numbers between small dots */
@media(max-width:600px){
  .project-nav-shell .project-nav{justify-content:flex-start;gap:12px;overflow:visible;padding:8px 10px}
  .project-nav-shell .project-nav a{white-space:nowrap;padding:6px 6px;position:relative}
  .project-nav-shell .project-nav a:not(.active){font-size:0;border-bottom-color:transparent}
  .project-nav-shell .project-nav a span{font-size:10px;margin-right:0!important}
  .project-nav-shell .project-nav a.active span{margin-right:6px!important}
  .project-nav-shell .project-nav a+a::before{content:"";position:absolute;left:-7.5px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:currentColor;opacity:.4}
  .project-nav-shell .project-nav a.active{border-bottom-color:transparent!important}
  .project-nav-shell .project-nav a.active::after{content:"";position:absolute;left:6px;right:6px;bottom:2px;border-bottom:1px solid currentColor}
  .project-nav-shell.can-scroll:after{display:none}
}

/* desk on phones: first tap picks an object and shows this card; the card (or a second tap) goes */
#top.desk-opener .desk-pick{display:none}
@media(max-width:640px){
  #top.desk-opener .do-scene{position:relative}
  #top.desk-opener .desk-pick{display:grid;gap:3px;position:absolute;right:16px;top:0;z-index:3;max-width:min(62%,250px);padding:9px 12px 10px;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--ink);text-decoration:none;transition:opacity .15s,transform .15s}
  #top.desk-opener .desk-pick[hidden]{display:grid;opacity:0;transform:translateY(-4px);pointer-events:none}
  #top.desk-opener .desk-pick b{font-weight:400;font-size:12.5px}
  #top.desk-opener .desk-pick i{font-style:normal;color:var(--muted);font-size:10.5px;line-height:1.45}
  #top.desk-opener .desk-pick span{margin-top:5px;font-size:11px;justify-self:start;border-bottom:1px solid currentColor;padding-bottom:1px}
}

/* A Phone That Cares on phones: drawing cropped to the phone, bigger and centred */
@media(max-width:700px){
  .ptc-head .ptc-ex{width:88%;justify-self:center;margin-left:auto;margin-right:auto}
  svg[data-ptc-ex] [data-labs]{display:none}
}
/* the list item for the layer being tried */
.within-index a.ptc-on>span{color:var(--ink)}
.within-index a.ptc-on{color:var(--ink)}
.within-index .wi-name{align-self:flex-start;border-bottom:1px solid transparent}
.within-index a.ptc-on .wi-name{border-bottom-color:currentColor}

/* ArgOS screen buttons sat tight under the paragraph on phones */
@media(max-width:700px){
  .argos-story .concept-routes{margin-top:22px}
}

/* "click" with a mouse, "tap" on touch screens */
.say-tap{display:none}
@media(hover:none) and (pointer:coarse){.say-click{display:none}.say-tap{display:inline}}

/* JLab Mobile: the two FigJam flows as one wide, swipeable pair (same aspect ratio) */
.jm-flows{margin-top:18px}
.jm-flows-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:16px;border-radius:6px}
.jm-flows-track::-webkit-scrollbar{display:none}
.jm-flows-track figure{flex:0 0 100%;margin:0;scroll-snap-align:start}
.jm-flows-track img{display:block;width:100%;height:auto;aspect-ratio:2200/1280;border:1px solid var(--line);border-radius:6px;background:#f5f5f5}
.jm-flows-track .image-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.jm-flows-track figcaption{font-size:11px;color:var(--muted);margin-top:8px}
.jm-flows-nav{display:flex;gap:6px;margin-top:10px}
.jm-flows-nav button{font:inherit;font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer}
.jm-flows-nav button[aria-pressed=true]{color:var(--ink);border-color:currentColor}

/* JLab Mobile opener: old app → earbuds I redesigned → a drawn phone with a ghost of the new app */
.jm-trip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:start;margin:40px 0 80px}
.jm-trip figure{margin:0;min-width:0}
.jm-trip .jm-tile{display:block;position:relative;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:6px;overflow:hidden;background:#e4dfd2;cursor:pointer}
.jm-trip .jm-tile>img{display:block;width:100%;height:100%;object-fit:cover}
.jm-trip figcaption{font-size:12px;line-height:1.55;margin-top:12px;color:var(--muted)}
.jm-trip figcaption b{display:block;font-weight:400;color:var(--ink);margin-bottom:2px}
.jm-arrow{align-self:center;margin-top:-60px;font-size:20px;color:var(--muted)}
.jm-ghost-screen{position:absolute;left:35.1%;top:17.6%;width:29.9%;height:66%;border-radius:2.4%/1.1%;overflow:hidden}
.jm-ghost-screen img{width:100%;height:100%;object-fit:cover;object-position:top;opacity:.14;filter:grayscale(.6);transition:opacity .35s,filter .35s}
.jm-ghost .jm-ghost-lines{position:absolute;inset:0;width:100%;height:100%}
.jm-ghost-hint{position:absolute;left:0;right:0;top:7%;text-align:center;font-size:11px;color:var(--muted);opacity:0;transition:opacity .2s}
.jm-ghost:hover .jm-ghost-screen img,.jm-ghost:focus-visible .jm-ghost-screen img{opacity:.24}
.jm-ghost:hover .jm-ghost-hint,.jm-ghost:focus-visible .jm-ghost-hint{opacity:1}
.jm-ghost.on .jm-ghost-screen img{opacity:1;filter:none}
.jm-ghost.on .jm-ghost-hint{opacity:0}
@media(hover:none){.jm-ghost-hint{opacity:.8}}
@media(max-width:760px){
  .jm-trip{grid-template-columns:1fr;gap:8px;margin:28px 0 50px}
  .jm-trip figure{max-width:320px}
  .jm-trip figure:nth-of-type(2){justify-self:end}
  .jm-arrow{margin:0;justify-self:center;transform:rotate(90deg)}
}
/* the problem + real reviews */
.jm-problem{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:clamp(30px,6vw,90px);align-items:start;padding:50px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jm-reviews{display:grid;gap:14px}
#jlab-mobile .jm-problem .jm-copy p:not(.eyebrow){max-width:64ch}
#jlab-mobile .jm-chapter.jm-problem{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);align-items:start}
@media(max-width:760px){#jlab-mobile .jm-chapter.jm-problem{grid-template-columns:1fr}}
.jm-rv{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.jm-rv p{margin:6px 0 8px;font-size:14px;line-height:1.5}
.jm-rv-stars{font-size:12px;letter-spacing:.15em;color:var(--ink)}
.jm-rv-kind{font-size:10.5px;color:var(--muted)}
.jm-rv cite{font-size:10px;font-style:normal;color:var(--muted)}
@media(max-width:760px){.jm-problem{grid-template-columns:1fr;padding:32px 0}}
/* Skullcandy review card carries a small screenshot of their 2022 app */
.jm-rv-sk{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:start}
.jm-rv-shot{padding:0;border:0;background:none;cursor:zoom-in}
.jm-rv-shot img{display:block;width:100%;border-radius:5px}
.jm-ghost{cursor:default}

/* JLab Mobile: the clickable app, beside its intro */
.jm-try{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center;padding:60px 0}
.jm-try-frame{justify-self:center;width:min(372px,100%);aspect-ratio:390/844;max-height:86vh;border:9px solid #1d2420;border-radius:46px;overflow:hidden;background:#eee;box-shadow:0 24px 50px #19241926}
.jm-try-frame iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:760px){.jm-try{grid-template-columns:1fr;padding:36px 0}.jm-try-frame{width:min(340px,100%)}}
.jm-rv-stars{font-size:13px;letter-spacing:.12em;color:#c9a227}
.jm-rv-stars i{font-style:normal;color:var(--line)}
.jm-trip figcaption{font-size:12.5px}
/* the connect guide that shipped */
.jm-shipped{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:center;padding:50px 0}
.jm-shipped figure{margin:0}
.jm-shipped img{display:block;width:100%;border-radius:22px;border:1px solid var(--line)}
@media(max-width:760px){.jm-shipped{grid-template-columns:1fr;padding:32px 0}.jm-shipped figure{max-width:260px}}
/* JLab Mobile process: 1 Illustrator → 2 FigJam → 3 shipped */
.jm-stage-label{font-size:11px;color:var(--muted);margin:26px 0 10px}
.jm-ai-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:760px}
.jm-ai-row .image-open{padding:0;border:0;background:none;cursor:zoom-in}
.jm-ai-row img{display:block;width:100%;height:auto}
.jm-outcome{font-size:clamp(16px,1.6vw,20px);line-height:1.5;margin:10px 0 40px;max-width:52ch}
.jm-outcome b{font-weight:400;color:var(--ink);border-bottom:1px solid var(--line)}
@media(max-width:760px){.jm-ai-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:340px}}
.jm-early-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.jm-early-row figure{margin:0}
.jm-early-row .image-open,.jm-explore-grid .image-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.jm-early-row img,.jm-explore-grid img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px}
.jm-early-row figcaption{font-size:10.5px;color:var(--muted);margin-top:6px}
.jm-stage-note{font-size:12px;color:var(--muted);margin:10px 0 0}
.jm-explore-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.jm-explore-grid img{aspect-ratio:780/1688;object-fit:cover;object-position:top}
@media(max-width:760px){.jm-early-row{grid-template-columns:repeat(3,minmax(0,1fr))}.jm-explore-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}}
/* the clickable app's phone frame: exact 390:844, sized by width or height without distorting */
.jm-try-frame{width:min(372px,100%,calc(86vh * 390 / 844));max-height:none}
/* stage 3: swipeable carousel of device-page explorations */
.jm-stage-text{max-width:56ch;font-size:14px;line-height:1.6;margin:0 0 14px}
.jm-carousel{position:relative}
.jm-car-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 0}
.jm-car-track::-webkit-scrollbar{display:none}
.jm-car-track .image-open{flex:0 0 calc((100% - 12px*5)/6);scroll-snap-align:start;padding:0;border:0;background:none;cursor:zoom-in}
.jm-car-track img{display:block;width:100%;height:auto;aspect-ratio:780/1688;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:8px}
.jm-car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--bg,#f1f2ea);color:var(--ink);cursor:pointer;font:inherit}
.jm-car-btn.prev{left:-12px}.jm-car-btn.next{right:-12px}
.jm-car-btn[disabled]{opacity:0;pointer-events:none}
@media(max-width:760px){.jm-car-track .image-open{flex-basis:calc((100% - 12px*2)/2.4)}.jm-car-btn{display:none}}
/* What shipped: three-screen carousel */
.jm-ship-car{min-width:0}
.jm-ship-car .jm-flows-track figure{flex:0 0 100%}
.jm-ship-car img{display:block;width:100%;border-radius:22px;border:1px solid var(--line)}
.jm-ship-car figcaption{font-size:11px;color:var(--muted);margin-top:8px}
.jm-ship-car .image-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.jm-ship-car .jm-flows-track img{aspect-ratio:720/1558;height:auto;background:none}
/* stage 3 as a flipbook: one screen, click (or sweep the mouse) to flip */
.jm-explore{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:center;margin:30px 0}
.jm-flip{position:relative;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.jm-flip img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:18px}
.jm-flip-count{position:absolute;right:10px;bottom:10px;font-size:10.5px;padding:3px 7px;border-radius:999px;background:#ffffffcc;color:#333}
.jm-flip-hint{font-size:11px;color:var(--muted)}
@media(max-width:760px){.jm-explore{grid-template-columns:1fr}.jm-flip{max-width:240px}}
.jm-shipped h4{margin-bottom:14px}
/* JLab Desktop explainer as a plain video */
.jd-explainer-video{display:block;width:100%;height:auto;border-radius:10px;background:var(--line)}
/* problem heading: two set lines; paragraphs a little narrower than its first line (~16.6em) */
@media(min-width:960px){
  #jlab-mobile .jm-problem .jm-copy h3{font-size:clamp(28px,2.7vw,36px);white-space:nowrap}
  #jlab-mobile .jm-problem .jm-copy p:not(.eyebrow){max-width:calc(clamp(28px,2.7vw,36px) * 15)}
}
/* step 1 now holds four Illustrator-era screens: keep their scale, no empty columns */
.jm-early-row{grid-template-columns:repeat(4,minmax(0,1fr));max-width:calc(66.7% + 4px)}
@media(max-width:760px){.jm-early-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}
/* flipbook: stacked pre-decoded frames, only the current one visible */
.jm-flip .jm-flip-layer{position:absolute;inset:0;width:100%;height:auto;visibility:hidden}
.jm-flip.stacked img{visibility:hidden}
.jm-flip.stacked img.on{visibility:visible}
/* process split into two tracks */
.jm-track{max-width:none;font-size:13px;letter-spacing:.02em;color:var(--ink);margin:46px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.jm-track + .jm-stage .jm-stage-label{margin-top:14px}

/* JLab Mobile process as two rows (Oct 8) */

.r-row{display:flex;align-items:center;gap:14px;padding:16px 0 4px;width:100%}
.r-cell{margin:0;flex:none}
.r-cell figcaption{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.4}
.r-a .r-phone{width:clamp(150px,22%,250px)}
.r-a .r-wide{flex:1;min-width:0}
.r-b{justify-content:flex-start}.r-b .r-pair{flex:none;width:calc(2 * clamp(150px,19vw,230px) + 10px)}.r-b .r-phone{flex:none;width:clamp(150px,19vw,230px)}
.r-pair>div{display:flex;gap:10px}.r-pair img{flex:1;min-width:0;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
.r-b .r-phone>img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
.r-flipcell .jm-flip{width:100%;max-width:none}
.r-car{position:relative;cursor:pointer;outline:none}
.r-car img{display:none;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
.r-car img.on{display:block}
.r-wide .r-car img{border-radius:8px}
.r-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.r-dots i{width:6px;height:6px;border-radius:50%;background:#0003}.r-dots i.on{background:#000a}
.r-arrow{flex:none;color:var(--muted);font-size:16px}
.r-tabbed .image-open{display:none;width:100%;padding:0;border:0;background:none;cursor:zoom-in}.r-tabbed .image-open.on{display:block}.r-tabbed img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px}
.r-tabs{display:inline-flex;gap:4px;margin-right:8px;vertical-align:middle}.r-tabs button{font:inherit;font-size:10.5px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);cursor:pointer}.r-tabs button.on{color:var(--ink);border-color:var(--ink)}
.r-note{font-size:12.5px;color:var(--muted);max-width:70ch;margin:10px 0 0}
@media(max-width:760px){.r-row{flex-direction:column;align-items:stretch}.r-arrow{transform:rotate(90deg);align-self:center}.r-a .r-phone,.r-b .r-phone{width:62%;max-width:260px;align-self:center}.r-b .r-pair{width:100%;max-width:440px;align-self:center}}
/* review cards: bigger stars; hover/focus/tap reveals Brian's note on what was really going on */
.jm-rv{position:relative}
.jm-rv-stars{font-size:17px;letter-spacing:.08em}
.jm-rv-note{display:block;max-height:0;overflow:hidden;opacity:0;font-size:12px;line-height:1.5;color:var(--ink);border-top:1px dashed transparent;transition:max-height .25s ease,opacity .2s ease,margin .2s ease,padding .2s ease}
.jm-rv:hover .jm-rv-note,.jm-rv:focus .jm-rv-note,.jm-rv.open .jm-rv-note{max-height:12em;opacity:1;margin-top:10px;padding-top:10px;border-top-color:var(--line)}
.jm-rv{cursor:help;outline:none}
.jm-rv:focus-visible{box-shadow:0 0 0 2px var(--ink)}
/* row B: tops aligned, matching corners */
.r-b{align-items:flex-start}
.r-b .r-arrow{align-self:center;margin-top:-20px}
.r-flipcell .jm-flip img{border-radius:12px}
/* Dark mode: the desk stays a light table with the original line drawings (no inverted art); only the page around it goes dark */
html[data-theme=dark] #top.desk-opener .desk-stage{--ink:#293b30;--muted:#5d6b5f;--line:#68796240;
  --top:#faf7ef;--side-r:#e9e3d4;--side-l:#ded7c5;--hole:#e4ddcc;--screen:#fbfaf6;--side-app:#efeadf;
  --stroke:#2c3d32;--ptc-body:#1c201d;--paper-glass:#fbfaf6;
  --acc-jd:#e07a3a;--acc-ur:#26494c;--acc-eb:#2f5be0;--acc-pw:#4f9a3b;--acc-me:#b4553a;
  --on-black:#aab3ab;--on-blue:#14245e;--glow:#ffd45c;--glow2:#ffa58c;--glow3:#f0607a;--paper:#fffdf7;--paper-r:#ece6d6;--paper-l:#e2dbc8;--cover:#26494c;--ink-pen:#3b4a6b}
html[data-theme=dark] #top.desk-opener .desk-stage .cad .th-l{display:inline}
html[data-theme=dark] #top.desk-opener .desk-stage .cad .th-d{display:none}
html[data-theme=dark] #top.desk-opener .desk-stage .pc .th-l{display:block}
html[data-theme=dark] #top.desk-opener .desk-stage .pc .th-d{display:none}
html[data-theme=dark] #top.desk-opener .desk-stage .ph-shadow{fill:#2b3a30;fill-opacity:.07}
html[data-theme=dark] #top.desk-opener .desk-stage .scr-shadow{fill:#2b3a30;fill-opacity:.07}
html[data-theme=dark] #top.desk-opener .desk-stage .scr-frame{fill:#262b28}
html[data-theme=dark] #top.desk-opener .desk-stage #dk-lift feDropShadow{flood-color:#2b3a30;flood-opacity:.38}
html[data-theme=dark] #top.desk-opener .desk-stage .pp-ch .fs{fill:#2d322e}
html[data-theme=dark] #top.desk-opener .desk-stage .pp-pipe .fs{fill:#3a3f3b}
html[data-theme=dark] #top.desk-opener .desk-stage .antbug circle{fill:#2b2620}
html[data-theme=dark] #top.desk-opener .desk-stage .tags{--ink:#e6ecdf;--muted:#a9b8a5;--line:#b1c1a033;--stroke:#d3dccb}
/* Argos: breathing room before the Try / Read buttons */
.argos-cta{margin-top:26px}
.nb2 [data-hoverplay] video{cursor:pointer;overflow:hidden;clip-path:inset(0 round 10px)}
/* row B now: pair → flipbook → pair; five equal phones */
.r-b .r-pair{width:calc(2 * clamp(130px,15.5vw,215px) + 10px)}.r-b .r-phone{width:clamp(130px,15.5vw,215px)}
@media(max-width:760px){.r-b .r-pair{width:100%;max-width:440px}.r-b .r-phone{width:62%;max-width:260px}}
/* dark-mode section grounds: notebook leans navy to sit with the Ink palette; JLab Mobile goes to a cool graphite so the app's white + cyan read clean */
[data-theme=dark] .notebook-scene{background:#1c2333;--paper:#1c2333;--muted:#aeb7c6}
[data-theme=dark] .mobile-scene{background:#26292e;--paper:#26292e;--muted:#b4b8be}

/* notebook: the demo-note trio spans the play grid as one row of three */
.nb2 .nb-grid .nb-trio{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.nb2 .nb-trio figure{margin:0}
.nb2 .nb-trio figcaption{font-size:12.5px;line-height:1.55;margin-top:10px;color:var(--muted)}
.nb2 .nb-trio figcaption b{display:block;font-weight:400;color:var(--ink);margin-bottom:2px}
@media(max-width:760px){.nb2 .nb-grid .nb-trio{grid-template-columns:1fr}}
/* review notes: a floating popover beside the card instead of expanding it */
.jm-rv-note{position:absolute;z-index:5;left:12px;right:12px;top:calc(100% - 6px);max-height:none!important;margin:0!important;padding:11px 13px!important;border:1px solid var(--line)!important;border-radius:8px;background:var(--paper,#fff);box-shadow:0 10px 30px #0002;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease}
.jm-rv:hover .jm-rv-note,.jm-rv:focus .jm-rv-note,.jm-rv.open .jm-rv-note{opacity:1;transform:none}
.jm-rv:hover,.jm-rv:focus,.jm-rv.open{z-index:6}
/* review pop-ups hang off the right edge of the cards so they read as notes */
.jm-rv-note{left:auto;right:-28px;width:calc(100% - 4px)}
@media(max-width:760px){.jm-rv-note{right:-8px;width:calc(100% - 4px)}}
.nb-tap-hint{font-size:11.5px;color:var(--muted);margin:8px 0 0;text-align:center;transition:opacity .3s}.nb-tap-hint.done{opacity:0}
dialog.nb-zoom{padding:0;border:0;background:transparent;max-width:min(94vw,1500px);max-height:92vh;overflow:visible}
dialog.nb-zoom::backdrop{background:#000c}
dialog.nb-zoom video{display:block;width:min(94vw,1500px);max-height:92vh;height:auto;object-fit:contain;border-radius:10px}
.nb2 .nb-grid .nb-wide figcaption{max-width:72ch}
/* Lab App: simple-vs-deep comparisons, two images wide */
.jd-pairs{display:grid;gap:34px;margin-top:18px}
.jd-pair-label{font-size:11px;color:var(--muted);margin:0 0 10px;max-width:none;display:flex;justify-content:space-between}
.jd-pair-more{font-size:10.5px;opacity:.8}
.jd-pair-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 9px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.jd-pair-track figure{margin:0;scroll-snap-align:start}
.jd-pair-track .image-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.jd-pair-track img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px}
.jd-pair-track figcaption{font-size:12px;line-height:1.5;color:var(--muted);margin-top:8px}
.jd-pair-track figcaption b{display:block;font-weight:400;color:var(--ink);margin-bottom:2px}
@media(max-width:760px){.jd-pair-track{grid-auto-columns:86%}}
/* Unicode box: toy left, chat example right; style buttons under the field with the hint beside them */
#jlab-desktop .jd-side-copy{margin-bottom:22px}
#jlab-desktop #unicode-story .jd-side-title{padding-bottom:26px}
#jlab-desktop .jd-ubox-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
#jlab-desktop .jd-ubox-body .jd-toy textarea{width:100%}
#jlab-desktop .jd-toy-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:10px}
#jlab-desktop .jd-toy-row .style-options{margin:0}
#jlab-desktop .jd-toy-row .jd-toy-hint{margin:0}
#jlab-desktop .jd-ubox-chat{margin:0}
#jlab-desktop .jd-ubox-chat .image-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
#jlab-desktop .jd-ubox-chat img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
@media(max-width:760px){#jlab-desktop .jd-ubox-body{grid-template-columns:1fr}}
#jlab-desktop .jd-side-title>.jd-side-copy{grid-column:2}
.nb2 .nb-opener video.nb-b{display:block;width:100%;height:100%;object-fit:cover}
.nb2 .nb-fade .nb-copy h3{max-width:none;white-space:nowrap}@media(max-width:560px){.nb2 .nb-fade .nb-copy h3{white-space:normal}}
/* Lab App: two comparison cells (mice | keyboards), each toggles work ↔ gaming */
.jd-cmps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.jd-cmp figure{display:none;margin:0}.jd-cmp figure.on{display:block}
.jd-cmp .image-open{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.jd-cmp img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px}
.jd-cmp figcaption{font-size:12px;line-height:1.5;color:var(--muted);margin-top:8px;min-height:3em}
.jd-cmp figcaption b{display:block;font-weight:400;color:var(--ink);margin-bottom:2px}
.jd-cmp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.jd-cmp-head .jd-pair-label{margin:0}
.jd-cmp-tabs{display:inline-flex;gap:4px}
.jd-cmp-tabs button{font:inherit;font-size:10.5px;padding:2px 9px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);cursor:pointer}
.jd-cmp-tabs button.on{color:var(--ink);border-color:var(--ink)}
@media(max-width:760px){.jd-cmps{grid-template-columns:1fr}}
/* About: resume header row + X link */
.about .experience .exp-head span{color:var(--muted)}
.about .experience .exp-head a{text-decoration:underline;text-underline-offset:3px}
.about .about-x{display:block;margin-top:6px}
/* About & contact: a ground that sits with the warm Past work section */
[data-theme=dark] .about,[data-theme=dark] footer{background:#2a2622;color:#ece4d8;--muted:#b9ad9b}
html:not([data-theme=dark]) .about,html:not([data-theme=dark]) footer{background:#efe8dc;color:#3a3329;--muted:#6e6456;border-color:#6e645633}
/* headings and short lines that shouldn't strand a last word */
@media(min-width:900px){
  .nb2 .nb-beat .nb-copy h3{max-width:none}
  .nb2 .nb-plain .nb-copy h3,.nb2 .nb-yours .nb-copy h3{white-space:nowrap}
  .desktop-process-strip>p{max-width:none}
  .jd-shots-head h3{max-width:none}
}
/* zoomed notebook clip: a caption under the video */
dialog.nb-zoom .nb-zoom-cap{color:#eee;font-size:13px;line-height:1.5;margin:10px 4px 0;max-width:70ch}
@media(min-width:900px){
  .nb2 .nb-plain .nb-copy,.nb2 .nb-yours .nb-copy{max-width:none;grid-column:1/-1}
}
.nb2 .nb-copy h3,.desktop-process-strip>p,.jd-shots-head h3,.nb2 .nb-copy p{text-wrap:pretty}
#jlab-desktop .desktop-process-strip>p{max-width:none!important}

/* Oct 9 · dark mode, Brian's variant B: JLab Mobile takes the slate, Lab App the brown, Past work goes plum */
[data-theme=dark] .mobile-scene{background:#222631;--paper:#222631;--muted:#b9becd}
[data-theme=dark] .gaming-scene{background:#302e25;--paper:#302e25;--muted:#c0bba9}
[data-theme=dark] .past-scene{background:#2d2433;--paper:#2d2433;--muted:#c3b6c9}