.hero { padding: 4.5rem 0; background: linear-gradient(145deg, #0f1115 42%, #171a21 100%); }
.detection-panel { display: grid; gap: .6rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: .7rem; padding: 1rem; background: var(--card-secondary); color: var(--text-muted); }.detection-panel p { margin: 0; color: var(--text); }.detection-panel small { color: var(--text-muted); }.detection-panel .button { justify-self: start; min-height: 40px; padding: .45rem .7rem; }.field-error { min-height: 1.15rem; color: var(--error); font-size: .78rem; font-weight: 600; }.field [aria-invalid="true"] { border-color: var(--error); }.results { padding-top: 2.5rem; }.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }.result-card { display: grid; min-height: 118px; align-content: center; gap: .25rem; border: 1px solid var(--border); border-radius: .65rem; padding: 1rem; background: var(--card-secondary); }.result-card span, .result-card small { color: var(--text-muted); font-size: .8rem; }.result-card strong { color: var(--primary); font-size: 1.85rem; line-height: 1; }.result-meta { display: grid; gap: 1rem; margin-top: 1.25rem; color: var(--text-muted); }.result-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }.app-status { display: block; margin: 1rem 0 0; border-radius: .45rem; padding: .75rem 1rem; background: var(--card-secondary); color: var(--text); }.app-status[data-type="error"] { border-left: 3px solid var(--error); }.app-status[data-type="loading"] { border-left: 3px solid var(--primary); }.app-status:empty, .app-status[hidden] { display: none; } @media (min-width: 768px) { .result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero-layout { display: grid; align-items: center; gap: 3rem; }
.hero-copy { max-width: 690px; }
.hero-copy > p:not(.eyebrow) { max-width: 58ch; color: var(--text-muted); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero-visual { position: relative; min-height: 290px; border: 1px solid var(--border); border-radius: 1.1rem; background: var(--card); overflow: hidden; }
.hero-visual::before { position: absolute; inset: 12% 12%; border: 1px solid var(--border); border-radius: .8rem; background: var(--card-secondary); content: ""; }
.visual-panel { position: absolute; top: 23%; left: 20%; display: grid; gap: .7rem; width: 60%; border: 1px solid #48505f; border-radius: .65rem; padding: 1rem; background: #171a21; box-shadow: 18px 18px 0 #0f1115; }
.visual-panel span { display: block; height: 9px; border-radius: 999px; background: #313744; }.visual-panel span:nth-child(1) { width: 45%; background: var(--primary); }.visual-panel span:nth-child(3) { width: 65%; }.visual-ring { position: absolute; right: 10%; bottom: 10%; width: 76px; aspect-ratio: 1; border: 8px solid var(--primary); border-left-color: #313744; border-radius: 50%; }
.generator-wrap { max-width: 940px; }.generator-card { display: grid; gap: 1.25rem; }.form-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }.generator-button { width: 100%; }.step-card { position: relative; min-height: 185px; padding-top: 3.7rem; }.step-number { position: absolute; top: 1.15rem; left: 1.25rem; color: var(--primary); font-size: 1.05rem; font-weight: 900; }.step-card p, .info-card p { color: var(--text-muted); }.two-column { display: grid; gap: 1rem; }.info-card { min-height: 210px; background: var(--card-secondary); }.about-panel { display: grid; gap: 1rem; border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; background: var(--card); }.notice { border-left: 3px solid var(--primary); padding: .9rem 1rem; background: var(--card-secondary); color: var(--text-muted); }.prose { max-width: 780px; }.prose h2 { margin-top: 2.25rem; }.prose p, .prose li { color: var(--text-muted); }.redirect-page { display: grid; min-height: 100vh; place-items: center; padding: 1rem; }.redirect-card { width: min(100%, 560px); border: 1px solid var(--border); border-radius: .8rem; padding: 2rem; background: var(--card); text-align: center; }.language-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.results-panel { max-width: 900px; margin-inline: auto; border: 1px solid var(--border); border-radius: .9rem; padding: 1.25rem; background: var(--card); }.results-block { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }.results-block h3 { margin-bottom: 1rem; color: var(--primary); }.sensitivity-row { margin-top: 1rem; }.sensitivity-row__header,.control-line { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.45rem; }.sensitivity-row__label,.control-line span { color:var(--text-muted); }.sensitivity-row__value,.control-line strong { color:var(--primary); font-size:1.1rem; }.sensitivity-progress { height:12px; overflow:hidden; border-radius:999px; background:var(--card-secondary); }.sensitivity-progress__fill { width:var(--progress-value); height:100%; border-radius:inherit; background:var(--primary); transition:width .45s ease; }.device-controls { display:grid; gap:.35rem; }.control-line { margin:0; padding:.55rem 0; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); }@media (prefers-reduced-motion: reduce){.sensitivity-progress__fill{transition:none;}}
@media (min-width: 768px) { .hero { padding: 7rem 0; }.hero-layout { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); }.hero-visual { min-height: 350px; }.generator-button { width: auto; }.two-column { grid-template-columns: repeat(2, 1fr); }.about-panel { grid-template-columns: 1.25fr .75fr; align-items: center; padding: 2rem; } }

:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"])) { padding-block: 3.5rem 2.5rem; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"])) > .container > nav { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: 1.35rem; color: var(--text-muted); font-size: .9rem; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"])) > .container > nav a { color: var(--text-muted); text-decoration: none; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"])) > .container > nav a:hover { color: var(--primary); }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"])) > .container > nav span:last-child { color: var(--text); }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"])) > .container > h1 { max-width: 18ch; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"])) > .container > h1 + p,
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"])) > .container > h1 + p + p { max-width: 72ch; color: var(--text-muted); line-height: 1.65; }

:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid > .card { display: flex; min-height: 0; flex-direction: column; align-items: flex-start; gap: .85rem; height: 100%; background: var(--card); cursor: default; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid > .card .eyebrow { margin: 0; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid > .card :is(h2, h3) { margin: 0; overflow-wrap: anywhere; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid > .card p:not(.eyebrow) { margin: 0; color: var(--text-muted); line-height: 1.6; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid > .card p:last-child { width: 100%; margin-top: auto; border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent); padding-top: .9rem; color: var(--text-muted); font-size: .82rem; font-weight: 700; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid > .guide-card--published { cursor: pointer; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid > .guide-card--published:hover { border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); transform: translateY(-2px); }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid > .guide-card--published:focus-visible { border-color: var(--primary); }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .guide-card__badge { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--success) 55%, var(--border)); border-radius: 999px; padding: .25rem .55rem; background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); font-size: .75rem; font-weight: 800; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid > .guide-card--published .guide-card__meta { width: 100%; margin-top: auto; border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent); padding-top: .9rem; color: var(--text-muted); font-size: .82rem; font-weight: 700; }
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .guide-card__cta { color: var(--primary); font-size: .9rem; font-weight: 800; }
.section[aria-labelledby="guides-heading"] { border-block: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--card) 45%, transparent); }
.section[aria-labelledby="guides-heading"] .section-heading { margin-bottom: 1.5rem; }

.section[aria-labelledby="guides-heading"] .button,
:is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"])) + .section .button { width: min(100%, 19rem); margin-top: 1.5rem; }

@media (min-width: 640px) {
  :is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section[aria-labelledby="guides-heading"] .button,
  :is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"])) + .section .button { width: auto; }
}

@media (min-width: 1024px) {
  :is(main > .section:has(> .container > nav[aria-label="Navegação estrutural"]), main > .section:has(> .container > nav[aria-label="Breadcrumb"]), .section[aria-labelledby="guides-heading"]) .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}