/* Aha Moments app. Haven Smith & Company look: Playfair Display + Montserrat, warm neutrals, ink hairlines.
   Every content button takes the width of the element it sits under; the standard width is one card of the 4-column deck (--cw). */
:root{--bg:#FFFFFF;--panel:#E2DBD1;--ink:#1A1613;--body:#4A4541;--accent:#6E5340;--dark:#2E2B28;--on-dark:#F2EDE6;--line:#C9B2A0;
--display:'Playfair Display',Georgia,'Times New Roman',serif;--sans:Montserrat,'Helvetica Neue',Arial,sans-serif;--gap:24px;--edge:32px;
--mocha-deep:#6E5340;font-size:100%}
@media (max-width:767px){:root{--edge:20px}}
/* the main site's Display settings switch the theme on <html>; the app follows */
:root[data-theme="dark"]{--bg:#17140F;--panel:#221E18;--accent:#C9B2A0;--dark:#2A2520;--on-dark:#F2EDE6;--line:#443D34}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#17140F;--panel:#221E18;--accent:#C9B2A0;--dark:#2A2520;--on-dark:#F2EDE6;--line:#443D34}}
 

#aha [hidden]{display:none!important}
#aha,#aha *{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.6}
/* her design language: every band runs to the site gutters, full width, like havensmith.company (Ashley 2026-10-22 22:26) */
#aha .wrap{max-width:none;margin:0;padding-inline:max(var(--edge),env(safe-area-inset-left,0px));container-type:inline-size}
#aha .wrap{--cw:calc((100cqw - 3 * var(--gap)) / 4)}
#aha a{color:inherit} #aha :focus-visible{outline:3px solid var(--accent);outline-offset:3px}
#aha .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 










/* buttons */
#aha .btn{display:flex;align-items:center;justify-content:center;text-align:center;font:600 .8125rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;
 min-height:52px;padding:14px 28px;border:1.5px solid var(--ink);background:var(--ink);color:var(--on-dark);cursor:pointer;text-decoration:none;border-radius:0;width:var(--cw)}
#aha .btn.ghost{background:transparent;color:var(--ink)}
@media (hover:hover) and (pointer:fine){#aha .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-dark)}}
#aha .btn.small{display:inline-flex;width:auto;min-height:44px;padding:10px 20px;font-size:.75rem} #aha .btn.full{width:100%}
#aha .btn[disabled]{opacity:.45;cursor:default}

 
 


/* type */
#aha .eye{font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
#aha h1,#aha h2,#aha h3{font-family:var(--display);font-weight:500;line-height:1.1;text-wrap:wrap;margin:0}
#aha h1{font-size:clamp(2.5rem,4.4vw,3.96rem);font-weight:600;letter-spacing:-.028em;line-height:1.04} #aha h2{font-size:clamp(2rem,4vw,4rem)} #aha h3{font-size:1.5rem}
#aha h1:focus{outline:none}
#aha .lede{font-size:1.125rem;color:var(--body);margin:0}
#aha p{margin:0}
#aha section{padding-block:96px} #aha .head{display:grid;gap:16px;margin-bottom:48px}
/* titles and subtitles run edge to edge, gutter to gutter (Ashley 2026-10-22 23:00) */
#aha .band{background:var(--panel)}

/* hero */
/* heroes are a true 50-50, and the top of the eyebrow lines up with the top of the card or panel beside it */
#aha .hero{padding-block:72px 96px}
#aha .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
#aha .hero .copy{display:grid;gap:24px;min-width:0} #aha .acts{display:flex;gap:var(--gap);flex-wrap:wrap}
#aha .stage{position:relative;aspect-ratio:1/1;max-width:100%}
#aha .fan{position:absolute;width:46%;aspect-ratio:5/7;top:14%;left:27%;box-shadow:0 18px 40px rgba(26,22,19,.18)}
#aha .fan .face{position:absolute;inset:0}
#aha .f0{transform:translate(-38%,6%) rotate(-12deg)} #aha .f1{transform:translate(0,-2%)} #aha .f2{transform:translate(38%,6%) rotate(12deg)}

/* card faces */
#aha .face{background:var(--bg);color:var(--ink);container-type:inline-size;overflow:hidden}
#aha .face .in{position:absolute;inset:0;display:flex;flex-direction:column;padding:8cqw}
#aha .face .nm{display:block;font-family:var(--display);font-weight:600;font-size:12cqw;line-height:1.05}
#aha .face .qs{display:block;font-family:var(--display);font-style:italic;font-size:5.6cqw;margin-top:2cqw}
#aha .face .pa{flex:1;display:grid;place-items:center;min-height:0} #aha .face .pa svg{width:56cqw;height:56cqw;max-height:100%}
#aha .face .lab{display:flex;justify-content:space-between;align-items:flex-end;gap:4cqw;border-top:1px solid var(--ink);padding-top:3cqw;font-size:3.5cqw;text-transform:uppercase;letter-spacing:.1em}
#aha .face .lab span:first-child{font-weight:700;letter-spacing:.16em;white-space:nowrap} #aha .face .lab span:last-child{text-transform:none;letter-spacing:.02em;text-align:right}
#aha .ex{list-style:none;margin:6cqw 0 0;padding:0;flex:1;display:flex;flex-direction:column;gap:3.4cqw}
#aha .ex li{display:flex;justify-content:space-between;gap:4cqw;font-size:5.2cqw;line-height:1.25;border-bottom:1px solid var(--ink);padding-bottom:3cqw}
#aha .ex .min{white-space:nowrap;font-size:4cqw;letter-spacing:.06em;text-transform:uppercase;padding-top:.6cqw}
#aha .flip{position:relative;aspect-ratio:5/7;width:100%;perspective:1600px;border:0;padding:0;background:none;cursor:pointer;display:block;font-family:var(--sans);text-align:left;color:var(--ink)}
#aha .flip .card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
#aha .flip .face{position:absolute;inset:0;backface-visibility:hidden} #aha .flip .back{transform:rotateY(180deg)} #aha .flip[aria-pressed="true"] .card{transform:rotateY(180deg)}
#aha .shadow .face,#aha .shadow.face{box-shadow:0 18px 40px rgba(26,22,19,.18)}
#aha .flip.shuffling .card{animation:shuf .6s ease} @keyframes shuf{30%{transform:translateX(-14%) rotate(-6deg)}65%{transform:translateX(12%) rotate(5deg)}}
#aha .still{position:relative;aspect-ratio:5/7;width:100%} #aha .still > .face{position:absolute;inset:0}

/* two-column play layout */
#aha .play{display:grid;grid-template-columns:minmax(260px,4fr) minmax(0,8fr);gap:64px;align-items:start}
#aha .cardcol{display:grid;gap:16px;min-width:0} #aha .cardcol .btn{width:100%}
#aha .cardcol .hint{margin:8px 0 0;text-align:center;color:var(--body)}
#aha .ctl{display:grid;gap:20px;min-width:0} #aha .ctl p{color:var(--body)}
#aha .hint{font-size:.875rem}
#aha .right{display:grid;gap:24px;min-width:0}

/* deck grid */
#aha .filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
#aha .chip{font:600 .75rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
#aha .chip[aria-pressed="true"]{background:var(--ink);color:var(--on-dark)}
#aha .grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
#aha .gcell{display:grid;gap:10px;align-content:start;scroll-margin-top:24px} #aha .gcell:target .mini{outline:3px solid var(--accent);outline-offset:6px}
#aha .mini{position:relative;aspect-ratio:5/7;display:block;text-decoration:none} #aha .mini > .face{position:absolute;inset:0}
#aha .gmeta{display:flex;justify-content:space-between;align-items:center;gap:12px}
#aha .tag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#aha .shr{justify-self:start;font:600 .75rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:none;border:0;border-bottom:1.5px solid var(--line);padding:6px 0;cursor:pointer}
@media (hover:hover) and (pointer:fine){#aha .shr:hover{border-bottom-color:var(--ink)}}
#aha .count{font-size:.875rem;color:var(--body);margin:0 0 16px}

/* card page */
#aha .meaning{display:grid;gap:14px} #aha .meaning p{color:var(--body)}
#aha .supplies{border-top:1px solid var(--line);padding-top:16px;color:var(--body)} #aha .supplies b{color:var(--ink)}
#aha .locked{list-style:none;margin:0;padding:0;display:grid} #aha .locked li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-block:12px}
#aha .locked li span:last-child{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--body);white-space:nowrap}
#aha .gatebox,#aha .thanks,#aha .note{display:grid;gap:14px;background:var(--dark);color:var(--on-dark);padding:36px}
#aha .gatebox h3,#aha .thanks h3{font-size:1.6rem} #aha .gatebox p,#aha .thanks p{color:var(--on-dark)}
#aha .gatebox .btn,#aha .thanks .btn{width:100%;background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
@media (hover:hover) and (pointer:fine){#aha .gatebox .btn:hover,#aha .thanks .btn:hover{background:var(--panel);color:var(--ink)}}
#aha .gatebox .btn.ghost{background:transparent;color:var(--on-dark)}
#aha .thanks a{color:var(--on-dark);font-weight:600}
#aha form{display:grid;gap:14px}
#aha .gatebox label,#aha .pz label,#aha .pz legend{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
#aha .gatebox input{font:1rem var(--sans);min-height:52px;padding:0 16px;border:1px solid var(--on-dark);background:transparent;color:var(--on-dark);border-radius:0;width:100%}
#aha .err{font-weight:600;font-size:.9rem}
#aha .pnote{font-size:.8rem}

/* guided player */
#aha .player{display:grid;gap:18px;border:1.5px solid var(--ink);padding:32px}
#aha .player:focus,#aha .thanks:focus,#aha .gatebox:focus{outline:none}
#aha .stepno{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
#aha .player h3{font-size:1.75rem} #aha .player p{color:var(--body)}
#aha .yours{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#aha .time{font-family:var(--display);font-size:clamp(3rem,7vw,4.5rem);line-height:1;font-variant-numeric:tabular-nums}
#aha .pctl{display:grid;grid-template-columns:1fr 1fr;gap:16px} #aha .pctl .btn{width:100%}
#aha .sound{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--body)}

/* personalize */
#aha .pz{display:grid;gap:14px;border:1.5px solid var(--ink);padding:32px;background:var(--panel)}
#aha .pz h3{font-size:1.5rem} #aha .pz p{color:var(--body)}
#aha .pz select,#aha .pz textarea,#aha .picker input{font:1rem var(--sans);min-height:52px;padding:0 16px;border:1px solid var(--ink);background:var(--bg);color:var(--ink);border-radius:0;width:100%}
#aha .pz textarea{min-height:96px;padding:14px 16px;resize:vertical}
#aha .pz .btn,#aha .picker .btn{width:100%}
#aha .warn{border-left:3px solid var(--accent);padding:4px 0 4px 14px;color:var(--ink);font-weight:500}
#aha .toggle{display:flex;gap:6px}

/* picker */
#aha .picker{display:grid;gap:14px}
#aha .picker label{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#aha .pickrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
#aha .pickres{display:grid;gap:8px}

/* plans */
#aha .plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
#aha .plan{display:flex;flex-direction:column;gap:14px;border:1.5px solid var(--ink);padding:32px}
#aha .plan.dark{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
#aha .plan .price{font-family:var(--display);font-size:2.5rem;line-height:1}
#aha .plan ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
#aha .plan .btn{width:100%;margin-top:auto}
#aha .plan.dark .btn{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
#aha .signin{display:grid;gap:14px;max-width:calc(var(--cw) * 2 + var(--gap))}
#aha .signin input{font:1rem var(--sans);min-height:52px;padding:0 16px;border:1px solid var(--ink);background:var(--bg);color:var(--ink);border-radius:0;width:100%}
#aha .signin label{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#aha .signin .btn{width:100%}

/* steps */
#aha .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:s}
#aha .steps li{counter-increment:s;display:grid;gap:10px;align-content:start;border-top:1.5px solid var(--ink);padding-top:20px}
#aha .steps li::before{content:"Step " counter(s);font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
#aha .steps h3{font-size:1.4rem} #aha .steps p{color:var(--body)}

/* strips */
/* strips default to Mocha Deep; the membership strips on Play are slate and bone (Ashley 2026-10-23 08:13) */
#aha .strip{background:var(--mocha-deep);color:#F2EDE6} #aha .strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--gap);flex-wrap:wrap;padding-block:32px}
#aha .strip p{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem)} #aha .strip .btn{background:#F2EDE6;color:#1A1613;border-color:#F2EDE6}
@media (hover:hover) and (pointer:fine){#aha .strip .btn:hover{background:#1A1613;color:#F2EDE6;border-color:#1A1613}}



/* share dialog */
#aha dialog{border:1.5px solid var(--ink);background:var(--bg);color:var(--ink);padding:32px;width:calc(100% - 32px);max-width:440px}
#aha dialog::backdrop{background:rgba(26,22,19,.55)}
#aha dialog h3{font-size:1.6rem;margin-bottom:8px} #aha dialog p{margin:0 0 20px;color:var(--body)}
#aha .shgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} #aha .shgrid .btn,#aha dialog .btn{width:100%;padding:14px 12px}
#aha #shClose{margin-top:12px} #aha .shgrid:has(#shMore[hidden]) #shCopy{grid-column:1/-1} #aha #shLive{margin:12px 0 0;min-height:1.4em}

@media (max-width:900px){
 #aha .hero .wrap,#aha .play{grid-template-columns:1fr} #aha .grid{grid-template-columns:repeat(2,1fr)} #aha .steps,#aha .plans{grid-template-columns:1fr}
 #aha .cardcol{max-width:360px;width:100%} #aha .stage{max-width:440px;width:100%;justify-self:center} #aha section{padding-block:64px}
 #aha .gatebox,#aha .thanks,#aha .player,#aha .plan{padding:24px} #aha .btn{width:100%} #aha .acts{flex-direction:column} #aha .strip .wrap{flex-direction:column;align-items:stretch}
 #aha .pickrow{grid-template-columns:1fr}  
 #aha .chip{padding:8px 10px;font-size:.68rem} #aha .filters{gap:8px}
}
@media (prefers-reduced-motion:reduce){#aha,#aha *{transition:none!important;animation:none!important}}
#aha .notice{border-left:3px solid var(--accent);padding:6px 0 6px 14px;font-weight:500;margin:0 0 24px}
#aha .subs{list-style:none;margin:0 0 24px;padding:0}#aha .subs li{padding:10px 0;border-top:1px solid var(--line)}#aha .subs li:last-child{border-bottom:1px solid var(--line)}

/* shop */
#aha .goods{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
#aha .good{display:grid;grid-template-rows:auto 1fr;background:var(--panel)}
#aha .good img{display:block;width:100%;height:auto;aspect-ratio:1}
#aha .good .gd{display:grid;gap:8px;align-content:start;padding:20px 24px 24px}
#aha .good h2{font-size:1.35rem} #aha .good p{margin:0;color:var(--body);font-size:.95rem}
#aha .sjrow{display:grid;grid-template-columns:1fr 1fr var(--cw);gap:var(--gap);align-items:end}
#aha .sjrow>div{display:grid;gap:8px}
@media (max-width:1180px){#aha .goods{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){#aha .goods{grid-template-columns:1fr 1fr} #aha .sjrow{grid-template-columns:1fr}}
@media (max-width:560px){#aha .goods{grid-template-columns:1fr}}
.aha-skip{position:absolute;left:-999px;z-index:100} .aha-skip:focus{left:16px;top:16px;background:#1A1613;color:#F2EDE6;padding:8px 14px;font:600 14px Montserrat,sans-serif}
.aha-pv{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;background:#1A1613;color:#F2EDE6;font:500 14px Montserrat,system-ui,sans-serif;padding:10px 16px}
.aha-pv button{font:inherit;padding:6px 12px;border:1.5px solid #F2EDE6;background:transparent;color:#F2EDE6;cursor:pointer}

#aha .sa-band{padding-block:48px 96px}
#aha .sa-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
#aha .sa-rail{position:sticky;top:calc(var(--hs-stick,76px) + 60px);max-height:calc(100vh - var(--hs-stick,76px) - 84px);overflow:auto}
#aha .sa-rail-in{display:grid;gap:28px;padding:4px}
#aha .sa-fs{border:0;margin:0;padding:0;min-width:0;display:grid;gap:4px}
#aha .sa-lg{display:block;padding:0;margin:0 0 8px;font:700 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
#aha .sa-ck{display:block;cursor:pointer}
#aha .sa-ck input{position:absolute;opacity:0;width:1px;height:1px}
#aha .sa-ck span{display:flex;align-items:center;gap:12px;min-height:40px;font:400 15px/1.3 var(--sans);color:var(--ink)}
#aha .sa-ck span::before{content:"";width:18px;height:18px;border:1.5px solid var(--ink);flex:none;box-sizing:border-box}
#aha .sa-ck input:checked+span::before{background:var(--ink);box-shadow:inset 0 0 0 3px var(--bg)}
#aha .sa-ck input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
#aha .sa-ck em{font-style:normal;color:var(--body)}
#aha .sa-ck.sa-zero span{color:var(--body)}
#aha .sa-acts{display:none}
#aha .sa-clear,#aha .sa-link{all:unset;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font:600 15px/1 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:5px}
#aha .sa-link{display:inline;min-height:0}
#aha .sa-clear:focus-visible,#aha .sa-link:focus-visible,#aha .sa-on button:focus-visible,#aha .sa-ft:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
#aha .sa-main{position:relative}
#aha .sa-bar{position:relative;z-index:30;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;align-items:center;padding-block:12px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-bottom:20px}
#aha .sa-bl{grid-column:1/-2;display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;min-width:0}
#aha .sa-ft{all:unset;box-sizing:border-box;display:none;align-items:center;gap:10px;min-height:48px;cursor:pointer;font:700 13px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
#aha .sa-ft svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
#aha .sa-n{margin:0;flex:1;font:400 16px/1.5 var(--sans);color:var(--body)}
#aha .sa-sort{grid-column:-2/-1;position:relative;min-width:0}
#aha .sa-sb{all:unset;box-sizing:border-box;width:100%;min-height:52px;display:flex;align-items:center;gap:6px;padding:0 24px 0 20px;border:1px solid var(--ink);background:var(--bg);color:var(--ink);cursor:pointer;font:400 15px/1.3 var(--sans)}
#aha .sa-sb>span{font:700 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
#aha .sa-sb b{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#aha .sa-sb svg{width:12px;height:8px;flex:none;margin-left:16px;fill:none;stroke:var(--ink);stroke-width:1.6;transition:transform .25s}
#aha .sa-sb[aria-expanded="true"] svg{transform:rotate(180deg)}
#aha .sa-sb:focus-visible,#aha .sa-menu:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
#aha .sa-menu{position:absolute;z-index:20;left:0;right:0;top:100%;margin:0;padding:0;list-style:none;background:var(--bg);border:1px solid var(--ink);border-top:0;box-shadow:0 18px 40px rgba(26,22,19,.12)}
#aha .sa-menu li{display:flex;align-items:center;min-height:48px;padding:0 20px 0 44px;position:relative;cursor:pointer;font:400 15px/1.3 var(--sans);color:var(--ink);border-top:1px solid var(--line)}
#aha .sa-menu li:first-child{border-top:0}
#aha .sa-menu li:hover,#aha .sa-menu li.on{background:var(--panel)}
#aha .sa-menu li[aria-selected="true"]{font-weight:600}
#aha .sa-menu li[aria-selected="true"]::before{content:"";position:absolute;left:20px;top:50%;width:10px;height:10px;margin-top:-5px;background:var(--accent)}
#aha .sa-on{list-style:none;margin:0;padding:0 0 20px;display:flex;flex-wrap:wrap;gap:10px}
#aha .sa-on:empty{display:none}
#aha .sa-on button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 14px;background:var(--ink);color:var(--bg);font:500 14px/1 var(--sans)}
#aha .sa-on button svg{width:10px;height:10px;stroke:currentColor;stroke-width:1.6}
#aha .sa-grid{list-style:none;margin:0;padding:0;grid-template-columns:repeat(3,minmax(0,1fr))}
#aha .sa-grid>li{display:grid;margin:0}
#aha .sa-grid>li>.hm3-prod{height:100%}
#aha .sa-grid>li[hidden]{display:none}
#aha .sa-none{margin:24px 0 0;font:400 18px/1.5 var(--sans);color:var(--body)}
@media (max-width:960px){
 #aha .sa-wrap{grid-template-columns:minmax(0,1fr);gap:0}
 #aha .sa-ft{display:inline-flex}
 #aha .sa-rail{position:static;max-height:none;overflow:visible;border-bottom:1px solid var(--ink);padding-bottom:24px;margin-bottom:24px}
 #aha .sa-rail:not(.open){display:none}
 #aha .sa-acts{display:flex;justify-content:flex-end;align-items:center;gap:24px}
 #aha .sa-done{width:auto} #aha .sa-main{order:1}
}
@media (max-width:640px){
 #aha .sa-bar{grid-template-columns:minmax(0,1fr)} #aha .sa-bl,#aha .sa-sort{grid-column:1/-1}
 #aha .sa-acts{flex-direction:column-reverse;align-items:stretch} #aha .sa-done{width:100%;justify-content:center} #aha .sa-clear{justify-content:center}
}
/* the deck page: the Shop's sort and filter (shopall.py), How it works that opens and closes */
#aha .sa-grid.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px var(--gap)}
#aha .sa-bar{grid-template-columns:repeat(4,minmax(0,1fr))}
#aha .deckpg .head .acts{margin-top:8px}
#aha .howband{background:var(--panel)}
#aha .howto summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;cursor:pointer;font:700 13px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
#aha .howto summary::-webkit-details-marker{display:none}
#aha .howto summary svg{width:12px;height:8px;fill:none;stroke:var(--ink);stroke-width:1.6;transition:transform .3s}
#aha .howto[open] summary svg{transform:rotate(180deg)}
#aha .howto summary:hover span{text-decoration:underline;text-underline-offset:6px}
#aha .howin{padding:8px 0 48px;display:grid;gap:32px}
#aha .howp{margin:0;color:var(--body)}
/* home: play in the hero, then a peek at the deck */
#aha .peek{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}
@media (max-width:1280px){#aha .sa-grid.grid,#aha .sa-bar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1060px){#aha .sa-grid.grid,#aha .sa-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){#aha .peek{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){#aha .sa-grid.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}#aha .peek{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the search box: the Shop all input from the component library */
#aha .sa-rail input[type=search],#aha .ct-f input,#aha .ct-f textarea{width:100%;min-width:0;box-sizing:border-box;min-height:52px;border:1px solid var(--ink);border-radius:0;background:var(--bg);color:var(--ink);padding:0 16px;font:400 16px/1.4 var(--sans);-webkit-appearance:none;appearance:none}
#aha .sa-rail input[type=search]::placeholder{color:var(--body)}
#aha .ct-f textarea{min-height:160px;padding:14px 16px;resize:vertical}
/* the home hero: the card with its controls beside it */
#aha .deal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:start}
#aha .deal .ctl{gap:16px} #aha .deal .ctl .btn{width:100%}
#aha .deal .hint{margin:0;text-align:left}
#aha .up{border-top:1px solid var(--ink);padding-top:16px;display:grid;gap:10px;color:var(--body);font-size:.95rem}
#aha .up a{font-weight:600;color:var(--ink);text-underline-offset:4px}
/* a panel beside a hero: what do you need today, and what the deck is */
#aha .side{display:grid;gap:20px;background:var(--panel);padding:40px}
#aha .side h2{font-size:clamp(1.6rem,2.4vw,2.25rem)}
#aha .side p{color:var(--body)}
#aha .side .picker label{font-size:.75rem;letter-spacing:.2em}
#aha .deckpg .hero{padding-block:64px}
/* upsell lines and bands */
#aha .upbar{display:flex;justify-content:space-between;align-items:center;gap:16px var(--gap);flex-wrap:wrap;background:#2E2B28;color:#F2EDE6;padding:20px 24px;margin-bottom:24px}
#aha .upbar p{color:#F2EDE6;font-weight:500}
#aha .upbar .btn{background:#F2EDE6;color:#1A1613;border-color:#F2EDE6}
#aha .upbar .btn{width:auto}
#aha .pdone{display:grid;gap:12px;border-top:1px solid var(--ink);padding-top:18px}
/* Connect */
#aha .ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
#aha .ct-f{display:grid;gap:8px}
#aha .ct-f label{font:700 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-top:16px}
#aha .ct-f label small{display:block;font:400 13px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--body);margin-top:4px}
#aha .ct-f .btn{margin-top:24px}
#aha .ct-f [aria-invalid=true]{border-width:2px}
#aha .ct-f .fe{font-weight:600;font-size:.9rem;min-height:0}
#aha .ct-f .hp{position:absolute;left:-9999px}
#aha .ct-side{background:var(--dark);color:var(--on-dark);padding:48px;display:grid;gap:20px;align-content:start}
#aha .ct-side .eye{color:var(--line)} #aha .ct-side p{color:var(--on-dark)}
#aha .ct-side .btn{background:#F2EDE6;color:#1A1613;border-color:#F2EDE6;width:100%}
#aha .ct-soc{list-style:none;margin:8px 0 0;padding:0;display:grid}
#aha .ct-soc a{display:flex;justify-content:space-between;align-items:center;min-height:52px;border-top:1px solid rgba(242,237,230,.3);color:var(--on-dark);text-decoration:none}
#aha .ct-soc li:last-child a{border-bottom:1px solid rgba(242,237,230,.3)}
@media (hover:hover) and (pointer:fine){#aha .ct-soc a:hover span{text-decoration:underline;text-underline-offset:5px}}
@media (max-width:1060px){#aha .deal{grid-template-columns:minmax(0,1fr)} #aha .deal .flip{max-width:360px}}
@media (max-width:900px){#aha .ct{grid-template-columns:1fr;gap:48px} #aha .ct-side,#aha .side{padding:28px} #aha .hero{padding-block:48px 64px} #aha .goods{grid-template-columns:1fr 1fr} #aha .sa-bar{grid-template-columns:repeat(2,minmax(0,1fr))} #aha .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){#aha .sa-bar{grid-template-columns:minmax(0,1fr)} #aha .pickrow{grid-template-columns:1fr} #aha .upbar .btn{width:100%}}
#aha .ct-f .sa-sort{grid-column:auto}
#aha .acts .btn{width:var(--cw)}
@media (max-width:900px){#aha .acts .btn{width:100%}}
#aha .hero .acts .btn{width:auto;flex:1 1 0;min-width:max-content}
#aha .ct-side h2{font-size:clamp(1.6rem,2.4vw,2.25rem)}

/* the home hero, built on havensmith.company's home hero (hm3-hero): copy in the left half on paper,
   the art bleeding to the right edge, eyebrow 64px under the header, h1 63px, sub 21px */
#aha .hx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0}
#aha .hx-tx{padding:64px 64px 96px var(--edge)}
#aha .hx-in{display:grid;gap:24px;max-width:624px}
#aha .hx-in h1{margin-top:-4px}
#aha .hx-sub{font-size:1.3125rem;line-height:1.6;color:var(--body)}
#aha .hx-acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:16px}
#aha .hx-acts .btn{width:100%;min-height:56px;font-size:.75rem;font-weight:700;letter-spacing:.16em}
#aha .hx-up{font-size:.9375rem;color:var(--body)} #aha .hx-up a{color:var(--ink);font-weight:600;text-underline-offset:4px}
#aha .hx-art{background:var(--panel);display:grid;place-items:center;align-content:center;gap:20px;min-height:min(820px,calc(100svh - 77px));padding:64px 32px}
#aha .hx-art .flip{width:min(360px,62%)}
#aha .hx-hint{font-size:.875rem;color:var(--body);text-align:center}
@media (max-width:900px){
 #aha .hx{grid-template-columns:1fr} #aha .hx-art{order:-1;min-height:0;padding:40px 20px 32px} #aha .hx-art .flip{width:min(300px,72%)}
 #aha .hx-tx{padding:40px var(--edge) 64px} #aha .hx-sub{font-size:1.125rem} #aha .hx-acts{grid-template-columns:1fr}
}

/* home: the band of cards is paper, so it never shares the hero art's sand; How it works below it is sand */
#aha .homeband{background:var(--bg)} #aha .homesteps{background:var(--panel)}
/* the members' ticker of featured cards, with a pause button (WCAG 2.2.2) */
#aha .tick{display:flex;align-items:center;gap:24px;background:var(--mocha-deep);color:#F2EDE6;padding:0 var(--edge);min-height:64px;overflow:hidden}
#aha .tick-l{font:700 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;flex:none}
#aha .tick-v{flex:1;min-width:0;overflow:hidden;display:flex;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
#aha .tick-r{list-style:none;margin:0;padding:0;display:flex;gap:48px;padding-right:48px;flex:none;animation:tick 40s linear infinite}
#aha .tick.paused .tick-r,#aha .tick:hover .tick-r,#aha .tick:focus-within .tick-r{animation-play-state:paused}
#aha .tick-r a{color:#F2EDE6;text-decoration:none;white-space:nowrap;font-size:.95rem} #aha .tick-r b{font-family:var(--display);font-weight:500;font-size:1.15rem;margin-right:6px}
#aha .tick-r a:hover b{text-decoration:underline;text-underline-offset:5px}
#aha .tick-p{all:unset;cursor:pointer;flex:none;font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;border:1px solid #F2EDE6;padding:10px 14px}
#aha .tick-p:focus-visible{outline:3px solid #F2EDE6;outline-offset:2px}
@keyframes tick{to{transform:translateX(-100%)}}
#aha .upstrip .wrap{padding-block:28px}
/* the deck hero: the picker is the call to action, and five cards deal in on the right */
#aha .hx-pick{margin-top:8px} #aha .hx-pick label{font:700 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase}
#aha .hx-pick .pickrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)} #aha .hx-pick .btn{width:100%}
#aha .hx-link{font-weight:600;color:var(--ink);text-underline-offset:5px}
#aha .fan5{position:relative;overflow:hidden}
#aha .fc{position:absolute;left:50%;top:50%;width:min(200px,28%);margin-left:calc(min(200px,28%) / -2);aspect-ratio:5/7;transform:translate(0,-50%);opacity:0;animation:deal .9s cubic-bezier(.2,.7,.2,1) forwards}
#aha .fc .still{width:100%}
#aha .fc0{--y:-42%;--r:-16deg;--x:-100%;animation-delay:.1s} #aha .fc1{--y:-47%;--r:-8deg;--x:-50%;animation-delay:.25s} #aha .fc2{--y:-50%;--r:0deg;--x:0%;animation-delay:.4s}
#aha .fc3{--y:-47%;--r:8deg;--x:50%;animation-delay:.55s} #aha .fc4{--y:-42%;--r:16deg;--x:100%;animation-delay:.7s}
@keyframes deal{from{opacity:0;transform:translate(60%,-30%) rotate(30deg)}to{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@media (max-width:900px){#aha .fan5{min-height:360px} #aha .fc{width:110px;margin-left:-55px} #aha .hx-pick .pickrow{grid-template-columns:1fr} #aha .tick{flex-wrap:wrap;padding-block:16px;gap:12px 24px} #aha .tick-v{order:3;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){#aha .fc{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))} #aha .tick-r{animation:none} #aha .tick-v{overflow-x:auto}}
#aha .deckpg .hx-art{background:#C9B2A0} /* Mocha Light, so the hero never shares the How it works sand below it */


/* the sign-in pop-up */
#aha .sidlg{position:relative;padding:48px 40px 40px;max-width:480px}
#aha .sidlg h3{font-size:1.75rem;margin:8px 0 12px} #aha .sidlg p{margin:0 0 20px}
#aha .sidlg form{display:grid;gap:10px;margin-bottom:16px}
#aha .sidlg label{font:700 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase}
#aha .sidlg input{width:100%;min-height:52px;border:1px solid var(--ink);border-radius:0;background:var(--bg);color:var(--ink);padding:0 16px;font:400 16px/1.4 var(--sans)}
#aha .si-x{all:unset;box-sizing:border-box;position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
#aha .si-x svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.6}
#aha .si-x:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
#aha .linkbtn{all:unset;cursor:pointer;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
#aha .linkbtn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* secondary buttons: white with a 1px black outline (Ashley 2026-10-23) */
#aha .btn.ghost{background:#FFFFFF;color:#1A1613;border:1px solid #1A1613}

/* Play, one page (Ashley 2026-10-23 08:11): the deck on the left, the copy on the right, one Shuffle button */
#aha .hx-l .hx-art{background:#C9B2A0} /* Mocha Light, so the hero never shares the How it works sand below it */
#aha .hx-l .hx-tx{padding:64px var(--edge) 96px 64px;display:grid;align-content:center}
#aha .stack{position:relative;width:min(360px,62%);aspect-ratio:5/7}
#aha .stack .sc{position:absolute;inset:0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#aha .stack .still{height:100%}
#aha .sc0{transform:translate(-16%,4%) rotate(-10deg)} #aha .sc1{transform:translate(15%,3%) rotate(8deg)} #aha .sc2{transform:translate(-5%,1%) rotate(-4deg)} #aha .sc3{transform:none}
#aha .stack.shuffling .sc0{animation:sh0 .7s ease 2} #aha .stack.shuffling .sc1{animation:sh1 .7s ease 2} #aha .stack.shuffling .sc2{animation:sh2 .7s ease 2} #aha .stack.shuffling .sc3{animation:sh3 1.4s ease forwards}
@keyframes sh0{50%{transform:translate(-62%,2%) rotate(-16deg)}} @keyframes sh1{50%{transform:translate(60%,4%) rotate(14deg)}} @keyframes sh2{50%{transform:translate(-30%,-10%) rotate(-8deg)}}
@keyframes sh3{40%{transform:translate(0,-12%) rotate(2deg)}100%{transform:translate(0,-4%) scale(1.04)}}
@media (prefers-reduced-motion:reduce){#aha .stack .sc,#aha .stack.shuffling .sc{animation:none;transition:none}}
#aha .memstrip,#aha .endstrip{background:#2E2B28;color:#F2EDE6}
#aha .memstrip .wrap{padding-block:40px}
#aha .memacts{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap}
#aha .memacts p{font-family:var(--sans);font-size:1rem;color:#F2EDE6;margin:0}
#aha .memstrip .linkbtn,#aha .memstrip .linkbtn:visited{color:#F2EDE6}
@media (hover:hover) and (pointer:fine){#aha .memstrip .btn:hover,#aha .endstrip .btn:hover{background:#C9B2A0;color:#1A1613;border-color:#C9B2A0}}
#aha .hasmem{margin-top:16px;font-size:1.0625rem}
/* the sort and filter bar locks under the header as you scroll, like the Shop's */
#aha .sa-bar{position:sticky;top:var(--hs-stick,76px);background:var(--bg);z-index:30}
@media (max-width:900px){#aha .hx-l .hx-tx{padding:40px var(--edge) 64px}}
#aha .memstrip .linkbtn:focus-visible,#aha .memstrip .btn:focus-visible,#aha .endstrip .btn:focus-visible{outline:3px solid #F2EDE6;outline-offset:3px}
#aha .sa-ck.soon{cursor:default} #aha .sa-ck.soon span{color:var(--body)} #aha .sa-ck.soon span::before{border-color:var(--line)}
#aha .hx-l .hx-hint{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* the live status stays for screen readers only */
/* on /aha the header mounts in its own wrapper, so the wrapper is what stays at the top as you scroll, like every other page */
body > .app.hs-auto{position:sticky!important;top:0;z-index:50}
#aha .sa-ck.soon span{flex-wrap:wrap;row-gap:0} #aha .sa-ck.soon em{flex-basis:100%;padding-left:30px;font-size:13px;margin-top:-6px}

/* the card page: the card stays beside the exercises (Ashley 2026-10-23 08:33) */
#aha .cardctl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#aha .cardctl .btn{width:100%;min-height:48px;padding-inline:8px}
#aha .cardctl .btn:first-child:nth-last-child(3){grid-column:1/-1}
@media (min-width:901px){
 #aha .cardcol{position:sticky;top:calc(var(--hs-stick,77px) + 24px)}
 /* the card is exactly as wide as its buttons, one clean line down the left (Ashley 2026-10-23 17:17); the column narrows on short screens so it all stays in view */
 /* the card and its buttons fill their column, and the space between them and the copy matches the left margin (Ashley 2026-10-23 17:27) */
 #aha .play{grid-template-columns:minmax(0,calc((100% - 64px) / 3 + 32px)) minmax(0,1fr);column-gap:var(--edge)}
 #aha .cardcol .flip,#aha .cardcol .still{width:100%}
 /* room under the exercises, so the whole card stays in view while you read the last one */
 #aha .play .right{padding-bottom:max(0px,calc(100svh - var(--hs-stick,77px) - 420px))}
}
#aha .minibar{position:fixed;left:0;right:0;top:var(--hs-stick,77px);z-index:40;display:flex;align-items:center;gap:12px;padding:10px var(--edge);background:var(--bg);border-bottom:1px solid var(--ink)}
#aha .minibar[hidden]{display:none}
#aha .mb-sw{flex:none;width:40px;height:56px;display:grid;place-items:center} #aha .mb-sw svg{width:26px;height:26px}
#aha .mb-n{display:grid;min-width:0;flex:1;line-height:1.25} #aha .mb-n b{font-family:var(--display);font-size:1.125rem;font-weight:600} #aha .mb-n i{font-size:.8125rem;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aha .minibar .btn{width:auto;min-height:44px;padding-inline:14px;flex:none}

/* sort and filter with no left rail: facets live in the bar, the same as the Shop's (Ashley 2026-10-23 08:33; shopall.py) */
#aha .sa-wrap{display:block}
#aha .sa-bar{position:sticky;top:var(--hs-stick,77px);z-index:30;background:var(--bg);display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-bottom:20px}
#aha .sa-bl{flex:1;display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
#aha .sa-fb{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;cursor:pointer;font:700 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);border:1px solid transparent}
#aha .sa-fb:hover{background:var(--panel)}
#aha .sa-fb[aria-expanded="true"]{border-color:var(--ink)}
#aha .sa-fb svg{width:12px;height:8px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .25s}
#aha .sa-fb[aria-expanded="true"] svg{transform:rotate(180deg)}
#aha .sa-fb.sa-fq svg{width:18px;height:18px;stroke-width:1.7;stroke-linecap:round;transform:none}
#aha .sa-fb:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
#aha .sa-fb.sa-has::after{content:"";width:7px;height:7px;border-radius:50%;background:#6E5340}
#aha .sa-n{margin:0 0 0 12px;flex:none}
#aha .sa-sort{width:300px;flex:none}
#aha .sa-pans{position:absolute;left:0;right:0;top:100%;z-index:39;height:0}
#aha .sa-pans[hidden]{display:none}
#aha .sa-pan{display:none;position:absolute;top:0;left:var(--sa-px,0);width:320px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:20px 24px;background:var(--bg);border:1px solid var(--ink);border-top:0;box-shadow:0 18px 40px rgba(26,22,19,.12);max-height:calc(100svh - var(--hs-stick,77px) - 100px);overflow:auto}
#aha .sa-pan[data-pan="q"]{width:420px}
#aha .sa-pans[data-show="cat"] .sa-pan[data-pan="cat"],#aha .sa-pans[data-show="access"] .sa-pan[data-pan="access"],#aha .sa-pans[data-show="q"] .sa-pan[data-pan="q"]{display:block}
#aha .sa-cols{display:grid}
#aha .sa-acts{display:none}
@media (min-width:961px){#aha .sa-pan .sa-lg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
#aha .sa-grid.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1280px){#aha .sa-grid.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:960px){
 #aha .sa-grid.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #aha .sa-fb{display:none} #aha .sa-ft{display:inline-flex}
 #aha .sa-pans{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:80vh;overflow:auto;background:var(--bg);border-top:1px solid var(--ink);box-shadow:0 -18px 40px rgba(26,22,19,.18);padding:24px var(--edge,20px) max(24px,env(safe-area-inset-bottom,0px));z-index:200}
 #aha .sa-pans[data-show="all"]{display:grid;gap:28px}
 #aha .sa-pans[data-show="all"] .sa-pan{display:block;position:static;width:auto;max-width:none;max-height:none;padding:0;border:0;box-shadow:none}
 #aha .sa-acts{display:flex;justify-content:flex-end;align-items:center;gap:24px}
}
@media (max-width:640px){
 #aha .sa-sort{width:100%} #aha .sa-n{margin-left:auto}
 #aha .sa-acts{flex-direction:column-reverse;align-items:stretch} #aha .sa-done{width:100%;justify-content:center} #aha .sa-clear{justify-content:center}
}
#aha .sa-ck.soon span{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;align-items:center;padding-block:4px} #aha .sa-ck.soon em{grid-column:2;padding-left:0;margin-top:0}
/* the rules above and below the sort and filter bar run edge to edge, like the Shop's (Ashley 2026-10-23 08:42) */
#aha .sa-bar{margin-inline:calc(-1 * var(--edge));padding-inline:var(--edge)}