:root {
  color-scheme: light;
  --page: #f5f5f1;
  --card: #fff;
  --ink: #293c37;
  --text: #303734;
  --muted: #747974;
  --line: #dfe2dc;
  --negative: #e5b5a9;
  --positive: #b8cdb0;
  --vote-ink: #394d48;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--page);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }
body { margin: 0; height: 100%; overflow: hidden; }
.page-scroll { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; scrollbar-color: #b6bcb4 var(--page); background: var(--page); scroll-behavior: smooth; scroll-padding-top: 20px; overflow-anchor: none; }
.page-scroll::-webkit-scrollbar { width: 12px; background: var(--page); }
.page-scroll::-webkit-scrollbar-track, .page-scroll::-webkit-scrollbar-corner { background: var(--page); }
.page-scroll::-webkit-scrollbar-thumb { background: #b6bcb4; border: 3px solid var(--page); border-radius: 999px; }
.page-scroll::-webkit-scrollbar-thumb:hover { background: #929b8f; }
body:has(dialog[open]) .page-scroll { overflow-y: hidden; }
@supports not (scrollbar-gutter: stable) {
  body:has(dialog[open]) .page-scroll { padding-right: var(--modal-scrollbar-width, 0px); }
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .6; }
button, a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
/* Focus decoration is opt-in; suppress browser rings without changing keyboard focus. */
:focus, :focus-visible { outline: none; }
[hidden] { display: none !important; }
.page-width, .header-inner { width: min(100% - 72px, 1560px); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 10; background: #fafbf8; border-bottom: 1px solid #cdd5cb; box-shadow: 0 3px 12px #253d3206; transition: transform .22s ease; }
.site-header.is-hidden { transform: translateY(calc(-100% - 4px)); }
.site-header:has(:focus-visible) { transform: none; }
.header-inner { min-height: 90px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark { display: block; width: 44px; height: 44px; flex: none; object-fit: contain; }
.brand-name { font-size: 21px; font-weight: 750; letter-spacing: .04em; color: var(--ink); }
.brand-name small { display: block; font-size: 10px; letter-spacing: .22em; font-weight: 650; margin-top: 5px; }
.gallery-tabs { display: flex; align-items: center; gap: 5px; max-width: 100%; overflow-x: auto; padding: 5px; border: 1px solid #e0e5dc; border-radius: 13px; background: #eff2eb; }
.gallery-tabs button { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 13px; border: 1px solid transparent; border-radius: 9px; background: none; color: #647064; font-size: 14px; white-space: nowrap; }
.gallery-tabs button[aria-pressed="true"] { background: white; border-color: #d5dcd0; color: var(--ink); font-weight: 650; box-shadow: 0 2px 4px #283d3205; }
.gallery-tabs button:hover { color: var(--ink); background: #f9faf7; }
.gallery-tabs button span { font-size: 12px; color: #7d887a; font-variant-numeric: tabular-nums; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sync-login { min-width: 126px; white-space: nowrap; }
.sync-notice { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 10px; max-width: min(620px, calc(100% - 32px)); padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fafbf8; box-shadow: 0 4px 18px #293c371a; color: var(--text); font-size: 13px; line-height: 1.6; }
.sync-notice-content { min-width: 0; flex: 1; }
#sync-details { margin-top: 8px; }
#sync-details summary { cursor: pointer; }
#sync-details summary:hover, #sync-details summary:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
#sync-issues { max-height: min(260px, 40vh); overflow-y: auto; overscroll-behavior: contain; margin: 8px 0 0; padding-left: 20px; overflow-wrap: anywhere; }
#sync-issues li + li { margin-top: 10px; }
.sync-issue-reason { display: block; color: var(--muted); }
.sync-notice button { flex: none; padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--text); white-space: nowrap; }
.sync-notice button:hover { background: #edf0e9; }
.sync-notice button:focus-visible, .sync-login:focus-visible { outline: 2px solid #328478; outline-offset: 2px; }
.showcase-view-switch { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #eff1ec; }
.showcase-view-switch button { min-height: 34px; padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; white-space: nowrap; }
.showcase-view-switch button:not(:disabled):hover { color: var(--text); }
.showcase-view-switch button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px #293c3714; font-weight: 600; }
.showcase-view-switch button:focus-visible { outline: 2px solid #328478; outline-offset: 1px; }
.motion-symbol { font-size: 16px; width: 15px; text-align: center; }
.motion-toggle[aria-pressed="true"] { background: #e7ece2; border-color: #b4c0ac; }
.button { min-height: 42px; padding: 10px 17px; border: 1px solid #cbd2cb; border-radius: 10px; background: #fff; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 600; transition: background .18s, border-color .18s; }
.button:hover { background: #edf0e9; border-color: #a7b5ab; }
.button:active { background: #e3e8df; }
.submit-trigger { background: #2f4944; color: white; border-color: #2f4944; }
.submit-trigger:hover { background: #3e5d56; border-color: #3e5d56; }
.plus { font-size: 23px; line-height: 16px; font-weight: 400; }
.pelican-showcase { --matrix-min-width: 730px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px; padding-block: 28px 32px; }
.pelican-showcase[data-view="matrix"] { padding-block: 6px 8px; }
/* Uniform artwork frames keep model rows independent of viewport height. */
.showcase-matrix { grid-column: 1 / -1; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #b6bcb4 var(--page); }
.showcase-matrix:focus { outline: none; }
.showcase-matrix-row { display: grid; grid-template-columns: 110px repeat(5, minmax(104px, 1fr)); align-items: center; gap: 16px; min-width: var(--matrix-min-width); height: 164px; padding-block: 2px; }
.showcase-matrix-row + .showcase-matrix-row { margin-top: 8px; }
.showcase-matrix-model { position: sticky; left: 0; z-index: 1; align-self: stretch; display: flex; align-items: center; background: var(--page); color: var(--text); }
.showcase-model-badge { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; width: 110px; height: 112px; padding: 14px 10px; border: 1px solid #dfe3dd; border-radius: 7px; background: #eef0ec; }
.showcase-model-version { padding-left: 8px; color: var(--muted); font-size: 16px; font-weight: 600; line-height: 22px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.showcase-model-family { max-width: 100%; padding: 4px 8px; border-radius: 10px; background: #e2e5e0; color: #414943; font-size: 26px; font-weight: 600; line-height: 32px; letter-spacing: -.04em; white-space: nowrap; }
.showcase-model-family-tag { justify-self: start; padding: 2px 4px; margin-inline: -4px; border-radius: 5px; background: #e2e5e0; color: #414943; }
/* Shared family colors for matrix plaques, single-view controls and gallery cards. */
:is(.showcase-model-family, .showcase-model-family-tag, .card-model-family)[data-family="astra"] { background: #d5c5e5; }
:is(.showcase-model-family, .showcase-model-family-tag, .card-model-family)[data-family="sol"] { background: #bcdccd; }
:is(.showcase-model-family, .showcase-model-family-tag, .card-model-family)[data-family="luna"] { background: #c4d3e3; }
:is(.showcase-model-family, .showcase-model-family-tag, .card-model-family)[data-family="terra"] { background: #dfcbb2; }
.showcase-model-fallback { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.showcase-matrix-row.showcase-matrix-heading { height: 24px; padding-block: 0; color: var(--muted); font-size: 12px; line-height: 18px; text-align: center; }
.showcase-matrix-level { justify-self: center; padding: 2px 10px; border-radius: 999px; background: #ecefea; }
.showcase-matrix-cell { display: flex; justify-content: center; align-self: stretch; min-width: 0; min-height: 0; }
.showcase-matrix .showcase-matrix-artwork { width: 100%; height: 160px; max-width: none; aspect-ratio: auto; overflow: hidden; border: 1px solid #e6e9e3; border-radius: 6px; background: #eef1ed; }
.showcase-matrix button.showcase-matrix-artwork { cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; }
@media (hover: hover) {
  .showcase-matrix button.showcase-matrix-artwork:hover { border-color: #728b7d; background: #dde7dc; box-shadow: inset 0 0 0 1px #728b7d, 0 3px 10px #263d3026; }
}
.showcase-matrix button.showcase-matrix-artwork:active { border-color: #526e5e; background: #d1dfd1; box-shadow: inset 0 0 0 1px #526e5e, inset 0 2px 6px #263d3026; }
.showcase-matrix div.showcase-matrix-artwork { cursor: default; }
.showcase-matrix-artwork:focus-visible { outline: 2px solid #328478; outline-offset: 3px; }
.showcase-matrix .showcase-matrix-artwork .art, .showcase-matrix .showcase-matrix-artwork .art-poster { width: calc(100% - 12px); height: calc(100% - 12px); max-width: 100%; object-fit: contain; object-position: center; top: 6px; left: 6px; transform: none; }
.showcase-preview { min-width: 0; margin: 0; container: showcase-preview / inline-size; }
.showcase-stage { position: relative; }
.showcase-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; background: #eef1ed; box-shadow: 0 0 0 1px #293c3714; }
.showcase-media .showcase-artwork { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; background: transparent; }
.showcase-media .showcase-artwork.is-preparing { opacity: 0; pointer-events: none; }
.showcase-media .showcase-artwork .art, .showcase-media .showcase-artwork .art-poster { width: 100%; height: 100%; max-width: 100%; object-fit: contain; left: 0; transform: none; }
.showcase-preview-controls { margin-top: 8px; overflow-x: auto; }
/* Wide previews reserve stable text columns. Compact previews below reclaim
   the count column while keeping a fixed time column and a longer slider. */
.showcase-preview-controls .showcase-model-row { --preview-model-width: 160px; --preview-effort-width: 42px; --preview-time-width: 112px; --preview-count-width: 48px; --preview-gap: 8px; grid-template-columns: var(--preview-model-width) var(--preview-effort-width) minmax(44px, 1fr) calc(var(--preview-time-width) + var(--preview-count-width) + var(--preview-gap)); gap: var(--preview-gap); min-width: calc(var(--preview-model-width) + var(--preview-effort-width) + 44px + var(--preview-time-width) + var(--preview-count-width) + 4 * var(--preview-gap)); padding-inline: 0; }
.showcase-preview-controls .showcase-metrics { grid-template-columns: var(--preview-time-width) var(--preview-count-width); gap: var(--preview-gap); padding-left: 0; }
.showcase-preview-controls .showcase-duration { overflow: visible; text-overflow: clip; text-align: right; }
.showcase-overlays { position: absolute; inset: 12px 12px auto; z-index: 2; display: flex; justify-content: center; pointer-events: none; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.showcase-overlays > span { padding: 4px 8px; border-radius: 5px; color: #35433d; background: #fafbf8d9; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.showcase-overlays > span:empty { display: none; }
#showcase-sample { text-align: center; }
#showcase-sample[data-is-time="true"] { visibility: hidden; }
.showcase-stage:hover #showcase-sample[data-is-time="true"] { visibility: visible; }
.showcase-media .showcase-artwork[aria-disabled="true"] { cursor: default; }
.showcase-media:has(.showcase-artwork:focus-visible) { outline: 2px solid #328478; outline-offset: 3px; }
.showcase-models { min-width: 0; }
.showcase-columns, .showcase-model-row { display: grid; grid-template-columns: 160px 42px minmax(64px, 1fr) 120px; align-items: center; gap: 8px; padding-inline: 12px; }
.showcase-columns { min-height: 30px; font-size: 12px; color: var(--muted); }
.showcase-columns > :last-child { padding-left: 10px; }
.showcase-model-row { min-height: 60px; border-bottom: 1px solid var(--line); }
#showcase-model-list .showcase-model-row { cursor: pointer; }
@media (hover: hover) {
  #showcase-model-list .showcase-model-row:hover { background-color: #66776b12; }
}
.showcase-model-button { position: relative; display: block; min-width: 0; width: 100%; padding: 8px; border: 0; border-radius: 5px; background: none; color: var(--text); text-align: left; font-size: 14px; line-height: 1.5; font-weight: 600; transition: color .1s ease; }
.showcase-model-button:hover { background: #ebebea; }
.showcase-model-button[aria-pressed="true"], .showcase-model-button.is-picker { background: #e5e5e3; box-shadow: inset 3px 0 #777974; color: #353735; }
.showcase-model-button.is-picker { padding-right: 18px; cursor: pointer; }
.showcase-model-button.is-picker .showcase-model-name { grid-template-columns: repeat(5, max-content); column-gap: 3px; }
.showcase-model-button.is-picker::after { content: ""; position: absolute; right: 6px; top: calc(50% - 4px); width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.showcase-model-button.is-picker:focus-visible { outline: 2px solid #777974; outline-offset: -2px; }
.showcase-model-menu-layer { position: fixed; inset: 0; z-index: 40; }
.showcase-model-menu { position: absolute; box-sizing: border-box; overflow: visible; padding: 4px; border: 1px solid #c5c9c180; border-radius: 8px; background: rgba(235, 238, 232, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); box-shadow: 0 8px 28px #2027221a; font-size: 14px; line-height: 1.5; font-weight: 600; }
.showcase-model-menu:focus-visible { outline: 2px solid #777974; outline-offset: 2px; }
.showcase-model-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 6px 10px; border-radius: 5px; cursor: pointer; user-select: none; }
.showcase-model-option.is-active { background: #d7dad380; box-shadow: inset 3px 0 #777974; }
.showcase-model-option-check { width: 14px; flex: none; visibility: hidden; color: #656863; }
.showcase-model-option[aria-selected="true"] .showcase-model-option-check { visibility: visible; }
.showcase-model-name { display: grid; grid-template-columns: 3.4ch .6ch 3ch .6ch 4.8ch; column-gap: 6px; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.showcase-model-separator { color: #8d9b94; text-align: center; transition: color .1s ease; }
.showcase-effort { font-size: 13px; color: var(--muted); transition: color .1s ease; }
.showcase-effort.is-ultra { color: #8451bd; }
.showcase-slider-slot { min-width: 0; }
.showcase-slider-control { position: relative; width: 100%; height: 40px; }
/* Use the cards' colors with the reference's thicker capsule and larger thumb.
   Thumb centers share a start and step spacing: (width - 28px) × 3/4 + 28px. */
.showcase-slider-control.is-short { width: calc(75% + 7px); }
.showcase-slider-rail.reasoning { position: absolute; left: 0; top: 50%; width: 100%; height: 24px; border-radius: 999px; transform: translateY(-50%); pointer-events: none; }
.showcase-slider-rail .reasoning-fill { width: calc(14px + (100% - 28px) * var(--index) / var(--steps)); border-radius: inherit; overflow: hidden; opacity: 1; transition: width .15s cubic-bezier(.23, 1, .32, 1); }
.showcase-slider-rail .reasoning-dots { inset-inline: 12px; opacity: 1; }
.showcase-slider-rail .reasoning-dots i { width: 4px; height: 4px; }
.showcase-slider-rail .reasoning-thumb { width: 28px; height: 28px; top: -2px; left: calc(14px + (100% - 28px) * var(--index) / var(--steps)); z-index: 2; opacity: 1; transition: left .15s cubic-bezier(.23, 1, .32, 1); }
/* Ultra: flowing violet light, floating specks, and a brief entry burst.
   CSS layers approximate the desktop shader without adding a WebGL loop. */
/* A moving alpha gradient blends the entire purple layer (including stars)
   into blue. The middle 30% of a 3× mask gives a feather about 90% of the rail.
   Both endpoints are fully transparent/opaque, so removing the animation cannot snap. */
.showcase-ultra-field { display: none; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #7040c2; isolation: isolate; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 65%); mask-image: linear-gradient(90deg, transparent 35%, #000 65%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.showcase-slider-rail.ultra .showcase-ultra-field { display: block; }
.showcase-slider-rail.ultra .reasoning-dots { opacity: 0; }
.showcase-slider-rail.ultra .reasoning-thumb { box-shadow: 0 1px 3px #0003, 0 0 12px #b476ec70; }
.showcase-ultra-clouds { position: absolute; inset: -60% -35%; background: radial-gradient(ellipse at 20% 35%, #d5b5f3 0, transparent 36%), radial-gradient(ellipse at 68% 70%, #b900ff 0, transparent 42%), radial-gradient(ellipse at 90% 30%, #280e7a 0, transparent 40%), linear-gradient(110deg, #6334c0, #ac74ec 48%, #6624a8); animation: showcase-ultra-flow 6.4s ease-in-out infinite alternate; }
.showcase-ultra-clouds::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 80%, #e1b0ffbf 0, transparent 38%), radial-gradient(ellipse at 65% 20%, #360c668c 0, transparent 43%); animation: showcase-ultra-flow 4.7s ease-in-out -2s infinite alternate-reverse; }
.showcase-ultra-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .65; box-shadow: 0 0 4px #ffffff80; animation: showcase-ultra-drift var(--duration) ease-in-out var(--delay) infinite alternate; }
.showcase-ultra-star:nth-child(3n) { width: 3px; height: 3px; }
.showcase-ultra-burst { display: none; position: absolute; top: 50%; right: 14px; width: 0; height: 0; z-index: 3; pointer-events: none; opacity: 1; }
.showcase-slider-rail.ultra.is-ultra-entering .showcase-ultra-field { animation: showcase-ultra-reveal 2s cubic-bezier(.23, 1, .32, 1) both; }
.showcase-slider-rail.ultra.is-ultra-entering .reasoning-fill { background: #1687fa; }
.showcase-slider-rail.ultra.is-ultra-entering .showcase-ultra-burst { display: block; }
.showcase-ultra-burst i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #a365eb; opacity: 0; animation: showcase-ultra-burst .62s cubic-bezier(.25, 1, .5, 1) both; }
.showcase-ultra-burst i:nth-child(3n) { background: #7a71e7; }
.showcase-ultra-field, .showcase-ultra-clouds, .showcase-ultra-clouds::after, .showcase-ultra-star, .showcase-ultra-burst i { animation-play-state: paused !important; }
.showcase-slider-rail.is-effects-active :is(.showcase-ultra-field, .showcase-ultra-clouds, .showcase-ultra-star, .showcase-ultra-burst i), .showcase-slider-rail.is-effects-active .showcase-ultra-clouds::after { animation-play-state: running !important; }
@keyframes showcase-ultra-flow { from { transform: translate(-8%, -6%) rotate(-5deg) scale(1.05); } to { transform: translate(9%, 8%) rotate(7deg) scale(1.2); } }
@keyframes showcase-ultra-drift { from { transform: translate(0, 0) scale(.7); opacity: .35; } to { transform: translate(var(--drift-x), var(--drift-y)) scale(1.1); opacity: .8; } }
@keyframes showcase-ultra-reveal { from { -webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
@keyframes showcase-ultra-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); } 22% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(.45); } }
@media (prefers-reduced-motion: reduce) {
  .showcase-slider-rail .showcase-ultra-field, .showcase-slider-rail .showcase-ultra-clouds, .showcase-slider-rail .showcase-ultra-clouds::after, .showcase-slider-rail .showcase-ultra-star, .showcase-slider-rail .showcase-ultra-burst i { animation: none !important; }
  .showcase-slider-rail .showcase-ultra-burst { display: none !important; }
}
/* The transparent native input retains mouse, touch and keyboard interaction. */
.showcase-slider { -webkit-appearance: none; appearance: none; position: relative; display: block; width: 100%; min-width: 0; height: 40px; padding: 0; margin: 0; border: 0; opacity: 0; background: transparent; cursor: pointer; }
.showcase-slider::-webkit-slider-runnable-track { height: 24px; border: 0; background: transparent; }
.showcase-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 28px; height: 28px; margin-top: -2px; border: 0; background: transparent; }
.showcase-slider::-moz-range-track { height: 24px; border: 0; background: transparent; }
.showcase-slider::-moz-range-progress { background: transparent; }
.showcase-slider::-moz-range-thumb { box-sizing: border-box; width: 28px; height: 28px; border: 0; background: transparent; }
.showcase-slider-control:has(.showcase-slider:focus-visible) { outline: 2px solid #1687fa; outline-offset: 3px; border-radius: 4px; }
.showcase-metrics { display: grid; grid-template-columns: minmax(0, 1fr) var(--showcase-count-width, 40px); align-items: center; gap: 8px; min-width: 0; padding-left: 10px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.showcase-columns .showcase-metrics { font-size: inherit; }
.showcase-duration { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase-count { white-space: nowrap; text-align: center; }
/* Keep duration column geometry while exposing only the selected row's time.
   Preview controls always represent the current model and stay fully styled. */
#showcase-model-list .showcase-model-row[data-selected="false"] .showcase-duration { visibility: hidden; }
/* Row hover adds a muted tint and emphasizes the model name without changing
   the slider state. Focusing the slider selects its model via the input handler. */
#showcase-model-list .showcase-model-row[data-selected="false"] .showcase-model-button { color: var(--muted); background: none; }
#showcase-model-list .showcase-model-row[data-selected="false"] .showcase-model-separator { color: inherit; }
#showcase-model-list .showcase-model-row[data-selected="false"]:is(:hover, :focus-within) .showcase-model-button { color: var(--text); }
#showcase-model-list .showcase-model-row[data-selected="false"] .showcase-slider-rail { background: #dfe3df; }
/* Keep the thumb and step dots visible on the neutral trough; hovering does
   not reveal colored fills or effects as the pointer crosses rows. */
#showcase-model-list .showcase-model-row[data-selected="false"] :is(.reasoning-fill, .showcase-ultra-burst) { opacity: 0; }
#showcase-model-list .showcase-model-row[data-selected="false"] .reasoning-dots { opacity: 1; }
#showcase-model-list .showcase-model-row[data-selected="false"] .reasoning-dots i { background: #fff; }
#showcase-model-list .showcase-model-row[data-selected="false"] .reasoning-thumb { opacity: 1; background: #fff; box-shadow: 0 1px 3px #0003; }
#showcase-model-list .showcase-model-row[data-selected="false"] .showcase-effort { color: var(--muted); }
#showcase-model-list .showcase-model-row[data-selected="false"] .showcase-ultra-field { animation: none !important; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
#showcase-model-list .showcase-model-row[data-selected="false"] .showcase-ultra-burst { display: none !important; }
#showcase-model-list .showcase-model-row[data-selected="false"] :is(.showcase-ultra-clouds, .showcase-ultra-star),
#showcase-model-list .showcase-model-row[data-selected="false"] .showcase-ultra-clouds::after { animation-play-state: paused !important; }
.showcase-model-button:focus-visible { outline: 2px solid #328478; outline-offset: 3px; border-radius: 4px; }
.gallery-section.has-showcase { padding-top: 0; }
.gallery-section { padding-top: 44px; }
.gallery-section.has-event-calendar { padding-top: 14px; }
.eyebrow { margin: 0 0 11px; font-size: 11px; font-weight: 650; letter-spacing: .17em; color: #66766b; }
.event-calendar { --calendar-day-size: 120px; --calendar-gap: 12px; padding-bottom: 26px; }
.event-calendar-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.event-calendar-heading h1 { flex: none; margin: 0; color: var(--text); font-size: 16px; line-height: 24px; font-weight: 650; }
.event-calendar-dots { display: flex; flex: 0 1 auto; align-items: center; min-width: 0; }
.event-calendar-dot { display: inline-flex; flex: 0 1 12px; align-items: center; justify-content: center; width: 12px; min-width: 0; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; }
.event-calendar-dot::before { content: ""; width: 5px; max-width: 65%; aspect-ratio: 1; border-radius: 50%; background: #c5ccc6; }
.event-calendar-dot[data-visible="true"]::before { background: #526c5e; }
.event-calendar-dot:hover::before { box-shadow: 0 0 0 2px #526c5e24; }
.event-calendar-dot:focus-visible, .event-calendar-scroll:focus-visible { outline: 2px solid #328478; outline-offset: 2px; }
.event-calendar-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.event-calendar-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.event-calendar-track { display: flex; gap: var(--calendar-gap); width: max-content; margin: 0; padding: 2px 0; list-style: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.event-calendar-track::after { content: ""; flex: 0 0 var(--calendar-tail-space, 0px); margin-left: calc(-1 * var(--calendar-gap)); }
.event-calendar-scroll.is-dragging .event-calendar-track { cursor: grabbing; }
.event-calendar-item { flex: 0 0 var(--calendar-day-size); width: var(--calendar-day-size); }
/* Login calendar: neutral past/future squares, blue prediction fill, green today dot. */
.event-calendar-day { position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #00000014; box-shadow: inset 0 0 0 .6px #1414141a; }
.event-calendar-day[data-future="true"] { background: #0000000d; }
.event-calendar-day[data-predicted="true"] { background-image: linear-gradient(#b8d6f0b8, #b8d6f0b8); }
.event-calendar-day[data-today="true"]::after { content: ""; position: absolute; top: 10px; right: 8px; width: 6px; height: 6px; border: .8px solid #1f734a; border-radius: 50%; background: #40f596; }
.calendar-event-icon { --icon-size: 20px; position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(var(--icon-size) * 1.2); height: var(--icon-size); }
.event-calendar-symbols { display: flex; flex: 1; align-items: center; justify-content: space-evenly; min-height: 0; padding: 0 8px 6px; }
.event-calendar-symbols > .calendar-event-icon { --icon-size: var(--event-icon-size, 60px); }
.calendar-event-icon svg { display: block; flex: none; overflow: visible; }
.calendar-card { width: calc(var(--icon-size) * 1.1); height: calc(var(--icon-size) * .8); }
.calendar-hourglass { width: var(--icon-size); height: var(--icon-size); }
.calendar-tibo { position: absolute; right: 0; bottom: 0; padding: 1px max(1px, calc(var(--icon-size) * .05)); border-radius: max(2px, calc(var(--icon-size) * .08)); background: #252622; color: #fff; font-family: ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif; font-size: max(7px, calc(var(--icon-size) * .3)); font-weight: 800; line-height: 1.1; }
.event-calendar-date { display: block; flex: none; height: 30px; padding: 8px 10px 0; color: var(--text); font-size: clamp(14px, calc(var(--calendar-day-size) * .17), 20px); font-weight: 600; line-height: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.event-calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.event-calendar-legend-entry { display: inline-flex; align-items: center; gap: 6px; }
.calendar-prediction-key { width: 24px; height: 20px; border-radius: 5px; background: #b8d6f0b8; }
.event-calendar-empty { color: var(--muted); font-size: 13px; }
.gallery-caption { display: flex; justify-content: space-between; gap: 16px; padding: 19px 0 21px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.6; }
.gallery-caption > span:first-child { color: #46534a; }
.caption-divider { color: #b2b9af; margin: 0 10px; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: start; }
.card { min-width: 0; background: var(--card); border-radius: 23px; overflow: hidden; box-shadow: 0 0 0 1px #253d3212; contain: layout paint; }
.gallery-grid > .card { position: relative; transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
@media (hover: hover) {
  .gallery-grid > .card:hover { z-index: 1; transform: translateY(-4px); box-shadow: 0 0 0 1px #3037341f, 0 4px 10px #0000000a, 0 14px 28px #0000001a; }
}
.artwork { position: relative; display: block; width: 100%; aspect-ratio: 300 / 220; border: 0; padding: 0; overflow: hidden; color: var(--text); background: #eeeedd; text-align: left; }
.artwork .art, .artwork .art-poster { position: absolute; height: 100%; width: auto; max-width: none; top: 0; left: 50%; transform: translateX(-50%); }
.artwork .art { visibility: hidden; }
.artwork .art.is-ready { visibility: visible; }
.is-animated > .art-poster { visibility: hidden; }
.scene { position: absolute; top: 14px; left: 14px; max-width: calc(100% - 28px); padding: 5px 9px; border-radius: 8px; background: #fffffff0; color: #325c5a; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity .18s; }
.artwork:hover .scene { opacity: 0; }
.artwork-error { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); padding: 20px; }
.info { padding: 14px 17px 16px; display: grid; gap: 13px; }
.votes { display: flex; min-height: 36px; border-radius: 8px; overflow: hidden; color: var(--vote-ink); font-size: 13px; font-weight: 650; }
.votes:has(.vote) { background: #f8f9f7; box-shadow: inset 0 0 0 1px #e9ece6; color: #566057; }
.vote { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 50%; gap: 7px; min-width: 0; padding: 7px 8px; border: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; transition: background .15s ease; }
.vote.negative svg { color: #c97973; }
.vote.positive svg { color: #5f957e; }
.vote + .vote::before { content: ""; position: absolute; left: 0; top: calc(50% - 8px); width: 1px; height: 16px; background: #dee4da; }
.vote:not(:disabled):hover { background: #f0f3ee; }
.vote:not(:disabled):active { background: #e6ece3; }
.vote-count { overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.vote svg { height: 18px; width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.auto-result { display: flex; align-items: center; justify-content: center; background: var(--negative); width: 100%; }
.auto-result.correct { background: var(--positive); }
.fingerprint-artwork { --muted: #c4ced8; --fingerprint-track: #edf1f533; min-height: 250px; background: #394b5c; color: #edf1f5; }
.fingerprint-result { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.fingerprint-heading { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 650; line-height: 22px; }
.fingerprint-heading svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fingerprint-models { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fingerprint-model-label { font-size: 12px; line-height: 17px; color: var(--muted); }
.fingerprint-model { font-size: 18px; font-weight: 650; line-height: 27px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fingerprint-rank-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; font-size: 11px; line-height: 16px; color: var(--muted); }
.fingerprint-rankings { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.fingerprint-ranking { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 6px; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.fingerprint-position { color: var(--muted); }
.fingerprint-rank-body { min-width: 0; }
.fingerprint-rank-line { display: flex; justify-content: space-between; gap: 6px; }
.fingerprint-rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fingerprint-rank-percent { flex: none; }
.fingerprint-rank-track { height: 3px; margin-top: 4px; border-radius: 2px; background: var(--fingerprint-track, var(--line)); overflow: hidden; }
.fingerprint-rank-fill { height: 100%; border-radius: inherit; background: var(--muted); opacity: .65; }
.fingerprint-ranking:first-child .fingerprint-rank-line { font-weight: 650; }
.fingerprint-card .info { padding: 11px 16px 13px; gap: 7px; }
.fingerprint-summary { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; overflow: visible; border-radius: 0; }
.fingerprint-probability { display: flex; align-items: baseline; gap: 7px; color: #28649b; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fingerprint-probability-label { color: var(--muted); font-size: 11px; font-weight: 400; }
.fingerprint-verdict { display: flex; align-items: center; justify-content: center; gap: 5px; flex: none; width: 85px; height: 30px; border-radius: 7px; background: #666; color: #fff; font-size: 13px; font-weight: 600; }
.fingerprint-verdict[data-state="consistent"] { background: #407a57; }
.fingerprint-verdict[data-state="close"] { background: #336bab; }
.fingerprint-verdict[data-state="lower"] { background: #a85417; }
.fingerprint-card .model-content { flex: 1 1 190px; }
.fingerprint-card .card-model { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fingerprint-card .effort { font-size: 12px; }
.fingerprint-card .reasoning { flex: 1 0 44px; min-width: 44px; width: 80px; max-width: 80px; }
.fingerprint-card .duration { font-size: 12px; }
.fingerprint-detail h3 { margin: 0 0 14px; font-size: 16px; }
.fingerprint-detail .detail-meta { overflow-wrap: anywhere; }
.fingerprint-detail .fingerprint-rank-name { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.fingerprint-probe { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.fingerprint-probe summary { cursor: pointer; font-size: 13px; line-height: 1.6; }
.fingerprint-probe summary:hover, .fingerprint-probe summary:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.model-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; min-height: 30px; }
.model-content { display: flex; align-items: center; gap: 6px; min-width: 0; }
.model { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.card-model { display: inline-flex; align-items: center; gap: 5px; }
.card-model > span { white-space: nowrap; }
.card-model-family { padding: 2px 5px; border-radius: 5px; color: #414943; font-size: 12px; font-weight: 600; line-height: 18px; }
.account-row { display: flex; align-items: center; gap: 6px; min-height: 30px; margin-top: -5px; padding-bottom: 8px; border-bottom: 1px solid #edf0e9; }
/* Keep account content mounted; a future display toggle can change this attribute. */
#gallery-grid[data-show-accounts="false"] .account-row { display: none; }
.account-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text); }
/* Login test gallery: 135-degree two-stop gradient, 700 weight and capsule border.
   Geometry scales from its 10px / 16px badge to this page's larger cards. */
.account-plan { --plan-fg: rgb(107, 30, 30); --plan-start: rgb(224, 198, 193); --plan-end: rgb(173, 86, 86); --plan-border: rgba(147, 61, 61, .36); flex: none; padding: 0 7px; border: 1px solid var(--plan-border); border-radius: 11px; background: linear-gradient(135deg, var(--plan-start), var(--plan-end)); color: var(--plan-fg); font-size: 12px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.account-plan[data-tone="pro"] { --plan-fg: rgb(89, 56, 0); --plan-start: rgb(229, 209, 147); --plan-end: rgb(183, 127, 20); --plan-border: rgba(181, 117, 10, .42); }
.account-plan[data-tone="plus"] { --plan-fg: rgb(5, 79, 58); --plan-start: rgb(209, 234, 224); --plan-end: rgb(86, 198, 178); --plan-border: rgba(15, 186, 130, .38); }
.account-plan[data-tone="pro-lite"] { --plan-fg: rgb(35, 51, 71); --plan-start: rgb(214, 221, 229); --plan-end: rgb(142, 160, 178); --plan-border: rgba(99, 114, 140, .36); }
.account-plan[data-tone="team"], .account-plan[data-tone="k12"] { --plan-fg: rgb(56, 43, 117); --plan-start: rgb(209, 198, 234); --plan-end: rgb(117, 91, 183); --plan-border: rgba(102, 76, 173, .36); }
.account-plan[data-tone="enterprise"] { --plan-fg: rgb(81, 51, 12); --plan-start: rgb(224, 204, 158); --plan-end: rgb(173, 114, 35); --plan-border: rgba(153, 96, 25, .36); }
.account-plan[data-tone="api"] { --plan-fg: rgb(20, 56, 122); --plan-start: rgb(224, 219, 224); --plan-end: rgb(183, 122, 147); --plan-border: rgba(147, 71, 107, .32); }
.account-plan[data-tone="free"] { --plan-fg: var(--muted); --plan-start: rgba(147, 163, 183, .20); --plan-end: rgba(147, 163, 183, .20); --plan-border: rgba(147, 163, 183, .35); }
.effort { font-size: 14px; color: var(--muted); flex-shrink: 0; }
.reasoning { position: relative; width: 68px; height: 11px; flex-shrink: 0; border-radius: 8px; background: #c8c9c7; --fill: #1687fa; }
.reasoning-fill { position: absolute; inset: 0 auto 0 0; width: calc(5px + (100% - 10px) * var(--index) / 4); border-radius: 8px; background: var(--fill); }
.reasoning-dots { position: absolute; inset: 0 5px; display: flex; align-items: center; justify-content: space-between; }
.reasoning-dots i { width: 2px; height: 2px; border-radius: 50%; background: #fff9; }
.reasoning-thumb { position: absolute; width: 14px; height: 14px; top: -1.5px; left: calc(5px + (100% - 10px) * var(--index) / 4); transform: translateX(-50%); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; }
.reasoning.ultra { --fill: linear-gradient(100deg, #4339cd, #b45dfa, #995aee); }
.duration { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bottom-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.usage { display: grid; gap: 3px; min-width: 90px; }
.metric { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; line-height: 1.4; font-size: 14px; font-variant-numeric: tabular-nums; }
.metric-label { color: var(--muted); white-space: nowrap; }
.metadata { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.prompt-button { padding: 2px 0; border: 0; background: none; color: var(--muted); font-size: 14px; line-height: 1.4; }
.prompt-button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.date { font-size: 12px; line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-artwork { background: #48564f; color: #edf0e9; }
.text-result { position: absolute; inset: 0; padding: 19px 21px; display: flex; flex-direction: column; gap: 12px; }
.text-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 650; line-height: 1.5; }
.text-status { font-size: 13px; color: #ffb5a7; }
.text-status.correct { color: #bedbac; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0; }
.answer-label, .excerpt-label { color: #c4cdc2; font-size: 13px; line-height: 1.6; }
.answer-number { font-size: 56px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.expected-answer { border-left: 1px solid #edf0e940; padding-left: 18px; }
.expected-answer .answer-number { font-size: 50px; line-height: 1.29; }
.reply-excerpt { border-top: 1px solid #edf0e940; padding-top: 10px; min-height: 0; }
.excerpt-text { font-size: 14px; line-height: 1.6; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.site-footer { display: flex; flex-direction: column; gap: 10px; padding: 30px 0 36px; margin-top: 48px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--muted); text-align: center; }
.footer-links, .footer-filing { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; }
.footer-filing { font-size: 14px; }
.footer-links a, .footer-filing a, .footer-link { color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.footer-filing a { text-decoration: underline; text-underline-offset: 4px; }
.footer-link { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.footer-links a:hover, .footer-filing a:hover, .footer-link:hover { color: var(--ink); text-decoration: underline; }
.site-info-dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 24px; }
.site-info-dialog .dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-info-body { overflow-y: auto; min-height: 0; line-height: 1.8; font-size: 14px; }
.site-info-body h3 { font-size: 15px; margin: 20px 0 8px; }
.site-info-body p { margin: 8px 0; }
.site-info-dialog[open] { display: flex; flex-direction: column; }
.empty-state { padding: 45px 20px; text-align: center; color: var(--muted); }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 30; padding: 12px; background: white; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
dialog { color: var(--text); background: #fafbf8; width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 64px); padding: 28px; border: 1px solid #ffffff99; border-radius: 22px; box-shadow: 0 30px 100px #0003; overscroll-behavior: contain; }
dialog::backdrop { background: #182820a6; }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.dialog-heading h2 { margin: 0; font-size: 24px; color: var(--ink); line-height: 1.4; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); background: #fff; border-radius: 50%; color: var(--text); line-height: 1; flex: none; }
.icon-button svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.icon-button:hover { background: #e8ece5; }
.detail-dialog { width: min(960px, calc(100% - 24px)); height: min(900px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); padding: 18px; overflow: hidden; }
.detail-dialog[open] { display: flex; flex-direction: column; gap: 14px; }
.detail-heading { display: flex; align-items: center; gap: 14px; flex: none; min-width: 0; }
#detail-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; flex: 1; min-width: 0; }
.detail-identity { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.detail-model { font-size: 24px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-identity .effort { font-size: 18px; }
.detail-identity .effort.ultra { color: rgb(66%, 37%, 100%); }
.detail-identity .effort-slider { width: 142px; max-width: 142px; flex: 0 0 142px; }
.detail-timing { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; max-width: 100%; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail-duration { font-size: 16px; }
#detail-content { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.detail-artwork { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 12px; background: #f0f0e9; }
.detail-artwork .art-poster, .detail-artwork .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.detail-artwork .art { visibility: hidden; }
.detail-artwork .art.is-ready { visibility: visible; }
.detail-meta { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.detail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 15px; line-height: 1.65; padding: 10px 14px; border: 1px solid var(--line); background: #fff; border-radius: 10px; margin: 0; overflow: auto; overscroll-behavior: contain; }
.detail-prompt { display: flex; flex-direction: column; gap: 8px; flex: none; min-width: 0; }
.detail-prompt-text { height: calc(4 * 1.65em + 22px); }
.detail-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.detail-toolbar h3 { margin: 0; font-size: 16px; }
.detail-toolbar .button { padding: 5px 10px; font-size: 12px; min-height: 28px; }
.detail-response { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.detail-response.fingerprint-detail { display: block; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.fingerprint-detail > .detail-meta { margin-top: 12px; }
.fingerprint-probe .detail-reply { max-height: 300px; margin-top: 8px; }
.detail-reply { flex: 1; min-height: 0; }
.detail-dialog.prompt-only { width: min(720px, calc(100% - 32px)); height: fit-content; max-height: min(720px, calc(100dvh - 48px)); }
.prompt-only #detail-content { flex: 0 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.prompt-only .detail-prompt-text { height: auto; }
.detail-dialog.matrix-preview { width: min(760px, calc(100% - 48px)); height: min(640px, 82dvh); max-height: calc(100dvh - 48px); padding: 18px; }
.matrix-preview::backdrop { background: #18282066; }
.matrix-preview #detail-content { overflow-y: auto; overscroll-behavior: contain; }
.matrix-preview .detail-identity { flex-wrap: wrap; }
.matrix-preview .detail-model { font-size: 20px; }
.matrix-preview .detail-identity .effort { flex: 0 0 3em; width: 3em; font-size: 15px; text-align: center; white-space: nowrap; }
.matrix-preview .detail-timing, .matrix-preview .detail-prompt { display: none; }
.matrix-preview .detail-artwork { min-height: min(200px, 35dvh); border-radius: 8px; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; flex: none; margin: 0; padding-top: 2px; }
.preview-metrics dt { color: var(--muted); font-size: 12px; line-height: 18px; }
.preview-metrics dd { margin: 3px 0 0; font-size: 18px; font-weight: 600; line-height: 24px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.preview-metadata { flex: none; color: var(--muted); font-size: 12px; line-height: 18px; }
.matrix-preview .preview-effort-slider .reasoning-fill { width: calc(24px + (100% - 24px) * var(--index) / var(--steps)); }
.matrix-preview .preview-effort-slider .reasoning-thumb { left: calc(12px + (100% - 24px) * var(--index) / var(--steps)); }
.preview-effort-input { position: absolute; inset: 0; width: 100%; height: 32px; padding: 0; margin: 0; border: 0; opacity: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.preview-effort-input::-webkit-slider-runnable-track { height: 20px; border: 0; background: transparent; }
.preview-effort-input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin-top: -2px; border: 0; background: transparent; }
.preview-effort-input::-moz-range-track { height: 20px; border: 0; background: transparent; }
.preview-effort-input::-moz-range-thumb { width: 24px; height: 24px; border: 0; background: transparent; }
@media (max-width: 799px) {
  #detail-summary { flex-wrap: wrap; gap: 6px; }
  .detail-model { font-size: 21px; }
  .detail-timing { gap: 12px; font-size: 12px; }
  .detail-duration { font-size: 13px; }
}
@media (max-width: 479px), (max-height: 499px) {
  dialog.detail-dialog { padding: 12px; }
  .detail-dialog[open] { gap: 8px; }
  .detail-heading { gap: 8px; }
  .detail-model { font-size: 18px; }
  .detail-identity { gap: 6px; }
  .detail-identity .effort { font-size: 14px; }
  .detail-identity .effort-slider { width: 88px; flex-basis: 88px; }
  .detail-prompt-text { font-size: 13px; }
}
.dialog-intro { color: var(--muted); font-size: 14px; line-height: 1.8; margin: -4px 0 22px; }
.submission-dialog { width: min(1040px, calc(100% - 32px)); padding: 22px; max-height: calc(100dvh - 32px); }
.submission-dialog .dialog-heading { margin-bottom: 16px; align-items: center; }
.submission-dialog .dialog-heading .eyebrow { display: none; }
.submission-columns { display: grid; grid-template-columns: minmax(390px, 1.18fr) minmax(280px, 1fr); align-items: stretch; gap: 24px; }
.preview-column, .test-fields { min-width: 0; }
.test-fields { display: flex; flex-direction: column; gap: 16px; }
.preview-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.preview-caption > span:first-child { font-weight: 650; color: var(--text); }
#draft-card .card { border-radius: 18px; }
#draft-card .artwork { cursor: pointer; aspect-ratio: 16 / 10; }
#draft-card .artwork .art, #draft-card .artwork .art-poster { width: 100%; height: 100%; left: 0; transform: none; object-fit: contain; }
#draft-card .info { padding: 13px 16px 15px; gap: 9px; }
#draft-card .model-row { min-height: 30px; flex-wrap: nowrap; gap: 10px; }
#draft-card .model-content { flex: 1; gap: 5px; }
#draft-card .model { width: 156px; min-width: 0; font-size: 14px; font-weight: 650; cursor: pointer; }
.model-picker { display: flex; align-items: center; justify-content: space-between; gap: 7px; text-align: left; }
#model-picker-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-chevron { width: 6px; height: 6px; flex: none; margin: -3px 3px 0 0; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.model-picker[aria-expanded="true"] .model-chevron { transform: translateY(3px) rotate(225deg); }
.model-options { position: fixed; z-index: 10; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid #ced6ca; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px #22382c26; }
.model-option { position: relative; padding: 9px 30px 9px 11px; border-radius: 6px; color: var(--text); font-size: 14px; line-height: 20px; cursor: pointer; white-space: nowrap; }
.model-option.is-active, .model-option:hover { background: #edf1e8; }
.model-option[aria-selected="true"] { font-weight: 650; }
.model-option[aria-selected="true"]::after { content: "✓"; position: absolute; right: 10px; color: #52644a; }
#draft-card .effort { min-width: 2.5em; text-align: center; font-size: 12px; }
#draft-card .account-row { margin-top: 0; padding-bottom: 8px; min-height: 30px; }
#draft-card .account-label { flex: 0 1 225px; width: 225px; font-size: 14px; font-weight: 600; }
#draft-card .account-plan { min-width: 72px; text-align: center; }
#draft-card .account-plan:hover { filter: brightness(1.05); }
.draft-info .inline-edit { min-width: 0; border: 1px solid transparent; border-radius: 5px; padding: 3px 4px; color: inherit; background: transparent; font: inherit; line-height: 1.4; }
.draft-info .inline-edit:hover { border-color: #d5dcd1; background: #f7f8f4; }
.draft-info .inline-edit:focus { background: #fff; }
.draft-info .inline-edit::placeholder { color: var(--muted); opacity: 1; }
.draft-info input[type="number"] { appearance: textfield; }
.draft-info input[type="number"]::-webkit-inner-spin-button, .draft-info input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.draft-duration { display: flex; align-items: center; flex: none; gap: 1px; }
.draft-duration input { width: 57px; text-align: right; }
#draft-card .usage { flex: 1; min-width: 0; max-width: 175px; }
#draft-card .metric { gap: 6px; }
#draft-card .metric input { width: 95px; flex: 1; text-align: right; }
#draft-card .metadata { min-width: 0; }
#draft-card .date { width: 215px; max-width: 100%; font-size: 12px; color: var(--muted); }
#finished-at-picker { text-align: right; font-variant-numeric: tabular-nums; }
.datetime-panel { position: fixed; z-index: 11; width: 320px; overflow-y: auto; overscroll-behavior: contain; padding: 14px; border: 1px solid #ced6ca; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px #22382c26; }
.datetime-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 14px; }
.datetime-heading > span { font-size: 12px; color: var(--muted); }
.calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.calendar-heading > button { width: 30px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fafbf8; color: var(--text); font-size: 24px; line-height: 1; }
.calendar-month { display: flex; align-items: center; gap: 3px; font-size: 13px; }
.datetime-panel input { min-width: 0; padding: 6px 3px; border: 1px solid #d5dcd1; border-radius: 6px; background: #fafbf8; color: var(--text); font: 500 15px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; font-variant-numeric: tabular-nums; }
#calendar-year { width: 56px; }
#calendar-month { width: 34px; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendar-weekdays { margin-bottom: 5px; color: var(--muted); font-size: 12px; text-align: center; }
.calendar-days button { position: relative; min-width: 0; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.calendar-days button.outside-month { color: #91998b; }
.calendar-days button:not(:disabled):hover, .calendar-heading > button:not(:disabled):hover { background: #edf1e8; }
.calendar-days button[aria-pressed="true"] { border-color: #0a84ff; background: #edf1e8; color: var(--ink); font-weight: 700; }
.calendar-days button[aria-current="date"]::after { content: ""; position: absolute; bottom: 2px; left: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 50%; background: #0a84ff; }
.datetime-clock { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
#calendar-selection { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.datetime-clock > div { display: flex; align-items: center; gap: 5px; }
.datetime-clock input { width: 39px; }
.datetime-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.datetime-actions > div { display: flex; gap: 8px; }
.datetime-actions .button { padding: 7px 12px; min-height: 32px; font-size: 13px; }
.draft-prompt-label { font-size: 14px; line-height: 1.4; color: var(--muted); cursor: default; }
.svg-placeholder { position: absolute; inset: auto 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #7d887d; font-size: 12px; line-height: 1.4; pointer-events: none; }
.svg-placeholder strong { font-size: 16px; font-weight: 550; color: #637162; }
.replace-svg { position: absolute; bottom: 12px; right: 12px; border-radius: 7px; padding: 6px 9px; background: #fffffff0; color: #465344; font-size: 12px; opacity: 0; pointer-events: none; }
.artwork:hover .replace-svg, .artwork:focus-visible .replace-svg { opacity: 1; }
.text-button { background: transparent; border: 0; padding: 5px 0; color: #52644a; font-size: 13px; }
.text-button:not(:disabled):hover { text-decoration: underline; text-underline-offset: 3px; }
.test-fields label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 550; min-width: 0; }
.test-fields input:not([type="range"]), .editor-panel textarea { width: 100%; min-width: 0; min-height: 38px; border: 1px solid #d5dcd1; border-radius: 8px; padding: 9px 10px; color: var(--text); background: #fff; font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; }
.effort-slider { position: relative; width: 126px; min-width: 78px; flex: 1; max-width: 126px; height: 32px; --index: 2; }
/* Match BenchmarkReasoningSlider / BenchmarkUltraTrackFill in the login app. */
.effort-slider .reasoning { position: absolute; top: 50%; left: 0; width: 100%; height: 20px; border-radius: 999px; background: #00000017; transform: translateY(-50%); pointer-events: none; --fill: #0a84ff; }
.effort-slider .reasoning::after { content: ""; position: absolute; inset: 0; border: .5px solid #00000014; border-radius: inherit; }
.effort-slider .reasoning-fill { width: calc(24px + (100% - 24px) * var(--index) / 4); border-radius: inherit; overflow: hidden; }
.effort-slider .reasoning-dots { inset-inline: 12px; }
.effort-slider .reasoning-dots i { width: 4px; height: 4px; background: #0000004d; }
.effort-slider .reasoning-dots i.is-filled { background: #ffffff8c; }
.effort-slider .reasoning-thumb { width: 24px; height: 24px; top: -2px; left: calc(12px + (100% - 24px) * var(--index) / 4); border: .5px solid #00000014; box-shadow: 0 1px 2px #00000029; }
.effort-slider .reasoning.ultra { --fill: linear-gradient(90deg, rgb(23%, 20%, 78%) 0%, rgb(42%, 26%, 89%) 25%, rgb(63%, 35%, 96%) 50%, rgb(62%, 34%, 94%) 72%, rgb(51%, 35%, 91%) 100%); }
.effort-slider .reasoning.ultra .reasoning-dots { display: none; }
.effort-slider .reasoning.ultra .reasoning-fill::before, .effort-slider .reasoning.ultra .reasoning-fill::after { content: ""; position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.effort-slider .reasoning.ultra .reasoning-fill::before { width: 48%; height: 95%; left: 43%; top: 18%; background: rgb(88% 67% 100% / .30); filter: blur(9px); }
.effort-slider .reasoning.ultra .reasoning-fill::after { width: 40%; height: 115%; left: 77%; top: 85%; background: rgb(77% 53% 100% / .34); filter: blur(10px); }
.reasoning-stars { display: none; position: absolute; inset: 0; z-index: 1; }
.effort-slider .ultra .reasoning-stars { display: block; }
.reasoning-stars i { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); background: rgb(255 255 255 / var(--star-opacity)); filter: blur(.16px); box-shadow: 0 0 .8px rgb(255 255 255 / calc(var(--star-opacity) * .45)); }
#draft-card .effort.ultra { color: rgb(66%, 37%, 100%); }
#draft-card .model-content:has(.effort-slider:hover) .effort:not(.ultra), #draft-card .model-content:has(#test-effort:focus-visible) .effort:not(.ultra) { color: #0a84ff; }
/* The transparent input provides drag, touch and keyboard semantics;
   its 24px thumb aligns the hit geometry with the visible custom thumb. */
#test-effort { position: absolute; inset: 0; width: 100%; height: 32px; padding: 0; margin: 0; border: 0; opacity: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
#test-effort::-webkit-slider-runnable-track { height: 20px; border: 0; background: transparent; }
#test-effort::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin-top: -2px; border: 0; background: transparent; }
#test-effort::-moz-range-track { height: 20px; border: 0; background: transparent; }
#test-effort::-moz-range-thumb { width: 24px; height: 24px; border: 0; background: transparent; }
.custom-model-field { display: block; height: 32px; min-height: 32px; }
.custom-model-field.is-empty { visibility: hidden; pointer-events: none; }
.custom-model-field input { width: 100%; height: 32px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.editor-workspace { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; border: 1px solid #d5dcd1; border-radius: 10px; background: #fff; overflow: hidden; }
.editor-tabs { display: flex; align-items: stretch; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid #d5dcd1; background: #f1f3ee; }
.editor-tabs button { position: relative; margin-bottom: -1px; padding: 9px 14px 10px; border: 1px solid transparent; border-bottom-color: #d5dcd1; border-radius: 7px 7px 0 0; color: var(--muted); background: transparent; font-size: 13px; font-weight: 600; }
.editor-tabs button[aria-selected="true"] { color: var(--ink); background: #fff; border-color: #d5dcd1; border-bottom-color: #fff; }
.editor-tabs button:hover { color: var(--ink); }
.editor-panels { display: grid; flex: 1; height: 260px; min-height: 260px; }
.editor-panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.editor-panel textarea { flex: 1; min-height: 0; padding: 14px 16px; border: 0; border-radius: 0; resize: none; line-height: 1.6; }
.svg-code-panel textarea { font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.editor-actions { display: flex; justify-content: flex-end; padding: 0 12px 10px; }
.editor-actions .button { min-height: 32px; padding: 7px 12px; font-size: 12px; }
.editor-workspace .form-message { margin: 0; padding: 0 14px 10px; }
.form-message { min-height: 18px; margin: 7px 0 0; color: #656e62; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.form-message.error { color: #a93c2b; }
.submission-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 16px; }
.submission-footer .form-message { margin: 0; }
.submission-footer .button { flex-shrink: 0; min-width: 120px; }
.button-primary { background: #2f4944; color: #fff; border-color: #2f4944; }
.button-primary:not(:disabled):hover { background: #3e5d56; color: #fff; }
.button:disabled { background: #e6e9e2; border-color: #d5dbcf; color: #929a8b; }
@media (max-width: 879px) {
  .submission-dialog { padding: 20px; }
  .submission-columns { grid-template-columns: minmax(0, 1fr); }
  .preview-column { width: min(100%, 520px); margin-inline: auto; }
  .editor-panels { height: 220px; min-height: 220px; }
  .test-fields input:not([type="range"]), .editor-panel textarea { font-size: 16px; }
  .submission-footer { align-items: flex-end; }
}
@media (max-width: 479px) {
  .submission-dialog { padding: 16px; width: calc(100% - 20px); }
  #draft-card .info { padding: 10px; }
  #draft-card .model-row { flex-wrap: wrap; }
  #draft-card .model-content { flex-basis: 100%; }
  #draft-card .model { width: 148px; }
  #draft-card .draft-duration { margin-left: auto; }
  #draft-card .bottom-row { flex-wrap: wrap; }
  #draft-card .usage { max-width: none; flex-basis: 100%; }
  #draft-card .metadata { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 1599px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } }
@media (max-width: 1199px) {
  .pelican-showcase { gap: 24px; }
  .showcase-columns, .showcase-model-row { grid-template-columns: 144px 38px minmax(60px, 1fr) 112px; gap: 8px; padding-inline: 8px; }
  .header-inner { flex-wrap: wrap; padding-block: 16px; gap: 15px 20px; }
  .gallery-tabs { order: 3; width: 100%; justify-content: flex-start; }
  .gallery-tabs button { flex: 1; }
}
@media (max-width: 1099px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-width, .header-inner { width: min(100% - 48px, 840px); } }
@media (max-width: 1099px) {
  .pelican-showcase { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 24px; }
  .showcase-preview { width: 100%; }
  .pelican-showcase .showcase-models { display: none; }
}
@media (max-width: 659px) {
  .pelican-showcase { padding-block: 18px 24px; }
  .showcase-columns, .showcase-model-row { grid-template-columns: 124px 28px minmax(44px, 1fr) 96px; gap: 4px; padding-inline: 4px; }
  .showcase-model-button { padding-inline: 6px; font-size: 12px; }
  .showcase-model-name { column-gap: 3px; }
  .showcase-metrics, .showcase-columns > :last-child { padding-left: 4px; }
  .showcase-metrics { gap: 4px; --showcase-count-width: 36px; }
  .showcase-effort, .showcase-metrics { font-size: 12px; }
  .page-width, .header-inner { width: calc(100% - 32px); }
  .header-inner { min-height: 76px; gap: 12px; padding-block: 12px; }
  .brand { gap: 9px; }.brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: 17px; }.brand-name small { font-size: 8px; letter-spacing: .18em; }
  .header-actions { gap: 7px; }.submit-trigger { padding: 9px 10px; font-size: 13px; white-space: nowrap; }
  .motion-toggle { width: 38px; padding: 9px; }.motion-toggle .motion-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sync-login { width: 38px; min-width: 38px; padding: 9px; }
  .sync-label { display: none; }
  .gallery-tabs { gap: 3px; padding: 4px; border-radius: 10px; }
  .gallery-tabs button { gap: 5px; padding: 10px 6px; font-size: 12px; }.gallery-tabs button span { font-size: 11px; }
  .gallery-section { padding-top: 30px; }.event-calendar { padding-bottom: 24px; }
  .eyebrow { font-size: 10px; }.gallery-caption { font-size: 12px; }.gallery-caption > span:last-child { display: none; }
  .gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 440px; margin-inline: auto; }
  .card { border-radius: 21px; }.info { padding: 15px 18px 17px; }
  .site-footer { margin-top: 34px; }
  dialog { padding: 20px; max-height: calc(100dvh - 28px); }.dialog-heading h2 { font-size: 21px; }
}
@media (max-width: 379px) {
  .showcase-columns, .showcase-model-row { grid-template-columns: 112px 26px minmax(40px, 1fr) 80px; gap: 3px; }
  .showcase-model-button, .showcase-metrics, .showcase-columns { font-size: 11px; }
  .showcase-model-name { column-gap: 3px; }
  .showcase-metrics, .showcase-columns > :last-child { padding-left: 2px; --showcase-count-width: 33px; }
}
@container showcase-preview (max-width: 560px) {
  /* Reserve four digits plus 分/秒 so sample duration cannot resize the slider. */
  .showcase-preview-controls .showcase-model-row { --preview-model-width: 126px; --preview-effort-width: 32px; --preview-time-width: calc(4ch + 2em); --preview-gap: 6px; grid-template-columns: var(--preview-model-width) var(--preview-effort-width) minmax(96px, 1fr) var(--preview-time-width); min-width: 0; padding-block: 8px; font-size: 12px; }
  .showcase-preview-controls :is(.showcase-model-button, .showcase-effort, .showcase-metrics) { font-size: 12px; }
  .showcase-preview-controls .showcase-model-button { min-height: 44px; display: flex; align-items: center; padding-left: 6px; }
  .showcase-preview-controls .showcase-metrics { display: block; }
  .showcase-preview-controls .showcase-duration { display: block; }
  .showcase-preview-controls .showcase-count { display: none; }
  .showcase-preview-controls .showcase-slider-control { width: 100%; height: 44px; }
}
@container showcase-preview (max-width: 359px) {
  .showcase-preview-controls .showcase-model-row { --preview-model-width: 114px; --preview-effort-width: 28px; --preview-gap: 4px; grid-template-columns: var(--preview-model-width) var(--preview-effort-width) minmax(88px, 1fr) var(--preview-time-width); font-size: 11px; }
  .showcase-preview-controls :is(.showcase-model-button, .showcase-effort, .showcase-metrics) { font-size: 11px; }
}
@media (max-width: 479px) {
  /* Keep the new switch in the existing actions row on narrow screens. */
  body:not(.matrix-view) .header-inner:has(#showcase-view-switch:not([hidden])) .brand-name,
  .header-inner:has(#showcase-view-switch:not([hidden])) .submit-label { display: none; }
  body:not(.matrix-view) .header-inner:has(#showcase-view-switch:not([hidden])) .submit-trigger { width: 38px; padding: 9px; }
  .showcase-view-switch button { padding-inline: 8px; }
}
@media (max-width: 359px) { .reasoning { width: 50px; }.model { font-size: 14px; }.text-result { padding: 14px 16px; gap: 7px; }.answer-number { font-size: 48px; }.excerpt-text { -webkit-line-clamp: 2; } }
/* Matrix observation keeps one slim header row, even at the usual wrapping
   breakpoints. Narrow devices may scroll this row horizontally. */
.matrix-view .site-header { transform: none; }
.matrix-view .brand-mark, .matrix-view .brand-name small { display: none; }
.matrix-view .header-inner { width: min(100% - 24px, 1560px); min-height: 44px; height: 44px; padding-block: 0; flex-wrap: nowrap; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.matrix-view .header-inner::-webkit-scrollbar { display: none; }
.matrix-view .brand-name { font-size: 15px; letter-spacing: 0; white-space: nowrap; }
.matrix-view .gallery-tabs { order: 0; flex: none; width: auto; gap: 2px; padding: 2px; border-radius: 7px; }
.matrix-view .gallery-tabs button { flex: none; min-height: 28px; padding: 4px 9px; gap: 5px; font-size: 12px; border-radius: 5px; }
.matrix-view .gallery-tabs button span { font-size: 11px; }
.matrix-view .header-actions { flex: none; gap: 6px; }
.matrix-view .header-actions .button { min-height: 32px; height: 32px; padding: 4px 10px; border-radius: 7px; font-size: 12px; white-space: nowrap; }
.matrix-view .sync-login { min-width: 112px; }
.matrix-view .showcase-view-switch { padding: 2px; border-radius: 7px; }
.matrix-view .showcase-view-switch button { min-height: 26px; padding: 3px 8px; font-size: 12px; border-radius: 5px; }
@media (max-width: 879px) {
  .matrix-view .header-inner { gap: 8px; }
  .matrix-view .gallery-tabs button span { display: none; }
  .matrix-view .motion-toggle .motion-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .matrix-view .submit-label { display: none; }
  .matrix-view .header-actions .button { width: 32px; padding: 4px; }
  .matrix-view .sync-login { min-width: 32px; }
  .matrix-view .sync-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .page-scroll { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; }.card:hover, .card:focus-within, .gallery-grid > .card:hover { transform: none; } }