:root{color-scheme:dark;--bg:#111417;--ink:#f4f0e6;--muted:#bcc1c2;--gold:#dfbe80;--border:#383d3f;--serif:Georgia,"Times New Roman",serif;--sans:"Segoe UI",Arial,sans-serif;--mono:Consolas,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans)}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid #90cfff;outline-offset:5px}
.wrap{width:min(1280px,88%);margin-inline:auto}
.skip{position:absolute;z-index:10;top:-80px;left:1rem;padding:.65rem;background:var(--bg)}
.skip:focus{top:4px}
.mast{background:#101215;border-bottom:1px solid #313438}
.nav,.nav nav,.brand,.open,.action,.details-inner,.text-link{display:flex;align-items:center}
.nav{height:72px;justify-content:space-between}
.brand{gap:10px;font:600 26px var(--serif);letter-spacing:-1.1px}
.brand img{width:31px;height:35px}
.nav nav{gap:30px;font-size:14px;color:#d6d7d5}
.nav a:hover,.text-link:hover,.foot a:hover{color:var(--gold)}
.nav .open{border:1px solid #6d6556;color:#e5cea3;padding:8px 15px;gap:16px;border-radius:3px}
.hero{position:relative;isolation:isolate;background:#101417;overflow:hidden}
.hero-art{position:absolute;z-index:-1;inset:0 0 0 31%;background:url('/draftsmith/assets/cards/20bb8c55-4b0b-425f-8201-b54fa2fdde86.webp') center 40%/cover no-repeat}
.hero-art{background-size:max(110%, 760px) auto}
.hero-art:after{content:"";position:absolute;inset:-1px;background:linear-gradient(90deg,#101417 0%,rgba(16,20,23,.91) 9%,rgba(16,20,23,.29) 32%,transparent 58%),linear-gradient(0deg,rgba(12,16,19,.91),transparent 29%),linear-gradient(270deg,rgba(12,16,19,.18),transparent 36%)}
.hero-inner{position:relative;min-height:clamp(465px,38vw,590px);display:flex;align-items:center}
.hero-copy{padding:48px 0 55px;max-width:57%}
.kicker{margin:0 0 17px;display:flex;align-items:center;gap:11px;font:600 12px/1.3 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.kicker i{width:25px;height:1px;background:var(--gold);display:inline-block}
h1,h2,h3,p{margin:0}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.052em}
h1{font-size:clamp(64px,6.55vw,102px);line-height:.98}
em{font-weight:400;color:#edce92}
.lead{font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:#d2d5d4;max-width:410px;margin:22px 0 25px}
.action{gap:25px;background:#edcc8b;color:#1b1c1a;width:fit-content;padding:14px 20px;font-weight:700;border-radius:3px}
.action span,.text-link span,.open span{font-size:1.25em;line-height:1}
.action:hover{background:#ffdf9d}
.browser-note{display:block;margin-top:12px;color:#b9bcb9;font-size:12px}
.art-credit{position:absolute;bottom:22px;right:0;text-align:right;color:#ecebe7}
.art-credit strong,.art-credit small{display:block;font-size:12px}
.art-credit small{color:#c7c9c9;font-size:10px}
.details-band{background:#1c2022;border-block:1px solid var(--border)}
.details-inner{min-height:62px;gap:0;flex-wrap:wrap;font:12px var(--mono);color:#c8cac7}
.details-inner strong{margin-right:auto;display:flex;gap:13px;align-items:center;font:21px var(--serif);color:var(--ink)}
.star{color:var(--gold);font-size:29px}
.details-inner>span+span:before{content:"";height:3px;width:3px;display:inline-block;background:#a48d65;vertical-align:middle;margin:0 20px;transform:rotate(45deg)}
.pack-section,.practice-inner{padding-block:54px 58px}
.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px;gap:25px}
h2{font-size:clamp(35px,3.5vw,55px);line-height:1.05}
.section-head .kicker{margin-bottom:10px}
.section-head>p,.practice p:not(.kicker),.android p:not(.kicker),.steps dd{color:var(--muted)}
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.choices button{display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto;align-content:center;column-gap:14px;text-align:left;min-height:86px;padding:0 12px 0 0;color:var(--ink);background:#1a1e21;border:1px solid #33383a;border-radius:3px;cursor:pointer;overflow:hidden}
.choices button[aria-pressed=true]{border-color:#b49a6c;background:#272623}
.choices button:hover{border-color:#8b8271}
.choices img{grid-row:span 2;height:100%;min-height:86px;width:76px;object-fit:cover}
.choices strong{font:500 clamp(16px,1.35vw,21px)/1.13 var(--serif);align-self:end}
.choices small{color:#b7bcbd;margin-top:3px;font-size:12px}
.card-detail{margin-top:21px;padding-left:15px;border-left:2px solid #756447;max-width:880px;font-size:15px;color:#c9cccc}
.card-detail strong,.card-detail small,.card-detail span{display:block}
.card-detail strong{color:var(--ink);margin-bottom:4px}
.card-detail small{color:#a7aaaa;margin-top:4px}
.coach{margin-top:18px}
.coach summary{color:var(--gold);cursor:pointer;width:fit-content}
.coach p{color:#c9cccc;margin:8px 0}
.practice{background:#1a2022;border-block:1px solid var(--border)}
.practice-inner{display:grid;grid-template-columns:1fr 1fr;gap:10%}
.practice p:not(.kicker),.android p:not(.kicker){margin:16px 0 20px;max-width:440px}
.text-link{width:fit-content;gap:15px;color:var(--gold);font-weight:600}
.steps{margin:0;border-left:1px solid #544d40;padding-left:25px}
.steps dt{font:23px var(--serif);color:#eed6a8}
.steps dd{margin:5px 0 19px}
.steps dd:last-child{margin-bottom:0}
.android{display:flex;align-items:center;gap:clamp(32px,8vw,120px);padding-block:48px}
.device{flex:none;width:155px;height:206px;overflow:hidden;border:3px solid #585953;border-bottom:0;border-radius:18px 18px 0 0;background:#1a2022}
.device img{display:block;width:100%}
footer{background:#0d1012;border-top:1px solid var(--border);padding:30px 0}
.foot{display:flex;justify-content:space-between;gap:35px}
.foot .brand{font-size:21px}
.foot .brand img{width:24px}
.foot p{color:#acb2b4;font-size:13px;margin-top:7px;max-width:365px}
.foot>div:last-child>a{font-size:14px;color:#d4c09c}
@media(max-width:900px){
  .hero-art{background-size:cover}
  .wrap{width:90%}.nav nav{gap:18px}.hero-copy{max-width:61%}.details-inner>span+span:before{margin:0 10px}
  .choices{gap:10px}.choices button{grid-template-columns:52px 1fr;column-gap:8px}.choices img{width:52px}
}
@media(max-width:650px){
  .wrap{width:calc(100% - 38px)}.nav{height:57px}.brand{font-size:23px}.brand img{width:26px}.nav nav>a:not(.open){display:none}.nav .open{padding:6px 10px;font-size:13px}
  .hero{display:flex;flex-direction:column}.hero-inner{position:static;min-height:0}
  .hero-art{inset:0 -6% auto;height:245px;background-position:50% 32%}
  .hero-art:after{background:linear-gradient(0deg,#101417 0%,rgba(16,20,23,.64) 15%,transparent 55%),linear-gradient(90deg,rgba(16,20,23,.25),transparent 65%)}
  .hero-copy{max-width:none;padding:206px 0 23px}.hero-copy .kicker{margin-bottom:12px}
  h1{font-size:clamp(51px,11.8vw,73px);line-height:.99}.lead{font-size:16px;line-height:1.45;max-width:345px;margin:13px 0 17px}
  .action{padding:12px 17px}.browser-note{margin-top:8px;font-size:11px}
  .art-credit{right:16px;top:12px;bottom:auto;text-shadow:0 1px 5px #111,0 1px 10px #111}.art-credit strong{font-size:10px}.art-credit small{font-size:9px}
  .details-inner{gap:0;min-height:68px;font-size:11px;padding:10px 0}.details-inner strong{flex-basis:100%;font-size:17px;gap:8px}.star{font-size:19px}
  .pack-section,.practice-inner{padding-block:31px}.section-head{display:block;margin-bottom:16px}.section-head>p{margin-top:10px;font-size:14px}.section-head br{display:none}
  .kicker{font-size:10px}.choices{grid-template-columns:1fr}.choices button{grid-template-columns:70px 1fr;min-height:62px;column-gap:12px}.choices img{min-height:60px;height:60px;width:70px}
  .choices strong{font-size:18px}.card-detail{font-size:14px}.practice-inner{grid-template-columns:1fr;gap:25px}
  .android{gap:18px;padding-block:32px}.device{width:88px;height:163px}.android p:not(.kicker){font-size:14px}.android h2{font-size:32px}.foot{display:grid;gap:20px}
}
@media(max-width:360px){.details-inner>span+span:before{margin:0 6px}.art-credit{right:10px}.device{width:74px}}