/* The Share tab (src/player/share.js): a view of its own under the top bar
   (its sub-bar in the bar's tools row), like the scenes grid. One showcase
   page in the film's look, ink with paper type and yellow accents, Anton
   headings, mono labels, on a centred column. */
.share-view {
  /* The chrome's primary, the timeline's and the editor's light grey (style.css --ui-accent): never the film's yellow, which stays in its artwork. */
  --ui-primary: var(--ui-accent); --ui-primary-strong: var(--ui-accent-strong); --ui-on-primary: var(--ui-ink); --ui-primary-soft: #d8d8d870;
  --ink: #0b0b0c; --paper: #f3efe6; --s1: #141416; --s0: #0f0f11; --line: #25252a; --dim: #8e8b84; --soft: #c9c5bb;
  --grid: linear-gradient(#ffffff07 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, #ffffff07 1px, transparent 1px) 0 0 / 24px 24px;
  position: fixed; inset: calc(var(--tb-nav) + var(--tb-tools)) 0 0; z-index: 6; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #3a3a3f transparent;
  color: var(--paper); font-family: 'DM Sans Variable', sans-serif; font-size: 14px; background: var(--ink);
}
.share-view[hidden], body.render .share-view { display: none; }
.share-view:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .share-view * { transition: none !important; } }
.share-view [hidden] { display: none !important; }
:where(.share-view) :where(button, textarea) { font: inherit; letter-spacing: inherit; }
.share-view :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.share-view .mono { font-family: 'JetBrains Mono', monospace; }
.share-view ul { margin: 0; padding: 0; list-style: none; }

/* The sub-bar: the sections (a segmented control, lit as they scroll by),
   then the dev links, Copy link and the press kit's zip. */
.sh-bar { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 28px; }
.sh-bar[hidden] { display: none; }
.sh-short { display: none; }
.sh-bar-end { min-width: 0; margin-left: auto; display: flex; align-items: flex-end; gap: 10px; }

.sh-body { max-width: 1280px; margin: 0 auto; padding: 0 40px 80px; }
.sh-section { padding-top: 48px; }
.sh-section + .sh-section { margin-top: 56px; border-top: 1px solid var(--line); }
.sh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 30px; }
.sh-head-text { min-width: 0; }
.sh-kicker { display: block; color: var(--ui-primary); font-size: 10.5px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; }
/* A title's copy-link (its anchor on the Space's page): after the kicker's
   words, in its row at its full size (the display title's glyphs overflow
   their line box upwards: above them, never under), shown on hover or
   focus, always on touch. */
.sh-kicker.linked { display: flex; align-items: center; gap: 4px; }
.sh-anchor { position: relative; z-index: 2; display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--dim); background: none; border: 0; border-radius: 8px; cursor: pointer; opacity: 0; transition: opacity 0.12s, color 0.12s, background-color 0.12s; }
.sh-anchor svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sh-head:hover .sh-anchor, .sh-lyrics:hover .sh-anchor, .sh-anchor:focus-visible { opacity: 1; }
.sh-anchor:hover { color: var(--paper); background: #ffffff14; }
@media (hover: none) { .sh-anchor { width: 44px; height: 44px; opacity: 1; } }
.sh-display { margin: 12px 0 0; color: var(--paper); font-family: 'Anton', sans-serif; font-size: clamp(56px, 7.4vw, 108px); font-weight: 400; line-height: 0.86; letter-spacing: -0.005em; text-transform: uppercase; }
.sh-kicker.linked + .sh-display { margin-top: 6px; }
.sh-dot { color: var(--ui-primary); }
.sh-lede { max-width: 48ch; margin: 16px 0 0; color: var(--soft); font-size: 15px; line-height: 1.45; }
.sh-meta { color: var(--dim); font-size: 11px; letter-spacing: 0.04em; }
.sh-note { color: var(--dim); font-size: 10.5px; line-height: 1.4; overflow-wrap: anywhere; }
.sh-note:empty { display: none; }

/* Buttons: pills; primary in the chrome's light grey (--ui-accent): the
   yellow is the film's (kickers, the headings' dot). */
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 15px; color: var(--paper); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; background: none; border: 1px solid #36363c; border-radius: 999px; cursor: pointer; transition: background-color 0.12s, border-color 0.12s, color 0.12s; }
.sh-btn:hover { background: #ffffff0c; border-color: var(--paper); }
.sh-btn svg { flex: none; width: 14px; height: 14px; margin-left: -3px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sh-btn small { color: var(--dim); font-size: 0.92em; letter-spacing: 0.02em; text-transform: none; }
.sh-btn.primary { color: var(--ui-ink); font-weight: 700; background: var(--ui-accent); border-color: var(--ui-accent); }
.sh-btn.primary:hover { background: var(--ui-accent-strong); border-color: var(--ui-accent-strong); }
.sh-btn.primary small { color: #0b0b0c99; }
.sh-btn.big { height: 54px; padding: 0 28px; font-size: 13px; }
.sh-btn.big svg { width: 17px; height: 17px; }
.sh-btn.chip { max-width: 100%; height: 28px; gap: 6px; padding: 0 11px; overflow: hidden; font-size: 10.5px; }
.sh-btn.chip svg { width: 12px; height: 12px; }
.sh-btn:disabled, .sh-btn[aria-disabled='true'] { color: #66645e; background: none; border-color: #2a2a2f; cursor: default; }
.sh-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Social, a studio: the choices on the left (where, how long), the result on
   the right (the post to get), sticky while the left scrolls. Two stable
   panes, never sized by their content. Three levels: the section's title,
   each step's number (a kicker) over its question (a heading in the
   display font), its content. The two choices are sibling choice buttons. */
.sh-studio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 40px; }
.sh-choices { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
/* The section's title heads the choices; the result starts level with it. */
.sh-choices > .sh-head { margin-bottom: 0; }
.sh-result { position: sticky; top: 24px; min-width: 0; }
/* The post reads as the output of the choices: a sheet lifted off the
   page, its parts parted by a receipt's dashed rules. */
.sh-result .sh-post { background: #18181b; border-color: #2e2e34; box-shadow: 0 1px 0 #ffffff0a inset, 0 28px 60px -24px #000000e6; }
.sh-result .sh-post-head, .sh-result .sh-stage { border-bottom-style: dashed; border-bottom-color: #34343a; }
.sh-result .sh-step { border-top-style: dashed; border-top-color: #34343a; }
.sh-q { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
/* The step's kicker in the result card's label style (.sh-token-label), so
   STEP 1 · PLATFORM reads as the PLATFORM above its token. */
.sh-q-n { color: var(--dim); font-size: 11px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; }
.sh-q-title { margin: 0; color: var(--paper); font-family: 'Anton', sans-serif; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; }
.sh-choice { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 0 14px; color: var(--soft); font-size: 15px; font-weight: 500; text-align: left; background: var(--s1); border: 1px solid #34343a; border-radius: 12px; cursor: pointer; transition: background-color 0.12s, border-color 0.12s, color 0.12s; }
.sh-choice:hover { color: var(--paper); border-color: #6a6a70; }
/* Picked: no check, the UI's light grey border and a light grey wash. */
.sh-choice[aria-checked='true'] { color: var(--paper); background: #d8d8d814; border-color: var(--ui-primary); box-shadow: inset 0 0 0 1px var(--ui-primary); }
.sh-choice[aria-disabled='true'] { color: #55534e; background: var(--s0); border-color: #232327; cursor: not-allowed; }
.sh-plats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sh-plat-logo { display: grid; flex: none; place-items: center; width: 18px; height: 18px; color: var(--dim); transition: color 0.12s; }
.sh-plat-logo svg { display: block; width: 17px; height: 17px; fill: currentColor; }
.sh-choice:hover .sh-plat-logo, .sh-choice[aria-checked='true'] .sh-plat-logo { color: var(--paper); }
.sh-plat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The format: a frame drawn to its ratio (16:9 or 9:16) in one 18 px box. */
.sh-plat-fmt { display: grid; flex: none; place-items: center; width: 18px; height: 18px; margin-left: auto; color: var(--dim); }
.sh-plat-fmt i { box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 2px; }
.sh-plat-fmt.wide i { width: 18px; height: 10.5px; }
.sh-plat-fmt.tall i { width: 10.5px; height: 18px; }
.sh-choice[aria-checked='true'] .sh-plat-fmt { color: var(--soft); }
.sh-lengths { display: flex; flex-direction: column; gap: 8px; }
/* A length: its time the anchor, then its name (and why it's refused), RECOMMENDED at the right. */
.sh-len { gap: 18px; min-height: 64px; padding: 10px 16px 10px 18px; }
.sh-len-time { flex: none; min-width: 2.5em; color: var(--soft); font-family: 'Anton', sans-serif; font-size: 34px; line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.sh-choice:hover .sh-len-time, .sh-len[aria-checked='true'] .sh-len-time { color: var(--paper); }
.sh-len[aria-disabled='true'] .sh-len-time { color: inherit; }
.sh-len-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-len-name { font-size: 15px; font-weight: 600; }
.sh-len-why { color: #6b6a64; font-size: 12.5px; font-weight: 400; }
.sh-rec { flex: none; margin-left: auto; padding: 3px 8px 2px; color: var(--ui-primary); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--ui-primary-soft); border-radius: 999px; }
.sh-choice[aria-disabled='true'] .sh-rec { color: #6b6a64; border-color: #34343a; }
/* The result: what you get (the heading, the chips), the preview, then the
   post's text. The preview's box has one height for both formats, tied to
   the viewport so the action stays above the fold; the cover is contained
   in it. */
.sh-post { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--s1); border: 1px solid var(--line); border-radius: 16px; }
.sh-post { --ratio: 1.7778; }
.sh-post.tall { --ratio: 0.5625; }
.sh-post-head { padding: 22px 28px 18px; border-bottom: 1px solid var(--line); }
.sh-stage { --stage-h: clamp(220px, calc(100vh - 590px), 420px); position: relative; display: flex; align-items: center; justify-content: center; height: var(--stage-h); padding: 20px; background: var(--grid), var(--s0); border-bottom: 1px solid var(--line); }
.sh-stage-pic { position: relative; width: min(100%, calc((var(--stage-h) - 40px) * var(--ratio))); aspect-ratio: var(--ratio); line-height: 0; }
.sh-stage img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; box-shadow: 0 18px 40px #000c, 0 0 0 1px #ffffff12; }
/* The mini player over the cover (src/player/mini-player.js): a big play
   button, then its bar fading in on hover or focus, kept while paused. */
.mp { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 5px; line-height: 1; }
.mp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); opacity: 0; cursor: pointer; }
.mp.started .mp-video { opacity: 1; }
.mp:fullscreen .mp-video { object-fit: contain; }
.mp-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; color: var(--paper); background: none; border: 0; cursor: pointer; }
.mp-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mp-btn:disabled { opacity: 0.35; cursor: default; }
.mp-btn:focus-visible, .mp-scrub:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
.mp-play svg path, .mp-big svg path { fill: currentColor; }
.mp-big { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; color: var(--ui-primary); background: #0b0b0cd9; border: 1px solid #ffffff2e; border-radius: 50%; box-shadow: 0 10px 30px #0008; transform: translate(-50%, -50%); transition: transform 0.15s, background 0.15s; }
.mp-big svg { width: 24px; height: 24px; margin-left: 3px; stroke-width: 1.4; }
.mp-big:hover { background: #0b0b0c; transform: translate(-50%, -50%) scale(1.06); }
.mp-big:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 3px; }
.mp.started .mp-big, .mp.empty .mp-big { display: none; }
.mp-bar { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; background: linear-gradient(transparent, #0b0b0ce0); opacity: 0; transition: opacity 0.2s; }
.mp:hover .mp-bar, .mp:focus-within .mp-bar, .mp.started:not(.playing) .mp-bar { opacity: 1; }
.mp:not(.started) .mp-bar { display: none; }
.mp-time { flex: none; color: var(--paper); font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-scrub { position: relative; flex: 1; min-width: 40px; height: 20px; cursor: pointer; touch-action: none; }
.mp-track { position: absolute; top: 50%; right: 0; left: 0; height: 3px; overflow: hidden; background: #ffffff33; border-radius: 2px; transform: translateY(-50%); }
.mp-fill { position: absolute; inset: 0; background: var(--ui-primary); transform: scaleX(0); transform-origin: 0 50%; }
.mp-thumb { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; background: var(--ui-primary); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.12s; }
.mp-scrub:hover .mp-thumb, .mp-scrub:focus-visible .mp-thumb, .mp-scrub.dragging .mp-thumb { transform: translate(-50%, -50%) scale(1); }
.mp.failed .mp-bar::after { content: "Couldn't load the video"; position: absolute; bottom: 46px; left: 12px; padding: 6px 10px; color: var(--paper); font-size: 11px; background: #0b0b0ce0; border-radius: 6px; }
@media (hover: none) {
  .mp.started .mp-bar { opacity: 1; }
}
/* The post's text: what you get, the action, then the caption, then More files; on a 8 px scale. */
.sh-post-text { display: flex; flex-direction: column; min-width: 0; padding: 24px 28px 24px; }
/* One line whatever the choice (on a phone it may wrap): the card's height never moves. */
.sh-what { height: 40px; margin: 18px 0 0; color: var(--soft); font-size: 22px; font-weight: 500; line-height: 40px; white-space: nowrap; }
/* A choice from the left, as its picked button, sized to the line: the accent's border and check, bold. */
.sh-token { position: relative; display: inline-flex; align-items: center; height: 1.6em; padding: 0 11px; color: var(--paper); line-height: 1; vertical-align: 0.06em; background: var(--s1); border: 1px solid var(--ui-primary); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ui-primary); }
.sh-token b { font-weight: 700; }
/* What each token is, above its left edge, like the kickers: out of the line, so it moves nothing. */
.sh-token-label { position: absolute; bottom: 100%; left: 0; margin-bottom: 5px; color: var(--dim); font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; }
/* The platform: bold, in its accent. */
.sh-what-name b { color: var(--ui-primary); font-weight: 800; }
/* A value that just changed: a brief flash of the accent, nothing moves. */
.sh-post .flash { animation: sh-flash 0.3s ease-out; }
@keyframes sh-flash { from { color: var(--ink); background-color: var(--ui-primary); } }
@media (prefers-reduced-motion: reduce) { .sh-post .flash { animation: none; } }
/* What you get, as chips: the format, the duration (its clock), the file. */
.sh-sub { display: flex; gap: 6px; height: 28px; margin: 14px 0 0; overflow: hidden; }
.sh-spec { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 28px; padding: 0 11px; color: var(--dim); font-size: 12px; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; }
.sh-spec.time { color: var(--soft); }
.sh-spec svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sh-get { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.sh-post-text > .sh-get:first-child { margin-top: 0; }
.sh-btn.accent { width: 100%; height: 56px; gap: 10px; color: var(--ui-on-primary); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; background: var(--ui-primary); border-color: var(--ui-primary); }
.sh-btn.accent:hover { background: var(--ui-primary-strong); border-color: var(--ui-primary-strong); }
.sh-btn.accent svg { width: 17px; height: 17px; stroke-width: 1.9; }
.sh-btn.accent[aria-disabled='true'] { color: #66645e; background: none; border-color: #2a2a2f; }
.sh-btn.accent .sh-btn-size { color: #0b0b0ca6; font-weight: 400; letter-spacing: 0.04em; }
.sh-btn.accent .sh-btn-size::before { content: '\00b7'; margin-right: 10px; }
.sh-btn-size:empty, .sh-btn.accent[aria-disabled='true'] .sh-btn-size { display: none; }
.sh-status { display: flex; align-items: center; gap: 7px; height: 1.35em; overflow: hidden; color: var(--dim); font-size: 14px; line-height: 1.35; white-space: nowrap; }
.sh-status > span { overflow: hidden; text-overflow: ellipsis; }
.sh-status svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-status.warn svg { stroke: #ff8a7a; }
.sh-status.blank { visibility: hidden; min-height: 1.35em; }
.sh-step { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.sh-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sh-step-title { margin: 0 auto 0 0; color: var(--paper); font-size: 16px; font-weight: 600; }
.sh-caption-text { height: calc(1.55em * 5 + 28px); overflow-y: auto; margin: 0; padding: 14px 16px; color: #dcd8ce; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--s0); border: 1px solid var(--line); border-radius: 10px; }
.sh-caption-text.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent); }
.sh-tip { height: 1.4em; margin: 10px 0 0; overflow: hidden; color: var(--dim); font-size: 14px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.sh-post .sh-btn[aria-busy='true'] { cursor: progress; }
.sh-count { color: var(--dim); font-size: 11px; letter-spacing: 0.04em; }
.sh-count.over { color: #ff8a7a; }
.sh-files-row .sh-meta { display: flex; align-items: center; gap: 7px; }
.sh-files-row .sh-meta svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* More files: right under the action and its fit line, no heading, the
   download's other options (quieter, a row each on one line). */
.sh-files { margin-top: 14px; }
.sh-files-rows { display: flex; flex-direction: column; gap: 8px; }
.sh-files-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; height: 28px; }
.sh-files-row .sh-chips { flex-wrap: nowrap; overflow: hidden; }
.sh-files-none { color: var(--dim); font-size: 12px; line-height: 28px; }

/* Press kit: the zip, a gallery at the pictures' shapes (a row grows to the
   width, at most 1.6 times its height), then cards. */
.sh-zip { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.sh-zip small { color: var(--dim); font-size: 11px; letter-spacing: 0.04em; }
.sh-gallery { --row: 210px; display: flex; flex-wrap: wrap; gap: 30px 18px; }
.sh-tile { display: flex; flex-direction: column; gap: 12px; flex: var(--r) 1 calc(var(--r) * var(--row)); min-width: 0; max-width: calc(var(--r) * var(--row) * 1.6); }
.sh-pic { display: block; overflow: hidden; background: var(--s1); border-radius: 8px; box-shadow: 0 0 0 1px #ffffff10; }
.sh-pic :is(img, video) { display: block; width: 100%; aspect-ratio: var(--r); object-fit: cover; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sh-pic:hover :is(img, video) { transform: scale(1.035); }
/* Stickers: die-cut on transparent, set inside the tile (same box) so the
   white margin never meets its edge, hover zoom included. */
.sh-tile[data-group='stickers'] .sh-pic img { box-sizing: border-box; padding: 16px; object-fit: contain; }
.sh-tile-cap { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sh-tile-cap b, .sh-card > b { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sh-tile-cap .sh-chips { margin-top: 5px; }
/* The merch (the tees): the press kit's part of its own, under the gallery,
   a smaller Anton title, its tees side by side as big as the column allows. */
.sh-merch { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--line); }
.sh-merch-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.sh-merch-head > .sh-btn { flex: none; }
.sh-merch:hover .sh-anchor { opacity: 1; }
.sh-merch-title { margin: 6px 0 0; color: var(--paper); font-family: 'Anton', sans-serif; font-size: clamp(40px, 4.6vw, 64px); font-weight: 400; line-height: 0.9; text-transform: uppercase; }
.sh-merch .sh-lede { max-width: 60ch; }
.sh-merch-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; }
.sh-merch-list .sh-tile { max-width: none; }
/* A tee's other side, small in its picture's corner: a click swaps them. */
.sh-pic-box { position: relative; }
.sh-flip { position: absolute; right: 14px; bottom: 14px; width: 28%; padding: 0; overflow: hidden; background: var(--s1); border: 2px solid #ffffff40; border-radius: 6px; box-shadow: 0 8px 22px #00000080; cursor: pointer; transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.12s; }
.sh-flip:hover { border-color: var(--paper); transform: scale(1.06); }
.sh-flip img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.sh-flip-label { position: absolute; inset: auto 0 0; padding: 4px 0; color: var(--paper); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; background: #0b0b0cd0; }

.sh-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sh-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px; background: var(--s1); border: 1px solid var(--line); border-radius: 16px; }
.sh-card > .sh-acts { margin-top: auto; padding-top: 4px; }
.sh-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 2px; }
.sh-mosaic img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.sh-sheet { display: block; overflow: hidden; margin-top: 2px; border: 1px solid var(--line); border-radius: 8px; }
.sh-sheet img { display: block; width: 100%; aspect-ratio: var(--r); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sh-sheet:hover img { transform: scale(1.04); }
.sh-sheet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sh-blurb { flex: 1; min-height: 0; padding: 0; color: #dcd8ce; font-size: 13.5px; line-height: 1.5; letter-spacing: 0; background: none; border: 0; resize: none; field-sizing: content; }
.sh-blurb:focus { outline: none; }
/* Open source: its own section, the tree beside the numbers and the
   commands, the license's badge and links in the heading's side. */
.sh-oss-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; }
.sh-oss-badge { padding: 6px 12px 5px; color: var(--ui-primary); font-size: 11px; letter-spacing: 0.12em; text-decoration: none; border: 1px solid var(--ui-primary-soft); border-radius: 999px; }
.sh-oss-badge:hover { border-color: var(--ui-primary); }
.sh-oss-side .sh-oss-badge { align-self: flex-end; }
.sh-oss-side .sh-acts { flex-direction: column; align-items: stretch; }
.sh-oss-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; }
.sh-oss-tree, .sh-oss-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 26px 28px; background: var(--s1); border: 1px solid var(--line); border-radius: 16px; }
.sh-oss-list { display: flex; flex-direction: column; }
.sh-oss-list li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.sh-oss-list li:first-child { border-top: 0; padding-top: 4px; }
.sh-oss-list li.sub .sh-oss-path { padding-left: 1.4em; color: var(--soft); }
.sh-oss-path { color: var(--paper); font-size: 13px; }
.sh-oss-what { color: var(--soft); font-size: 14px; line-height: 1.4; }
.sh-oss-n { color: var(--dim); font-size: 11px; white-space: nowrap; }
.sh-oss-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.sh-oss-nums div { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; }
.sh-oss-nums dd { margin: 0; color: var(--paper); font-family: 'Anton', sans-serif; font-size: 40px; line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.sh-oss-nums dt { color: var(--dim); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.sh-oss-claim { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.5; }
.sh-term { overflow: hidden; background: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
.sh-term-bar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; color: var(--dim); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.sh-term-bar > .mono { margin-right: auto; }
.sh-term-dots { width: 34px; height: 8px; background: radial-gradient(circle, #3a3a40 3.5px, transparent 4px) 0 0 / 13px 8px repeat-x; }
.sh-term-body { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 16px 18px 18px; overflow-x: auto; color: var(--paper); font-size: 13px; line-height: 1.5; }
.sh-term-prompt { color: var(--ui-primary); }
.sh-term-out { color: var(--dim); }
.sh-oss-lic { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.sh-oss-lic-main { margin: 0; color: var(--soft); font-size: 16px; line-height: 1.45; }
.sh-oss-lic-main b { color: var(--paper); font-weight: 700; }
.sh-oss-note { max-width: 96ch; margin: 0; color: var(--dim); font-size: 13px; line-height: 1.55; }
.sh-oss-note a { color: var(--soft); text-underline-offset: 2px; }
.sh-oss-note a:hover { color: var(--paper); }

/* The lyrics: under the stills and the blurb, across both, in columns. */
.sh-lyrics { grid-column: 1 / -1; }
.sh-lyrics-text { columns: 3 220px; column-gap: 32px; margin-top: 4px; color: #dcd8ce; font-size: 13.5px; line-height: 1.5; }
.sh-lyrics-text p { display: flex; flex-direction: column; margin: 0 0 14px; break-inside: avoid; }
.sh-lyrics-label { margin-bottom: 3px; color: var(--ui-primary); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Social: the post's cover above its text on a narrower page. */
@media (max-width: 900px) {
  .sh-studio { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sh-result { position: static; }
  .sh-oss-grid { grid-template-columns: minmax(0, 1fr); }
  .sh-stage { --stage-h: 320px; }
}
/* Phones: one column; the sections' short names, the zip as its icon. */
@media (max-width: 640px) {
  .sh-bar { gap: 12px; }
  .sh-long, .sh-bar .tb-btn :is(.lbl, small) { display: none; }
  .sh-short { display: inline; }
  .sh-bar .tb-btn { width: var(--tb-ctl); padding: 0; }
  .sh-bar-end { gap: 8px; }
  .sh-body { padding: 0 18px max(32px, env(safe-area-inset-bottom)); }
  .sh-section { padding-top: 30px; }
  .sh-section + .sh-section { margin-top: 40px; }
  .sh-display { font-size: 60px; }
  .sh-lede { font-size: 14px; }
  .sh-head { flex-direction: column; align-items: stretch; gap: 22px; margin-bottom: 24px; }
  .sh-zip { align-items: stretch; }
  .sh-zip small { text-align: center; }
  .sh-choices { gap: 28px; }
  .sh-q-title { font-size: 24px; }
  .sh-choice { gap: 8px; min-height: 44px; padding: 0 12px; font-size: 14px; }
  .sh-plat-fmt { display: none; }
  .sh-len { gap: 14px; min-height: 56px; padding: 8px 12px 8px 14px; }
  .sh-len-time { font-size: 28px; }
  .sh-stage { --stage-h: 260px; padding: 16px; }
  .sh-stage-pic { width: min(100%, calc((var(--stage-h) - 32px) * var(--ratio))); }
  .sh-post-head { padding: 18px 18px 16px; }
  .sh-what { height: auto; font-size: 16px; line-height: 2.6; white-space: normal; }
  .sh-sub { flex-wrap: wrap; height: auto; }
  .sh-post-text { padding: 20px 18px 20px; }
  .sh-files-row { grid-template-columns: 1fr; gap: 6px; height: auto; }
  .sh-files-row .sh-chips { flex-wrap: wrap; overflow: visible; }
  .sh-gallery { --row: 170px; gap: 22px 10px; }
  .sh-tile .sh-btn small { display: none; }
  .sh-tile[data-group='stickers'] .sh-pic img { padding: 12px; }
  .sh-tile-cap b { font-size: 13px; }
  .sh-merch { margin-top: 44px; padding-top: 30px; }
  .sh-merch-head { flex-direction: column; align-items: stretch; gap: 20px; margin-bottom: 22px; }
  .sh-merch-title { font-size: 40px; }
  .sh-merch-list { grid-template-columns: repeat(3, 78%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; scroll-padding: 0 18px; }
  .sh-merch-list .sh-tile { scroll-snap-align: start; }
  .sh-extra { grid-template-columns: 1fr; gap: 14px; }
  .sh-card { padding: 18px; }
  .sh-oss-side { align-items: stretch; }
  .sh-oss-side .sh-oss-badge { align-self: flex-start; }
  .sh-oss-grid { grid-template-columns: minmax(0, 1fr); }
  .sh-oss-tree, .sh-oss-right { padding: 20px 18px; }
  .sh-oss-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .sh-oss-what { grid-column: 1 / -1; grid-row: 2; }
  .sh-oss-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-oss-nums dd { font-size: 34px; }
  .sh-lyrics-text { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
}