:root { --ink:#211d4f; --muted:#6d6a88; --paper:#fbf9ff; --lime:#f9dc55; --line:#e2def0; --orange:#ff725e; --aqua:#51d9ca; --purple:#7168e8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
.shell { width:min(1120px, calc(100% - 48px)); margin:auto; }
.nav { height:94px; display:flex; justify-content:space-between; align-items:center; }
.nav .brand { gap:16px; }
.nav .brand-mark { transform:scale(1.4); transform-origin:left center; margin-right:13px; }
.nav .brand-name { font-size:17px; }
.nav .brand-name em { font-size:21px; margin-top:7px; }
.brand { color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.8px; }.brand-name { display:flex; flex-direction:column; font-size:14px; line-height:.83; letter-spacing:-.6px; text-transform:uppercase; }.brand-name em { color:var(--purple); font:700 17px/.75 Caveat,cursive; letter-spacing:-.4px; margin:5px 0 0 -1px; text-transform:none; }.brand-mark { position:relative; width:40px; height:34px; }.brand-mark i { position:absolute; display:grid; place-items:center; width:19px; height:21px; color:var(--ink); border-radius:4px; background:#fff; border:1px solid #d8d3ed; box-shadow:inset 0 -2px 0 #e8e4f7; font:700 14px Fraunces,serif; font-style:normal; }.brand-mark i:nth-child(1) { left:0; top:7px; background:#ffd9d2; border-color:#f7bbb1; transform:rotate(-14deg); }.brand-mark i:nth-child(2) { left:11px; top:1px; background:#d5f6f0; border-color:#a4e5da; transform:rotate(8deg); }.brand-mark i:nth-child(3) { left:21px; top:10px; background:var(--lime); border-color:#e4c33c; box-shadow:inset 0 -2px 0 #e4c33c; transform:rotate(-3deg); }.brand-mark b { position:absolute; top:-4px; right:-4px; z-index:2; display:grid; place-items:center; width:15px; height:15px; color:#fff; background:var(--purple); border:2px solid var(--paper); border-radius:50%; font:700 10px Manrope,sans-serif; }
.nav-link { color:var(--ink); font-size:13px; font-weight:700; text-decoration:none; }.nav-link span { color:var(--orange); margin-left:5px; }
.hero { padding:74px 0 95px; text-align:center; }
.hero .eyebrow { font-size:14px; letter-spacing:2px; margin-bottom:20px; }
.eyebrow { display:flex; justify-content:center; align-items:center; gap:9px; margin:0 0 17px; color:#625f83; text-transform:uppercase; letter-spacing:1.5px; font-size:10px; font-weight:800; }.eyebrow span { height:7px; width:7px; border-radius:50%; background:var(--orange); }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-2.6px; } h1 { font:700 clamp(48px,7.7vw,91px)/.98 Fraunces,Georgia,serif; margin:0; } h1 em,.plus h2 em { color:var(--purple); font-style:italic; }
.lede { max-width:525px; margin:24px auto 38px; color:#4f4a6d; font-size:18px; font-weight:500; line-height:1.6; }
.solver-card { max-width:735px; margin:auto; padding:25px 26px 16px; text-align:left; border:1px solid var(--line); background:#fff; border-radius:16px; box-shadow:0 17px 0 -9px #eeeafb, 0 28px 35px -27px #555078; }.solver-card label { display:block; margin-bottom:12px; color:#36305f; font-size:15px; font-weight:800; letter-spacing:-.2px; }
.input-row { display:flex; gap:10px; }.input-row input { min-width:0; flex:1; border:1px solid #d6d1e8; border-radius:9px; padding:0 17px; height:57px; outline:none; color:var(--ink); font:500 19px "DM Mono",monospace; letter-spacing:1.5px; text-transform:uppercase; }.input-row input:focus { border-color:var(--purple); box-shadow:0 0 0 3px #e7e4ff; }.input-row input::placeholder { color:#aaa5bd; font-size:15px; letter-spacing:0; text-transform:none; }
button { font-family:inherit; cursor:pointer; }.solve-button { border:0; border-radius:9px; padding:0 23px; background:var(--purple); color:white; font-size:13px; font-weight:800; transition:transform .15s,background .15s; }.solve-button:hover { background:#5148c7; transform:translateY(-2px); }.solve-button span { color:var(--lime); margin-left:6px; font-size:18px; }.solver-footer { display:flex; align-items:center; justify-content:space-between; padding:13px 2px 0; color:#625d7f; font-size:13px; font-weight:600; }.clear-button { border:0; background:none; color:#4b4572; padding:0; font-size:13px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.content-notice { margin:14px 2px 0; color:#5a5479; font-size:13px; font-weight:500; line-height:1.55; }
.quick-tries { margin-top:26px; display:flex; gap:9px; justify-content:center; align-items:center; flex-wrap:wrap; color:#77738d; font-size:12px; }.quick-tries button { border:1px solid #ddd9ee; background:transparent; padding:5px 10px; border-radius:999px; color:#45406d; font-family:"DM Mono",monospace; font-size:11px; }.quick-tries button:hover { background:var(--aqua); border-color:var(--aqua); }
.ad-slot { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; color:#8b948a; background:repeating-linear-gradient(-45deg,#f1f3ed 0,#f1f3ed 7px,#ecefe8 7px,#ecefe8 8px); border:1px dashed #cbd1c6; text-align:center; }.ad-slot span { font:9px "DM Mono",monospace; letter-spacing:1px; text-transform:uppercase; }.ad-slot strong { color:#637066; font-size:12px; }.ad-slot small { font-size:10px; }.ad-slot--leaderboard { width:min(728px,100%); height:90px; margin:35px auto -18px; border-radius:9px; }.ad-slot--inline { width:100%; min-height:112px; margin-top:8px; border-radius:9px; }
.results { padding:0 0 120px; }.empty-state { min-height:150px; padding:36px; background:#edf0e8; border-radius:12px; display:flex; justify-content:center; align-items:center; gap:17px; text-align:left; }.empty-icon { display:grid; place-items:center; width:42px; height:42px; color:#537c49; background:#deead8; border-radius:50%; font-size:20px; }.empty-state h2 { margin:0 0 5px; letter-spacing:-.7px; font-size:17px; }.empty-state p { margin:0; color:var(--muted); font-size:13px; }
.results-heading { display:flex; align-items:end; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid var(--line); }.results .eyebrow { justify-content:start; margin-bottom:11px; }.results h2 { margin:0; font:700 clamp(29px,4vw,45px)/1 Fraunces,serif; }.count { color:var(--muted); font:12px "DM Mono",monospace; }.letter-rack { display:flex; gap:7px; margin:23px 0 34px; flex-wrap:wrap; }.tile { display:grid; place-items:center; width:35px; height:39px; background:var(--lime); border-radius:5px; font:700 19px Fraunces,serif; text-transform:uppercase; box-shadow:inset 0 -3px 0 #b8d94d; }
.word-groups { display:grid; gap:29px; }.word-group { display:grid; grid-template-columns:70px 1fr; gap:20px; }.word-length { padding-top:8px; color:#778178; font:11px "DM Mono",monospace; text-transform:uppercase; }.word-list { display:flex; gap:9px; flex-wrap:wrap; }.word { padding:10px 13px; color:#233028; background:#fffefa; border:1px solid #dfe3db; border-radius:7px; font:600 15px "DM Mono",monospace; transition:background .15s; }.word:hover { background:#e9f5e0; }
.how { padding:82px 0 107px; border-top:1px solid var(--line); }.how > .eyebrow { justify-content:start; }.how-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }.how h2 { margin:0; font:700 clamp(36px,5vw,60px)/1.02 Fraunces,serif; }.steps { display:grid; gap:29px; }.steps article { display:grid; grid-template-columns:46px 1fr; gap:17px; }.steps b { color:#789164; font:11px "DM Mono",monospace; padding-top:4px; }.steps h3 { margin:0 0 7px; font-size:15px; letter-spacing:-.3px; }.steps p { max-width:345px; color:var(--muted); margin:0; font-size:13px; line-height:1.65; } footer { padding:26px 0 38px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#788178; font-size:11px; } footer .brand { gap:7px; } footer .brand-mark { transform:scale(.7); transform-origin:left center; width:29px; margin-right:-6px; } footer .brand-name { font-size:11px; } footer .brand-name em { font-size:7px; margin-top:4px; letter-spacing:1.25px; }.footer-links { display:flex; gap:17px; }.footer-links a { color:#5e587d; text-decoration:none; font-weight:700; }.footer-links a:hover { color:var(--purple); }
.legal { max-width:790px; padding:60px 0 100px; }.legal > .eyebrow { justify-content:start; }.legal h1 { margin-bottom:17px; }.legal-date { color:var(--muted); font:12px "DM Mono",monospace; }.legal section { padding:26px 0; border-top:1px solid var(--line); }.legal section:first-of-type { margin-top:42px; }.legal h2 { margin-bottom:10px; font:700 24px Fraunces,serif; letter-spacing:-.7px; }.legal p { max-width:720px; color:#4f4a6d; font-size:15px; line-height:1.75; }.legal p:last-child { margin-bottom:0; }.legal a { color:var(--purple); font-weight:700; }
.plus { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:75px 0; border-top:1px solid var(--line); }.plus .eyebrow { justify-content:start; }.plus h2 { margin:0; font:700 clamp(34px,4.7vw,55px)/1.04 Fraunces,serif; letter-spacing:-2px; }.plus h2 em { color:var(--purple); font-style:italic; }.plus-card { padding:29px 30px; background:var(--ink); color:#fff; border-radius:13px; box-shadow:8px 8px 0 var(--aqua); }.plus-badge { display:inline-block; color:var(--ink); padding:4px 7px; border-radius:4px; background:var(--lime); font:800 9px "DM Mono",monospace; letter-spacing:1px; }.plus-card h3 { margin:17px 0 8px; font:700 21px Fraunces,serif; letter-spacing:-.5px; }.plus-card p { margin:0 0 20px; color:#d4d0e6; font-size:13px; line-height:1.6; }.plus-card button { border:0; color:var(--ink); padding:10px 13px; background:#fff; border-radius:6px; font-size:12px; font-weight:800; }.plus-card button span { margin-left:7px; color:var(--orange); }
@media (max-width:650px) { .shell { width:min(100% - 32px,1120px); }.nav { height:72px; }.nav .brand { gap:11px; }.nav .brand-mark { transform:scale(1.05); margin-right:3px; }.nav .brand-name { font-size:14px; }.nav .brand-name em { font-size:17px; margin-top:5px; }.hero { padding:47px 0 65px; } h1 { letter-spacing:-1.6px; }.input-row { flex-direction:column; }.solve-button { height:53px; }.solver-card { padding:20px 17px 15px; }.ad-slot--leaderboard { height:74px; margin-top:30px; }.results { padding-bottom:76px; }.empty-state { padding:28px 18px; }.results-heading { align-items:start; gap:14px; flex-direction:column; }.count { margin:0; }.word-group { grid-template-columns:1fr; gap:8px; }.how { padding:62px 0 70px; }.how-grid,.plus { grid-template-columns:1fr; gap:43px; }.plus { padding:57px 0; }.plus-card { padding:25px; } footer { padding-bottom:25px; } }