@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root{--bg:#f6f3eb;--paper:#fffdf7;--ink:#343c36;--muted:#7a7e73;--line:#e1dfd3;--green:#578069;--yellow:#bd9145;--gray:#7c817a;--key:#e7e6dc;--soft:#eeede3;--accent:#dbe5d1}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}body.dark{--bg:#1c2521;--paper:#25312a;--ink:#eeeede;--muted:#b1baae;--line:#414b41;--key:#3b493f;--soft:#29382d;--accent:#3c513e;--gray:#646b65}body.contrast{--green:#296db0;--yellow:#b85119}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button,a,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}button:disabled{cursor:default;opacity:.5}.topbar{max-width:1280px;padding:23px 36px;margin:auto;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.logo{font-size:29px;font-weight:700;letter-spacing:-1.6px;text-decoration:none}.logo span{font-weight:400}.logo i{color:var(--green);font-style:normal;font-size:13px;margin-left:3px}.tagline{font-size:12px;color:var(--muted)}nav{display:flex;gap:9px}nav button,.modal-top button{border:1px solid var(--line);background:transparent;border-radius:50%;width:34px;height:34px;font-weight:700;font-size:18px}.intro{text-align:center;padding:38px 20px 25px}.eyebrow,.note-label{font-size:10px;letter-spacing:1.7px;font-weight:700}.eyebrow{color:var(--green)}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:5px}h1,h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:-1px}h1{font-size:48px;line-height:1.05;margin:17px 0}h1 em,h2 em{font-weight:400;color:var(--green)}.intro>p:last-child{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:0}.play-layout{max-width:1110px;margin:0 auto 42px;display:grid;grid-template-columns:225px minmax(360px,490px) 225px;gap:55px;align-items:start}.note{padding-top:65px}.note-label{font-size:9px;color:var(--muted);letter-spacing:1.4px}.note h2{font-size:29px;margin:12px 0 25px}.legend-item{display:flex;gap:14px;margin-bottom:21px;align-items:center}.sample{width:39px;height:42px;display:grid;place-items:center;font-size:22px;font-weight:700;border-radius:5px;flex-shrink:0;position:relative}.legend-item strong{font-size:12px}.legend-item p{font-size:11px;line-height:1.6;color:var(--muted);margin:4px 0 0}.note>a{display:inline-block;font-size:11px;text-underline-offset:4px;margin-top:10px}.correct{background:var(--green)!important;color:white!important;border-color:var(--green)!important}.present{background:var(--yellow)!important;color:white!important;border-color:var(--yellow)!important}.absent{background:var(--gray)!important;color:white!important;border-color:var(--gray)!important}small{display:none}.contrast small{display:block;position:absolute;right:3px;bottom:0;font-size:10px;font-weight:700}.board-top{max-width:310px;margin:0 auto 12px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted)}.board{max-width:310px;margin:auto;display:flex;flex-direction:column;gap:6px}.board-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.tile{height:55px;border:1.5px solid #d7d9ca;background:var(--paper);display:grid;place-items:center;border-radius:5px;font-weight:700;font-size:27px;position:relative}.tile.filled{border-color:var(--ink)}.tile.active{box-shadow:0 2px 0 var(--ink);border-color:var(--ink)}.status{min-height:39px;text-align:center;margin:14px 0 5px;font-size:12px;line-height:1.5;display:flex;align-items:center;justify-content:center}.status.error{color:#b74532}.status.win{color:var(--green);font-weight:700}.keyboard{display:flex;flex-direction:column;gap:5px;width:100%;user-select:none}.key-row{display:flex;justify-content:center;gap:4px}.key{background:var(--key);border:0;border-radius:5px;font-size:12px;font-weight:700;min-width:0;flex:1;max-width:42px;height:43px;padding:0;position:relative}.key.wide{flex:1.65;max-width:70px;font-size:10px}.play-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;flex-wrap:wrap}.primary{border:0;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:6px;font-size:12px;font-weight:700}.primary span{margin-left:20px}.secondary{border:1px solid var(--line);background:var(--paper);padding:11px 15px;border-radius:6px;font-size:12px}#keyboard-tip{font-size:10px;color:var(--muted)}.progress-card{border:1px solid var(--line);border-radius:12px;padding:23px 20px;margin-top:64px;background:var(--paper)}.stat-main{padding:19px 0;border-bottom:1px solid var(--line)}.stat-main b{font:58px 'DM Serif Display',Georgia,serif;line-height:1.1;display:block}.stat-main>span{font-size:12px}.stat-main i{font-style:normal;color:var(--yellow)}.mini-stats{display:flex;gap:30px;padding:20px 0}.mini-stats b{display:block;font-size:20px}.mini-stats span{font-size:9px;color:var(--muted)}.daily-note{display:flex;gap:12px;border-top:1px solid var(--line);padding-top:15px}.daily-note>span{font-size:33px;color:var(--green)}.daily-note p{font-size:11px;line-height:1.8;margin:0;color:var(--muted)}.daily-note strong{color:var(--ink);font-weight:500}#stats-more{background:none;border:0;padding:0;margin-top:25px;font-size:11px;text-decoration:underline;text-underline-offset:4px}.ticker{border-block:1px solid var(--line);display:flex;gap:30px;justify-content:center;padding:20px;font-size:9px;letter-spacing:1.7px;color:var(--muted)}.ticker b{color:var(--green)}.editorial,.color-guide,.tips,.dictionary,.faq,footer{max-width:1110px;margin:auto}.editorial{display:grid;grid-template-columns:1fr 1.45fr;gap:100px;padding:75px 0 60px}.article-heading h2,.tips h2,.faq h2{font-size:44px;line-height:1.13;margin:18px 0 23px}.article-heading p{font-size:15px!important}.editorial p,.editorial li,.guide-grid p,.tips p,.dictionary p,.faq p{font-size:13px;line-height:1.9;color:var(--muted)}.article-body h3{font-size:20px;letter-spacing:-.5px;margin:0 0 12px}.article-body h3:not(:first-child){margin-top:28px}.article-body ol{padding-left:20px}.article-body li{padding:4px 0 4px 7px}.color-guide{border-block:1px solid var(--line);padding:36px 0 44px}.color-guide h2{font-size:30px;text-align:center;margin:0 0 30px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.guide-grid h3{font-size:15px;margin:18px 0 9px}.example{display:flex;gap:5px}.example>span{position:relative;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);border-radius:4px;width:35px;height:38px;font-size:17px;font-weight:700}.tips{display:grid;grid-template-columns:1fr 1.45fr;gap:100px;padding:60px 0}.tip-list article{display:flex;gap:20px;margin-bottom:19px}.tip-list article>span{color:var(--green);font-family:Georgia,serif;font-size:25px}.tip-list h3{margin:0;font-size:17px}.tip-list p{margin-top:7px}.dictionary{background:var(--soft);border-radius:14px;padding:36px 45px;display:flex;gap:35px}.dictionary h2{font-size:30px;margin:10px 0}.dictionary p{font-size:12px}.dictionary a{text-underline-offset:3px}.book-icon{align-self:flex-start;flex-shrink:0;background:var(--green);color:var(--bg);border-radius:3px 10px 10px 3px;border-left:5px solid #0002;width:90px;height:115px;padding:14px;font:36px Georgia,serif;margin-top:7px}.book-icon span{font:13px 'DM Sans',sans-serif;display:block;margin-top:15px}.faq{display:grid;grid-template-columns:1fr 1.45fr;gap:100px;padding:70px 0}details{border-bottom:1px solid var(--line);padding:19px 0}summary{cursor:pointer;font-size:14px;font-weight:500}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:30px 0;font-size:11px;color:var(--muted)}footer>a:last-child{text-decoration:none}dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;width:min(460px,calc(100% - 32px));padding:25px;max-height:85vh}dialog::backdrop{background:#14251e88;backdrop-filter:blur(3px)}.modal-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.modal-top h2{margin:0;font-size:29px}.modal-top button{font-size:25px;flex-shrink:0}#modal-content{font-size:13px;line-height:1.8}#modal-content p{color:var(--muted)}.setting{display:flex;justify-content:space-between;align-items:center;padding:19px 0;border-bottom:1px solid var(--line)}.setting input{width:21px;height:21px;accent-color:var(--green)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;margin:25px 0}.stats-grid b{display:block;font-size:24px}.stats-grid span{font-size:10px;color:var(--muted)}.distribution>div{display:flex;gap:8px;align-items:center;margin:7px 0}.distribution i{font-style:normal;font-size:11px;width:10px}.distribution b{background:var(--green);color:white;min-width:25px;padding-right:8px;text-align:right;border-radius:2px;font-size:11px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}textarea{background:var(--bg);color:var(--ink);width:100%;min-height:180px;border:1px solid var(--line);padding:10px;border-radius:6px}.storage-note{text-align:center;font-size:11px;color:var(--muted)}[hidden]{display:none!important}@media(max-width:1150px){.play-layout{grid-template-columns:180px minmax(320px,440px) 180px;gap:30px;margin-inline:30px}.editorial,.color-guide,.tips,.dictionary,.faq,footer{margin-inline:35px}.editorial,.tips,.faq{gap:50px}.note-label{font-size:8px}}@media(max-width:850px){.play-layout{grid-template-columns:minmax(0,490px);justify-content:center;margin-inline:20px}.note,.progress-card{display:none}.intro{padding-top:23px}h1{font-size:38px}.intro>p:last-child{font-size:12px}.board-top{margin-top:0}.ticker{flex-wrap:wrap;gap:15px;font-size:8px}.ticker b{display:none}.editorial,.tips,.faq{grid-template-columns:1fr;gap:25px;padding:45px 0}.article-heading{max-width:490px}.article-heading h2,.tips h2,.faq h2{font-size:36px}.guide-grid{gap:20px}.tagline{display:none}.dictionary{padding:25px;gap:20px}.book-icon{display:none}footer p{display:none}.topbar{padding:15px 22px}.intro{padding-bottom:20px}.play-layout{margin-bottom:30px}}@media(max-width:480px){.intro h1{font-size:33px;margin:12px 0}.intro .eyebrow{font-size:8px}.intro{padding-top:17px}.intro>p:last-child{font-size:11px}.play-layout{margin-inline:12px}.board{max-width:280px;gap:5px}.board-top{max-width:280px}.tile{height:47px;font-size:25px}.board-row{gap:5px}.key{height:43px;font-size:12px}.key-row{gap:3px}.play-actions{margin-top:18px}.status{margin-top:10px;min-height:33px}.editorial,.color-guide,.tips,.dictionary,.faq,footer{margin-inline:23px}.guide-grid{grid-template-columns:1fr;gap:22px}.color-guide h2{text-align:left}.guide-grid article{border-bottom:1px solid var(--line);padding-bottom:15px}.guide-grid article:last-child{border:0;padding:0}.ticker span{font-size:7px}.ticker{gap:10px}.dictionary{margin-inline:15px}.dictionary h2{font-size:26px}.logo{font-size:25px}nav button{height:31px;width:31px}}@media(prefers-reduced-motion:no-preference){.tile.reveal{animation:reveal .35s ease both;animation-delay:calc(var(--i)*65ms)}@keyframes reveal{from{transform:rotateX(80deg);opacity:.2}to{transform:rotateX(0);opacity:1}}.shake{animation:shake .25s}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}}