:root {
color-scheme: light;
--ink: #321c20;
--muted: #674b54;
--wine: #ba0a26;
--wine-dark: #850922;
--plum: #702d60;
--brown: #553027;
--bronze: #9b550f;
--gold: #ffdc65;
--gold-line: #dfa646;
--paper: #fff9f5;
--panel: #fff;
--blush: #fff0f4;
--line: #efd7cb;
--red: #b40720;
--blue: #064cae;
--white: #fff9e7;
--heading: linear-gradient(110deg, #950019, #c90027 57%, #ab061c);
--good-fill: linear-gradient(180deg, #cd1231, #ad0018);
--bad-fill: linear-gradient(180deg, #1764c9, #073e9b);
--current-fill: linear-gradient(110deg, #ffdc64, #fff2a8 50%, #ffdf6e);
font-family: "Avenir Next", "Segoe UI", sans-serif;
background: var(--paper);
color: var(--ink);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at 90% 0%,#fae5f1,transparent 38rem),linear-gradient(180deg,#fffaf6,#fff 62%,#fff5ec);min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:default}
:focus-visible{outline:3px solid #b47419;outline-offset:3px}
.top{background:var(--heading);color:var(--white);border-bottom:2px solid var(--gold-line)}
.top-inner{max-width:1280px;min-height:76px;margin:auto;padding:12px 32px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:14px;font-weight:750;letter-spacing:.12em}
.brand small{display:block;color:var(--gold);font-size:9px;letter-spacing:.13em;margin-top:4px}
.monogram{display:grid;place-items:center;border:1px solid #c7a760;border-radius:50%;width:38px;height:38px;font:600 15px Georgia,serif;color:var(--gold);letter-spacing:-.07em}
main{max-width:1280px;margin:auto;padding:0 32px}
.hero{padding:54px 0 26px}
h1,h2,h3{margin:0}
h1{font:500 clamp(40px,7vw,78px)/1.08 Georgia,serif;letter-spacing:-.05em}
h1 em{font-weight:400;color:var(--wine)}
.hero p{font-size:17px;color:var(--muted);margin:14px 0 0}
.form-panel,.slide{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:24px;box-shadow:0 8px 25px rgb(137 48 45 / 8%)}
.slide{--slide-padding:24px;padding:0 var(--slide-padding) var(--slide-padding);border-color:#e5b15c;overflow:hidden}
.mode{display:inline-flex;border-radius:10px;background:var(--blush);padding:4px;margin-bottom:17px;gap:3px}
.mode button,.sections button,.text-button{border:0;background:transparent;color:var(--wine-dark);font-weight:700}
.mode button{padding:8px 14px;border-radius:7px}
.mode [aria-pressed=true]{color:white;background:var(--wine-dark)}
.fields{display:flex;align-items:end;gap:12px}
.fields label{display:grid;gap:6px;font-size:14px;font-weight:700}
.fields .number-field{flex:1;min-width:0}
.fields .customer-field{flex:0 1 240px;min-width:0}
.fields label span{display:inline}
#year-field{width:184px}
.fields input,.group-edit input,.group-edit select{width:100%;padding:12px 14px;border-radius:9px;border:1px solid var(--gold-line);background:#fff;color:var(--ink)}
.fields input{min-height:52px;font-size:18px;font-variant-numeric:tabular-nums}
.primary,.outline{padding:10px 15px;border:1px solid currentColor;border-radius:9px;color:inherit;background:transparent;font-weight:700}
.primary{min-height:52px;color:#fff9e8;background:var(--wine-dark);border-color:var(--wine-dark);white-space:nowrap}
.primary span{margin-left:8px}
.primary:hover{background:var(--plum)}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:11px;color:var(--muted)}
.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap}
#clear-all{color:var(--wine-dark);padding:6px 10px}
.text-button{padding:4px 0;text-decoration:underline;text-underline-offset:3px}
#error{color:var(--red);margin:9px 0 0}
#results{margin-top:34px}
.result-head{display:flex;justify-content:space-between;align-items:end;gap:8px;flex-wrap:wrap}
.result-identity{display:flex;align-items:end;flex-wrap:wrap;gap:12px 22px;min-width:0}
.result-customer{max-width:100%;min-width:0;padding:5px 12px 7px;border-left:3px solid var(--gold-line);border-radius:5px;background:var(--blush)}
.result-customer strong{display:block;font-size:clamp(20px,3vw,38px);line-height:1.15;overflow-wrap:anywhere;color:var(--wine-dark)}
#results:has(> #pair-slide[hidden]) .result-customer{display:none}
.kicker{display:block;color:var(--muted);font-weight:750;font-size:13px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.result-head h2{font-size:clamp(24px,6vw,55px);letter-spacing:.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.mask{font-size:14px;display:flex;align-items:center;gap:5px;color:var(--muted)}
.sections{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.sections button{padding:8px 13px;border-radius:8px;border:1px solid var(--line);background:var(--blush)}
.sections [aria-current=true]{background:#ffe8a4;border-color:#ffe8a4;color:var(--wine-dark)}
.sections #present-groups{background:var(--wine-dark);border-color:var(--wine-dark);color:var(--white)}
#results > .slide{margin-top:12px}
#pair-slide > #group-slide{margin-top:18px}
.slide > h3,.group-slide-header{
margin:0 calc(-1 * var(--slide-padding));
padding:14px var(--slide-padding);
color:#ffedb0;
background:linear-gradient(159deg, transparent 57%, #ffda6e 60%, #ffefad 61%, #b86b16 63%, transparent 66%) right bottom / min(38%,420px) 100% no-repeat, var(--heading);
border-bottom:2px solid var(--gold-line);
text-shadow:0 1px 2px #740016;
}
.slide h3{font:700 clamp(26px,4vw,42px)/1.12 Georgia,serif}
.group-slide-header{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;border-radius:19px 19px 0 0}
.group-customer{min-width:0;max-width:100%;padding:6px 12px;border:1px solid #e5b65d;border-radius:8px;background:#fff4d7;color:var(--wine-dark);text-shadow:none}
.group-customer span{display:block;font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.group-customer strong{display:block;font-size:clamp(22px,3vw,38px);line-height:1.15;overflow-wrap:anywhere}
.slide p{margin:8px 0 16px;color:var(--muted)}
.pairs{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;padding:0;margin:0}
#pair-slide > h3 + .pairs,#pair-slide > .sim-period + .pairs,.presenting #pair-slide > .slide-help + .pairs{margin-top:12px}
.pair{width:100%;height:100%;padding:9px 4px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#fff,#fff6ee);box-shadow:0 2px 4px rgb(136 65 23 / 11%);color:inherit;text-align:center;display:grid;grid-template-rows:auto 1fr auto;align-items:center;gap:5px;justify-items:center}
.pair[aria-pressed=true]{border-color:var(--wine-dark);box-shadow:inset 0 0 0 1px var(--wine-dark)}
.pair.current-period{background:var(--current-fill);border-color:#c68106;box-shadow:inset 0 0 0 1px #d89619,0 2px 6px #d99b3040}
.pair small{color:var(--muted)}
.pair strong,.group-number{font-size:clamp(28px,4vw,42px);font-variant-numeric:tabular-nums;letter-spacing:.025em;line-height:1.08}
.tag{display:inline-block;border-radius:6px;background:var(--blush);color:var(--brown);font-size:12px;font-weight:750;padding:4px 6px;line-height:1.3}
.tag.good{background:var(--good-fill);color:white}
.tag.bad{background:var(--bad-fill);color:white}
.pair:has(.good) strong,.timeline tr:has(.good) td:first-child{color:var(--red)}
.pair:has(.bad) strong,.timeline tr:has(.bad) td:first-child{color:var(--blue)}
.timeline{width:100%;margin-top:16px;border:1px solid #e5b15c;border-radius:12px;border-spacing:0;overflow:hidden;text-align:center;font-variant-numeric:tabular-nums}
.timeline th,.timeline td{border-bottom:1px solid var(--line);padding:7px 10px}
.timeline thead{background:var(--heading);color:var(--white);font-size:14px}
.timeline tbody{font-size:clamp(15px,1.6vw,20px)}
.timeline .tag{font-size:clamp(12px,1.4vw,16px)}
.timeline tbody tr:nth-child(even){background:var(--blush)}
.timeline tbody tr:last-child td{border-bottom:0}
.timeline tbody tr.active{background:#f6e0e8}
.timeline tbody td:first-child{font-weight:700}
.timeline tbody tr.current-period{background:var(--current-fill);font-weight:750}
.timeline .current-period td:first-child{box-shadow:inset 4px 0 var(--bronze)}
.current-year{display:block;width:fit-content;margin:3px auto 0;padding:2px 7px;border:1px solid #dda334;border-radius:999px;background:#fff5bc;color:var(--wine-dark);font-size:.75em;font-weight:750}
.sim-period{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center;padding:9px 12px;border:1px solid var(--gold-line);border-radius:9px;background:#fff6d9;color:var(--wine-dark);font-size:clamp(15px,1.6vw,19px)}
.sim-period strong{font-weight:750}
.energy-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px;list-style:none;padding:0;margin:10px 0 0}
.energy-card{display:grid;justify-items:start;gap:6px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff9ed}
.energy-example{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 8px;min-width:0}
.energy-pairs{color:var(--ink);font-size:20px;font-variant-numeric:tabular-nums}
.energy-reasons{color:var(--ink);font-size:16px}
.field-key{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;margin-top:14px}
.field-key .tag{border-radius:999px;padding:4px 12px}
.slide h4{font-size:17px;margin:16px 0 0;padding:8px 12px;border-left:3px solid var(--bronze);border-radius:4px;background:var(--blush);color:var(--plum)}
.group-list{display:grid;gap:8px;padding:0;list-style:none}
.group-row{display:grid;grid-template-columns: minmax(90px,1fr) 1fr 2fr;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--blush);overflow-wrap:anywhere}
.group-note{font-size:clamp(16px,1.6vw,20px);line-height:1.4}
.group-edit{display:grid;gap:10px;margin-top:12px}
.group-edit label{min-width:0}
.group-edit label span{display:block;font-size:13px;font-weight:700;margin-bottom:4px}
.group-edit label input,.group-edit label select{min-width:0;padding:8px}
.group-edit .group-row{grid-template-columns: 1fr 1.3fr 1.8fr auto}
.group-edit button{min-height:40px}
.group-edit .outline{justify-self:start}
.controls{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--wine-dark)}
footer{margin:38px 0 0;padding:16px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
footer span:first-child{font-weight:750;letter-spacing:.11em}
.presenting .hero,.presenting .form-panel,.presenting footer{display:none}
.presenting main{padding-bottom:25px}
.presenting #results{margin-top:12px}
.presenting .top-inner{min-height:52px;padding-block:7px}
.presenting .result-head h2{font-size:clamp(24px,3.8vw,44px)}
.presenting .result-customer strong{font-size:clamp(23px,3.8vw,44px)}
.presenting .sections{display:none}
.presenting .slide{min-height:58vh}
.presenting #results:has(> #pair-slide[hidden]) .result-head{display:none}
.presenting #pair-slide:has(> #group-slide){overflow:visible}
.presenting #group-slide{overflow:visible;min-height:0;margin-top:0}
.presenting .group-slide-header{position:sticky;top:0;z-index:2}
.presenting .group-customer strong{font-size:clamp(23px,3.6vw,44px)}
.presenting .slide h3{font-size:clamp(32px,4.3vw,56px)}
.presenting .slide h4{font-size:clamp(21px,2.3vw,32px)}
.presenting .slide-help,.presenting .field-key{display:none}
.presenting .sim-period{margin-top:12px;font-size:clamp(17px,2.2vw,28px)}
.presenting .pair{padding:9px 4px}
.presenting .pair small{font-size:clamp(13px,1.35vw,19px)}
.presenting .pair strong,.presenting .group-number{font-size:clamp(32px,4vw,56px)}
.presenting .tag{font-size:clamp(15px,1.7vw,23px)}
.presenting .pair .tag{font-size:clamp(13px,1.35vw,19px);overflow-wrap:anywhere}
.presenting .group-note,.presenting .energy-reasons{font-size:clamp(17px,2vw,26px)}
.presenting .energy-pairs{font-size:clamp(23px,2.5vw,34px)}
.presenting .group-edit,.presenting .edit-toggle{display:none}
.presenting .timeline thead{font-size:clamp(15px,1.7vw,23px)}
.presenting .timeline td{font-size:clamp(16px,2vw,26px);padding-block:4px}
.presenting .timeline .tag{font-size:clamp(14px,1.6vw,22px)}
.presenting .current-year{font-size:.84em}

@media(max-width:620px){.top-inner{padding-inline:14px;min-height:65px}main{padding-inline:14px}.hero{padding-top:34px}.hero p{font-size:15px}.form-panel{padding:15px;border-radius:14px}.slide{--slide-padding:15px;border-radius:14px}.fields{flex-wrap:wrap}.fields label:first-child{flex-basis:100%}.fields .primary{flex:1}.form-foot small{max-width:170px}.form-foot .text-button{font-size:13px}.timeline td,.timeline th{padding:7px 5px}.group-edit .group-row{grid-template-columns:1fr 1fr}.group-edit .group-row button{justify-self:start}.group-row{grid-template-columns:1fr 1fr}.group-note{grid-column:1/-1}.presenting .pair{padding:9px 4px}}

@media(min-width:1000px){
.presenting main,.presenting .top-inner{max-width:1660px}
.presenting .slide{--slide-padding:20px}
.presenting .pairs{grid-template-columns:repeat(auto-fit,minmax(75px,1fr))}
.presenting .pair .tag{padding-inline:4px}
.presenting .timeline{margin-top:12px}
}
@media(max-width:760px){
.top-inner{flex-wrap:wrap}
.sections{order:1;flex-basis:100%;margin-left:0}
}
@media(max-width:620px){
.fields .customer-field,.fields .number-field{flex:1 1 100%}
.slide > h3,.group-slide-header{background-size:30% 100%,auto}
.group-slide-header{border-radius:13px 13px 0 0}
.timeline thead{font-size:12px}
.timeline .tag{font-size:12px}
.presenting .timeline th,.presenting .timeline td{padding-inline:4px;overflow-wrap:anywhere}
.current-year{padding-inline:4px}
}