@layer reset, base, components, pages, responsive, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
  button, input, textarea { font: inherit; }
  button { color: inherit; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  button, a { -webkit-tap-highlight-color: transparent; }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  button { border: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    color-scheme: dark;
    --bg: #17191f;
    --surface: #20232b;
    --surface-raised: #272b35;
    --text: #edf1f5;
    --muted: #a6adb9;
    --quiet: #868f9e;
    --line: #ffffff13;
    --line-strong: #ffffff26;
    --yellow: #ffe713;
    --cyan: #59cac6;
    --pink: #f577ce;
    --accent: var(--cyan);
    --header-height: 88px;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;
    font-synthesis: none;
    font-feature-settings: "palt";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  body { background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.8; overflow-wrap: break-word; }
  ::selection { color: var(--bg); background: var(--cyan); }
  :focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; border-radius: 3px; }
  h1, h2, h3 { font-weight: 650; overflow-wrap: anywhere; }
  h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.6; letter-spacing: .015em; }
  h2 { font-size: clamp(24px, 2.45vw, 34px); line-height: 1.6; letter-spacing: .025em; }
  h3 { font-size: 18px; line-height: 1.6; }
  p { color: var(--muted); }
  strong { color: var(--text); font-weight: 600; }
  button { background: transparent; }
  .container { width: min(1240px, calc(100% - 112px)); margin-inline: auto; }
  .section { padding-block: 110px; }
  .icon { flex-shrink: 0; width: 20px; height: 20px; }
  .mono { font-family: Consolas, "SFMono-Regular", monospace; font-size: 10px; letter-spacing: .09em; }
  .eyebrow { color: var(--quiet); font-size: 10px; font-weight: 600; letter-spacing: .17em; line-height: 1.6; margin-bottom: 18px; }
  .tone-yellow { --accent: var(--yellow); }
  .tone-cyan { --accent: var(--cyan); }
  .tone-pink { --accent: var(--pink); }
  .muted { color: var(--muted); }
  .lead { font-size: 16px; line-height: 2; max-width: 650px; }
  .note { color: var(--quiet); font-size: 12px; line-height: 1.9; margin-top: 22px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .mobile-break { display: none; }
}

@layer components {
  .skip-link { position: fixed; top: 10px; left: 16px; z-index: 100; transform: translateY(-150%); padding: 10px 18px; background: var(--cyan); color: #101b20; border-radius: 6px; }
  .skip-link:focus { transform: translateY(0); }
  .site-header { height: var(--header-height); position: sticky; top: 0; z-index: 20; background: #17191fe8; border-bottom: 1px solid transparent; backdrop-filter: blur(18px); transition: border-color .25s, box-shadow .25s; }
  .site-header.is-scrolled { border-color: var(--line); box-shadow: 0 8px 40px #0a0d1214; }
  .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .brand > img { width: 28px; height: 35px; object-fit: contain; }
  .brand > span { font-size: 25px; font-weight: 660; letter-spacing: -.045em; line-height: 1.08; }
  .brand-lab { font-weight: 400; }
  .brand small { display: block; color: var(--quiet); font-size: 9px; font-weight: 400; letter-spacing: .18em; margin-top: 7px; }
  .site-nav { display: flex; align-items: center; gap: 30px; }
  .site-nav > a { font-size: 12px; color: var(--muted); padding-block: 12px; position: relative; transition: color .2s; white-space: nowrap; }
  .site-nav > a::after { content: ""; position: absolute; height: 2px; bottom: 5px; left: 0; right: 0; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .site-nav > a:hover, .site-nav > a[aria-current] { color: var(--text); }
  .site-nav > a:hover::after, .site-nav > a[aria-current]::after { transform: scaleX(1); }
  .site-nav .nav-booth { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); border-radius: 5px; padding: 8px 16px; color: var(--text); font-size: 11px; letter-spacing: .03em; }
  .nav-booth .icon { width: 13px; height: 13px; }
  .site-nav .nav-booth::after { display: none; }
  .nav-booth:hover { background: var(--surface); }
  .menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border: 1px solid var(--line-strong); border-radius: 6px; }
  .menu-toggle span { width: 17px; height: 1px; background: var(--text); transition: transform .25s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .reading-progress { width: 100%; height: 1px; position: absolute; left: 0; bottom: -1px; background: var(--cyan); opacity: .6; transform: scaleX(0); transform-origin: left; }
  .button { display: inline-flex; align-items: center; justify-content: center; gap: 23px; min-height: 50px; padding: 13px 23px; border-radius: 5px; font-size: 13px; font-weight: 650; line-height: 1.5; transition: background .25s, transform .25s, box-shadow .25s; }
  .button.primary { background: var(--cyan); color: #112627; box-shadow: inset 0 1px 0 #ffffff26; }
  .button.primary:hover { background: #77dbd5; transform: translateY(-2px); box-shadow: 0 8px 24px #0002; }
  .button .icon { width: 17px; height: 17px; }
  .text-link { display: inline-flex; align-items: center; gap: 13px; padding-block: 10px; color: var(--text); font-size: 12px; font-weight: 500; line-height: 1.5; }
  .text-link .icon { width: 17px; height: 17px; transition: transform .25s; }
  .text-link:hover { color: var(--cyan); }
  .text-link:hover .icon { transform: translateX(4px); }
  .signal-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px #59cac622; flex-shrink: 0; }
  .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
  .section-heading .eyebrow { margin-bottom: 12px; }
  .section-heading > p { font-size: 12px; line-height: 1.9; max-width: 340px; padding-bottom: 5px; }
  .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
  .product-card { min-width: 0; position: relative; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(140deg, #272b34, #20232b); border-radius: 12px; padding: 28px 27px 0; transition: transform .35s, border-color .35s, box-shadow .35s; }
  .product-card::before { content: ""; width: 52px; height: 2px; background: var(--accent); position: absolute; top: 0; left: 28px; transition: width .4s; }
  .product-card:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 18px 40px #0002; }
  .product-card:hover::before { width: 110px; }
  .card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; gap: 10px; }
  .product-role { color: var(--accent); font-size: 10px; display: flex; align-items: center; gap: 8px; }
  .product-role .icon { width: 16px; height: 16px; }
  .card-number { color: #ffffff40; }
  .product-card h3 { font-size: 27px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 13px; }
  .product-card > p { font-size: 12px; line-height: 1.9; min-height: 70px; }
  .card-screen { height: 154px; margin: 24px -1px 0; border-radius: 5px 5px 0 0; overflow: hidden; border: 1px solid #ffffff16; border-bottom: 0; position: relative; }
  .card-screen::after { content: ""; position: absolute; inset: 60% 0 0; background: linear-gradient(transparent,#22252de6); pointer-events: none; }
  .card-screen img { width: 100%; height: auto; transition: transform .6s; transform-origin: top; }
  .product-card:hover .card-screen img { transform: scale(1.04); }
  .card-bottom { display: flex; align-items: center; justify-content: space-between; padding-block: 21px; border-top: 1px solid var(--line); gap: 12px; }
  .card-bottom > span { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; }
  .card-bottom .icon { width: 16px; height: 16px; color: var(--accent); transition: transform .25s; }
  .product-card:hover .card-bottom .icon { transform: translateX(5px); }
  .card-bottom small { color: var(--quiet); font-size: 10px; }
  .window-bar { display: flex; align-items: center; gap: 9px; height: 36px; padding-inline: 14px; background: #252933; border-bottom: 1px solid #ffffff0b; }
  .window-bar > span { font-size: 11px; }
  .window-bar .product-mark { width: 11px; height: 15px; object-fit: contain; }
  .window-bar .drawn .icon { width: 13px; height: 13px; }
  .window-bar .window-dot { margin-left: auto; }
  .window-dot { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
  .window-tools { font-size: 10px !important; letter-spacing: .2em; color: var(--quiet); margin-left: 6px; }
  .screen-expand { width: 100%; display: block; padding: 0; position: relative; cursor: zoom-in; overflow: hidden; }
  .screen-expand > img { width: 100%; }
  .expand-label { position: absolute; bottom: 12px; right: 12px; display: flex; align-items: center; gap: 7px; font-size: 10px; padding: 6px 10px; border: 1px solid #ffffff33; border-radius: 4px; background: #16191fe8; backdrop-filter: blur(8px); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
  .expand-label .icon { width: 13px; height: 13px; }
  .screen-expand:hover .expand-label, .screen-expand:focus-visible .expand-label { opacity: 1; transform: translateY(0); }
  .screen-expand:focus-visible { outline-offset: -3px; }
  .product-mark { object-fit: contain; }
  .drawn { color: var(--accent); }
  .image-dialog { width: min(1400px, calc(100% - 64px)); max-height: calc(100dvh - 64px); padding: 0; background: #1c2028; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); overflow: auto; box-shadow: 0 20px 100px #0008; }
  .image-dialog::backdrop { background: #090b10dc; backdrop-filter: blur(12px); }
  .image-dialog[open] { animation: dialog-in .24s ease both; }
  .image-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 12px 8px 22px; border-bottom: 1px solid var(--line); font-size: 13px; position: sticky; top: 0; background: #1c2028f5; z-index: 2; }
  .icon-button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 5px; }
  .icon-button:hover { background: #ffffff0a; }
  .developer-credit { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .developer-social { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 5px; background: #ffffff04; color: var(--muted); transition: color .2s, background .2s, border-color .2s; }
  .developer-social svg { flex: none; width: 12px; height: 12px; max-width: 12px; max-height: 12px; }
  .developer-social:hover { color: var(--text); background: #ffffff0d; border-color: #ffffff45; }
  .developer-social:focus-visible { outline-offset: 3px; }
  .image-dialog > img { width: auto; max-height: calc(100dvh - 210px); max-width: 100%; object-fit: contain; margin: 18px auto; }
  .image-dialog > p { text-align: center; padding: 0 20px 18px; font-size: 11px; }
  body.has-dialog { overflow: hidden; }
  .lab-art { position: relative; aspect-ratio: 1.2; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at center, #ffe71306, transparent 66%); border: 1px solid var(--line); border-radius: 8px; }
  .lab-art-grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse, black, transparent 75%); }
  .lab-art > img { width: 95px; height: 118px; object-fit: contain; z-index: 1; filter: drop-shadow(0 0 28px #ffe7130b); }
  .lab-orbit { position: absolute; border: 1px solid #ffffff09; border-radius: 50%; width: 240px; height: 240px; }
  .lab-orbit::after { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); position: absolute; top: 48px; left: 27px; opacity: .7; }
  .lab-orbit.ring-two { width: 320px; height: 320px; }
  .lab-orbit.ring-two::after { top: auto; left: auto; right: 24px; bottom: 69px; background: var(--pink); }
  .lab-art-corner { position: absolute; font-family: Consolas,monospace; font-size: 8px; color: #a6adb977; letter-spacing: .03em; }
  .top-left { top: 20px; left: 22px; color: var(--muted); }
  .top-right { top: 20px; right: 22px; }
  .bottom-left { bottom: 20px; left: 22px; display: flex; gap: 7px; align-items: center; }
  .bottom-right { bottom: 20px; right: 22px; }
  .lab-art .signal-dot { width: 4px; height: 4px; }
  .help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .help-link { display: flex; align-items: center; gap: 22px; border: 1px solid var(--line); border-radius: 8px; padding: 31px 28px; transition: background .25s, border-color .25s; }
  .help-link > .icon:first-child { width: 25px; height: 25px; color: var(--cyan); }
  .help-link > .icon:last-child { width: 18px; height: 18px; margin-left: auto; }
  .help-link h3 { font-size: 16px; margin-bottom: 6px; }
  .help-link p { font-size: 11px; }
  .help-link:hover { background: var(--surface); border-color: #59cac655; }
  .site-footer { background: #13151a; border-top: 1px solid var(--line); padding-top: 65px; }
  .footer-main { display: flex; justify-content: space-between; gap: 65px; padding-bottom: 57px; }
  .footer-brand > span { font-size: 27px; font-weight: 600; }
  .footer-main p { margin-top: 19px; font-size: 11px; }
  .footer-main .maker { font-size: 10px; line-height: 2; color: var(--quiet); margin-top: 19px; }
  .maker strong { color: var(--muted); font-weight: 400; margin-left: 8px; }
  .footer-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 45px; padding-top: 3px; }
  .footer-links > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer-links .eyebrow { font-size: 9px; margin-bottom: 13px; color: var(--quiet); }
  .footer-links a { color: var(--muted); font-size: 11px; min-height: 31px; display: inline-flex; align-items: center; gap: 6px; }
  .footer-links a:hover { color: var(--cyan); }
  .footer-links .icon { width: 11px; height: 11px; }
  .footer-bottom { border-top: 1px solid var(--line); padding-block: 23px; display: flex; align-items: center; gap: 40px; color: var(--quiet); }
  .footer-bottom small { font-size: 10px; }
  .footer-bottom .mono { font-size: 8px; color: #717a87; }
  .back-top { display: flex; gap: 10px; align-items: center; font-size: 10px; margin-left: auto; padding-block: 8px; }
  .back-top .icon { width: 15px; height: 15px; transform: rotate(-90deg); }
  .breadcrumbs { display: flex; gap: 14px; align-items: center; font-size: 10px; color: var(--quiet); padding-top: 28px; }
  .breadcrumbs > span:not([aria-current]) { color: #515967; }
  .breadcrumbs a { padding-block: 5px; }
  .breadcrumbs a:hover { color: var(--text); }
  .page-hero { padding-top: 65px; padding-bottom: 65px; }
  .page-hero .lead { margin-top: 24px; }
  .small-heading { font-size: 16px; margin-bottom: 22px; }
  .soft-section { background: #1c1f26; border-block: 1px solid #ffffff05; }
  .section-intro { font-size: 13px; margin-block: 24px; line-height: 2; }
  .faq-list { border-top: 1px solid var(--line-strong); }
  .faq-item { border-bottom: 1px solid var(--line-strong); }
  .faq-item summary { list-style: none; display: flex; align-items: center; gap: 22px; padding: 25px 7px; cursor: pointer; font-size: 14px; transition: color .2s; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary > .icon { margin-left: auto; width: 17px; height: 17px; color: var(--quiet); transition: transform .25s; }
  .faq-item[open] summary > .icon { transform: rotate(45deg); color: var(--cyan); }
  .faq-item summary:hover { color: var(--cyan); }
  .faq-q { font-family: Consolas,monospace; font-size: 15px; color: var(--cyan); flex-shrink: 0; }
  .faq-answer { padding: 0 48px 28px 41px; font-size: 13px; line-height: 2; }
  .faq-item[open] .faq-answer { animation: fade-in .3s ease both; }
  .related-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
  .related-card { display: flex; align-items: center; gap: 23px; padding: 27px 28px; background: #20232b; border: 1px solid var(--line); border-radius: 8px; transition: border-color .25s, transform .25s; }
  .related-card > .icon:first-child { width: 27px; height: 27px; color: var(--accent); }
  .related-card > .icon:last-child { margin-left: auto; width: 18px; height: 18px; }
  .related-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
  .related-card p { font-size: 11px; margin-top: 4px; }
  .related-card:hover { border-color: color-mix(in srgb,var(--accent) 40%,transparent); transform: translateY(-3px); }
  .prose { color: var(--muted); font-size: 14px; line-height: 2.15; }
  .prose h2 { color: var(--text); font-size: 26px; margin-bottom: 24px; }
  .prose h3 { color: var(--text); font-size: 17px; margin: 30px 0 12px; }
  .prose p + p { margin-top: 18px; }
  .prose ul { padding-left: 1.4em; margin-block: 18px; }
  .prose li { padding-left: .35em; margin-block: 10px; font-size: 13px; }
  .prose li::marker { color: var(--cyan); }
  .prose code { color: var(--text); background: #ffffff08; padding: 2px 5px; border-radius: 3px; font-size: .9em; overflow-wrap: anywhere; }
  .prose a:not(.button):not(.developer-social) { color: var(--cyan); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #59cac64d; }
  .prose a:hover { text-decoration-color: var(--cyan); }
  .prose a > .icon { display: inline-block; width: 13px; height: 13px; vertical-align: -.1em; margin-left: 5px; }
  .prose .text-link { margin-top: 12px; }
}

@layer pages {
  .hero { overflow: clip; position: relative; background: radial-gradient(ellipse at 70% 28%, #59cac604, transparent 48%); }
  .hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; min-height: 596px; padding-top: 36px; padding-bottom: 25px; }
  .hero-copy { z-index: 2; padding-bottom: 10px; }
  .hero-eyebrow { color: var(--cyan); font-size: 10px; display: flex; gap: 10px; align-items: center; margin-bottom: 26px; }
  .hero h1 { font-size: clamp(27px, 2.65vw, 39px); line-height: 1.7; letter-spacing: .005em; white-space: nowrap; }
  .hero h1 > span { font-size: 1.23em; letter-spacing: .03em; }
  .hero-description { font-size: 13px; line-height: 2.15; margin-top: 23px; }
  .hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 34px; }
  .hero-meta { display: flex; align-items: center; gap: 12px; color: var(--quiet); font-size: 9px; margin-top: 23px; }
  .hero-meta i { width: 2px; height: 2px; border-radius: 50%; background: #707782; }
  .showcase { min-width: 0; padding-top: 8px; container-type: inline-size; }
  .showcase-stage { height: calc(55cqw + 130px); position: relative; isolation: isolate; }
  .stage-orbit { position: absolute; border-radius: 50%; border: 1px solid #ffffff05; width: 440px; height: 440px; top: -27px; right: 4px; z-index: -1; pointer-events: none; }
  .stage-orbit.orbit-two { width: 555px; height: 555px; top: -84px; right: -54px; border-style: dashed; border-color: #ffffff04; }
  .app-window { position: absolute; width: 91%; left: 1%; top: 54px; background: #20242d; border: 1px solid #46535b; border-radius: 8px; overflow: hidden; box-shadow: 0 25px 45px #0005; opacity: .4; visibility: hidden; transform: translate(6%, -16px) rotate(4deg); transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .45s, border-color .4s; }
  .js .app-window { visibility: visible; }
  .app-window .screen-expand > img { width: 100%; aspect-ratio: 1.66; object-fit: cover; object-position: top; }
  .app-window[data-depth="2"] { transform: translate(9%, -34px) rotate(6deg); opacity: .25; z-index: 0; }
  .app-window[data-depth="1"] { transform: translate(5%, -18px) rotate(3deg); opacity: .48; z-index: 1; }
  .app-window.is-active { transform: translate(0,17px) rotate(-2deg); opacity: 1; z-index: 3; border-color: color-mix(in srgb,var(--accent) 21%,#373d49); visibility: visible; }
  .hero-floating-label { position: absolute; bottom: 10px; right: -7px; z-index: 4; background: #222831f5; border: 1px solid #ffffff16; box-shadow: 0 10px 35px #0002; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 4px; font-size: 9px; transform: rotate(-2deg); letter-spacing: .07em; }
  .showcase-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 3px; }
  .showcase-tabs { display: none; gap: 5px; padding: 4px; background: #0c0f1338; border: 1px solid var(--line); border-radius: 6px; }
  .js .showcase-tabs { display: flex; }
  .showcase-tab { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid transparent; border-radius: 4px; color: var(--quiet); font-size: 10px; min-height: 38px; transition: color .2s, background .2s; }
  .showcase-tab > span { font-size: 8px; color: var(--quiet); font-family: Consolas,monospace; }
  .showcase-tab[aria-selected="true"] { color: var(--text); background: #2a2e38; border-color: var(--line); }
  .showcase-tab[aria-selected="true"] > span { color: var(--accent); }
  .showcase-tab:hover { color: var(--text); }
  .showcase-note { display: none; font-size: 8px; color: var(--quiet); letter-spacing: .07em; }
  .js .showcase-note { display: block; }
  .hero-bottom { border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 18px 0 26px; color: var(--quiet); }
  .hero-bottom > .mono { font-size: 8px; letter-spacing: .11em; }
  .scroll-hint { display: inline-flex; align-items: center; gap: 16px; font-size: 8px; letter-spacing: .15em; }
  .scroll-hint span { color: var(--cyan); font-size: 16px; }
  .products-section { padding-top: 85px; padding-bottom: 93px; }
  .distribution-note { display: flex; justify-content: space-between; align-items: center; padding-top: 25px; font-size: 10px; color: var(--quiet); gap: 20px; }
  .distribution-note span, .distribution-note a { display: inline-flex; align-items: center; gap: 8px; }
  .distribution-note .icon { width: 13px; height: 13px; }
  .distribution-note a { color: var(--muted); padding-block: 7px; white-space: nowrap; }
  .distribution-note a:hover { color: var(--cyan); }
  .about-section { background: #1b1e24; padding-block: 90px; border-block: 1px solid #ffffff04; }
  .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 95px; align-items: center; }
  .about-copy { padding-bottom: 4px; }
  .about-copy h2 { font-size: 30px; margin-bottom: 28px; }
  .about-copy > p:not(.eyebrow) { font-size: 13px; line-height: 2.1; margin-bottom: 20px; }
  .about-copy .text-link { margin-top: 6px; }
  .help-section { padding-block: 88px 100px; }
  .help-section .section-heading { margin-bottom: 30px; }
  .product-hero { display: grid; grid-template-columns: .88fr 1.12fr; gap: 65px; padding-block: 60px 90px; align-items: center; }
  .product-intro .eyebrow { color: var(--accent); margin-bottom: 20px; font-size: 9px; }
  .product-title { display: flex; align-items: center; gap: 11px; font-size: 24px; font-weight: 600; letter-spacing: -.03em; margin-bottom: 14px; }
  .product-title .product-mark { width: 20px; height: 25px; }
  .product-title .drawn > .icon { width: 24px; height: 24px; }
  .product-intro h1 { font-size: clamp(30px, 3vw, 42px); line-height: 1.65; }
  .product-intro .lead { font-size: 13px; line-height: 2; margin-top: 23px; }
  .tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 23px; }
  .tag-list > span { border: 1px solid var(--line-strong); padding: 3px 9px; font-size: 9px; border-radius: 3px; color: var(--muted); }
  .product-download { margin-top: 30px; }
  .download-small { font-size: 10px; color: var(--quiet); margin-top: 10px; }
  .product-intro > .text-link { margin-top: 12px; }
  .detail-figure { min-width: 0; }
  .detail-screen { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; box-shadow: 0 28px 80px #0004; transform: perspective(1200px) rotateY(-4deg) rotateX(1deg); }
  .detail-screen .window-bar { height: 35px; }
  .detail-screen .window-dot { margin-left: 0; margin-right: 1px; }
  .detail-screen .mono { margin-left: auto; font-size: 8px; color: var(--quiet); }
  .detail-figure figcaption { margin-top: 22px; font-size: 9px; color: var(--quiet); text-align: center; }
  .release-pending { display: inline-flex; align-items: center; gap: 10px; background: #242932; border: 1px solid #ffffff15; color: var(--muted); border-radius: 5px; padding: 14px 20px; font-size: 12px; }
  .release-pending .signal-dot { background: var(--quiet); box-shadow: none; width: 5px; height: 5px; }
  .release-pending:disabled { cursor: not-allowed; color: #9aa3b1; box-shadow: none; gap: 12px; opacity: 1; }
  .product-policy-links { display: flex; flex-wrap: wrap; gap: 8px 17px; margin-top: 13px; }
  .product-policy-links a { color: var(--muted); font-size: 9px; padding-block: 5px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
  .product-policy-links a:hover { color: var(--cyan); }
  .download-section .product-policy-links { justify-content: center; }
  .product-subnav { position: sticky; top: var(--header-height); z-index: 10; background: #1b1f27ed; backdrop-filter: blur(16px); border-block: 1px solid var(--line); }
  .product-subnav > div { display: flex; gap: 38px; align-items: center; min-height: 59px; }
  .product-subnav a { font-size: 11px; color: var(--muted); padding-block: 18px; position: relative; white-space: nowrap; }
  .product-subnav a:hover, .product-subnav a.is-current { color: var(--text); }
  .product-subnav a.is-current::after { content: ""; height: 2px; width: 100%; position: absolute; bottom: 0; left: 0; background: var(--cyan); }
  .subnav-product { font-size: 14px; font-weight: 600; margin-right: auto; }
  .product-page { --anchor-offset: 190px; }
  .product-page section[id] { scroll-margin-top: 80px; }
  .feature-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; }
  .feature { padding: 28px 23px 31px; border: 1px solid var(--line); border-radius: 8px; background: #1d2027; }
  .feature-top { display: flex; align-items: center; justify-content: space-between; color: var(--accent); margin-bottom: 31px; }
  .feature-top .icon { width: 25px; height: 25px; }
  .feature-top .mono { color: #727a87; }
  .feature h3 { font-size: 16px; line-height: 1.75; margin-bottom: 17px; }
  .feature > p { font-size: 12px; line-height: 2; }
  .steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 60px; }
  .steps > li { position: relative; }
  .step-number { display: block; color: var(--accent); font-size: 32px; font-weight: 300; line-height: 1; margin-bottom: 25px; }
  .steps > li:not(:last-child)::after { content: ""; position: absolute; height: 1px; background: var(--line-strong); top: 16px; left: 65px; right: -26px; }
  .steps h3 { font-size: 18px; margin-bottom: 13px; }
  .steps p { font-size: 13px; line-height: 2; }
  .requirements-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
  .requirements { border-top: 1px solid var(--line-strong); }
  .requirements > div { display: grid; grid-template-columns: 120px 1fr; gap: 24px; font-size: 12px; padding-block: 22px; border-bottom: 1px solid var(--line); }
  .requirements dt { color: var(--text); }
  .requirements dd { color: var(--muted); }
  .faq-section { padding-top: 0; }
  .download-section { text-align: center; padding-block: 80px; background: radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--accent) 5%, transparent),transparent 70%),#20242c; border-block: 1px solid var(--line); }
  .download-section h2 { margin-bottom: 29px; font-size: 29px; }
  .download-section .eyebrow { color: var(--accent); }
  .download-legal { display: block; width: fit-content; margin: 24px auto 0; font-size: 10px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
  .download-legal:hover { color: var(--text); }
  .related { padding-block: 80px; }
  .related h2 { font-size: 24px; }
  .about-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 88px; align-items: start; margin-top: 12px; }
  .about-story .lab-art { aspect-ratio: .85; }
  .about-story .lab-art > img { width: 120px; height: 148px; }
  .about-story .lab-orbit { width: 280px; height: 280px; }
  .about-story .ring-two { width: 390px; height: 390px; }
  .identity-list { margin-top: 29px; padding-top: 10px; border-top: 1px solid var(--line-strong); }
  .identity-list > div { display: grid; grid-template-columns: 130px 1fr; padding-block: 10px; font-size: 12px; gap: 18px; }
  .identity-list dd { color: var(--text); }
  .identity-developer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .identity-role { color: var(--quiet); font-size: 10px; }
  .principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
  .principles article { border-top: 1px solid var(--line-strong); padding-top: 23px; }
  .principles .mono { color: var(--cyan); }
  .principles h3 { font-size: 18px; margin-block: 22px 18px; }
  .principles p { font-size: 13px; line-height: 2; }
  .about-notes { padding: 40px 45px; margin-bottom: 110px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  .about-notes h2 { font-size: 20px; }
  .about-notes .button { margin-top: 25px; }
  .support-product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
  .support-product-grid .related-card { gap: 15px; padding: 24px; }
  .support-product-grid .related-card h3 { font-size: 18px; }
  .support-product-grid .related-card > .icon:first-child { width: 23px; height: 23px; }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
  .contact-email { margin: -10px 0 25px; font-size: 17px; color: var(--cyan); overflow-wrap: anywhere; }
  .contact-email a { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #59cac64d; }
  .contact-email a:hover { text-decoration-color: var(--cyan); }
  .report-panel { background: #14171d; border: 1px solid var(--line); border-radius: 7px; padding: 27px; }
  .report-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
  .report-heading h3 { font-size: 14px; }
  .copy-report { gap: 7px; color: var(--cyan); font-size: 10px; padding: 8px; }
  .copy-report .icon { width: 14px; height: 14px; }
  .report-panel pre { font: 12px/2.2 "Yu Gothic UI",Meiryo,sans-serif; color: var(--muted); white-space: pre-wrap; margin: 22px 0; overflow-wrap: anywhere; }
  .report-panel > p { color: var(--quiet); font-size: 10px; }
  .report-panel .copy-status { color: var(--cyan); min-height: 20px; margin-top: 8px; }
  .download-list { margin-top: 34px; border-top: 1px solid var(--line-strong); }
  .download-list > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 23px; border-bottom: 1px solid var(--line); }
  .download-list strong { font-size: 17px; }
  .download-list .muted { font-size: 11px; }
  .legal-hero { padding-bottom: 50px; }
  .legal-hero h1 { font-size: clamp(28px,3.4vw,44px); }
  .legal-date { font-size: 11px; color: var(--quiet); margin-top: 20px; }
  .draft-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 34px; padding: 18px 23px; background: #ffe71305; border: 1px solid #ffe71320; border-radius: 6px; max-width: 820px; }
  .draft-note > .icon { color: #c2b857; width: 17px; height: 17px; margin-top: 4px; }
  .draft-note strong { font-size: 12px; color: #d3cc8e; }
  .draft-note p { margin-top: 4px; font-size: 11px; }
  .legal-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
  .legal-card { padding: 32px 28px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; transition: border-color .25s, transform .25s; }
  .legal-card h2 { font-size: 21px; margin-bottom: 17px; }
  .legal-card p { font-size: 12px; min-height: 52px; }
  .legal-card .text-link { margin-top: 17px; }
  .legal-card:hover { border-color: #59cac666; transform: translateY(-4px); }
  .legal-overview { display: grid; grid-template-columns: .9fr 1.1fr; gap: 85px; }
  .legal-overview h2 { font-size: 26px; }
  .legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 80px; padding-bottom: 110px; align-items: start; }
  .legal-toc { position: sticky; top: 130px; border-top: 1px solid var(--line-strong); padding-top: 21px; }
  .legal-toc nav { display: flex; flex-direction: column; gap: 4px; }
  .legal-toc .eyebrow { margin-bottom: 13px; }
  .legal-toc nav a { color: var(--muted); font-size: 11px; padding: 7px 0; }
  .legal-toc nav a:hover { color: var(--cyan); }
  .legal-toc > a { margin-top: 23px; font-size: 10px; }
  .legal-content { max-width: 780px; }
  .terms-product-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
  .terms-product-links .related-card { padding: 23px; gap: 16px; }
  .legal-content .terms-product-links { grid-template-columns: 1fr; margin-block: 24px; }
  .legal-content .related-card { text-decoration: none !important; }
  .legal-content .related-card > .icon { width: 22px; height: 22px; margin: 0; }
  .legal-content .related-card > .icon:last-child { margin-left: auto; }
  .legal-content .related-card h3 { margin: 0; font-size: 19px; }
  .legal-content .related-card p { font-size: 10px; margin: 5px 0 0; }
  .legal-bottom { padding-bottom: 100px; }
  .legal-content section { padding-top: 30px; border-top: 1px solid var(--line-strong); margin-bottom: 54px; }
  .legal-content section:last-child { margin-bottom: 0; }
  .legal-content h2 { font-size: 23px; }
  .legal-content p { font-size: 13px; }
  .status-chip { display: inline-block; font-size: 10px; border: 1px solid var(--line-strong); padding: 3px 10px; border-radius: 4px; color: var(--muted); margin-bottom: 17px; }
  .status-chip.active { color: var(--cyan); border-color: #59cac640; background: #59cac609; }
  .not-found { text-align: center; padding-block: 100px 120px; }
  .not-found .eyebrow { color: var(--cyan); }
  .error-orbit { display: grid; place-items: center; width: 140px; height: 140px; border: 1px dashed var(--line-strong); border-radius: 50%; margin: 30px auto; }
  .error-orbit .icon { width: 52px; height: 52px; color: var(--cyan); }
  .not-found h1 { font-size: 35px; }
  .not-found p:not(.eyebrow) { font-size: 13px; margin-block: 25px 35px; }
  .not-found > .text-link { display: flex; width: fit-content; margin: 18px auto 0; }
}

@layer responsive {
  @media (min-width: 1600px) {
    .hero-grid { min-height: 640px; }
    .hero h1 { font-size: 39px; }
  }
  @media (max-width: 1199px) {
    .container { width: calc(100% - 72px); }
    .site-nav { gap: 23px; }
    .hero-grid { gap: 25px; min-height: 560px; }
    .hero h1 { font-size: 30px; }
    .hero h1 > span { font-size: 1.25em; }
    .hero-actions { gap: 20px; }
    .hero-actions .text-link { font-size: 11px; }
    .showcase-stage { height: calc(55cqw + 110px); }
    .hero-floating-label { bottom: 8px; right: -2px; font-size: 8px; }
    .app-window { top: 37px; }
    .showcase-tab { padding-inline: 9px; font-size: 9px; }
    .showcase-tab > span { font-size: 7px; }
    .showcase-controls { margin-top: 15px; }
    .section { padding-block: 85px; }
    .product-card { padding: 24px 20px 0; }
    .product-card::before { left: 21px; }
    .product-card > p { min-height: 92px; }
    .card-screen { height: 140px; }
    .product-grid { gap: 16px; }
    .about-grid { gap: 65px; }
    .about-copy h2 { font-size: 27px; }
    .footer-links { gap: 26px; }
    .footer-main { gap: 40px; }
    .product-hero { gap: 40px; }
    .feature-grid { gap: 16px; }
    .feature { padding: 24px 19px; }
    .feature h3 { font-size: 15px; }
    .requirements-grid { gap: 50px; }
    .faq-section { padding-top: 0; }
    .about-story { gap: 55px; }
    .about-story .lab-art { aspect-ratio: .7; }
    .principles { gap: 28px; }
    .support-product-grid .related-card { gap: 12px; padding: 24px 18px; }
    .contact-grid { gap: 45px; }
    .legal-card { padding: 27px 22px; }
    .legal-card h2 { font-size: 19px; }
    .legal-layout { gap: 50px; grid-template-columns: 190px 1fr; }
  }
  @media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; padding-top: 56px; }
    .hero h1 { font-size: 37px; }
    .hero-copy { padding-bottom: 0; }
    .hero-eyebrow, .hero-actions, .hero-meta { justify-content: center; }
    .hero-description { margin-top: 20px; }
    .hero-meta { margin-top: 20px; }
    .showcase { max-width: 620px; width: 100%; margin: 20px auto 25px; }
    .showcase-stage { height: calc(55cqw + 110px); }
    .app-window { left: 2%; top: 34px; width: 91%; }
    .hero-floating-label { bottom: 18px; }
    .showcase-controls { margin-top: 8px; }
    .showcase-tab { padding: 11px 16px; font-size: 11px; }
    .showcase-tab > span { font-size: 8px; }
    .hero-bottom { padding-bottom: 25px; }
    .site-nav { gap: 18px; }
    .site-nav > a { font-size: 11px; }
    .brand > span { font-size: 23px; }
    .brand { gap: 10px; }
    .brand > img { width: 25px; height: 32px; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
    .product-card h3 { font-size: 24px; }
    .card-top { margin-bottom: 17px; }
    .product-card > p { min-height: 115px; }
    .card-screen { height: 110px; }
    .about-grid { gap: 40px; }
    .lab-art { aspect-ratio: .82; }
    .lab-art-corner { font-size: 7px; }
    .lab-art .top-right { display: none; }
    .lab-art .bottom-right { bottom: 38px; left: 22px; right: auto; }
    .help-link { gap: 16px; padding: 27px 22px; }
    .help-link h3 { font-size: 15px; }
    .help-link > .icon:first-child { width: 22px; height: 22px; }
    .footer-main { flex-direction: column; gap: 40px; }
    .footer-links { grid-template-columns: repeat(3,1fr); max-width: 640px; width: 100%; }
    .footer-main > div:first-child { display: grid; grid-template-columns: 1fr 1fr; }
    .footer-main > div:first-child > p:first-of-type { grid-column: 1; }
    .footer-main .maker { grid-column: 2; grid-row: 1/3; margin: 0; align-self: center; }
    .product-hero { grid-template-columns: 1fr; gap: 50px; padding-top: 40px; }
    .product-intro h1 { font-size: 40px; }
    .product-intro .lead { max-width: 680px; }
    .detail-figure { width: 100%; max-width: 760px; margin-inline: auto; }
    .detail-screen { transform: none; }
    .feature-grid { grid-template-columns: repeat(2,1fr); }
    .feature { padding: 28px; }
    .feature h3 { font-size: 17px; }
    .steps { gap: 30px; }
    .steps h3 { font-size: 16px; }
    .requirements-grid { grid-template-columns: 1fr; gap: 32px; }
    .requirements-grid .section-intro { margin-bottom: 5px; }
    .product-subnav > div { gap: 27px; }
    .subnav-product { font-size: 12px; }
    .about-story { grid-template-columns: 1fr; gap: 40px; }
    .about-story > div:first-child { max-width: 600px; width: 100%; }
    .about-story .lab-art { aspect-ratio: 1.5; }
    .principles h3 { font-size: 16px; }
    .principles p { font-size: 12px; }
    .support-product-grid { grid-template-columns: 1fr; }
    .support-product-grid .related-card { padding: 22px 28px; gap: 22px; }
    .support-product-grid .related-card p { display: inline; }
    .contact-grid { grid-template-columns: 1fr; gap: 36px; }
    .report-panel { max-width: 680px; width: 100%; }
    .legal-cards { grid-template-columns: 1fr; }
    .terms-product-links { grid-template-columns: 1fr; }
    .legal-card .feature-top { margin-bottom: 24px; }
    .legal-card p { min-height: 0; }
    .legal-overview { grid-template-columns: 1fr; gap: 35px; }
    .legal-layout { grid-template-columns: 165px 1fr; gap: 35px; }
  }
  @media (max-width: 760px) {
    :root { --header-height: 74px; }
    .container { width: calc(100% - 44px); }
    .section { padding-block: 70px; }
    .header-inner { gap: 20px; }
    .js .menu-toggle { display: flex; }
    .site-header { height: auto; min-height: var(--header-height); }
    .header-inner { min-height: var(--header-height); flex-wrap: wrap; padding-block: 16px; }
    .site-nav { width: 100%; flex-wrap: wrap; padding-block: 6px; }
    .js .header-inner { padding-block: 0; }
    .js .site-nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: #1b1e26; border-bottom: 1px solid var(--line-strong); padding: 14px 22px 26px; flex-direction: column; align-items: stretch; gap: 0; transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s, transform .22s, visibility .22s; box-shadow: 0 24px 32px #0003; }
    .js .site-nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
    .site-nav > a { padding-block: 15px; font-size: 13px; border-bottom: 1px solid var(--line); }
    .site-nav > a::after { display: none; }
    .site-nav .nav-booth { margin-top: 18px; justify-content: center; min-height: 44px; }
    .site-nav > a[aria-current] { color: var(--cyan); }
    .hero-grid { padding-top: 47px; }
    .hero h1 { font-size: clamp(23px,5.1vw,36px); }
    .hero h1 > span { font-size: 1.25em; }
    .hero-eyebrow { font-size: 9px; margin-bottom: 25px; }
    .hero-description { font-size: 12px; line-height: 2.1; margin-top: 21px; }
    .hero-actions { gap: 24px; margin-top: 29px; }
    .hero-actions .text-link { font-size: 11px; }
    .hero-actions .button { min-height: 48px; padding-inline: 20px; font-size: 12px; gap: 20px; }
    .hero-meta { font-size: 8px; gap: 9px; }
    .showcase { margin-top: 13px; padding-top: 0; max-width: 580px; }
    .showcase-stage { height: calc(55cqw + 104px); }
    .app-window { top: 32px; }
    .app-window .window-bar { height: 29px; }
    .app-window .window-bar > span { font-size: 9px; }
    .app-window .product-mark { height: 12px; width: 9px; }
    .hero-floating-label { font-size: 8px; bottom: -4px; padding: 9px 12px; }
    .showcase-controls { margin-top: 27px; gap: 9px; }
    .showcase-tab { font-size: 10px; padding: 9px 12px; min-height: 42px; }
    .showcase-note { font-size: 8px; }
    .showcase .stage-orbit { max-width: 100%; aspect-ratio: 1; height: auto; top: 2px; right: 0; }
    .hero-bottom { padding-top: 6px; padding-bottom: 22px; }
    .hero-bottom > .mono { font-size: 6px; }
    .scroll-hint { font-size: 6px; gap: 8px; }
    .hero-grid { padding-bottom: 5px; }
    .section-heading { gap: 15px; margin-bottom: 30px; }
    .section-heading h2 { font-size: 25px; }
    .section-heading > p { font-size: 12px; }
    .eyebrow { font-size: 9px; }
    .product-grid { grid-template-columns: 1fr; gap: 24px; }
    .product-card { padding: 28px 28px 0; }
    .product-card::before { left: 28px; }
    .card-top { margin-bottom: 18px; }
    .product-role { font-size: 11px; }
    .product-card h3 { font-size: 30px; margin-bottom: 12px; }
    .product-card > p { min-height: 0; font-size: 13px; max-width: 510px; }
    .card-screen { height: auto; aspect-ratio: 2.05; margin-top: 23px; }
    .card-bottom { padding-block: 20px; }
    .card-bottom > span { font-size: 12px; }
    .distribution-note { flex-direction: column; align-items: flex-start; gap: 5px; padding-top: 22px; }
    .about-grid { grid-template-columns: 1fr; gap: 35px; }
    .lab-art { aspect-ratio: 1.4; max-width: 520px; }
    .lab-art .top-right { display: block; }
    .lab-art .bottom-right { bottom: 20px; right: 22px; left: auto; }
    .lab-art > img { width: 78px; height: 97px; }
    .lab-orbit { width: 190px; height: 190px; }
    .lab-orbit.ring-two { width: 270px; height: 270px; }
    .about-copy h2 { font-size: 28px; margin-bottom: 24px; }
    .about-copy > p:not(.eyebrow) { font-size: 13px; }
    .help-grid { grid-template-columns: 1fr; gap: 16px; }
    .help-link { padding: 24px; }
    .help-link h3 { font-size: 16px; }
    .site-footer { padding-top: 45px; }
    .footer-main { gap: 34px; padding-bottom: 32px; }
    .footer-main > div:first-child { display: block; }
    .footer-main .maker { margin-top: 18px; }
    .footer-links { gap: 15px; }
    .footer-links .eyebrow { font-size: 8px; letter-spacing: .1em; margin-bottom: 10px; }
    .footer-links a { font-size: 10px; min-height: 36px; }
    .footer-bottom { padding-block: 19px; gap: 10px; }
    .footer-bottom > .mono { display: none; }
    .breadcrumbs { padding-top: 21px; font-size: 9px; gap: 10px; }
    .page-hero { padding-top: 40px; padding-bottom: 44px; }
    .page-hero h1 { font-size: 33px; }
    .page-hero .lead { font-size: 13px; margin-top: 22px; }
    .product-hero { padding-top: 36px; padding-bottom: 49px; gap: 38px; }
    .product-intro .eyebrow { margin-bottom: 15px; }
    .product-title { font-size: 22px; }
    .product-intro h1 { font-size: 36px; }
    .product-intro .lead { font-size: 13px; }
    .product-download { margin-top: 26px; }
    .detail-figure figcaption { margin-top: 14px; font-size: 8px; }
    .detail-screen .window-bar { height: 29px; }
    .detail-screen .window-bar > span { font-size: 9px; }
    .detail-screen .window-bar .mono { font-size: 7px; }
    .expand-label { opacity: 1; transform: none; bottom: 8px; right: 8px; font-size: 8px; padding: 5px 7px; }
    .expand-label .icon { width: 11px; height: 11px; }
    .app-window .expand-label { opacity: 0; }
    .subnav-product { display: none; }
    .product-subnav > div { width: 100%; min-height: 52px; padding-inline: 22px; gap: 28px; overflow-x: auto; scrollbar-width: none; }
    .product-subnav > div::-webkit-scrollbar { display: none; }
    .product-subnav a { padding-block: 16px; font-size: 10px; flex-shrink: 0; }
    .product-page section[id] { scroll-margin-top: 55px; }
    .feature-grid { gap: 15px; }
    .feature { padding: 22px 18px; }
    .feature-top { margin-bottom: 24px; }
    .feature-top .icon { width: 22px; height: 22px; }
    .feature h3 { font-size: 15px; margin-bottom: 14px; }
    .feature > p { font-size: 12px; }
    .steps { grid-template-columns: 1fr; gap: 29px; }
    .steps > li { padding-left: 55px; }
    .step-number { position: absolute; left: 0; top: 6px; font-size: 24px; }
    .steps > li:not(:last-child)::after { width: 1px; height: auto; top: 44px; bottom: -12px; left: 15px; right: auto; }
    .steps h3 { font-size: 17px; margin-bottom: 9px; }
    .requirements-grid { gap: 27px; }
    .requirements > div { grid-template-columns: 84px 1fr; gap: 15px; font-size: 12px; padding-block: 19px; }
    .requirements-grid .section-intro { font-size: 12px; }
    .faq-section { padding-top: 0; }
    .faq-item summary { font-size: 13px; padding-block: 21px; gap: 13px; }
    .faq-answer { padding: 0 20px 24px 30px; font-size: 12px; }
    .download-section { padding-block: 60px; }
    .download-section h2 { font-size: 25px; }
    .related-grid { grid-template-columns: 1fr; gap: 16px; }
    .related-card { padding: 22px 24px; }
    .image-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 32px); }
    .image-dialog > img { max-height: calc(100dvh - 180px); margin-block: 10px; }
    .image-dialog > p { font-size: 9px; padding: 0 14px 14px; }
    .image-dialog-bar { padding-left: 15px; font-size: 12px; }
    .about-story { gap: 33px; margin-top: 0; }
    .about-story .lab-art { aspect-ratio: 1.25; }
    .about-story .lab-art > img { width: 90px; height: 112px; }
    .about-story .lab-orbit { width: 220px; height: 220px; }
    .about-story .ring-two { width: 310px; height: 310px; }
    .prose { font-size: 13px; }
    .prose h2 { font-size: 23px; }
    .identity-list > div { grid-template-columns: 110px 1fr; gap: 10px; font-size: 11px; }
    .identity-role { font-size: 9px; }
    .principles { grid-template-columns: 1fr; gap: 33px; }
    .principles article { padding-top: 19px; }
    .principles h3 { margin-block: 13px 12px; font-size: 18px; }
    .principles p { font-size: 13px; }
    .about-notes { margin-bottom: 70px; padding: 30px 24px; }
    .about-notes h2 { font-size: 20px; }
    .support-product-grid .related-card { padding: 22px; }
    .report-panel { padding: 22px; }
    .report-heading { gap: 7px; }
    .report-heading h3 { font-size: 13px; }
    .report-panel pre { font-size: 11px; }
    .download-list > div { align-items: flex-start; flex-direction: column; gap: 8px; }
    .download-list strong { font-size: 18px; }
    .download-list .text-link { font-size: 11px; }
    .legal-hero h1 { font-size: 30px; }
    .draft-note { padding: 17px; margin-top: 26px; gap: 11px; }
    .draft-note strong { font-size: 11px; }
    .draft-note p { font-size: 10px; }
    .legal-card { padding: 27px; }
    .legal-card h2 { font-size: 23px; }
    .legal-overview { gap: 25px; }
    .legal-bottom { padding-bottom: 65px; }
    .legal-overview h2 { font-size: 24px; }
    .legal-layout { grid-template-columns: 1fr; gap: 36px; padding-bottom: 65px; }
    .legal-toc { position: static; padding-top: 20px; }
    .legal-toc nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
    .legal-toc .eyebrow { grid-column: 1/-1; margin-bottom: 8px; }
    .legal-toc > a { margin-top: 13px; }
    .legal-content h2 { font-size: 22px; }
    .legal-content section { margin-bottom: 40px; padding-top: 26px; }
    .not-found { padding-block: 60px 80px; }
    .not-found h1 { font-size: 28px; }
  }
  @media (max-width: 380px) {
    .container { width: calc(100% - 36px); }
    .hero h1 { font-size: 22px; }
    .hero h1 > span { font-size: 1.23em; }
    .hero-actions { gap: 17px; }
    .hero-actions .button { padding-inline: 16px; gap: 13px; font-size: 11px; }
    .hero-actions .text-link { font-size: 10px; gap: 7px; }
    .hero-meta { font-size: 7px; }
    .hero-floating-label { display: none; }
    .showcase-stage { height: calc(55cqw + 94px); }
    .showcase-tab { font-size: 9px; padding: 9px; gap: 5px; }
    .showcase-tab > span { font-size: 7px; }
    .showcase-controls { margin-top: 18px; }
    .section-heading h2 { font-size: 22px; }
    .product-card { padding-inline: 23px; }
    .product-card::before { left: 23px; }
    .help-link { padding: 22px 18px; gap: 13px; }
    .help-link h3 { font-size: 14px; }
    .help-link p { font-size: 10px; }
    .lab-art .bottom-right { display: none; }
    .footer-links { grid-template-columns: 1fr 1fr; gap: 25px; }
    .footer-links a { font-size: 11px; }
    .feature-grid { grid-template-columns: 1fr; }
    .feature { padding: 25px; }
    .feature h3 { font-size: 16px; }
    .product-intro h1 { font-size: 31px; }
    .product-subnav > div { padding-inline: 18px; gap: 22px; }
    .product-subnav a { font-size: 9px; }
    .page-hero h1 { font-size: 29px; }
    .legal-hero h1 { font-size: 26px; }
    .report-heading { flex-wrap: wrap; }
    .copy-report { padding-left: 0; }
    .desktop-break { display: none; }
  }
  @media (hover: none) {
    .product-card:hover, .related-card:hover, .legal-card:hover { transform: none; }
    .product-card:hover .card-screen img { transform: none; }
  }
}

@layer motion {
  .reveal-ready { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay,0ms); }
  .reveal-ready.is-visible { opacity: 1; transform: translateY(0); }
  .hero-copy { animation: hero-in .8s cubic-bezier(.22,1,.36,1) both; }
  .showcase { animation: hero-in 1s .1s cubic-bezier(.22,1,.36,1) both; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
    .reveal-ready { opacity: 1; transform: none; }
  }
}