/* BUILD. (11 Nov 2026, his ask: show the websites and apps he builds, "the capabilities, the ask"). The third word beside
   WORK. and PLAY. The page's one moment: a browser window with a tab per website, the old site and the new one on one
   screen, split by a line you drag; you scroll inside the window yourself (build.js). The title types itself, and its
   cursor settles into the full stop. Shared pieces (spec sheet, chapters, tape, the closing read) come from work.css. */

.build-open { padding-block: clamp(120px, 20vh, 200px) clamp(30px, 6vh, 60px); }
.build-title { white-space: nowrap; }
.build-title .ch { display: inline-block; }
.build-title.typing .ch { visibility: hidden; }
.build-title.typing .ch.on { visibility: visible; }
/* the cursor is a bar while it types, lit; then it drops and squares off into Montserrat's full stop, white */
.build-dot {
  display: inline-block; width: .19em; height: .19em; margin-left: .03em; background: var(--white);
  transform-origin: 50% 100%; transition: transform .38s cubic-bezier(.2, .9, .3, 1.2), background-color .38s ease;
}
.build-title.typing .build-dot { background: var(--amber); transform: scale(.42, 3.9); }
.build-title.typing .build-dot.blink { animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.build-intro { max-width: 40em; margin-top: 18px; color: #D5D9E0; font-size: 1.1rem; }

/* section heads: the same big sentence-case words as the chapters, one per kind of build */
.bld-head { padding-block: clamp(70px, 12vh, 130px) 0; }
.bld-head h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.04em; }
.bld-head p { max-width: 38em; margin-top: 14px; color: var(--smoke); font-size: 1.1rem; }
/* said only where there's no mouse (12 Nov): on a laptop the wheel and a drag scroll the site, so the hold needs no word */
.touch-only { display: none; }
@media (hover: none) { .touch-only { display: inline; } }

/* the websites: one browser window with a tab per site, the open tab's words beside it. Nothing moves unless you move it
   (his note, 11 Nov: the scroll-driven version felt forced) */
.sites { display: grid; grid-template-columns: minmax(0, 3.7fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(40px, 7vh, 80px) 0; }
.site-text h3 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); letter-spacing: -0.03em; }
.site-text p { margin-top: 14px; color: #D5D9E0; font-size: 1.05rem; }
.site-text .spec { margin-top: 26px; }
.site-text .spec dd { font-size: .98rem; }
.site-link { display: inline-block; margin-top: 22px; padding-bottom: 3px; border-bottom: 1px solid #3A3A3A; color: var(--white); font: 600 .95rem/1 var(--display); text-decoration: none; }
.site-link:hover { border-color: var(--amber); }

.bw { border-radius: 10px; overflow: hidden; background: #1A1A1A; box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px #2A2A2A; transition: box-shadow .2s ease; }
/* the tab strip, like a browser's (12 Nov, his note: the tabs didn't read as tabs). Every tab has a shape of its own,
   its site's favicon and readable text; the open one is the address bar's colour, so it joins it, with a lit top edge.
   A tab not opened yet wears an amber dot on its favicon, the way an app shows something new (build.js clears it). */
.bw-tabs { display: flex; align-items: flex-end; gap: 10px; height: 54px; padding: 0 10px 0 14px; background: #0A0A0A; }
.bw-dots { display: flex; gap: 7px; align-self: center; }
.bw-dots i { width: 11px; height: 11px; border-radius: 50%; background: #3A3A3A; }
.bw-tablist { display: flex; flex: 1; min-width: 0; gap: 4px; }
.bw-tab {
  position: relative; display: flex; align-items: center; gap: 6px; flex: 1 1 auto; max-width: 210px; min-width: 0; height: 44px; padding: 0 2px 0 10px;
  border: 1px solid #272727; border-bottom: 0; border-radius: 10px 10px 0 0; background: #151515; color: #C9CED6;
  font: 600 .76rem/1 var(--display); text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
/* a name too long for its tab fades out at the edge, as a browser's tabs do, rather than ending in dots; the fade sits
   on the padding, so a name that fits is untouched */
.bw-tab span { display: block; min-width: 0; padding-right: 9px; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent); }
.bw-tab .t-short { display: none; }
/* hover looks only where there is a pointer: on a touch screen a hover sticks to the last thing tapped */
@media (hover: hover) { .bw-tab:hover { background: #1B1B1B; color: var(--white); } }
.bw-tab[aria-selected="true"] { z-index: 1; background: #1E1E1E; border-color: #2E2E2E; color: var(--white); box-shadow: inset 0 2px 0 var(--amber); }
.bw-tab:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.bw-tab.bump { animation: tab-bump .46s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes tab-bump { 40% { transform: translateY(-6px); } }

/* favicons: a rounded square in each site's own colour, sampled from its header (12 Nov); feesmedia.com's is the fm.
   logo, white with a black centre */
.t-fav { position: relative; flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--fav, #3A3A3A); }
.t-fav::after { content: ""; position: absolute; inset: 0; }
.f-omwell { --fav: #283C31; }
.f-omwell::after { background: #BFA487; clip-path: polygon(50% 22%, 82% 76%, 18% 76%); }
.f-mwe { --fav: #4A5424; }
.f-mwe::after { inset: 4px; border-radius: 50%; background: #F1F1EA; }
.f-fm { --fav: var(--white); }
.f-fm::after { inset: 4px; border-radius: 1.5px; background: var(--black); }
.f-leunglum { --fav: #12303B; }
.f-leunglum::after { inset: 4px 4px 3px; border-radius: 3px 3px 1.5px 1.5px; background: #FCF9F4; }
.bw-tab.fresh .t-fav::before {
  content: ""; position: absolute; z-index: 1; top: -4px; right: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 2px #151515, 0 0 8px rgba(242, 165, 65, .8);
}
@media (hover: hover) { .bw-tab.fresh:hover .t-fav::before { box-shadow: 0 0 0 2px #1B1B1B, 0 0 8px rgba(242, 165, 65, .8); } }

/* the address bar: back and forward go through the sites (and wrap), and a quiet count says how many there are */
.bw-bar { display: flex; align-items: center; gap: 2px; height: 50px; padding: 0 12px 0 8px; background: #1E1E1E; border-bottom: 1px solid #2A2A2A; }
.bw-nav { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #C9CED6; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
@media (hover: hover) { .bw-nav:hover { background: #2B2B2B; color: var(--white); } }
.bw-nav:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; border-radius: 50%; }
.bw-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bw-url { flex: 1; min-width: 0; margin: 0 10px 0 8px; padding: 7px 14px; border-radius: 999px; background: #111; color: #C9CED6; font: 500 .8rem/1.2 var(--mono); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-count { flex: none; color: #7C838E; font: 500 .74rem/1 var(--mono); white-space: nowrap; }

/* the page: the old and new screenshots stacked in one cell, scrolled by you. Touch screens scroll it with a press and
   hold (build.js), so a swipe past the window still scrolls the page; mice and trackpads scroll it directly */
.bw-view {
  position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; background: var(--panel); container-type: inline-size;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.bw-scroll { position: absolute; inset: 0; overflow: hidden; scrollbar-width: none; }
.bw-scroll::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .bw-scroll { overflow-y: auto; } }
.bw-scroll:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.bw-pages { display: grid; }
.bw-pages[hidden] { display: none; }
.bw-pages > picture { grid-area: 1 / 1; }
.bw-pages.in { animation: bw-in .35s ease; }
@keyframes bw-in { from { opacity: 0; } }
.bw-pages img { display: block; width: 100%; height: auto; -webkit-user-drag: none; pointer-events: none; }
/* MW Experiences' "before" is a laptop page only (his own screenshots of the old site, 12 Nov): on a phone it isn't
   drawn and the tab is one page. build.js decides "single" from what is shown. */
@media (max-width: 860px) { .bw-before.desk-only { display: none; } }

/* up next, at the foot of every site: a card the width of the window that opens the next tab. It sits above the amber
   line (z-index), so the line stops where the site ends. */
.bw-next {
  grid-area: 2 / 1; position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label key" "name key";
  align-items: center; gap: 8px 18px; width: 100%; padding: clamp(20px, 5cqw, 36px) clamp(18px, 5cqw, 40px) clamp(22px, 5.5cqw, 40px);
  border: 0; border-top: 1px solid #2A2A2A; background: #0A0A0A; color: var(--white); text-align: left; cursor: pointer; transition: background-color .2s ease;
}
.bn-label { grid-area: label; color: var(--smoke); font: 600 .8rem/1 var(--mono); }
.bn-name { grid-area: name; display: flex; align-items: center; gap: .45em; min-width: 0; font: 800 clamp(1.35rem, 6cqw, 2.4rem)/1.05 var(--display); letter-spacing: -0.03em; }
.bn-name .t-fav { width: .62em; height: .62em; border-radius: .17em; }
.bn-name .t-fav::after { inset: .17em; }
.bn-name .f-omwell::after { inset: 0; }
.bw-next kbd, .bw-next-site kbd { padding: 3px 7px 2px; border: 1.5px solid currentColor; border-radius: 4px; font: 700 .9rem/1 var(--mono); }
.bw-next kbd { grid-area: key; padding: 9px 12px 8px; font-size: 1.1rem; transition: color .2s ease; }
@media (hover: hover) { .bw-next:hover { background: #121212; } }
@media (hover: hover) { .bw-next:hover kbd { color: var(--amber); } }
.bw-next:focus-visible { outline: 2px solid var(--amber); outline-offset: -4px; border-radius: 0; }

/* the same move under the words, in the style of the site's Next up button */
.bw-next-site { margin-top: 30px; border: 0; cursor: pointer; }
.bw-next-site[hidden] { display: none; }  /* .next-go's display would otherwise beat [hidden] */
@media (hover: hover) { .bw-next-site:hover { background: var(--amber); } }
/* the after side has a ground of its own, so where the new page is shorter than the old one (MW Experiences) the old
   page doesn't show through on the after side */
.bw-after { background: var(--panel); clip-path: inset(0 0 0 calc(var(--s, .5) * 100%)); }
.bw.single .bw-after { clip-path: none; }
.bw-line {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 2px; background: var(--amber); box-shadow: 0 0 16px rgba(242, 165, 65, .8);
  transform: translateX(calc(var(--s, .5) * 100cqw - 1px)); pointer-events: none;
}
.bw-grip {
  position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: var(--black); border: 2px solid var(--amber); box-shadow: 0 6px 18px rgba(0, 0, 0, .6);
}
.bw-grip::before, .bw-grip::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.bw-grip::before { left: 5px; border-right-color: var(--amber); }
.bw-grip::after { right: 5px; border-left-color: var(--amber); }
.bw-view .r-tape { pointer-events: none; }
.bw-tag-before { top: 16px; left: 14px; transform: rotate(-3deg); }
.bw-tag-after { top: 16px; right: 22px; transform: rotate(3deg); }
.bw.before-only .bw-tag-after, .bw.after-only .bw-tag-before { opacity: 0; }
.bw.single .bw-line, .bw.single .r-tape, .bw.single .bw-range-label { display: none; }
.bw.lining .bw-view { cursor: ew-resize; }
.bw.grabbing .bw-view { cursor: grabbing; }
.bw.grabbing { box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 2px var(--amber); }

/* where you are on the page: a slim rail on the right; drag the thumb, or tap the rail, to jump */
.bw-rail { position: absolute; top: 8px; bottom: 8px; right: 0; z-index: 4; width: 18px; touch-action: none; cursor: pointer; }
.bw-rail::before { content: ""; position: absolute; top: 0; bottom: 0; right: 5px; width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.bw-thumb { position: absolute; top: 0; right: 4px; width: 5px; min-height: 28px; border-radius: 3px; background: rgba(255, 255, 255, .55); transition: background-color .2s ease; }
.bw-rail:hover .bw-thumb, .bw.grabbing .bw-thumb { background: var(--amber); }
.bw-rail[hidden] { display: none; }

.bw-range { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.bw:has(.bw-range:focus-visible) { box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 2px var(--amber); }

/* the apps: a chapter each, its screen on a dark card */
.app { padding-block: clamp(48px, 9vh, 100px) 0; }
.app .ch-text h3 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); letter-spacing: -0.03em; }
.app .ch-text p { max-width: 36em; margin-top: 14px; color: #D5D9E0; font-size: 1.05rem; }
.app .ch-text p b { color: var(--white); font-weight: 700; }
.app-shots { display: flex; gap: 14px; align-items: flex-start; justify-content: center; }
.app-shots figure { margin: 0; flex: 1 1 0; min-width: 0; border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 0 1px #2A2A2A; }
.app-shots figure.photo { flex: 0 1 420px; }
.app-shots img { display: block; width: 100%; height: auto; }
.app-shots figcaption { padding: 9px 12px; color: var(--smoke); font-size: .85rem; background: #141414; }

/* Dracula's station, a working copy under the words (12 Nov): the real player's layout, a bar, the time, restart and a
   big play button. The bar fills by transform; at the end it lights amber, because that play was heard to the end. */
.station { max-width: 400px; margin-top: 30px; padding: 26px 26px 22px; border-radius: 14px; background: #060606; box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 0 1px #262626; }
.station[hidden] { display: none; }
.st-bar { height: 6px; overflow: hidden; border-radius: 3px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #3A3A3A; }
.st-fill { display: block; height: 100%; background: #F2F0EB; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: background-color .4s ease; }
.station.ended .st-fill { background: var(--amber); box-shadow: 0 0 12px rgba(242, 165, 65, .8); }
.st-time { display: block; margin-top: 9px; color: #C9CED6; font: 500 .85rem/1 var(--mono); }
.st-buttons { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 8px; }
.st-restart, .st-play { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.st-restart { width: 48px; height: 48px; background: #0B0B0B; box-shadow: inset 0 0 0 1px #262626; color: #8A8F98; transition: color .2s ease; }
@media (hover: hover) { .st-restart:hover { color: var(--white); } }
.st-restart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-play { width: 76px; height: 76px; background: #F2F0EB; color: #0B0B0B; transition: transform .15s ease; }
.st-play:active { transform: scale(.95); }
.st-play svg { width: 30px; height: 30px; fill: currentColor; }
.st-play .st-i-play { margin-left: 4px; }
.st-play .st-i-pause, .station.playing .st-i-play { display: none; }
.station.playing .st-i-pause { display: block; }
.st-restart:focus-visible, .st-play:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 50%; }
.st-note { margin-top: 18px; min-height: 3.1em; color: #D5D9E0; font-size: .98rem; line-height: 1.55; text-align: center; text-wrap: balance; }
.station.ended .st-note { color: var(--white); }

/* Diablo Maple from all three sides (12 Nov): one device you tap through that takes the shape of the screen it shows,
   the guest's phone, the gate iPad, the event lead's laptop. A plain bezel (no notch), the screens stacked inside it;
   the open one slides in, the last one slides out, and when the shape changes the device dips out and back (opacity).
   Screens taller than their device pan down once open, the way you'd scroll. On a laptop the device sits under the
   words on a stage of one height, so a shape change never moves the controls: at the column's width the backend
   screens read at about 7 px; here at 11 to 14 (his brief: legibility decides). */
.dm-app { grid-template-columns: minmax(0, 1fr); row-gap: clamp(30px, 5vh, 48px); }
.dm-app .ch-text p { max-width: 40em; }
.dm { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Guest, Staff, Client: three keys on a vision mixer's bus, the one on air lit (amber means lit) */
.dm-views { display: inline-flex; gap: 6px; margin-bottom: 22px; padding: 6px; border-radius: 10px; background: #0C0C0C; box-shadow: inset 0 0 0 1px #262626; }
.dm-views[hidden] { display: none; }
.dm-view {
  min-width: 86px; height: 42px; padding: 0 16px; border: 0; border-radius: 6px; background: #1A1A1A; color: #C9CED6;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .55), inset 0 0 0 1px #2C2C2C; font: 700 .92rem/1 var(--display); cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.dm-view[aria-selected="true"] { background: var(--amber); color: #141414; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 16px rgba(242, 165, 65, .5); }
@media (hover: hover) { .dm-view:not([aria-selected="true"]):hover { background: #222; color: var(--white); } }
.dm-view:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.dm-stage { display: grid; place-items: center; width: 100%; height: 620px; }
.dm-device {
  position: relative; background: #0E0E0E; cursor: pointer; transition: opacity .16s ease;
  box-shadow: inset 0 0 0 1.5px #303030, inset 0 0 0 5px #0A0A0A, 0 30px 70px rgba(0, 0, 0, .65), 0 0 0 1px #050505;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.dm-device.swap { opacity: 0; }
.dm-device::before, .dm-device::after { content: ""; position: absolute; }
/* the guest's phone, with its side buttons */
.is-phone { width: 284px; padding: 11px; border-radius: 50px; }
.is-phone::before, .is-phone::after { width: 3px; border-radius: 2px; background: #262626; }
.is-phone::before { top: 22%; right: -3px; height: 13%; }
.is-phone::after { top: 18%; left: -3px; height: 18%; }
/* the gate iPad, landscape, its camera on the top edge */
.is-tablet { width: min(868px, 100%); padding: 14px; border-radius: 26px; background: #111; }
.is-tablet::before { top: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2A2A2A; }
/* a laptop: the lid with its camera, and the base under it */
.is-laptop { width: min(880px, 100% - 40px); padding: 12px 12px 14px; border-radius: 14px 14px 3px 3px; background: #131313; }
.is-laptop::before { top: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2A2A2A; }
.is-laptop::after { left: -5%; right: -5%; bottom: -13px; height: 13px; border-radius: 0 0 12px 12px; background: linear-gradient(#2E2E2E, #161616 55%, #0C0C0C); box-shadow: 0 1px 0 #3A3A3A inset; }
.dm-screen { position: relative; aspect-ratio: 1170 / 2532; overflow: hidden; border-radius: 40px; background: #1B0B34; }
.is-tablet .dm-screen { aspect-ratio: 3 / 2; border-radius: 12px; background: #0D0C11; }
.is-laptop .dm-screen { aspect-ratio: 16 / 10; border-radius: 3px; background: #0D0C11; }
.dm-shot { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; transform: translateX(16%); transition: opacity .32s ease, transform .42s cubic-bezier(.2, .8, .2, 1); }
.dm-shot.on { z-index: 1; opacity: 1; transform: none; }
.dm-shot.was { transform: translateX(-16%); }
.dm-shot img { display: block; width: 100%; height: auto; transform: translateY(0); transition: transform 1.6s cubic-bezier(.45, 0, .25, 1); -webkit-user-drag: none; pointer-events: none; }
.is-laptop .dm-shot img { transition-duration: 2.4s; }  /* a report is read, not glanced at: a slower scroll */
.bg-dark { background: #0D0C11; }
.bg-purple { background: #1B0A36; }
.bg-white { background: #FFF; }
/* only the open side's screens are drawn, so the staff and client pictures (lazy) load when that side is picked */
.dm-shot:not([data-view="guest"]), .dm:not(.view-guest) .dm-shot[data-view="guest"] { display: none; }
.dm.view-staff .dm-shot[data-view="staff"], .dm.view-client .dm-shot[data-view="client"] { display: block; }
/* on the landing screen's empty middle, clear of the event's name and the button */
.dm-hint { top: 60%; right: -30px; z-index: 2; font-size: 1.15rem; transform: rotate(6deg); pointer-events: none; }
.dm.used .dm-hint, .dm:not(.view-guest) .dm-hint { opacity: 0; transform: rotate(6deg) translateY(-10px); }
/* every staff and client screen is test data, and says so on the device (the show hasn't happened) */
.dm-test { top: -14px; right: -16px; z-index: 3; font-size: 1.15rem; opacity: 0; transform: rotate(4deg) translateY(-8px); pointer-events: none; }
.dm.view-staff .dm-test, .dm.view-client .dm-test { opacity: 1; transform: rotate(4deg); }
.dm-cap { width: min(560px, 100%); min-height: 3.3em; margin-top: 26px; color: #D5D9E0; font-size: 1rem; line-height: 1.6; text-align: center; text-wrap: balance; }
.dm-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; max-width: 100%; margin-top: 10px; }  /* Next drops under the dots on the narrowest phones */
.dm-ctrl[hidden], .dm-dots[hidden] { display: none; }
.dm-dots { display: flex; }
.dm-dots button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.dm-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3A3A3A; transition: background-color .2s ease, transform .2s ease; }
@media (hover: hover) { .dm-dots button:hover i { background: #8A8F98; } }
.dm-dots button[aria-current="step"] i { background: var(--amber); box-shadow: 0 0 8px rgba(242, 165, 65, .7); transform: scale(1.15); }
.dm-dots button:focus-visible { outline: 2px solid var(--amber); outline-offset: -6px; border-radius: 50%; }
.dm-next {
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 16px; border: 1px solid #3A3A3A; border-radius: 8px;
  background: transparent; color: var(--white); font: 700 .92rem/1 var(--display); cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.dm-next kbd { padding: 3px 6px 2px; border: 1.5px solid currentColor; border-radius: 4px; font: 700 .8rem/1 var(--mono); }
@media (hover: hover) { .dm-next:hover { border-color: var(--amber); } }
@media (hover: hover) { .dm-next:hover kbd { color: var(--amber); } }

/* On the side: a terminal (12 Nov, his first idea for the page). The browser window's family: the same corner, shadow
   and three dots. The prompt line, then the tools listed on the left and the picked one's output on the right; on a
   phone the list sits above the output. The picked row is lit (amber marker), like the open tab and the cue on go. */
.term-wrap { padding-block: clamp(40px, 7vh, 80px) 0; }
.term { border-radius: 10px; overflow: hidden; background: #0B0B0B; box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px #2A2A2A; }
.term-top { position: relative; display: flex; align-items: center; height: 44px; padding: 0 16px; background: #161616; border-bottom: 1px solid #242424; }
.term-title { position: absolute; left: 50%; transform: translateX(-50%); color: var(--smoke); font: 500 .8rem/1 var(--mono); white-space: nowrap; }
.term-prompt { padding: 18px clamp(16px, 2.4vw, 28px) 14px; border-bottom: 1px solid #1C1C1C; color: #C9CED6; font: 500 .9rem/1.4 var(--mono); white-space: nowrap; overflow: hidden; }
.tp-user { color: var(--white); }
.tp-path { color: var(--smoke); }
.tp-cmd { color: var(--white); }
.tp-caret { display: inline-block; width: .6em; height: 1.1em; margin-left: 3px; vertical-align: -.2em; background: var(--amber); animation: caret 1s steps(1) infinite; }
.term.typing .tp-caret { animation: none; }
.term-panes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.term-list { display: flex; flex-direction: column; gap: 2px; padding: 14px clamp(8px, 1vw, 12px); border-right: 1px solid #1C1C1C; }
.term-row {
  position: relative; display: grid; gap: 5px; width: 100%; min-height: 44px; padding: 12px 14px 12px 28px; border: 0; border-radius: 6px;
  background: transparent; color: #C9CED6; text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.term-row::before { content: ""; position: absolute; top: 17px; left: 11px; width: 7px; height: 7px; border-radius: 50%; background: #2E2E2E; transition: background-color .15s ease; }
@media (hover: hover) { .term-row:hover { background: #141414; color: var(--white); } }
.term-row[aria-selected="true"] { background: #171717; color: var(--white); }
.term-row[aria-selected="true"]::before { background: var(--amber); box-shadow: 0 0 8px rgba(242, 165, 65, .8); }
.term-row:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.tr-name { font: 600 .95rem/1.2 var(--mono); }
.tr-what { color: var(--smoke); font-size: .95rem; line-height: 1.35; }
.term-row[aria-selected="true"] .tr-what { color: #C9CED6; }
.term-outs { min-width: 0; padding: clamp(20px, 2.6vw, 34px) clamp(18px, 2.8vw, 38px) clamp(24px, 3vw, 38px); }
/* without the script every output shows, one under another; with it (.live) they share one cell, so on a laptop the
   window keeps the tallest one's height and doesn't jump as you pick */
.term-out:not([hidden]) ~ .term-out:not([hidden]) { margin-top: 30px; }
.term.live .term-outs { display: grid; }
.term.live .term-out { grid-area: 1 / 1; }
.term.live .term-out[hidden] { display: block; visibility: hidden; }
.term-out:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }
.term-out p { max-width: 36em; color: #D5D9E0; font-size: 1.05rem; }
.term-out p + p { margin-top: 14px; }
.term-out p b { color: var(--white); font-weight: 700; }
.term-fig { margin: 24px 0 0; max-width: 640px; border-radius: 10px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px #262626; }
.term-fig img { display: block; width: 100%; height: auto; }
.term-fig figcaption { padding: 9px 12px; color: var(--smoke); font-size: .85rem; background: #141414; }

@media (max-width: 860px) {
  .sites { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bw { order: -1; width: 100%; max-width: 420px; margin-inline: auto; }
  .bw-view { aspect-ratio: 390 / 600; }
  .bw-tabs { gap: 0; height: 50px; padding: 0 6px; }
  .bw-dots { display: none; }
  .bw-tablist { gap: 3px; }
  .bw-tab { gap: 6px; padding: 0 4px 0 8px; font-size: .74rem; }
  .bw-tab .t-fav { width: 12px; height: 12px; border-radius: 3.5px; }
  .bw-tab .t-fav::after { inset: 3.5px; }
  .bw-tab .f-omwell::after { inset: 0; }
  .bw-tab .t-long { display: none; }
  .bw-tab .t-short { display: block; }
  .bw-bar { padding: 0 10px 0 4px; }
  .bw-url { margin: 0 8px 0 4px; padding: 7px 10px; font-size: .76rem; }
  .app-shots { flex-wrap: wrap; }
  /* on a phone the stage is as tall as its device, and the dots and Next sit above it, under Guest, Staff, Client, so
     Next stays put while the device changes shape below it (a fixed stage left a blank band under the wide shapes) */
  .dm-stage { order: 2; height: auto; }
  .dm-ctrl { order: 1; margin: 0 0 16px; }
  .dm-cap { order: 3; margin-top: 20px; }
  .is-phone { width: min(252px, 66vw); }
  .is-tablet { padding: 9px; border-radius: 18px; }
  .is-tablet .dm-screen { border-radius: 8px; }
  .is-laptop { width: calc(100% - 28px); padding: 7px 7px 9px; border-radius: 9px 9px 2px 2px; }
  .is-laptop::after { bottom: -9px; height: 9px; }
  .dm-hint { right: -14px; font-size: 1.05rem; }
  .dm-test { top: -12px; right: -8px; font-size: 1rem; }
  .dm-views { margin-bottom: 16px; }
  .dm-view { min-width: 0; padding: 0 14px; }
  .term .bw-dots { display: flex; }
  .term.live .term-out[hidden] { display: none; }
  .term-top { height: 40px; }
  .term-title { font-size: .74rem; }
  .term-prompt { padding: 14px 16px 12px; font-size: .8rem; }
  .term-panes { grid-template-columns: minmax(0, 1fr); }
  .term-list { padding: 10px 8px; border-right: 0; border-bottom: 1px solid #1C1C1C; }
  .term-row { gap: 3px; padding: 10px 12px 10px 28px; }
  .term-row::before { top: 15px; }
  .tr-name { font-size: .9rem; }
  .tr-what { font-size: .9rem; }
  .term-outs { padding: 20px 16px 24px; }
}
/* small phones (12 Nov): the tab names keep their room, and the prompt drops "fee@home:" so the command isn't cut off */
@media (max-width: 400px) {
  .bw-tabs { padding: 0 4px; }
  .bw-tablist { gap: 2px; }
  .bw-tab { gap: 5px; padding: 0 2px 0 6px; font-size: .7rem; }
  .bw-tab span { padding-right: 6px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 8px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 8px), transparent); }
  .bw-tab .t-fav { width: 10px; height: 10px; border-radius: 3px; }
  .bw-tab .t-fav::after { inset: 3px; }
  .bw-tab .f-omwell::after { inset: 0; }
  .bw-tab.fresh .t-fav::before { top: -3px; right: -3px; width: 7px; height: 7px; }
  .tp-user { display: none; }
}