:root{--display-font: "SF Pro Display", "Avenir Next", "Inter Tight", ui-rounded, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--text-font: "SF Pro Text", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-family:var(--text-font);color:#221c25;background:#f7efe8;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #221c25;--muted: #746a72;--pink: #f7b7cf;--blush: #ffe4ed;--cream: #fff3d6;--mint: #bcefe5;--aqua: #5ecfc1;--yellow: #ffe38a;--line: rgba(82, 70, 82, .15);--glass: rgba(255, 255, 255, .54);--glass-strong: rgba(255, 255, 255, .72);--shadow: 0 28px 80px rgba(96, 70, 95, .18)}*{box-sizing:border-box}html{height:100%;overflow:hidden}body{height:100%;overflow:hidden;margin:0;background:linear-gradient(135deg,#fff4d6f2,#ffe2ede0 28%,#d5f8f0eb 58%,#ffeea7c2),linear-gradient(180deg,#fff9ef,#f8edf4);background-attachment:fixed}button,input,code{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.52}.page{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:9px;width:min(880px,calc(100% - 32px));height:100svh;margin:0 auto;overflow:hidden;padding:16px 0}.legal-page{display:block;height:100svh;overflow:auto;padding-bottom:28px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.brand-header{display:grid;gap:5px;min-width:0}.brand-header h1{font-family:var(--display-font);color:var(--ink);font-size:62px;font-weight:980;letter-spacing:0;line-height:.88}.brand-header p{max-width:520px;color:#6c5f68;font-size:17px;font-weight:850;line-height:1.22}.x-logo-button{display:inline-grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border:1px solid rgba(255,255,255,.78);border-radius:999px;background:#ffffff8f;color:#0f0f10;box-shadow:none;text-decoration:none;backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35)}.x-logo{display:block;flex:0 0 auto}.hero{margin-bottom:0}.kicker{display:inline-flex;align-items:center;min-height:28px;margin:0 0 8px;padding:0 12px;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:#ffffff70;color:#0f8d82;box-shadow:0 10px 30px #5ecfc129;font-size:12px;font-weight:900;text-transform:uppercase;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}h1,h2,p{margin:0}.panel,.info-card{border:1px solid rgba(255,255,255,.7);border-radius:26px;background:var(--glass);box-shadow:0 18px 56px #60465f1f;backdrop-filter:blur(28px) saturate(1.45);-webkit-backdrop-filter:blur(28px) saturate(1.45)}.top-ranking{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-height:0;overflow:hidden}.controls-panel{overflow:hidden;border-radius:28px;background:#ffffff9e}.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:#fff7f157;animation:modalBackdropIn .22s ease forwards;backdrop-filter:blur(15px) saturate(1.2);-webkit-backdrop-filter:blur(15px) saturate(1.2)}.modal-backdrop.closing{animation:modalBackdropOut .22s ease forwards}.modal-panel{width:min(680px,calc(100vw - 32px));max-height:min(78svh,620px);border-color:#ffffffc7;background:linear-gradient(145deg,#ffffffc7,#ffffff85),#ffffff94;box-shadow:0 34px 96px #42324440;animation:modalIn .24s cubic-bezier(.2,.9,.24,1) forwards}.modal-panel.closing{animation:modalOut .19s ease forwards}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 14px 0}.modal-head strong{min-width:0;overflow:hidden;color:var(--ink);font-size:16px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}.modal-close{display:inline-grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border:1px solid rgba(255,255,255,.78);border-radius:999px;background:#ffffff94;color:var(--ink);box-shadow:0 10px 24px #60465f1f;backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);transition:background .16s ease,transform .16s ease}.modal-close:hover{background:#ffffffc7;transform:translateY(-1px)}.button-tray{display:grid;flex:1 1 auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}.toggle{font-family:var(--display-font);display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.72);border-radius:14px;background:linear-gradient(180deg,#ffffffad,#ffffff6b);color:var(--ink);font-size:13px;font-weight:950;box-shadow:none;backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}.toggle span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toggle svg{flex:0 0 auto;color:#0f8d82}.nav-link{text-decoration:none}.toggle.active{background:linear-gradient(135deg,#ffffffc7,#bcefe594);border-color:#5ecfc16b;color:#073c38}.calculator{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:calc(min(78svh,620px) - 64px);overflow:auto;padding:14px}.how-content{max-height:calc(min(78svh,620px) - 64px);overflow:auto;padding:16px}.calculator+.how-content{border-top:1px solid rgba(255,255,255,.62)}label{display:grid;gap:8px;color:#746471;font-size:12px;font-weight:900;text-transform:uppercase}.locked-metric{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;padding:0 14px;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:#ffffff80}.locked-metric,.result,.score-head,.score-preview,.actions{grid-column:1 / -1}.locked-metric span{color:#746471;font-size:12px;font-weight:900;text-transform:uppercase}.locked-metric strong{color:#0f8d82;font-weight:950}.button-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.button-row button{min-height:40px;border:1px solid rgba(255,255,255,.72);border-radius:16px;background:#ffffff8a;color:var(--ink);box-shadow:none;font-weight:900}.button-row button.active{border-color:#5ecfc1b3;background:linear-gradient(135deg,#5ecfc1,#a9f0e2);color:#073c38;box-shadow:none}.inputs,.math,.score-preview,.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.inputs,.math,.score-preview{grid-template-columns:repeat(3,minmax(0,1fr))}input{font-family:var(--display-font);width:100%;height:46px;padding:0 14px;border:1px solid rgba(255,255,255,.78);border-radius:18px;background:#ffffff9e;color:var(--ink);box-shadow:none;font-size:18px;font-weight:900;outline:none}input:focus{border-color:#5ecfc1e6;box-shadow:0 0 0 3px #bcefe55c}.result{display:grid;gap:6px;padding:13px;border:1px solid rgba(255,255,255,.72);border-radius:20px;background:linear-gradient(135deg,#ffe4edb8,#fff3d6b8)}.result span,.math span,.score-preview span{color:#746471;font-size:13px;font-weight:900}.result strong{font-family:var(--display-font);overflow-wrap:anywhere;color:var(--ink);font-size:20px}.math span,.score-preview div{min-height:40px;padding:10px;border-radius:16px;background:#ffffff7a}.score-preview div{display:grid;gap:4px}.score-preview strong{font-family:var(--display-font);color:var(--ink);font-size:20px;font-weight:950}.score-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.score-head>strong{color:var(--ink)}.inline-info-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:#ffffff8f;color:var(--ink);box-shadow:none;font-size:13px;font-weight:950}.inline-info-button svg{color:#0f8d82;transition:transform .18s ease}.inline-info-button svg.open{transform:rotate(180deg)}.point-system{display:grid;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:#ffffff7a}.point-system strong{color:var(--ink)}.point-system p{color:var(--muted);font-size:13px;line-height:1.42}.formula-grid{display:grid;grid-template-columns:minmax(88px,auto) minmax(0,1fr);gap:7px 10px;align-items:center}.formula-grid span{color:#746471;font-size:12px;font-weight:900;text-transform:uppercase}.formula-grid strong{min-width:0;overflow-wrap:anywhere;font-size:13px}.x-button,.copy-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:18px;font-weight:950;text-decoration:none}.x-button{border:0;background:linear-gradient(135deg,#221c25,#413341);color:#fff;box-shadow:none}.copy-button{border:1px solid rgba(255,255,255,.78);background:#ffffff9e;color:var(--ink)}.info-card h2{font-family:var(--display-font);color:var(--ink);font-size:23px;font-weight:980;letter-spacing:0}.card-title p{margin-top:4px;color:var(--muted);font-size:13px;font-weight:850}.info-card{padding:16px}.step-list{display:grid;gap:14px;margin-top:14px}.step{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start}.step svg{display:grid;place-items:center;width:34px;height:34px;padding:7px;border-radius:14px;background:#bcefe5b8;color:#0f8d82}.step div{display:grid;gap:4px}.step strong{font-family:var(--display-font);color:var(--ink)}.step p{color:var(--muted);line-height:1.42}.card-title,.rank-list li{display:flex;align-items:center;justify-content:space-between;gap:12px}.card-title svg{color:#d89c12}.rank-list{display:grid;gap:7px;align-content:start;padding:0;margin:10px 0 0;list-style:none}.rank-list li{min-height:43px;padding:7px 9px;border:1px solid rgba(255,255,255,.68);border-radius:18px;background:#ffffff7a;box-shadow:none}.rank-list li>span{display:grid;place-items:center;flex:0 0 auto;width:32px;height:29px;border-radius:14px;background:linear-gradient(135deg,var(--yellow),var(--cream));color:#5a4310;font-weight:950}.rank-list div{min-width:0;flex:1;display:grid;gap:2px}.rank-list strong,.rank-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-list strong{font-family:var(--display-font);color:var(--ink)}.rank-list small{color:var(--muted)}.rank-list em{font-family:var(--display-font);flex:0 0 auto;color:#0f8d82;font-style:normal;font-weight:950}.rank-empty{align-self:start;margin-top:12px;color:var(--muted);font-size:13px;font-weight:800}.rules-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.rules-strip span{display:grid;place-items:center;min-width:0;min-height:30px;padding:0 7px;border:1px solid rgba(255,255,255,.68);border-radius:12px;background:#ffffff6b;color:#0f8d82;font-size:12px;font-weight:950;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.legal-links{display:flex;justify-content:center;gap:14px;min-height:22px;font-size:12px;font-weight:900}.legal-links a,.legal-source-links a{color:#0f8d82;text-decoration:none}.legal-panel{display:grid;gap:16px;margin-top:14px;padding:18px}.legal-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.legal-head h1{font-family:var(--display-font);color:var(--ink);font-size:28px;font-weight:980;letter-spacing:0}.legal-head small{color:var(--muted);font-weight:800}.legal-sections{display:grid;gap:16px}.legal-sections section{display:grid;gap:6px;padding:14px;border-radius:18px;background:#ffffff7a}.legal-sections h2{color:var(--ink);font-size:17px}.legal-sections p{color:var(--muted);line-height:1.55}.legal-source-links{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;font-weight:900}@keyframes modalBackdropIn{0%{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{0%{opacity:1}to{opacity:0}}@keyframes modalIn{0%{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes modalOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.985)}}@media(prefers-reduced-motion:reduce){.modal-backdrop,.modal-backdrop.closing,.modal-panel,.modal-panel.closing{animation:none}.modal-close{transition:none}}@media(max-width:640px){.page{width:min(100% - 24px,840px);gap:8px;padding:12px 0}.brand-header h1{font-size:42px}.brand-header p{font-size:13px;line-height:1.2}.topbar{gap:8px}.x-logo-button{width:38px;height:38px}.button-tray{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.button-row,.inputs,.math,.score-preview,.actions{grid-template-columns:1fr}.panel,.info-card{border-radius:22px}.toggle{width:100%;min-height:36px;padding:0 7px;gap:4px;font-size:11px}.info-card h2{font-size:20px}.card-title p,.rules-strip span{font-size:11px}.modal-backdrop{padding:10px}.modal-panel{width:min(100%,calc(100vw - 20px));max-height:84svh;border-radius:24px}.modal-head{padding:12px 12px 0}.calculator{grid-template-columns:1fr;max-height:calc(84svh - 60px);overflow:auto;padding:12px}.how-content{max-height:calc(84svh - 60px);overflow:auto;padding:12px}.locked-metric,.result,.score-head,.score-preview,.actions{grid-column:auto}}