*{box-sizing:border-box}
    html{color-scheme:dark}
    body{margin:0;background:#1d1c19;color:#f5f0e7;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.65}
    main{max-width:980px;margin:0 auto;padding:24px 22px 48px}
    a{color:#ff9e54;text-underline-offset:4px}
    a:hover{color:#ffb578}
    a:focus-visible,summary:focus-visible{outline:3px solid #ff9e54;outline-offset:5px;border-radius:5px}
    .crumbs{font-size:.9rem;color:#beb6aa;margin-bottom:38px}
    .crumbs a{text-decoration:none}
    .crumbs span{margin:0 8px;color:#beb6aa}
    .hero{padding:16px 0 32px;max-width:760px}
    .eyebrow{display:inline-flex;align-items:center;gap:10px;color:#ff9e54;font-weight:700;font-size:.85rem;letter-spacing:.08em}
    .eyebrow svg{width:21px;height:21px;fill:currentColor;flex-shrink:0}
    .age{border:1px solid #ffffff1f;border-radius:999px;padding:2px 9px;letter-spacing:0;color:#beb6aa}
    h1{font-size:clamp(2rem,5.5vw,3.4rem);line-height:1.12;letter-spacing:-.025em;margin:22px 0}
    h2{font-size:clamp(1.35rem,3vw,1.75rem);line-height:1.3;margin:0 0 16px}
    h3{font-size:1.1rem;line-height:1.4;margin:10px 0}
    p{margin:0 0 16px;color:#beb6aa}
    .lead{font-size:1.12rem;max-width:690px}
    .cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;margin:8px 0 12px;padding:13px 24px;border:1px solid #ff9e54;border-radius:14px;background:#ff9e54;color:#251a10;font-weight:800;text-decoration:none;line-height:1.4;text-align:center}
    .cta:hover{background:#ffb578;color:#251a10;text-decoration:none}
    .note{font-size:.9rem;color:#beb6aa}
    .section{padding:32px 0;border-top:1px solid #ffffff1f}
    .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
    .step{padding:22px;border:1px solid #ffffff1f;border-radius:18px;background:#2a2823}
    .step p{margin-bottom:0;font-size:.95rem}
    .number{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:#35322c;color:#ff9e54;font-weight:800}
    .features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
    .features h3{color:#f5f0e7}
    .features p{margin-bottom:0}
    .comparison{padding:24px;border:1px solid #ffffff1f;border-radius:18px;background:#2a2823}
    .comparison h2{font-size:1.45rem}
    details{border-bottom:1px solid #ffffff1f;padding:18px 0}
    summary{font-weight:700;cursor:pointer;color:#f5f0e7}
    details p{margin:14px 0 0}
    ul{margin:0;padding-left:22px;color:#beb6aa}
    li{margin:8px 0}
    .start{padding-top:32px}
    .related{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:14px;font-size:.95rem}
    footer{padding-top:32px;margin-top:32px;border-top:1px solid #ffffff1f;font-size:.88rem;color:#beb6aa}
    footer p{margin-bottom:8px}
    @media(max-width:680px){main{padding:20px 18px 36px}.crumbs{margin-bottom:24px}.steps,.features{grid-template-columns:1fr}.hero{padding-top:4px}.step{padding:20px}.section{padding:28px 0}.comparison{padding:20px}}
    .skip-link{position:absolute;left:16px;top:8px;transform:translateY(-180%);padding:10px 16px;background:#ff9e54;color:#251a10;z-index:1}
    .skip-link:focus{transform:none}
    .language{margin-top:18px;font-size:.95rem}
    .examples{padding-left:22px}
    .examples li{margin:16px 0}
    .cta{max-width:100%;overflow-wrap:anywhere}
    .cta:focus-visible{outline:3px solid #f5f0e7;outline-offset:4px}
    html[data-ruletta-visual="graphite"] a:is(.cta,.skip-link){color:#251a10!important;-webkit-text-fill-color:#251a10!important}
    html[data-ruletta-visual="graphite"] p.note{background:transparent!important;border:0!important}