:root{color-scheme:light dark;--bg:#f7f7f0;--surface:#fffefa;--ink:#263b31;--muted:#7a857a;--line:#e2e5da;--soft:#eef0e7;--green:#4c795c;--green-soft:#e6ecdf;--gold:#b4934a;--gold-soft:#f1ead7;--absent:#929b90;--key:#e5e8df;--shadow:0 20px 70px #263b3110;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}a{color:inherit;text-decoration:none}.site-header{max-width:1440px;margin:auto;height:105px;padding:0 6%;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.brand{font-size:30px;letter-spacing:-1.8px;font-weight:750;display:flex;align-items:center}.brand-icon{display:inline-grid;place-items:center;width:35px;height:35px;margin-right:11px;border-radius:10px;background:var(--green);color:white;font-family:Georgia,serif;font-size:36px;font-weight:400;padding-bottom:7px}.brand-dot{color:var(--green)}.header-note{font-size:12px;color:var(--muted);margin-top:5px}.site-header nav{margin-left:auto;display:flex;gap:10px}.icon-button{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:50%;transition:background .2s}.icon-button:hover{background:var(--soft)}svg{width:22px;height:22px;flex-shrink:0}main{max-width:1390px;margin:auto;display:grid;grid-template-columns:1fr 450px .85fr;gap:55px;align-items:center;padding:48px 5% 38px;min-height:calc(100svh - 175px)}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--green);display:flex;align-items:center;gap:8px}.eyebrow>span{width:6px;height:6px;background:var(--green);border-radius:50%}h1{font-size:clamp(36px,3.6vw,53px);line-height:1.15;letter-spacing:-2px;font-weight:500;margin:28px 0 22px}h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:var(--green);line-height:1.3}.intro>p{font-size:13px;color:var(--muted);line-height:1.9}.intro-example{display:flex;gap:5px;margin-top:32px;transform:rotate(-6deg);width:max-content}.intro-example span{width:36px;height:39px;border-radius:7px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-size:17px;font-weight:700}.intro-example span:nth-child(2){background:var(--gold-soft);color:var(--gold);transform:translateY(-4px)}.intro-example span:nth-child(4){background:var(--green);color:#fff;transform:translateY(-3px)}.intro-example span:last-child{font-size:17px;background:var(--soft);color:var(--muted)}.intro-bottom{display:flex;gap:14px;align-items:center;margin-top:65px}.sun-mark{font-size:39px;color:var(--gold);line-height:1}.intro-bottom p{font-size:11px;line-height:1.8;color:var(--muted)}.intro-bottom strong{font-weight:500;color:var(--ink)}.game{background:var(--surface);padding:26px 25px 18px;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);width:100%;max-width:450px;margin:auto}.mode-tabs{display:flex;background:var(--soft);padding:4px;border-radius:12px;gap:4px}.mode-tabs button{flex:1;min-height:40px;border-radius:9px;font-size:12px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);transition:.2s}.mode-tabs button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 2px 5px #00000008}.mode-tabs svg{height:16px;width:16px}.infinity{font-size:23px;line-height:1}.game-heading{display:flex;align-items:center;justify-content:space-between;margin:25px 4px 20px}.puzzle-number{color:var(--muted);font-size:9px;letter-spacing:1.6px;font-weight:600}h2{font-size:18px;font-weight:600;letter-spacing:-.5px;margin:7px 0 0}.attempt-badge{padding:7px 9px;font-size:11px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-variant-numeric:tabular-nums}.board{display:grid;grid-template-rows:repeat(6,1fr);gap:7px;width:292px;margin:auto}.board-row{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.tile{aspect-ratio:1;border:1.5px solid var(--line);border-radius:9px;display:grid;place-items:center;font-size:25px;font-weight:650;transition:background .25s,border-color .2s;position:relative}.tile.filled{border-color:var(--muted);animation:pop .12s ease-out}.tile.active{border-color:var(--green);background:var(--green-soft)}.correct{background:#4c795c!important;border-color:#4c795c!important;color:#fff!important}.present{background:#8b6b2b!important;border-color:#8b6b2b!important;color:#fff!important}.absent{background:#697567!important;border-color:#697567!important;color:#fff!important}.tile.reveal{animation:reveal .4s both}.tile.reveal:after{content:'';position:absolute;bottom:5px;width:5px;height:2px;background:currentColor;opacity:.65}.tile.correct:after{width:9px;height:4px;border-left:1px solid;border-bottom:1px solid;transform:rotate(-45deg);background:none;bottom:6px}.tile.present:after{width:4px;height:4px;border-radius:50%;bottom:5px}.message{font-size:11px;color:var(--muted);text-align:center;min-height:32px;margin:16px -10px 6px;line-height:1.4;display:grid;place-content:center}.message.error{color:#b95842}.message.success{color:var(--green);font-weight:650}.keyboard{display:flex;flex-direction:column;gap:6px;margin:0 -10px;touch-action:manipulation}.key-row{display:flex;justify-content:center;gap:4px}.key{padding:0;flex:1;min-width:0;max-width:36px;height:44px;background:var(--key);border-radius:6px;font-size:12px;font-weight:600;transition:filter .15s;user-select:none}.key:hover{filter:brightness(.95)}.key:active{transform:translateY(1px)}.key.action{max-width:55px;flex:1.65;font-size:9px;letter-spacing:.5px}.key.enter{background:var(--green);color:white}.key.backspace{font-size:19px}.game-bottom{margin-top:16px;display:flex;align-items:center;justify-content:center;min-height:22px;gap:8px}.save-note{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:3px}.save-note svg{width:12px;height:12px}.text-button{font-size:11px;color:var(--green);font-weight:600;padding:5px}.guide{padding-left:5px}.guide-symbol{font-size:46px;color:var(--gold);margin-bottom:20px}h3{font-size:22px;line-height:1.4;font-weight:500;letter-spacing:-.5px;margin:0 0 27px}.legend-item{display:flex;gap:12px;align-items:center;margin:20px 0}.sample{width:32px;height:34px;border-radius:6px;display:inline-grid;place-items:center;font-size:16px;font-weight:600;flex-shrink:0}.legend-item p{font-size:10px;line-height:1.7;color:var(--muted);margin:0}.legend-item strong{font-size:11px;color:var(--ink);font-weight:550}.guide-tip{border-top:1px solid var(--line);margin-top:30px;padding-top:23px;max-width:205px}.guide-tip>span{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.guide-tip p{font-size:12px;line-height:1.8;color:var(--muted)}footer{border-top:1px solid var(--line);max-width:1260px;margin:0 auto;padding:22px 0;display:flex;justify-content:space-between;font-size:10px;color:var(--muted);align-items:center;gap:12px}.heart{color:var(--green);margin-left:3px;font-size:14px}.footer-button{font-size:10px;padding:3px}.footer-button:hover{text-decoration:underline}dialog{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px 26px 28px;max-width:420px;width:calc(100% - 28px);max-height:85svh;box-shadow:0 20px 100px #0003}dialog::backdrop{background:#0f211780;backdrop-filter:blur(5px)}.modal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}dialog h2{font-size:25px;margin:8px 0 16px}dialog p{font-size:13px;line-height:1.8;color:var(--muted)}dialog a{text-decoration:underline}dialog .legend-item{margin:15px 0}dialog .legend-item p{font-size:11px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:25px 0}.stat strong{display:block;font-size:27px;font-weight:550;font-variant-numeric:tabular-nums}.stat span{font-size:9px;color:var(--muted)}.distribution{display:grid;gap:8px;margin:20px 0}.bar-row{display:flex;align-items:center;gap:10px;font-size:12px}.bar-track{flex:1}.bar{min-width:25px;background:var(--green-soft);color:var(--green);padding:5px 9px;border-radius:4px;font-size:11px;text-align:right}.primary-button{background:var(--green);color:white;padding:14px 20px;width:100%;border-radius:10px;font-weight:600;font-size:13px;margin-top:10px}.result-icon{font-size:43px;color:var(--gold);margin:8px 0}.answer-word{font-size:28px!important;letter-spacing:5px;font-weight:650;color:var(--green)!important;margin:15px 0!important}.result-grid{font-size:20px;line-height:1.6;letter-spacing:2px;margin:20px 0}.countdown{font-variant-numeric:tabular-nums}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);border-radius:10px;padding:12px 20px;font-size:12px;z-index:5;max-width:90%;text-align:center}.shake{animation:shake .3s}@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}@keyframes pop{50%{transform:scale(1.06)}}@keyframes reveal{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}[hidden]{display:none!important}
@media(prefers-color-scheme:dark){:root{--bg:#151c19;--surface:#1d2621;--ink:#e4e9de;--muted:#9ba89b;--line:#354138;--soft:#27332b;--green:#709879;--green-soft:#2e4334;--gold:#ba9b58;--gold-soft:#3c3626;--absent:#526055;--key:#35433a;--shadow:0 20px 70px #0002}.brand-icon,.key.enter,.primary-button{background:#527b5e}.tile.active{background:#283a2e}.message.error{color:#ec947d}}
@media(min-width:1500px){main{gap:75px}.site-header{max-width:1440px}}@media(max-width:1150px){main{grid-template-columns:1fr 420px;max-width:930px;gap:65px;padding:35px 5%}.guide{display:none}.game{max-width:420px}footer{margin:0 5%}.site-header{height:85px}main{min-height:calc(100svh - 150px)}}@media(max-width:760px){.site-header{height:70px;padding:0 22px}.brand{font-size:27px}.brand-icon{width:31px;height:31px;font-size:32px;border-radius:8px}.header-note,.intro,.guide,.desktop-only{display:none}main{display:block;min-height:0;padding:20px 16px 18px}.game{border:0;padding:0;background:none;box-shadow:none;max-width:400px;border-radius:0}.mode-tabs{max-width:330px;margin:auto}.mode-tabs button{min-height:38px}.game-heading{margin:22px 7px 18px}.game-heading h2{font-size:20px}.board{width:min(300px,78vw);gap:6px}.board-row{gap:6px}.tile{border-radius:8px;font-size:26px}.keyboard{margin:0 -5px;gap:6px}.key-row{gap:4px}.key{height:48px;font-size:13px;max-width:36px}.key.action{font-size:9px;max-width:56px}.message{margin:13px 0 8px;min-height:24px;font-size:11px}.game-bottom{margin-top:14px}.save-note{font-size:9px}footer{margin:0 22px;padding:17px 0;font-size:9px}.footer-button{font-size:10px}dialog{padding:20px 22px}}
@media(max-width:760px) and (max-height:780px){.site-header{height:60px}main{padding-top:13px;padding-bottom:10px}.game-heading{margin:16px 7px 12px}.board{width:min(264px,72vw);gap:5px}.board-row{gap:5px}.tile{font-size:24px}.key{height:44px}.message{margin:10px 0 7px;font-size:10px;min-height:20px}.game-bottom{margin-top:10px}footer{padding:13px 0}}
@media(max-width:360px){main{padding-left:11px;padding-right:11px}.key-row{gap:3px}.key{font-size:11px}.game-heading h2{font-size:18px}.save-note{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}