/* roulang page: index */
:root {
      --color-primary: #24231e;
      --color-primary-dark: #171713;
      --color-accent: #c69a35;
      --color-accent-soft: #ead9a9;
      --color-bg: #f5f2eb;
      --color-surface: #fffdf8;
      --color-surface-dark: #302f28;
      --color-text: #25241f;
      --color-muted: #706d63;
      --color-border: #d9d4c8;
      --color-border-dark: #5b584e;
      --color-olive: #6d7054;
      --color-error: #a34735;
      --radius-sm: 6px;
      --radius-md: 12px;
      --shadow-soft: 0 12px 34px rgba(36,35,30,.08);
      --container-width: 1240px;
      --section-gap: 112px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--color-bg);
      color: var(--color-text);
      font-family: system-ui, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 16px;
      line-height: 1.8;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; transition: color .22s ease, border-color .22s ease, background-color .22s ease, transform .22s ease; }
    a:hover { color: var(--color-accent); }
    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 3px solid rgba(198,154,53,.65); outline-offset: 3px; }
    .container { width: min(var(--container-width), calc(100% - 48px)); margin: 0 auto; }
    .section { padding: var(--section-gap) 0; }
    .section--tight { padding: 76px 0; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--color-olive);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 25px; height: 2px; background: var(--color-accent); }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { color: var(--color-primary); line-height: 1.2; letter-spacing: 0; }
    h1 { margin-bottom: 25px; font-size: clamp(42px, 6vw, 76px); font-weight: 900; }
    h2 { margin-bottom: 20px; font-size: clamp(32px, 4vw, 50px); font-weight: 850; }
    h3 { margin-bottom: 12px; font-size: 22px; font-weight: 800; }
    .section-lead { max-width: 690px; margin-bottom: 0; color: var(--color-muted); font-size: 17px; }
    .highlight { color: var(--color-accent); }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; }

    .site-header {
      position: sticky;
      z-index: 20;
      top: 0;
      border-bottom: 1px solid transparent;
      background: rgba(245,242,235,.96);
      transition: border-color .25s ease, box-shadow .25s ease;
    }
    .site-header.is-scrolled { border-color: var(--color-border); box-shadow: 0 5px 20px rgba(36,35,30,.06); }
    .nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: var(--color-primary); font-size: 18px; font-weight: 900; line-height: 1.15; }
    .brand-mark { width: 34px; height: 34px; flex: 0 0 34px; border: 2px solid var(--color-primary); position: relative; }
    .brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--color-accent); }
    .brand-mark::before { width: 13px; height: 2px; top: 9px; left: 8px; }
    .brand-mark::after { width: 2px; height: 13px; top: 8px; left: 15px; }
    .nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
    .nav-links a { position: relative; color: var(--color-muted); font-size: 14px; font-weight: 700; }
    .nav-links a::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: right; transition: transform .22s ease; }
    .nav-links a:hover, .nav-links a.active { color: var(--color-primary); }
    .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }
    .nav-status { padding: 5px 9px; border: 1px solid var(--color-border); color: var(--color-olive); font-size: 11px; font-weight: 800; }
    .menu-toggle { display: none; border: 1px solid var(--color-border); background: transparent; color: var(--color-primary); padding: 8px 11px; }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 10px 19px;
      border: 1px solid var(--color-primary);
      border-radius: var(--radius-sm);
      background: var(--color-primary);
      color: #fffdf8;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.2;
      transition: transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .button:hover { transform: translateY(-2px); background: var(--color-primary-dark); color: #fffdf8; box-shadow: 0 7px 16px rgba(36,35,30,.15); }
    .button--accent { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-primary); }
    .button--accent:hover { border-color: #b28525; background: #b28525; color: var(--color-primary); }
    .button--outline { background: transparent; color: var(--color-primary); }
    .button--outline:hover { background: var(--color-primary); color: #fffdf8; }
    .button--small { min-height: 38px; padding: 7px 13px; font-size: 13px; }
    .button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

    .hero { position: relative; padding: 98px 0 85px; background: var(--color-primary); color: #f7f2e8; overflow: hidden; }
    .hero::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px); background-size: 58px 58px; }
    .hero .container { position: relative; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); gap: 70px; align-items: center; }
    .hero h1 { max-width: 780px; color: #fffaf0; }
    .hero-copy { max-width: 650px; color: #c9c4b7; font-size: 18px; }
    .hero .eyebrow { color: var(--color-accent-soft); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 31px; }
    .hero .button--outline { border-color: #827e70; color: #fffaf0; }
    .hero .button--outline:hover { border-color: #fffaf0; background: #fffaf0; color: var(--color-primary); }
    .hero-points { display: flex; flex-wrap: wrap; gap: 20px; color: #d3cec0; font-size: 13px; }
    .hero-points span { display: inline-flex; align-items: center; gap: 8px; }
    .hero-points i { width: 7px; height: 7px; display: inline-block; background: var(--color-accent); }
    .hero-display { min-height: 405px; position: relative; border: 1px solid #6d695d; background: #2d2c26; padding: 27px; }
    .display-top { display: flex; justify-content: space-between; color: #aca79a; font-size: 11px; }
    .display-word { margin: 58px 0 30px; color: #fffaf0; font-size: clamp(45px, 6vw, 76px); font-weight: 900; line-height: 1.02; word-break: break-all; }
    .display-word span { color: var(--color-accent); }
    .display-footer { display: flex; align-items: end; justify-content: space-between; border-top: 1px solid #565248; padding-top: 18px; color: #b4afa1; font-size: 12px; }
    .display-stamp { width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid var(--color-accent); border-radius: 50%; color: var(--color-accent); text-align: center; font-size: 10px; line-height: 1.35; }
    .age-note { margin-top: 24px; border-left: 3px solid var(--color-accent); padding: 11px 15px; background: rgba(255,255,255,.06); color: #d5d0c3; font-size: 13px; }

    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 42px; }
    .section-head > div:first-child { max-width: 720px; }
    .section-index { color: var(--color-muted); font-size: 13px; }

    .entry-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 44px; }
    .entry-nav { border-top: 1px solid var(--color-border); }
    .entry-nav a { display: flex; gap: 12px; border-bottom: 1px solid var(--color-border); padding: 17px 8px; color: var(--color-muted); font-weight: 750; }
    .entry-nav a span { color: var(--color-accent); font-family: monospace; }
    .entry-nav a:hover { padding-left: 15px; color: var(--color-primary); background: #ece8de; }
    .entry-main { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
    .entry-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: 27px; box-shadow: var(--shadow-soft); transition: border-color .22s ease, transform .22s ease; }
    .entry-card:hover { border-color: var(--color-accent); transform: translateY(-4px); }
    .entry-card--large { grid-row: span 2; min-height: 320px; background: var(--color-primary); color: #e7e1d4; }
    .entry-card--large h3 { color: #fffaf0; font-size: 30px; }
    .entry-card--large p { color: #c2bdb0; }
    .entry-card p { color: var(--color-muted); font-size: 14px; }
    .entry-card--large .card-link { color: var(--color-accent-soft); }
    .card-link { display: inline-flex; align-items: center; gap: 8px; color: var(--color-primary); font-size: 13px; font-weight: 850; }
    .card-link::after { content: "↗"; font-size: 17px; }
    .tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0; }
    .tag { display: inline-flex; padding: 3px 9px; border: 1px solid var(--color-border); border-radius: 20px; color: var(--color-muted); font-size: 11px; line-height: 1.5; }
    .entry-card--large .tag { border-color: #676255; color: #c8c0ac; }
    .card-number { margin-bottom: 35px; color: var(--color-accent); font-family: monospace; font-size: 13px; }

    .stats-band { background: #e8e3d7; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
    .stat { min-height: 156px; border-right: 1px solid var(--color-border); padding: 28px 27px; }
    .stat:first-child { border-left: 1px solid var(--color-border); }
    .stat strong { display: block; margin-bottom: 8px; color: var(--color-primary); font-family: ui-monospace, monospace; font-size: 38px; line-height: 1; }
    .stat b { display: block; margin-bottom: 4px; font-size: 14px; }
    .stat span { color: var(--color-muted); font-size: 12px; }

    .sample-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; }
    .sample-feature { min-height: 390px; position: relative; display: flex; flex-direction: column; justify-content: end; overflow: hidden; border-radius: var(--radius-md); background: #4c503c; color: #fffdf8; padding: 34px; }
    .sample-feature::before { content: ""; position: absolute; width: 360px; height: 360px; top: -80px; right: -40px; border: 1px solid rgba(234,217,169,.45); transform: rotate(31deg); }
    .sample-feature::after { content: "01"; position: absolute; top: 24px; right: 29px; color: rgba(255,255,255,.45); font: 600 70px/1 ui-monospace, monospace; }
    .sample-feature > * { position: relative; max-width: 560px; }
    .sample-feature h3 { color: #fffdf8; font-size: 31px; }
    .sample-feature p { color: #e1dece; }
    .sample-side { display: grid; gap: 20px; }
    .sample-item { border-bottom: 1px solid var(--color-border); padding: 22px 0; }
    .sample-item:first-child { border-top: 1px solid var(--color-border); }
    .sample-item h3 { font-size: 20px; }
    .sample-item p { margin-bottom: 8px; color: var(--color-muted); font-size: 14px; }

    .path { background: var(--color-surface); }
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; margin-top: 48px; }
    .steps::before { content: ""; position: absolute; top: 22px; right: 13%; left: 13%; border-top: 1px solid var(--color-border); }
    .step { position: relative; padding: 0 28px; text-align: center; }
    .step-no { width: 45px; height: 45px; display: grid; place-items: center; position: relative; z-index: 1; margin: 0 auto 23px; border: 1px solid var(--color-accent); border-radius: 50%; background: var(--color-surface); color: var(--color-primary); font-family: monospace; font-weight: 800; }
    .step p { color: var(--color-muted); font-size: 14px; }

    .faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 75px; }
    .faq-list { border-top: 1px solid var(--color-border); }
    .faq-list details { border-bottom: 1px solid var(--color-border); }
    .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; color: var(--color-primary); cursor: pointer; font-weight: 800; list-style: none; }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after { content: "+"; color: var(--color-accent); font-size: 24px; font-weight: 400; }
    .faq-list details[open] summary::after { content: "−"; }
    .faq-answer { max-width: 670px; padding: 0 35px 22px 0; color: var(--color-muted); font-size: 14px; }

    .contact { background: var(--color-primary); color: #eee8dc; }
    .contact h2 { color: #fffaf0; }
    .contact .section-lead { color: #c7c1b4; }
    .contact-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: start; }
    .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
    .field--full { grid-column: 1 / -1; }
    .contact-form label { display: block; margin-bottom: 6px; color: #ded8cb; font-size: 13px; font-weight: 700; }
    .contact-form input, .contact-form textarea, .contact-form select { width: 100%; border: 1px solid #625e53; border-radius: var(--radius-sm); background: #302f29; color: #fffaf0; padding: 11px 13px; box-shadow: none; }
    .contact-form textarea { min-height: 120px; resize: vertical; }
    .contact-form input::placeholder, .contact-form textarea::placeholder { color: #999487; }
    .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(198,154,53,.18); }
    .consent { display: flex !important; align-items: start; gap: 8px; color: #aaa497 !important; font-size: 12px !important; font-weight: 400 !important; }
    .consent input { width: auto; margin-top: 5px; accent-color: var(--color-accent); }
    .form-message { display: none; grid-column: 1 / -1; border-left: 3px solid var(--color-accent); padding: 10px 14px; color: #e5d39b; font-size: 13px; }
    .form-message.is-visible { display: block; }

    .site-footer { padding: 56px 0 25px; background: #1b1b17; color: #bdb8aa; }
    .footer-grid { display: grid; grid-template-columns: 1.4fr .7fr .9fr 1fr; gap: 35px; padding-bottom: 45px; }
    .site-footer .brand { color: #fffaf0; margin-bottom: 16px; }
    .footer-title { margin-bottom: 14px; color: #e7e0d1; font-size: 13px; font-weight: 800; }
    .footer-copy, .footer-links a, .footer-note { color: #999487; font-size: 13px; }
    .footer-links { display: grid; gap: 7px; }
    .footer-links a:hover { color: var(--color-accent-soft); }
    .footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #3b3932; padding-top: 20px; color: #777368; font-size: 12px; }

    .age-modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(23,23,19,.78); }
    .age-modal.is-hidden { display: none; }
    .age-dialog { width: min(480px, 100%); border: 1px solid #706953; background: var(--color-surface); padding: 34px; box-shadow: 0 25px 70px rgba(0,0,0,.25); }
    .age-dialog h2 { font-size: 29px; }
    .age-dialog p { color: var(--color-muted); font-size: 14px; }
    .age-actions { display: flex; gap: 10px; margin-top: 25px; }
    .age-actions .button { flex: 1; }

    @media (max-width: 1024px) {
      :root { --section-gap: 86px; }
      .hero-grid { grid-template-columns: 1fr .82fr; gap: 35px; }
      .entry-layout { grid-template-columns: 175px minmax(0, 1fr); gap: 24px; }
      .contact-grid { gap: 40px; }
      .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 36px, var(--container-width)); }
      .nav-wrap { min-height: 68px; }
      .menu-toggle { display: block; }
      .nav-links { display: none; position: absolute; top: 68px; right: 18px; left: 18px; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--color-border); background: var(--color-surface); padding: 8px; box-shadow: var(--shadow-soft); }
      .nav-links.is-open { display: flex; }
      .nav-links a { padding: 11px 12px; }
      .nav-status { margin: 8px 12px; text-align: center; }
      .hero { padding: 70px 0 60px; }
      .hero-grid, .entry-layout, .sample-grid, .faq-layout, .contact-grid { grid-template-columns: 1fr; }
      .hero-display { min-height: 310px; }
      .display-word { margin: 35px 0 25px; font-size: clamp(39px, 12vw, 64px); }
      .section-head { display: block; margin-bottom: 29px; }
      .section-index { display: block; margin-top: 12px; }
      .entry-main { grid-template-columns: 1fr; }
      .entry-card--large { grid-row: auto; min-height: 280px; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
      .stat { border-bottom: 1px solid var(--color-border); }
      .stat:nth-child(odd) { border-left: 1px solid var(--color-border); }
      .stat:nth-child(even) { border-right: 1px solid var(--color-border); }
      .sample-feature { min-height: 320px; }
      .steps { grid-template-columns: 1fr; gap: 34px; }
      .steps::before { top: 22px; bottom: 22px; left: calc(50% - 1px); right: auto; border-top: 0; border-left: 1px solid var(--color-border); }
      .step { padding: 0 15px; }
      .contact-form { grid-template-columns: 1fr; }
      .field--full { grid-column: auto; }
      .form-message { grid-column: auto; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 520px) {
      :root { --section-gap: 70px; }
      .container { width: calc(100% - 32px); }
      .brand { max-width: 220px; font-size: 15px; }
      .brand-mark { width: 29px; height: 29px; flex-basis: 29px; }
      h1 { font-size: 43px; }
      h2 { font-size: 34px; }
      .hero-copy { font-size: 16px; }
      .hero-actions, .age-actions { flex-direction: column; }
      .hero-actions .button { width: 100%; }
      .stats-grid { grid-template-columns: 1fr; }
      .stat, .stat:nth-child(odd), .stat:nth-child(even) { border-right: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { display: block; }
      .footer-bottom span { display: block; margin-top: 8px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }

/* roulang page: category1 */
:root{
      --color-primary:#24231e;
      --color-primary-dark:#171713;
      --color-accent:#c69a35;
      --color-accent-soft:#ead9a9;
      --color-bg:#f5f2eb;
      --color-surface:#fffdf8;
      --color-surface-dark:#302f28;
      --color-text:#25241f;
      --color-muted:#706d63;
      --color-border:#d9d4c8;
      --color-border-dark:#5b584e;
      --color-olive:#6d7054;
      --color-error:#a34735;
      --radius-sm:6px;
      --radius-md:12px;
      --shadow-soft:0 12px 34px rgba(36,35,30,.08);
      --container-width:1240px;
      --section-gap:96px;
    }
    *,*:before,*:after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:system-ui,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.8;overflow-x:hidden}
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{font-weight:900;line-height:1.2;letter-spacing:-.045em}
    h1{font-size:clamp(42px,6vw,72px);margin-bottom:24px}
    h2{font-size:clamp(31px,4vw,48px);margin-bottom:18px}
    h3{font-size:22px;margin-bottom:10px}
    a{color:inherit;text-decoration:none;transition:color .22s ease,background-color .22s ease,border-color .22s ease,transform .22s ease}
    a:hover{color:var(--color-accent)}
    img{display:block;max-width:100%}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}
    .container{width:min(var(--container-width),calc(100% - 48px));margin:0 auto}
    .section{padding:var(--section-gap) 0}
    .section--tight{padding:64px 0}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--color-olive);font-size:12px;font-weight:800;letter-spacing:.08em}
    .eyebrow:before{content:"";width:25px;height:2px;background:var(--color-accent)}
    .section-lead{max-width:700px;color:var(--color-muted);font-size:17px}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:40px}
    .section-head h2{margin-bottom:0}
    .site-header{position:sticky;z-index:20;top:0;border-bottom:1px solid transparent;background:rgba(245,242,235,.96);transition:.25s ease}
    .site-header.is-scrolled{border-color:var(--color-border);box-shadow:0 5px 20px rgba(36,35,30,.06)}
    .nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:11px;min-width:0;color:var(--color-primary);font-size:18px;font-weight:900;line-height:1.15}
    .brand-mark{width:34px;height:34px;flex:0 0 34px;border:2px solid var(--color-primary);position:relative}
    .brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--color-accent)}
    .brand-mark:before{width:13px;height:2px;top:9px;left:8px}
    .brand-mark:after{width:2px;height:13px;top:8px;left:15px}
    .nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
    .nav-links a{position:relative;color:var(--color-muted);font-size:14px;font-weight:700}
    .nav-links a:after{content:"";position:absolute;right:0;bottom:-8px;left:0;height:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:right;transition:transform .22s ease}
    .nav-links a:hover,.nav-links a.active{color:var(--color-primary)}
    .nav-links a:hover:after,.nav-links a.active:after{transform:scaleX(1);transform-origin:left}
    .nav-status{padding:5px 9px;border:1px solid var(--color-border);color:var(--color-olive);font-size:11px;font-weight:800}
    .button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 19px;border:1px solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-primary);color:#fffdf8;font-size:14px;font-weight:800;line-height:1.2;transition:.22s ease}
    .button:hover{transform:translateY(-2px);background:var(--color-primary-dark);color:#fffdf8;box-shadow:0 7px 16px rgba(36,35,30,.15)}
    .button--accent{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-primary)}
    .button--accent:hover{border-color:#b28525;background:#b28525;color:var(--color-primary)}
    .button--outline{background:transparent;color:var(--color-primary)}
    .button--outline:hover{background:var(--color-primary);color:#fffdf8}
    .button--small{min-height:38px;padding:7px 13px;font-size:13px}
    .hero{position:relative;padding:82px 0 76px;background:var(--color-primary);color:#f7f2e8;overflow:hidden}
    .hero:before{content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.17) 1px,transparent 1px);background-size:58px 58px}
    .hero .container{position:relative}
    .crumbs{display:flex;gap:10px;align-items:center;color:#bdb7a9;font-size:13px;margin-bottom:35px}
    .crumbs a:hover{color:var(--color-accent-soft)}
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:70px;align-items:center}
    .hero h1{max-width:760px;color:#fffaf0}
    .hero-copy{max-width:670px;color:#c9c4b7;font-size:18px}
    .hero .eyebrow{color:var(--color-accent-soft)}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:29px 0 0}
    .hero .button--outline{border-color:#827e70;color:#fffaf0}
    .hero .button--outline:hover{border-color:#fffaf0;background:#fffaf0;color:var(--color-primary)}
    .hero-panel{border:1px solid #686358;background:#302f28;padding:28px;min-height:300px}
    .panel-top{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #59554a;padding-bottom:18px;margin-bottom:28px}
    .panel-index{font:800 58px/1 monospace;color:var(--color-accent)}
    .panel-label{color:#bdb7a9;font-size:12px;font-weight:800}
    .panel-title{font-size:25px;font-weight:900;color:#fffaf0;line-height:1.3}
    .panel-tags,.tag-list{display:flex;flex-wrap:wrap;gap:8px}
    .tag{display:inline-flex;padding:5px 10px;border:1px solid var(--color-border);border-radius:99px;color:var(--color-muted);font-size:12px;line-height:1.2}
    .hero .tag{border-color:#666156;color:#d4cdbd}
    .panel-note{margin:28px 0 0;padding-top:18px;border-top:1px solid #59554a;color:#bdb7a9;font-size:13px}
    .filter-bar{border-bottom:1px solid var(--color-border);border-top:1px solid var(--color-border);background:var(--color-surface)}
    .filter-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 0}
    .filter-label{font-weight:900;font-size:14px;margin-right:8px}
    .filter-button{border:1px solid var(--color-border);background:transparent;color:var(--color-muted);padding:8px 14px;border-radius:var(--radius-sm);font-size:13px;transition:.2s}
    .filter-button:hover,.filter-button.is-active{border-color:var(--color-primary);background:var(--color-primary);color:#fffdf8}
    .filter-button:disabled{opacity:.45;cursor:not-allowed}
    .index-list{border-top:1px solid var(--color-border)}
    .index-item{display:grid;grid-template-columns:72px minmax(0,1fr) 190px;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid var(--color-border);transition:.25s}
    .index-item:hover{padding-left:12px;padding-right:12px;background:#eeeae0}
    .item-number{font:800 28px/1 monospace;color:var(--color-accent)}
    .item-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
    .item-status{color:var(--color-olive);font-size:12px;font-weight:800}
    .item-title{font-size:25px;margin-bottom:8px}
    .item-copy{max-width:720px;margin-bottom:13px;color:var(--color-muted)}
    .item-action{text-align:right}
    .item-action a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:900}
    .item-action a:after{content:"→";font-size:19px;color:var(--color-accent)}
    .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--color-border);border:1px solid var(--color-border)}
    .compare-card{background:var(--color-surface);padding:34px}
    .compare-card.dark{background:var(--color-surface-dark);color:#f8f2e7}
    .compare-card.dark p{color:#cbc5b7}
    .compare-card p{color:var(--color-muted)}
    .compare-list{padding:0;margin:22px 0 0;list-style:none}
    .compare-list li{padding:10px 0;border-top:1px solid var(--color-border);font-size:14px}
    .dark .compare-list li{border-color:#565248}
    .tag-area{display:flex;flex-wrap:wrap;gap:11px}
    .tag-area a{padding:10px 15px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-sm);font-size:14px;font-weight:700}
    .tag-area a:hover{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-primary);transform:translateY(-2px)}
    .faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:72px}
    .accordion{margin:0;border:0;background:transparent}
    .accordion-item{border:0;border-top:1px solid var(--color-border)}
    .accordion-title{padding:21px 42px 21px 0;border:0;background:transparent;color:var(--color-text);font-weight:800;font-size:16px}
    .accordion-title:before{right:5px;color:var(--color-accent)}
    .accordion-content{padding:0 35px 22px 0;border:0;background:transparent;color:var(--color-muted);font-size:15px}
    .cta{padding:66px 0;background:var(--color-accent)}
    .cta-grid{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta h2{max-width:660px;margin-bottom:0;color:var(--color-primary)}
    .cta p{max-width:620px;margin:10px 0 0;color:#514522}
    .cta .button{background:var(--color-primary);border-color:var(--color-primary)}
    .cta .button:hover{background:var(--color-primary-dark)}
    .site-footer{padding:62px 0 22px;background:var(--color-primary);color:#e7e0d2}
    .footer-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr 1fr;gap:40px;padding-bottom:45px;border-bottom:1px solid var(--color-border-dark)}
    .site-footer .brand{color:#fffaf0}
    .site-footer .brand-mark{border-color:#fffaf0}
    .footer-copy,.footer-note{max-width:260px;color:#aaa496;font-size:13px;margin:18px 0 0}
    .footer-title{margin-bottom:15px;color:var(--color-accent-soft);font-size:12px;font-weight:900;letter-spacing:.08em}
    .footer-links{display:grid;gap:8px;color:#c3bdae;font-size:13px}
    .footer-links a:hover{color:var(--color-accent-soft)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;color:#8e897d;font-size:12px}
    .age-dialog{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(23,23,19,.78)}
    .age-dialog.is-visible{display:flex}
    .age-box{width:min(480px,100%);padding:34px;background:var(--color-surface);border-top:4px solid var(--color-accent);box-shadow:var(--shadow-soft)}
    .age-box h2{font-size:30px}
    .age-box p{color:var(--color-muted);font-size:14px}
    .age-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
    @media(max-width:1024px){
      .nav-links{gap:16px}.hero-grid{gap:38px}.footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:768px){
      :root{--section-gap:70px}
      .container{width:min(100% - 36px,var(--container-width))}
      .nav-wrap{min-height:68px}.nav-links{gap:14px}.nav-status{display:none}
      .nav-links a:not(.button){font-size:13px}
      .hero{padding:60px 0}.hero-grid,.faq-layout{grid-template-columns:1fr;gap:38px}
      .hero-panel{min-height:0}.section-head{display:block}.section-head .section-lead{margin-top:14px}
      .index-item{grid-template-columns:48px minmax(0,1fr);gap:17px;padding:25px 0}
      .item-action{grid-column:2;text-align:left}
      .compare-grid{grid-template-columns:1fr}
      .cta-grid{display:block}.cta .button{margin-top:22px}
    }
    @media(max-width:520px){
      h1{font-size:43px}.hero-copy{font-size:16px}.hero-actions .button{width:100%}
      .filter-inner{align-items:flex-start}.filter-button{padding:7px 10px}
      .item-title{font-size:21px}.footer-grid{grid-template-columns:1fr;gap:28px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
    }
    @media(prefers-reduced-motion:reduce){
      *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
    }