/* SOS, the site. White paper, ink type, and one round dot of color. Built by dev/site/build.js. */
@font-face { font-family: 'Mona Sans'; src: url(/fonts/mona-sans.woff2) format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
:root { --ink: #121212; --ink2: #5B5F66; --line: #E1E4E8; --soft: #F4F5F6; --paper: #fff; --buoy: #36A9FF; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 450 17px/1.55 'Mona Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, li, a, span { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
a { color: inherit; text-underline-offset: 3px; }
svg { display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.lock { display: block; }
.lock svg { height: 28px; width: auto; overflow: visible; }
.top nav { display: flex; align-items: center; gap: 24px; }
.top .link { text-decoration: none; font-weight: 500; font-size: 15.5px; }
.top .link:hover, .top .link.on { text-decoration: underline; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15.5px/1 'Mona Sans', system-ui, sans-serif; text-decoration: none; white-space: nowrap; transition: transform .16s cubic-bezier(.2, .8, .2, 1); }
.btn:hover { transform: translateY(-1px); } .btn:active { transform: scale(.98); }
.btn .cr { display: block; width: 17px; height: 17px; } .btn .cr svg { width: 100%; height: 100%; }
.btn.sm { height: 38px; padding: 0 15px; font-size: 14.5px; gap: 8px; } .btn.sm .cr { width: 15px; height: 15px; }

/* Bowie greets you. He is the page: in the middle, where the eye lands, with what he says right under him and your
   two answers under that, all on one line down the center. He drops in, settles the way a buoy does, and looks at
   you. His float, his eye and his blink are worked out in buoy.js from weight and spring, so there is no loop here. */
.greet { padding: 0; }
/* He is a buoy, so the page is the sea. A flat horizon, a low sun, and water he floats in. His words sit above him
   in the sky and stack upward from him. The water is drawn by the page script, so it is here only as two layers,
   one behind him and one in front that covers the part of him that is under. */
.ocean { position: relative; min-height: max(600px, calc(100vh - 72px)); overflow: hidden; overflow-anchor: none; }
.ocean .wrap { position: relative; z-index: 2; }
/* the water is pinned to the bottom of the sea, so when the shop comes up and the sea gets taller it stays put */
.sea { position: absolute; left: 0; bottom: 0; width: 100%; height: max(600px, calc(100vh - 72px)); pointer-events: none; }
.sea.back { z-index: 0; } .sea.front { z-index: 3; }
.greet .first { display: flex; flex-direction: column; align-items: center; min-height: max(600px, calc(100vh - 72px)); padding-bottom: clamp(140px, 27vh, 290px); }
.greet .talk { flex: 1; justify-content: flex-end; max-width: 620px; padding: 16px 0 26px; }
/* The shop's browser. It waits under the water and comes up through it when the visitor asks to see Bowie work.
   Its bottom edge stays in the water. */
.rise { position: relative; z-index: 1; flex: none; width: 100%; height: 0; overflow: hidden; }
.rise.up { height: auto; overflow: visible; }
/* the seat is only a place. It never takes a press, so nothing under it is blocked when he is away. */
.seat { position: relative; z-index: 2; pointer-events: none; }
.seat .bw { pointer-events: auto; }
.greet .cold { visibility: hidden; animation: none; }
.seat { flex: none; width: 144px; height: 144px; }
.bw { position: relative; z-index: 3; flex: none; width: 144px; height: 144px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bw.gone, .bw.gone * { visibility: hidden !important; }
/* when the sample is done he comes down to what the team gets and sits beside it, with his words next to him */
.after { display: flex; align-items: flex-start; gap: 16px; min-height: 236px; padding: 36px 0 0; scroll-margin-top: 8px; }
.after .spot { flex: none; width: 72px; height: 72px; }
.after .bw { width: 72px; height: 72px; }
.after .talk { align-items: flex-start; padding-top: 10px; }
.after .log { align-items: flex-start; }
.after .m { text-align: left; transform-origin: 0 0; }
.after .m:first-child { border-top-left-radius: 6px; }
.after .pills { justify-content: flex-start; }
.bw.fly { position: fixed; left: 0; top: 0; z-index: 60; margin: 0; pointer-events: none; will-change: transform; }
.bw .bob { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
/* he is round, a hair off a compass circle, and his eye sits a hair off the middle */
.bw .dot { position: relative; display: block; width: 100%; height: 100%; border-radius: 51.5% 48.5% 51% 49% / 49% 51.5% 48.5% 51%; background: var(--buoy); }
.bw .eye { position: absolute; left: 27.5%; top: 26%; width: 46%; height: 46%; border-radius: 49% 51% 48.5% 51.5% / 51% 49% 51% 49%; background: #fff; overflow: hidden; }
.bw .pup { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; border-radius: 51% 49% 51% 49% / 51.5% 49% 51% 48.5%; background: var(--ink); }
.talk { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; min-width: 0; }
.log { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.m { max-width: 30em; text-align: center; text-wrap: balance; margin: 0; padding: 14px 20px; border-radius: 22px; background: var(--paper); color: var(--ink); font-size: 19px; line-height: 1.45; font-weight: 470; letter-spacing: -.004em; box-shadow: 0 0 0 .5px rgba(18, 18, 18, .12), 0 2px 10px rgba(0,0,0,.10); animation: said .32s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: 50% 0; }
h1.m { font-size: 21px; font-weight: 520; }
.m.me { align-self: flex-end; background: #ECEDEF; box-shadow: none; transform-origin: 100% 0; }
@keyframes said { from { opacity: 0; transform: translateY(4px) scale(.94); } to { opacity: 1; transform: none; } }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.pill { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 20px; border: 0; border-radius: 22px; background: var(--paper); color: var(--ink); font: 540 16.5px/1.2 'Mona Sans', system-ui, sans-serif; text-decoration: none; cursor: pointer; box-shadow: 0 0 0 .5px rgba(18, 18, 18, .12), 0 1px 3px rgba(0,0,0,.08); animation: said .32s cubic-bezier(.2, 1.4, .4, 1) both; transition: transform .16s cubic-bezier(.2, .8, .2, 1); }
.pill:nth-child(2) { animation-delay: .07s; }
.pills.cold .pill { animation: none; }
.pill.late { animation-delay: .45s; } .pill.late:nth-child(2) { animation-delay: .52s; }
.pill:hover { transform: translateY(-1px); } .pill:active { transform: scale(.97); }
/* the main answer is solid and the rest are quiet, the same ranking Bowie uses on a page */
.pill.yes { background: var(--ink); color: #fff; font-weight: 620; box-shadow: 0 2px 10px rgba(0,0,0,.10); }
.pill:not(.yes) { color: var(--ink2); }
.pill .cr { display: block; width: 16px; height: 16px; } .pill .cr svg { width: 100%; height: 100%; }
/* where to press him: a browser's top bar with Bowie in it, and his own loop around himself */
.where { width: min(100%, 440px); margin: 4px auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); animation: said .32s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: .35s; transform-origin: 50% 0; }
.where .chrome { border-radius: 14px; border-bottom: 0; }
.where .spot { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; }
.where .ring { position: absolute; left: -20px; top: -12px; width: 76px; height: 60px; overflow: visible; }
.where .ring path { fill: none; stroke: var(--buoy); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawn .6s cubic-bezier(.3, .1, .2, 1) .9s forwards; }
@keyframes drawn { to { stroke-dashoffset: 0; } }
/* the sample, in a browser of its own. Bowie leaves from the toolbar button, so the sample may draw over the bar. */
.browser { position: relative; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.chrome { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; background: #ECEEF1; border-bottom: 1px solid #D9DCE1; }
.chrome .wd { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #C9CDD3; }
.chrome .omni { flex: 1; min-width: 0; height: 32px; margin: 0 8px 0 12px; padding: 0 16px; border-radius: 16px; background: #fff; color: #5F6368; font: 500 13px/32px 'Mona Sans', system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chrome .av { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #C9CDD3; }
.sosb { flex: none; position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin-right: 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sosb:hover { background: #DDE0E5; }
/* his spot in the toolbar is empty until he is in it: when he is out on the page, he is not also up here */
.sosb .face { transition: opacity .12s ease; }
.sosb .face, .sosb .face svg { display: block; width: 26px; height: 26px; }
.sosb.empty, .sosb.empty:hover { background: transparent; }
.sosb.empty::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #B4B9C1; }
.sosb.empty .face { opacity: 0; }
.sosb:active .face { transform: scale(.86); }
.sosb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#stage { position: relative; z-index: 2; }
#stage .hrh-stage { border: 0; border-radius: 0; overflow: visible; }
#stage .hrh-screen { overflow: hidden; }
#stage .hrh-result { display: none; }
#stage .hrh-result.full { display: block; padding: 0 28px 28px; }
#stage .hrh-result-top { padding-top: 44px; }

.band { padding: 72px 0; border-top: 1px solid var(--line); }
.band h2 { margin: 0; font-size: clamp(22px, 2.3vw, 26px); line-height: 1.2; font-weight: 620; letter-spacing: -.012em; }
.band p { margin: 8px 0 0; color: var(--ink2); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.three h2 { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.how figure { display: grid; grid-template-rows: 1fr auto; gap: 16px; margin: 0; }
.how .sx-board { min-height: 250px; }
.how figcaption p { margin-top: 8px; font-size: 17px; }

/* the system. These are still drawings of the real bubbles, built from the same numbers. */
.sx { --fill:rgba(255,255,255,.93);--tx:#121212;--mu:rgba(18,18,18,.66);--ln:rgba(18,18,18,.10);--fd:rgba(18,18,18,.06);--solid:#121212;--onsolid:#FFFFFF;--mine:rgba(228,228,225,.9); --hue: #36A9FF; font-family: "Mona Sans", system-ui, sans-serif; }
.sx.dk { --fill:rgba(32,32,35,.72);--tx:#F4F4F2;--mu:rgba(244,244,242,.72);--ln:rgba(255,255,255,.16);--fd:rgba(255,255,255,.10);--solid:#F4F4F2;--onsolid:#121212;--mine:rgba(84,84,90,.86); }
.sx-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.sx-board { position: relative; min-height: 330px; padding: 22px 20px 24px; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sx-board.dk { background: #101114; box-shadow: none; }
/* a hint of the page underneath, so the glass has something to sit on */
.sx-board::before { content: ""; position: absolute; inset: 0; opacity: .5; background:
  linear-gradient(#E9ECEF, #E9ECEF) 20px 26px / 46% 14px no-repeat, linear-gradient(#F0F2F4, #F0F2F4) 20px 62px / 78% 34px no-repeat,
  linear-gradient(#F0F2F4, #F0F2F4) 20px 110px / 78% 34px no-repeat, linear-gradient(#F0F2F4, #F0F2F4) 20px 158px / 36% 34px no-repeat,
  linear-gradient(#D9EADF, #D9EADF) 20px 214px / 30% 38px no-repeat; }
.sx-board.dk::before { opacity: .14; }
.sx-col { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 344px; margin-left: 46px; }
.sx-bowie { position: absolute; left: -46px; top: 2px; width: 38px; height: 38px; }
.sx-m { max-width: 100%; margin: 0; padding: 11px 15px; border-radius: 20px; color: var(--tx); font-size: 16px; line-height: 1.45; font-weight: 470; letter-spacing: -.003em;
  background: var(--fill); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 0 0 .5px var(--ln), 0 2px 10px rgba(0,0,0,.10); }
.sx-m.me { align-self: flex-end; max-width: 92%; background: var(--mine); box-shadow: 0 0 0 .5px var(--ln), 0 1px 3px rgba(0,0,0,.08); }
.sx-m.me span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.sx-m.me b { display: block; margin-top: 5px; color: var(--mu); font-size: 13px; font-weight: 600; }
.sx-m.first { border-top-left-radius: 6px; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sx-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px; border-radius: 17px; color: var(--tx); font-size: 14.5px; font-weight: 540; white-space: nowrap;
  background: var(--fill); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 0 0 .5px var(--ln), 0 2px 10px rgba(0,0,0,.10); }
.sx-chip.yes { font-weight: 600; box-shadow: 0 0 0 1px rgba(18,18,18,.45), 0 1px 3px rgba(0,0,0,.08); }
.sx.dk .sx-chip.yes { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.08); }
.sx-chip svg { flex: none; width: 16px; height: 16px; }
.sx-chip.in { background: var(--fd); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sx-bar { display: flex; align-items: center; gap: 2px; align-self: stretch; margin-top: 8px; padding: 3px 3px 3px 16px; border-radius: 22px; color: var(--mu); font-size: 16px; font-weight: 470;
  background: var(--fill); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 0 0 .5px var(--ln), 0 2px 10px rgba(0,0,0,.10); }
.sx-bar span { flex: 1; }
.sx-bar i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--mu); }
.sx-bar svg { width: 17px; height: 17px; }
.sx-bar i.go svg { transform: rotate(-90deg); width: 16px; height: 16px; }
.sx-shot { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; background: #fff; box-shadow: 0 0 0 .5px rgba(18,18,18,.16), 0 12px 30px rgba(0,0,0,.24); transform: rotate(-1.2deg); margin-bottom: 6px; }
.sx-pkt { margin: 12px 5px 0; max-width: none; color: var(--tx); font-size: 16px; line-height: 1.45; font-weight: 470; }
.sx-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 3px 0; }
.sx-safe { display: flex; align-items: center; gap: 6px; margin: 2px 6px 0; font-size: 13px; font-weight: 500; color: var(--mu); }
.sx-safe svg { flex: none; width: 14px; height: 14px; }
.sx-page { position: relative; display: grid; gap: 8px; padding: 18px 18px 0; border-radius: 10px; background: #fff; color: #121212; box-shadow: 0 0 0 .5px rgba(18,18,18,.16), 0 12px 30px rgba(0,0,0,.24); }
.sx-ptop { display: flex; justify-content: space-between; font-size: 11px; color: #5B5F66; } .sx-ptop b { color: #121212; }
.sx-page h4 { margin: 4px 0 2px; font-size: 21px; line-height: 1.15; font-weight: 720; letter-spacing: -.01em; }
.sx-page small { font-size: 11px; color: #5B5F66; } .sx-page p { margin: 0; max-width: none; font-size: 12.5px; line-height: 1.45; color: #121212; }
.sx-page dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 4px 0 0; font-size: 11.5px; } .sx-page dt { color: #5B5F66; } .sx-page dd { margin: 0; font-weight: 550; }
.sx-src { margin: 14px 0 0; max-width: none; font-size: 14px; } .sx-src a { color: var(--ink); font-weight: 600; }
.sx-page u { display: block; height: 70px; margin-top: 4px; border-radius: 6px 6px 0 0; background: #F3F5F4; box-shadow: inset 0 0 0 1px #E3E6E8; }
.sx-board.plain::before { display: none; } .sx-board.plain { background: #F4F5F6; }
.sx-cap { position: absolute; left: 22px; bottom: 18px; margin: 0; max-width: 46%; font-size: 13px; font-weight: 600; color: #5B5F66; }

.sx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sx-card { border-radius: 22px; padding: 24px 24px 22px; box-shadow: inset 0 0 0 1px var(--line); }
.sx-card h3 { margin: 0 0 14px; font-size: 13px; font-weight: 650; color: #5B5F66; }
.sx-type { display: grid; gap: 14px; }
.sx-type div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sx-type small { flex: none; font-size: 12.5px; color: #5B5F66; font-variant-numeric: tabular-nums; }
.sx-hues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sx-hue { display: grid; gap: 6px; font-size: 12.5px; color: #5B5F66; }
.sx-hue i { display: block; height: 44px; border-radius: 22px; }
.sx-hue b { color: var(--ink); font-weight: 650; }
.sx-spec { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
.sx-spec dt { color: #5B5F66; } .sx-spec dd { margin: 0; font-variant-numeric: tabular-nums; }
.sx-voice { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; }
.sx-voice th { text-align: left; padding: 0 16px 10px 0; font-size: 13px; font-weight: 650; color: #5B5F66; }
.sx-voice td { vertical-align: top; padding: 12px 16px 12px 0; border-top: 1px solid var(--line); }
.sx-voice td:first-child { color: #5B5F66; width: 19%; }
.sx-lines { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sx-alts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sx-alt { position: relative; min-height: 360px; padding: 22px; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sx-panel { width: 340px; max-width: 100%; margin-left: 46px; padding: 16px; border-radius: 22px; display: grid; gap: 12px; color: var(--tx);
  background: var(--fill); box-shadow: 0 0 0 .5px var(--ln), 0 2px 10px rgba(0,0,0,.10); position: relative; }
.sx-panel p { margin: 0; max-width: none; color: var(--tx); font-size: 16px; line-height: 1.45; font-weight: 470; }
.sx-panel .sx-chip, .sx-panel .sx-bar { box-shadow: none; background: var(--fd); }
.sx-dock { position: absolute; right: 22px; bottom: 22px; width: 320px; max-width: calc(100% - 44px); border-radius: 18px; overflow: hidden; color: var(--tx); background: #fff; box-shadow: 0 0 0 .5px var(--ln), 0 2px 10px rgba(0,0,0,.10); }
.sx-dock header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 650; }
.sx-dock header svg { width: 26px; height: 26px; }
.sx-dock .in { display: grid; gap: 8px; padding: 14px; justify-items: start; }
.sx-dock .sx-m { box-shadow: none; background: var(--fd); border-radius: 16px; font-size: 15px; }
.sx-dock .sx-chip { box-shadow: inset 0 0 0 1px var(--ln); background: #fff; height: 34px; font-size: 14px; }
.sx-dock .sx-chip.yes { box-shadow: inset 0 0 0 1px rgba(18,18,18,.45); }
.sx-dock .sx-bar { box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; background: #fff; padding: 6px 8px 6px 14px; }
.sx-refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: #5B5F66; }
.sx-refs a { color: var(--ink); font-weight: 600; }
.sx-trust { display: grid; gap: 10px; margin: 0; padding: 0 0 0 16px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
@media (max-width: 960px) { .sx-boards, .sx-grid, .sx-alts, .sx-refs { grid-template-columns: 1fr; } .sx-voice td:first-child { width: auto; } }

.two { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.more { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--ink); }
.points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ink2); }
.points b { color: var(--ink); font-weight: 600; }
.note { max-width: 52ch; }
.page .note h1 { margin: 0 0 24px; }
.note p { margin: 0 0 12px; color: var(--ink); line-height: 1.55; }
.note .sig { margin-top: 16px; font-weight: 600; }
.last { text-align: center; }

/* The board. The unit is a problem: one button on one page of one site. The feed lists them, and each opens to its
   own page with who hit it, what people tried, whether it is still happening and where to take it. People show up
   as Bowies, since everyone on the board got here by sending him out. Color is only ever Bowie. */
.board h1 { margin: 0; font-size: clamp(30px, 3.7vw, 44px); line-height: 1.14; font-weight: 620; letter-spacing: -.02em; }
.board .say { margin: 16px 0 0; max-width: 52ch; font-size: 19px; color: var(--ink2); }
.sampled { margin: 8px 0 0; font-size: 14.5px; color: var(--ink2); }
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; margin: 40px 0 0; border-bottom: 1px solid var(--line); }
.tabs button { position: relative; padding: 0 0 12px; border: 0; background: none; color: var(--ink2); font: 560 15.5px/1.2 'Mona Sans', system-ui, sans-serif; cursor: pointer; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed=true] { color: var(--ink); }
.tabs button[aria-pressed=true]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.tabs button i { margin-left: 7px; font-style: normal; font-weight: 500; color: var(--ink2); font-variant-numeric: tabular-nums; }
.find { position: relative; display: block; flex: 0 1 280px; margin: 0 0 10px auto; }
.find svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--ink2); pointer-events: none; }
.find input { width: 100%; height: 40px; padding: 0 14px 0 38px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); color: var(--ink); font: 500 15.5px/1 'Mona Sans', system-ui, sans-serif; }
.find input::placeholder { color: var(--ink2); }
.find input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }

.st { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 560; color: var(--ink2); white-space: nowrap; }
.st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #C3C7CD; }
.st.now { color: var(--ink); }
.st.now::before { background: var(--buoy); box-shadow: 0 0 0 4px color-mix(in srgb, var(--buoy) 22%, transparent); }
.st.fixed svg { width: 14px; height: 14px; margin-right: -2px; }
.st.fixed::before { display: none; }
.mk { flex: none; display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }
.mk svg, .mk img { display: block; width: 100%; height: 100%; }

.feed { margin: 0; padding: 0; list-style: none; }
.prob { display: grid; grid-template-columns: minmax(0, 1fr) 184px; gap: 8px 40px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.prob:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.prob h2 { margin: 8px 0 0; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.25; font-weight: 620; letter-spacing: -.01em; overflow-wrap: anywhere; }
.prob .loc { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 15.5px; color: var(--ink2); min-width: 0; }
.prob .loc b { flex: 0 1 auto; min-width: 0; color: var(--ink); font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prob .loc span { flex: 0 2 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prob .help { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 15.5px; }
.prob .help svg { flex: none; width: 15px; height: 15px; color: var(--buoy); }
.prob .help.no { color: var(--ink2); }
.prob .side { display: grid; justify-items: end; gap: 10px; }
.ppl { display: flex; align-items: center; gap: 10px; }
.ppl b { font-size: 24px; line-height: 1; font-weight: 620; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ppl span { font-size: 13.5px; line-height: 1.2; color: var(--ink2); }
.crowd { display: flex; }
.crowd svg { display: block; width: 22px; height: 22px; margin-left: -7px; border-radius: 50%; box-shadow: 0 0 0 2px var(--paper); }
.crowd svg:first-child { margin-left: 0; }
.days { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 24px; }
.days i { flex: 1 1 0; min-height: 2px; border-radius: 1px; background: var(--line); }
.days i.on { background: var(--ink); }
.none { margin: 0; padding: 40px 0; color: var(--ink2); border-bottom: 1px solid var(--line); }
.loopline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin: 64px 0 0; counter-reset: n; }
.loopline div { counter-increment: n; }
.loopline h2 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; }
.loopline h2::before { content: counter(n) ". "; color: var(--ink2); font-weight: 450; }
.loopline p { margin: 0; font-size: 15.5px; color: var(--ink2); }
.owner { margin: 40px 0 0; font-size: 15.5px; color: var(--ink2); }
.owner a { color: var(--ink); }

.goback { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; font-size: 15px; font-weight: 560; color: var(--ink2); text-decoration: none; }
.goback:hover { color: var(--ink); }
.goback svg { width: 15px; height: 15px; }
.one .top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 16px; }
.one .top b { font-weight: 600; }
.one h1 { margin: 12px 0 0; max-width: 22ch; }
.one .addr { margin: 12px 0 0; font-size: 17px; color: var(--ink2); overflow-wrap: anywhere; }
.one .cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px 72px; margin: 40px 0 0; align-items: start; }
.one .cols h2, .also > h2 { margin: 0; font-size: 17.5px; line-height: 1.3; font-weight: 620; }
.hitby { display: flex; align-items: center; gap: 16px 22px; }
.hitby b { font-size: 44px; line-height: 1; font-weight: 620; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hitby p { min-width: 0; margin: 0; font-size: 17px; line-height: 1.35; }
.hitby p span { display: block; color: var(--ink2); }
.cols .crowd { flex-wrap: wrap; margin: 16px 0 0; row-gap: 6px; }
.cols .crowd svg { width: 30px; height: 30px; margin-left: -8px; box-shadow: 0 0 0 2px var(--paper); }
.cols .crowd svg:first-child { margin-left: 0; }
.cols .days { height: 48px; gap: 3px; margin: 24px 0 0; }
.cols .days i { border-radius: 2px; }
.dayends { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 14px; color: var(--ink2); }
.tried { margin: 40px 0 0; }
.tried ul { margin: 12px 0 0; padding: 0; list-style: none; }
.tried li { padding: 14px 0; border-top: 1px solid var(--line); }
.tried li:last-child { border-bottom: 1px solid var(--line); }
.tried .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 16.5px; }
.tried .row b { font-weight: 560; }
.tried .row span { color: var(--ink2); font-size: 15px; white-space: nowrap; }
.tried .bar { height: 6px; margin: 10px 0 0; border-radius: 4px; background: var(--soft); overflow: hidden; }
.tried .bar i { display: block; height: 100%; border-radius: 4px; background: var(--buoy); }
.tried .empty { margin: 14px 0 0; color: var(--ink2); }
.rail > div { padding: 24px 0; border-top: 1px solid var(--line); }
.rail > div:first-child { padding-top: 0; border-top: 0; }
.rail p { margin: 6px 0 0; font-size: 15.5px; color: var(--ink2); overflow-wrap: anywhere; }
.rail p b { color: var(--ink); font-weight: 560; }
.rail .btn { margin: 16px 0 0; }
.rail .go { display: inline-block; margin: 8px 0 0; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.also { margin: 72px 0 0; }
.also .feed { margin-top: 10px; border-top: 1px solid var(--line); }
.mini .prob { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; padding: 18px 0; }
.mini .prob:first-child { padding-top: 0; }
.mini .prob h2 { margin: 0; font-size: 17px; letter-spacing: 0; font-weight: 600; }
.mini .prob .loc { margin-top: 5px; font-size: 15px; }
.mini .prob .help { margin-top: 6px; font-size: 15px; }
.mini .ppl b { font-size: 19px; }
.mini .ppl > span:not(.crowd), .mini .days, .mini .st { display: none; }
.mini .crowd svg { width: 22px; height: 22px; margin-left: -7px; }
.mini .sampled { margin: 14px 0 0; font-size: 14.5px; }
.quiet { margin: 44px 0 0; padding: 26px 24px; border-radius: 18px; background: var(--soft); color: var(--ink2); font-size: 17px; }
.quiet b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 650; }
@media (max-width: 900px) {
  .one .cols { grid-template-columns: 1fr; gap: 48px; margin-top: 40px; }
  .loopline { grid-template-columns: 1fr; margin-top: 56px; }
}
@media (max-width: 700px) {
  .prob { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 0; }
  .prob .side { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 18px; }
  .prob .days { max-width: 180px; justify-self: end; }
  .find { order: -1; flex-basis: 100%; margin: 0 0 16px; }
  .board .say { font-size: 18px; }
  .tabs { margin-top: 32px; gap: 6px 22px; flex-wrap: wrap; }
  .tabs button { white-space: nowrap; }
}
@media (max-width: 400px) { .tabs { gap: 6px 16px; } .tabs button { font-size: 14.5px; } .tabs button i { margin-left: 5px; } }
.tally { margin: 0 0 6px; font-size: 15px; color: var(--ink2); }

.page { padding: 56px 0 96px; }
.page h1 { margin: 0; font-size: clamp(30px, 3.7vw, 44px); line-height: 1.14; font-weight: 620; letter-spacing: -.02em; }
.lede { margin: 16px 0 40px; max-width: 56ch; font-size: 19px; color: var(--ink2); }
.page .board { margin: 0 0 72px; min-height: 46vh; }
.qa section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 16px 48px; padding: 32px 0; border-top: 1px solid var(--line); }
.qa h2 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 620; }
.qa p, .qa ul { margin: 0 0 14px; color: #33363B; }
.qa ul { padding-left: 20px; } .qa li { margin: 0 0 8px; }
.qa div > :last-child { margin-bottom: 0; }

.foot { border-top: 1px solid var(--line); padding: 30px 0 44px; font-size: 15px; color: var(--ink2); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot span { margin-right: auto; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { border-radius: 999px; }

@media (max-width: 900px) { .three { grid-template-columns: 1fr; gap: 32px; } .two { grid-template-columns: 1fr; gap: 28px; } .qa section { grid-template-columns: 1fr; gap: 10px; } .band { padding: 64px 0; } }
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .foot .wrap { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 24px; } .foot span { grid-column: 1 / -1; }
  .top .wrap { height: 68px; } .top nav { gap: 16px; } .top .link { font-size: 15px; }
  .top .btn.sm .t { display: none; } .top .btn.sm { width: 44px; padding: 0; }
  .ocean { min-height: max(560px, calc(100vh - 68px)); } .sea { height: max(560px, calc(100vh - 68px)); } .greet .first { min-height: max(560px, calc(100vh - 68px)); padding-bottom: clamp(140px, 27vh, 260px); } .greet .talk { padding-bottom: 22px; } .seat, .bw { width: 104px; height: 104px; }
  .after { gap: 12px; padding-top: 24px; } .after .spot, .after .bw { width: 56px; height: 56px; } .after .talk { padding-top: 4px; }
  .m { font-size: 17.5px; padding: 12px 16px; } h1.m { font-size: 19px; } .pill { font-size: 16px; } .band { padding: 56px 0; }
  .ocean .wrap { padding: 0 12px; } .chrome .wd { display: none; } .chrome .omni { margin-left: 0; }
  #stage .hrh-result.full { padding: 0 14px 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } .m, .pill, .where { animation: none; } .where .ring path { animation: none; stroke-dashoffset: 0; } .pill { transition: none; } }