@font-face{font-family:Outfit;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/outfit-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Outfit;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/outfit-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-grotesk-viet.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg: #f8fafc;--card: #ffffff;--input: #ffffff;--muted: #f1f5f9;--border: #e2e8f0;--border2: #cbd5e1;--text: #0f172a;--dim: #64748b;--faint: #94a3b8;--brand: #6366f1;--brand-bg: rgba(99, 102, 241, .09);--shape: #334155;--arrow: #6366f1;--green: #22c55e;--green-text: #15803d;--green-dim: rgba(34, 197, 94, .1);--red-text: #dc2626;--red-dim: rgba(220, 38, 38, .09);--p100-bg: rgba(22, 163, 74, .12);--p100: #15803d;--phot-bg: rgba(22, 163, 74, .09);--phot: #16a34a;--pwrm-bg: rgba(202, 138, 4, .1);--pwrm: #a16207;--pcol-bg: rgba(234, 88, 12, .1);--pcol: #c2410c;--pcld-bg: rgba(220, 38, 38, .1);--pcld: #dc2626}[data-theme=dark]{--bg: #0f172a;--card: #1e293b;--input: #1e293b;--muted: #1e293b;--border: #334155;--border2: #475569;--text: #f1f5f9;--dim: #94a3b8;--faint: #64748b;--brand: #818cf8;--brand-bg: rgba(129, 140, 248, .14);--shape: #e2e8f0;--arrow: #818cf8;--green: #22c55e;--green-text: #4ade80;--green-dim: rgba(34, 197, 94, .12);--red-text: #f87171;--red-dim: rgba(239, 68, 68, .1);--p100-bg: rgba(74, 222, 128, .2);--p100: #4ade80;--phot-bg: rgba(134, 239, 172, .14);--phot: #86efac;--pwrm-bg: rgba(253, 224, 71, .14);--pwrm: #fde047;--pcol-bg: rgba(251, 146, 60, .15);--pcol: #fb923c;--pcld-bg: rgba(248, 113, 113, .15);--pcld: #f87171}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html{transition:background-color .25s ease}body{font-family:Outfit,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;justify-content:center;border-top:3px solid var(--brand);transition:background-color .25s ease,color .2s ease}#app{width:100%;max-width:560px;padding:0 1.25rem 2.5rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.theme-toggle{position:fixed;top:calc(.8rem + 3px);right:max(1rem,calc(50vw - 260px));width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--dim);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100;touch-action:manipulation;transition:background .2s,border-color .2s,transform .15s;box-shadow:0 1px 4px #00000014;line-height:1}.theme-toggle:hover{border-color:var(--border2);transform:scale(1.08)}header{width:100%;padding:1.25rem 0 1rem;text-align:center;border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:.75rem;transition:border-color .2s}h1{font-family:Space Grotesk,system-ui,sans-serif;font-size:1.6rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--text)}.page-steps{display:flex;gap:.3rem}.step{font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .6rem;border-radius:100px;color:var(--faint);background:var(--muted);border:1px solid var(--border);transition:background .2s,color .2s}.step.active{background:var(--brand);color:#fff;border-color:transparent}.step.done{background:var(--green-dim);color:var(--green-text);border-color:transparent}.shape-container{width:100%;padding:.25rem 0 0;display:flex;align-items:center;justify-content:center}.shape-container svg{width:100%;height:auto;max-height:min(32vh,240px);filter:drop-shadow(0 4px 20px rgba(99,102,241,.1))}.shape-container svg path{fill:var(--shape)}.shape-container svg circle:not(.pinpoint-dot){display:none}.reveal{width:100%;min-height:1.75rem;display:flex;align-items:center;justify-content:center}.reveal-name{opacity:0;transition:opacity .5s ease;font-size:1.2rem;font-weight:700;color:var(--text);letter-spacing:.02em}.reveal-name.visible{opacity:1}.next-btn{width:100%;background:var(--green);color:#fff;border:none;border-radius:.75rem;padding:.9rem;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,transform .1s;box-shadow:0 2px 10px #22c55e33}.next-btn:hover{background:#16a34a}.next-btn:active{transform:scale(.98)}.share-btn{width:100%;background:transparent;border:1px solid var(--border);border-radius:.75rem;padding:.9rem;font-family:inherit;font-size:.95rem;color:var(--dim);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s,border-color .15s}.share-btn:hover{background:var(--muted);border-color:var(--border2);color:var(--text)}.input-area{width:100%;display:flex;gap:.5rem;align-items:flex-start}.autocomplete-wrap{flex:1;position:relative}.autocomplete-wrap input{width:100%;background:var(--input);border:1px solid var(--border);border-radius:.75rem;padding:.8125rem 1rem;color:var(--text);font-family:inherit;font-size:1rem;outline:none;transition:border-color .15s,background .2s;-webkit-appearance:none}.autocomplete-wrap input:focus{border-color:var(--brand)}.autocomplete-wrap input::placeholder{color:var(--faint)}.autocomplete-wrap ul{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:.75rem;list-style:none;overflow:hidden;z-index:10;box-shadow:0 4px 16px #00000014}.autocomplete-wrap ul li{padding:.625rem 1rem;cursor:pointer;font-size:.95rem;color:var(--text);transition:background .1s}.autocomplete-wrap ul li:hover,.autocomplete-wrap ul li.active{background:var(--muted)}.guess-btn{background:var(--muted);color:var(--text);border:1px solid var(--border);border-radius:.75rem;padding:0 1.25rem;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;height:3rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.guess-btn:hover{background:var(--border);border-color:var(--border2)}.guesses{width:100%;display:flex;flex-direction:column;gap:.375rem}.guess-row{display:grid;grid-template-columns:1fr 5.5rem 2.5rem 3.25rem;gap:.375rem;height:2.75rem}.guess-row.empty{border:1px dashed var(--border);border-radius:.75rem;grid-template-columns:1fr}.cell{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:0 .75rem;display:flex;align-items:center;font-size:.875rem;overflow:hidden;white-space:nowrap;transition:background .2s,border-color .2s}.cell.name{justify-content:flex-start;font-size:.9rem;font-weight:500}.cell.dist{justify-content:center;color:var(--dim);font-size:.8rem;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.cell.prox{justify-content:center;font-weight:700;font-size:.875rem;border-radius:.75rem;border-color:transparent}.cell.prox-100{background:var(--p100-bg);color:var(--p100)}.cell.prox-hot{background:var(--phot-bg);color:var(--phot)}.cell.prox-warm{background:var(--pwrm-bg);color:var(--pwrm)}.cell.prox-cool{background:var(--pcol-bg);color:var(--pcol)}.cell.prox-cold{background:var(--pcld-bg);color:var(--pcld)}.dir-cell{background:var(--card);border:1px solid var(--border);border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background .2s,border-color .2s}.arrow{display:inline-block;line-height:1;color:var(--arrow)}.p2-subtitle{width:100%;text-align:center;font-size:.95rem;color:var(--dim);line-height:1.5}.p2-subtitle strong{color:var(--text)}.neighbours-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.neighbour-card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:.5rem .375rem .375rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;transition:border-color .2s,background .2s}.neighbour-card.guessed{border-color:var(--green);background:var(--green-dim)}.neighbour-shape{width:100%;height:72px;display:flex;align-items:center;justify-content:center;overflow:hidden}.neighbour-shape svg{max-width:100%;max-height:72px;width:100%;height:100%}.neighbour-shape svg path{fill:var(--shape)}.neighbour-shape svg circle{display:none}.neighbour-name{font-size:.65rem;font-weight:600;color:var(--green-text);text-align:center;line-height:1.2;word-break:break-word}.guess-history{width:100%;display:flex;flex-direction:column;gap:.2rem}.history-item{display:flex;align-items:center;gap:.625rem;font-size:.875rem;font-weight:500;padding:.4rem .75rem;border-radius:.5rem;border-left:3px solid transparent}.history-item.correct{border-left-color:var(--green);color:var(--green-text)}.history-item.wrong{border-left-color:transparent;color:var(--faint)}.p2-counter{width:100%;text-align:center;font-size:.8rem;color:var(--faint);font-variant-numeric:tabular-nums}.p3-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.3rem;background:var(--muted);padding:.3rem;border-radius:.875rem;border:1px solid var(--border)}.p3-tab{background:transparent;border:none;border-radius:.625rem;padding:.6rem;font-family:inherit;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);cursor:pointer;transition:background .15s,color .15s;touch-action:manipulation}.p3-tab.active{background:var(--brand);color:#fff}.p3-tab.locked,.p3-tab:disabled{opacity:.35;cursor:default}.p3-subtitle,.p4-subtitle{width:100%;text-align:center;font-size:.95rem;color:var(--dim);line-height:1.5}.p3-subtitle strong,.p4-subtitle strong{color:var(--text)}.p4-shape-wrap{position:relative}.p4-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2.5rem;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}.p4-options{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.p4-option{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:.8rem .5rem;font-family:inherit;font-size:.875rem;font-weight:500;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;line-height:1.3}.p4-option:hover:not(:disabled){background:var(--muted);border-color:var(--brand)}.p4-option.correct{background:var(--green-dim);border-color:var(--green);color:var(--green-text);font-weight:600}.p4-option.wrong{background:var(--red-dim);border-color:transparent;color:var(--faint);opacity:.7}.p4-option:disabled{cursor:default}