:root{--bg: #f7f3ec;--surface: #fffdf9;--surface-muted: #f1ece2;--border: #e3dbcd;--text: #36343a;--text-muted: #7d786f;--accent: #55776a;--accent-hover: #476558;--accent-soft: #e4ede8;--danger: #a8403a;--danger-soft: #f8e9e6;--suit-red: #b5473e;--suit-black: #2b2b30;--disabled-bg: #ddd7cb;--disabled-text: #8f897e;--radius: 14px;--radius-small: 9px;--shadow: 0 6px 22px rgba(80, 68, 48, .08);--font-title: "Playfair Display", Georgia, "Times New Roman", serif;--font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% -10%,#fbf8f2 0%,var(--bg) 55%);color:var(--text);font-family:var(--font-body);line-height:1.45;min-height:100vh}h1,h2,h3,h4{font-family:var(--font-title);font-weight:600;margin:0}[hidden]{display:none!important}.mono{font-family:var(--font-mono)}.app{max-width:1100px;margin:0 auto;padding:2rem 1.5rem 4rem}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--accent);letter-spacing:.01em}.app-header h1:after{content:"";display:block;width:72px;height:2px;margin:.8rem auto 0;background:var(--border)}.main-page{position:relative}.workspace{display:grid;grid-template-columns:1fr 1fr auto;column-gap:3rem;row-gap:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.75rem 2rem 2rem}.north-input{grid-column:1;grid-row:1}.south-input{grid-column:2;grid-row:1}.show-actions{grid-column:1 / span 2;grid-row:2;justify-self:center}.north-hand{grid-column:1;grid-row:3}.south-hand{grid-column:2;grid-row:3}.generate-cell{grid-column:3;grid-row:6;align-self:center;text-align:center}.north-weights{grid-column:1;grid-row:4}.south-weights{grid-column:2;grid-row:4}.fit-row{grid-column:1 / span 2;grid-row:5;justify-self:center}.num-hands{grid-column:1 / span 2;grid-row:6;justify-self:center}.show-actions{display:flex;align-items:center;gap:1rem}.num-hands{display:flex;align-items:center;gap:.75rem}.generation-summary{margin-top:1rem;padding:.6rem 1rem;background:var(--surface);border:1px solid currentColor;border-radius:var(--radius-small);font-size:.95rem}.generation-summary.success{color:var(--accent)}.generation-summary.incomplete{color:var(--danger)}.results{display:grid;grid-template-columns:1fr auto;column-gap:2rem;margin-top:2rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem 2rem}.results-side{position:sticky;top:1.5rem;align-self:start}.pair-hands{display:flex;gap:5rem;flex-wrap:wrap}.deal-table{display:grid;grid-template-columns:auto auto auto;grid-template-areas:". north ." "west . east" ". south .";justify-content:center;column-gap:3rem;row-gap:.8rem}.seat-north{grid-area:north}.seat-west{grid-area:west}.seat-east{grid-area:east}.seat-south{grid-area:south}.results-note{margin:1.5rem 0 0;padding-top:.9rem;border-top:1.5px dashed var(--border);font-size:.95rem;font-style:italic;color:var(--text-muted)}.pair-separator{border:0;border-top:1.5px dashed var(--border);margin:1.5rem 0}.side-tabs{position:fixed;right:0;top:38%;display:flex;flex-direction:column;gap:.6rem;z-index:10}.info-page{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;min-height:40vh}.info-page h2{font-size:1.6rem;color:var(--accent)}.help-page{max-width:52rem;margin:0 auto;line-height:1.6}.help-tagline{margin:.4rem 0 1.5rem;font-size:1.05rem;color:var(--text-muted)}.help-section h3{font-size:1.3rem;color:var(--accent);margin-bottom:.6rem}.help-section h4{font-family:var(--font-body);font-size:1rem;font-weight:600;margin:1.1rem 0 .2rem}.help-section p{margin:0 0 .6rem}.help-section code{font-family:var(--font-mono);padding:.05rem .35rem;background:var(--surface-muted);border:1px solid var(--border);border-radius:6px}.help-list{margin:0;padding-left:1.2rem}.help-list li{margin-bottom:.45rem}.help-separator{width:8rem;margin:1.8rem auto;border:0;border-top:1.5px dashed var(--border)}.help-figure{margin:1.2rem 0;text-align:center}.help-figure img{max-width:100%;border:1px solid var(--border);border-radius:var(--radius-small);box-shadow:var(--shadow)}.help-figure figcaption{margin-top:.4rem;font-size:.85rem;color:var(--text-muted)}@media (max-width: 900px){.workspace{grid-template-columns:1fr}.north-input,.south-input,.show-actions,.north-hand,.south-hand,.generate-cell,.north-weights,.south-weights,.fit-row,.num-hands{grid-column:1;grid-row:auto}.results{grid-template-columns:1fr}.results-side{position:static;order:-1;margin-bottom:1rem}.pair-hands{gap:2.5rem}.deal-table{column-gap:1.5rem}}.section-title{display:block;font-family:var(--font-title);font-size:1.1rem;font-weight:600;margin-bottom:.45rem}.text-box{width:100%;padding:.6rem .8rem;font-size:1rem;color:var(--text);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-small);transition:border-color .15s,box-shadow .15s}.text-box:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.text-box.has-error{border-color:var(--danger)}.number-box{width:5.5rem;padding:.35rem .5rem;text-align:right}.hcp-count{min-height:1.25rem;margin:.3rem 0 0;font-size:.85rem;color:var(--text-muted)}.hand-ok{width:1.1em;height:1.1em;margin-left:.6em;vertical-align:-.2em;fill:none;stroke:#3f8f5f;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}.field-error{min-height:1.25rem;margin:.3rem 0 0;font-size:.85rem;color:var(--danger)}.hint{margin:.5rem 0 0;font-size:.8rem;color:var(--text-muted)}.button{font:inherit;font-weight:600;padding:.6rem 1.3rem;border:1.5px solid transparent;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}.button.primary{background:var(--accent);color:#fff}.button.primary:hover:not(:disabled){background:var(--accent-hover)}.button.secondary{background:var(--surface);color:var(--accent);border-color:var(--accent)}.button.secondary:hover:not(:disabled){background:var(--accent-soft)}.button.link{background:none;color:var(--accent);font-size:.85rem;padding:.3rem .6rem;text-decoration:underline}.button.large{padding:.8rem 1.6rem;font-size:1.05rem;white-space:nowrap}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{background:var(--disabled-bg);color:var(--disabled-text);border-color:transparent;cursor:not-allowed;text-decoration:none}.button.link:disabled{background:none}.button:focus-visible,.side-tab:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}.hand-display{min-height:9.5rem;padding:.9rem 1.2rem;background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius-small);font-family:var(--font-mono);font-size:1.15rem;letter-spacing:.08em;transition:opacity .15s}.hand-display.is-stale{opacity:.45}.hand-display.is-empty{display:flex;align-items:center;justify-content:center}.hand-placeholder{margin:0;font-family:var(--font-body);font-size:.9rem;letter-spacing:0;color:var(--text-muted)}.hand-line{display:flex;align-items:baseline;gap:.8rem;line-height:1.7}.suit-symbol{width:1.4rem;text-align:center;font-size:1.3rem}.suit-symbol.red,.red{color:var(--suit-red)}.suit-symbol.black{color:var(--suit-black)}.weights-panel{display:grid;grid-template-columns:7.5rem 1fr auto;column-gap:.9rem;row-gap:.35rem;align-items:center}.weights-panel>.field-error{grid-column:1 / -1}.weight-slider{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:center;column-gap:.9rem;font-size:.95rem}.weight-slider>.number-box{justify-self:end}.slider{width:100%;margin:0;accent-color:var(--accent);cursor:pointer}.slider-separator{grid-column:1 / -1;justify-self:center;width:7rem;height:1px;margin:.5rem 0 .35rem;background:var(--border)}.hcp-delta{align-items:start}.hcp-delta-label{display:flex;align-items:center;gap:.4rem;height:var(--knob-zone);cursor:pointer}.hcp-delta-radio{margin:0;accent-color:var(--accent);cursor:pointer}.range-dual{--thumb: 28px;grid-column:2 / -1;position:relative;height:calc(var(--knob-zone) + 14px)}.hcp-delta{--knob-zone: 28px}.range-track,.range-fill{position:absolute;top:calc(var(--knob-zone) / 2);height:6px;margin-top:-3px;border-radius:999px}.range-track{left:0;right:0;background:var(--accent-soft)}.range-fill{background:var(--accent)}.range-input{position:absolute;top:0;left:0;width:100%;height:var(--knob-zone);margin:0;background:transparent;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.range-input.is-min{width:calc(50% + var(--thumb) / 2)}.range-input.is-max{left:calc(50% - var(--thumb) / 2);width:calc(50% + var(--thumb) / 2)}.range-input.on-top{z-index:2}.range-input::-webkit-slider-runnable-track{background:transparent;height:var(--knob-zone)}.range-input::-moz-range-track{background:transparent}.range-input::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:var(--thumb);height:var(--thumb);margin-top:calc((var(--knob-zone) - var(--thumb)) / 2);border:2px solid var(--accent);border-radius:50%;background:var(--surface);box-shadow:0 1px 3px #50443040;cursor:pointer;pointer-events:auto}.range-input::-moz-range-thumb{box-sizing:border-box;width:var(--thumb);height:var(--thumb);border:2px solid var(--accent);border-radius:50%;background:var(--surface);box-shadow:0 1px 3px #50443040;cursor:pointer;pointer-events:auto}.knob-value{position:absolute;top:calc(var(--knob-zone) / 2);z-index:3;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:.68rem;font-weight:700;color:var(--accent);pointer-events:none}.range-ticks{position:absolute;left:0;right:0;top:var(--knob-zone);height:12px}.range-tick{position:absolute;top:0;width:1px;height:5px;margin-left:-.5px;background:var(--text-muted)}.range-tick.zero{width:2.5px;height:10px;margin-left:-1.25px;background:var(--text)}.hcp-delta.is-disabled .weight-label:not(.hcp-delta-label),.hcp-delta.is-disabled .range-dual{opacity:.45}.hcp-delta.is-disabled .hcp-delta-label{color:var(--text-muted)}.hcp-delta.is-disabled .range-fill{background:var(--disabled-bg)}.hcp-delta.is-disabled .knob-value{color:var(--disabled-text)}.hcp-delta.is-disabled .range-input::-webkit-slider-thumb{border-color:var(--disabled-text);cursor:not-allowed}.hcp-delta.is-disabled .range-input::-moz-range-thumb{border-color:var(--disabled-text);cursor:not-allowed}.min-fit{display:flex;align-items:flex-start;justify-content:center;gap:1.75rem;font-size:.95rem}.min-fit .fit-slider{width:16rem}.min-fit-checks{display:flex;align-items:center;gap:1.1rem;height:var(--knob-zone)}.fit-check{display:flex;align-items:center;gap:.3rem;cursor:pointer}.fit-check input{margin:0;accent-color:var(--accent);cursor:pointer}.min-fit.is-disabled .fit-check{opacity:.45;cursor:not-allowed}.min-fit.is-disabled .fit-check input{cursor:not-allowed}.pair-title{display:flex;align-items:baseline;gap:.75rem;font-size:1.25rem;margin-bottom:.8rem}.badge{font-family:var(--font-body);font-size:.72rem;font-weight:600;padding:.15rem .6rem;color:var(--accent);background:var(--accent-soft);border-radius:999px}.similarity{margin-left:auto;font-family:var(--font-body);font-size:.8rem;font-weight:400;color:var(--text-muted)}.pair-side{font-size:1rem;margin-bottom:.4rem;color:var(--text-muted)}.whole-deals{display:flex;justify-content:center;align-items:center;gap:.4rem;margin-top:.7rem;font-size:.9rem;cursor:pointer}.whole-deals input{margin:0;accent-color:var(--accent);cursor:pointer}.hand-stats{display:flex;gap:1.25rem;margin:.55rem 0 0;font-size:.9rem;color:var(--text-muted)}.pair-hand .hand-display{min-height:0;min-width:11rem}.export-menu{display:flex;flex-direction:column;gap:.6rem;min-width:11rem}.export-label{font-family:var(--font-title);font-weight:600}.export-status{margin:0;font-size:.85rem;color:var(--accent)}.side-tab{writing-mode:vertical-rl;padding:1rem .55rem;font:inherit;font-weight:600;letter-spacing:.06em;color:var(--accent);background:var(--surface);border:1px solid var(--border);border-right:none;border-radius:var(--radius-small) 0 0 var(--radius-small);box-shadow:var(--shadow);cursor:pointer;transition:padding .15s,background .15s}.side-tab:hover,.side-tab.is-active{padding-right:.85rem;background:var(--accent-soft)}.back-to-top{position:fixed;right:1.25rem;bottom:1.25rem;z-index:10;padding:.55rem 1rem;font:inherit;font-weight:600;color:var(--accent);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-small);box-shadow:var(--shadow);cursor:pointer;transition:background .15s}.back-to-top:hover{background:var(--accent-soft)}.back-to-top:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}.error-banner{display:flex;justify-content:space-between;gap:1rem;margin-top:1.25rem;padding:.8rem 1rem;color:var(--danger);background:var(--danger-soft);border:1px solid #ecc9c3;border-radius:var(--radius-small)}.banner-close{background:none;border:none;font-size:1.2rem;line-height:1;color:inherit;cursor:pointer}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;justify-content:center;align-items:flex-start;background:#f7f3ec99;border-radius:var(--radius);cursor:progress}.spinner{position:sticky;top:calc(50vh - 112px);margin-top:4rem;width:224px;height:224px;box-sizing:border-box;border:18px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.spinner{animation-duration:2.4s}}
