:root{color:#f8fafc;background:#111827;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{touch-action:none;user-select:none;-webkit-user-select:none}button{color:inherit;font:inherit}.app{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 18% 18%,rgba(245,158,11,.16),transparent 30%),linear-gradient(145deg,#111827,#182235 52%,#10151f);cursor:crosshair}.corner{position:fixed;top:max(12px,env(safe-area-inset-top));z-index:4;display:grid;width:58px;height:58px;place-items:center;border:3px solid rgba(248,250,252,.72);border-radius:999px;box-shadow:0 12px 32px #00000042;font-size:18px;font-weight:950;transition:transform .18s ease,background .18s ease}.corner[data-dragging=true]{transition:background .18s ease}.corner-left{left:max(12px,env(safe-area-inset-left))}.corner-right{right:max(12px,env(safe-area-inset-right));padding:0}.mode-dot{background:#22c55e;color:#052e16}.mode-dot[data-mode=G]{background:#38bdf8;color:#082f49}.help-dot{background:#f97316;color:#431407}.status{position:fixed;top:max(82px,calc(env(safe-area-inset-top) + 82px));left:50%;z-index:2;min-width:96px;min-height:64px;transform:translate(-50%);color:#f8fafcc7;font-size:52px;font-weight:900;line-height:1;text-align:center}.finger-ring{position:fixed;z-index:3;display:grid;width:96px;height:96px;place-items:center;transform:translate(-50%,-50%);border:4px solid var(--ring-color, #f59e0b);border-radius:50%;background:var(--ring-fill, rgba(245, 158, 11, .08));box-shadow:0 0 26px var(--ring-glow, rgba(245, 158, 11, .5));pointer-events:none;animation:pulse 1.8s ease-in-out infinite}.finger-ring span{display:grid;width:34px;height:34px;place-items:center;border-radius:999px;background:#f8fafc;color:#111827;font-size:15px;font-weight:900}.result,.finger-result{position:fixed;inset:0;z-index:5;display:grid;gap:10px;place-content:center;border:0;background:#111827f5;text-align:center}.result span{font-size:clamp(52px,17vw,132px);font-weight:950;letter-spacing:0}.result small,.finger-result small{color:#f8fafca6;font-size:16px;font-weight:700}.finger-result{background:#111827b8}.finger-result small{position:fixed;right:18px;bottom:max(18px,env(safe-area-inset-bottom));left:18px}.group-result{position:fixed;inset:0;z-index:5;border:0;background:#11182775;text-align:center}.group-result small{position:fixed;right:18px;bottom:max(18px,env(safe-area-inset-bottom));left:18px;display:block;color:#f8fafcc7;font-size:16px;font-weight:800}.group-ring,.chosen-ring{animation:none;opacity:1}.help{position:fixed;inset:0;z-index:6;display:grid;place-items:end stretch;padding:18px;background:#020617a3}.help-panel{position:relative;width:min(100%,520px);margin:0 auto;padding:24px;border:1px solid rgba(248,250,252,.16);border-radius:8px;background:#f8fafc;color:#111827;box-shadow:0 28px 70px #00000059}.help-panel h1{margin:0 0 16px;font-size:30px;letter-spacing:0}.help-panel p{margin:12px 0 0;color:#334155;font-size:17px;line-height:1.45}.close{position:absolute;top:12px;right:12px;display:grid;width:40px;height:40px;place-items:center;border:0;border-radius:8px;background:#e2e8f0;color:#0f172a;font-size:28px;line-height:1}@keyframes pulse{0%,to{opacity:.76;transform:translate(-50%,-50%) scale(.86)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}@media(min-width:720px){.app{max-width:440px;max-height:920px;inset:50% auto auto 50%;transform:translate(-50%,-50%);border:10px solid #020617;border-radius:36px;box-shadow:0 28px 80px #0000006b}}