*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#080810;--surface:#0f0f1a;--border:#ffffff14;--text:#fff;--text-dim:#ffffff73;--accent:#c8953a;--accent-light:#e8b85a;--green:#4ade80;--red:#f87171;--mono:"JetBrains Mono", "Fira Code", ui-monospace, Consolas, monospace}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--mono);-webkit-font-smoothing:antialiased}#root{flex-direction:column;min-height:100dvh;display:flex}.app{flex-direction:column;flex:1;display:flex;position:relative}.page{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2rem;min-height:100dvh;padding:2rem 1.5rem;display:flex}.logo{letter-spacing:.4em;color:var(--text);font-size:1.1rem;font-weight:600}.logo-btn{cursor:pointer;font-family:var(--mono);letter-spacing:.4em;color:var(--text);background:0 0;border:none;padding:0;font-size:1.1rem;font-weight:600;transition:opacity .15s}.logo-btn:hover{opacity:.7}.logo-btn.dim{color:var(--text-dim);font-size:.9rem;position:absolute;top:1.5rem;left:50%;transform:translate(-50%)}.mode-selector{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.mode-btn{border:1px solid var(--border);color:var(--text-dim);font-family:var(--mono);cursor:pointer;letter-spacing:.05em;background:0 0;border-radius:2rem;padding:.4rem 1rem;font-size:.85rem;transition:all .15s}.mode-btn:hover{color:var(--text);border-color:#ffffff40}.mode-btn.active{border-color:var(--accent);color:var(--accent);background:#c8953a14}.target-display{text-align:center;line-height:1}.target-number{letter-spacing:-.02em;color:var(--text);font-size:clamp(4rem,18vw,7rem);font-weight:700}.target-unit{color:var(--text-dim);font-size:clamp(2rem,8vw,3.5rem);font-weight:300}.target-label{letter-spacing:.3em;color:var(--text-dim);margin-top:.5rem;font-size:.8rem;display:block}.target-display.small .target-number{font-size:clamp(2.5rem,10vw,4rem)}.target-display.small .target-unit{font-size:clamp(1.25rem,5vw,2rem)}.btn-main{background:var(--text);color:var(--bg);font-family:var(--mono);letter-spacing:.3em;cursor:pointer;border:none;border-radius:3px;padding:1rem 3.5rem;font-size:1rem;font-weight:700;transition:opacity .15s,transform .1s}.btn-main:hover{opacity:.88}.btn-main:active{transform:scale(.97)}.btn-stop{color:var(--text);background:0 0;border:1px solid #fff6;padding:1.2rem 4rem;font-size:1.1rem}.btn-stop:hover{background:#ffffff0f}.btn-retry{color:var(--text);background:0 0;border:1px solid #ffffff4d}.btn-share{color:#fff;font-family:var(--mono);letter-spacing:.1em;cursor:pointer;background:#1d9bf0;border:none;border-radius:3px;padding:1rem 2rem;font-size:.95rem;font-weight:700;transition:opacity .15s}.btn-share:hover{opacity:.88}.btn-text{color:var(--text-dim);font-family:var(--mono);cursor:pointer;letter-spacing:.05em;background:0 0;border:none;padding:.5rem;font-size:.85rem;transition:color .15s}.btn-text:hover{color:var(--text)}.name-input-wrap{width:100%;max-width:280px}.name-input{background:var(--surface);border:1px solid var(--border);width:100%;color:var(--text);font-family:var(--mono);letter-spacing:.05em;text-align:center;border-radius:3px;padding:.6rem .9rem;font-size:.85rem;transition:border-color .15s}.name-input::placeholder{color:var(--text-dim)}.name-input:focus{border-color:#ffffff40;outline:none}.name-input-locked{opacity:.5;cursor:not-allowed}.name-locked-hint{color:var(--text-dim);letter-spacing:.05em;text-align:center;margin-top:.4rem;font-size:.72rem}.social-proof{color:var(--text-dim);letter-spacing:.1em;font-size:.8rem}.hourglass-wrap{justify-content:center;align-items:center;padding:1rem;display:flex}.personal-best{letter-spacing:.3em;color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:.25rem .75rem;font-size:.75rem}.result-grid{border:1px solid var(--border);background:var(--surface);border-radius:4px;flex-direction:column;gap:.5rem;width:100%;max-width:360px;padding:1.5rem;display:flex}.result-row{grid-template-columns:80px 1fr auto;align-items:baseline;gap:.5rem;display:grid}.result-label{color:var(--text-dim);letter-spacing:.2em;font-size:.75rem}.result-value{letter-spacing:.05em;text-align:right;font-size:1.4rem;font-weight:700}.result-unit{color:var(--text-dim);width:2.5rem;font-size:.75rem}.rank-display{text-align:center}.rank-number{letter-spacing:-.02em;font-size:clamp(2.5rem,10vw,4rem);font-weight:700}.rank-provisional{color:var(--text-dim);letter-spacing:.2em;vertical-align:super;border:1px solid var(--border);border-radius:2px;margin-left:.3rem;padding:.1rem .3rem;font-size:.55rem}.rank-total{color:var(--text-dim);letter-spacing:.1em;margin-top:.25rem;font-size:.85rem}.rank-percentile{color:var(--accent);letter-spacing:.15em;margin-top:.35rem;font-size:.8rem}.title-badge{letter-spacing:.05em;border:1px solid var(--border);background:var(--surface);border-radius:2rem;padding:.5rem 1.5rem;font-size:1.2rem}.result-actions{flex-direction:column;align-items:center;gap:.75rem;width:100%;max-width:280px;display:flex}.result-actions .btn-main,.result-actions .btn-share,.result-actions .btn-retry{text-align:center;width:100%}.ranking-header{justify-content:center;align-items:center;width:100%;padding:0 1.5rem;display:flex;position:absolute;top:1.25rem}.ranking-header .btn-text{position:absolute;left:1.5rem}.ranking-page{justify-content:flex-start;padding-top:5rem}.tab-row{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}.tab-row.small{margin-top:-1rem}.tab-btn{border:1px solid var(--border);color:var(--text-dim);font-family:var(--mono);cursor:pointer;letter-spacing:.05em;background:0 0;border-radius:2rem;padding:.3rem .9rem;font-size:.8rem;transition:all .15s}.tab-btn.active{border-color:var(--accent);color:var(--accent);background:#c8953a14}.total-count{color:var(--text-dim);letter-spacing:.15em;font-size:.8rem}.ranking-list{flex-direction:column;gap:.25rem;width:100%;max-width:400px;list-style:none;display:flex}.ranking-row{border:1px solid var(--border);background:var(--surface);border-radius:3px;grid-template-columns:3rem 1fr 5.5rem 6rem;align-items:center;gap:.5rem;padding:.6rem .75rem;font-size:.85rem;display:grid}.ranking-row.top{background:#c8953a0d;border-color:#c8953a4d}.rank-num{color:var(--text-dim);white-space:nowrap;font-size:.78rem}.rank-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.35rem;font-size:.85rem;display:flex;overflow:hidden}.rank-flag{flex-shrink:0;font-size:1rem}.rank-error{color:var(--text);letter-spacing:.02em;text-align:right;font-weight:600}.rank-title{color:var(--text-dim);text-align:right;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.loading-text,.empty-text,.error-text{color:var(--text-dim);letter-spacing:.1em;padding:2rem;font-size:.85rem}.btn-load-more{border:1px solid var(--border);color:var(--text-dim);font-family:var(--mono);cursor:pointer;letter-spacing:.05em;background:0 0;border-radius:3px;width:100%;max-width:400px;padding:.65rem 1.5rem;font-size:.8rem;transition:all .15s}.btn-load-more:hover:not(:disabled){color:var(--text);border-color:#ffffff40}.btn-load-more:disabled{opacity:.5;cursor:default}.ranking-end{color:var(--text-dim);letter-spacing:.1em;padding:.75rem;font-size:.75rem}.home-ranking{border:1px solid var(--border);background:var(--surface);border-radius:4px;flex-direction:column;width:100%;max-width:360px;min-height:24rem;display:flex;overflow:hidden}.home-ranking-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:.6rem .75rem;display:flex}.home-ranking-title{letter-spacing:.25em;color:var(--text-dim);font-size:.7rem}.home-ranking-total{color:var(--text-dim);font-size:.75rem}.home-ranking-list{flex-direction:column;flex:1;list-style:none;display:flex}.home-ranking-row{border-bottom:1px solid var(--border);grid-template-columns:2.2rem 1fr auto;align-items:center;gap:.4rem;padding:.45rem .75rem;font-size:.82rem;transition:background .1s;display:grid}.home-ranking-row:last-child{border-bottom:none}.home-ranking-row.top{background:#c8953a0d}.home-rank-num{color:var(--text-dim);white-space:nowrap;font-size:.78rem}.home-rank-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.3rem;font-size:.82rem;display:flex;overflow:hidden}.home-rank-error{color:var(--accent);letter-spacing:.02em;white-space:nowrap;font-size:.8rem;font-weight:600}.home-ranking-more{text-align:center;border-top:1px solid var(--border);width:100%;padding:.5rem;font-size:.78rem;display:block}.error-banner{color:var(--red);text-align:center;cursor:pointer;letter-spacing:.05em;background:#f8717126;border-bottom:1px solid #f871714d;padding:.75rem;font-size:.8rem}