:root{--bg:#ffffff;--ink:#111111;--ink-mid:#444444;--ink-light:#999999;--correct:#6aaa64;--present:#c9b458;--absent:#787c7e;--tile-face:#ffffff;--tile-border:#cccccc;--key-face:#111111;--key-text:#ffffff;--card-bg:#ffffff}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:auto}body{background:var(--bg);color:var(--ink);font-family:'Instrument Serif',Georgia,serif;display:flex;justify-content:center;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:10000;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}body::before{content:'';position:fixed;inset:6px;border:2px solid var(--ink);pointer-events:none;z-index:999}#app{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;height:100vh;height:100dvh;padding:16px 8px 4px}header{text-align:center;padding:8px 0 4px;flex-shrink:0}.intro{font-family:'Instrument Serif',Georgia,serif;font-size:1.05rem;font-style:normal;color:var(--ink-mid);line-height:1.5;letter-spacing:.02em;max-width:340px;text-align:center}.subtitle::after{content:'\2002\2014'}#toast-container{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.toast{background:var(--ink);color:var(--key-text);padding:12px 24px;border:2px solid var(--ink);font-family:'Instrument Serif',Georgia,serif;font-size:.85rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;animation:.2s toast-in,.3s 1.2s forwards toast-out;pointer-events:none}@keyframes toast-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{from{opacity:1}to{opacity:0}}#board{display:flex;flex-direction:column;align-items:center;gap:5px;flex-grow:1;min-height:0;justify-content:center;overflow-y:auto;padding:4px 0}.row{display:flex;gap:5px}.tile{width:58px;height:58px;border:3px solid var(--tile-border);display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',Georgia,serif;font-size:2rem;font-weight:400;text-transform:uppercase;color:var(--ink);background:var(--tile-face);transition:border-color .1s;perspective:500px}.tile.filled{border-color:var(--ink-mid);animation:.1s pop}.tile[data-state=correct]{background:var(--correct);border-color:#5a9a54;color:#fff}.tile[data-state=present]{background:var(--present);border-color:#b9a448;color:#fff}.tile[data-state=absent]{background:var(--absent);border-color:#686c6e;color:#fff}@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}.tile.flip{animation:.5s forwards flip}@keyframes flip{0%,100%{transform:rotateX(0)}45%,55%{transform:rotateX(90deg)}}.row.shake{animation:.5s shake}@keyframes shake{0%,100%{transform:translateX(0)}10%,50%,90%{transform:translateX(-4px)}30%,70%{transform:translateX(4px)}}.tile.bounce{animation:.6s bounce}@keyframes bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-20px)}60%{transform:translateY(-8px)}}#keyboard{flex-shrink:0;width:100%;max-width:500px;padding:0 2px 8px;display:flex;flex-direction:column;align-items:center;gap:6px}.keyboard-row{display:flex;gap:5px;width:100%;justify-content:center}.spacer-half{flex:0.5}#keyboard button{flex:1;max-width:44px;height:56px;border:2px solid var(--ink);border-radius:4px;background:var(--key-face);color:var(--key-text);font-family:'Instrument Serif',Georgia,serif;font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s,transform 50ms,box-shadow 50ms;-webkit-tap-highlight-color:transparent;touch-action:manipulation;box-shadow:0 3px 0 #000,0 4px 4px rgba(0,0,0,.12);text-transform:uppercase;letter-spacing:.02em}#keyboard button:hover{background:#222}#keyboard button:active,#keyboard button[data-state=absent]:active,#keyboard button[data-state=correct]:active,#keyboard button[data-state=present]:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.6)}#keyboard button.wide-key{max-width:66px;flex:1.5;font-size:.7rem;letter-spacing:.04em}#keyboard button[data-state=correct]{background:var(--correct);border-color:#5a9a54;color:#fff;box-shadow:0 3px 0 #4a8a44}#keyboard button[data-state=correct]:hover{background:#5a9a54}#keyboard button[data-state=present]{background:var(--present);border-color:#b9a448;color:#fff;box-shadow:0 3px 0 #a99438}#keyboard button[data-state=present]:hover{background:#b9a448}#keyboard button[data-state=absent]{background:var(--absent);border-color:#686c6e;color:#fff;box-shadow:0 3px 0 #585c5e}#keyboard button[data-state=absent]:hover{background:#686c6e}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:500;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .4s}.overlay.hidden{opacity:0;pointer-events:none}.overlay-backdrop{position:absolute;inset:0;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.announcement-card{position:relative;background:var(--card-bg);border:3px solid var(--ink);padding:40px 32px;max-width:380px;width:90%;text-align:center;box-shadow:0 0 0 6px var(--card-bg),0 0 0 8px var(--ink-mid),0 12px 40px rgba(0,0,0,.12);transform:translateY(30px);animation:.6s .2s forwards slide-up;opacity:0}@keyframes slide-up{to{transform:translateY(0);opacity:1}}.announcement-intro{font-family:'Instrument Serif',Georgia,serif;font-size:.85rem;font-weight:400;color:var(--ink-light);letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px}.announcement-intro::before{content:'\2014\2002'}.announcement-intro::after{content:'\2002\2014'}.announcement-name{font-family:'Instrument Serif',Georgia,serif;font-size:4rem;font-weight:400;color:var(--ink);margin-bottom:8px;font-style:normal;line-height:1.1}.announcement-name .middle-names{font-style:italic}.announcement-name::after{content:'';display:block;width:80px;height:2px;background:var(--ink-mid);margin:12px auto}.announcement-details{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.detail{display:flex;justify-content:center;gap:12px;font-size:.95rem}.detail-label{color:var(--ink-light);font-weight:400;min-width:60px;text-align:right;text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;align-self:center}.detail-value{color:var(--ink);font-weight:400;min-width:100px;text-align:left}.announcement-parents{font-family:'Instrument Serif',Georgia,serif;font-size:1.1rem;font-weight:400;color:var(--ink);margin-bottom:4px;letter-spacing:.08em}.announcement-tagline{font-size:.9rem;color:var(--ink-mid);font-style:italic;margin-bottom:24px}.share-button{background:var(--ink);color:var(--bg);border:2px solid var(--ink);padding:14px 32px;font-family:'Instrument Serif',Georgia,serif;font-size:.9rem;font-weight:400;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;transition:background-color .2s,transform 50ms,box-shadow 50ms;touch-action:manipulation;box-shadow:0 3px 0 #000}.share-button:hover{background:#222}.share-button:active{transform:translateY(2px);box-shadow:0 1px 0 #000}.share-confirmation{margin-top:10px;font-size:.85rem;color:var(--ink);font-weight:400;letter-spacing:.04em}.share-confirmation.hidden{display:none}.try-again-card{position:relative;background:var(--card-bg);border:3px solid var(--ink);padding:40px 32px;max-width:340px;width:90%;text-align:center;box-shadow:0 0 0 6px var(--card-bg),0 0 0 8px var(--ink-mid),0 12px 40px rgba(0,0,0,.12);transform:translateY(30px);animation:.6s .2s forwards slide-up;opacity:0}.try-again-title{font-family:'Instrument Serif',Georgia,serif;font-size:2.4rem;font-weight:400;font-style:italic;color:var(--ink);margin-bottom:8px}.try-again-message{font-family:'Instrument Serif',Georgia,serif;font-size:1rem;color:var(--ink-mid);margin-bottom:28px;letter-spacing:.04em}#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}@media (max-height:700px){header h1{font-size:1.4rem;letter-spacing:.1em}header h1::after{font-size:.35rem;margin-top:4px}.subtitle{font-size:.7rem}header{padding:4px 0 2px}.tile{width:50px;height:50px;font-size:1.6rem}#board{gap:4px}#keyboard button{height:50px}}@media (max-height:600px){.tile{width:44px;height:44px;font-size:1.4rem;border-width:2px}#board{gap:3px;padding:2px 0}#keyboard button{height:44px;font-size:.9rem}.keyboard-row{gap:4px}header h1::after{display:none}}@media (max-width:370px){.tile{width:48px;height:48px;font-size:1.5rem}#keyboard button{font-size:.9rem}.keyboard-row{gap:3px}.announcement-name{font-size:2.8rem}.announcement-card{padding:28px 20px}body::before{inset:3px;border-width:1px}}