:root{--navy:#082f49;--teal:#008f8a;--blue:#1262d6;--ink:#0b253a;--muted:#60758a;--paper:#f4f8fb;--line:#d8e3eb;--gold:#f3c328;--white:#fff;--header:76px;--footer:72px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Inter,Arial,sans-serif;background:#eaf0f4;color:var(--ink)}a{text-decoration:none}button,input{font:inherit}.app{height:100dvh;display:grid;grid-template-rows:var(--header) minmax(0,1fr) var(--footer);overflow:hidden}
.top{height:var(--header);background:var(--navy);color:#fff;border-bottom:4px solid var(--teal);display:grid;grid-template-columns:minmax(330px,1fr) 660px minmax(250px,1fr);align-items:center;padding:0 28px;gap:18px;overflow:hidden}.brand{display:flex;align-items:center;gap:12px;min-width:0}.logo{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--navy);font-weight:950;border:4px solid #dff2f2}.brand b{font-size:20px}.brand small{display:block;color:#c7d8e3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.indicators{width:660px;display:grid;grid-template-columns:70px 142px 210px 208px;gap:10px;align-items:center}.slot{height:38px;border:1px solid #416176;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:11px;font-weight:800;min-width:0;overflow:hidden;background:transparent;color:#fff}.slot span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot.level{background:var(--teal);border-color:var(--teal);font-weight:950}.slot.day{background:#fff;color:var(--navy);cursor:pointer;border-color:#d8e3eb}.status{text-align:right;font-size:10px;color:#bdd1dd;white-space:nowrap;overflow:hidden}.status b{display:block;color:#6ee7df;font-size:11px;letter-spacing:.4px}
.stage{min-height:0;padding:14px 22px;overflow:hidden}.slide{height:100%;display:grid;grid-template-rows:62px minmax(0,1fr);background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(8,45,71,.07)}.head{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:8px 22px;gap:15px;overflow:hidden}.headcopy{min-width:0}.eyebrow{font-size:10px;color:var(--teal);font-weight:950;text-transform:uppercase;letter-spacing:1.2px;white-space:nowrap}.head h1{margin:3px 0 0;font-size:clamp(20px,1.8vw,28px);line-height:1.05;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.count{background:#e7f3f2;color:#006b68;padding:8px 11px;border-radius:10px;font-weight:950;font-size:11px;white-space:nowrap}.mobiletabs{display:none}
.canvas{min-height:0;display:grid;grid-template-columns:.9fr 1.08fr 1.16fr;overflow:hidden}.panel{min-width:0;min-height:0;overflow:hidden;padding:21px 27px;border-right:1px solid var(--line)}.panel:last-child{border:0}.kicker{font-size:10px;color:var(--teal);font-weight:950;text-transform:uppercase;letter-spacing:1.1px}.panel h2{font-size:clamp(18px,1.45vw,23px);margin:7px 0 11px;color:var(--navy)}.hero{font-size:clamp(28px,2.8vw,46px);line-height:1.02;color:var(--blue);font-weight:950;margin:14px 0 12px;overflow-wrap:anywhere}.lead{font-size:clamp(13.5px,1vw,16px);line-height:1.42;margin:0 0 10px}.formula{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px;font-size:clamp(13px,1vw,16px);font-weight:900;line-height:1.34;margin:13px 0;overflow-wrap:anywhere}.remember{background:#fff7d7;border-left:5px solid var(--gold);border-radius:10px;padding:10px 13px;font-size:12px;line-height:1.32;margin-top:12px;overflow-wrap:anywhere}.examples{display:grid;gap:8px;margin-top:11px}.example{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 13px}.example b{display:block;color:var(--navy);font-size:clamp(14px,1.05vw,17px);line-height:1.2;margin-bottom:3px}.example span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.bottom{height:var(--footer);background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:110px 122px minmax(300px,1fr) 122px 110px;align-items:center;padding:0 22px;gap:10px;overflow:hidden}.btn{height:42px;border:1px solid #ccd9e3;border-radius:11px;background:#fff;color:var(--navy);font-weight:900;font-size:11px;display:flex;align-items:center;justify-content:center;white-space:nowrap}.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}.btn.disabled{pointer-events:none;opacity:.3}.progressbox{min-width:0;display:grid;grid-template-rows:24px 4px 15px;align-content:center}.progressbox input{width:100%;margin:0;accent-color:var(--teal);cursor:pointer}.daybar{height:4px;background:#e6edf2;border-radius:999px;overflow:hidden}.daybar i{display:block;height:100%;background:var(--blue)}.meta{font-size:10px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:3px}
.picker{position:fixed;inset:0;background:rgba(5,25,39,.46);display:none;place-items:center;z-index:20}.picker.open{display:grid}.pickcard{width:min(820px,92vw);max-height:88vh;overflow:hidden;background:#fff;border-radius:20px;padding:22px;box-shadow:0 25px 70px rgba(0,0,0,.2)}.pickhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.pickhead h2{margin:0;color:var(--navy)}.close{border:0;background:#eef3f6;border-radius:9px;width:36px;height:36px;cursor:pointer}.daygrid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.daypick{height:64px;border:1px solid var(--line);border-radius:12px;background:#f8fbfc;color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:950;font-size:12px;min-width:0}.daypick small{display:block;width:100%;font-size:9px;font-weight:650;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px;text-align:center}.daypick.active{background:var(--navy);color:#fff}.daypick.active small{color:#c8d9e4}
@media(max-width:1280px){.top{grid-template-columns:minmax(260px,1fr) 570px minmax(190px,1fr);padding:0 16px;gap:12px}.indicators{width:570px;grid-template-columns:58px 118px 185px 179px;gap:10px}.brand small{font-size:10px}.status{font-size:9px}.panel{padding:18px 21px}.bottom{grid-template-columns:94px 105px minmax(250px,1fr) 105px 94px;padding:0 12px;gap:7px}}
@media(max-width:980px){.top{grid-template-columns:200px minmax(0,1fr);padding:0 12px}.status{display:none}.indicators{width:100%;grid-template-columns:52px 104px 1fr 1fr}.brand small{display:none}.brand b{font-size:16px}.panel{padding:16px}.bottom{grid-template-columns:78px 86px minmax(190px,1fr) 86px 78px}.btn{font-size:9px}}
@media(max-width:780px){:root{--header:64px;--footer:68px}.top{grid-template-columns:112px minmax(0,1fr);padding:0 8px;gap:6px}.logo{width:38px;height:38px;flex-basis:38px}.brand{gap:7px}.brand b{font-size:12px}.indicators{grid-template-columns:38px 72px minmax(78px,1fr) minmax(78px,1fr);gap:4px}.slot{height:31px;padding:0 5px;font-size:8px}.stage{padding:7px}.slide{grid-template-rows:48px 38px minmax(0,1fr);border-radius:14px}.head{padding:6px 11px}.eyebrow{font-size:8px}.head h1{font-size:16px}.count{padding:6px 8px;font-size:9px}.mobiletabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:4px 9px;background:#fff;border-bottom:1px solid var(--line)}.mobiletabs button{border:1px solid var(--line);background:#f5f8fa;border-radius:7px;font-weight:850;font-size:9px;color:var(--navy)}.mobiletabs button.active{background:var(--navy);color:#fff}.canvas{grid-template-columns:1fr}.canvas .panel{display:none;border:0;padding:13px 16px}.canvas .panel.active{display:block}.hero{font-size:clamp(24px,8vw,32px);margin:9px 0}.lead{font-size:12.5px}.formula{padding:9px 11px;margin:8px 0;font-size:12.5px}.remember{padding:7px 9px;margin-top:7px;font-size:10.5px}.examples{gap:6px;margin-top:7px}.example{padding:7px 9px}.bottom{grid-template-columns:48px 55px minmax(110px,1fr) 55px 48px;padding:0 5px;gap:3px}.btn{height:36px;font-size:7.5px;border-radius:8px}.progressbox{grid-template-rows:22px 3px 13px}.meta{font-size:7px}.daygrid{grid-template-columns:repeat(3,1fr);gap:6px}.daypick{height:48px;font-size:10px}.pickcard{padding:14px}.pickhead{margin-bottom:8px}.pickhead h2{font-size:17px}}
@media(max-width:1100px) and (min-width:781px){.top{grid-template-columns:200px minmax(0,1fr);padding:0 12px;gap:10px}.status{display:none}.indicators{width:100%;grid-template-columns:52px 108px minmax(150px,1fr) minmax(150px,1fr);gap:7px}.brand small{display:none}.brand b{font-size:16px}.bottom{grid-template-columns:78px 86px minmax(190px,1fr) 86px 78px;padding:0 10px;gap:4px}.btn{font-size:9px}}
@media(max-width:780px){.top{grid-template-columns:90px minmax(0,1fr)}.logo{width:34px;height:34px;flex-basis:34px;border-width:3px}.brand b{font-size:10px}.indicators{grid-template-columns:30px 58px minmax(0,1fr) minmax(0,1fr)}.slot{font-size:7px;padding:0 3px}}