:root{
  --bg:#f7f9fc;
  --surface:#ffffff;
  --surface-2:#eef3ff;
  --text:#172033;
  --muted:#667085;
  --primary:#5b5bd6;
  --primary-dark:#4343b8;
  --accent:#2bb6a8;
  --border:#e4e7ec;
  --shadow:0 18px 60px rgba(34,43,69,.10);
  --radius:18px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{color:inherit}
.container{width:min(var(--max),calc(100% - 32px));margin:auto}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{text-decoration:none;font-weight:900;font-size:1.45rem;letter-spacing:-.04em}
.brand span{color:var(--primary)}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-links a{text-decoration:none;color:#475467;font-weight:600;font-size:.94rem}
.nav-links a:hover,.nav-links a.active{color:var(--primary)}
.menu-toggle{display:none;border:0;background:transparent;font-size:1.7rem}
.hero{
  background:
    radial-gradient(circle at 15% 15%,rgba(91,91,214,.15),transparent 30%),
    radial-gradient(circle at 85% 20%,rgba(43,182,168,.14),transparent 24%),
    linear-gradient(180deg,#fff 0%,#f7f9fc 100%);
  padding:88px 0 72px;
}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:center}
.eyebrow{
  display:inline-block;
  font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:var(--primary);margin-bottom:12px
}
h1,h2,h3{line-height:1.15;letter-spacing:-.035em}
h1{font-size:clamp(2.7rem,6vw,5.3rem);margin:0 0 22px}
.hero p{font-size:1.16rem;max-width:700px;color:var(--muted)}
.hero-actions,.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{
  appearance:none;border:0;border-radius:12px;padding:13px 18px;
  font-weight:800;font-size:.96rem;text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:.2s ease
}
.btn.primary{background:var(--primary);color:white}
.btn.primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn.secondary{background:white;color:var(--text);border:1px solid var(--border)}
.btn.secondary:hover{background:#f9fafb}
.hero-card,.tool-card,.feature-card,.faq details{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)
}
.hero-card{padding:26px;transform:rotate(2deg)}
.mini-card{padding:24px;border:2px dashed #cfd5ff;border-radius:14px;text-align:center;display:grid;gap:10px}
.mini-card strong{font-size:1.5rem}
.mini-card span:not(.mini-label){padding:8px;border-radius:10px;background:var(--surface-2)}
.mini-label{font-size:.75rem;text-transform:uppercase;font-weight:800;color:var(--muted)}
.arrow{font-size:1.4rem;color:var(--primary)}
.section{padding:76px 0}
.section.alt{background:#f0f4fa}
.section-heading{margin-bottom:28px}
.section-heading.centered,.centered{text-align:center}
.section-heading h2{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 10px}
.section-heading p{color:var(--muted);margin:0}
.tool-card{padding:34px;max-width:900px;margin:auto}
label{font-weight:750;color:#344054}
.text-input,.text-area,select{
  width:100%;margin-top:8px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;
  padding:14px 16px;font:inherit;color:var(--text);outline:none
}
.text-input:focus,.text-area:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(91,91,214,.10)}
.options-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:18px;align-items:end}
.check-label{display:flex;gap:10px;align-items:center;min-height:52px;padding:0 4px}
.check-label input{width:18px;height:18px}
.results{margin-top:26px;display:grid;gap:10px}
.result-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fbfcff
}
.result-item button{border:0;background:#eef0ff;color:var(--primary);font-weight:800;border-radius:8px;padding:7px 10px;cursor:pointer}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{text-decoration:none;padding:26px;transition:.2s ease}
.feature-card:hover{transform:translateY(-4px);border-color:#cbd1ff}
.feature-card .icon{font-size:1.8rem}
.feature-card h3{margin:14px 0 8px;font-size:1.25rem}
.feature-card p{margin:0;color:var(--muted)}
.content-block{max-width:860px}
.content-block h2{font-size:1.8rem;margin-top:34px}
.content-block p,.content-block li{color:#475467}
.faq{max-width:860px;margin:auto;display:grid;gap:12px}
.faq details{padding:18px 20px;box-shadow:none}
.faq summary{font-weight:800;cursor:pointer}
.faq p{color:var(--muted)}
.page-hero{padding:64px 0 30px;background:linear-gradient(180deg,#fff,#f7f9fc)}
.page-hero h1{font-size:clamp(2.4rem,5vw,4.3rem);margin:0 0 16px}
.page-hero p{max-width:720px;color:var(--muted);font-size:1.08rem}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.stat{background:#f8f9ff;border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center}
.stat strong{display:block;font-size:1.7rem;color:var(--primary)}
.stat span{font-size:.86rem;color:var(--muted)}
.note{font-size:.9rem;color:var(--muted);margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips .result-item{display:block;font-weight:800}
.wrap{flex-wrap:wrap}
.legal{padding-bottom:20px}
.site-footer{background:#151a28;color:#e6eaf2;padding:52px 0 24px;margin-top:0}
.footer-grid{display:flex;justify-content:space-between;gap:30px}
.footer-brand{color:#fff}
.site-footer p{color:#aeb8ca}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;align-content:flex-start}
.footer-links a{color:#d4d8e1;text-decoration:none}
.copyright{border-top:1px solid #2c3448;margin-top:30px;padding-top:18px;color:#8f98aa;font-size:.9rem}
.not-found{min-height:100vh;display:grid;place-items:center}
.big-404{font-size:clamp(5rem,20vw,12rem);font-weight:950;color:var(--primary);line-height:1}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-card{max-width:520px}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .options-grid{grid-template-columns:1fr}
  .nav-links{
    display:none;position:absolute;left:16px;right:16px;top:72px;background:white;
    border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow);
    flex-direction:column;align-items:flex-start
  }
  .nav-links.open{display:flex}
  .menu-toggle{display:block}
}
@media (max-width:620px){
  .hero{padding-top:60px}
  h1{font-size:2.65rem}
  .section{padding:54px 0}
  .tool-card{padding:22px}
  .cards-grid,.stats-grid{grid-template-columns:1fr}
  .footer-grid{flex-direction:column}
}
/* =========================================
   WORD SCRIBBLE ENHANCEMENTS
========================================= */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}


/* Sticky navigation */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
}


/* Tool cards */

.feature-card {
    position: relative;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
}

.feature-card:focus-visible {
    outline: 3px solid #5b5ce2;
    outline-offset: 4px;
}


/* Open tool link */

.card-link {
    display: inline-block;
    margin-top: 14px;
    color: #5b5ce2;
    font-weight: 700;
    font-size: 0.95rem;
}


/* Tool note */

.tool-note {
    margin-top: 24px;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.7;
}


/* Text tool buttons */

.text-tool-buttons {
    flex-wrap: wrap;
}


/* Content */

.content-block h2 {
    margin-top: 42px;
    margin-bottom: 14px;
}

.content-block h2:first-child {
    margin-top: 0;
}

.content-block h3 {
    margin-top: 28px;
    margin-bottom: 8px;
}

.content-block p {
    line-height: 1.8;
}

.content-block ul {
    padding-left: 24px;
    line-height: 2;
}


/* Better FAQ */

.faq details {
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.faq details:hover {
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06);
}

.faq details[open] {
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.07);
}


/* Footer links */

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 18px 24px;
}


/* Mobile */

@media (max-width: 768px) {

    .section-heading h1 {
        font-size: 2.5rem;
    }

    .section-heading h2 {
        font-size: 2rem;
    }

    .tool-card {
        padding: 28px 20px;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .card-link {
        margin-top: 10px;
    }
}
/* =========================================
   TOOL RESULT STYLES
========================================= */

.results {
    margin-top: 28px;
}

.result-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.result-chip {
    border: 1px solid #dfe3ee;
    background: #f7f8ff;
    color: #172033;

    padding: 12px 18px;

    border-radius: 12px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.result-chip:hover {
    transform: translateY(-2px);
    border-color: #5b5ce2;
    background: #f0f0ff;
}

.result-chip:focus-visible {
    outline: 3px solid rgba(91, 92, 226, 0.25);
    outline-offset: 2px;
}

.result-message {
    padding: 15px 18px;
    border-radius: 12px;

    background: #f7f8ff;
    border: 1px solid #dfe3ee;

    color: #475569;
    line-height: 1.6;
}

.result-message.error {
    background: #fff7f7;
    border-color: #fecaca;
    color: #b91c1c;
}


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

.menu-toggle {
    display: none;

    border: 0;
    background: transparent;

    font-size: 1.7rem;
    cursor: pointer;
}


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

@media (max-width: 900px) {

    .menu-toggle {
        display: block;
    }

    .nav-wrap {
        position: relative;
    }

    .nav-links {
        display: none;

        position: absolute;

        top: calc(100% + 18px);
        left: 0;
        right: 0;

        padding: 18px;

        background: #ffffff;

        border: 1px solid #e2e8f0;
        border-radius: 16px;

        box-shadow:
            0 18px 45px
            rgba(15, 23, 42, 0.12);

        flex-direction: column;
        align-items: stretch;

        z-index: 1000;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        padding: 10px 12px;
        border-radius: 8px;
    }

    .nav-links a:hover {
        background: #f7f8ff;
    }

}


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

@media (max-width: 600px) {

    .result-chip {
        width: 100%;
        text-align: left;
    }

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

    .button-row .btn {
        width: 100%;
    }

}
/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle {
    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid #dfe3ee;
    border-radius: 12px;

    background: #ffffff;
    color: #172033;

    font-size: 1.15rem;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    background: #f4f5ff;
    border-color: #c7c9f7;
}

.theme-toggle:focus-visible {
    outline: 3px solid rgba(91, 92, 226, 0.25);
    outline-offset: 2px;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode {
    background: #0f172a;
    color: #e5e7eb;
}


/* Header */

body.dark-mode .site-header {
    background: #111827;
    border-color: #273449;
}

body.dark-mode .brand {
    color: #f8fafc;
}

body.dark-mode .nav-links a {
    color: #cbd5e1;
}

body.dark-mode .nav-links a:hover {
    color: #818cf8;
}


/* Main backgrounds */

body.dark-mode main,
body.dark-mode .section {
    background: #0f172a;
}

body.dark-mode .section.alt {
    background: #131d30;
}


/* Headings */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: #f8fafc;
}

body.dark-mode p {
    color: #b8c4d6;
}

body.dark-mode .eyebrow {
    color: #818cf8;
}


/* Tool cards */

body.dark-mode .tool-card,
body.dark-mode .feature-card {
    background: #182235;
    border-color: #2b3950;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.18);
}

body.dark-mode .tool-card:hover,
body.dark-mode .feature-card:hover {
    border-color: #4f5f7a;
}


/* Form labels */

body.dark-mode label {
    color: #f1f5f9;
}


/* Inputs */

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .text-input,
body.dark-mode .text-area {
    background: #111827;
    border-color: #37465d;
    color: #f8fafc;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #7f8da3;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: #818cf8;
    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(129, 140, 248, 0.15);
}


/* Select options */

body.dark-mode select option {
    background: #111827;
    color: #f8fafc;
}


/* Secondary buttons */

body.dark-mode .btn.secondary {
    background: #182235;
    border-color: #37465d;
    color: #f8fafc;
}

body.dark-mode .btn.secondary:hover {
    background: #202c42;
}


/* Statistics */

body.dark-mode .stat {
    background: #131d30;
    border-color: #2b3950;
}

body.dark-mode .stat strong {
    color: #818cf8;
}


/* Generated results */

body.dark-mode .result-chip {
    background: #202b42;
    border-color: #37465d;
    color: #f1f5f9;
}

body.dark-mode .result-chip:hover {
    background: #293650;
    border-color: #818cf8;
}

body.dark-mode .result-message {
    background: #182235;
    border-color: #37465d;
    color: #cbd5e1;
}


/* FAQ */

body.dark-mode .faq details {
    background: #182235;
    border-color: #2b3950;
}

body.dark-mode .faq summary {
    color: #f8fafc;
}

body.dark-mode .faq details p {
    color: #b8c4d6;
}


/* Content pages */

body.dark-mode .content-block {
    color: #cbd5e1;
}

body.dark-mode .content-block h2,
body.dark-mode .content-block h3 {
    color: #f8fafc;
}

body.dark-mode .content-block a {
    color: #a5b4fc;
}


/* Theme button itself */

body.dark-mode .theme-toggle {
    background: #182235;
    border-color: #37465d;
    color: #f8fafc;
}

body.dark-mode .theme-toggle:hover {
    background: #202c42;
    border-color: #818cf8;
}


/* Footer */

body.dark-mode .site-footer {
    background: #080e1c;
}


/* Mobile navigation */

@media (max-width: 900px) {

    body.dark-mode .nav-links {
        background: #111827;
        border-color: #2b3950;
    }

    body.dark-mode .nav-links a:hover {
        background: #182235;
    }

}