:root{--bg:#0b100e;--bg-2:#0f1613;--panel:#131b18;--panel-2:#18221e;--border:#23302b;--text:#e8efea;--muted:#8b9b93;--accent:#ff7a59;--raise:#ff7a59;--raise-soft:#ff7a592e;--fold:#1d2724;--perfect:#3ddc97;--correct:#4cc9f0;--wrong:#ff5d73;--ok:#f6c453;--to-act:#9b8cff;--radius:14px;--radius-sm:8px;--shadow:0 10px 30px #00000059, 0 1px 0 #ffffff08 inset;--ease:cubic-bezier(.2, .8, .2, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-feature-settings:"tnum" 1, "cv11" 1;-webkit-font-smoothing:antialiased;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0}html{overflow-x:clip}body{min-height:100vh;color:var(--text);background:radial-gradient(1200px 600px at 20% -10%, #3ddc9712, transparent 60%), radial-gradient(900px 500px at 110% 10%, #ff7a590f, transparent 60%), var(--bg);overflow-x:clip}button{font:inherit;color:inherit}h1,h2,h3{letter-spacing:-.01em;margin:0;font-weight:650}h2{font-size:15px}h3{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;font-size:11px;font-weight:600}.muted{color:var(--muted)}.small{font-size:12.5px}.accent{color:var(--accent)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}kbd{color:inherit;opacity:.8;background:#ffffff0f;border:1px solid #ffffff24;border-radius:5px;padding:3px 6px;font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace}:focus-visible{outline:2px solid var(--correct);outline-offset:2px}.app{max-width:1560px;margin:0 auto;padding:12px 22px}.layout{--grid-col:clamp(340px, 31vw, 480px);--stats-col:clamp(236px, 20vw, 300px);grid-template-columns:minmax(360px, 1fr) var(--grid-col) var(--stats-col);align-items:stretch;gap:16px;margin-top:12px;display:grid}.panel{background:linear-gradient(180deg, var(--panel-2), var(--panel));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0;padding:16px}.panel-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;display:flex}.drill{flex-direction:column;display:flex;container:drill/inline-size}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;display:flex}.brand{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.brand h1{align-items:baseline;gap:8px;font-size:19px;display:flex}.h1-sub{color:var(--muted);letter-spacing:.02em;font-size:12px;font-weight:500}.header-right{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.logo{border-radius:9px;width:34px;height:34px;display:block;box-shadow:0 0 0 1px #2b4a3d,0 6px 16px #00000059}.chip{border:1px solid var(--border);background:var(--bg-2);color:var(--muted);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;display:inline-flex}.chip.source{color:var(--text)}.chip.source:before{content:"";background:var(--perfect);border-radius:50%;width:7px;height:7px;display:inline-block}.chip.source.is-custom:before{background:var(--ok)}.chip-action{color:var(--text);cursor:help;transition:border-color .2s,background .2s}.how-tip:hover .chip-action,.how-tip.is-open .chip-action{border-color:var(--correct);background:#4cc9f014}.disclaimer{color:#f3d9a4;white-space:nowrap;background:#f6c45314;border:1px solid #f6c45338;border-radius:999px;padding:4px 11px;font-size:12px}.tip{display:inline-block;position:relative}.tip-trigger{cursor:help;outline-offset:2px;border-radius:4px}.tip.term .tip-trigger{color:var(--text);border-bottom:1px dashed #e8efea73;font-weight:600}.tip.term:hover .tip-trigger,.tip.term.is-open .tip-trigger{color:var(--correct);border-bottom-color:var(--correct)}.tip-body{z-index:60;width:max-content;max-width:min(300px,100vw - 32px);color:var(--text);text-align:left;text-transform:none;letter-spacing:normal;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s var(--ease), transform .15s var(--ease), visibility 0s linear .15s;background:#0d1311;border:1px solid #2c3a35;border-radius:10px;padding:10px 12px;font-size:12.5px;font-weight:400;line-height:1.45;position:absolute;box-shadow:0 18px 40px #0000008c}.tip-top .tip-body{bottom:calc(100% + 8px);transform:translateY(4px)}.tip-bottom .tip-body{top:calc(100% + 8px);transform:translateY(-4px)}.tip-center .tip-body{left:50%;translate:-50%}.tip-start .tip-body{left:-6px}.tip-end .tip-body{right:-6px}.tip:hover .tip-body,.tip:focus-within .tip-body,.tip.is-open .tip-body{opacity:1;visibility:visible;transition:opacity .15s var(--ease), transform .15s var(--ease), visibility 0s;transform:none}.tip-wide .tip-body{pointer-events:auto;width:380px;max-width:min(380px,92vw);padding:14px 16px}.tip-wide .tip-body:before{content:"";height:10px;position:absolute;left:0;right:0}.tip-bottom.tip-wide .tip-body:before{top:-10px}.tip-top.tip-wide .tip-body:before{bottom:-10px}.tip-text{display:block}.leaks-tip .tip-body{width:calc(var(--stats-col,280px) - 36px)}@media (width<=1023px){.leaks-tip .tip-body{width:min(280px,100vw - 48px)}}.chen{display:block}.chen-title{color:var(--muted);margin-bottom:6px;font-size:11.5px;display:block}.chen-title b{color:var(--text)}.chen-steps{gap:2px;display:grid}.chen-row{justify-content:space-between;gap:16px;font-size:12.5px;display:flex}.chen-row .num{font-variant-numeric:tabular-nums;font-weight:600}.chen-row.is-muted{color:var(--muted)}.chen-row.is-total{border-top:1px solid #2c3a35;margin-top:4px;padding-top:4px;font-weight:700}.chen-row.is-total .num{color:var(--accent)}.how{gap:6px;display:grid}.how-h{text-transform:uppercase;letter-spacing:.07em;color:var(--correct);margin-top:6px;font-size:11px;font-weight:700;display:block}.how-h:first-child{margin-top:0}.how-grid{grid-template-columns:auto 1fr;gap:3px 12px;font-size:12.5px;display:grid}.how-grid>span:nth-child(odd){color:var(--muted)}.how-ex,.how-p{color:#c9d5cf;font-size:12.5px;display:block}.how-ex{color:var(--muted)}.how-targets{flex-wrap:wrap;gap:4px 12px;font-size:12.5px;display:flex}.how-targets b{color:var(--accent)}.how-foot{color:#f3d9a4;margin-top:4px;font-size:11.5px;display:block}.c-correct{color:var(--correct)}.c-perfect{color:var(--perfect)}.seats-wrap{margin-bottom:14px}.seats{grid-template-columns:repeat(6,1fr);gap:6px;margin:0;padding:0;list-style:none;display:grid}.seat{--seat:var(--muted);border:1px solid var(--border);background:var(--bg-2);transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), opacity .25s;border-radius:10px;justify-items:center;gap:1px;padding:7px 2px 6px;display:grid;position:relative}.seat-icon{color:var(--seat);height:10px;font-size:10px;line-height:1}.seat-name{font-size:13px;font-weight:700}.seat-note{color:var(--seat);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;font-size:9.5px;font-weight:600}.seat.is-folded{--seat:#7c8784;background:repeating-linear-gradient(135deg,#121715 0 6px,#0f1412 6px 12px);border-style:dashed;border-color:#34403c}.seat.is-folded .seat-name{color:#6d7875;-webkit-text-decoration:line-through #ff5d7399;text-decoration:line-through #ff5d7399;text-decoration-thickness:1.5px}.seat.is-waiting{--seat:var(--to-act);background:#9b8cff12;border-color:#9b8cff59}.seat.is-waiting .seat-name{color:#d7d1ff}.seat.is-hero{--seat:var(--accent);background:var(--raise-soft);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 18px #ff7a5938}.seat.is-hero .seat-name{color:#fff}.seats-summary{flex-wrap:wrap;gap:2px 6px;margin:8px 0 0;font-size:12px;display:flex}.sum-folded{color:#8b9692}.sum-hero{color:var(--accent)}.sum-waiting{color:var(--to-act)}.sum-sep{color:var(--border)}.hand{align-items:center;gap:20px;margin-bottom:16px;display:flex}.cards{perspective:800px;gap:10px;display:flex}.card{color:#151a18;width:84px;height:118px;animation:card-in .38s var(--ease) both;background:linear-gradient(#fbfbf8,#ecebe4);border-radius:10px;position:relative;box-shadow:0 12px 24px #00000073,0 0 0 1px #0003}.card.is-red{color:#d6283f}.card-corner{text-align:center;font-size:19px;font-weight:750;line-height:1;position:absolute;top:7px;left:9px}.card-pip{place-items:center;padding-top:10px;font-size:46px;display:grid;position:absolute;inset:0}@keyframes card-in{0%{opacity:0;transform:translateY(14px)rotateY(70deg)scale(.96)}to{opacity:1;transform:none}}.hand-meta{animation:fade-up .35s .1s var(--ease) both;gap:6px;display:grid}.hand-class{letter-spacing:-.02em;font-size:34px;font-weight:750}.btn{cursor:pointer;transition:transform .12s var(--ease), background .2s, border-color .2s, box-shadow .2s, opacity .2s;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:10px;display:inline-flex}.btn:active:not(:disabled){transform:translateY(1px)scale(.99)}.btn:disabled{cursor:default}.actions{grid-template-columns:1fr 1fr;gap:12px;display:grid}.actions .btn{height:58px;font-size:17px;font-weight:650}.btn-fold{background:#222d29;border-color:#2e3c36}.btn-fold:hover:not(:disabled){background:#283530}.btn-raise{background:var(--raise);color:#1c0d08;box-shadow:0 8px 20px #ff7a5940}.btn-raise:hover:not(:disabled){background:#ff8d70}.actions .btn:disabled:not(.is-chosen){opacity:.3;filter:saturate(.15);box-shadow:none}.btn.is-chosen{box-shadow:0 0 0 2px var(--v), 0 8px 20px #0000004d}.btn.is-perfect{--v:var(--perfect)}.btn.is-correct{--v:var(--correct)}.btn.is-wrong{--v:var(--wrong)}.btn-ghost{border-color:var(--border);color:var(--muted);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--text);border-color:#3a4a43}.btn-ghost:disabled{opacity:.4}.btn-ghost.is-danger{color:var(--wrong);border-color:var(--wrong);background:#ff5d7314}.btn-sm{border-radius:8px;padding:5px 11px;font-size:12.5px}.feedback-slot{min-height:214px;margin-top:14px;display:grid}.feedback-placeholder{border:1px dashed var(--border);border-radius:var(--radius);place-items:center;min-height:214px;font-size:13px;display:grid}.feedback{--v:var(--muted);border:1px solid color-mix(in srgb, var(--v) 45%, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--v) 10%, transparent), transparent 70%), var(--bg-2);border-radius:var(--radius);animation:fade-up .28s var(--ease) both;padding:16px;position:relative}.feedback.is-perfect{--v:var(--perfect)}.feedback.is-correct{--v:var(--correct)}.feedback.is-wrong{--v:var(--wrong)}.feedback-head{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.verdict{color:var(--v);font-size:22px;font-weight:750}.feedback.is-wrong .verdict{animation:shake .35s var(--ease)}.freq-bars{gap:7px;margin:14px 0 10px;display:grid}.freq-row{color:var(--muted);grid-template-columns:46px 1fr 42px;align-items:center;gap:10px;font-size:13px;display:grid}.freq-row.is-chosen{color:var(--text);font-weight:600}.freq-track{background:#ffffff0f;border-radius:99px;height:8px;overflow:hidden}.freq-fill{border-radius:inherit;height:100%;animation:grow .5s var(--ease) both;transform-origin:0;display:block}.fill-raise{background:var(--raise)}.fill-fold{background:#6f7f78}.freq-pct{text-align:right;font-variant-numeric:tabular-nums}.why{color:#c9d5cf;margin:0 0 12px;font-size:13.5px;line-height:1.5}.btn-next{border-color:var(--border);background:#ffffff0f;width:100%;height:42px;font-weight:600}.btn-next:hover{background:#ffffff1a}.auto-bar{background:var(--perfect);border-radius:3px;max-width:calc(100% - 20px);height:3px;animation:1.2s linear both auto;position:absolute;bottom:0;left:10px}@keyframes auto{0%{width:0}to{width:100%}}@keyframes fade-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes shake{0%,to{transform:none}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.settings{border-top:1px solid var(--border);flex-direction:column;gap:8px;margin-top:auto;padding-top:12px;display:flex}.drill .feedback-slot{margin-bottom:14px}.toggle{color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:9px;font-size:12.5px;display:inline-flex}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle-ui{background:#2a3632;border-radius:99px;flex:none;width:30px;height:18px;transition:background .2s;position:relative}.toggle-ui:after{content:"";width:14px;height:14px;transition:transform .2s var(--ease);background:#cfd8d3;border-radius:50%;position:absolute;top:2px;left:2px}.toggle input:checked+.toggle-ui{background:var(--perfect)}.toggle input:checked+.toggle-ui:after{background:#fff;transform:translate(12px)}.toggle input:focus-visible+.toggle-ui{outline:2px solid var(--correct);outline-offset:2px}.grid-wrap{position:relative}.grid{border-collapse:separate;border-spacing:2px;table-layout:fixed;width:100%}.grid th{color:var(--muted);padding:0 0 2px;font-size:10.5px;font-weight:600}.grid thead th:first-child,.grid tbody th{width:18px}.cell{height:max(20px, min(calc((var(--grid-col,420px) - 56px) / 13), calc((100vh - 230px) / 14)));background:var(--fold);text-align:center;vertical-align:middle;border-radius:4px;padding:0;position:relative;overflow:hidden}.cell-suited{background:#1f2a26}.cell-pair{background:#232f2b}.cell-fill{height:calc(var(--f) * 100%);background:var(--raise);transition:height .32s var(--ease) var(--d), background .2s;position:absolute;inset:auto 0 0}.cell.is-mixed .cell-fill{background:repeating-linear-gradient(135deg, var(--raise) 0 4px, #e86446 4px 7px)}.cell-label{font-size:clamp(8.5px, calc(var(--grid-col,420px) / 44), 10.5px);letter-spacing:-.03em;color:#e8efea80;font-weight:600;transition:color .3s;position:relative}.is-revealed .cell-label{color:#e8efea8c}.is-revealed .cell[data-raise="1"] .cell-label{color:#2a0f07}.is-revealed .cell.is-mixed .cell-label{color:#fff;text-shadow:0 1px 2px #000000bf}.cell.is-dealt{outline-offset:-2px;z-index:1;outline:2px solid #fff;animation:1.6s ease-in-out infinite pulse;box-shadow:inset 0 0 0 4px #0b100e,0 0 0 3px #ffffff40,0 0 18px #ffffff59}.cell.is-dealt .cell-fill{border-radius:2px;max-height:calc(100% - 8px);inset:auto 4px 4px}.cell.is-dealt .cell-label{color:#fff;text-shadow:0 1px 2px #0009;font-weight:800}@keyframes pulse{50%{box-shadow:inset 0 0 0 4px #0b100e,0 0 0 5px #ffffff14,0 0 22px #fff3}}.grid-foot{color:var(--muted);flex-wrap:wrap;align-items:center;gap:14px;margin-top:12px;font-size:12px;display:flex}.legend{align-items:center;gap:6px;display:inline-flex}.sw{border-radius:3px;width:12px;height:12px;display:inline-block}.sw-raise{background:var(--raise)}.sw-mixed{background:linear-gradient(to top, var(--raise) 50%, var(--fold) 50%)}.sw-fold{background:var(--fold);border:1px solid #2e3c36}.sw-dealt{border:2px solid #fff}.grid-hint{margin-left:auto;font-style:italic}.is-revealed .cell{cursor:help}.is-revealed .cell:hover{outline-offset:-1px;outline:1px solid #ffffff8c}.cell-card{z-index:50;pointer-events:none;animation:card-pop .12s var(--ease) both;background:#0d1311;border:1px solid #2c3a35;border-radius:12px;gap:8px;padding:11px 13px;font-size:12.5px;display:grid;position:absolute;box-shadow:0 18px 40px #0009}.cell-card.is-above{translate:-50% -100%}.cell-card.is-below{translate:-50%}@keyframes card-pop{0%{opacity:0;scale:.97}to{opacity:1;scale:1}}.cell-card-head{justify-content:space-between;align-items:center;gap:8px;font-size:14px;display:flex}.cell-card-foot{color:#c9d5cf;border-top:1px solid #2c3a35;padding-top:7px;line-height:1.45}.badge{border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700}.badge-open{background:var(--raise-soft);color:var(--raise)}.badge-mixed{color:var(--ok);background:#f6c45324}.badge-fold{color:var(--muted);background:#ffffff0f}.term-quiet .tip-trigger:hover .muted{color:var(--text)}.overall{gap:8px;margin-bottom:4px;display:grid}.big{letter-spacing:-.03em;margin-bottom:4px;font-size:34px;font-weight:800;line-height:1;transition:color .3s}.recent{flex-wrap:wrap;gap:4px;min-height:9px;margin:0;padding:0;list-style:none;display:flex}.stats-body{display:grid}.dot{width:9px;height:9px;animation:pop .25s var(--ease) both;border-radius:50%}.dot.is-perfect{background:var(--perfect)}.dot.is-correct{background:var(--correct)}.dot.is-wrong{background:var(--wrong)}@keyframes pop{0%{transform:scale(0)}to{transform:scale(1)}}.stat-group{border-top:1px solid var(--border);margin-top:10px;padding-top:10px}.bar-row{grid-template-columns:56px 1fr 36px 26px;align-items:center;gap:8px;padding:2px 0;font-size:12.5px;display:grid}.bar-track{background:#ffffff0f;border-radius:99px;height:7px;overflow:hidden}.bar-fill{border-radius:inherit;height:100%;transition:width .5s var(--ease), background .3s;display:block}.bar-value{text-align:right;font-weight:600}.bar-n{text-align:right;font-size:11.5px}.tone-good{background:var(--perfect)}.tone-ok{background:var(--ok)}.tone-bad{background:var(--wrong)}.tone-none{background:0 0}.tone-text-good{color:var(--perfect)}.tone-text-ok{color:var(--ok)}.tone-text-bad{color:var(--wrong)}.tone-text-none{color:var(--muted)}.leaks{counter-reset:leak;gap:6px;margin:0;padding:0;list-style:none;display:grid}.leaks li{counter-increment:leak;background:var(--bg-2);border:1px solid var(--border);animation:fade-up .25s var(--ease) both;border-radius:8px;grid-template-columns:1fr auto 38px;align-items:center;gap:8px;padding:5px 9px;font-size:12.5px;display:grid}.leak-name:before{content:counter(leak) ".";color:var(--muted);margin-right:8px}.leak-acc{text-align:right;font-weight:700}.leaks .small{text-align:right}@container drill (width>=470px){.seat{padding:9px 4px 8px}.seat-name{font-size:15px}.seat-note{font-size:10.5px}.seats-summary{font-size:13px}.hand{gap:26px}.card{border-radius:12px;width:104px;height:146px}.card-corner{font-size:23px;top:9px;left:11px}.card-pip{font-size:58px}.hand-class{font-size:46px}.hand-meta .small{font-size:14px}.actions .btn{height:66px;font-size:19px}.verdict{font-size:26px}.freq-row{font-size:14px}.why{font-size:15px}.btn-next{height:46px;font-size:15.5px}.feedback-placeholder{font-size:14px}.settings{flex-flow:wrap;gap:8px 22px}}@media (height<=760px) and (width>=961px){.card{width:76px;height:106px}.card-pip{font-size:40px}.hand{margin-bottom:12px}.seats-wrap{margin-bottom:10px}@container drill (width>=470px){.card{width:92px;height:128px}.card-pip{font-size:50px}.hand-class{font-size:42px}.actions .btn{height:60px}}}@media (width<=1023px) and (width>=961px){.layout{--grid-col:clamp(320px, 38vw, 400px);grid-template-columns:minmax(0, 1fr) var(--grid-col)}.stats{grid-column:1/-1}.stats-body{grid-template-columns:1fr 1fr 1fr;gap:0 22px}.stats .overall{grid-template-columns:auto 1fr;align-items:center;gap:16px}.stats .recent{justify-content:flex-end}}@media (width<=960px){.app{padding:14px 14px 110px}.layout{grid-template-columns:1fr}.cell{height:30px}.actions{z-index:10;padding:12px 14px calc(12px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border);background:#0b100ee0;position:fixed;bottom:0;left:0;right:0}.feedback-slot{margin-top:0}}@media (width<=600px){.tip .tip-body,.tip-wide .tip-body,.leaks-tip .tip-body{top:auto;left:12px;right:12px;bottom:calc(96px + env(safe-area-inset-bottom));width:auto;max-width:none;max-height:60vh;position:fixed;overflow-y:auto;translate:none}}@media (width<=520px){.card{width:68px;height:96px}.card-pip{font-size:36px}.hand-class{font-size:28px}.cell{height:24px}.cell-label{font-size:8px}.seat-name{font-size:11.5px}.disclaimer{white-space:normal}}.hint-touch{display:none}@media (hover:none) and (pointer:coarse){kbd,.hint-keys{display:none}.hint-touch{display:inline}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
