/* =========================
   FONTS
========================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* =========================
   TOKENS
========================= */

:root{
    --ink:#12151B;
    --ink-soft:#2A2E38;
    --paper:#F5F4F0;
    --surface:#FFFFFF;
    --line:#E4E1D8;
    --line-strong:#D6D2C6;
    --cue:#FF4433;
    --cue-dark:#E23322;
    --amber:#F5A623;
    --muted:#6B7280;
    --muted-soft:#9AA0AC;

    --font-display:'Inter',sans-serif;
    --font-mono:'Space Mono',monospace;

    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;

    --shadow-card:0 1px 2px rgba(18,21,27,.04), 0 12px 28px rgba(18,21,27,.06);
    --shadow-card-hover:0 1px 2px rgba(18,21,27,.05), 0 20px 40px rgba(18,21,27,.1);
}

/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-display);
    background:var(--paper);
    color:var(--ink);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}

a{
    text-decoration:none;
    color:inherit;
}

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

ul{
    list-style:none;
}

:focus-visible{
    outline:2px solid var(--cue);
    outline-offset:3px;
    border-radius:4px;
}

/* =========================
   CONTAINER
========================= */

.container{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

.mono{
    font-family:var(--font-mono);
}

/* =========================
   SCRUBBER DIVIDER (signature element)
   A thin tick-marked track with a playhead + timecode,
   used between sections like a video seek bar.
========================= */

.scrubber{
    position:relative;
    padding:34px 0;
    background:var(--paper);
}

.scrubber .container{
    display:flex;
    align-items:center;
    gap:18px;
}

.scrubber-time{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--muted-soft);
    white-space:nowrap;
    letter-spacing:.5px;
}

.scrubber-track{
    position:relative;
    flex:1;
    height:2px;
    background:var(--line-strong);
    background-image:repeating-linear-gradient(
        to right,
        var(--line-strong) 0,
        var(--line-strong) 1px,
        transparent 1px,
        transparent 48px
    );
}

.scrubber-track::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    height:2px;
    width:var(--progress, 12%);
    background:var(--cue);
}

.scrubber-track::after{
    content:"";
    position:absolute;
    top:50%;
    left:var(--progress, 12%);
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--cue);
    box-shadow:0 0 0 4px rgba(255,68,51,.15);
    transform:translate(-50%,-50%);
}

/* =========================
   HEADER
========================= */

.header{
    position:sticky;
    top:0;
    z-index:999;
    background:rgba(245,244,240,.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}

.header .nav-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:76px;
    max-width:1680px;
    padding:0 40px;
}

.logo{
    font-family:var(--font-display);
    font-size:18px;
    font-weight:800;
    color:var(--ink);
    letter-spacing:-.3px;
    display:flex;
    align-items:center;
    gap:9px;
}

.logo-icon{
    color:var(--cue);
    flex-shrink:0;
}

.logo em{
    font-style:normal;
    font-weight:500;
    color:var(--muted-soft);
}

.yt-red{
    color:var(--cue);
}

.main-nav > ul{
    display:flex;
    align-items:center;
    gap:4px;
    list-style:none;
    margin:0;
    padding:0;
}

.main-nav li{
    position:relative;
}

.main-nav a{
    display:block;
    padding:10px 16px;
    color:var(--ink-soft);
    font-size:14.5px;
    font-weight:600;
    text-decoration:none;
    border-radius:var(--radius-sm);
    transition:.2s ease;
}

.main-nav a:hover{
    background:var(--surface);
    color:var(--ink);
}

.dropdown-menu{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    width:280px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:8px;
    display:none;
    flex-direction:column;
    gap:2px;
    list-style:none;
    margin:0;
    box-shadow:var(--shadow-card-hover);
}

.dropdown:hover .dropdown-menu{
    display:flex;
}

.dropdown-menu a{
    display:block;
    padding:11px 12px;
    border-radius:8px;
    font-size:14px;
    white-space:nowrap;
}

.dropdown-menu a:hover{
    background:var(--paper);
}

.feedback-btn{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:transparent;
    color:var(--ink-soft);
    border:1px solid var(--line);
    padding:9px 16px;
    border-radius:30px;
    font-size:13.5px;
    font-family:var(--font-display);
    font-weight:600;
    cursor:pointer;
    transition:.2s ease;
}

.feedback-btn:hover{
    background:var(--surface);
    border-color:var(--line-strong);
    color:var(--ink);
}

/* =========================
   HERO
========================= */

.hero{

    background:var(--paper);
}

.hero .container{
    max-width:820px;
    text-align:center;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--muted);
    font-size:13.5px;
    font-weight:500;
    margin-bottom:22px;
}

.hero-badge .dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#22C55E;
    display:inline-block;
}

.hero h1{
    font-size:44px;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1px;
    margin:0 auto 18px;
    color:var(--ink);
}

.hero h1 .accent{
    color:var(--cue);
}

.hero p{
    max-width:600px;
    margin:0 auto 44px;
    font-size:17.5px;
    color:var(--muted);
}

/* =========================
   CALCULATOR CARD
========================= */

.calculator-card{
    max-width:640px;
    margin:0 auto;
    background:var(--surface);
    padding:32px;
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    box-shadow:var(--shadow-card);
    text-align:left;
}

.calculator-card label{
    display:block;
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    margin-bottom:10px;
    color:var(--muted);
}

.calculator-card textarea,
.calculator-card input,
.calculator-card select{
    width:100%;
    border:1.5px solid var(--line-strong);
    background:var(--paper);
    color:var(--ink);
    border-radius:var(--radius-md);
    padding:15px;
    font-size:15px;
    font-family:var(--font-display);
    transition:.2s ease;
}

.calculator-card textarea{
    min-height:110px;
    resize:none;
    font-family:var(--font-mono);
    font-size:13.5px;
}

.calculator-card textarea:focus,
.calculator-card input:focus,
.calculator-card select:focus{
    outline:none;
    border-color:var(--cue);
    background:var(--surface);
}

.speed-row{
    margin-top:18px;
}

/* =========================
   ADVANCED OPTIONS DISCLOSURE
========================= */

.advanced{
    margin-top:16px;
}

.advanced summary{
    cursor:pointer;
    list-style:none;
    font-size:14px;
    font-weight:600;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 0;
}

.advanced summary::-webkit-details-marker{
    display:none;
}

.advanced summary::before{
    content:"›";
    font-family:var(--font-mono);
    font-weight:700;
    color:var(--muted-soft);
    transition:transform .2s ease;
    display:inline-block;
}

.advanced[open] summary::before{
    transform:rotate(90deg);
}

.advanced-body{
    padding-top:14px;
}

/* =========================
   BUTTON
========================= */

button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:none;
    background:var(--ink);
    color:#fff;
    font-size:15.5px;
    font-weight:700;
    padding:16px;
    border-radius:var(--radius-md);
    cursor:pointer;
    margin-top:22px;
    transition:.2s ease;
}

button:hover{
    background:var(--cue);
    transform:translateY(-1px);
}

.form-caption{
    text-align:center;
    color:var(--muted-soft);
    font-size:13px;
    margin-top:16px;
}

/* =========================
   SHARE ROW
========================= */

.share-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:18px;
}

.share-row span{
    font-size:12.5px;
    color:var(--muted-soft);
    margin-right:2px;
}

.share-btn{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--paper);
    border:1px solid var(--line);
    color:var(--ink-soft);
    cursor:pointer;
    transition:.2s ease;
}

.share-btn:hover{
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
}

/* =========================
   RESULT CARD (populated by app.js)
========================= */

#result{
    max-width:640px;
    margin:0 auto;
}

.result-card{
    margin-top:26px;
    background:var(--surface);
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    padding:32px;
    box-shadow:var(--shadow-card);
}

.result-card h2{
    text-align:center;
    margin-bottom:26px;
    font-size:26px;
    font-weight:800;
}

.result-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:26px;
}

.result-item{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:22px;
    text-align:center;
}

.result-item span{
    display:block;
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--muted-soft);
    margin-bottom:10px;
}

.result-item strong{
    font-family:var(--font-mono);
    font-size:26px;
    font-weight:700;
    color:var(--cue);
}

/* =========================
   RESULT TABLE (populated by app.js)
========================= */

.speed-table{
    width:100%;
    overflow-x:auto;
}

.speed-table table{
    width:100%;
    border-collapse:collapse;
}

.speed-table th{
    background:var(--ink);
    color:#fff;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.4px;
    text-transform:uppercase;
    padding:14px;
}

.speed-table td{
    padding:14px;
    border:1px solid var(--line);
    font-family:var(--font-mono);
    font-size:14px;
}

.speed-table tr:nth-child(even){
    background:var(--paper);
}

/* =========================
   ALERTS (populated by app.js)
========================= */

.loading-box{
    background:#FDF0DA;
    color:#8A5A11;
    padding:18px;
    border-radius:var(--radius-sm);
    text-align:center;
    font-weight:600;
    font-family:var(--font-mono);
    font-size:13.5px;
}

.error-box{
    background:#FBE4E1;
    color:#B0281B;
    padding:18px;
    border-radius:var(--radius-sm);
    text-align:center;
    font-weight:600;
    font-family:var(--font-mono);
    font-size:13.5px;
}

/* =========================
   GENERIC CONTENT (guides / article pages)
========================= */

.content-section{
    padding:80px 0;
    background:var(--surface);
}

.content-section h2{
    font-size:34px;
    font-weight:800;
    margin-bottom:20px;
    color:var(--ink);
}

.content-section p{
    color:var(--muted);
    margin-bottom:20px;
}

.content-section li{
    margin-bottom:10px;
    color:var(--muted);
}

/* =========================
   GUIDE CARDS
========================= */

.guides-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    max-width:940px;
    margin:0 auto;
}

.guide-card{
    background:var(--surface);
    border-radius:var(--radius-md);
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow-card);
    transition:.25s ease;
}

.guide-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-card-hover);
}

.guide-content{
    padding:18px;
}

.guide-content h2{
    font-size:16.5px;
    font-weight:800;
    margin-bottom:6px;
}

.read-btn{
    display:inline-block;
    margin-top:8px;
    background:var(--cue);
    color:#fff;
    padding:8px 14px;
    border-radius:var(--radius-sm);
    font-weight:700;
    font-size:12.5px;
}

/* =========================
   ARTICLE PAGE
========================= */

.article-container{
    max-width:860px;
    margin:auto;
    background:var(--surface);
    padding:44px;
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    box-shadow:var(--shadow-card);
}

.article-title{
    font-size:42px;
    font-weight:800;
    letter-spacing:-1px;
    margin-bottom:25px;
}

.article-content h2{
    margin-top:38px;
    margin-bottom:15px;
    font-size:27px;
    font-weight:800;
}

.article-content p{
    margin-bottom:20px;
    color:var(--muted);
}

/* =========================
   SECTION TITLE
========================= */

.section-title{
    text-align:center;
    margin-bottom:56px;
}

.section-title span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--muted);
    padding:7px 14px;
    border-radius:30px;
    font-family:var(--font-mono);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.8px;
    margin-bottom:16px;
}

.section-title span::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--cue);
    display:inline-block;
}

.section-title h2{
    font-size:38px;
    font-weight:800;
    letter-spacing:-.8px;
    color:var(--ink);
    margin-bottom:14px;
}

.section-title p{
    max-width:620px;
    margin:auto;
    color:var(--muted);
}

/* =========================
   STEPS SECTION
========================= */

.steps-section{
    padding:88px 0;
    background:var(--surface);
}

.steps-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    max-width:900px;
    margin:0 auto;
}

.step-card{
    position:relative;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:20px;
    transition:.25s ease;
}

.step-card:hover{
    transform:translateY(-4px);
    border-color:var(--line-strong);
    box-shadow:var(--shadow-card);
}

.step-number{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    color:var(--cue);
    background:#FDE6E3;
    padding:4px 10px;
    border-radius:7px;
    margin-bottom:14px;
}

.step-card h3{
    margin-bottom:6px;
    font-size:16px;
    font-weight:800;
}

.step-card p{
    color:var(--muted);
    font-size:13.5px;
}

/* =========================
   FEATURES SECTION
========================= */

.features-section{
    padding:88px 0;
    background:var(--paper);
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    max-width:940px;
    margin:0 auto;
}

.feature-card{
    background:var(--surface);
    padding:20px;
    border-radius:var(--radius-md);
    border:1px solid var(--line);
    transition:.25s ease;
}

.feature-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-card);
    border-color:var(--line-strong);
}

.feature-card h3{
    margin-bottom:8px;
    font-size:16px;
    font-weight:800;
}

.feature-card p{
    color:var(--muted);
    font-size:13.5px;
}

/* =========================
   COMPARISON TABLE
========================= */

.comparison-section{
    padding:70px 0;
    background:var(--surface);
}

.comparison-table{
    overflow-x:auto;
    border-radius:var(--radius-md);
    border:1px solid var(--line);
    max-width:760px;
    margin:0 auto;
}

.comparison-table table{
    width:100%;
    border-collapse:collapse;
    background:var(--surface);
}

.comparison-table th{
    background:var(--ink);
    color:#fff;
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:.3px;
    text-transform:uppercase;
    padding:11px;
    text-align:center;
}

.comparison-table td{
    padding:9px 11px;
    text-align:center;
    border:1px solid var(--line);
    font-family:var(--font-mono);
    font-size:12.5px;
}

.highlight-row{
    background:#FDF0DA;
    font-weight:700;
}

.highlight-row td{
    color:#8A5A11;
}

/* =========================
   USE CASES
========================= */

.use-cases-section{
    padding:88px 0;
    background:var(--paper);
}

.use-cases-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    max-width:980px;
    margin:0 auto;
}

.use-card{
    background:var(--surface);
    padding:18px;
    border-radius:var(--radius-md);
    border:1px solid var(--line);
    text-align:left;
    transition:.25s ease;
}

.use-card:hover{
    box-shadow:var(--shadow-card);
    border-color:var(--line-strong);
}

.use-card h3{
    margin-bottom:6px;
    font-size:15px;
    font-weight:800;
}

.use-card p{
    color:var(--muted);
    font-size:13px;
}

/* =========================
   AUDIENCE
========================= */

.audience-section{
    padding:88px 0;
    background:var(--surface);
}

.audience-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    max-width:980px;
    margin:0 auto;
}

.audience-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:18px;
    text-align:left;
    transition:.25s ease;
}

.audience-card:hover{
    transform:translateY(-3px);
    border-color:var(--line-strong);
}

.audience-card h3{
    margin-bottom:6px;
    font-size:15px;
    font-weight:800;
}

.audience-card p{
    color:var(--muted);
    font-size:13px;
}

/* =========================
   SEO CONTENT
========================= */

.seo-content{
    padding:88px 0;
    background:var(--paper);
}

.seo-container{
    max-width:820px;
}

.seo-box{
    margin-bottom:36px;
}

.seo-box h3{
    font-size:22px;
    font-weight:800;
    margin-bottom:14px;
    color:var(--ink);
}

.seo-box p{
    color:var(--muted);
    margin-bottom:14px;
}

.seo-box ul{
    margin-top:6px;
}

.seo-box li{
    color:var(--muted);
    padding:8px 0 8px 22px;
    position:relative;
    border-bottom:1px dashed var(--line);
    font-family:var(--font-mono);
    font-size:14px;
}

.seo-box li::before{
    content:"→";
    position:absolute;
    left:0;
    color:var(--cue);
}

/* =========================
   FAQ
========================= */

.faq-section{
    padding:88px 0;
    background:var(--surface);
}

.faq-list{
    max-width:820px;
    margin:auto;
}

.faq-list details{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    margin-bottom:12px;
    padding:20px 22px;
    transition:.2s ease;
}

.faq-list details[open]{
    border-color:var(--line-strong);
}

.faq-list summary{
    cursor:pointer;
    font-weight:700;
    font-size:16px;
    list-style:none;
}

.faq-list summary::-webkit-details-marker{
    display:none;
}

.faq-list summary::after{
    content:"+";
    float:right;
    font-family:var(--font-mono);
    color:var(--cue);
    font-weight:700;
}

.faq-list details[open] summary::after{
    content:"−";
}

.faq-list p{
    margin-top:14px;
    color:var(--muted);
    font-size:15px;
}

/* =========================
   CTA
========================= */

.cta-section{
    padding:56px 0;
    background:var(--ink);
    text-align:center;
    color:var(--paper);
}

.cta-section h2{
    font-size:28px;
    font-weight:800;
    letter-spacing:-.6px;
    margin-bottom:10px;
}

.cta-section p{
    font-size:14.5px;
    color:#A6ABB6;
    margin-bottom:22px;
}

.cta-btn{
    display:inline-block;
    background:var(--cue);
    color:#fff;
    padding:12px 26px;
    border-radius:var(--radius-sm);
    font-weight:700;
    font-size:14px;
    transition:.2s ease;
}

.cta-btn:hover{
    background:var(--cue-dark);
    transform:translateY(-2px);
}

/* =========================
   STATS
========================= */

.stats-section{
    padding:70px 0;
    background:var(--surface);
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    max-width:760px;
    margin:0 auto;
}

.stat-card{
    background:var(--paper);
    border:1px solid var(--line);
    padding:20px;
    text-align:center;
    border-radius:var(--radius-md);
}

.stat-card h3{
    font-family:var(--font-mono);
    font-size:26px;
    font-weight:700;
    color:var(--cue);
    margin-bottom:4px;
}

.stat-card p{
    color:var(--muted);
    font-size:12.5px;
    font-family:var(--font-mono);
    letter-spacing:.3px;
}

/* =========================
   FOOTER
========================= */

.footer{
    background:var(--ink);
    color:var(--paper);
    padding:64px 0 24px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:44px;
}

.footer-col h3{
    margin-bottom:18px;
    font-size:14px;
    font-family:var(--font-mono);
    letter-spacing:.5px;
    text-transform:uppercase;
    color:#A6ABB6;
}

.footer-col ul{
    padding:0;
    margin:0;
}

.footer-col li{
    list-style:none;
    margin-bottom:12px;
}

.footer-col a{
    color:#D5D8DE;
    text-decoration:none;
    font-size:14.5px;
    transition:.2s ease;
}

.footer-col a:hover{
    color:#fff;
}

.copyright{
    text-align:center;
    margin-top:46px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#7B818D;
    font-family:var(--font-mono);
    font-size:12.5px;
}

/* =========================
   MOBILE
========================= */

@media(max-width:991px){

.steps-grid,
.features-grid{
    grid-template-columns:1fr 1fr;
}

.use-cases-grid,
.audience-grid{
    grid-template-columns:1fr 1fr;
}

.guides-grid{
    grid-template-columns:1fr 1fr;
}

.result-grid{
    grid-template-columns:1fr;
}

.section-title h2{
    font-size:32px;
}

.hero h1{
    font-size:42px;
}

.scrubber-time:last-child{
    display:none;
}

}

@media(max-width:768px){

.header .nav-container{
    flex-direction:column;
    height:auto;
    padding:18px 20px;
    gap:14px;
}

.main-nav ul{
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
}

.hero{
    padding:56px 0 40px;
}

.hero h1{
    font-size:32px;
    letter-spacing:-.6px;
}

.hero p{
    font-size:15.5px;
}

.steps-grid,
.features-grid,
.use-cases-grid,
.audience-grid,
.guides-grid{
    grid-template-columns:1fr;
}

.stats-grid{
    grid-template-columns:1fr;
}

.footer-grid{
    grid-template-columns:1fr;
    text-align:center;
}

.section-title h2{
    font-size:26px;
}

.cta-section h2{
    font-size:24px;
}

.calculator-card,
.result-card,
.article-container{
    padding:22px;
}

.article-title{
    font-size:30px;
}

}

/* =========================
   HEADER-RIGHT LAYOUT (lang switcher + theme toggle + feedback)
========================= */

.header-right{
    display:flex;
    align-items:center;
    gap:10px;
}

/* =========================
   DARK MODE
   Redefines the core design tokens; everything built on
   var(--ink)/var(--paper)/var(--surface)/var(--line) etc.
   picks this up automatically.
========================= */

[data-theme="dark"]{
    --ink:#F2F1ED;
    --ink-soft:#C9CCD6;
    --paper:#13151A;
    --surface:#1B1E25;
    --line:#2B2E36;
    --line-strong:#3A3E48;
    --cue:#FF5B4C;
    --cue-dark:#FF4433;
    --amber:#F5B94A;
    --muted:#9AA0AC;
    --muted-soft:#6B7280;

    --shadow-card:0 1px 2px rgba(0,0,0,.25), 0 12px 28px rgba(0,0,0,.35);
    --shadow-card-hover:0 1px 2px rgba(0,0,0,.3), 0 20px 40px rgba(0,0,0,.45);
}

[data-theme="dark"] .header{
    background:rgba(19,21,26,.92);
}

[data-theme="dark"] img,
[data-theme="dark"] .result-card img{
    opacity:.92;
}

[data-theme="dark"] ::selection{
    background:var(--cue);
    color:#fff;
}