*{box-sizing:border-box}
body{margin:0;background:#34211B;color:#A9CBEE;font-family:'Hanken Grotesk',system-ui,sans-serif}
a{color:#A9CBEE}a:hover{color:#E6EFFA}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:28px clamp(20px,5vw,80px)}
.brand{display:inline-flex;align-items:center;gap:12px}
.wordmark{font-family:'Instrument Serif',Georgia,serif;font-size:42px;line-height:1;letter-spacing:-.01em}
.cta{display:inline-flex;align-items:center;min-height:56px;padding:0 30px;border-radius:999px;background:#A9CBEE;color:#34211B;font-size:17px;font-weight:600;text-decoration:none}
.cta.sm{min-height:48px;padding:0 22px;font-size:15px}
.cta:hover{background:#E6EFFA;color:#34211B}
.cta:focus-visible{outline:3px solid #A9CBEE;outline-offset:3px}
main{display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(32px,4vw,64px);padding:16px clamp(20px,5vw,80px) 40px}
.left{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.intro{display:flex;flex-direction:column;gap:24px}
.eyebrow{margin:0;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
h1{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(44px,5vw,72px);line-height:1.03;letter-spacing:-.015em}
.sub{margin:0;font-size:18px;line-height:1.55}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.note{font-size:14px}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-top:1px solid #5A4640}
.steps .num{font-family:'Instrument Serif',Georgia,serif;font-size:36px;line-height:1}
.steps p{margin:0;font-size:16px;line-height:1.5}
.steps strong{font-weight:600}

.demo{flex:1.5 1 520px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(24px,3.5vw,48px);border-radius:32px;background:#A9CBEE;color:#34211B}
.demo-eyebrow{margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5B463F}
.demo h2{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:44px;line-height:1.1}
.viewport{overflow:hidden;border-radius:20px}
.track{display:flex;width:100%;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.track.on-video{transform:translateX(-100%)}
.slide{flex:0 0 100%;min-width:0}
.slide.game{display:flex;flex-direction:column;gap:14px}
.slide video{display:block;width:100%;aspect-ratio:960/610;object-fit:cover;border-radius:20px;background:#34211B}
.opt{display:flex;flex-direction:column;width:100%;min-height:120px;padding:22px 26px;border-radius:20px;font-family:inherit;text-align:left;background:#D3E3F6;color:#34211B;border:2px solid #D3E3F6;cursor:pointer;transition:background .3s,border-color .3s}
.opt:hover{outline:2px solid #34211B}
.opt:focus-visible{outline:3px solid #34211B;outline-offset:3px}
.opt .row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;width:100%}
.opt .l{display:flex;flex-direction:column;gap:6px;min-width:0}
.opt .name{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:18px;font-weight:600}
.opt .sub2{font-size:14px;color:#5B463F}
.opt .r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.opt .big{font-family:'Instrument Serif',Georgia,serif;font-size:44px;line-height:1}
.opt .lbl{font-size:13px;color:#5B463F}
.opt .tag{padding:3px 10px;border-radius:999px;background:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.opt.good{background:#1F7A4D;border-color:#1F7A4D;color:#fff;cursor:default}
.opt.bad{background:#B3261E;border-color:#B3261E;color:#fff;cursor:default}
.opt.good .sub2,.opt.good .lbl,.opt.bad .sub2,.opt.bad .lbl{color:#fff}
.opt.good .tag{color:#1F7A4D}.opt.bad .tag{color:#B3261E}
.opt.mine{border-color:#34211B}
.opt.done:hover{outline:none}
.below{display:flex;flex-direction:column;gap:16px}
.msg{min-height:64px;display:flex;flex-direction:column;gap:6px}
.msg .p1{margin:0;font-size:17px;line-height:1.5}
.msg .v{margin:0;font-size:18px;font-weight:600;line-height:1.45}
.msg .d{margin:0;font-size:14px;line-height:1.5;color:#5B463F}
.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.right{display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px}
.note-dark{font-size:13px;color:#5B463F}
.dots{display:inline-flex;align-items:center;gap:4px}
.dot{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;padding:0}
.dot span{display:block;height:10px;width:10px;border-radius:5px;background:#7D8FA6;transition:width .3s,background .3s}
.dot[aria-current="true"] span{width:28px;background:#34211B}
.dot:focus-visible{outline:3px solid #34211B;outline-offset:-4px;border-radius:999px}
.ghost{min-height:48px;padding:0 22px;border-radius:999px;border:2px solid #34211B;background:transparent;color:#34211B;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.ghost:hover{background:#34211B;color:#A9CBEE}
.ghost:focus-visible{outline:3px solid #34211B;outline-offset:3px}
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:0 clamp(20px,5vw,80px);padding:24px 0 40px;border-top:1px solid #5A4640;font-size:14px}
.links{display:flex;flex-wrap:wrap;gap:24px}
@media (prefers-reduced-motion:reduce){.track,.opt,.dot span{transition:none}}