:root{color-scheme:light;--bg: #f5e8c7;--bg-strong: #f0d7a1;--ink: #1f1d1a;--panel: rgba(255, 249, 237, .85);--panel-stroke: rgba(79, 54, 29, .18);--correct: #357266;--present: #c9892d;--absent: #716356;--draft: #e7d4a2;--shadow: 0 18px 60px rgba(82, 54, 18, .16);font-family:Trebuchet MS,Gill Sans,sans-serif;line-height:1.5;font-weight:400;color:var(--ink);background:radial-gradient(circle at top left,rgba(255,255,255,.6),transparent 26%),linear-gradient(135deg,#f8efd7,#efc77f 58%,#dfa65f)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}#root{min-height:100vh}.shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:32px 0 40px}.hero{padding:28px;border:1px solid var(--panel-stroke);border-radius:28px;background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.24em;font-size:.78rem}.hero h1{margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(2.1rem,5vw,4.4rem);line-height:.95;max-width:10ch}.intro{max-width:58ch;margin:18px 0 0;font-size:1.05rem}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}.stats div,.panel{border:1px solid var(--panel-stroke);border-radius:22px;background:#fffcf4c7}.stats div{padding:14px 16px}.stats span{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;opacity:.7}.stats strong{display:block;margin-top:4px;font-size:1.15rem}.playground{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:18px;margin-top:18px}.panel{padding:22px;box-shadow:var(--shadow)}.panel-header{display:flex;justify-content:space-between;gap:16px;align-items:center}.panel h2{margin:0 0 12px;font-size:1.1rem}.ghost-button{border:1px solid rgba(52,41,25,.18);background:#ffffffb3;color:inherit;padding:10px 14px;border-radius:999px;cursor:pointer}.banner{margin-top:18px;padding:12px 14px;border-radius:16px;font-size:.96rem}.banner[data-tone=info]{background:#3572661f}.banner[data-tone=error]{background:#a84a3524}.banner[data-tone=success]{background:#35726633}.board{margin-top:18px;display:grid;gap:10px}.board-row{display:grid;grid-template-columns:repeat(5,minmax(0,72px));gap:10px;justify-content:center}.cell{aspect-ratio:1;display:grid;place-items:center;border-radius:18px;border:1px solid rgba(62,50,37,.12);font-size:clamp(1.25rem,2vw,2rem);font-weight:700;text-transform:uppercase;background:#fffaefd6}.cell[data-state=correct]{background:var(--correct);color:#fff8f0}.cell[data-state=present]{background:var(--present);color:#fff7ea}.cell[data-state=absent]{background:var(--absent);color:#f8efe6}.cell[data-state=draft]{background:var(--draft)}.panel-side{display:grid;gap:18px;align-content:start}.legend{display:grid;gap:10px}.legend-item{display:flex;gap:10px;align-items:center}.legend-swatch{width:18px;height:18px;border-radius:6px;display:inline-block}.legend-swatch[data-state=correct]{background:var(--correct)}.legend-swatch[data-state=present]{background:var(--present)}.legend-swatch[data-state=absent]{background:var(--absent)}.current-guess{padding:14px 16px;border-radius:16px;border:1px dashed rgba(43,32,20,.24);letter-spacing:.24em;font-size:1.15rem}.cta-link{display:inline-flex;align-items:center;margin-top:8px;color:inherit;text-decoration:none;border-bottom:1px solid currentColor}.share-box{margin:0;padding:12px 14px;border-radius:16px;background:#fff9;border:1px solid rgba(43,32,20,.12);white-space:pre-wrap;font-family:inherit}.keyboard{margin-top:18px;padding:22px;border-radius:28px;border:1px solid var(--panel-stroke);background:#fff9eddb;box-shadow:var(--shadow)}.keyboard-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.keyboard-row+.keyboard-row{margin-top:8px}.key{min-width:44px;padding:12px 14px;border:0;border-radius:14px;cursor:pointer;color:#fff8f0;background:#a17a47;text-transform:uppercase;font-weight:700;box-shadow:inset 0 -2px #0000001f}.key[data-state=correct]{background:var(--correct)}.key[data-state=present]{background:var(--present)}.key[data-state=absent]{background:var(--absent)}.key-action{min-width:132px}@media (max-width: 860px){.playground,.stats{grid-template-columns:1fr}.hero h1{max-width:none}}@media (max-width: 560px){.shell{width:min(100% - 20px,100%);padding-top:20px}.hero,.panel,.keyboard{padding:18px}.board-row{grid-template-columns:repeat(5,minmax(0,1fr))}.cell{border-radius:14px}.key{min-width:38px;padding:11px 10px}}
