:root{--ink:#f3eef0;--muted:#a79fb0;--surface:#2a2735;--surface-2:#332e40;--line:#3d3749;--accent:#ff9587;--accent-2:#8b7cf6;--tile:#f6f2fb;--tile-ink:#332e40;--danger:#ff9b9b;--shell-w:640px}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;background:#1c1a24;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app-shell{width:100%;max-width:var(--shell-w);min-height:100dvh;margin:auto;padding:env(safe-area-inset-top) 20px 60px;background:radial-gradient(circle at 84% 2%,#362f4a 0,transparent 30%),#1c1a24}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-size:27px;font-weight:800;letter-spacing:-.8px;display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}
.brand:hover{opacity:.85}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;background:linear-gradient(145deg,var(--accent-2),var(--accent));font-size:20px;font-weight:700}
.topbar-actions{display:flex;gap:8px}
.theme-button{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:11px;padding:8px 11px;font-size:17px;cursor:pointer}
.theme-toggle{display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.theme-toggle-option{display:flex;align-items:center;gap:6px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-weight:700;font-size:13px;font-family:inherit;padding:7px 13px;cursor:pointer;transition:background .15s,color .15s}
.theme-toggle-icon{font-size:14px;line-height:1}
.theme-toggle-option.active{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff}
@media (max-width:480px){.theme-toggle-option{padding:8px}.theme-toggle-label{display:none}}
.intro{padding:22px 2px 26px}
.eyebrow{margin:0 0 8px;color:var(--accent);font-size:13px;font-weight:800;letter-spacing:1px}
.intro h1{font-size:clamp(26px,6vw,36px);line-height:1.1;letter-spacing:-.8px;margin:0 0 10px}
.intro p:not(.eyebrow){color:var(--muted);margin:0;font-size:15px;line-height:1.55;max-width:52ch}
.card{background:linear-gradient(150deg,#2f2b3c,#262230);border:1px solid var(--line);border-radius:22px}
.input-card{padding:18px;display:block}
.input-row{display:flex;gap:10px;flex-wrap:wrap}
#lettersInput{flex:1 1 220px;min-width:0;height:58px;border:1px solid #473f57;border-radius:16px;background:#1f1c28;color:inherit;padding:0 18px;font:inherit;font-size:22px;font-weight:700;letter-spacing:2px;text-transform:uppercase;outline:0}
#lettersInput::placeholder{color:#6b6178;text-transform:none;font-weight:600;letter-spacing:0;font-size:16px}
#lettersInput:focus{border-color:var(--accent)}
.primary-button{flex:1 1 160px;min-height:58px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;font-weight:700;font-size:16px;letter-spacing:.2px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.primary-button:active{transform:translateY(1px)}
.primary-button:disabled{opacity:.7;cursor:default}
.primary-button.is-loading #unscrambleButtonLabel::after{content:"";display:inline-block;width:13px;height:13px;margin-left:9px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;vertical-align:-2px;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.input-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.input-meta span{color:var(--muted);font-size:12px;font-weight:650}
.input-meta-actions{display:flex;align-items:center;gap:16px}
.text-button{border:0;background:transparent;color:var(--accent);font-size:12px;font-weight:800;cursor:pointer;padding:0}
.field-hint{color:var(--muted);font-size:11px;margin:12px 0 0}
.field-hint strong{color:#d3cbe0}
.options-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.options-panel[hidden]{display:none}
.option-field{display:block}
.option-field>span{color:var(--muted);font-size:11px;font-weight:700;display:block;margin:0 0 6px}
.option-field>input{width:100%;height:40px;border:1px solid #473f57;border-radius:11px;background:#1f1c28;color:inherit;padding:0 12px;font:inherit;font-size:13px;font-weight:600;outline:0;text-transform:lowercase}
.option-field>input::placeholder{color:#6b6178;text-transform:none;font-weight:500}
.option-field>input:focus,.option-field>select:focus{border-color:var(--accent)}
.option-field>select{width:100%;height:40px;border:1px solid #473f57;border-radius:11px;background:#1f1c28;color:inherit;padding:0 12px;font:inherit;font-size:13px;font-weight:600;outline:0;cursor:pointer}
.generator-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.generator-fields{grid-template-columns:1fr}}
.puzzle-section{margin-top:30px;text-align:center}
.scramble-display{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px}
.scramble-letter{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--tile);color:var(--tile-ink);font-weight:800;font-size:22px;text-transform:uppercase;box-shadow:0 2px 6px rgba(20,15,35,.2)}
.guess-row{max-width:360px;margin:0 auto}
#guessInput{width:100%;height:54px;border:1px solid #473f57;border-radius:14px;background:#1f1c28;color:inherit;padding:0 18px;font:inherit;font-size:20px;font-weight:700;letter-spacing:3px;text-transform:uppercase;outline:0;text-align:center}
#guessInput:focus{border-color:var(--accent)}
#guessInput:disabled{opacity:.75}
.puzzle-feedback{margin:16px 0 0;font-weight:700;font-size:15px}
.puzzle-feedback.is-correct{color:#4fa87c}
.puzzle-feedback.is-revealed{color:var(--muted)}
.puzzle-actions{display:flex;justify-content:center;gap:24px;margin-top:18px}
.puzzle-actions .text-button:disabled{opacity:.6;cursor:default}
.wordle-rows{display:grid;gap:8px;margin-top:22px;justify-items:center}
.wordle-row{display:flex;gap:8px}
.wordle-cell{width:48px;height:48px;border:2px solid #473f57;border-radius:10px;background:#1f1c28;color:inherit;text-align:center;font:inherit;font-size:22px;font-weight:800;text-transform:uppercase;outline:0;padding:0;cursor:pointer}
.wordle-cell:focus{border-color:var(--accent)}
.wordle-cell[data-color="gray"]{background:#3a3547;border-color:#3a3547;color:#fff}
.wordle-cell[data-color="yellow"]{background:#c9a227;border-color:#c9a227;color:#241205}
.wordle-cell[data-color="green"]{background:#4fa87c;border-color:#4fa87c;color:#fff}
.wordle-hint{text-align:center;color:var(--muted);font-size:12px;margin:14px auto 0;max-width:44ch;line-height:1.5}
.wordle-actions{display:flex;justify-content:center;margin-top:14px}
.wordle-empty-note{color:var(--muted);font-size:13px;text-align:center;grid-column:1/-1}
.wordle-rows-compact{margin-top:12px}
.wordle-row-compact{gap:5px}
.wordle-cell-compact{width:36px;height:36px;font-size:16px;border-width:1px}
.quordle-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:30px}
@media (min-width:700px){.quordle-grid{grid-template-columns:1fr 1fr}}
.quordle-board{padding:18px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line)}
.quordle-board-title{font-size:14px;font-weight:800;margin:0;color:var(--accent-2);text-transform:uppercase;letter-spacing:.4px}
.quordle-board-placeholder{color:var(--muted);font-size:12px;text-align:center;margin:16px 0 0}
.quordle-board-count{font-size:12px;color:var(--muted);font-weight:700;margin:16px 0 10px}
.wf-board-header{display:flex;align-items:center;justify-content:space-between;margin-top:26px}
.wf-board-title{font-size:15px;font-weight:800;color:var(--muted);letter-spacing:.3px}
.wf-board-wrap{overflow-x:auto;margin-top:12px;padding-bottom:4px}
.wf-board{display:grid;grid-template-columns:repeat(15,28px);grid-template-rows:repeat(15,28px);gap:2px;width:max-content;margin:0 auto}
.wf-cell{position:relative;width:28px;height:28px}
.wf-cell-label{position:absolute;inset:0;display:grid;place-items:center;font-size:8px;font-weight:800;letter-spacing:.2px;color:var(--muted);pointer-events:none;text-transform:uppercase}
.wf-cell-input{position:absolute;inset:0;width:100%;height:100%;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:inherit;text-align:center;font:inherit;font-size:14px;font-weight:800;text-transform:uppercase;outline:0;padding:0}
.wf-cell-input:focus{border-color:var(--accent)}
.wf-cell[data-bonus="TW"] .wf-cell-input{background:rgba(255,149,135,.32)}
.wf-cell[data-bonus="DW"] .wf-cell-input{background:rgba(255,149,135,.14)}
.wf-cell[data-bonus="TL"] .wf-cell-input{background:rgba(139,124,246,.32)}
.wf-cell[data-bonus="DL"] .wf-cell-input{background:rgba(139,124,246,.14)}
.wf-cell[data-center="true"] .wf-cell-input{background:var(--surface-2)}
.wf-cell.is-filled .wf-cell-input{background:var(--tile);color:var(--tile-ink);border-color:var(--tile)}
.wf-cell.is-filled .wf-cell-label{display:none}
.wf-play-list{display:grid;gap:10px}
.wf-play{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:4px 4px 4px 0;border-bottom:1px solid var(--line)}
.wf-play:last-child{border-bottom:0}
.wf-play .word-tile{box-shadow:none;background:transparent;padding:6px 6px 6px 4px}
.wf-play-meta{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted);font-weight:650}
.wf-play-score{color:var(--accent);font-weight:800;font-size:13px}
.about-section{margin-top:34px}
.about-section h2{font-size:19px;margin:0 0 12px}
.about-section p{color:var(--muted);font-size:15px;line-height:1.65;max-width:62ch;margin:0 0 12px}
.about-section p:last-of-type{margin-bottom:0}
.about-section .tool-grid{margin-top:18px}
@media (max-width:480px){.options-panel{grid-template-columns:1fr}}
.status-panel{margin-top:16px;padding:13px 16px;border-radius:14px;background:#3a2530;border:1px solid #5a3a4a;color:var(--danger);font-size:13px;font-weight:650}
.placeholder-state{text-align:center;padding:52px 24px}
.placeholder-mark{font-size:34px;color:var(--accent)}
.placeholder-state h2{font-size:18px;margin:12px 0 6px}
.placeholder-state p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 auto;max-width:36ch}
.placeholder-state strong{color:var(--ink)}
.result-card{margin-top:26px;text-align:center;padding:44px 24px;border-radius:22px;background:var(--surface-2);border:1px solid var(--line)}
.result-icon{font-size:36px;margin-bottom:10px}
.result-word{font-size:26px;font-weight:700;text-transform:lowercase}
.result-verdict{font-size:14px;font-weight:650;margin-top:6px}
.result-definition{color:var(--muted);font-size:14px;line-height:1.55;max-width:38ch;margin:16px auto 0}
.result-card.is-valid .result-icon,.result-card.is-valid .result-verdict{color:#4fa87c}
.result-card.is-invalid .result-icon,.result-card.is-invalid .result-verdict{color:var(--danger)}
.results-section{margin-top:26px}
.section-title{margin:0 0 14px}
.section-title h2{font-size:15px;margin:0;color:var(--muted);font-weight:700;letter-spacing:.3px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tool-grid+.section-title{margin-top:32px}
.tool-card{display:block;padding:22px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
a.tool-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.tool-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:17px;font-weight:700}
.tool-card-desc{display:block;margin-top:7px;font-size:13px;color:var(--muted);line-height:1.55}
.tool-card.is-soon{cursor:default}
.tool-card.is-soon .tool-card-title{color:var(--muted)}
.result-groups{display:grid;gap:20px}
.result-group h3{font-size:13px;color:var(--accent-2);margin:0 0 10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:9px}
.word-tile{display:flex;align-items:center;gap:2px;padding:6px 6px 6px 12px;border-radius:12px;background:var(--tile);color:var(--tile-ink);box-shadow:0 2px 6px rgba(20,15,35,.2);position:relative}
.tile-word{flex:1;min-width:0;border:0;background:transparent;padding:6px 0;font:inherit;font-weight:700;font-size:14px;color:inherit;text-align:left;text-transform:lowercase;cursor:pointer;text-decoration:underline dotted transparent;text-underline-offset:3px}
.tile-word:hover,.tile-word:focus-visible{text-decoration-color:currentColor}
.tile-score{margin-left:2px;font-size:9px;font-weight:800;color:#8a7fa3;vertical-align:sub}
.tile-copy{flex:none;width:26px;height:26px;border:0;border-radius:9px;background:rgba(51,46,64,.08);color:#635a76;font-size:13px;display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.tile-copy:hover{background:rgba(51,46,64,.15)}
.tile-copy.copied{background:#4fa87c;color:#fff}
.definition-popover{position:fixed;z-index:30;max-width:240px;padding:11px 13px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.35);font-size:12px;line-height:1.5;color:var(--ink)}
.definition-popover .def-word{font-weight:700;text-transform:lowercase;margin-right:5px}
.definition-popover .def-pos{color:var(--accent);font-style:italic;font-size:11px;margin-right:5px}
.definition-popover.is-loading .def-text,.definition-popover.is-empty .def-text{color:var(--muted)}
.app-footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;text-align:center;line-height:1.6}
body.light{--ink:#2d2a32;--muted:#8b8493;--surface:#fff;--surface-2:#f6f2fb;--line:#ece6f0;--accent:#f2604a;--accent-2:#6c5ce7;--tile:#fff;--tile-ink:#2d2a32;background:#fdf9f6}
body.light .app-shell{background:radial-gradient(circle at 84% 2%,#f3ecfb,transparent 30%),#fdf9f6}
body.light .theme-button{background:#fff;color:#2d2a32;border-color:#ece6f0}
body.light .card{background:#fff;border-color:#ece6f0;box-shadow:0 2px 10px rgba(60,40,80,.06)}
body.light #lettersInput,body.light #guessInput{background:#fbf9fc;border-color:#e3dcee;color:#2d2a32}
body.light #lettersInput::placeholder,body.light #guessInput::placeholder{color:#a79fb0}
body.light .option-field>input,body.light .option-field>select{background:#fbf9fc;border-color:#e3dcee;color:#2d2a32}
body.light .option-field>input::placeholder{color:#a79fb0}
body.light .word-tile,body.light .scramble-letter{box-shadow:0 2px 8px rgba(60,40,80,.1);border:1px solid #f0eaf7}
body.light .wordle-cell{background:#fbf9fc;border-color:#e3dcee;color:#2d2a32}
body.light .wordle-cell[data-color="gray"]{background:#8b8493;border-color:#8b8493;color:#fff}
body.light .wordle-cell[data-color="yellow"]{background:#c9a227;border-color:#c9a227;color:#2d2a32}
body.light .wordle-cell[data-color="green"]{background:#4fa87c;border-color:#4fa87c;color:#fff}
body.light .puzzle-feedback.is-correct{color:#2f8f5b}
body.light .tile-copy{background:rgba(45,25,60,.05);color:#6b5f78}
body.light .tile-copy:hover{background:rgba(45,25,60,.1)}
body.light .tile-copy.copied{background:#4fa87c;color:#fff}
body.light .definition-popover{background:#fff;border-color:#ece6f0;box-shadow:0 12px 30px rgba(60,40,80,.14)}
body.light .status-panel{background:#fdeef0;border-color:#f3c9d6;color:#b23a5c}
body.light .field-hint strong{color:#4a4356}
@media (min-width:600px){:root{--shell-w:clamp(680px, 94vw, 1800px)}body{background:#14121b}.app-shell{box-shadow:0 0 60px rgba(0,0,0,.35)}}
@media (min-width:600px){body.light{background:#f5eef7}}
@media (min-width:900px){.app-shell{padding-left:32px;padding-right:32px}}
@media (max-width:420px){.input-row{flex-direction:column;flex-wrap:nowrap}#lettersInput,.primary-button{flex-basis:auto;width:100%}}
.nav-overlay{position:fixed;inset:0;background:rgba(15,12,22,.5);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}
.nav-overlay.open{opacity:1;pointer-events:auto}
.nav-panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--surface);border-left:1px solid var(--line);z-index:41;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;padding:20px;box-shadow:-16px 0 40px rgba(0,0,0,.3);overflow-y:auto}
.nav-panel.open{transform:translateX(0)}
.nav-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.nav-panel-title{font-weight:700;font-size:15px}
.nav-intro{padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.nav-intro p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.nav-card{display:block;padding:13px 14px;border-radius:14px;color:var(--ink);text-decoration:none}
.nav-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;font-size:15px}
.nav-card-desc{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--muted)}
.nav-card.active{background:var(--surface-2)}
.nav-card.active .nav-card-title{color:var(--accent)}
a.nav-card:hover{background:var(--surface-2)}
.nav-card.is-soon{cursor:default}
.nav-card.is-soon .nav-card-title{color:var(--muted)}
.soon-badge{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);background:var(--surface-2);padding:3px 8px;border-radius:20px;flex:none}
body.light .nav-panel{box-shadow:-16px 0 40px rgba(60,40,80,.14)}
body.light .soon-badge{background:#f6f2fb}