/* Paradigm typography with the shared responsive grid used by /research/pace. */
@font-face { font-family: 'Paradigm Serif'; src: url('/puzzles/claw/fonts/ParadigmSerif-BetaRegular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paradigm Serif'; src: url('/puzzles/claw/fonts/ParadigmSerif-BetaRegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Paradigm Mono'; src: url('/puzzles/claw/fonts/ParadigmMonoBeta-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Paradigm SemiMono'; src: url('/puzzles/claw/fonts/ParadigmSemiMonoBeta-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root {
  --bg: #fff; --subtle: #f6f6f6; --text: #000; --border: #ccc; --error: #e04545;
  --muted: #666; --inactive: #999; --success: #18704c; --attention: #80641d;
  --surface-medium: #e0e0e099; --surface-medium-hover: #e0e0e0cc; --surface-medium-active: #ddd;
  --surface-high: #161616; --surface-high-hover: #161616e5; --text-on-high: #fff; --text-on-high-active: #ffffffbf;
  --surface-selected: #ccc; --surface-menu: #eee; --surface-menu-hover: #ddd;
  --surface-code: rgba(0,0,0,.04); --surface-hover: rgba(0,0,0,.02); --surface-error: #faf1f1;
  --color-primary-green-mobile: #00ff00;
  /* Claw text variant of Paradigm green: 5.137:1 on white for small labels. */
  --color-text-brand-green: #008000;
  --serif: 'Paradigm Serif', Georgia, serif; --mono: 'Paradigm Mono', Menlo, monospace; --ui: 'Paradigm SemiMono', Menlo, monospace;
  /* Figma Paradigm Design Library, 2026-10-13: Semi Mono Default / Button / Small.
     https://www.figma.com/design/ZlhMzlJ74tqH8cluFRJzqL?node-id=17160-1112
     All three use Regular, 135% leading and zero tracking. */
  --font-weight-regular: 400;
  --icon-size-default: 16px;
  --type-mono-default-size: 12px;
  --type-mono-button-size: 14px;
  --type-mono-small-size: 12px;
  --type-mono-line-height: 1.35;
  --type-mono-letter-spacing: 0;
  --type-mono-button-line-height: var(--type-mono-line-height);
  --type-mono-button-letter-spacing: var(--type-mono-letter-spacing);
  --type-mono-default: var(--font-weight-regular) var(--type-mono-default-size)/var(--type-mono-line-height) var(--ui);
  --type-mono-button: var(--font-weight-regular) var(--type-mono-button-size)/var(--type-mono-line-height) var(--ui);
  --type-mono-small: var(--font-weight-regular) var(--type-mono-small-size)/var(--type-mono-line-height) var(--ui);
  --type-code: var(--font-weight-regular) var(--type-mono-default-size)/var(--type-mono-line-height) var(--ui);
  --type-heading-size-small: 22px;
  --type-heading-size-medium: 24px;
  --type-heading-size-large: 28px;
  --type-heading-size: var(--type-heading-size-small);
  --type-heading-line-height: 1.1;
  --type-section-size: 19px;
  --type-serif-section: var(--font-weight-regular) var(--type-section-size)/var(--type-heading-line-height) var(--serif);
  --type-plate-letter-spacing: -.03em;
  --header-height: 68px;
  /* Pace's layout and spacing tokens. Breakpoints: 600 / 1024 / 1360. */
  --grid-max-width: 1752px;
  --grid-columns: 6;
  --grid-margin: 16px;
  --grid-gutter: 16px;
  --grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  --space-none: 0;
  --space-1: 4px;
  --space-3: 16px;
  --space-4: 36px;
  --space-5: 32px;
  --space-6: 48px;
  --space-8: 72px;
  --space-line-break-mono: 16px;
  --rail-right: max(var(--grid-margin), calc((100vw - var(--grid-max-width)) / 2 + var(--grid-margin)));
}
@media (min-width: 600px) {
  :root { --type-mono-small-size: 10px; --type-heading-size: var(--type-heading-size-medium); --type-section-size: 21px; --grid-columns: 8; --grid-margin: 24px; --grid-gutter: 24px; --space-1: 6px; --space-8: 96px; }
}
@media (min-width: 1024px) {
  :root { --type-mono-button-size: 12px; --type-heading-size: var(--type-heading-size-large); --grid-columns: 12; --space-1: 8px; --space-3: 24px; --space-5: 48px; --space-6: 64px; --space-8: 108px; }
}
@media (min-width: 1360px) {
  :root { --grid-margin: 36px; --grid-gutter: 36px; }
}
* { box-sizing: border-box; letter-spacing: 0; }
.type-semi-mono-default { font: var(--type-mono-default); letter-spacing: var(--type-mono-letter-spacing); }
.type-semi-mono-small { font: var(--type-mono-small); letter-spacing: var(--type-mono-letter-spacing); }
.type-serif-headline-large { font:var(--font-weight-regular) var(--type-heading-size)/var(--type-heading-line-height) var(--serif); letter-spacing:var(--type-plate-letter-spacing); font-variant-numeric:lining-nums tabular-nums; }
html { scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--serif); font-size: 16px; line-height: 1.25; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--muted); text-decoration: underline; }
button, input { font: inherit; }
button, summary { cursor: pointer; }
button:disabled { opacity: .45; cursor: wait; }
svg { width: 16px; height: 16px; flex-shrink: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
h1, h2, h3 { font-weight: 400; }
h1 { font-size: 28px; line-height: 1.15; margin: 0 0 24px; }
h2 { font-size: 18px; line-height: 1.25; margin: 32px 0 8px; }
h3 { font-size: 16px; line-height: 1.25; margin: 24px 0 8px; }
p { margin: 0 0 12px; }
.container { width: 100%; max-width: var(--grid-max-width); margin-inline: auto; padding-inline: var(--grid-margin); }
main.container { display: grid; grid-template-columns: var(--grid-template-columns); column-gap: var(--grid-gutter); align-content: start; padding-block: var(--grid-margin) var(--space-6); min-width: 0; overflow-wrap: anywhere; }
main.container > * { grid-column: 1 / -1; min-width: 0; }
/* Paradigm button tokens shared by Claw selectors, wallet, leaderboard, and tool actions. */
.entry-actions, .wallet-actions, .account-actions, .pd-header, .model-leaderboard, .pad, .btn--action, .tool-surface {
  --btn-height: 34px;
  --btn-padding-lg: 12px;
  --btn-padding-sm: 8px;
  --btn-gap: 6px;
  --radius-medium: 14px;
  --font-weight-regular: 400;
  --color-text-default: var(--text);
  --btn-surface-medium: var(--surface-medium);
  --btn-surface-medium-hover: var(--surface-medium-hover);
  --btn-surface-medium-active: var(--surface-medium-active);
  --btn-surface-high: var(--surface-high);
  --btn-surface-high-hover: var(--surface-high-hover);
  --btn-text-high: var(--text-on-high);
  --btn-text-high-active: var(--text-on-high-active);
  /* Frontiers BasketContent.svelte: fade the entire disabled primary CTA. */
  --btn-primary-disabled-opacity: .4;
  --btn-stroke-low: var(--border);
  --btn-stroke-low-hover: var(--muted);
  --stroke-medium: 1px;
  --btn-icon-size: var(--icon-size-default);
  --btn-disabled-opacity: .45;
  --color-focus-outline: var(--border);
  --btn-focus-width: 2px;
  --btn-focus-offset: 2px;
  --btn-blur: 12px;
  --duration-fast: 150ms;
  --ease-standard: ease;
}
/* Softer disabled treatment reserved for the large game controls. */
.pad,.btn--action {
  --btn-action-surface-disabled: var(--subtle);
  --btn-action-text-disabled: var(--muted);
}
.btn--action {
  --font-family-semi-mono: var(--ui);
  /* Adapt the portable action CTA to Figma's responsive Button role. */
  --font-size-small: var(--type-mono-button-size);
  --radius-small: 4px;
  --color-surface-subtle: var(--subtle);
  --color-text-muted: var(--muted);
  --color-primary-black-mobile: #000;
}
/* Paradigm SemiMono provides the same arrow family for CTA and game directions. */
.btn-arrow {display:inline-block;flex-shrink:0;font:inherit;letter-spacing:inherit;color:inherit}
/* Figma ui/selector (17370:1137), adapted to content-width segments.
   The 4px inset is component geometry; the selected fill is Grey 400. */
.entry-actions {
  --color-text-muted: var(--muted);
  --selector-padding: 4px;
  --selector-surface: var(--subtle);
  --selector-surface-selected: var(--surface-selected);
  display: flex;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  justify-self: start;
  gap: var(--selector-padding);
  padding: var(--selector-padding);
  border-radius: var(--radius-medium);
  background: var(--selector-surface);
  margin-bottom: var(--space-3);
}
/* Specificity keeps legacy .btn and marketplace overrides out of these CTAs. */
.tool-surface .tool-button,
.pd-menu-trigger.btn,
.model-leaderboard .leaderboard-refresh.btn,
.entry-actions .entry-link.btn,
:is(.wallet-actions,.account-actions) .wallet-button.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--btn-gap); width:auto; max-width:100%; height:var(--btn-height); min-height:var(--btn-height); padding:var(--space-none) var(--btn-padding-lg); margin:var(--space-none); border:0; border-radius:var(--radius-medium); background:transparent; color:var(--color-text-default); font:var(--font-weight-regular) var(--type-mono-button-size)/var(--type-mono-button-line-height) var(--ui); letter-spacing:var(--type-mono-button-letter-spacing); white-space:nowrap; text-decoration:none; cursor:pointer; overflow:clip; transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard); }
.pd-menu-trigger.btn:focus-visible,
.model-leaderboard .leaderboard-refresh.btn:focus-visible,
.entry-actions .entry-link.btn:focus-visible,
:is(.wallet-actions,.account-actions) .wallet-button.btn:focus-visible { outline:var(--btn-focus-width) solid var(--color-focus-outline); outline-offset:var(--btn-focus-offset); }
.entry-actions .entry-link.btn--selector {min-width:0;height:auto;padding-block:calc((var(--btn-height) - var(--type-mono-button-size) * var(--type-mono-button-line-height)) / 2);color:var(--color-text-muted);white-space:normal;text-align:center;text-wrap:balance}
.entry-actions .entry-link.btn--selector:is(:hover,:focus-visible) {background:var(--btn-surface-medium-hover);color:var(--color-text-default)}
.entry-actions .entry-link.btn--selector:is([aria-current="page"],:active) {background:var(--selector-surface-selected);color:var(--color-text-default);backdrop-filter:blur(var(--btn-blur));-webkit-backdrop-filter:blur(var(--btn-blur))}
.pd-menu-trigger.btn--medium { background:var(--btn-surface-medium); color:var(--color-text-default); }
.pd-menu-trigger.btn--medium:is(:hover,:focus-visible) { background:var(--btn-surface-medium-hover); }
.pd-menu-trigger.btn--medium:active { background:var(--btn-surface-medium-active); }
:is(.wallet-actions,.account-actions) .wallet-button.btn--low { border:var(--stroke-medium) solid var(--btn-stroke-low); }
:is(.wallet-actions,.account-actions) .wallet-button.btn--low:not(:disabled):not([aria-disabled="true"]):is(:hover,:focus-visible) { border-color:var(--btn-stroke-low-hover); }
:is(.wallet-actions,.account-actions) .wallet-button.btn--low:not(:disabled):not([aria-disabled="true"]):active { background:var(--btn-surface-medium-active); }
:is(.wallet-actions,.account-actions) .wallet-button.btn:is(:disabled,[aria-disabled="true"]) { opacity:var(--btn-disabled-opacity); cursor:default; }
.wallet-button.btn > span { letter-spacing:inherit; }
/* Center visible letterforms against the icon, without the font's extra leading. */
.wallet-button.btn :is([data-top-up-label],[data-faucet-label]) {text-box-trim:trim-both;text-box-edge:cap alphabetic}
.wallet-button.btn svg,.wallet-button.btn .btn-icon { display:block; flex-shrink:0; }
.wallet-button.btn > svg,.wallet-button.btn [data-top-up-icon] > svg { width:var(--btn-icon-size); height:var(--btn-icon-size); }
@media (min-width: 1024px) {
  .entry-actions, .wallet-actions, .account-actions, .pd-header, .model-leaderboard, .tool-surface { --btn-height:30px; --radius-medium:12px; }
}
.introduction p { margin-bottom: 12px; }
.btn, .pd-btn { display: inline-flex; align-items: center; justify-content: center; font: var(--type-mono-button); border-radius: 12px; color: var(--text); border: 0; }
.btn { padding: 8px 16px; transition: background-color 150ms ease; }
.btn:hover, .pd-btn:hover { text-decoration: none; color: var(--text); }
.btn-primary { background: var(--surface-medium); }
.btn-primary:hover { background: var(--surface-medium-hover); }
.btn-secondary { background: transparent; border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--text); }
.machine-figure { width: 100%; max-width: 480px; margin: 24px auto 32px; }
.machine-figure img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; }
.machine-figure figcaption { font-size: 14px; margin-top: 8px; }
.machine-figure figcaption a, .guide a, .resource-links a, .notice a { text-decoration: underline; text-underline-offset: 2px; }
.live-strip { display: grid; grid-template-columns: subgrid; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 0 var(--space-5); }
.live-strip > div { grid-column: span 3; min-width: 0; padding-block: var(--space-3); display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.live-strip > div > span:first-child { font: var(--type-mono-default); }
.live-strip strong { font: var(--type-mono-default); }
.live-strip small { font: var(--type-mono-default); }
#live-time { font: var(--type-mono-default); }
.guide { min-width: 0; }
.submission-overview {display:grid;grid-template-columns:subgrid;row-gap:var(--space-5);border-bottom:1px solid var(--border);padding-bottom:var(--space-5);margin-bottom:var(--space-5)}
.submission-overview > * {grid-column:1 / -1;min-width:0}
.submission-overview h2 {margin:0 0 16px}
.submission-overview .field-label {font: var(--type-mono-default)}
.submission-overview input[type=password] {width:100%;min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:4px;font: var(--type-mono-default);background:var(--bg);color:var(--text)}
.submission-overview input[type=file] {max-width:100%;width:100%;font: var(--type-mono-default)}
.submission-overview input::file-selector-button {font: var(--type-mono-button);border:1px solid var(--border);border-radius:4px;background:var(--subtle);padding:8px 12px;margin-right:12px;cursor:pointer}
.upload-actions {display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:12px 0 20px}
.upload-actions span,#key-status,#upload-status,#uploaded-model {font: var(--type-mono-default)}
.submission-overview [data-error=true] {color:var(--error)}
.upload-actions {margin:16px 0 12px}
#uploaded-model {margin-top:16px}
#uploaded-model-id {font:var(--type-mono-default);background:none;padding:0;word-break:break-all}
.model-history {min-width:0}
.model-history table {width:100%;table-layout:fixed;font:var(--type-mono-default);font-variant-numeric:tabular-nums;border-collapse:collapse}
.model-history :is(th,td) {padding:16px 8px;border:0;border-bottom:1px solid var(--border);background:transparent;font:inherit;text-align:right;vertical-align:top;text-transform:none;overflow-wrap:anywhere}
.model-history thead th {color:var(--muted);padding-top:0;padding-bottom:8px}
.model-history tr>:first-child {width:48%;padding-left:0;text-align:left}
.model-history tr>:nth-child(2) {width:19%;text-align:left}
.model-history tr>:last-child {width:13%;padding-right:0}
.model-history tbody tr:hover {background:transparent}
.model-history-name {display:block;overflow-wrap:anywhere}
.model-history-meta {display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:6px;color:var(--muted);font:var(--type-mono-small)}
.model-history-meta time {width:100%}
.model-history .model-history-id {font:inherit;padding:0;background:none;overflow-wrap:anywhere}
.model-history .model-history-copy {flex:none;width:24px;height:24px;min-height:24px;padding:4px}
.model-history [data-state="rejected"] {color:var(--error)}
#model-history-status {margin:12px 0;font:var(--type-mono-default);color:var(--muted)}
#model-history-status:empty {display:none}
#model-history-status[data-error="true"] {color:var(--error)}
.model-history #more-models {margin-top:16px}
.model-history [hidden] {display:none}
@media(max-width:599px) {
  .model-history :is(table,thead,tbody) {display:block}
  .model-history tr {display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:0 8px}
  .model-history :is(th,td) {padding:8px 0;min-width:0;width:auto!important}
  .model-history thead tr>:first-child {position:absolute;width:1px!important;height:1px;overflow:hidden;clip-path:inset(50%)}
  .model-history tbody tr {padding:12px 0;border-bottom:1px solid var(--border)}
  .model-history tbody th {grid-column:1 / -1;padding-top:0;border-bottom:0}
  .model-history tbody td {border-bottom:0;padding-bottom:0}
  .model-history .model-history-meta {font-size:11px;gap:4px 8px}
}
/* Figma ui/button Minimal states (2440:4898), shared by refresh and tool actions. */
.model-leaderboard, .tool-surface {
  --btn-minimal-text: var(--color-text-default);
  --btn-minimal-text-hover: var(--color-text-muted);
  --btn-minimal-text-active: var(--color-text-muted);
  --btn-minimal-text-inactive: var(--color-text-inactive);
}
/* Pace leaderboard tokens, scoped to Claw's shared Play/Submit leaderboard.
   The three-column layout gives Pace's Games column back to Player. */
.model-leaderboard {
  --color-text-default: var(--text);
  --color-text-muted: var(--muted);
  --color-text-inactive: var(--inactive);
  --font-size-body: 15px;
  --line-height-body: 1.25;
  --font-weight-regular: 400;
  --stroke-medium: 1px;
  --leaderboard-columns: var(--grid-columns);
  --leaderboard-rank-column: 1 / span 1;
  --leaderboard-player-column: 2 / span 3;
  --leaderboard-wins-column: 5 / span 2;
  min-width: 0;
  color: var(--color-text-default);
}
.leaderboard-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:var(--grid-gutter);margin-bottom:var(--space-4)}
.model-leaderboard .leaderboard-heading h2 {margin:var(--space-none);font:var(--type-serif-section)}
.leaderboard-heading h2 small {display:block;margin-top:var(--space-1);font:var(--font-weight-regular) var(--font-size-body)/var(--line-height-body) var(--serif);color:inherit}
/* Figma ui/button Minimal (9669:96601): plain label, 6px gap, trailing 16px icon. */
.tool-surface .refresh-button.tool-button.btn,
.model-leaderboard .leaderboard-refresh.btn {flex-shrink:0;width:auto;height:var(--btn-icon-size);min-height:var(--btn-icon-size);padding:var(--space-none);border-radius:var(--space-none);position:relative;overflow:visible;color:var(--btn-minimal-text);background:transparent;text-decoration:none;transition:color var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard)}
.refresh-button-label {text-box-trim:trim-both;text-box-edge:cap alphabetic}
/* Expand the pointer target without adding visible padding. */
.tool-surface .refresh-button.btn::after,
.model-leaderboard .leaderboard-refresh.btn::after {content:"";position:absolute;inset:calc(var(--btn-padding-sm) * -1)}
/* Figma minimal icon states: hover 2610:7747, pressed 2610:7750, inactive 9669:97032. */
.model-leaderboard .leaderboard-refresh.btn--minimal:not(:disabled):is(:hover,:focus-visible) {color:var(--btn-minimal-text-hover)}
.model-leaderboard .leaderboard-refresh.btn--minimal:not(:disabled):active {color:var(--btn-minimal-text-active)}
.model-leaderboard .leaderboard-refresh.btn:disabled {color:var(--btn-minimal-text-inactive);opacity:1}
/* Paradigm Design Library: Icons/Utility, restart (17232:2464), native 16px asset. */
.leaderboard-refresh-icon {display:block;flex:none;width:var(--btn-icon-size);height:var(--btn-icon-size);background:currentColor;mask:url('/puzzles/claw/icon-restart.svg') center / contain no-repeat}
/* Retain the hit area and keyboard tab stop; touch screens have no hover. */
@media(min-width:1024px) and (hover:hover) and (pointer:fine) {
  .model-leaderboard .leaderboard-refresh.btn,
  .model-leaderboard .leaderboard-refresh.btn:disabled {opacity:0;pointer-events:none}
  .model-leaderboard:is(:hover,:focus-within) .leaderboard-refresh.btn {opacity:1;pointer-events:auto}
}
.leaderboard-scroll {overflow:visible}
.model-leaderboard table {display:block;width:100%;font:var(--type-mono-default);font-variant-numeric:tabular-nums}
.model-leaderboard :is(thead,tbody) {display:block}
.model-leaderboard tr {display:grid;grid-template-columns:repeat(var(--leaderboard-columns),minmax(0,1fr));column-gap:var(--grid-gutter);align-items:baseline}
.model-leaderboard tr:hover {background:transparent}
.model-leaderboard :is(th,td) {min-width:0;padding:var(--space-line-break-mono) var(--space-none) var(--space-none);border:0;background:transparent;font:inherit;text-align:left;text-transform:none;vertical-align:baseline}
.model-leaderboard thead {color:var(--color-text-muted)}
.model-leaderboard thead th {padding-top:var(--space-none);padding-bottom:var(--space-1)}
.model-leaderboard tr>:first-child {grid-column:var(--leaderboard-rank-column)}
.model-leaderboard tr>:nth-child(2) {grid-column:var(--leaderboard-player-column);overflow-wrap:anywhere}
.model-leaderboard tr>:last-child {grid-column:var(--leaderboard-wins-column);text-align:right;white-space:nowrap}
.leaderboard-runs {display:block;margin-top:3px;font:var(--type-mono-small);color:var(--muted)}
.model-leaderboard a {color:inherit;text-decoration:underline;text-decoration-thickness:var(--stroke-medium)}
.model-leaderboard a:hover {color:inherit}
#leaderboard-status {margin:var(--space-line-break-mono) var(--space-none) var(--space-none);font:var(--type-mono-default);color:var(--color-text-muted)}
#leaderboard-status:empty {display:none}
#leaderboard-status[data-error=true] {color:var(--error)}
@media(min-width:600px) {
  .model-leaderboard {--font-size-body:16px;--leaderboard-player-column:2 / span 5;--leaderboard-wins-column:7 / span 2}
}
@media(min-width:1024px) {
  .model-leaderboard {--leaderboard-rank-column:1 / span 2;--leaderboard-player-column:3 / span 8;--leaderboard-wins-column:11 / span 2}
  .submission-overview .model-leaderboard {--leaderboard-columns:6;--leaderboard-rank-column:1 / span 1;--leaderboard-player-column:2 / span 4;--leaderboard-wins-column:6 / span 1}
}
.guide > h2:first-child { margin-top: 0; }
.guide ul, .guide ol { padding-left: 24px; margin: 0 0 12px; }
.guide li { margin: 0 0 4px; }
code { font: var(--type-code); background: var(--surface-code); padding: .1em .3em; border-radius: 3px; overflow-wrap: anywhere; }
pre { font: var(--type-code); }
pre code { background: none; padding: 0; font: inherit; }
.icon-button { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; color: var(--text); background: transparent; }
.icon-button:hover { background: var(--surface-medium-active); }
.table-wrap { width: 100%; overflow-x: auto; margin-bottom: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid var(--border); font-size: 15px; }
th { font: var(--type-mono-default); text-transform: uppercase; }
tr:hover { background: var(--surface-hover); }
.supplement { margin-top: 32px; }
.resource-links { margin: 0; padding-left: 20px; }
.resource-links li { margin-bottom: 4px; }
.status-tool form { max-width: 480px; }
.status-tool fieldset { border: 0; display: flex; gap: 0; padding: 0; margin: 16px 0; }
.status-tool fieldset label { position: relative; }
.status-tool fieldset input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.status-tool fieldset span { display: block; padding: 8px 16px; border: 1px solid var(--border); font: var(--type-mono-button); }
.status-tool fieldset label + label span { border-left: 0; }
.status-tool fieldset input:checked + span { background: var(--surface-medium-active); }
.status-tool fieldset input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.field-label { display: block; margin-bottom: 8px; }
.input-row { display: flex; gap: 8px; align-items: center; }
input[type=text] { min-width: 0; width: 100%; padding: 12px 16px; font: var(--type-mono-default); border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); }
.input-row .icon-button { flex-shrink: 0; }
#lookup-message { margin: 12px 0; font-size: 14px; }
#lookup-result { max-height: 400px; overflow: auto; margin: 12px 0; padding: 12px; background: var(--subtle); font: var(--type-code); }
.fee-note { margin: 32px 0 0; font-size: 14px; }
.site-footer { margin-top: 48px; border-top: 1px solid var(--border); background: var(--subtle); }
.footer-content { padding-block: var(--space-5); display: grid; grid-template-columns: var(--grid-template-columns); column-gap: var(--grid-gutter); row-gap: var(--space-3); }
.footer-content > * { grid-column: 1 / -1; }
.site-footer nav { display: grid; grid-template-columns: subgrid; row-gap: var(--space-3); }
.site-footer nav a { grid-column: span 3; }
.site-footer nav a { display: flex; align-items: center; gap: 8px; }
.footer-credit { display: flex; gap: 8px; align-items: center; }
.footer-credit a:last-child { font-size: 14px; }
.pd-header { height: var(--header-height); position: sticky; top: calc(-1 * var(--header-height)); z-index: 40; background: var(--bg); transition: top 220ms ease; }
.pd-header--pinned { top: 0; }
.pd-header__bar { height: var(--header-height); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.pd-header__brand { grid-column: 2; display: flex; align-items: center; justify-content: center; min-width: 0; }
.pd-header__logo-word { display: flex; align-items: center; }
.pd-header__logo-word svg { width: 84px; height: auto; }
.pd-header__logo-mark { display: none; grid-column: 1; align-items: center; }
.pd-header__logo-mark svg { width: 25px; height: 29px; }
.pd-header__crumb-sep, .pd-header__crumb { margin-top: -3px; font: 400 22px/1.15 var(--serif); }
.pd-header__crumb-sep { margin-left: .1em; margin-right: .1em; }
.pd-header__crumb { white-space: nowrap; }
.pd-header__brand a:hover { text-decoration: none; color: var(--text); }
/* Parent Header/MenuOverlay tokens. The three geometry tokens mirror the
   parent component's fixed nav top, marker slot, and dropdown bottom space. */
.pd-header {
  --color-surface-default: var(--bg);
  --color-surface-overlay: var(--surface-medium);
  --type-serif-navigation-size: 15px;
  --type-serif-navigation-line-height: 1.25;
  --type-serif-indent-medium: min(var(--grid-margin), 24px);
  --space-line-break: 20px;
  --nav-list-top: 24px;
  --nav-marker-width: 30px;
  --nav-panel-bottom: 60px;
  --nav-underline-offset: .18em;
  --blur-min: 0px;
  --z-index-modal: 100;
}
.pd-header__actions {grid-column:3;justify-self:end;display:flex;align-items:center;pointer-events:auto}
.pd-menu-trigger.btn {width:var(--btn-height);padding:var(--space-none);backdrop-filter:blur(var(--btn-blur))}
.pd-menu-trigger__stack {display:grid;place-items:center;letter-spacing:inherit}
.pd-menu-trigger__stack > * {grid-area:1 / 1;letter-spacing:inherit}
.pd-menu-trigger__label {display:none}
.pd-menu-trigger__close {visibility:hidden}
.pd-menu-trigger svg {width:var(--btn-icon-size);height:var(--btn-icon-size)}
.pd-menu-trigger[aria-expanded="true"] :is(.pd-menu-trigger__label,.pd-menu-trigger__bars) {visibility:hidden}
.pd-menu-trigger[aria-expanded="true"] .pd-menu-trigger__close {visibility:visible}
html.pd-menu-open {overflow:hidden}
.pd-menu-backdrop {position:fixed;inset:0;background:var(--color-surface-default);z-index:calc(var(--z-index-modal) + 9)}
.pd-menu-panel {position:fixed;inset:var(--header-height) 0 0;z-index:calc(var(--z-index-modal) + 10);color:var(--text);pointer-events:none}
.pd-menu-panel__inner {height:100%;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto}
.pd-menu-panel__list {display:grid;align-content:start;justify-content:start;gap:var(--btn-gap);margin-top:var(--nav-list-top);flex-shrink:0}
.pd-menu-panel__group,.pd-menu-panel__subnav {display:flex;flex-direction:column;gap:var(--btn-gap)}
.pd-menu-panel__subnav {padding-left:var(--type-serif-indent-medium)}
.pd-menu-panel a,.pd-menu-panel__legal {font:var(--font-weight-regular) var(--type-serif-navigation-size)/var(--type-serif-navigation-line-height) var(--serif)}
.pd-menu-panel a {pointer-events:auto;color:inherit;text-decoration:none}
.pd-menu-panel a:is(:hover,:focus-visible) {text-decoration:underline;text-decoration-thickness:var(--stroke-medium);text-underline-offset:var(--nav-underline-offset)}
.pd-menu-panel a:focus-visible {outline:none}
.pd-menu-panel__legal {margin-top:auto;padding-top:var(--space-3);padding-bottom:calc(var(--grid-margin) + env(safe-area-inset-bottom, 0px));flex-shrink:0;pointer-events:auto}
.pd-menu-panel__legal p {margin:var(--space-none)}
.pd-header--menu-open {top:0;z-index:calc(var(--z-index-modal) + 11)}
.pd-header--menu-open .pd-header__bar {position:fixed;inset:0 0 auto;z-index:calc(var(--z-index-modal) + 11);pointer-events:none}
.pd-header--menu-open .pd-header__brand {display:none}
.pd-header--menu-open .pd-header__logo-mark {display:flex;pointer-events:auto}
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 10px 16px; background: var(--text); color: var(--bg); font: var(--type-mono-default); max-width: calc(100% - 32px); z-index: 100; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; transform: translateY(-150%); padding: 8px 12px; background: var(--bg); z-index: 200; }
.skip-link:focus { transform: none; }
@media (min-width: 600px) {
  .live-strip > div { grid-column: span 2; }
  .site-footer nav { grid-column: 1 / span 4; }
  .site-footer nav a { grid-column: span 2; }
  .footer-credit { grid-column: 5 / -1; justify-self: end; }
  .pd-header__logo-word svg { width: 107px; height: 27px; }
  .pd-header__crumb-sep, .pd-header__crumb { font-size: 28px; margin-top: -5px; }
}
@media (min-width: 600px) {
  .pd-header {--type-serif-navigation-size:16px}
  .pd-menu-panel {inset:0}
  .pd-menu-panel__inner {display:grid;grid-template-columns:var(--grid-template-columns);column-gap:var(--grid-gutter);grid-template-rows:1fr auto;pointer-events:none}
  .pd-menu-panel__list {grid-column:6 / -1}
  .pd-menu-panel__legal {grid-column:1 / -1}
}
@media (min-width: 640px) {
  th, td { padding: 12px 16px; }
}
@media (min-width: 1024px) {
  main.container > :is(.introduction, .guide, .supplement, .fee-note) { grid-column: 1 / span 8; }
  .live-strip > div { grid-column: span 3; }
  .submission-entry { grid-column: 1 / span 5; }
  .submission-overview > .model-leaderboard { grid-column: 7 / span 6; }
  .footer-credit { grid-column: 9 / -1; }
  .pd-header { position: relative; top: auto; z-index: auto; transition: none; }
  .pd-header__actions {position:fixed;top:calc((var(--header-height) - var(--btn-height)) / 2);right:var(--rail-right);z-index:calc(var(--z-index-modal) + 11)}
  .pd-menu-trigger.btn {width:auto;padding-inline:var(--btn-padding-lg)}
  .pd-menu-trigger__label {display:inline-flex;letter-spacing:inherit}
  .pd-menu-trigger__bars {display:none}
  .pd-menu-backdrop {background:var(--color-surface-overlay);backdrop-filter:blur(var(--blur-min))}
  .pd-menu-panel {inset:0 0 auto;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--color-surface-default);pointer-events:auto}
  .pd-menu-panel__inner {height:auto;overflow:visible;padding-bottom:var(--nav-panel-bottom)}
  .pd-menu-panel__list {grid-column:10 / -1;row-gap:var(--space-line-break);padding-left:var(--nav-marker-width)}
  .pd-menu-panel__group,.pd-menu-panel__subnav {gap:var(--space-none)}
  .pd-menu-panel__legal {display:none}

}
@media (max-width: 599px) {
  .live-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Action CTA, extracted from Pace's Accelerate control (2026-10-13).
   Use .btn.btn--action for a full-width primary action. */
.btn.btn--action {
  --btn-action-min-height: 48px;
  --btn-action-font-size: var(--font-size-small);
  --btn-action-line-height: 1.35;
  --btn-action-letter-spacing: normal;
  --btn-action-font-weight: 400;
  --btn-action-focus-width: 2px;
  --btn-action-disabled-opacity: 1;
  --btn-action-surface-pressed: var(--color-primary-green-mobile);
  --btn-action-text-pressed: var(--color-primary-black-mobile);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: var(--btn-action-min-height);
  padding: var(--btn-padding-sm);
  margin: var(--space-none);
  border: 0;
  border-radius: var(--radius-small);
  background: var(--btn-surface-high);
  color: var(--btn-text-high);
  font-family: var(--font-family-semi-mono);
  font-size: var(--btn-action-font-size);
  font-weight: var(--btn-action-font-weight);
  line-height: var(--btn-action-line-height);
  letter-spacing: var(--btn-action-letter-spacing);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}
.btn.btn--action:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]):is(:hover,:focus-visible,.held) {
  background: var(--btn-surface-high-hover);
  color: var(--btn-text-high);
}
.btn.btn--action:focus-visible {
  outline: var(--btn-action-focus-width) solid var(--color-focus-outline);
  outline-offset: var(--space-1);
}
.btn.btn--action:not(:disabled):not([aria-disabled="true"])[aria-pressed="true"] {
  background: var(--btn-action-surface-pressed);
  color: var(--btn-action-text-pressed);
}
.btn.btn--action:is(:disabled,[aria-disabled="true"]) {
  background: var(--btn-action-surface-disabled);
  color: var(--btn-action-text-disabled);
  opacity: var(--btn-action-disabled-opacity);
  cursor: not-allowed;
}

/* Claw's vanilla adaptation of paradigm.xyz's TextField, SelectField,
   ChoiceField, Checkbox and .btn primitives (main, 2026-10-13).
   Sources: src/lib/components/events/fields and src/lib/styles/_buttons.scss.
   Scope excludes the game rail and the landing page. */
.tool-surface {
  --color-text-default:var(--text);
  --color-text-muted:var(--muted);
  --color-text-inactive:var(--inactive);
  --color-text-error:var(--error);
  --color-border-default:var(--border);
  --color-border-hover:var(--color-text-muted);
  --color-surface-default:var(--bg);
  --color-surface-subtle:var(--subtle);
  --color-success:var(--success);
  --radius-small:4px;
  --font-size-body:15px;
  --type-serif-body:var(--font-weight-regular) var(--font-size-body)/1.25 var(--serif);
  --space-2:6px;
  --btn-min-width:34px;
  --form-field-padding:var(--btn-padding-lg);
  --form-field-stroke-color:var(--color-border-default);
  --form-field-stroke-hover-color:var(--color-border-hover);
  --form-field-stroke-focus-color:var(--color-text-default);
  --form-field-stroke-error-color:var(--color-border-default);
  --form-field-label-inline-size:81px;
  --icon-size-control:16px;
  --checkbox-label-gap:var(--btn-padding-sm);
  --checkbox-box-size:12px;
  --checkbox-radius:2px;
  --choice-button-height:26px;
  --choice-button-padding-inline:9px;
  --btn-chip-min-width:34px;
  --btn-chip-height:var(--choice-button-height);
  --control-focus-width:2px;
  --control-focus-offset:2px;
  color:var(--color-text-default);
}
@media(min-width:600px) {
  .tool-surface {--font-size-body:16px;--space-2:12px}
}
@media(min-width:1024px) {
  .tool-surface {--space-2:16px;--btn-min-width:40px}
}
.tool-surface h1,.play-about h1 {font:var(--font-weight-regular) var(--type-heading-size)/var(--type-heading-line-height) var(--serif);margin:var(--space-none) var(--space-none) var(--space-3)}
.tool-surface h2 {font:var(--type-serif-section);margin:var(--space-none) var(--space-none) var(--space-3)}
.tool-surface h3 {font:var(--type-serif-body)}
.tool-surface .introduction {font:var(--type-serif-body)}
.tool-surface .introduction p {margin:var(--space-none) var(--space-none) var(--space-line-break-mono)}
.tool-surface .introduction p:last-child {margin-bottom:var(--space-none)}
.tool-surface .entry-actions {margin-bottom:var(--space-6)}
.tool-surface .tool-button.btn--high {background:var(--btn-surface-high);color:var(--btn-text-high)}
.tool-surface .tool-button.btn--medium {background:var(--btn-surface-medium)}
.tool-surface .tool-button.btn--low {border:var(--stroke-medium) solid var(--btn-stroke-low)}
.tool-surface .tool-button.btn--high:not(:disabled):not([aria-disabled="true"]):is(:hover,:focus-visible) {background:var(--btn-surface-high-hover)}
.tool-surface .tool-button.btn--high:not(:disabled):not([aria-disabled="true"]):active {color:var(--btn-text-high-active)}
.tool-surface .tool-button.btn--medium:not(:disabled):is(:hover,:focus-visible) {background:var(--btn-surface-medium-hover)}
.tool-surface .tool-button.btn--medium:not(:disabled):active {background:var(--btn-surface-medium-active)}
.tool-surface .tool-button.btn--low:not(:disabled):is(:hover,:focus-visible) {border-color:var(--btn-stroke-low-hover)}
.tool-surface .tool-button.btn--low:not(:disabled):active {background:var(--btn-surface-medium-active)}
.tool-surface .tool-button.btn--minimal {height:auto;min-height:0;padding:var(--space-none);border-radius:0;background:transparent;color:var(--btn-minimal-text);text-decoration:underline;text-underline-offset:var(--control-focus-offset)}
.tool-surface .tool-button.btn--minimal:not(:disabled):is(:hover,:focus-visible) {color:var(--btn-minimal-text-hover)}
.tool-surface .tool-button.btn--minimal:not(:disabled):active {color:var(--btn-minimal-text-active)}
.tool-surface .tool-button.btn--icon-only {min-width:var(--btn-min-width);padding-inline:var(--btn-padding-sm)}
.tool-surface .tool-button.btn--minimal.btn--icon-only {position:relative;overflow:visible;width:var(--btn-icon-size);height:var(--btn-icon-size);min-width:0;min-height:0;padding:0;text-decoration:none}
.tool-surface .tool-button.btn--minimal.btn--icon-only::after {content:"";position:absolute;inset:calc(var(--btn-padding-sm) * -1)}
.tool-surface .tool-button:disabled {opacity:var(--btn-disabled-opacity);cursor:default}
.tool-surface .tool-button.btn--high:is(:disabled,[aria-disabled="true"]) {background:var(--btn-surface-high);color:var(--btn-text-high);opacity:var(--btn-primary-disabled-opacity);cursor:not-allowed}
.tool-surface .tool-button.btn--minimal:disabled {color:var(--btn-minimal-text-inactive);opacity:1}
.tool-surface .tool-button:focus-visible {outline:var(--control-focus-width) solid var(--color-focus-outline);outline-offset:var(--control-focus-offset)}
.tool-surface .tool-button svg {display:block;width:var(--btn-icon-size);height:var(--btn-icon-size);flex:none}
/* Frontiers MerchProductCard's compact outlined icon chip (website 5d7ce78). */
.tool-surface .tool-button.btn--chip {min-width:var(--btn-chip-min-width);height:var(--btn-chip-height);min-height:var(--btn-chip-height);padding:0 var(--space-1);border:var(--stroke-medium) solid var(--color-border-default);border-radius:var(--radius-small);background:transparent;color:var(--color-text-default);transition:none}
.tool-surface .tool-button.btn--chip.btn--icon-only {padding:0}
.tool-surface .tool-button.btn--chip:disabled {color:var(--color-text-muted);opacity:1;cursor:not-allowed}
.tool-surface .tool-button.btn--chip svg {stroke-width:var(--stroke-medium)}
.tool-surface :is(.tool-icon--restart,.tool-icon--info) {display:block;width:var(--btn-icon-size);height:var(--btn-icon-size);flex:none;background:currentColor;mask:center / contain no-repeat}
.tool-surface .tool-icon--restart {mask-image:url('/puzzles/claw/icon-restart.svg')}
.tool-surface .tool-icon--info {mask-image:url('/puzzles/claw/icon-info.svg')}
.tool-surface .field-label {display:block;font:var(--type-mono-default);margin:var(--space-none) var(--space-none) var(--space-1)}
.tool-surface .field-label a {text-decoration:underline;text-underline-offset:var(--control-focus-offset)}
.tool-surface .form-field {display:flex;align-items:center;gap:var(--btn-padding-sm);width:100%;min-width:0;margin:0;padding:0;border:0;border-bottom:var(--stroke-medium) solid var(--form-field-stroke-color);border-radius:0;background:transparent;transition:border-color var(--duration-fast) var(--ease-standard)}
.tool-surface .form-field:has(:enabled):hover {border-bottom-color:var(--form-field-stroke-hover-color)}
.tool-surface .form-field:focus-within {border-bottom-color:var(--form-field-stroke-focus-color)}
.tool-surface .form-field :is(input,select) {flex:1;min-width:0;width:100%;margin:0;padding:var(--form-field-padding) 0;border:0;border-radius:0;background:transparent;color:var(--color-text-default);font:var(--type-mono-default);letter-spacing:var(--type-mono-letter-spacing)}
.tool-surface .form-field :is(input,select):focus {outline:none}
.tool-surface .form-field input::placeholder {color:var(--color-text-muted);opacity:1}
.tool-surface .form-field :is(input,select):disabled,.tool-surface .form-field:has(:disabled) .form-field-label {color:var(--color-text-muted);cursor:not-allowed}
.tool-surface .form-field input:read-only {color:var(--color-text-muted)}
.tool-surface .form-field:has(:user-invalid,[aria-invalid=true]) {border-bottom-color:var(--form-field-stroke-error-color)}
/* Frontiers cart's TextField inline label, prefix and value geometry. */
.tool-surface .form-field--inline {align-items:baseline;gap:var(--grid-gutter)}
.tool-surface .form-field-label {flex:0 0 var(--form-field-label-inline-size);padding-block:var(--form-field-padding);font:var(--type-mono-default)}
.tool-surface .form-field-value {display:flex;align-items:baseline;flex:1;min-width:0}
.tool-surface .form-field-prefix {color:var(--color-text-muted);user-select:none}
.tool-surface .field-help {font:var(--type-mono-default);color:var(--color-text-muted);margin:var(--btn-gap) 0 0;overflow-wrap:anywhere}
/* BasketFreeMerch's inset panel, shared by account and form support blocks. */
.tool-surface .tool-panel {display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);background:var(--color-surface-subtle);min-width:0}
@media(min-width:1024px) {.tool-surface .tool-panel {gap:var(--space-2)}}
.tool-surface [data-error=true] {color:var(--color-text-error)}
.tool-surface .submission-overview {row-gap:var(--space-8);margin:0;padding:0;border:0}
.tool-surface .submission-entry {display:block}
.tool-surface .upload-heading {display:flex;align-items:center;justify-content:space-between;gap:var(--grid-gutter);margin-bottom:var(--space-4)}
.tool-surface .upload-heading h2 {margin:0}
.tool-surface #model-upload-form {display:grid;gap:var(--space-none)}
.tool-surface #model-upload-form>*+* {margin-top:var(--space-4)}
.tool-surface .upload-account {display:grid;gap:var(--btn-gap)}
.tool-surface .upload-key-fields {display:block}
.tool-surface .api-key-field-group,.tool-surface .file-field {display:grid;gap:var(--space-1)}
.tool-surface .api-key-field {padding-block:var(--form-field-padding)}
.tool-surface .api-key-field input {padding:0}
.tool-surface .api-key-label {display:flex;align-items:center;min-width:0;gap:var(--btn-padding-sm)}
/* Keep the expanded docs hit target out of the neighboring field label. */
.tool-surface .api-key-docs.btn--minimal.btn--icon-only::after {left:0}
.tool-surface .api-key-input {display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-width:0}
.tool-surface .api-key-input>* {grid-area:1 / 1}
.tool-surface .api-key-preview {display:block;align-self:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;font:var(--type-mono-default);color:var(--color-text-default)}
.tool-surface .api-key-input input[data-masked=true]:not(:focus) {color:transparent;-webkit-text-fill-color:transparent}
.tool-surface .api-key-input input:focus+.api-key-preview {visibility:hidden}
.tool-surface .api-key-input:has(input:disabled) .api-key-preview {color:var(--color-text-muted)}
.tool-surface .tool-panel .field-label {margin:0}
.tool-surface #key-status {margin:0}
.tool-surface :is(#key-status,#upload-status,#lookup-message):empty {display:none}
.tool-surface .file-picker {gap:var(--space-3);padding-block:var(--form-field-padding)}
.tool-surface .file-picker-value {flex:1;min-width:0;overflow-wrap:anywhere;color:var(--color-text-muted);font:var(--type-mono-default)}
.tool-surface .file-picker-value[data-selected=true] {color:var(--color-text-default)}
.tool-surface .file-picker-control {position:relative;flex:none}
/* Keep the native picker focusable and clickable over the shared outlined CTA. */
.tool-surface .file-picker-control input[type=file] {position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.tool-surface .file-picker-control:has(input:enabled):is(:hover,:focus-within) .file-picker-button {border-color:var(--btn-stroke-low-hover)}
.tool-surface .file-picker-control:has(input:enabled):active .file-picker-button {background:var(--btn-surface-medium-active)}
.tool-surface .file-picker-control:has(input:disabled) .file-picker-button {opacity:var(--btn-disabled-opacity);cursor:not-allowed}
.tool-surface .file-picker-control input:disabled {cursor:not-allowed}
.tool-surface .file-picker-control:has(input:focus-visible) .file-picker-button {outline:var(--control-focus-width) solid var(--color-focus-outline);outline-offset:var(--control-focus-offset)}
.tool-surface .upload-actions {justify-content:flex-end;gap:var(--btn-padding-sm);margin:0}
.tool-surface #model-upload-form>.upload-actions {margin-top:var(--btn-padding-lg)}
.tool-surface #upload-status {margin:var(--space-3) 0 0;font:var(--type-mono-default)}
.tool-surface #uploaded-model {margin-top:var(--space-3);padding:0;background:transparent}
.tool-surface #uploaded-model>.input-row {justify-content:space-between;margin-top:var(--space-1)}
.tool-surface .submission-run-status {display:grid;grid-template-columns:minmax(0,1fr);margin-bottom:var(--space-6)}
.tool-surface .submission-run-status>* {grid-column:1 / -1;min-width:0}
/* Match the leaderboard: reveal on desktop hover or keyboard focus. */
@media(min-width:1024px) and (hover:hover) and (pointer:fine) {
  .tool-surface .submission-entry #refresh {opacity:0;pointer-events:none}
  .tool-surface .submission-entry:is(:hover,:focus-within) #refresh {opacity:1;pointer-events:auto}
}
.tool-surface .live-strip {grid-template-columns:repeat(2,minmax(0,1fr));border:0;margin:0;gap:var(--space-3) var(--grid-gutter)}
.tool-surface .live-strip>div {grid-column:auto;padding:0;border:0;gap:var(--space-1);justify-content:flex-start}
.tool-surface .live-strip>div>span:first-child {color:var(--color-text-muted)}
.tool-surface .supplement {margin-top:var(--space-6)}
.tool-surface .resource-links {list-style:none;padding:0;font:var(--type-mono-default)}
.tool-surface .resource-links li {margin:0 0 var(--space-1)}
.tool-surface .status-tool {display:grid;grid-template-columns:subgrid}
.tool-surface .status-tool>* {grid-column:1 / -1;min-width:0}
.tool-surface .status-tool form {max-width:none}
@media(min-width:600px) {.tool-surface .status-tool form {grid-column:1 / span 4}}
.tool-surface .status-tool fieldset {gap:var(--btn-gap);margin:0 0 var(--space-3)}
.tool-surface .status-tool fieldset label {display:block;position:relative}
.tool-surface .status-tool fieldset span {display:flex;align-items:center;height:var(--choice-button-height);padding:0 var(--choice-button-padding-inline);border:var(--stroke-medium) solid var(--btn-stroke-low);border-radius:var(--radius-small);font:var(--type-mono-default);color:var(--color-text-muted)}
.tool-surface .status-tool fieldset input:checked+span {background:transparent;border-color:var(--color-text-default);color:var(--color-text-default)}
.tool-surface .status-tool fieldset label:hover span {border-color:var(--btn-stroke-low-hover)}
.tool-surface .status-tool fieldset input:focus-visible+span {outline:var(--control-focus-width) solid var(--color-focus-outline);outline-offset:var(--control-focus-offset)}
.tool-surface #lookup-message {margin:var(--space-3) 0;font:var(--type-mono-default)}
.tool-surface #lookup-form .tool-button:disabled {color:var(--color-text-muted);opacity:1;cursor:default}
.tool-surface #lookup-result {padding:var(--space-3);background:var(--color-surface-subtle)}
.tool-surface .fee-note {font:var(--type-mono-default);color:var(--color-text-muted);margin:var(--space-5) 0 0}
.tool-surface .select-field {position:relative;width:auto}
.tool-surface .select-field select {appearance:none;padding-right:calc(var(--btn-icon-size) + var(--btn-gap));cursor:pointer}
.tool-surface .select-field-chevron {display:flex;position:absolute;right:0;pointer-events:none;color:var(--color-text-muted)}
/* Figma ui/checkbox-with-label (16865:3937): 12px box in a 16px slot. */
.tool-surface .checkbox {display:flex;align-items:flex-start;gap:var(--checkbox-label-gap);font:var(--type-mono-default);cursor:pointer}
.tool-surface .checkbox-slot {position:relative;display:grid;place-items:center;width:var(--icon-size-control);height:var(--icon-size-control);flex-shrink:0}
.tool-surface .checkbox-input {appearance:none;-webkit-appearance:none;display:block;width:var(--checkbox-box-size);height:var(--checkbox-box-size);margin:0;padding:0;border:var(--stroke-medium) solid var(--color-text-default);border-radius:var(--checkbox-radius);background:transparent;cursor:inherit}
.tool-surface .checkbox-input:checked {border-color:transparent}
.tool-surface .checkbox__check-mark {position:absolute;inset:0;display:block;pointer-events:none;opacity:0}
.tool-surface .checkbox-input:checked~.checkbox__check-mark {opacity:1}
.tool-surface .checkbox-input:focus-visible {outline:var(--control-focus-width) solid var(--color-focus-outline);outline-offset:var(--control-focus-offset)}

/* Article primitives adapted from paradigm.xyz-website, main 5d7ce78:
   writing/CodeBlock.svelte, writing/RichTextContent.svelte and writing/[slug].
   The game and tool UI keep their existing, separately audited type roles. */
.tool-surface .guide {
  --font-size-article-body:16px;
  --font-size-article-sub-headline:19px;
  --line-height-article:1.5;
  --line-height-code:1.25;
  --space-line-break-body:19px;
  --article-block-gap:108px;
  --article-heading-tracking:-.42px;
  --writing-inline-code-size:10px;
  --writing-inline-code-leading:1.35;
  --writing-inline-code-padding-block:2px;
  --writing-inline-code-padding-inline:6px;
  --writing-inline-code-offset:-1px;
  /* CodeBlock uses distinct header (24px) and code (18px) insets. */
  --code-block-padding:18px;
  --code-block-header-padding-inline:24px;
  margin-top:var(--space-8);
  display:flex;
  flex-direction:column;
  font:var(--font-weight-regular) var(--font-size-article-body)/var(--line-height-article) var(--serif);
}
@media(min-width:600px) {
  .tool-surface .guide {--font-size-article-sub-headline:21px;--space-line-break-body:20px;--article-block-gap:140px}
}
@media(min-width:1024px) {
  .tool-surface .guide {--font-size-article-body:18px;--article-block-gap:72px}
}
@media(min-width:1360px) {
  .tool-surface .guide {--writing-inline-code-size:11px}
}
.tool-surface .guide > * {margin:0;min-width:0}
.tool-surface .guide > * + * {margin-top:var(--space-line-break-body)}
.tool-surface .guide :is(p,li,blockquote) {font:inherit}
.tool-surface .guide :is(strong,b) {font-weight:inherit}
.tool-surface .guide > :is(h2,h3):not(:first-child) {margin-top:var(--article-block-gap)}
.tool-surface .guide h2 {font:var(--font-weight-regular) var(--font-size-article-sub-headline)/var(--type-heading-line-height) var(--serif);letter-spacing:var(--article-heading-tracking);margin-bottom:max(0px,calc(var(--space-3) - var(--space-line-break-body)))}
.tool-surface .guide h3 {font:inherit}
.tool-surface .guide :is(ul,ol) {padding-left:var(--space-3)}
.tool-surface .guide li {margin-bottom:var(--space-1)}
.tool-surface .guide a:not(.btn) {color:var(--color-text-muted);text-decoration:underline;text-decoration-thickness:var(--stroke-medium);text-underline-offset:var(--control-focus-offset)}
.tool-surface .guide a:not(.btn):is(:hover,:focus-visible) {color:var(--color-text-default)}
.tool-surface .guide :is(p,li) code {
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--writing-inline-code-padding-block) var(--writing-inline-code-padding-inline);
  border-radius:var(--radius-small);background:var(--color-surface-subtle);color:var(--color-text-default);
  font:var(--font-weight-regular) var(--writing-inline-code-size)/var(--writing-inline-code-leading) var(--ui);
  letter-spacing:0;font-variant-numeric:lining-nums tabular-nums;
  max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word;
  position:relative;top:var(--writing-inline-code-offset);
}
.tool-surface .guide > .codeblock {margin-block:var(--space-3) 0;background:var(--color-surface-subtle);border-radius:0}
.tool-surface .guide > .codeblock + p {margin-top:var(--space-3)}
.tool-surface .guide .code-header {position:static;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--code-block-padding) var(--code-block-header-padding-inline) 0;color:var(--color-text-default)}
.tool-surface .guide .code-header > span {display:block;min-width:0;font:inherit}
.tool-surface .guide .codeblock pre {margin:0;padding:var(--code-block-padding);font:var(--font-weight-regular) var(--type-mono-default-size)/var(--line-height-code) var(--ui);letter-spacing:0;overflow-x:auto;white-space:pre;border-radius:0}
.tool-surface .guide .codeblock code {font:inherit;background:none;padding:0;border-radius:0;overflow-wrap:normal}
.tool-surface .guide .codeblock .code-copy {flex-shrink:0;backdrop-filter:blur(var(--btn-blur))}
/* Keep technical table associations and horizontal scrolling on narrow screens;
   use the writing CSV block's subtle header, regular weight and top alignment. */
.tool-surface .guide .table-wrap {overflow-x:auto}
.tool-surface .guide .table-wrap table {
  --model-table-name-width:calc(18ch + 2 * var(--space-2));
  --model-table-shape-width:calc(14ch + 2 * var(--space-2));
  --model-table-contents-min-width:calc(22ch + 2 * var(--space-2));
  font:var(--type-mono-default);
  table-layout:fixed;
  min-width:calc(var(--model-table-name-width) + var(--model-table-shape-width) + var(--model-table-contents-min-width));
}
.tool-surface .guide .table-wrap :is(th,td):first-child {width:var(--model-table-name-width);white-space:nowrap}
.tool-surface .guide .table-wrap :is(th,td):nth-child(2) {width:var(--model-table-shape-width);white-space:nowrap}
.tool-surface .guide .table-wrap :is(th,td) {font:var(--type-mono-default);text-transform:none;padding:var(--space-2);vertical-align:top;text-align:left}
.tool-surface .guide .table-wrap th {font-weight:var(--font-weight-regular);background:var(--color-surface-subtle);color:var(--color-text-default)}
.tool-surface .guide .table-wrap tr:hover {background:transparent}
.tool-surface .guide .table-wrap code {font:inherit;padding:0;background:none;border-radius:0}
.tool-surface .guide > :is(h2,h3) + .codeblock {margin-top:var(--space-3)}
.tool-surface .guide > :first-child {margin-top:0}
.tool-surface .guide > :last-child {margin-bottom:0}
.utility-icon {display:block;width:var(--icon-size-default);height:var(--icon-size-default);flex-shrink:0}