/* Design tokens adapted from KimiChen/wheels · web-standard-kit. https://github.com/KimiChen/wheels/tree/main/web-standard-kit */ @layer wsk; @layer wsk { /* Tokens and themes — indigo instrument palette. Every themed token is defined once as light-dark(, ); there is no dark override block. `color-scheme` on :root is the only switch: the system decides unless [data-theme] forces a mode. Contrast pairs are WCAG-checked; keep text/surface pairs ≥ 4.5:1 (AA) and non-text indicators ≥ 3:1 when adjusting. */ :root { color-scheme: light dark; --canvas: light-dark(#f7f8fb, #0a0f1d); --surface: light-dark(#ffffff, #121827); --surface-raised: light-dark(#ffffff, #151d2f); --surface-soft: light-dark(#f1f3f7, #1b2335); --surface-strong: light-dark(#e9edf3, #222d42); --border: light-dark(#e0e4eb, rgb(148 163 184 / 16%)); --border-strong: light-dark(#98a2b1, rgb(148 163 184 / 50%)); --field-border: light-dark(#7e8899, rgb(148 163 184 / 70%)); --text: light-dark(#151b2b, #f1f5f9); --muted: light-dark(#57637a, #b4bfce); --muted-soft: light-dark(#5f6a7c, #8b96a9); --accent: light-dark(#4f46e5, #818cf8); --accent-hover: light-dark(#4338ca, #a5b4fc); --accent-soft: light-dark(#eef2ff, rgb(129 140 248 / 15%)); --on-accent: light-dark(#ffffff, #0b1020); --brand: light-dark(#4f46e5, #4f51dd); --on-brand: #ffffff; --success: light-dark(#047857, #6ee7b7); --success-soft: light-dark(#ecfdf5, rgb(110 231 183 / 14%)); --warning: light-dark(#a16207, #fcd34d); --warning-soft: light-dark(#fffbeb, rgb(252 211 77 / 14%)); --danger: light-dark(#b91c1c, #fca5a5); --danger-soft: light-dark(#fef2f2, rgb(252 165 165 / 14%)); --on-danger: light-dark(#ffffff, #24090d); --info: light-dark(#0369a1, #7dd3fc); --info-soft: light-dark(#f0f9ff, rgb(125 211 252 / 14%)); /* Links are a role of their own. Binding them to --accent makes every heading on a content site read as the page's main call to action. */ --link: light-dark(#1d4ed8, #93c5fd); --link-hover: light-dark(#1e40af, #bfdbfe); /* Status colours need two variants. The values above are text colours: in dark mode --danger is deliberately light, which is right for text and far too bright for a solid destructive button. These are the fills. */ --success-fill: #047857; --on-success-fill: #ffffff; --warning-fill: light-dark(#a16207, #f59e0b); --on-warning-fill: light-dark(#ffffff, #1a1205); --danger-fill: #b91c1c; --on-danger-fill: #ffffff; --info-fill: #0369a1; --on-info-fill: #ffffff; --selection: light-dark(#dbe3ff, rgb(129 140 248 / 35%)); --inverse: light-dark(#151b2b, #e8ebf0); --on-inverse: light-dark(#f7f8fb, #151b2b); --disabled-bg: light-dark(#e8ebf0, #252d3d); --disabled-text: light-dark(#929baa, #737f92); --focus: light-dark(#2563eb, #93c5fd); --overlay: light-dark(rgb(15 23 42 / 48%), rgb(2 6 23 / 68%)); --radius-xs: 5px; --radius-sm: 7px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px; /* Type scale. Named --type-* rather than --text-* so it cannot be confused with --text, which is the body colour. */ --type-2xs: 0.6875rem; --type-xs: 0.75rem; --type-sm: 0.8125rem; --type-base: 0.875rem; --type-md: 0.9375rem; --type-lg: 1rem; --type-xl: 1.0625rem; --type-2xl: 1.375rem; --type-3xl: 1.5rem; --type-display-sm: clamp(1.75rem, 2.2vw, 2.25rem); --type-display: clamp(2rem, 3vw, 2.375rem); /* Spacing. The kit steps in 2px, not 4px, so the tokens are named after the pixel size they carry and hold the rem value. */ --space-2: 0.125rem; --space-4: 0.25rem; --space-6: 0.375rem; --space-8: 0.5rem; --space-10: 0.625rem; --space-12: 0.75rem; --space-14: 0.875rem; --space-16: 1rem; --space-18: 1.125rem; --space-20: 1.25rem; --space-24: 1.5rem; --space-32: 2rem; --space-48: 3rem; --shadow-sm: 0 1px 2px light-dark(rgb(15 23 42 / 5%), rgb(0 0 0 / 30%)), 0 2px 8px -2px light-dark(rgb(15 23 42 / 5%), rgb(0 0 0 / 26%)); /* Light paints 3 layers, dark 2. The union carries both sets and blanks the layers the other mode does not use, so neither mode changes. */ --shadow-hover: 0 2px 4px light-dark(rgb(15 23 42 / 4%), rgb(0 0 0 / 30%)), 0 10px 24px -8px light-dark(rgb(15 23 42 / 10%), transparent), 0 12px 28px -10px light-dark(transparent, rgb(0 0 0 / 45%)), 0 24px 48px -20px light-dark(rgb(15 23 42 / 8%), transparent); --shadow: 0 4px 10px light-dark(rgb(15 23 42 / 7%), transparent), 0 6px 16px light-dark(transparent, rgb(0 0 0 / 45%)), 0 16px 40px -12px light-dark(rgb(15 23 42 / 14%), transparent), 0 20px 48px -16px light-dark(transparent, rgb(0 0 0 / 55%)), 0 32px 72px -24px light-dark(rgb(15 23 42 / 16%), transparent); /* Dark leads with a 1px accent ring that light does not draw. */ --shadow-accent: 0 0 0 1px light-dark(transparent, color-mix(in srgb, var(--accent) 28%, transparent)), 0 1px 2px light-dark(rgb(15 23 42 / 10%), transparent), 0 2px 14px light-dark(transparent, color-mix(in srgb, var(--accent) 26%, transparent)), 0 6px 16px -6px light-dark(color-mix(in srgb, var(--accent) 35%, transparent), transparent); --card-highlight: inset 0 1px 0 light-dark(rgb(255 255 255 / 75%), rgb(255 255 255 / 6%)); /* The 38% stop is where dark fades out; light's value there (0.76%) sits exactly on its original 0% → 2% ramp, so the light gradient is unchanged while both modes now share one stop list. */ --card-sheen: linear-gradient( 180deg, light-dark(rgb(255 255 255 / 0%), rgb(255 255 255 / 3%)) 0%, light-dark(rgb(15 23 42 / 0.76%), rgb(255 255 255 / 0%)) 38%, light-dark(rgb(15 23 42 / 2%), rgb(255 255 255 / 0%)) 100% ); --overlay-ring: 0 0 0 1px light-dark(rgb(15 23 42 / 4%), rgb(255 255 255 / 7%)); --grid-dot: light-dark(rgb(21 27 43 / 5%), rgb(226 232 240 / 4%)); --canvas-glow-1: light-dark( color-mix(in srgb, var(--accent) 6%, transparent), rgb(129 140 248 / 9%) ); --canvas-glow-2: light-dark(rgb(14 165 233 / 4%), rgb(34 211 238 / 5%)); --hero-glow: light-dark( color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) ); --metric-wash: light-dark( color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 10%, transparent) ); --metric-glow: light-dark( color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent) 35%, transparent) ); --input-bg: light-dark(#ffffff, #0f1524); --input-inset: light-dark(rgb(15 23 42 / 5%), rgb(0 0 0 / 32%)); --skeleton-base: light-dark(#eceff5, #1b2335); --skeleton-hi: light-dark(#f8fafc, #2a3550); --brand-glow: light-dark( color-mix(in srgb, var(--brand) 40%, transparent), color-mix(in srgb, var(--brand) 55%, transparent) ); --topbar-glint: light-dark(rgb(255 255 255 / 65%), rgb(255 255 255 / 6%)); --topbar-tint-top: light-dark( color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--canvas) 88%, transparent) ); --topbar-tint-bottom: light-dark( color-mix(in srgb, var(--surface) 84%, transparent), color-mix(in srgb, var(--canvas) 72%, transparent) ); --topbar-depth: light-dark(rgb(15 23 42 / 30%), rgb(0 0 0 / 60%)); --switch-track-inset: light-dark(rgb(15 23 42 / 12%), rgb(0 0 0 / 35%)); --switch-knob-top: light-dark(#ffffff, #f1f5f9); --switch-knob-bottom: light-dark(#eef1f6, #cbd5e1); --switch-knob-shadow: light-dark(rgb(15 23 42 / 28%), rgb(0 0 0 / 45%)); --switch-knob-ring: light-dark(rgb(15 23 42 / 6%), transparent); --auth-halo: light-dark( color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 9%, transparent) ); --auth-depth: light-dark(rgb(15 23 42 / 22%), rgb(0 0 0 / 55%)); /* The code panel is a deliberate dark accent in both themes, so its tokens are its own and its syntax colours are fixed. */ --code-panel-bg: light-dark(#111827, #0d1322); --code-panel-bg-deep: light-dark(#0d1322, #0a0f1a); --code-panel-border: light-dark(#334155, rgb(148 163 184 / 18%)); --code-panel-text: light-dark(#e5e7eb, #e2e8f0); --code-panel-glow: light-dark(rgb(99 102 241 / 10%), rgb(129 140 248 / 14%)); --code-panel-keyword: #93c5fd; --code-panel-string: #fbbf24; /* Prose code follows the theme instead: a dark block in the middle of a light article is an accent, not a reading surface. Inline code and block code want different backgrounds, so they are separate roles. */ --code-block-bg: light-dark(#f4f6fa, #0f1524); --code-block-border: light-dark(#e0e4eb, rgb(148 163 184 / 18%)); --code-block-text: light-dark(#1f2937, #e2e8f0); --code-inline-bg: light-dark(#eef1f6, rgb(148 163 184 / 18%)); --code-inline-text: light-dark(#9d2463, #f5a0b8); --syntax-keyword: light-dark(#7c3aed, #c4b5fd); --syntax-string: light-dark(#047857, #6ee7b7); --syntax-number: light-dark(#b45309, #fcd34d); --syntax-name: light-dark(#1d4ed8, #93c5fd); --syntax-comment: light-dark(#5f6a7c, #8b96a9); /* Categorical colours. Semantic colours cannot label a set of unrelated categories — two of them end up meaning "danger". Each pair is checked as text on its own background. */ --cat-1-bg: light-dark(#e5f5eb, #1a3025); --cat-1-text: light-dark(#236b45, #91d5aa); --cat-2-bg: light-dark(#ffe8ee, #361d2b); --cat-2-text: light-dark(#ae3154, #f5a0b8); --cat-3-bg: light-dark(#f0eaff, #2b2340); --cat-3-text: light-dark(#7041b5, #c9adf3); --cat-4-bg: light-dark(#e1f3f8, #172f3b); --cat-4-text: light-dark(#196b83, #89cfdf); --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } /* The only theme switches in the file: forcing a color-scheme flips every light-dark() token above. Absent [data-theme], the system decides — so dark works with JavaScript disabled. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } } @layer wsk { *, *::before, *::after { box-sizing: border-box; } html { background: var(--canvas); scroll-behavior: smooth; scroll-padding-top: 7rem; } body { margin: 0; color: var(--text); font: var(--type-lg)/1.7 var(--font-sans); -webkit-font-smoothing: antialiased; } body::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 760px; pointer-events: none; background: radial-gradient(ellipse at 75% 0, var(--canvas-glow-1), transparent 65%), radial-gradient(ellipse at 5% 25%, var(--canvas-glow-2), transparent 55%); } body::after { content: ""; position: absolute; z-index: -1; inset: 72px 0 auto; height: 500px; pointer-events: none; background-image: radial-gradient(var(--grid-dot) .7px, transparent .7px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); } h1, h2, h3, p, ul, ol, pre { margin: 0; } h1, h2, h3 { letter-spacing: 0; line-height: 1.35; text-wrap: balance; } a { color: inherit; text-decoration: none; } button, a { -webkit-tap-highlight-color: transparent; } button { font: inherit; color: inherit; cursor: pointer; } button, a, summary { touch-action: manipulation; } button { border: 0; } a, button, summary { transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; border-radius: var(--radius-xs); } ::selection { background: var(--selection); } .page-width { width: min(1160px, calc(100% - 96px)); margin-inline: auto; } .icon-library { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } .icon.small { width: 16px; height: 16px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } :root:not([data-js]) [data-js-only], :root[data-js] [data-no-js] { display: none !important; } .wsk-skip-link { position: fixed; z-index: 50; left: 16px; top: -100px; padding: 12px 20px; color: var(--on-accent); background: var(--accent); border-radius: var(--radius); } .wsk-skip-link:focus { top: 12px; } /* The compact masthead and asymmetric card rhythm follow wheel.do. */ .site-header { position: sticky; z-index: 20; top: 0; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--canvas) 87%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .header-inner { min-height: 80px; display: flex; align-items: center; gap: 36px; } .brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; } .brand-mark { position: relative; display: grid; place-items: center; width: 40px; height: 40px; background: var(--brand); color: var(--on-brand); font-size: 20px; font-weight: 750; letter-spacing: -.8px; border-radius: 11px; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 23%, transparent), inset 0 1px 0 #ffffff38; } .brand-mark > span { position: absolute; font-size: 11px; right: 4px; top: 0; } .brand-copy { display: flex; flex-direction: column; line-height: 1.45; } .brand-copy strong { font-size: 18px; font-weight: 750; letter-spacing: -.35px; } .brand-copy > span { color: var(--muted-soft); font-size: 12px; letter-spacing: .2px; } .site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; } .site-nav a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: 14px; font-weight: 550; color: var(--muted); } .site-nav a:hover { color: var(--accent); } .header-actions { display: flex; align-items: center; gap: 8px; } .icon-button { display: grid; place-items: center; width: 40px; height: 40px; background: transparent; border-radius: var(--radius); color: var(--muted); } .icon-button:hover { color: var(--accent); background: var(--accent-soft); } .mobile-toggle { display: none; } .hero { padding-top: 48px; padding-bottom: 36px; } .eyebrow { color: var(--accent); font-size: 12px; font-weight: 750; line-height: 1.5; letter-spacing: 1.6px; } .eyebrow-slash { color: var(--muted-soft); padding-inline: 10px; font-weight: 400; } .hero h1 { font-size: clamp(2.5rem, 4.6vw, 3.625rem); font-weight: 800; line-height: 1.28; margin-top: 22px; } .hero h1 > span:last-child { color: var(--accent); } .hero-description { font-size: 17px; line-height: 1.9; color: var(--muted); max-width: 710px; margin-top: 24px; text-wrap: pretty; } .hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 28px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 20px; min-height: 48px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 14px; font-weight: 650; line-height: 1.5; } .button-primary { color: var(--on-accent); background: var(--accent); box-shadow: var(--shadow-accent); } .button-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--muted); font-weight: 600; } .text-link:hover { color: var(--accent); } .hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; } .tags { display: flex; align-items: center; flex-wrap: wrap; list-style: none; gap: 7px; padding: 0; } .tags li { padding: 3px 11px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-soft) 65%, transparent); color: var(--muted); font-size: 12px; line-height: 1.7; font-weight: 600; } .hero-note { display: flex; align-items: center; gap: 9px; color: var(--muted-soft); font-size: 13px; } .tiny-pixels { display: grid; grid-template-columns: repeat(2, 4px); gap: 2px; transform: rotate(-10deg); } .tiny-pixels i { width: 4px; height: 4px; background: var(--accent); border-radius: 1px; } .tiny-pixels i:last-child { opacity: .4; } .section-anchor { scroll-margin-top: 24px; } .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; } .section-heading h2 { font-size: 30px; font-weight: 750; } .section-heading .eyebrow { margin-bottom: 12px; font-size: 11px; } .section-heading p:not(.eyebrow) { color: var(--muted); margin-top: 10px; font-size: 15px; } .section-heading.compact { margin-bottom: 18px; align-items: center; } .section-heading.compact h2 { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 9px; } .section-heading.compact h2::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); } .section-caption { font-size: 12px; color: var(--muted-soft); } .feature-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .feature-card { --card-color: var(--accent); --card-bg: var(--accent-soft); position: relative; min-width: 0; overflow: hidden; padding: 27px; border: 1px solid color-mix(in srgb, var(--card-color) 17%, var(--border)); border-radius: var(--radius-lg); background: radial-gradient(ellipse at 105% 0, color-mix(in srgb, var(--card-color) 11%, transparent), transparent 55%), linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 65%, var(--surface)), var(--card-bg)); box-shadow: var(--card-highlight); } .tone-indigo { --card-color: var(--accent); --card-bg: light-dark(#eeefff, #191e3b); } .tone-cyan { --card-color: var(--cat-4-text); --card-bg: light-dark(#e7f8fb, #142a35); } .tone-slate { --card-color: var(--muted); --card-bg: light-dark(#eff2f7, #192233); } .tone-green { --card-color: var(--cat-1-text); --card-bg: light-dark(#ebf7ef, #152c23); } .tone-rose { --card-color: var(--cat-2-text); --card-bg: light-dark(#fff0f3, #30202c); } .tone-violet { --card-color: var(--cat-3-text); --card-bg: light-dark(#f3edff, #26203a); } .tone-amber { --card-color: var(--warning); --card-bg: light-dark(#fff8e3, #302919); } .card-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--card-color); font-size: 12px; font-weight: 750; letter-spacing: .7px; } .icon-tile { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--card-color) 13%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--card-color) 8%, transparent); box-shadow: inset 0 1px 1px #ffffff15; } .icon-tile .icon { width: 18px; height: 18px; } .card-index { margin-left: auto; color: var(--card-color); font-family: var(--font-mono); opacity: .65; font-size: 11px; letter-spacing: 0; } .feature-card h3 { margin-top: 18px; font-size: 29px; font-weight: 750; line-height: 1.4; } .feature-card p { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.85; } .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--card-color); font-size: 12px; font-weight: 600; margin-top: 22px; } .editor-card { grid-column: span 4; } .editor-card h3 br { display: none; } .sync-card { grid-column: span 2; display: flex; flex-direction: column; } .key-group { display: flex; gap: 5px; } kbd { display: inline-flex; justify-content: center; min-width: 24px; padding: 0 5px; height: 21px; border: 1px solid color-mix(in srgb, var(--card-color) 20%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--surface) 42%, transparent); font: 11px/19px var(--font-mono); } .editor-preview { margin-top: 25px; overflow: hidden; border: 1px solid light-dark(#cbd1e6, #3c456a); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--card-color) 45%, transparent); } .editor-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--muted-soft); font-family: var(--font-mono); font-size: 10px; line-height: 1.5; } .window-dots { display: flex; gap: 4px; } .window-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); opacity: .65; } .preview-label { font-family: var(--font-sans); font-size: 10px; } .editor-body { display: grid; grid-template-columns: 34px 1fr 140px; height: 191px; } .editor-tools { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 8px; background: var(--surface); border-right: 1px solid var(--border); color: var(--muted); font-size: 18px; line-height: 1.4; } .editor-tools > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 4px; } .editor-tools .tool-selected { color: var(--accent); background: var(--accent-soft); } .type-tool { font-family: Georgia, serif; font-size: 19px; } .editor-canvas { position: relative; display: grid; place-items: center; overflow: hidden; background-color: light-dark(#e4e7f1, #111729); background-image: radial-gradient(light-dark(#b7bfd0, #384157) .65px, transparent .65px); background-size: 10px 10px; } .canvas-coordinates { position: absolute; left: 10px; top: 7px; color: var(--muted-soft); font: 8px var(--font-mono); } .canvas-coordinates span { margin-left: 7px; } .canvas-zoom { position: absolute; right: 7px; bottom: 6px; font: 8px var(--font-mono); color: var(--muted); background: var(--surface); border-radius: 3px; padding: 2px 4px; } .game-panel { width: min(80%, 252px); height: 143px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% -70%, #777ce1, #262d59 70%); border: 1px solid #818cf873; color: #fff; border-radius: 5px; box-shadow: 0 5px 15px #0f172a22; } .game-overline { font-size: 6px; font-weight: 600; letter-spacing: 2.2px; color: #b9c6f7; } .game-title { font-size: 25px; line-height: 1.4; font-weight: 750; letter-spacing: 5px; margin-left: 5px; margin-top: 4px; } .game-subtitle { font-size: 7px; color: #c4cbee; margin-top: 5px; letter-spacing: .8px; } .game-button { position: relative; display: grid; place-items: center; width: 113px; height: 26px; margin-top: 14px; font-size: 9px; font-weight: 700; letter-spacing: 1px; border: 1px solid #bdc6ff; background: #737ade; border-radius: 3px; } .selection-box::after { content: ""; position: absolute; inset: -4px; border: 1px solid #95a7ff; } .selection-box > i { position: absolute; z-index: 1; width: 4px; height: 4px; border: 1px solid #95a7ff; background: #fff; } .selection-box > i:nth-child(1) { left: -5px; top: -5px; }.selection-box > i:nth-child(2) { right: -5px; top: -5px; }.selection-box > i:nth-child(3) { left: -5px; bottom: -5px; }.selection-box > i:nth-child(4) { right: -5px; bottom: -5px; } .editor-layers { background: var(--surface); border-left: 1px solid var(--border); font-size: 9px; color: var(--muted); } .editor-layers > div { display: flex; align-items: center; gap: 7px; padding: 6px 9px; line-height: 1.5; } .editor-layers .icon { width: 11px; height: 11px; } .editor-layers .layers-heading { color: var(--text); font-weight: 600; padding-block: 8px; border-bottom: 1px solid var(--border); } .layers-heading > span:last-child { margin-left: auto; } .layer-symbol { color: var(--muted-soft); width: 12px; } .editor-layers .layer-selected { color: var(--accent); background: var(--accent-soft); } .editor-layers .layer-properties { display: flex; justify-content: space-between; font-size: 8px; padding-block: 4px; } .editor-layers .layer-properties:first-of-type { margin-top: 8px; } .sync-visual { display: flex; align-items: center; justify-content: center; margin-top: auto; padding-top: 32px; gap: 12px; } .format-node { display: flex; flex-direction: column; align-items: center; padding: 16px 11px 12px; min-width: 89px; border: 1px solid color-mix(in srgb, var(--card-color) 19%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--surface) 65%, transparent); box-shadow: 0 4px 12px color-mix(in srgb, var(--card-color) 4%, transparent); } .format-node > .icon { width: 24px; height: 24px; color: var(--card-color); margin-bottom: 6px; } .format-node strong { font-family: var(--font-mono); font-size: 17px; letter-spacing: -.5px; } .format-node > span { color: var(--muted); font-size: 10px; margin-top: 3px; white-space: nowrap; } .sync-bridge { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--card-color); } .sync-bridge > .icon { width: 27px; height: 27px; } .sync-bridge > span { font: 10px var(--font-mono); } .sync-baseline { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--card-color); font-size: 11px; margin-top: 20px; } .sync-card .card-footer { border-top: 1px solid color-mix(in srgb, var(--card-color) 14%, transparent); padding-top: 19px; margin-top: 29px; } .diff-card { grid-column: span 4; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; } .diff-card h3 { font-size: 23px; margin-top: 16px; } .diff-card .tags { margin-top: 20px; } .diff-card .tags li { font-size: 11px; padding: 2px 8px; background: color-mix(in srgb, var(--surface) 35%, transparent); } .diff-preview { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); } .diff-title { display: flex; align-items: center; gap: 6px; font: 11px var(--font-mono); color: var(--muted); padding: 12px; border-bottom: 1px solid var(--border); } .diff-count { color: var(--success); margin-left: auto; font-size: 10px; white-space: nowrap; }.diff-count > span { color: var(--danger); } .diff-preview pre { padding: 11px 0; overflow-x: auto; font: 11px/1.9 var(--font-mono); } .diff-preview code > span { display: inline-block; min-width: 100%; padding-inline: 10px; } .code-context { color: var(--muted); } .code-removed { color: var(--danger); background: var(--danger-soft); } .code-added { color: var(--success); background: var(--success-soft); } .delivery-card { grid-column: span 2; }.delivery-card h3 { font-size: 23px; margin-top: 16px; } .mini-pipeline { display: flex; align-items: center; justify-content: space-between; gap: 7px; list-style: none; padding: 0; margin-top: 22px; color: var(--card-color); } .mini-pipeline li { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; } .mini-pipeline li + li::before { content: ""; width: 14px; height: 1px; margin-right: 4px; background: color-mix(in srgb, var(--card-color) 28%, transparent); } .delivery-card .card-footer { font-size: 11px; margin-top: 21px; } .detail-card { grid-column: span 2; display: flex; flex-direction: column; min-height: 235px; } .detail-card h3 { font-size: 20px; margin-top: 18px; } .detail-card p { font-size: 14px; margin-bottom: 24px; } .card-footnote { display: block; font-size: 11px; color: var(--card-color); font-weight: 600; margin-top: auto; } .workflow { padding-top: 88px; } .flow-switch { display: flex; padding: 4px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); } .flow-switch button { min-height: 36px; padding: 6px 14px; border: 1px solid transparent; border-radius: 5px; background: transparent; font-size: 12px; color: var(--muted); } .flow-switch [aria-pressed="true"] { color: var(--accent); background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 650; border-color: var(--border); } .workflow-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 27px 28px; list-style: none; gap: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--card-highlight); } .step-number { display: flex; align-items: center; gap: 12px; color: var(--muted-soft); font: 11px var(--font-mono); } .step-number > span { height: 1px; flex: 1; background: var(--border); } .step-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; color: var(--accent); background: var(--accent-soft); border-radius: 9px; margin-top: 23px; } .step-icon .icon { width: 20px; height: 20px; } .workflow-steps h3 { font-size: 16px; margin-top: 15px; font-weight: 650; } .workflow-steps p { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.85; } .workflow-note { display: flex; align-items: flex-start; gap: 8px; margin: 15px 4px 0; color: var(--muted-soft); font-size: 12px; } .workflow-note > .icon { margin-top: 3px; }.workflow-note strong { font-weight: 600; color: var(--muted); } .architecture { padding-top: 86px; } .architecture-label { font: 12px var(--font-mono); color: var(--muted-soft); padding-bottom: 4px; } .architecture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; } .source-panel { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--card-highlight); } .source-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 22px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; background: var(--surface-soft); } .source-heading > span:first-child { display: inline-flex; align-items: center; gap: 8px; }.mono { font: 11px var(--font-mono); color: var(--muted-soft); } .file-tree { padding: 21px 24px 18px; font: 13px/2.05 var(--font-mono); color: var(--muted-soft); } .file-tree > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .file-tree .file-root { color: var(--accent); font-weight: 650; margin-bottom: 10px; }.file-tree b { color: var(--text); font-weight: 500; }.file-tree em { font-family: var(--font-sans); font-style: normal; font-size: 12px; color: var(--muted-soft); }.file-child { padding-left: 24px; } .source-note { padding: 15px 24px 19px; border-top: 1px dashed var(--border); color: var(--muted-soft); font-size: 12px; line-height: 1.9; } .principles { padding-block: 5px; display: flex; flex-direction: column; justify-content: space-between; } .principles article { display: flex; align-items: flex-start; gap: 17px; padding: 16px 0; }.principles article + article { border-top: 1px solid var(--border); } .principles article > span { color: var(--accent); font: 12px var(--font-mono); padding-top: 4px; } .principles h3 { font-size: 17px; font-weight: 650; }.principles p { color: var(--muted); font-size: 14px; margin-top: 9px; line-height: 1.9; } .technical-details { margin-top: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 50%, transparent); overflow: hidden; } .technical-details summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; } .technical-details summary::-webkit-details-marker { display: none; }.technical-details summary > span:first-child { display: inline-flex; align-items: center; gap: 11px; }.technical-details summary .icon { width: 17px; height: 17px; color: var(--muted); } .technical-details summary:hover { background: var(--surface-soft); }.technical-details summary:focus-visible { outline-offset: -4px; } .details-indicator { color: var(--muted); font-size: 18px; font-weight: 400; line-height: 1; transition: transform 180ms; }.technical-details[open] .details-indicator { transform: rotate(45deg); } .details-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; border-top: 1px solid var(--border); padding: 24px; }.details-content h3 { font-size: 15px; }.details-content p { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.9; } .closing { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 78px; padding: 38px 0 42px; border-top: 1px solid var(--border); } .closing .eyebrow { font-size: 10px; letter-spacing: 1.3px; }.closing h2 { font-size: 27px; font-weight: 750; margin-top: 13px; }.closing p:not(.eyebrow) { color: var(--muted); font-size: 14px; margin-top: 10px; } .button-secondary { background: var(--surface); border-color: var(--border); font-size: 13px; flex-shrink: 0; }.button-secondary:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-sm); } .site-footer { padding-top: 22px; padding-bottom: max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; color: var(--muted-soft); } .site-footer p { display: flex; align-items: center; gap: 16px; }.site-footer strong { font-size: 13px; color: var(--muted); letter-spacing: -.3px; }.site-footer a { display: inline-flex; align-items: center; gap: 6px; }.site-footer a:hover { color: var(--accent); }.site-footer a .icon { width: 12px; height: 12px; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .feature-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--card-color) 35%, var(--border)); box-shadow: var(--shadow-hover); }.feature-card { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } } @media (max-width: 1050px) { .page-width { width: calc(100% - 64px); }.feature-card { padding: 23px; }.feature-card h3 { font-size: 26px; }.detail-card h3 { font-size: 18px; }.diff-card { grid-template-columns: 1fr; gap: 20px; }.diff-card .tags { display: none; }.diff-card p br { display: none; }.diff-card .card-index { display: none; }.diff-preview pre { font-size: 12px; }.delivery-card { display: flex; flex-direction: column; }.delivery-card h3 { font-size: 24px; }.delivery-card .mini-pipeline { flex-direction: column; align-items: flex-start; gap: 15px; margin-top: auto; padding-top: 24px; }.mini-pipeline li + li::before { display: none; }.delivery-card .card-footer { margin-top: 24px; }.editor-body { grid-template-columns: 30px 1fr 105px; }.editor-layers > div { padding-inline: 6px; gap: 5px; }.format-node { min-width: 72px; padding-inline: 7px; }.sync-visual { gap: 8px; }.sync-card .card-footer { font-size: 11px; }.sync-baseline { font-size: 10px; }.sync-bridge > .icon { width: 21px; height: 21px; }.workflow-steps { gap: 20px; padding: 24px; }.workflow-steps p { font-size: 12px; }.architecture-grid { gap: 30px; }.file-tree { padding-inline: 18px; font-size: 12px; }.file-tree em { font-size: 11px; }.closing h2 { font-size: 24px; } } @media (max-width: 760px) { html { scroll-padding-top: 6rem; }.page-width { width: calc(100% - 40px); }.header-inner { min-height: 72px; gap: 16px; }.site-nav { gap: 18px; }.site-nav a { font-size: 12px; }.brand-copy strong { font-size: 17px; }.brand-copy > span { font-size: 10px; }.brand-mark { width: 36px; height: 36px; font-size: 18px; }.hero { padding-top: 46px; padding-bottom: 40px; }.hero h1 { font-size: clamp(1.8rem, 5.5vw, 2.65rem); line-height: 1.45; }.hero-description { font-size: 15px; max-width: 560px; }.hero-note { display: none; }.hero-bottom { margin-top: 28px; }.hero .eyebrow { font-size: 10px; letter-spacing: 1.2px; }.eyebrow-slash { padding-inline: 7px; }.section-heading.compact h2 { font-size: 14px; }.section-caption { font-size: 11px; }.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.editor-card { grid-column: span 2; }.sync-card { grid-column: span 1; }.diff-card { grid-column: span 1; }.editor-card h3 { font-size: 27px; }.editor-preview { max-width: 610px; }.editor-body { grid-template-columns: 34px 1fr 150px; height: 210px; }.game-panel { height: 158px; width: 78%; }.editor-card p br { display: none; }.sync-card h3 { font-size: 24px; }.sync-card p { font-size: 14px; }.sync-visual { padding-top: 22px; }.sync-baseline { margin-top: 18px; }.sync-card .card-footer { margin-top: 22px; }.diff-card h3 { font-size: 24px; }.delivery-card { grid-column: span 1; }.delivery-card h3 { font-size: 21px; }.detail-card { grid-column: span 1; min-height: 235px; }.detail-card h3 { font-size: 20px; }.detail-card:last-child { grid-column: span 2; min-height: auto; }.detail-card:last-child p { margin-bottom: 15px; }.workflow { padding-top: 60px; }.section-heading h2 { font-size: 26px; }.section-heading p:not(.eyebrow) { font-size: 14px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 24px; }.section-heading.compact { flex-direction: row; align-items: center; }.workflow-steps { grid-template-columns: 1fr; gap: 0; padding: 6px 24px; }.workflow-steps > li { position: relative; display: grid; grid-template-columns: 25px 36px 1fr; gap: 4px 13px; align-items: center; padding: 22px 0; }.workflow-steps > li + li { border-top: 1px solid var(--border); }.step-number { grid-row: 1 / 3; align-self: start; padding-top: 7px; }.step-number > span { display: none; }.step-icon { margin: 0; grid-row: 1 / 3; align-self: start; }.workflow-steps h3 { margin: 0; font-size: 16px; }.workflow-steps p { margin: 0; grid-column: 3; font-size: 13px; }.workflow-note { font-size: 12px; }.architecture { padding-top: 60px; }.architecture-label { display: none; }.architecture-grid { grid-template-columns: 1fr; gap: 20px; }.file-tree { font-size: 13px; padding: 22px; }.file-tree em { font-size: 12px; }.principles { gap: 0; }.principles article { padding-block: 20px; }.details-content { grid-template-columns: 1fr; gap: 22px; }.closing { margin-top: 52px; align-items: flex-start; flex-direction: column; padding-block: 32px; }.closing h2 { font-size: 24px; }.site-footer { align-items: flex-start; flex-direction: column; gap: 14px; }.site-footer p { flex-wrap: wrap; gap: 6px 14px; } } @media (max-width: 540px) { .page-width { width: calc(100% - 36px); }.header-inner { min-height: 68px; position: relative; }.header-actions { margin-left: auto; gap: 2px; }.mobile-toggle { display: grid; }.brand-copy > span { font-size: 10px; }.site-nav { margin: 0; position: absolute; top: 100%; left: -18px; right: -18px; padding: 12px 18px; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }.site-nav a { min-height: 44px; font-size: 14px; padding-inline: 10px; border-radius: 5px; }:root[data-js] .site-header:not(.nav-open) .site-nav { display: none; }:root:not([data-js]) .header-inner { flex-wrap: wrap; gap: 0; padding-top: 12px; }:root:not([data-js]) .header-actions { display: none; }:root:not([data-js]) .site-nav { position: static; flex-direction: row; width: 100%; padding: 5px 0; border: 0; box-shadow: none; background: transparent; }:root:not([data-js]) .site-nav a { padding-inline: 8px; font-size: 12px; }.hero { padding-top: 38px; }.hero h1 { font-size: clamp(1.7rem, 6.6vw, 2.2rem); font-weight: 800; line-height: 1.5; margin-top: 17px; white-space: normal; }.hero-description { font-size: 14px; margin-top: 18px; }.hero-actions { gap: 17px; margin-top: 23px; }.button { padding: 11px 14px; gap: 9px; font-size: 13px; }.text-link { font-size: 12px; gap: 4px; }.tags { gap: 6px; }.tags li { font-size: 10px; padding: 3px 9px; }.section-caption { display: none; }.feature-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }.feature-card, .editor-card, .sync-card, .diff-card, .delivery-card, .detail-card, .detail-card:last-child { grid-column: 1; padding: 23px; }.feature-card h3, .detail-card h3, .diff-card h3 { font-size: 24px; margin-top: 16px; }.feature-card p { font-size: 14px; }.sync-card h3 br { display: none; }.editor-card h3 { font-size: 23px; }.editor-preview { margin-top: 20px; margin-inline: -8px; }.editor-top { gap: 7px; font-size: 9px; padding: 8px; }.preview-label { font-size: 8px; }.editor-body { grid-template-columns: 28px 1fr 83px; height: 171px; }.editor-tools { gap: 1px; }.editor-layers { font-size: 7px; }.editor-layers > div { gap: 4px; padding: 6px 5px; }.editor-layers .icon { width: 9px; height: 9px; }.layer-symbol { width: 8px; }.editor-layers .layer-properties { font-size: 6px; }.game-panel { height: 124px; width: 83%; }.game-title { font-size: 19px; letter-spacing: 3px; }.game-overline { font-size: 4px; letter-spacing: 1.4px; }.game-subtitle { font-size: 5px; letter-spacing: .3px; }.game-button { width: 83px; height: 22px; font-size: 7px; margin-top: 12px; }.canvas-coordinates { font-size: 6px; left: 6px; }.card-footer { font-size: 11px; gap: 6px; }.key-group { gap: 3px; }kbd { min-width: 20px; font-size: 9px; padding-inline: 4px; }.sync-visual { gap: clamp(10px, 4vw, 24px); padding-top: 27px; }.format-node { min-width: clamp(76px, 23vw, 98px); padding: 18px 12px 14px; }.format-node > span { font-size: 11px; }.sync-baseline { font-size: 11px; }.sync-card .card-footer { font-size: 12px; }.diff-card { gap: 20px; }.diff-preview pre { font-size: 12px; }.diff-card .tags { display: flex; }.delivery-card .mini-pipeline { flex-direction: row; padding-top: 0; margin-top: 24px; }.mini-pipeline li + li::before { display: block; }.delivery-card .card-footer { font-size: 12px; }.detail-card { min-height: 220px; }.detail-card p { margin-bottom: 20px; }.card-footnote { font-size: 12px; }.section-heading h2 { font-size: 25px; }.section-heading p:not(.eyebrow) { font-size: 14px; }.workflow-steps { padding-inline: 18px; }.workflow-steps > li { grid-template-columns: 20px 32px 1fr; gap: 6px 12px; }.step-icon { width: 32px; height: 32px; }.step-icon .icon { width: 18px; height: 18px; }.workflow-note { font-size: 11px; }.source-heading { padding: 16px 18px; }.file-tree { padding: 20px 16px; font-size: 12px; }.file-tree em { font-size: 10px; }.source-note { font-size: 11px; padding-inline: 18px; }.technical-details summary { padding: 16px; }.details-content { padding: 20px; }.closing h2 { font-size: 22px; }.site-footer { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } @media (forced-colors: active) { body::before, body::after { display: none; }.feature-card, .game-panel, .site-header { background: Canvas; }.brand-mark, .game-panel, .game-button { color: CanvasText; border: 1px solid CanvasText; }.game-overline, .game-subtitle { color: CanvasText; }.flow-switch [aria-pressed="true"] { border: 2px solid Highlight; }.button-primary { border: 1px solid ButtonText; }.icon-tile, .step-icon { border: 1px solid CanvasText; }.technical-details summary:focus-visible { outline: 2px solid Highlight; }.code-added, .code-removed { border-left: 2px solid CanvasText; } } } @layer wsk { /* Let content determine card height and keep narrow layouts readable. */ .header-inner { gap: 24px; } .site-nav { gap: 22px; } .site-nav a { white-space: nowrap; } .header-actions { flex-shrink: 0; } .card-footer { flex-wrap: wrap; } .sync-baseline { text-align: center; } .format-node { min-width: 0; flex: 1; max-width: 110px; } .format-node > span { white-space: normal; text-align: center; } .sync-bridge { flex-shrink: 0; } .feature-card, .section-heading, .closing, .principles { overflow-wrap: break-word; } .hero h1, .feature-card h3, .section-heading h2, .closing h2 { hyphens: auto; } .file-tree > div > span { flex-shrink: 0; } .file-tree em { text-align: right; } .layers-heading > span:first-child { margin-left: 0; } @media (min-width: 541px) and (max-width: 900px) { .header-inner { flex-wrap: wrap; gap: 0; padding-block: 12px 4px; } .header-actions { margin-left: auto; order: 1; } .site-nav { order: 2; width: 100%; justify-content: flex-end; gap: 24px; } .site-nav a { font-size: 13px; } html { scroll-padding-top: 9rem; } } @media (max-width: 540px) { .header-inner { gap: 8px; } .header-actions { gap: 0; } .icon-button { width: 36px; } .site-nav { gap: 0; } .hero-actions { flex-wrap: wrap; gap: 8px 18px; } .hero .eyebrow { font-size: 9px; letter-spacing: .8px; } .hero h1 { overflow-wrap: normal; } .format-node { min-width: 0; } .game-button { letter-spacing: 0; } .game-title { text-align: center; } .game-subtitle { text-align: center; } .mini-pipeline { flex-wrap: wrap; } .mini-pipeline li { font-size: 11px; } .file-tree > div { align-items: flex-start; } .file-tree em { max-width: 48%; } :root:not([data-js]) .site-nav { flex-wrap: wrap; } } @media (max-width: 360px) { .brand-copy > span { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } }