/* Hallmark · shape: product-led split · genre: modern-minimal · theme: custom · redesign: full
 * idea: "the library shows itself: a real plan open on the page" · vibe: "white, exact, quiet, a developer's catalogue"
 * paper: oklch(99.4% 0.003 255) · accent: oklch(53% 0.22 263) · display: Geist 600 · body: Geist 400 · hero: left text, the product (a live plan) in a well on the right · nav: dense balanced bar · footer: quiet columns on paper-2 · signature: the plan panel, live data, copyable prompt
 * axes: light/grotesk-sans/chromatic-blue · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, inner pages keep the 2.4 system; the home is the redesign target */
/* Hallmark · waive 77 · the close is the hero's share action again in one short band · a library home ends on its one action, per the sign-up anatomy */

/* ---------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------ */
:root {
	/* Brand palette */
	--color-primary: #1659F5;
	--color-primary-dark: #0B44CC;
	--color-primary-light: #E8F0FF;
	--color-primary-soft: #F3F7FF;
	--color-blue: #4285F4;
	--color-cyan: #42C9D5;
	--color-heading: #0B1020;
	--color-ink-hover: #262B3D;
	--color-text: #454B68;
	--color-muted: #5C627C;
	--color-field-edge: #858BA3;
	--color-background: #FFFFFF;
	--color-surface: #F6F8FD;
	--color-border: #E4E9F4;
	--color-border-strong: #D3DBEC;
	--color-success: #18A978;
	--color-white: #FFFFFF;
	--color-card: #FFFFFF;
	--color-on-primary: #FFFFFF;
	--color-on-ink: #FFFFFF;
	--color-primary-text: #1659F5;
	--gradient-sky: linear-gradient(180deg, #C6DBFF 0%, #DAE7FF 38%, #EDF3FF 72%, #FFFFFF 100%);
	--gradient-halo: radial-gradient(circle at 35% 30%, #6AA6FF 0%, #1659F5 55%, #0B44CC 100%);
	--gradient-page: linear-gradient(180deg, #E3EDFF 0%, #F3F7FF 70%, #FFFFFF 100%);
	--color-cloud: #FFFFFF;
	--color-halo-ring: rgba(255, 255, 255, 0.6);
	--color-halo-ring-2: rgba(255, 255, 255, 0.3);
	--shadow-blue: 0 12px 28px -12px rgba(22, 89, 245, 0.55);
	--shadow-pill: 0 10px 30px -12px rgba(11, 18, 56, 0.25), 0 2px 6px rgba(11, 18, 56, 0.06);


	/* Resource identities */
	--tone-skill-bg: #E6F8F1; --tone-skill-ink: #0F7A58; --tone-skill-line: #C4EEDD;
	--tone-mcp-bg: #E7F1FE; --tone-mcp-ink: #2563C9; --tone-mcp-line: #C9DEFB;
	--tone-plan-bg: #EEE9FF; --tone-plan-ink: #4F2EDB; --tone-plan-line: #DCD3FF;
	--tone-plugin-bg: #FFF4DF; --tone-plugin-ink: #9A5F0C; --tone-plugin-line: #F8E2B8;
	--tone-community-bg: #FDEBF4; --tone-community-ink: #B33A78; --tone-community-line: #F7CFE3;

	/* Aliases used by the inner pages */
	--color-paper: var(--color-background);
	--color-paper-2: var(--color-surface);
	--color-paper-3: var(--color-primary-light);
	--color-ink: var(--color-heading);
	--color-ink-2: var(--color-text);
	--color-rule: var(--color-border);
	--color-rule-2: var(--color-border-strong);
	--color-signal: var(--color-primary);
	--color-signal-2: var(--color-primary-dark);
	--color-signal-ink: var(--color-white);
	--color-lilac: var(--color-primary-light);
	--color-lilac-2: #D6E4FF;
	--color-lilac-ink: var(--color-primary-dark);
	--color-cheek: #F59E0B;
	--color-cheek-2: #FFF4DF;
	--color-cheek-ink: #9A5F0C;
	--color-skill: var(--tone-skill-bg); --color-skill-ink: var(--tone-skill-ink); --color-skill-line: var(--tone-skill-line);
	--color-mcp: var(--tone-mcp-bg); --color-mcp-ink: var(--tone-mcp-ink); --color-mcp-line: var(--tone-mcp-line);
	--color-plugin: var(--tone-plugin-bg); --color-plugin-ink: var(--tone-plugin-ink); --color-plugin-line: var(--tone-plugin-line);
	--color-plan: var(--tone-plan-bg); --color-plan-ink: var(--tone-plan-ink);
	--color-field: #1A1640;
	--color-field-2: #262056;
	--color-field-3: #3A3375;

	--color-code: #14122E;
	--color-code-2: #1E1B42;
	--color-code-ink: #E8E7F7;
	--color-code-muted: #A7A4CC;

	--color-ok: #0A6E4D;
	--color-ok-2: #E6F8F1;
	--color-ok-line: #C4EEDD;
	--color-warn: #9A5F0C;
	--color-warn-2: #FFF4DF;
	--color-error: #C93A3A;
	--color-error-2: #FDECEC;
	--color-error-line: #F6CACA;
	--color-focus: #1659F5;
	--color-focus-light: #D6E4FF;
	--color-shadow: rgba(17, 20, 42, 0.06);
	--color-shadow-2: rgba(22, 50, 140, 0.16);
	--color-scrim: rgba(17, 20, 42, 0.5);
	--color-bar: rgba(255, 255, 255, 0.86);
	--color-shadow-deep: rgba(17, 20, 42, 0.6);
	--color-ring: rgba(238, 233, 255, 0.6);
	--color-white-08: rgba(255, 255, 255, 0.08);
	--color-white-12: rgba(255, 255, 255, 0.12);
	--color-white-14: rgba(255, 255, 255, 0.14);
	--color-white-18: rgba(255, 255, 255, 0.18);
	--color-white-24: rgba(255, 255, 255, 0.24);
	--color-white-86: rgba(255, 255, 255, 0.86);
	--color-mask: #0B1020;

	--mascot-cloud-a: #FFFFFF;
	--mascot-cloud-b: #F7F4FF;
	--mascot-cloud-c: #E8DEFF;
	--mascot-edge: #CFC0FF;
	--mascot-eye-a: #34217F;
	--mascot-eye-b: #17104F;
	--mascot-brow: #3D2B91;
	--mascot-shine: #FFFFFF;
	--mascot-cheek: #F6A5C5;
	--mascot-blue-b: #F3F7FF;
	--mascot-blue-c: #DCE8FF;
	--mascot-blue-edge: #B9CFFF;
	--mascot-blue-eye: #1D3FA8;
	--mascot-blue-eye-2: #0B1A5C;

	/* Type */
	--font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--text-xs: 12px;
	--text-sm: 14px;
	--text-md: 16px;
	--text-lg: 18px;
	--text-xl: 20px;
	--text-display: 64px;
	--text-hero: clamp(44px, 4.6vw + 8px, 72px);
	--text-page: 48px;
	--text-section: 40px;
	--text-title: 22px;
	--text-lead: 20px;

	/* 8px spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 40px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 80px;
	--space-10: 96px;
	--space-3xs: var(--space-1);
	--space-2xs: var(--space-1);
	--space-xs: var(--space-2);
	--space-sm: var(--space-3);
	--space-md: var(--space-3);
	--space-lg: var(--space-4);
	--space-xl: var(--space-6);
	--space-2xl: var(--space-8);
	--space-3xl: var(--space-10);

	--container: 1280px;
	--narrow: 768px;
	--gutter: var(--space-5);
	--section: var(--space-9);
	--header-h: 72px;
	--control-h: 48px;

	--radius-sm: 8px;
	--radius: 12px;
	--radius-card: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;
	--shadow-card: 0 1px 2px var(--color-shadow), 0 8px 24px -16px var(--color-shadow-2);
	--shadow-lift: 0 2px 4px var(--color-shadow), 0 16px 32px -16px var(--color-shadow-2);
	--shadow-pop: 0 24px 48px -24px var(--color-shadow-2);
	--shadow-float: 0 1px 2px var(--color-shadow), 0 16px 40px -16px var(--color-shadow-2);

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-micro: 150ms;
	--dur-short: 240ms;
	--dur-reveal: 600ms;

	--z-raised: 10;
	--z-dropdown: 100;
	--z-bar: 300;
	--z-modal: 400;
}
@media (max-width: 1023px) {
	:root { --text-display: 48px; --text-page: 40px; --text-section: 32px; --section: var(--space-8); }
}
@media (max-width: 640px) {
	:root { --text-display: 40px; --text-page: 32px; --text-section: 28px; --text-title: 20px; --text-lead: 18px; --text-md: 15px; --section: var(--space-7); --gutter: var(--space-3); }
}

/* Dark mode: chosen in the header (saved), otherwise the system setting. */
:root[data-theme="dark"] { color-scheme: dark;
	--color-background: #0A0F1E; --color-card: #111A2E; --color-surface: #0D1426; --color-border: #1F2A44; --color-border-strong: #2E3C60; --color-field-edge: #6474A0;
	--color-heading: #EEF3FF; --color-text: #B9C4DD; --color-muted: #94A1C2; --color-ink-hover: #D3DDF5; --color-on-ink: #0A0F1E;
	--color-primary: #2A62EE; --color-primary-dark: #1E53D8; --color-lilac-ink: #A9C6FF; --color-primary-light: #16244A; --color-primary-soft: #111C38; --color-primary-text: #8AB4FF;
	--color-lilac-2: #1E2F55; --color-blue: #6AA6FF; --color-cyan: #5ED6E0;
	--tone-skill-bg: #0F2A24; --tone-skill-ink: #6EDBB2; --tone-skill-line: #1D4A3E;
	--tone-mcp-bg: #0F2240; --tone-mcp-ink: #8AB9FF; --tone-mcp-line: #1D3B66;
	--tone-plan-bg: #1B1A44; --tone-plan-ink: #B3ADFF; --tone-plan-line: #2E2C66;
	--tone-plugin-bg: #2E2410; --tone-plugin-ink: #F2C46B; --tone-plugin-line: #4B3A18;
	--tone-community-bg: #33142A; --tone-community-ink: #F7A6CE; --tone-community-line: #522244;
	--color-cheek: #F5B83D; --color-cheek-2: #2E2410; --color-cheek-ink: #F2C46B;
	--color-ok: #4ADBA2; --color-ok-2: #0E2A20; --color-ok-line: #1C4A38;
	--color-warn: #F2C46B; --color-warn-2: #2E2410;
	--color-error: #FF8A8A; --color-error-2: #331616; --color-error-line: #5A2424;
	--color-focus: #6AA6FF; --color-focus-light: #1E2F55;
	--color-shadow: rgba(0, 0, 0, 0.35); --color-shadow-2: rgba(0, 0, 0, 0.55); --color-scrim: rgba(0, 0, 0, 0.65);
	--color-code: #060A15; --color-code-2: #0E1529; --color-field-3: #2E3C60;
	--gradient-sky: linear-gradient(180deg, #0E2556 0%, #0C1A3C 45%, #0A1228 78%, #0A0F1E 100%);
	--gradient-page: linear-gradient(180deg, #0F1E44 0%, #0B1430 70%, #0A0F1E 100%);
	--color-cloud: rgba(140, 175, 255, 0.10);
	--color-halo-ring: rgba(76, 141, 255, 0.16); --color-halo-ring-2: rgba(76, 141, 255, 0.08);
	--shadow-pill: 0 10px 30px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(140, 175, 255, 0.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark;
	--color-background: #0A0F1E; --color-card: #111A2E; --color-surface: #0D1426; --color-border: #1F2A44; --color-border-strong: #2E3C60; --color-field-edge: #6474A0;
	--color-heading: #EEF3FF; --color-text: #B9C4DD; --color-muted: #94A1C2; --color-ink-hover: #D3DDF5; --color-on-ink: #0A0F1E;
	--color-primary: #2A62EE; --color-primary-dark: #1E53D8; --color-lilac-ink: #A9C6FF; --color-primary-light: #16244A; --color-primary-soft: #111C38; --color-primary-text: #8AB4FF;
	--color-lilac-2: #1E2F55; --color-blue: #6AA6FF; --color-cyan: #5ED6E0;
	--tone-skill-bg: #0F2A24; --tone-skill-ink: #6EDBB2; --tone-skill-line: #1D4A3E;
	--tone-mcp-bg: #0F2240; --tone-mcp-ink: #8AB9FF; --tone-mcp-line: #1D3B66;
	--tone-plan-bg: #1B1A44; --tone-plan-ink: #B3ADFF; --tone-plan-line: #2E2C66;
	--tone-plugin-bg: #2E2410; --tone-plugin-ink: #F2C46B; --tone-plugin-line: #4B3A18;
	--tone-community-bg: #33142A; --tone-community-ink: #F7A6CE; --tone-community-line: #522244;
	--color-cheek: #F5B83D; --color-cheek-2: #2E2410; --color-cheek-ink: #F2C46B;
	--color-ok: #4ADBA2; --color-ok-2: #0E2A20; --color-ok-line: #1C4A38;
	--color-warn: #F2C46B; --color-warn-2: #2E2410;
	--color-error: #FF8A8A; --color-error-2: #331616; --color-error-line: #5A2424;
	--color-focus: #6AA6FF; --color-focus-light: #1E2F55;
	--color-shadow: rgba(0, 0, 0, 0.35); --color-shadow-2: rgba(0, 0, 0, 0.55); --color-scrim: rgba(0, 0, 0, 0.65);
	--color-code: #060A15; --color-code-2: #0E1529; --color-field-3: #2E3C60;
	--gradient-sky: linear-gradient(180deg, #0E2556 0%, #0C1A3C 45%, #0A1228 78%, #0A0F1E 100%);
	--gradient-page: linear-gradient(180deg, #0F1E44 0%, #0B1430 70%, #0A0F1E 100%);
	--color-cloud: rgba(140, 175, 255, 0.10);
	--color-halo-ring: rgba(76, 141, 255, 0.16); --color-halo-ring-2: rgba(76, 141, 255, 0.08);
	--shadow-pill: 0 10px 30px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(140, 175, 255, 0.14); } }

/* ---------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: calc(var(--header-h) + var(--space-3)); scroll-behavior: smooth; }
html.op-locked { overflow: hidden; }
body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
::selection { background: var(--color-lilac-2); color: var(--color-heading); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--color-primary-text); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--color-heading); line-height: 1.12; letter-spacing: -0.025em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h3 { font-weight: 650; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd, pre { font-family: var(--font-mono); }
code { font-size: 0.88em; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 0 var(--space-1); overflow-wrap: anywhere; }
ul, ol { margin: 0; padding: 0; }
.op-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.op-skip { position: absolute; left: var(--space-3); top: -100px; z-index: var(--z-modal); background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; }
.op-skip:focus-visible { top: var(--space-3); }
.op-main:focus { outline: none; }

.op-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.op-narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.op-muted { color: var(--color-muted); }
.op-note { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); }
.op-h2 { font-size: var(--text-section); line-height: 1.12; max-width: 22ch; }
.op-h3 { font-size: var(--text-title); line-height: 1.25; }
.op-head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.op-head-row > .op-h2, .op-head-row > .op-h3 { margin: 0; }
.op-meta { display: inline-flex; flex-wrap: wrap; gap: 0 var(--space-3); }


.op-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-primary-text); font-weight: 600; text-decoration: none; }
.op-link .op-icon { transition: transform var(--dur-micro) var(--ease-out); }
.op-link:hover { color: var(--color-primary-text); }
.op-link:hover .op-icon { transform: translateX(2px); }
.op-link--light { color: var(--color-on-primary); }

/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------ */
.op-btn { --btn-bg: var(--color-card); --btn-ink: var(--color-heading); --btn-line: var(--color-border-strong);
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-4);
	background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-line); border-radius: var(--radius); box-shadow: 0 1px 2px var(--color-shadow);
	font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.op-btn:hover { color: var(--btn-ink); border-color: var(--color-primary); }
.op-btn:active { transform: translateY(1px); box-shadow: none; }
.op-btn:disabled, .op-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.op-btn .op-icon { flex: none; }
.op-btn--sm { min-height: 40px; padding: 0 var(--space-3); }
.op-btn--lg { min-height: 52px; padding: 0 var(--space-4); font-size: var(--text-md); }
.op-btn--block { width: 100%; }
.op-btn--signal { --btn-bg: var(--color-primary); --btn-ink: var(--color-on-primary); --btn-line: var(--color-primary); box-shadow: 0 8px 16px -8px var(--color-shadow-2); }
.op-btn--signal:hover { --btn-bg: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.op-btn--dark { --btn-bg: var(--color-heading); --btn-ink: var(--color-on-ink); --btn-line: var(--color-heading); }
.op-btn--dark:hover { --btn-bg: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.op-btn--ghost { --btn-bg: var(--color-card); }
.op-btn--ghost:hover { --btn-bg: var(--color-surface); }
.op-btn--quiet { --btn-bg: transparent; --btn-line: transparent; --btn-ink: var(--color-muted); box-shadow: none; }
.op-btn--quiet:hover { --btn-ink: var(--color-heading); --btn-bg: var(--color-surface); border-color: transparent; }
.op-btn--lilac { --btn-bg: var(--color-primary-light); --btn-ink: var(--color-primary-dark); --btn-line: var(--color-primary-light); }
.op-btn--line { --btn-bg: transparent; }
.op-btn--star[aria-pressed="true"] { --btn-bg: var(--color-cheek-2); --btn-line: var(--color-cheek); --btn-ink: var(--color-cheek-ink); }
.op-btn--star[aria-pressed="true"] .op-icon { fill: currentColor; }
.op-btn__count { padding-left: var(--space-2); margin-left: var(--space-1); border-left: 1px solid var(--btn-line); font-variant-numeric: tabular-nums; }
.op-btn[aria-pressed="true"]:not(.op-btn--star) { --btn-bg: var(--color-primary-light); }

.op-iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.op-iconbtn:hover { background: var(--color-surface); }

.op-copy, .op-chipbtn { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; padding: 0 var(--space-2); border: 1px solid currentColor; border-radius: var(--radius-sm); background: transparent; color: inherit; font-size: var(--text-xs); font-weight: 600; font-family: var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.op-chipbtn { color: var(--color-primary-text); border-color: var(--color-border-strong); background: var(--color-card); }
.op-chipbtn:hover { background: var(--color-surface); color: var(--color-primary-text); }
.op-copy.is-done { background: var(--color-ok); color: var(--color-on-primary); border-color: var(--color-ok); }

/* ---------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------ */
.op-bar { position: sticky; top: 0; z-index: var(--z-bar); background: var(--color-card); border-bottom: 1px solid var(--color-border); color: var(--color-heading); }
.op-bar__inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); }
.op-brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-heading); text-decoration: none; flex: none; }
.op-brand:hover { color: var(--color-heading); }
.op-brand__mark { width: 40px; height: auto; }
.op-brand__img { max-height: 40px; width: auto; }
.op-brand__word { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: -0.03em; }
.op-brand__plans { color: var(--color-primary-text); }

.op-nav { display: flex; align-items: center; gap: var(--space-5); flex: 1; min-width: 0; }
.op-nav__list { display: flex; align-items: center; gap: var(--space-4); list-style: none; }
.op-nav__list a { position: relative; display: inline-flex; align-items: center; min-height: 40px; color: var(--color-text); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.op-nav__list a:hover { color: var(--color-heading); }
.op-nav__list a[aria-current="page"], .op-nav__list .current-menu-item > a { color: var(--color-heading); font-weight: 600; }
.op-nav__list a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--space-1); height: 2px; border-radius: 2px; background: var(--color-heading); }
.op-nav__end { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.op-nav__quiet { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; color: var(--color-text); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.op-nav__quiet:hover { color: var(--color-heading); }

.op-find { position: relative; }
.op-find__field { display: flex; align-items: center; gap: var(--space-2); width: 232px; min-height: 40px; padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-muted); cursor: text; transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.op-find__field:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; background: var(--color-card); }
.op-find__field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-heading); font-size: var(--text-sm); outline: none; }
.op-find__field input::placeholder { color: var(--color-muted); }
.op-find__field kbd { font-size: var(--text-xs); padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-card); }
.op-find__results { position: absolute; right: 0; top: calc(100% + var(--space-2)); width: min(400px, 88vw); padding: var(--space-2); background: var(--color-card); color: var(--color-heading); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-pop); z-index: var(--z-dropdown); }
.op-find__results a { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; font-size: var(--text-sm); }
.op-find__results a small { color: var(--color-muted); flex: none; }
.op-find__results a:hover, .op-find__results a[aria-selected="true"] { background: var(--color-surface); color: var(--color-heading); }
.op-find__results p { padding: var(--space-2) var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.op-find__results .op-find__all { color: var(--color-primary-text); font-weight: 600; border-top: 1px solid var(--color-border); border-radius: 0; margin-top: var(--space-1); }

.op-bar__toggle { display: none; margin-left: auto; width: var(--control-h); height: var(--control-h); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); color: var(--color-heading); cursor: pointer; place-items: center; }
.op-bar__close { display: none; }

@media (max-width: 1179px) {
	.op-nav__list { gap: var(--space-3); }
	.op-find__field { width: 180px; }
}
@media (max-width: 1023px) {
	.op-bar__toggle { display: inline-grid; }
	.js .op-nav { position: fixed; inset: var(--header-h) 0 0; z-index: var(--z-bar); flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4) var(--gutter) var(--space-8); background: var(--color-card); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
	.js .op-bar.is-open .op-nav { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s; }
	.op-bar.is-open .op-bar__open { display: none; }
	.op-bar.is-open .op-bar__close { display: block; }
	.op-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.op-nav__list a { min-height: 56px; font-size: var(--text-lg); border-bottom: 1px solid var(--color-border); }
	.op-nav__list a[aria-current="page"]::after { display: none; }
	.op-nav__end { flex-direction: column; align-items: stretch; margin-left: 0; }
	.op-find__field { width: 100%; min-height: var(--control-h); }
	.op-nav__quiet { min-height: var(--control-h); justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius); }
	.op-nav__end .op-btn { min-height: var(--control-h); }
	html:not(.js) .op-nav, html:not(.js) .op-bar__toggle { display: none; }
}

/* Page hero (Use with Claude) */
.op-hero { position: relative; padding: var(--space-7) 0 var(--space-8); background: var(--color-surface); border-bottom: 1px solid var(--color-border); overflow: clip; }
.op-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); align-items: center; }
.op-hero__title { font-size: var(--text-page); max-width: 18ch; letter-spacing: -0.03em; }
.op-hero__lead { margin-top: var(--space-3); font-size: var(--text-lg); max-width: 52ch; }
.op-hero__mascot--small { width: 184px; }
.op-hero .op-crumbs { margin-bottom: var(--space-4); }
@media (max-width: 760px) { .op-hero__grid { grid-template-columns: minmax(0, 1fr); } .op-hero__mascot--small { display: none; } }

/* ---------------------------------------------------------------------
 * Code blocks and terminal
 * ------------------------------------------------------------------ */
.op-code { background: var(--color-code); color: var(--color-code-ink); border-radius: var(--radius); overflow: hidden; }
.op-code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 40px; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3); background: var(--color-code-2); color: var(--color-code-muted); font-size: var(--text-xs); font-weight: 500; }
.op-code__bar .op-copy { color: var(--color-code-ink); border-color: var(--color-field-3); }
.op-code__bar .op-copy:hover { background: var(--color-field-3); }
.op-code pre { margin: 0; padding: var(--space-3); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 28em; overflow: auto; }
.op-code :focus-visible { outline-color: var(--color-lilac-2); }
.op-code--file pre { max-height: none; }


/* ---------------------------------------------------------------------
 * Home (Hallmark modern-minimal)
 * ------------------------------------------------------------------ */
.op-band { padding: var(--section) 0; }
.op-band--tight { padding-top: 0; }
.op-band--well, .op-band--soft, .op-band--tint { background: var(--color-surface); }
.op-band--field { background: var(--color-surface); }

.op-btn--ink { --btn-bg: var(--color-heading); --btn-ink: var(--color-on-ink); --btn-line: var(--color-heading); box-shadow: none; }
.op-btn--ink:hover { --btn-bg: var(--color-ink-hover); border-color: var(--color-ink-hover); }
.op-btn--outline { --btn-bg: var(--color-card); --btn-ink: var(--color-heading); --btn-line: var(--color-border-strong); box-shadow: none; }
.op-btn--outline:hover { --btn-bg: var(--color-surface); border-color: var(--color-heading); }
.op-btn--pill { border-radius: var(--radius-pill); }
.op-btn--pill.op-btn--lg { min-height: 52px; padding-inline: var(--space-5); font-size: var(--text-md); }

.op-hx { padding: var(--space-8) 0 var(--space-9); border-bottom: 1px solid var(--color-border); }
.op-hx__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--space-8); align-items: center; }
.op-hx__title { font-size: var(--text-hero); line-height: 1.02; letter-spacing: -0.042em; font-weight: 600; max-width: 11ch; }
.op-hx__lead { margin-top: var(--space-4); font-size: var(--text-lead); line-height: 1.5; color: var(--color-text); max-width: 34ch; }
.op-hx__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.op-hx__terms { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }

.op-hx__slot { padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface); }
.op-hx__panel { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; animation: op-settle 600ms var(--ease-out) both; }
.op-hx__head { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); }
.op-hx__kind { font-size: var(--text-xs); font-weight: 500; color: var(--color-primary-text); }
.op-hx__plan { margin-top: var(--space-1); font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; }
.op-hx__plan a { text-decoration: none; }
.op-hx__plan a:hover { color: var(--color-primary-text); }
.op-hx__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); list-style: none; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.op-hx__meta a { color: var(--color-text); text-decoration: none; }
.op-hx__steps { list-style: none; }
.op-hx__steps > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.op-hx__steps > li + li { border-top: 1px solid var(--color-border); }
.op-hx__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); font-size: var(--text-xs); font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.op-hx__steps > li.is-open .op-hx__n { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.op-hx__steptitle { font-size: var(--text-sm); font-weight: 600; color: var(--color-heading); line-height: 24px; }
.op-hx__steps > li:not(.is-open) .op-hx__steptitle { font-weight: 400; color: var(--color-text); }
.op-hx__prompt { margin-top: var(--space-2); border-radius: var(--radius); background: var(--color-code); color: var(--color-code-ink); overflow: hidden; }
.op-hx__promptbar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 var(--space-2) 0 var(--space-3); color: var(--color-code-muted); font-size: var(--text-xs); border-bottom: 1px solid var(--color-code-2); }
.op-hx__promptbar .op-copy { color: var(--color-code-ink); border-color: var(--color-field-3); }
.op-hx__prompt pre { margin: 0; padding: var(--space-3); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9.9em; overflow: auto; }
.op-hx__done { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-ok); }
.op-hx__done .op-icon { flex: none; margin-top: var(--space-1); }
.op-hx__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
@keyframes op-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.op-lib__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); }
.op-lib__top .op-h2 { margin: 0; }
.op-seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); }
.op-seg button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.op-seg button:hover { color: var(--color-heading); }
.op-seg button[aria-selected="true"] { background: var(--color-card); color: var(--color-heading); box-shadow: 0 1px 2px var(--color-shadow), 0 0 0 1px var(--color-border); }
.op-seg__n { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.op-lib__h { margin: var(--space-5) 0 var(--space-3); font-size: var(--text-lg); }
.js .op-lib__h { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.js .op-lib__panel[data-op-later] { display: none; }
.op-rowlist { list-style: none; border-top: 1px solid var(--color-border); }
.op-rowlist li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 160px 64px; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.op-rowlist__title { font-weight: 600; color: var(--color-heading); text-decoration: none; }
.op-rowlist__title:hover { color: var(--color-primary-text); }
.op-rowlist__sum { font-size: var(--text-sm); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-rowlist__by { font-size: var(--text-sm); }
.op-rowlist__by a { color: var(--color-muted); text-decoration: none; }
.op-rowlist__by a:hover { color: var(--color-heading); }
.op-rowlist__stars { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.op-lib__all { margin-top: var(--space-4); }

.op-mcpx { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; }
.op-mcpx__lead { margin-top: var(--space-3); font-size: var(--text-lead); color: var(--color-text); max-width: 40ch; }
.op-mcpx__asks { display: grid; gap: var(--space-2); margin: var(--space-5) 0; list-style: none; }
.op-mcpx__asks li { padding: var(--space-3) var(--space-4); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card) var(--radius-card) var(--radius-card) var(--space-1); color: var(--color-heading); max-width: 44ch; }
.op-mcpx__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-4) 0 0; }
.op-mcpx__tools div { padding-top: var(--space-2); border-top: 1px solid var(--color-border-strong); }
.op-mcpx__tools dt code { background: none; border: 0; padding: 0; font-size: var(--text-sm); color: var(--color-heading); }
.op-mcpx__tools dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-muted); }

.op-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.op-table th, .op-table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: baseline; }
.op-table thead th { padding-top: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.op-table tbody th { font-weight: 600; }
.op-table tbody th a { color: var(--color-heading); text-decoration: none; }
@media (max-width: 640px) { .op-table tbody th { max-width: 0; width: 100%; } .op-table tbody th a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.op-table tbody th a:hover { color: var(--color-primary-text); }
.op-table td a { color: var(--color-text); text-decoration: none; }
.op-table__n { width: 48px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.op-table__num { text-align: right !important; font-variant-numeric: tabular-nums; }
.op-table tbody tr { transition: background-color var(--dur-micro) var(--ease-out); }
.op-table tbody tr:hover { background: var(--color-surface); }

.op-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); list-style: none; }
.op-shots a { display: grid; gap: var(--space-1); text-decoration: none; }
.op-shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-card); border: 1px solid var(--color-border); margin-bottom: var(--space-2); }
.op-shots__plan { font-weight: 600; color: var(--color-heading); }
.op-shots a:hover .op-shots__plan { color: var(--color-primary-text); }
.op-shots__by { font-size: var(--text-sm); color: var(--color-muted); }

.op-close { border-top: 1px solid var(--color-border); }
.op-close__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.op-close__lead { margin-top: var(--space-2); font-size: var(--text-lead); color: var(--color-text); }

@media (max-width: 1023px) {
	.op-hx { padding: var(--space-6) 0 var(--space-8); }
	.op-hx__grid, .op-mcpx { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	.op-hx__title { max-width: 14ch; }
	.op-rowlist li { grid-template-columns: minmax(0, 1fr) 140px 56px; }
	.op-rowlist__sum { display: none; }
	.op-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.op-shots li:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
	.op-hx__slot { padding: var(--space-2); }
	.op-hx__actions .op-btn { flex: 1 1 100%; }
	.op-seg { width: 100%; border-radius: var(--radius); }
	.op-seg button { flex: 1 1 40%; justify-content: center; border-radius: var(--radius-sm); }
	.op-rowlist li { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); }
	.op-rowlist__by { grid-column: 1; grid-row: 2; }
	.op-rowlist__stars { grid-column: 2; grid-row: 1; }
	.op-table__hide { display: none; }
	.op-shots { grid-template-columns: minmax(0, 1fr); }
	.op-shots li:nth-child(3) { display: grid; }
	.op-mcpx__tools { grid-template-columns: minmax(0, 1fr); }
}
/* Kept from 2.3: older home pieces still used by other templates */
.op-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--space-8); align-items: start; }
.op-split__head { display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.op-people { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.op-people a { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border-radius: var(--radius-card); background: var(--color-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); text-align: center; text-decoration: none; transition: transform var(--dur-short) var(--ease-out); }
.op-people a:hover { transform: translateY(-4px); color: var(--color-heading); }
.op-people__name { font-weight: 600; color: var(--color-heading); overflow-wrap: anywhere; }
.op-people--cards { grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); }
@media (max-width: 1023px) { .op-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .op-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .op-split__head { position: static; } }

/* ---------------------------------------------------------------------
 * Cards, kinds, tags, bubbles
 * ------------------------------------------------------------------ */
.op-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); list-style: none; }
.op-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.op-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--color-rule-2); }
.op-card:focus-within { border-color: var(--color-focus); }
.op-card__title { margin-top: var(--space-2); font-size: var(--text-title); font-weight: 650; line-height: 1.25; }
.op-card__title a { text-decoration: none; }
.op-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.op-card__title a:focus-visible { outline: none; }
.op-card__sum { color: var(--color-ink-2); font-size: var(--text-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.op-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: auto; padding-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.op-card__who { position: relative; z-index: var(--z-raised); display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink-2); font-weight: 500; text-decoration: none; }
.op-card__who:hover { color: var(--color-primary-text); text-decoration: underline; }
.op-card__stat { display: inline-flex; align-items: center; gap: var(--space-2xs); font-variant-numeric: tabular-nums; }
.op-card__stat .op-icon { color: var(--color-cheek); }
.op-card__foot .op-tag { position: relative; z-index: var(--z-raised); }

.op-kind { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--kind-bg, var(--color-plan)); color: var(--kind-ink, var(--color-plan-ink)); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; }
.op-kind a { color: inherit; text-decoration: none; }
.op-kind--skill { --kind-bg: var(--color-skill); --kind-ink: var(--color-skill-ink); }
.op-kind--mcp { --kind-bg: var(--color-mcp); --kind-ink: var(--color-mcp-ink); }
.op-kind--plugin { --kind-bg: var(--color-plugin); --kind-ink: var(--color-plugin-ink); }

.op-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; }
.op-tag { display: inline-flex; align-items: center; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); border: 1px solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 500; text-decoration: none; }
a.op-tag:hover { background: var(--color-paper-3); color: var(--color-primary-text); }
.op-tag--pending { background: var(--color-warn-2); color: var(--color-warn); border-color: transparent; }
.op-tag--draft { background: var(--color-paper-3); }

.op-bubble { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-lilac); color: var(--color-lilac-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1; }
.op-bubble--sm { width: 24px; height: 24px; font-size: 0.75rem; }
.op-bubble--xl { width: 96px; height: 96px; font-size: 2.6rem; box-shadow: var(--shadow-card); }

@media (max-width: 1079px) { .op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .op-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------
 * Breadcrumbs and notices
 * ------------------------------------------------------------------ */
.op-crumbs { margin-bottom: var(--space-lg); font-size: var(--text-sm); }
.op-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-xs); list-style: none; }
.op-crumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); min-width: 0; }
.op-crumbs li + li::before { content: "/"; color: var(--color-rule-2); }
.op-crumbs a { color: var(--color-muted); text-decoration: none; }
.op-crumbs a:hover { color: var(--color-primary-text); text-decoration: underline; }
.op-crumbs [aria-current="page"] { color: var(--color-ink); font-weight: 600; overflow-wrap: anywhere; }

.ownly-notice { display: block; margin: 0 0 var(--space-lg); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); font-weight: 500; }
.ownly-notice--success { border-color: var(--color-ok-line); background: var(--color-ok-2); color: var(--color-ok); }
.ownly-notice--error { border-color: var(--color-error-line); background: var(--color-error-2); color: var(--color-error); }
.ownly-notice--info { border-color: var(--color-lilac); background: var(--color-paper-2); color: var(--color-ink-2); }
.ownly-notice a { color: inherit; }

/* ---------------------------------------------------------------------
 * Item, file and profile pages
 * ------------------------------------------------------------------ */
.op-item__head { padding: var(--space-xl) 0 var(--space-2xl); background: var(--color-paper-2); border-bottom: 1px solid var(--color-border); }
.op-item__head .op-kind { margin-bottom: var(--space-sm); }
.op-item__title { font-size: var(--text-page); max-width: 22ch; letter-spacing: -0.015em; }
.op-item__lead { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 60ch; }
.op-item__by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); }
.op-person { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.op-person:hover strong { text-decoration: underline; }
.op-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.op-actions form { margin: 0; }
.op-actions--center { justify-content: center; }
.op-item__remix { margin-top: var(--space-md); font-size: var(--text-sm); }

.op-report { position: relative; }
.op-report summary { list-style: none; }
.op-report summary::-webkit-details-marker { display: none; }
.op-report__menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: var(--z-dropdown); display: grid; gap: var(--space-xs); width: min(320px, 86vw); padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: var(--text-sm); }
.op-report__menu label { display: flex; gap: var(--space-xs); align-items: flex-start; }

.op-item__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-2xl); padding-block: var(--space-2xl) var(--section); align-items: start; }
.op-item__main { display: grid; gap: var(--space-2xl); min-width: 0; }
.op-item__main > section > .op-h3, .op-item__main > section > .op-head-row { margin-bottom: var(--space-md); }
.op-item__aside { position: sticky; top: 96px; }
.op-install p { margin-top: var(--space-sm); font-size: var(--text-sm); }

.op-panel { padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.op-panel__h { margin: var(--space-lg) 0 var(--space-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.op-panel__small { margin-top: var(--space-sm); font-size: var(--text-sm); }
.op-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: 0; }
.op-facts div { min-width: 0; }
.op-facts dt { font-size: var(--text-xs); color: var(--color-muted); }
.op-facts dd { margin: var(--space-3xs) 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.2; font-variant-numeric: tabular-nums; }
.op-tools { display: grid; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.op-tool { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); font-weight: 600; text-align: left; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.op-tool:hover { border-color: var(--color-lilac); background: var(--color-paper-2); }

.op-md { line-height: 1.7; }
.op-md > * + * { margin-top: var(--space-md); }
.op-md h2, .op-md h3, .op-md h4, .op-md h5 { font-size: var(--text-lg); margin-top: var(--space-xl); }
.op-md h2 { font-size: var(--text-xl); }
.op-md ul, .op-md ol { padding-left: 1.4em; }
.op-md li + li { margin-top: var(--space-xs); }
.op-md blockquote { margin: 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-ink-2); }
.op-md hr { border: 0; border-top: 1px dashed var(--color-border-strong); }
.op-md__code { margin: var(--space-md) 0 0; padding: var(--space-md); background: var(--color-code); color: var(--color-code-ink); border-radius: var(--radius); font-size: 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.op-md__code code { background: none; padding: 0; color: inherit; }
.op-md--clip { position: relative; max-height: 420px; overflow: hidden; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.op-md--clip::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--color-surface)); pointer-events: none; }

.op-prose { line-height: 1.75; max-width: 68ch; }
.op-prose--wide { max-width: none; }
.op-prose > * + * { margin-top: var(--space-md); }
.op-prose h2, .op-prose h3 { margin-top: var(--space-xl); }
.op-prose ul, .op-prose ol { padding-left: 1.4em; }
.op-prose a { color: var(--color-primary-text); }
.op-prose__cover { border-radius: var(--radius-card); margin-bottom: var(--space-lg); }

.op-progress { display: inline-flex; align-items: center; gap: var(--space-sm); }
.op-progress__track { display: block; width: 140px; height: 12px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.op-progress__track > span { display: block; height: 100%; width: 100%; background: var(--color-signal); border-radius: inherit; transform-origin: left; transform: scaleX(var(--op-pct, 0%)); transition: transform var(--dur-short) var(--ease-out); }

.op-steplist { list-style: none; display: grid; gap: var(--space-md); counter-reset: none; }
.op-step { position: relative; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.op-step.is-done { background: var(--color-paper-2); border-color: var(--color-rule-2); }
.op-step__head { display: flex; align-items: center; gap: var(--space-md); }
.op-step__head form { margin: 0; }
.op-step__n { flex: none; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-primary-text); font-family: var(--font-display); font-weight: 600; border: 2px solid transparent; }
.op-step__n--btn { cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.op-step__n--btn .op-icon { display: none; }
.op-step__n--btn:hover { border-color: var(--color-lilac); }
.op-step.is-done .op-step__n--btn { background: var(--color-ok); color: var(--color-signal-ink); }
.op-step.is-done .op-step__n--btn .op-step__num { display: none; }
.op-step.is-done .op-step__n--btn .op-icon { display: block; }
.op-step__title { font-size: var(--text-lg); line-height: 1.25; }
.op-step__body { display: grid; gap: var(--space-md); margin-top: var(--space-md); padding-left: calc(var(--space-xl) + var(--space-md)); }
.op-step__text p + p { margin-top: var(--space-sm); }
.op-step__done { display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-sm) var(--space-md); background: var(--color-ok-2); color: var(--color-ok); border-radius: var(--radius); font-size: var(--text-sm); }
.op-step__done .op-icon { flex: none; margin-top: var(--space-2xs); }
.op-step__uses { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.op-finish { display: flex; gap: var(--space-xs); align-items: center; margin-top: var(--space-md); padding: var(--space-md); border-radius: var(--radius); background: var(--color-ok-2); color: var(--color-ok); font-weight: 600; }

.op-files { list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.op-file { padding: var(--space-md) var(--space-lg); }
.op-file + .op-file { border-top: 1px solid var(--color-border); }
.op-file > .op-code, .op-file > .op-warn { margin-top: var(--space-md); }
.op-file__row { display: flex; align-items: flex-start; gap: var(--space-md); }
.op-file__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--color-paper-2); color: var(--color-primary-text); }
.op-file--mcp .op-file__icon { background: var(--color-mcp); color: var(--color-mcp-ink); }
.op-file--git .op-file__icon { background: var(--color-plugin); color: var(--color-plugin-ink); }
.op-file__who { display: flex; flex-direction: column; gap: var(--space-3xs); flex: 1; min-width: 0; }
.op-file__name { font-weight: 600; overflow-wrap: anywhere; }
.op-file__note { font-size: var(--text-sm); color: var(--color-muted); }
.op-file__tools { flex: none; display: flex; gap: var(--space-xs); }
.op-warn { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: var(--color-warn-2); color: var(--color-warn); font-size: var(--text-sm); }
.op-warn .op-icon { flex: none; margin-top: var(--space-3xs); }
.op-warn code { background: var(--color-surface); }

.op-log { list-style: none; display: grid; gap: var(--space-xs); }
.op-log li { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }

.op-filepage__titlerow { display: flex; align-items: center; gap: var(--space-sm); max-width: none; overflow-wrap: anywhere; }
.op-filepage__titlerow > .op-icon { flex: none; }
.op-filepage__from { margin-top: var(--space-sm); color: var(--color-muted); }
.op-filepage .op-item__main { gap: var(--space-lg); }
.op-source { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.op-source summary { padding: var(--space-sm) var(--space-md); cursor: pointer; font-weight: 600; color: var(--color-ink-2); }
.op-source__pre { margin: 0; padding: var(--space-md); border-top: 1px solid var(--color-border); font-size: 0.85rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.op-filenav { list-style: none; display: grid; gap: var(--space-3xs); }
.op-filenav a { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); text-decoration: none; overflow-wrap: anywhere; }
.op-filenav a:hover { background: var(--color-paper-2); }
.op-filenav a[aria-current="page"] { background: var(--color-paper-3); color: var(--color-primary-text); font-weight: 600; }
.op-filenav .op-icon { flex: none; }

.op-profile__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-lg); align-items: start; }
.op-profile__who .op-item__title { font-size: var(--text-page); }
.op-profile__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-md); list-style: none; font-size: var(--text-sm); }
.op-profile__links a { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 500; }
.op-stats { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-xl) 0 0; }
.op-stats div { min-width: 130px; padding: var(--space-sm) var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.op-stats dt { font-size: var(--text-xs); color: var(--color-muted); }
.op-stats dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.2; font-variant-numeric: tabular-nums; }

.op-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.op-tabs a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink-2); font-weight: 600; font-size: var(--text-sm); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.op-tabs a:hover { border-color: var(--color-lilac); color: var(--color-ink); }
.op-tabs a[aria-current="page"] { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-signal-ink); }
.op-tabs__n { font-weight: 500; opacity: 0.8; font-variant-numeric: tabular-nums; }
.op-tabs--big { margin-top: var(--space-xl); }
.op-tabs--big a { min-height: 46px; font-size: var(--text-md); }

.op-rows { list-style: none; display: grid; gap: var(--space-xs); }
.op-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-surface); border-radius: var(--radius); }

.op-empty { display: grid; justify-items: center; gap: var(--space-md); padding: var(--space-2xl) var(--space-lg); text-align: center; color: var(--color-muted); }
.op-empty__mascot { width: 140px; }

@media (max-width: 960px) {
	.op-item__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
	.op-item__aside { position: static; }
	.op-profile__head { grid-template-columns: auto minmax(0, 1fr); }
	.op-profile__follow { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
	.op-step { padding: var(--space-md); }
	.op-step__body { padding-left: 0; }
	.op-file { padding: var(--space-md); }
	.op-file__row { flex-wrap: wrap; }
	.op-rank__row { grid-template-columns: 36px minmax(0, 1fr); }
	.op-rank__stars { grid-column: 2; }
	.op-bubble--xl { width: 72px; height: 72px; font-size: 2rem; }
}

/* ---------------------------------------------------------------------
 * Builds and the build dialog
 * ------------------------------------------------------------------ */
.op-grid--builds { margin-bottom: var(--space-xl); }
.op-build { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.op-build__media { position: relative; aspect-ratio: 16 / 10; background: var(--color-paper-3); }
.op-build__media img, .op-build__media video, .op-build__frame { width: 100%; height: 100%; object-fit: cover; border: 0; }
.op-build__play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--color-code); cursor: pointer; }
.op-build__playicon { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: var(--radius-pill); background: var(--color-lilac); color: var(--color-lilac-ink); box-shadow: var(--shadow-card); transition: transform var(--dur-short) var(--ease-out); }
.op-build__play:hover .op-build__playicon { transform: translate(-50%, -50%) scale(1.08); }
.op-build__empty { display: grid; place-items: center; height: 100%; color: var(--color-muted); }
.op-build__body { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-lg) var(--space-lg); font-size: var(--text-sm); }
.op-build__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); list-style: none; color: var(--color-muted); }
.op-build__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.op-build__links a { color: var(--color-primary-text); font-weight: 600; }
.op-builds__form { max-width: 820px; }
.op-builds__form .op-h3 { margin-bottom: var(--space-md); }

.op-dialog { width: calc(100% - 2 * var(--space-md)); max-width: 680px; max-height: calc(100% - 2 * var(--space-md)); padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-card); }
.op-dialog::backdrop { background: var(--color-scrim); }
.op-dialog__inner { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.op-dialog__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-md); }
.op-dialog__prompt { max-height: 16em; }
.op-dialog__how code { background: var(--color-paper-2); }
.op-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); }
.op-pick { border: 0; margin: 0; padding: 0; }
.op-pick legend { margin-bottom: var(--space-xs); font-weight: 600; color: var(--color-muted); font-size: var(--text-sm); }
.op-pick__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.op-pick__opt { position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-weight: 600; cursor: pointer; }
.op-pick__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.op-pick__opt:has(input:checked) { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-signal-ink); }
.op-pick__opt:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---------------------------------------------------------------------
 * Explore
 * ------------------------------------------------------------------ */
.op-filter { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.op-filter__q { display: flex; align-items: center; gap: var(--space-xs); flex: 1 1 320px; min-height: 50px; padding: 0 var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-muted); }
.op-filter__q:focus-within { border-color: var(--color-focus); }
.op-filter__q input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--color-ink); }
.op-filter__sel select { min-height: 50px; padding: 0 var(--space-xl) 0 var(--space-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background-color: var(--color-surface); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.op-filter .op-btn { min-height: 50px; }
.op-results { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-bottom: var(--space-lg); }

.op-pages, .navigation.pagination { margin-top: var(--space-2xl); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; }
.page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-weight: 600; text-decoration: none; }
.page-numbers.current { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-signal-ink); }
a.page-numbers:hover { border-color: var(--color-lilac); }
.page-numbers.dots { border: 0; background: transparent; }

/* ---------------------------------------------------------------------
 * Use with Claude, pricing, blog, 404
 * ------------------------------------------------------------------ */
.op-howto { list-style: none; display: grid; gap: var(--space-xl); margin-top: var(--space-xl); counter-reset: howto; }
.op-howto > li { position: relative; display: grid; gap: var(--space-sm); padding-left: var(--space-2xl); counter-increment: howto; }
.op-howto > li::before { content: counter(howto); position: absolute; left: 0; top: calc(var(--space-2xs) * -1); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-lilac); color: var(--color-lilac-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.op-asks { list-style: none; display: grid; gap: var(--space-sm); }
.op-asks li { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-md) var(--space-lg); background: var(--color-surface); border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 6px; box-shadow: var(--shadow-card); font-size: var(--text-lead); }
.op-asks .op-icon { flex: none; margin-top: var(--space-2xs); color: var(--color-primary-text); }
.op-toollist { display: grid; gap: var(--space-md); margin: var(--space-lg) 0; }
.op-toollist div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.op-toollist dd { margin: 0; color: var(--color-ink-2); }
@media (max-width: 640px) {
	.op-toollist div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
	.op-howto > li { padding-left: 0; padding-top: var(--space-2xl); }
}

.op-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); align-items: stretch; }
.op-tier { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.op-tier--hl { border-color: var(--color-signal); box-shadow: var(--shadow-card); }
.op-tier__price strong { font-family: var(--font-display); font-size: var(--text-section); font-weight: 600; }
.op-tier .op-btn { margin-top: auto; }
.op-checks { list-style: none; display: grid; gap: var(--space-xs); }
.op-checks li { display: flex; gap: var(--space-xs); align-items: flex-start; }
.op-checks .op-icon { flex: none; margin-top: var(--space-2xs); color: var(--color-ok); }
@media (max-width: 860px) { .op-tiers { grid-template-columns: minmax(0, 1fr); } }

.op-postlist { list-style: none; display: grid; gap: var(--space-xl); }
.op-postlist li { display: grid; gap: var(--space-xs); }
.op-postlist a { text-decoration: none; }
.op-postlist a:hover { text-decoration: underline; }

.op-lost__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-sm); }
.op-lost__mascot { width: 220px; margin-bottom: var(--space-md); }
.op-lost .op-item__title, .op-lost .op-item__lead { margin-inline: auto; }

.comments { margin: var(--space-2xl) 0; }
.comment-list { list-style: none; display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }
.comment-list .children { list-style: none; margin-left: var(--space-xl); }
.comment-body { padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius); }
.op-widget { margin-bottom: var(--space-xl); }

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------ */
.op-foot { background: var(--color-surface); border-top: 1px solid var(--color-border); color: var(--color-text); padding: var(--space-9) 0 var(--space-5); }
.op-foot__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.op-foot__brand p { margin-top: var(--space-3); max-width: 45ch; color: var(--color-muted); }
.op-foot__col h2 { margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--color-heading); }
.op-foot__col ul { list-style: none; display: grid; gap: var(--space-2); }
.op-foot a { color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
.op-foot a:hover { color: var(--color-primary-text); }
.op-social { display: flex; gap: var(--space-2); margin-top: var(--space-4); list-style: none; }
.op-social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); }
.op-foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 860px) { .op-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-foot__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .op-foot { padding-top: var(--space-7); } .op-foot__grid { gap: var(--space-5); } }

/* ---------------------------------------------------------------------
 * App pages, narrow pages and the plugin's forms
 * ------------------------------------------------------------------ */
.op-app { padding: var(--space-xl) 0 var(--section); }
.op-app__title { font-size: var(--text-page); margin-bottom: var(--space-lg); }
.op-app__body { max-width: 980px; }

.op-narrowpage { padding: var(--space-2xl) var(--gutter) var(--section); background: var(--color-paper-2); }
.op-narrowpage__card { position: relative; background: var(--color-card); border: 1px solid var(--color-border); max-width: 520px; margin: var(--space-2xl) auto 0; padding: var(--space-3xl) var(--space-xl) var(--space-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.op-narrowpage__mascot { position: absolute; top: calc(var(--space-2xl) * -1); left: 50%; width: 170px; transform: translateX(-50%); }
.op-narrowpage__card > .op-h2 { text-align: center; margin-inline: auto; }
.op-narrowpage__card > .op-muted { text-align: center; margin-top: var(--space-xs); }
.op-narrowpage__body { margin-top: var(--space-lg); }
@media (max-width: 640px) { .op-narrowpage__card { padding: var(--space-3xl) var(--space-lg) var(--space-lg); } }

.ownly-form-wrap, .ownly-auth, .ownly-contact { display: grid; gap: var(--space-md); }
.ownly-form { display: grid; gap: var(--space-md); }
.ownly-field { display: grid; gap: var(--space-xs); margin: 0; min-width: 0; }
.ownly-field > label, .ownly-field > legend, fieldset.ownly-field > legend { font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); }
fieldset.ownly-field { border: 0; padding: 0; }
.ownly-field input[type="text"], .ownly-field input[type="email"], .ownly-field input[type="password"], .ownly-field input[type="url"], .ownly-field input[type="number"], .ownly-field input[type="search"], .ownly-field input[type="file"], .ownly-field select, .ownly-field textarea, .op-ed-row input[type="text"], .op-ed-row input[type="url"], .op-ed-row select, .op-ed-row textarea {
	width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.ownly-field textarea, .op-ed-row textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.ownly-field input:focus, .ownly-field select:focus, .ownly-field textarea:focus, .op-ed-row input:focus, .op-ed-row select:focus, .op-ed-row textarea:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 4px var(--color-focus-light); }
.ownly-field input[aria-invalid="true"] { border-color: var(--color-error); }
.ownly-field--inline { display: flex; align-items: flex-start; gap: var(--space-xs); }
.ownly-field input[type="checkbox"], .ownly-field input[type="radio"] { width: 20px; height: 20px; margin: var(--space-3xs) 0 0; accent-color: var(--color-signal); }
.ownly-help { font-size: var(--text-sm); color: var(--color-muted); }
.ownly-help a { color: var(--color-primary-text); }
.ownly-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); }
.ownly-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-xs); }
.ownly-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-primary); border-radius: var(--radius-pill); background: var(--color-signal); color: var(--color-signal-ink); box-shadow: 0 8px 16px -8px var(--color-shadow-2); font-weight: 600; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.ownly-button:hover { background: var(--color-signal-2); color: var(--color-signal-ink); transform: translateY(-1px); }
.ownly-button:active { transform: translateY(2px); box-shadow: var(--shadow-card); }
.ownly-button--secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-rule-2); box-shadow: var(--shadow-card); }
.ownly-button--secondary:hover { background: var(--color-paper-2); color: var(--color-ink); }
.ownly-auth .ownly-button, .ownly-narrow .ownly-button { width: 100%; }
.ownly-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); }
.ownly-links a { color: var(--color-primary-text); }
.op-req { color: var(--color-error); }
.ownly-optional { font-weight: 400; color: var(--color-muted); }
.ownly-password { position: relative; display: block; }
.ownly-password input { padding-right: 136px !important; }
.ownly-password__toggle { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary-text); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.ownly-password__toggle:hover { background: var(--color-primary-light); }
.ownly-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.op-handle-input { display: flex; align-items: stretch; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); overflow: hidden; }
.op-handle-input:focus-within { border-color: var(--color-focus); box-shadow: 0 0 0 4px var(--color-focus-light); }
.op-handle-input__base { display: flex; align-items: center; padding: 0 var(--space-sm); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.ownly-field .op-handle-input input[type="text"] { border: 0; border-radius: 0; box-shadow: none; }

/* Member dashboard */
.op-dash { display: grid; gap: var(--space-lg); }
.op-dash__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.op-dash__avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--color-lilac); color: var(--color-lilac-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.op-dash__hello { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.2; }
.op-dash__head .ownly-help { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); }
.op-dash__signout { color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); }
.op-dash__tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.op-dash__tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-weight: 600; font-size: var(--text-sm); text-decoration: none; color: var(--color-ink-2); }
.op-dash__tabs a:hover { border-color: var(--color-lilac); }
.op-dash__tabs a[aria-current="page"] { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-signal-ink); }
.op-dash__section { display: grid; gap: var(--space-md); }
.op-dash__section > h2, .op-dash__section > .op-h3 { font-size: var(--text-title); }
.op-dash__stats { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; }
.op-dash__stats div { min-width: 150px; padding: var(--space-sm) var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.op-dash__stats dt { font-size: var(--text-xs); color: var(--color-muted); }
.op-dash__stats dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); }
.op-dash__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); }
.op-dash__card { display: grid; gap: var(--space-xs); padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-decoration: none; transition: transform var(--dur-short) var(--ease-out); }
.op-dash__card:hover { transform: translateY(-3px); color: var(--color-ink); }
.op-dash__card strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.op-dash__card span { color: var(--color-muted); font-size: var(--text-sm); }
.op-dash__list { list-style: none; display: grid; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.op-dash__list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); }
.op-dash__list > li + li { border-top: 1px solid var(--color-border); }
.op-dash__list > li > div { display: grid; gap: var(--space-3xs); min-width: 0; }
.op-dash__empty { padding: var(--space-lg); background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card); color: var(--color-muted); }
.op-status { display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; background: var(--color-paper-2); color: var(--color-ink-2); }
.op-status--live { background: var(--color-ok-2); color: var(--color-ok); }
.op-status--pending { background: var(--color-warn-2); color: var(--color-warn); }
.op-status--draft { background: var(--color-paper-3); }
@media (max-width: 640px) { .op-dash__head { grid-template-columns: auto minmax(0, 1fr); } .op-dash__signout { grid-column: 1 / -1; } }

/* Share editor */
.op-editor { display: grid; gap: var(--space-lg); }
.op-editor__status { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.op-editor__form { gap: var(--space-xl); }
.op-editor-gate, .op-build-gate { padding: var(--space-xl); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); text-align: center; display: grid; gap: var(--space-md); justify-items: center; }
.op-ed-section { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.op-ed-section > h2 { font-size: var(--text-title); }
.op-ed-row { position: relative; display: grid; gap: var(--space-sm); margin: 0; padding: var(--space-md); padding-top: var(--space-xl); border: 1px dashed var(--color-border-strong); border-radius: var(--radius); background: var(--color-paper); min-width: 0; }
.op-ed-row > legend { padding: 0 var(--space-xs); font-weight: 600; font-family: var(--font-display); }
.op-ed-row__tools { position: absolute; right: var(--space-sm); top: var(--space-sm); display: flex; gap: var(--space-2xs); }
.op-ed-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); cursor: pointer; font-size: var(--text-sm); }
.op-ed-icon:hover { border-color: var(--color-lilac); }
.op-ed-checks { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.op-ed-checks label { display: inline-flex; gap: var(--space-xs); align-items: center; font-weight: 500; }
.op-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); }
.op-meta-wide { grid-column: 1 / -1; }
.op-mono, .op-ed-row textarea.op-mono { font-family: var(--font-mono); font-size: 0.875rem; }
.op-faint { color: var(--color-muted); }
.op-editor__actions { position: sticky; bottom: 0; z-index: var(--z-raised); display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: 0 -6px 20px -12px var(--color-shadow-2); }
.op-kind-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-xs); }
.op-kind-pick > legend { margin-bottom: var(--space-xs); }
.op-kind-pick > .ownly-help { grid-column: 1 / -1; }
.op-kind-pick__opt { display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-paper); cursor: pointer; }
.op-kind-pick__opt:has(input:checked) { border-color: var(--color-signal); background: var(--color-paper-2); }
.op-kind-pick__opt input { margin-top: var(--space-2xs); accent-color: var(--color-signal); }
.op-kind-pick__opt .ownly-help { display: block; }

/* Build form and uploads */
.op-build-form { display: grid; gap: var(--space-md); }
.op-upload { display: grid; gap: var(--space-xs); padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-paper-2); }
.op-upload__bar { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.op-upload__bar > span { display: block; height: 100%; background: var(--color-signal); }
.op-upload__text { font-size: var(--text-sm); color: var(--color-muted); }
.op-upload__remove { justify-self: start; border: 0; background: none; color: var(--color-error); font-weight: 600; cursor: pointer; padding: 0; }

/* Compact header search: an icon that opens on focus. */
@media (min-width: 1024px) {
	.op-find__field { width: 40px; padding: 0; justify-content: center; border-color: var(--color-field-edge); border-radius: var(--radius-pill); background: var(--color-card); transition: none; }
	.op-find__field input { flex: 0 0 0; width: 0; }
	.op-find__field kbd { display: none; }
	.op-find__field:focus-within { width: 240px; padding: 0 var(--space-2) 0 var(--space-3); justify-content: flex-start; outline: 2px solid var(--color-focus); outline-offset: 2px; }
	.op-find__field:focus-within input { flex: 1 1 auto; width: auto; }
	.op-find__field:hover { background: var(--color-surface); }
}

/* ---------------------------------------------------------------------
 * Light/dark toggle, blue buttons, sky hero, page heroes (2.5)
 * ------------------------------------------------------------------ */
.op-mode { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-heading); cursor: pointer; }
.op-mode:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
.op-mode__sun { display: none; }
:root[data-theme="dark"] .op-mode__sun { display: block; }
:root[data-theme="dark"] .op-mode__moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .op-mode__sun { display: block; } :root:not([data-theme="light"]) .op-mode__moon { display: none; } }

.op-btn--blue { --btn-bg: var(--color-primary); --btn-ink: var(--color-on-primary); --btn-line: var(--color-primary); box-shadow: var(--shadow-blue); }
.op-btn--blue:hover { --btn-bg: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-on-primary); }
.op-playdot { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-primary-light); color: var(--color-primary-text); }
.op-playdot .op-icon { fill: currentColor; }

.op-sky { position: relative; overflow: clip; padding: var(--space-8) 0 var(--space-6); background: var(--gradient-sky); }
.op-sky__clouds { position: absolute; inset: 0; pointer-events: none; }
.op-cloud { position: absolute; fill: var(--color-cloud); filter: blur(3px); opacity: 0.95; }
.op-cloud--l1 { width: 420px; left: -120px; top: 2%; opacity: 0.85; }
.op-cloud--l2 { width: 520px; left: -170px; top: 46%; }
.op-cloud--r1 { width: 460px; right: -150px; top: 8%; transform: scaleX(-1); opacity: 0.85; }
.op-cloud--r2 { width: 560px; right: -190px; top: 50%; transform: scaleX(-1); }
.op-cloud--b { width: 900px; left: 50%; bottom: -90px; margin-left: -450px; opacity: 0.7; filter: blur(8px); }
.op-sky__stage { position: relative; min-height: 600px; display: grid; place-items: center; }
.op-sky__center { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; max-width: 760px; }
.op-sky__halo { display: grid; place-items: center; width: 152px; height: 152px; margin-bottom: var(--space-5); border-radius: var(--radius-pill); background: var(--gradient-halo); box-shadow: 0 0 0 16px var(--color-halo-ring), 0 0 0 40px var(--color-halo-ring-2), var(--shadow-blue); }
.op-sky__mascot { width: 104px; --mascot-cloud-b: var(--mascot-blue-b); --mascot-cloud-c: var(--mascot-blue-c); --mascot-edge: var(--mascot-blue-edge); --mascot-eye-a: var(--mascot-blue-eye); --mascot-eye-b: var(--mascot-blue-eye-2); --mascot-brow: var(--mascot-blue-eye); }
.op-sky__title { position: relative; font-size: clamp(40px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; color: var(--color-heading); max-width: none; }
.op-sky__title em { font-style: normal; color: var(--color-primary-text); }
.op-sky__spark { position: absolute; right: -40px; top: -28px; width: 48px; height: 48px; }
.op-sky__spark i { position: absolute; left: 50%; bottom: 0; width: 4px; height: 16px; border-radius: 4px; background: var(--color-primary-text); transform-origin: 50% 32px; }
.op-sky__spark i:nth-child(1) { transform: rotate(-40deg); }
.op-sky__spark i:nth-child(3) { transform: rotate(40deg); }
.op-sky__lead { margin-top: var(--space-4); max-width: 54ch; font-size: var(--text-lg); color: var(--color-text); }
.op-sky__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
.op-tags-float { position: absolute; inset: 0; list-style: none; z-index: 1; }
.op-float { position: absolute; transform: rotate(var(--r, 0deg)); animation: op-drift 8s ease-in-out infinite; }
.op-float a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-card); box-shadow: var(--shadow-pill); color: var(--color-heading); font-weight: 600; font-size: var(--text-md); text-decoration: none; white-space: nowrap; transition: box-shadow var(--dur-short) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.op-float a .op-icon { color: var(--color-primary-text); }
.op-float a:hover { color: var(--color-primary-text); }
.op-float--1 { --r: -8deg; left: 6%; top: 12%; }
.op-float--2 { --r: -6deg; left: 1%; top: 38%; animation-delay: -2s; }
.op-float--3 { --r: -7deg; left: 3%; top: 62%; animation-delay: -4s; }
.op-float--4 { --r: 9deg; right: 2%; top: 22%; animation-delay: -1s; }
.op-float--5 { --r: 6deg; right: 4%; top: 54%; animation-delay: -3s; }
@keyframes op-drift { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(var(--r)) translateY(-8px); } }
.op-perks { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-6); padding: var(--space-5) var(--space-4); list-style: none; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.op-perks li + li { border-left: 1px solid var(--color-border); }
.op-perks a { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 0 var(--space-3); color: var(--color-heading); text-decoration: none; }
.op-perks a:hover { color: var(--color-primary-text); }
.op-perks .op-icon { flex: none; color: var(--color-primary-text); stroke-width: 1.5; }
.op-perks span { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; max-width: 13ch; }
@media (max-width: 1279px) {
	.op-float a { min-height: 48px; font-size: var(--text-sm); padding: 0 var(--space-3); }
	.op-float--1 { left: 0; } .op-float--2 { left: -2%; } .op-float--3 { left: 0; }
	.op-float--4 { right: -1%; } .op-float--5 { right: 0; }
}
@media (max-width: 1023px) {
	.op-sky { padding-top: var(--space-6); }
	.op-sky__stage { min-height: 0; display: block; }
	.op-tags-float { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); }
	.op-float { position: static; animation: none; }
	.op-float--1, .op-float--3, .op-float--5 { --r: -3deg; }
	.op-float--2, .op-float--4 { --r: 3deg; }
	.op-sky__center { margin-inline: auto; }
	.op-perks span { font-size: var(--text-lg); }
}
@media (max-width: 760px) {
	.op-perks { grid-template-columns: minmax(0, 1fr); padding: var(--space-2) var(--space-4); }
	.op-perks li + li { border-left: 0; border-top: 1px solid var(--color-border); }
	.op-perks a { justify-content: flex-start; padding: var(--space-3) 0; }
	.op-perks .op-icon { width: 32px; height: 32px; }
	.op-perks span { max-width: none; }
	.op-sky__spark { display: none; }
	.op-sky__halo { width: 120px; height: 120px; box-shadow: 0 0 0 12px var(--color-halo-ring), 0 0 0 28px var(--color-halo-ring-2), var(--shadow-blue); }
	.op-sky__mascot { width: 84px; }
	.op-sky__actions .op-btn { flex: 1 1 100%; }
	.op-cloud--l1, .op-cloud--r1 { width: 260px; }
}
@media (max-width: 480px) {
	.op-tags-float { gap: var(--space-1); }
	.op-float a { min-height: 40px; font-size: var(--text-xs); gap: var(--space-1); padding: 0 var(--space-2); }
	.op-float a .op-icon { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .op-float { animation: none; } }

/* Page heroes: one look for kind pages, explore, items, profiles and pages. */
.op-pagehero, .op-item__head { position: relative; padding: var(--space-6) 0 var(--space-7); background: var(--gradient-page); border-bottom: 1px solid var(--color-border); overflow: clip; }
.op-pagehero__inner { position: relative; }
.op-pagehero__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.op-pagehero__title { font-size: var(--text-page); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
.op-pagehero__lead { margin-top: var(--space-3); font-size: var(--text-lg); color: var(--color-text); max-width: 56ch; }
.op-pagehero__count { color: var(--color-muted); font-size: var(--text-sm); }
.op-pagehero__count strong { display: block; font-size: 40px; line-height: 1; color: var(--color-heading); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.op-pagehero .op-tabs--big { margin-top: var(--space-5); }
.op-band--tight-b { padding-bottom: 0; }
.op-item__title { font-weight: 700; letter-spacing: -0.035em; }

/* ---------------------------------------------------------------------
 * Motion preferences
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
	.op-card:hover, .op-kinds a:hover, .op-people a:hover, .op-dash__card:hover, .op-btn:hover, .op-btn:active { transform: none; }
	.op-mascot__eyes { transform: none; }
}
@media (hover: none) {
	.op-card:hover, .op-kinds a:hover, .op-people a:hover { transform: none; }
}
.ownly-links .ownly-button { color: var(--color-on-primary); text-decoration: none; }
.ownly-links .ownly-button--secondary { color: var(--color-heading); }
.op-build { background: var(--color-card); border: 1px solid var(--color-border); }