:root{--bg: #0a0a0a;--surface: #0f0f0f;--text: #ffffff;--text-2: rgba(255,255,255,.7);--text-3: rgba(255,255,255,.5);--border: rgba(255,255,255,.12);--hover: rgba(255,255,255,.04);--active: rgba(255,255,255,.06);--select: rgba(255,255,255,.08);--accent: #4a90e2;--success: #2e7d32;--warning: #b26a00;--danger: #b71c1c;--font: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--fs-11: 11px;--fs-12: 12px;--fs-13: 13px;--fs-14: 14px;--fs-16: 16px;--fs-20: 20px;--fs-24: 24px;--fs-36: 36px;--lh-tight: 1.2;--lh-normal: 1.4;--s-2: 2px;--s-4: 4px;--s-6: 6px;--s-8: 8px;--s-12: 12px;--s-16: 16px;--s-20: 20px;--s-24: 24px;--s-32: 32px;--s-40: 40px;--r-2: 2px;--r-3: 3px;--r-4: 4px;--r-6: 6px;--r-8: 8px;--shadow-1: 0 4px 12px rgba(0,0,0,.25);--shadow-2: 0 10px 20px rgba(0,0,0,.35);--shadow-3: 0 18px 40px rgba(0,0,0,.45);--ease-out: cubic-bezier(.2, .8, .2, 1);--dur-fast: .12s;--dur-base: .18s;--dur-slow: .24s}html,body,#root{height:100%}body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:lowercase}button,input,select,textarea{font-family:var(--font)}*{box-sizing:border-box}.page{min-height:100%;display:flex;align-items:center;justify-content:center;padding:var(--s-16)}.container{width:min(720px,100%)}.title{font-size:var(--fs-24);line-height:var(--lh-tight);margin:0 0 var(--s-16);color:var(--text);font-weight:500}.brand{font-size:var(--fs-12);line-height:var(--lh-tight);color:var(--text);font-weight:400}.subtitle{color:var(--text-2);font-size:var(--fs-12);margin:0 0 var(--s-12);font-weight:400}.body{font-size:var(--fs-12);line-height:var(--lh-normal);color:var(--text);font-weight:400}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-6);box-shadow:var(--shadow-1);padding:var(--s-16)}.message{font-size:var(--fs-12);color:var(--text);white-space:pre-wrap}.msg{display:flex;align-items:flex-start;gap:12px}.msg .avatar{width:32px;height:32px;border-radius:50%;background:var(--hover);border:1px solid var(--border);flex:0 0 32px;display:flex;align-items:center;justify-content:center}.msg .avatar:after{content:"?";color:var(--text-2);font-size:var(--fs-12)}.msg .bubble{flex:1;background:#ffffff05;border:1px solid var(--border);border-radius:var(--r-6);padding:10px 12px}.msg .bubble.swap{animation:fade-swap var(--dur-base) var(--ease-out)}.mention{font-weight:500;color:var(--text);background:var(--hover);border:1px solid var(--border);border-radius:var(--r-3);padding:0 4px}.options{display:grid;grid-template-columns:1fr;gap:var(--s-12);margin-top:var(--s-16)}@media (min-width: 600px){.options{grid-template-columns:1fr 1fr}}@media (min-width: 1024px){.options{grid-template-columns:repeat(4,1fr)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--r-4);font-size:var(--fs-12);font-weight:500;border:1px solid var(--border);color:var(--text-2);background:transparent;cursor:pointer;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}.btn:hover{background:var(--hover);color:var(--text);border-color:#ffffff4d}.btn:focus-visible{outline:none;box-shadow:0 0 0 2px #4a90e259;border-color:#fff3}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.solid{background:var(--text);color:var(--bg);border-color:transparent}.btn.solid:hover{background:#ffffffe6}.btn.good{background:var(--success);border-color:#ffffff26;color:#fff}.btn.bad{background:var(--danger);border-color:#ffffff26;color:#fff}.fade-in{animation:fade-in var(--dur-base) var(--ease-out)}.pop{animation:pop var(--dur-fast) var(--ease-out)}.emoji{display:inline-block;opacity:0;transform:translateY(2px) scale(.98);animation:emoji-in var(--dur-base) var(--ease-out) forwards}.swap{animation:fade-alpha var(--dur-base) var(--ease-out)}.opt{opacity:0;animation:fade-alpha var(--dur-base) var(--ease-out) forwards}@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{transform:scale(.98)}to{transform:scale(1)}}@keyframes fade-swap{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-alpha{0%{opacity:0}to{opacity:1}}@keyframes emoji-in{0%{opacity:0;transform:translateY(2px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.flash-good{animation:flashGood var(--dur-slow) var(--ease-out)}.flash-bad{animation:flashBad var(--dur-slow) var(--ease-out)}@keyframes flashGood{0%{background:var(--surface);box-shadow:var(--shadow-1)}50%{background:#2e7d3214;box-shadow:0 0 0 3px #2e7d3259}to{background:var(--surface);box-shadow:var(--shadow-1)}}@keyframes flashBad{0%{background:var(--surface);box-shadow:var(--shadow-1)}50%{background:#b71c1c14;box-shadow:0 0 0 3px #b71c1c59}to{background:var(--surface);box-shadow:var(--shadow-1)}}.row{display:flex;align-items:center;gap:8px}.stack{display:flex;flex-direction:column;gap:var(--s-12)}.footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s-16)}.muted{color:var(--text-3);font-size:var(--fs-12)}.grid{display:grid;grid-template-columns:repeat(4,24px);gap:4px}.square{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:18px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.divider{height:1px;background:var(--border);margin:8px 0}.share{white-space:pre-wrap;font-family:var(--font);font-size:var(--fs-12);color:var(--text-2);background:#ffffff05;border:1px solid var(--border);border-radius:var(--r-4);padding:var(--s-12)}.kbd{border:1px solid var(--border);border-bottom-color:#fff3;background:#ffffff05;padding:2px 6px;border-radius:var(--r-3);font-size:var(--fs-11);color:var(--text-3)}.emojis{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;line-height:1;margin-top:var(--s-8)}.results-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)}.results-card{padding:var(--s-24)}.results-card .btn{height:32px}.center{text-align:center}.dots{display:flex;align-items:center;gap:8px;margin-top:8px}.dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--border);background:#ffffff0a}.dot.good{background:#2e7d32e6;border-color:#2e7d3299}.dot.bad{background:#b71c1ce6;border-color:#b71c1c99}