:root {
    color-scheme: dark;
    --background: #080B18;
    --surface: #12172B;
    --surface-alt: #1A2140;
    --surface-translucent: rgba(18,23,43,.80);
    --primary: #A96BFF;
    --secondary: #20E3D4;
    --text: #F5F7FF;
    --muted: #A6AEC6;
    --border: #2A3558;
    --on-primary: #0B0D18;
    --on-secondary: #071413;
    --danger: #FF7B8B;
    --focus: rgba(157,92,255,.35);
    --grid: rgba(255,255,255,.055);
    --font-display: "Arial Black", "Helvetica Neue", system-ui, sans-serif;
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --radius: 18px;
    --shadow: 0 30px 90px rgba(0, 0, 0, .42);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

a {
    color: inherit;
}

img,
svg {
    display: block;
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--text);
    color: var(--background);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-shell {
    width: min(100% - 40px, 1200px);
    margin-inline: auto;
}

.site-header {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-bottom: 1px solid var(--border);
}

.brand-link,
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -0.025em;
}

.brand-name {
    font-size: 1.18rem;
}

.brand-mark {
    width: 42px;
    height: 42px;
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 3vw, 34px);
}

.site-header nav a {
    position: relative;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
    color: var(--text);
}

.site-header nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    height: 2px;
    background: var(--primary);
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
        "hero hero hero hero hero hero art art art art art art"
        "lookup lookup lookup lookup lookup lookup art art art art art art"
        "loading loading loading loading loading loading loading loading loading loading loading loading"
        "error error error error error error error error error error error error"
        "result result result result result result result result result result result result"
        "features features features features features features features features features features features features"
        "note note note note note note note note note note note note";
    gap: 26px;
    padding-block: clamp(52px, 8vw, 110px) 72px;
}

.hero-copy {
    grid-area: hero;
    align-self: end;
}

.eyebrow,
.panel-index {
    margin: 0 0 18px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.hero-copy h1,
.page-hero h1,
.not-found h1 {
    max-width: 900px;
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 7vw, 6.7rem);
    font-weight: 800;
    letter-spacing: -0.065em;
    line-height: 0.94;
}

.hero-description {
    max-width: 650px;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    line-height: 1.65;
}

.trust-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.trust-note span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 5px var(--surface-alt);
}

.lookup-panel {
    grid-area: lookup;
    align-self: start;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.panel-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.panel-heading .panel-index {
    margin: 0;
}

.panel-heading h2,
.section-heading h2,
.method-note h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.15;
}

.lookup-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;
}

.lookup-form input {
    width: 100%;
    min-height: 58px;
    padding: 0 20px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 0.58);
    outline: 0;
    background: var(--background);
    color: var(--text);
    font-size: 1rem;
}

.lookup-form input::placeholder {
    color: var(--muted);
    opacity: 0.72;
}

.lookup-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus);
}

.lookup-form button,
.primary-link {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 24px;
    border: 1px solid var(--primary);
    border-radius: calc(var(--radius) * 0.58);
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease;
}

.lookup-form button:hover,
.primary-link:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
}

.lookup-form button:disabled,
.text-button:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.lookup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    color: var(--muted);
    font-size: 0.82rem;
}

.text-button {
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--primary);
    font-weight: 800;
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.signal-art {
    grid-area: art;
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
}

.signal-art strong {
    position: absolute;
    right: 24px;
    bottom: 20px;
    color: var(--text);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.signal-node,
.signal-line {
    position: absolute;
    display: block;
}

.signal-node {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
}

.node-a { top: 22%; left: 24%; }
.node-b { top: 48%; right: 23%; background: var(--secondary); }
.node-c { right: 42%; bottom: 18%; width: 10px; height: 10px; }
.signal-line { height: 1px; background: var(--border); transform-origin: left center; }
.line-a { top: 27%; left: 26%; width: 52%; transform: rotate(24deg); }
.line-b { top: 52%; left: 23%; width: 48%; transform: rotate(-31deg); }

.loading-state,
.error-state {
    grid-area: loading;
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.error-state {
    grid-area: error;
    border-color: var(--danger);
    color: var(--danger);
    font-weight: 700;
}

.loading-state p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.loader {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.result-panel {
    grid-area: result;
    padding: clamp(26px, 5vw, 54px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    animation: reveal 300ms ease both;
}

@keyframes reveal {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.result-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.result-heading .panel-index {
    margin-bottom: 10px;
}

.result-heading h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.ip-badge {
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.result-item {
    min-height: 116px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 0.6);
    background: var(--background);
}

.result-item span,
.map-row > span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.result-item strong {
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.result-wide {
    grid-column: span 2;
}

.map-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.map-row a {
    color: var(--primary);
    font-weight: 800;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.feature-section {
    grid-area: features;
    padding-block: clamp(40px, 8vw, 92px);
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 30px;
}

.section-heading .panel-index {
    margin: 0;
}

.feature-grid,
.step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.feature-card,
.step-grid article {
    min-height: 260px;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.feature-card > span,
.step-grid article > span {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.feature-card h3,
.step-grid h2 {
    margin: 72px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.12;
}

.feature-card p,
.step-grid p,
.method-note p {
    margin: 0;
    color: var(--muted);
}

.method-note {
    grid-area: note;
    display: grid;
    grid-template-columns: 1fr 1.25fr 2fr;
    align-items: start;
    gap: 32px;
    padding: 34px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.method-note .panel-index {
    margin: 6px 0 0;
}

.ad-region {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 0.6);
    background: var(--surface);
    text-align: center;
}

.ad-label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.adsbygoogle {
    display: block;
    width: 100%;
}

.content-page {
    max-width: 1040px;
    margin-inline: auto;
    padding-block: clamp(58px, 9vw, 120px) 80px;
}

.page-hero {
    max-width: 920px;
    margin-bottom: clamp(62px, 10vw, 120px);
}

.page-hero h1 {
    font-size: clamp(3.2rem, 8vw, 7rem);
}

.page-hero > p:not(.eyebrow):not(.updated) {
    max-width: 760px;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.updated {
    margin: 24px 0 0;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.prose-section {
    margin-block: 28px;
    padding: clamp(28px, 5vw, 54px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.split-section {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    gap: clamp(30px, 6vw, 72px);
}

.prose-section h2,
.legal-section h2 {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3vw, 2.25rem);
    line-height: 1.18;
}

.prose-section p,
.legal-section p {
    color: var(--muted);
}

.prose-section p:first-child,
.legal-section p:first-child {
    margin-top: 0;
}

.prose-section p:last-child,
.legal-section p:last-child {
    margin-bottom: 0;
}

.callout-section {
    border-color: var(--primary);
    background: var(--surface-alt);
}

.legal-page {
    max-width: 900px;
}

.legal-section {
    padding: 34px 0;
    border-top: 1px solid var(--border);
}

.legal-section h2 {
    font-size: clamp(1.35rem, 2.8vw, 1.9rem);
}

.legal-section a {
    color: var(--primary);
    font-weight: 800;
    text-underline-offset: 3px;
}

.content-page > .ad-region {
    margin-block: 34px;
}

.not-found {
    min-height: 68vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-block: 80px;
}

.not-found h1 {
    max-width: 760px;
}

.not-found > p:not(.eyebrow) {
    margin: 24px 0 30px;
    color: var(--muted);
    font-size: 1.1rem;
}

.site-footer {
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-block: 42px;
    border-top: 1px solid var(--border);
}

.footer-brand {
    font-size: 1.2rem;
}

.site-footer p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.footer-meta {
    text-align: right;
}

.site-footer a:not(.footer-brand) {
    text-underline-offset: 3px;
}

/* Quirky — asymmetric bento */
.layout-bento .home-grid {
    grid-template-areas:
        "hero hero hero hero hero hero hero art art art art art"
        "lookup lookup lookup lookup lookup lookup lookup art art art art art"
        "loading loading loading loading loading loading loading loading loading loading loading loading"
        "error error error error error error error error error error error error"
        "result result result result result result result result result result result result"
        "features features features features features features features features features features features features"
        "note note note note note note note note note note note note";
}

.layout-bento .hero-copy h1 { transform: rotate(-1.2deg); }
.layout-bento .lookup-panel { border-width: 2px; transform: rotate(0.5deg); }
.layout-bento .signal-art { transform: rotate(2deg); background: var(--secondary); }
.layout-bento .signal-art::before {
    content: "?";
    position: absolute;
    top: 8%;
    left: 12%;
    color: var(--on-secondary);
    font-family: var(--font-display);
    font-size: 15rem;
    font-weight: 900;
    line-height: 1;
    opacity: 0.16;
}
.layout-bento .signal-node { border-radius: 30% 70% 55% 45%; background: var(--surface); }
.layout-bento .signal-art strong { color: var(--on-secondary); }
.layout-bento .feature-grid { grid-template-columns: 1.35fr 0.8fr 1fr; align-items: end; }
.layout-bento .feature-1 { min-height: 320px; background: var(--primary); color: var(--on-primary); transform: rotate(-1deg); }
.layout-bento .feature-1 > span,
.layout-bento .feature-1 p { color: var(--on-primary); }
.layout-bento .feature-2 { min-height: 250px; transform: translateY(18px) rotate(1deg); }
.layout-bento .feature-3 { background: var(--surface-alt); transform: rotate(-0.7deg); }

/* Dazzl — centered prism */
.layout-prism .site-shell { width: min(100% - 36px, 1100px); }
.layout-prism .site-header { border-color: transparent; }
.layout-prism .home-grid {
    grid-template-areas:
        "art art art art art art art art art art art art"
        "hero hero hero hero hero hero hero hero hero hero hero hero"
        "lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup"
        "loading loading loading loading loading loading loading loading loading loading loading loading"
        "error error error error error error error error error error error error"
        "result result result result result result result result result result result result"
        "features features features features features features features features features features features features"
        "note note note note note note note note note note note note";
    padding-top: 30px;
}
.layout-prism .hero-copy { max-width: 880px; margin: -230px auto 0; text-align: center; z-index: 2; }
.layout-prism .hero-description { margin-inline: auto; }
.layout-prism .trust-note { justify-content: center; }
.layout-prism .signal-art { min-height: 370px; border: 0; background: radial-gradient(circle at center, var(--primary) 0, transparent 58%); opacity: 0.45; }
.layout-prism .signal-art::before,
.layout-prism .signal-art::after { content: ""; position: absolute; inset: 14% 30%; border: 1px solid var(--secondary); transform: skew(-18deg) rotate(45deg); }
.layout-prism .signal-art::after { inset: 24% 38%; border-color: var(--primary); transform: skew(18deg) rotate(45deg); }
.layout-prism .signal-art strong { display: none; }
.layout-prism .lookup-panel { max-width: 900px; width: 100%; margin: 28px auto 0; backdrop-filter: blur(18px); background: var(--surface-translucent); }
.layout-prism .feature-card { background: linear-gradient(145deg, var(--surface), var(--surface-alt)); }
.layout-prism .feature-card:nth-child(2) { transform: translateY(24px); }
.layout-prism .result-panel { background: linear-gradient(145deg, var(--surface), var(--surface-alt)); }

/* Genix — structured console */
.layout-console .home-grid {
    grid-template-areas:
        "hero hero hero hero hero art art art art art art art"
        "lookup lookup lookup lookup lookup art art art art art art art"
        "loading loading loading loading loading loading loading loading loading loading loading loading"
        "error error error error error error error error error error error error"
        "result result result result result result result result result result result result"
        "features features features features features features features features features features features features"
        "note note note note note note note note note note note note";
}
.layout-console .site-header,
.layout-console .lookup-panel,
.layout-console .signal-art,
.layout-console .feature-card,
.layout-console .result-panel { border-radius: 4px; }
.layout-console .hero-copy h1 { font-size: clamp(3rem, 6vw, 5.5rem); }
.layout-console .signal-art { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px; }
.layout-console .signal-art::before { content: "INPUT → RESOLVE → ORGANIZE → REVIEW"; position: absolute; top: 28px; left: 28px; color: var(--primary); font: 700 0.72rem/1 var(--font-mono); letter-spacing: 0.1em; }
.layout-console .signal-node { border-radius: 2px; box-shadow: 0 0 0 8px var(--surface); }
.layout-console .panel-index,
.layout-console .result-item span { font-family: var(--font-mono); }
.layout-console .feature-grid { gap: 0; border: 1px solid var(--border); }
.layout-console .feature-card { border: 0; border-right: 1px solid var(--border); }
.layout-console .feature-card:last-child { border-right: 0; }

/* Shrine — centered arch */
.layout-arch .site-shell { max-width: 980px; }
.layout-arch .site-header { justify-content: center; flex-direction: column; padding-block: 24px; }
.layout-arch .home-grid {
    grid-template-areas:
        "art art art art art art art art art art art art"
        "hero hero hero hero hero hero hero hero hero hero hero hero"
        "lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup"
        "loading loading loading loading loading loading loading loading loading loading loading loading"
        "error error error error error error error error error error error error"
        "result result result result result result result result result result result result"
        "features features features features features features features features features features features features"
        "note note note note note note note note note note note note";
    padding-top: 42px;
}
.layout-arch .signal-art { width: min(100%, 620px); min-height: 310px; margin-inline: auto; border-bottom: 0; border-radius: 310px 310px 0 0; background: transparent; }
.layout-arch .signal-art::before { content: ""; position: absolute; inset: 52px 80px 0; border: 1px solid var(--secondary); border-bottom: 0; border-radius: 240px 240px 0 0; }
.layout-arch .signal-art strong { right: 50%; transform: translateX(50%); }
.layout-arch .hero-copy { max-width: 760px; margin: -220px auto 0; text-align: center; z-index: 2; }
.layout-arch .hero-description { margin-inline: auto; }
.layout-arch .trust-note { justify-content: center; }
.layout-arch .lookup-panel { max-width: 760px; width: 100%; margin: 90px auto 0; box-shadow: none; }
.layout-arch .feature-grid { grid-template-columns: 1fr; gap: 0; }
.layout-arch .feature-card { min-height: 0; display: grid; grid-template-columns: 80px 0.8fr 1.3fr; gap: 24px; align-items: start; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.layout-arch .feature-card h3 { margin: 0; }
.layout-arch .result-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }

/* Covey — warm editorial flock */
.layout-flock .home-grid {
    grid-template-areas:
        "hero hero hero hero art art art art art art art art"
        "lookup lookup lookup lookup art art art art art art art art"
        "loading loading loading loading loading loading loading loading loading loading loading loading"
        "error error error error error error error error error error error error"
        "result result result result result result result result result result result result"
        "features features features features features features features features features features features features"
        "note note note note note note note note note note note note";
}
.layout-flock .hero-copy h1 { font-size: clamp(3.1rem, 6vw, 5.6rem); }
.layout-flock .signal-art { min-height: 560px; background: var(--surface); }
.layout-flock .signal-node { width: 68px; height: 42px; border-radius: 50% 8% 50% 8%; transform: rotate(34deg); }
.layout-flock .node-a { top: 18%; left: 18%; }
.layout-flock .node-b { top: 36%; right: 22%; }
.layout-flock .node-c { right: 48%; bottom: 24%; width: 54px; height: 34px; background: var(--primary); }
.layout-flock .signal-line { background: var(--secondary); opacity: 0.45; }
.layout-flock .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.layout-flock .result-item { min-height: 92px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.layout-flock .feature-grid { border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); gap: 0; }
.layout-flock .feature-card { min-height: 260px; border: 0; border-right: 1px solid var(--border); border-radius: 0; background: transparent; }
.layout-flock .feature-card:last-child { border-right: 0; }

/* Eider — polar continuous plane */
.layout-polar .site-header { border-color: var(--surface-alt); }
.layout-polar .home-grid {
    grid-template-areas:
        "hero hero hero hero hero hero hero art art art art art"
        "lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup"
        "loading loading loading loading loading loading loading loading loading loading loading loading"
        "error error error error error error error error error error error error"
        "result result result result result result result result result result result result"
        "features features features features features features features features features features features features"
        "note note note note note note note note note note note note";
}
.layout-polar .signal-art { min-height: 260px; border: 0; background: transparent; overflow: visible; }
.layout-polar .signal-art::before,
.layout-polar .signal-art::after { content: ""; position: absolute; inset: 10% 8%; border: 1px solid var(--primary); border-radius: 50%; opacity: 0.65; }
.layout-polar .signal-art::after { inset: 26% 24%; border-color: var(--secondary); }
.layout-polar .lookup-panel { border-width: 0 0 1px; border-radius: 0; padding-inline: 0; background: transparent; box-shadow: none; }
.layout-polar .lookup-form input { border-width: 0 0 1px; border-radius: 0; background: transparent; font-size: 1.25rem; }
.layout-polar .lookup-form button { border-radius: 0; }
.layout-polar .result-panel { border-radius: 0; box-shadow: none; }
.layout-polar .result-grid { grid-template-columns: 1fr; gap: 0; }
.layout-polar .result-item,
.layout-polar .result-wide { min-height: 76px; display: grid; grid-template-columns: 0.55fr 1.45fr; align-items: center; grid-column: auto; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.layout-polar .result-item strong { font-size: 1.2rem; }
.layout-polar .feature-grid { grid-template-columns: 1fr; gap: 0; }
.layout-polar .feature-card { min-height: 220px; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.layout-polar .feature-card h3 { margin-top: 54px; }

/* Grebe — ripple portal */
.layout-ripple .home-grid {
    grid-template-areas:
        "hero hero hero hero hero hero art art art art art art"
        "lookup lookup lookup lookup lookup lookup art art art art art art"
        "loading loading loading loading loading loading loading loading loading loading loading loading"
        "error error error error error error error error error error error error"
        "result result result result result result result result result result result result"
        "features features features features features features features features features features features features"
        "note note note note note note note note note note note note";
}
.layout-ripple .signal-art { min-height: 520px; border: 0; border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0 42px, var(--border) 43px 44px); }
.layout-ripple .signal-art::after { content: ""; position: absolute; inset: 33%; border-radius: 50%; background: var(--primary); box-shadow: 45px -70px 0 -18px var(--secondary); }
.layout-ripple .lookup-panel { border-radius: 999px; padding-inline: 38px; }
.layout-ripple .lookup-panel .panel-heading { display: none; }
.layout-ripple .result-panel { background: radial-gradient(circle at 80% 10%, var(--surface-alt), var(--surface) 48%); }
.layout-ripple .feature-grid { align-items: start; transform: skewY(-2deg); }
.layout-ripple .feature-card { transform: skewY(2deg); }
.layout-ripple .feature-2 { margin-top: 48px; background: var(--primary); color: var(--on-primary); }
.layout-ripple .feature-2 > span,
.layout-ripple .feature-2 p { color: var(--on-primary); }

/* Jery — friendly utility bento */
.layout-friendly .home-grid {
    grid-template-areas:
        "hero hero hero hero hero hero hero hero art art art art"
        "lookup lookup lookup lookup lookup lookup lookup lookup art art art art"
        "loading loading loading loading loading loading loading loading loading loading loading loading"
        "error error error error error error error error error error error error"
        "result result result result result result result result result result result result"
        "features features features features features features features features features features features features"
        "note note note note note note note note note note note note";
}
.layout-friendly .hero-copy,
.layout-friendly .lookup-panel { padding-left: clamp(26px, 5vw, 58px); }
.layout-friendly .signal-art { min-height: 430px; border-radius: 50% 50% 28px 28px; background: var(--secondary); }
.layout-friendly .signal-art::before { content: "j"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--surface); font: 900 18rem/1 var(--font-display); opacity: 0.25; }
.layout-friendly .signal-art strong { color: var(--surface); }
.layout-friendly .lookup-panel { box-shadow: 10px 10px 0 var(--surface-alt); }
.layout-friendly .result-grid { grid-template-columns: repeat(6, 1fr); }
.layout-friendly .result-item { grid-column: span 2; }
.layout-friendly .result-primary,
.layout-friendly .result-wide { grid-column: span 3; }
.layout-friendly .feature-grid { grid-template-columns: 1.2fr 0.8fr 1fr; }
.layout-friendly .feature-card { border-radius: calc(var(--radius) * 1.4); }
.layout-friendly .feature-1 { background: var(--surface-alt); }
.layout-friendly .feature-2 { background: var(--secondary); color: var(--on-secondary); }
.layout-friendly .feature-2 > span,
.layout-friendly .feature-2 p { color: var(--on-secondary); }

/* Xeme — dark network lens */
.layout-lens body {}
.layout-lens::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.layout-lens .site-shell { position: relative; }
.layout-lens .home-grid {
    grid-template-areas:
        "art art art art art art art art art art art art"
        "hero hero hero hero hero hero hero hero hero hero hero hero"
        "lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup"
        "loading loading loading loading loading loading loading loading loading loading loading loading"
        "error error error error error error error error error error error error"
        "result result result result result result result result result result result result"
        "features features features features features features features features features features features features"
        "note note note note note note note note note note note note";
    padding-top: 24px;
}
.layout-lens .signal-art { min-height: 230px; border: 0; background: transparent; }
.layout-lens .signal-art::before,
.layout-lens .signal-art::after { content: ""; position: absolute; top: 50%; left: 50%; width: 190px; height: 2px; background: var(--primary); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 28px var(--primary); }
.layout-lens .signal-art::after { transform: translate(-50%, -50%) rotate(-45deg); background: var(--secondary); }
.layout-lens .hero-copy { max-width: 900px; margin: -160px auto 0; text-align: center; z-index: 2; }
.layout-lens .hero-copy h1 { font-size: clamp(3rem, 7vw, 6rem); text-transform: uppercase; }
.layout-lens .hero-description { margin-inline: auto; }
.layout-lens .trust-note { justify-content: center; }
.layout-lens .lookup-panel { max-width: 940px; width: 100%; margin: 30px auto 0; border-radius: 8px; box-shadow: 0 0 0 1px var(--grid), 0 28px 80px rgba(0,0,0,0.35); }
.layout-lens .lookup-form input,
.layout-lens .lookup-form button,
.layout-lens .result-panel,
.layout-lens .result-item,
.layout-lens .feature-card { border-radius: 4px; }
.layout-lens .panel-index,
.layout-lens .result-item span,
.layout-lens .lookup-form input { font-family: var(--font-mono); }
.layout-lens .result-grid { grid-template-columns: repeat(2, 1fr); }
.layout-lens .result-item { min-height: 86px; display: grid; grid-template-columns: 0.6fr 1.4fr; align-items: center; }
.layout-lens .result-wide { grid-column: span 1; }
.layout-lens .feature-card { min-height: 220px; }

/* Yean — airy atlas */
.layout-atlas .site-shell { max-width: 1080px; }
.layout-atlas .site-header { border-bottom-style: double; }
.layout-atlas .home-grid {
    grid-template-areas:
        "hero hero hero hero hero hero hero hero hero hero hero hero"
        "lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup lookup"
        "art art art art art art art art art art art art"
        "loading loading loading loading loading loading loading loading loading loading loading loading"
        "error error error error error error error error error error error error"
        "result result result result result result result result result result result result"
        "features features features features features features features features features features features features"
        "note note note note note note note note note note note note";
}
.layout-atlas .hero-copy { max-width: 900px; margin-inline: auto; text-align: center; }
.layout-atlas .hero-copy h1 { font-weight: 500; letter-spacing: -0.045em; }
.layout-atlas .hero-description { margin-inline: auto; }
.layout-atlas .trust-note { justify-content: center; }
.layout-atlas .lookup-panel { max-width: 860px; width: 100%; margin: 30px auto 0; padding-inline: 0; border-width: 0 0 1px; border-radius: 0; background: transparent; box-shadow: none; }
.layout-atlas .lookup-form input { border-width: 0 0 1px; border-radius: 0; background: transparent; font-family: var(--font-display); font-size: 1.2rem; }
.layout-atlas .lookup-form button { border-radius: 0; }
.layout-atlas .signal-art { min-height: 180px; border-width: 1px 0; border-radius: 0; background: repeating-radial-gradient(ellipse at center, transparent 0 30px, var(--border) 31px 32px); }
.layout-atlas .signal-node,
.layout-atlas .signal-line { display: none; }
.layout-atlas .result-panel { border-width: 1px 0; border-radius: 0; background: transparent; box-shadow: none; }
.layout-atlas .result-grid { grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.layout-atlas .result-item,
.layout-atlas .result-wide { min-height: 92px; grid-column: auto; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.layout-atlas .feature-grid { gap: 48px; }
.layout-atlas .feature-card { min-height: 0; padding: 34px 0; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.layout-atlas .feature-card h3 { margin-top: 90px; font-weight: 500; }

@media (max-width: 900px) {
    .home-grid,
    .layout-bento .home-grid,
    .layout-prism .home-grid,
    .layout-console .home-grid,
    .layout-arch .home-grid,
    .layout-flock .home-grid,
    .layout-polar .home-grid,
    .layout-ripple .home-grid,
    .layout-friendly .home-grid,
    .layout-lens .home-grid,
    .layout-atlas .home-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "hero" "lookup" "art" "loading" "error" "result" "features" "note";
    }

    .hero-copy,
    .layout-prism .hero-copy,
    .layout-arch .hero-copy,
    .layout-lens .hero-copy {
        margin: 0;
        text-align: left;
    }

    .layout-prism .hero-description,
    .layout-arch .hero-description,
    .layout-lens .hero-description {
        margin-left: 0;
    }

    .layout-prism .trust-note,
    .layout-arch .trust-note,
    .layout-lens .trust-note {
        justify-content: flex-start;
    }

    .signal-art,
    .layout-flock .signal-art,
    .layout-ripple .signal-art {
        min-height: 300px;
    }

    .layout-arch .signal-art {
        order: 3;
        min-height: 260px;
    }

    .layout-arch .lookup-panel,
    .layout-prism .lookup-panel,
    .layout-lens .lookup-panel {
        margin-top: 0;
    }

    .result-grid,
    .layout-friendly .result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .layout-friendly .result-item,
    .layout-friendly .result-primary,
    .layout-friendly .result-wide {
        grid-column: auto;
    }

    .feature-grid,
    .layout-bento .feature-grid,
    .layout-friendly .feature-grid {
        grid-template-columns: 1fr;
    }

    .layout-bento .feature-card,
    .layout-prism .feature-card,
    .layout-ripple .feature-card {
        min-height: 230px;
        margin: 0;
        transform: none;
    }

    .method-note {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .split-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .site-shell {
        width: min(100% - 24px, 1200px);
    }

    .site-header {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        padding-block: 18px;
    }

    .site-header nav {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .site-header nav a {
        font-size: 0.82rem;
    }

    .home-grid {
        gap: 18px;
        padding-top: 50px;
    }

    .hero-copy h1,
    .page-hero h1,
    .not-found h1 {
        font-size: clamp(2.8rem, 15vw, 4.6rem);
    }

    .panel-heading,
    .section-heading,
    .result-heading,
    .map-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .lookup-form {
        grid-template-columns: 1fr;
    }

    .lookup-form button {
        width: 100%;
    }

    .lookup-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .signal-art,
    .layout-flock .signal-art,
    .layout-ripple .signal-art {
        min-height: 240px;
    }

    .result-grid,
    .layout-flock .result-grid,
    .layout-lens .result-grid,
    .layout-atlas .result-grid {
        grid-template-columns: 1fr;
    }

    .result-wide {
        grid-column: auto;
    }

    .layout-polar .result-item,
    .layout-lens .result-item {
        grid-template-columns: 1fr;
    }

    .layout-arch .feature-card {
        grid-template-columns: 50px 1fr;
    }

    .layout-arch .feature-card p {
        grid-column: 2;
    }

    .feature-grid,
    .step-grid {
        grid-template-columns: 1fr;
    }

    .feature-card,
    .step-grid article {
        min-height: 220px;
    }

    .site-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-meta {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

