:root{--stone: #dcdbd1;--sumi: #1a1a1a;--shuiro: #e74c3c;--bg: var(--stone);--fg: var(--sumi);--fg-dim: rgba(26, 26, 26, .55);--fg-muted: rgba(26, 26, 26, .3);--you: var(--shuiro);--rule: rgba(26, 26, 26, .1);--panel: rgba(26, 26, 26, .05);--panel-strong: rgba(26, 26, 26, .09);--danger: #8a2a2a}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}button,a{font:inherit;color:inherit;background:none;border:none;cursor:pointer}button:focus-visible,a:focus-visible{outline:1px solid var(--fg);outline-offset:4px}.app{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.header{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 28px;font-size:12px;letter-spacing:.15em;color:var(--fg-dim)}.header h1{font-family:inherit;font-weight:700;font-size:18px;letter-spacing:.3em;color:var(--fg)}.header .tagline{font-size:11px;margin-top:4px;letter-spacing:.1em;text-transform:none}.ribbon{display:flex;align-items:baseline;gap:28px;padding:18px clamp(18px,5vw,120px);max-width:1600px;width:100%;margin:0 auto;font-size:13px;color:var(--fg-dim)}.ribbon-progress{font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--fg)}.ribbon-field{display:inline-flex;align-items:baseline;gap:8px}.ribbon-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--fg-muted)}.ribbon-font{font-size:15px;color:var(--fg)}.ribbon-link{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px;transition:border-color .16s,color .16s}.ribbon-link:hover{border-bottom-color:var(--fg);color:var(--fg)}.ribbon-meta{color:var(--fg);font-variant-numeric:tabular-nums}.ribbon-spacer{flex:1}.intro-card{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--bg);z-index:10;cursor:pointer;padding:32px;animation:intro-in .42s cubic-bezier(.25,.1,.25,1) both}.intro-number{font-size:14px;letter-spacing:.25em;color:var(--fg-dim);text-transform:uppercase;font-weight:600;font-variant-numeric:tabular-nums}.intro-name{font-size:clamp(56px,11vw,200px);line-height:1;color:var(--fg);text-align:center;max-width:92vw;overflow-wrap:break-word}.intro-designer{font-size:14px;letter-spacing:.1em;color:var(--fg-dim)}.intro-hint{margin-top:24px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim);animation:hint-pulse 2s ease-in-out infinite}.intro-byline{position:absolute;bottom:24px;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--fg-muted)}@keyframes intro-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes hint-pulse{0%,to{opacity:.55}50%{opacity:1}}.ribbon,.controls{animation:chrome-in .28s ease-out both}.word{animation:chrome-in .32s 60ms ease-out both}@keyframes chrome-in{0%{opacity:0}to{opacity:1}}.stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.stage .guide-line{position:absolute;left:0;right:0;height:1px;background:var(--rule);pointer-events:none;z-index:0}.word{position:relative;display:block;white-space:nowrap;font-feature-settings:"kern" 0;font-kerning:none;user-select:none;-webkit-user-select:none;touch-action:none}.word .letter{position:absolute;top:0;left:0;display:inline-block;transition:opacity .12s,color .12s;touch-action:none;cursor:grab}.word.has-focus .letter:not(.focused),.word.pointer-active .letter:not(.active){opacity:.45}.word .letter.active,.word .letter.focused{opacity:1}.word .letter.locked{cursor:not-allowed;opacity:1}.word .letter:active{cursor:grabbing}.word.review .letter:not(.user-letter),.word.animating .letter:not(.user-letter){transition:transform .6s cubic-bezier(.25,.1,.25,1),opacity .6s ease-out,color .6s cubic-bezier(.25,.1,.25,1);pointer-events:none;opacity:1!important}.word.animating .letter:not(.user-letter){color:var(--you)!important}.word .review-ghost{pointer-events:none;color:var(--fg)!important;opacity:1;transition:opacity .6s ease-out,transform .6s cubic-bezier(.25,.1,.25,1)}.word .review-ghost.review-ghost-hidden{opacity:0}.score{opacity:0;transition:opacity .4s ease-out}.score.score-visible{opacity:1}.review-toggle{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--panel);animation:chrome-in .28s ease-out both}.review-toggle button{font:inherit;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:7px 14px;border-radius:999px;color:var(--fg-dim);transition:color .18s ease,background .18s ease;cursor:pointer}.review-toggle button:hover:not(.active){color:var(--fg)}.review-toggle button.active{background:var(--fg);color:var(--bg)}.meta{position:relative;padding:20px 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.meta dl{display:grid;grid-template-columns:auto auto;gap:4px 16px;font-size:13px;color:var(--fg-dim)}.meta dt{color:var(--fg-dim)}.meta dd{color:var(--fg)}.meta .progress{font-variant-numeric:tabular-nums;font-size:13px;color:var(--fg-dim)}.controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:28px;padding:20px clamp(18px,5vw,120px);max-width:1600px;width:100%;margin:0 auto;min-height:112px;font-size:13px;color:var(--fg-dim)}.controls-center{justify-self:center;min-height:56px;display:flex;flex-direction:column;align-items:center;gap:14px}.controls-action{justify-self:end}.credits{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.credits .ribbon-field{display:grid;grid-template-columns:80px auto;gap:16px;align-items:baseline}.controls-spacer{flex:1}.controls .progress{font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.1em;color:var(--fg-dim);text-transform:uppercase}.controls .score{font-family:inherit;font-size:44px;font-variant-numeric:tabular-nums;line-height:1;display:flex;align-items:baseline;gap:10px}.controls .score small{font-family:inherit;font-size:11px;color:var(--fg-dim);letter-spacing:.2em;text-transform:uppercase}.btn{padding:14px 28px;background:var(--panel);border-radius:6px;font-family:inherit;font-size:22px;color:var(--fg);transition:background .12s}.btn:hover{background:var(--panel-strong)}.shortcuts-toggle{font-size:12px;letter-spacing:.1em;color:var(--fg-dim);padding:6px 10px;border-radius:4px;background:var(--panel)}.reveal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:32px 20px;background:#1a1a1a8c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:backdrop-in .32s ease-out both;overflow-y:auto}.reveal-modal{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:min(640px,100%);max-height:92vh;overflow-y:auto;padding:44px clamp(24px,5vw,56px);background:var(--bg);border-radius:14px;box-shadow:0 30px 80px #00000040;animation:reveal-in .42s 60ms cubic-bezier(.25,.1,.25,1) both}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}.reveal-emoji{font-size:52px;line-height:1;margin-bottom:10px;animation:reveal-pop .9s 80ms cubic-bezier(.25,.1,.25,1) backwards}.reveal-name{font-size:clamp(40px,6vw,80px);font-weight:800;line-height:1;letter-spacing:-.01em;color:var(--fg);margin-bottom:24px}.reveal-score{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:24px}.reveal-score-number{font-size:64px;line-height:1;font-variant-numeric:tabular-nums;color:var(--you);font-weight:700}.reveal-score-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted);font-variant-numeric:tabular-nums}.reveal-prompt{font-size:11px;letter-spacing:.3em;color:var(--fg-muted);text-transform:uppercase;margin-bottom:14px}.reveal-description{font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--fg);max-width:620px;margin-bottom:24px}.reveal-keywords{list-style:none;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}.reveal-keywords li{padding:6px 14px;border:1px solid var(--rule);border-radius:100px;font-size:12px;letter-spacing:.1em;color:var(--fg-dim);text-transform:uppercase}.reveal-fonts-label{font-size:11px;letter-spacing:.3em;color:var(--fg-muted);text-transform:uppercase;margin-bottom:16px}.reveal-fonts{list-style:none;display:flex;flex-direction:column;gap:18px;width:100%;max-width:600px;margin-bottom:44px}.reveal-fonts li{display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--rule)}.reveal-fonts li:last-child{border-bottom:none;padding-bottom:0}.reveal-font-name{width:fit-content;font-size:32px;line-height:1.1;color:var(--fg);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .16s}.reveal-font-name:hover{border-bottom-color:var(--fg)}.reveal-font-blurb{font-size:14px;color:var(--fg-dim);line-height:1.45;text-align:center}.reveal-affinity{width:100%;max-width:440px;display:flex;flex-direction:column;gap:6px;margin-bottom:36px}.affinity-row{display:grid;grid-template-columns:18px 1fr 80px 30px;gap:10px;align-items:center;font-size:12px;color:var(--fg-dim)}.affinity-row.winner{color:var(--fg);font-weight:600}.affinity-emoji{font-size:14px}.affinity-name{text-align:left}.affinity-bar{position:relative;height:4px;background:var(--panel);border-radius:2px;overflow:hidden}.affinity-fill{position:absolute;inset:0 auto 0 0;background:var(--fg-muted);transition:width .6s cubic-bezier(.25,.1,.25,1)}.affinity-row.winner .affinity-fill{background:var(--you)}.affinity-score{text-align:right;font-variant-numeric:tabular-nums}.reveal-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.reveal-credits{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-muted)}.reveal-credit-link{color:var(--fg-dim);text-decoration:none;border-bottom:1px solid transparent;transition:color .16s,border-color .16s}.reveal-credit-link:hover{color:var(--fg);border-bottom-color:var(--fg-dim)}.reveal-credit-sep{color:var(--fg-muted)}.reveal-inspired{margin-top:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);text-align:center}@keyframes reveal-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes reveal-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.locked-hint{position:absolute;top:24px;left:50%;transform:translate(-50%);padding:6px 12px;background:var(--danger);color:#fff;font-size:11px;letter-spacing:.05em;border-radius:4px;pointer-events:none;animation:fade-out 1.4s forwards;z-index:2}@keyframes fade-out{0%,40%{opacity:1}to{opacity:0}}.tutorial-cursor{position:absolute;top:50%;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:50%;background:var(--you);pointer-events:none;z-index:4;animation:tutorial-cursor-pulse 1.4s ease-in-out infinite}@keyframes tutorial-cursor-pulse{0%,to{box-shadow:0 0 #e74c3c59}50%{box-shadow:0 0 0 10px #e74c3c00}}@media(max-width:720px){.ribbon{font-size:11px;padding:14px 18px}.ribbon-progress{font-size:11px}.controls{grid-template-columns:1fr;grid-auto-rows:auto;gap:24px;padding:24px 20px 32px;min-height:0;justify-items:center;text-align:center}.controls-center{justify-self:center;min-height:0}.controls-action{justify-self:center}.credits{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:10px 14px;font-size:12px}.credits .ribbon-field{display:inline-flex;grid-template-columns:none;gap:0}.credits .ribbon-label{display:none}.credits .ribbon-field+.ribbon-field:before{content:"·";margin-right:10px;color:var(--fg-muted)}.credits .ribbon-font{font-size:13px}.controls .score{font-size:32px}.btn{font-size:16px;padding:10px 18px}.reveal-modal{padding:32px 22px;border-radius:12px}.reveal-emoji{font-size:42px}.reveal-name{font-size:clamp(32px,10vw,52px)}.reveal-description{font-size:15px}.reveal-font-name{font-size:26px}.reveal-score-number{font-size:48px}.reveal-fonts{gap:14px;margin-bottom:32px}.reveal-fonts li{padding-bottom:12px}.intro-name{font-size:clamp(48px,14vw,120px)}.intro-designer{font-size:12px}}@media(max-width:400px){.ribbon{padding:14px 16px}.controls{padding:20px 16px 28px;gap:20px}}