@font-face{font-family:Bodoni Moda;font-style:normal;font-weight:400 900;font-display:swap;src:url(/experiments/hi-lo-trainer/play/fonts/bodoni-moda.woff2)format("woff2")}@font-face{font-family:Bodoni Moda;font-style:italic;font-weight:400 900;font-display:swap;src:url(/experiments/hi-lo-trainer/play/fonts/bodoni-moda-italic.woff2)format("woff2")}html:has(.hilo-stage) body{overflow-x:clip}.hilo-stage{--felt:#86283a;--felt-deep:#5e1826;--on-felt:#fff4f1;--on-felt-dim:#f3cdd2;--rail:#2a1e1a;--rail-2:#4e3a32;--stock:#fbf8f1;--pip-red:#b3162b;--pip-black:#16181d;--card-back:#2f4fc4;--serif:"Bodoni Moda", Georgia, serif;--card-w:clamp(8.75rem, 21vw, 15.5rem);margin-inline:calc(50% - 50vw);margin-top:calc(var(--page-top) * -.5);padding:clamp(.5rem,2vw,1.5rem) clamp(.75rem,3vw,2rem) clamp(2rem,5vw,4rem);position:relative}.hilo-room{max-width:68rem;margin-inline:auto;position:relative}.hilo-lights{z-index:5;pointer-events:none;opacity:0;animation:hilo-dim 1.1s .25s var(--ease) forwards;position:absolute;inset:0}.hilo-lights>span{transition:opacity .4s var(--ease);border-radius:2rem 2rem 48% 48%/2rem 2rem 30% 30%;position:absolute;inset:0;box-shadow:inset 0 0 5rem 2rem #0a06068c,0 0 0 200vmax #0a0606c7}.hilo-stage[data-lit] .hilo-lights>span{opacity:0}html:has(.site-header:is(:hover,:focus-within)) .hilo-lights>span{opacity:0}html:has(.site-footer:focus-within) .hilo-lights>span{opacity:0}@keyframes hilo-dim{to{opacity:1}}.hilo-table{border:clamp(.75rem, 2vw, 1.25rem) solid var(--rail);background:radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--felt) 88%, white) 0%, var(--felt) 45%, var(--felt-deep) 100%), var(--felt);min-height:min(44rem,88svh);box-shadow:inset 0 0 0 2px var(--rail-2), inset 0 1.5rem 3rem -1rem #00000073, 0 2rem 4rem -2rem #0009;color:var(--on-felt);border-radius:2rem 2rem 48% 48%/2rem 2rem 30% 30%;justify-items:center;gap:clamp(1.25rem,3vw,2rem);padding:clamp(1rem,3vw,2rem) clamp(1rem,4vw,3rem) clamp(3rem,8vw,6rem);display:grid;position:relative;overflow:clip}.hilo-back{min-height:44px;color:var(--on-felt);justify-self:start;align-items:center;font-weight:500;display:inline-flex}.hilo-back:hover{-webkit-text-decoration-color:var(--on-felt);text-decoration-color:var(--on-felt)}.hilo-table :focus-visible{outline-color:var(--on-felt)}.hilo-shoe{width:calc(var(--card-w) * .55);aspect-ratio:5/3;background:linear-gradient(160deg,#3b2b25,#1c1411);border-radius:.5rem .5rem .75rem .75rem;position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,4vw,3rem);box-shadow:inset 0 2px #ffffff1f,0 .75rem 1.5rem -.5rem #0009}.hilo-shoe:after{content:"";background:var(--card-back);width:45%;height:50%;box-shadow:inset 0 0 0 3px var(--stock);border-radius:.25rem;position:absolute;inset:22% 10% auto auto;transform:skew(-12deg)}.hilo-marking{width:min(32rem,80%);fill:var(--on-felt-dim);opacity:.55;font-family:var(--serif);letter-spacing:.08em;margin-top:-.5rem;font-size:22px;font-style:italic}.hilo-hand{perspective:1400px;justify-content:center;gap:clamp(1rem,4vw,3rem);margin-top:-2rem;display:flex}.hilo-card{--rest:-4deg;--delay:.7s;--from-x:40vw;--from-y:-30vh;width:var(--card-w);aspect-ratio:5/7;color:var(--pip-black);transform:rotate(var(--rest));animation:hilo-deal .65s var(--delay) cubic-bezier(.2, .75, .25, 1) both;text-decoration:none;display:block}.hilo-card--source{--rest:5deg;--delay:1.05s;--from-x:25vw;translate:0 .75rem}@keyframes hilo-deal{0%{transform:translate(var(--from-x), var(--from-y)) rotate(-38deg)}}.hilo-card-lift{height:100%;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:preserve-3d;transition:transform .22s var(--ease);display:block}.hilo-card-inner{height:100%;transform-style:preserve-3d;animation:hilo-flip .52s calc(var(--delay) + .56s) var(--ease) both;display:block;position:relative}@keyframes hilo-flip{0%{transform:rotateY(180deg)}}.hilo-card-face,.hilo-card-back{border-radius:calc(var(--card-w) * .07);-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;inset:0;box-shadow:inset 0 1px #fff9,0 1.25rem 2rem -1rem #000000a6}.hilo-card-face{background:var(--stock);grid-template-rows:1fr auto auto;align-content:center;justify-items:center;padding:12% 19% 11%;display:grid}.hilo-card-back{background:repeating-linear-gradient(45deg, transparent 0 6px, #ffffff38 6px 7px), repeating-linear-gradient(-45deg, transparent 0 6px, #ffffff38 6px 7px), var(--card-back);box-shadow:inset 0 0 0 calc(var(--card-w) * .045) var(--stock), 0 1.25rem 2rem -1rem #000000a6;transform:rotateY(180deg)}.hilo-corner{font-family:var(--serif);font-weight:700;font-size:calc(var(--card-w) * .13);text-align:center;line-height:.95;position:absolute;top:5%;left:7%}.hilo-corner--end{inset:auto 7% 5% auto;rotate:180deg}.hilo-card--source .hilo-corner{color:var(--pip-red)}.hilo-card-window{border-radius:calc(var(--card-w) * .035);align-self:stretch;width:100%;display:block;overflow:hidden;box-shadow:0 0 0 1px #16181d26}.hilo-card-window img{object-fit:cover;object-position:50% 0;width:100%;height:100%}.hilo-card-code{color:#f3cdd2;font-family:var(--font-detail);font-size:calc(var(--card-w) * .042);background:#1c1714;align-content:center;gap:.5em;padding:.75em;line-height:1.35;display:grid}.hilo-card-code code{white-space:pre-wrap;overflow-wrap:anywhere;display:block}.hilo-card-title{font-family:var(--serif);font-style:italic;font-weight:600;font-size:calc(var(--card-w) * .15);margin-top:.4em;line-height:1}.hilo-card-sub{font-size:calc(var(--card-w) * .058);color:#4a505b;text-align:center;margin-top:.35em}.hilo-card:focus-visible{outline:none}.hilo-card:focus-visible .hilo-card-face{outline:3px solid var(--on-felt);outline-offset:5px}@media (hover:hover){.hilo-card:hover .hilo-card-lift{transform:translateY(-.75rem) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}}.hilo-copy{z-index:1;text-align:center;max-width:40rem;position:relative}.hilo-copy>*{margin:0}.hilo-copy h1{font-family:var(--serif);letter-spacing:-.01em;margin-block:.25rem .75rem;font-size:clamp(2.5rem,7vw,4.5rem);font-style:italic;font-weight:600;line-height:1}.hilo-label{font-family:var(--font-detail);letter-spacing:.12em;text-transform:uppercase;color:var(--on-felt-dim);font-size:.6875rem}.hilo-copy>p:not(.hilo-label){font-size:clamp(1rem,1.6vw,1.125rem);line-height:1.55}.hilo-copy>.hilo-small-print{color:var(--on-felt-dim);margin-top:.75rem;font-size:.875rem}.hilo-redeal{min-height:44px;color:var(--on-felt);font:inherit;cursor:pointer;background:0 0;border:1px solid #fff4f18c;border-radius:999px;margin-top:1.25rem;padding:.5rem 1.25rem;font-size:.875rem}.hilo-redeal:hover{background:#fff4f11a}@media (max-width:640px){.hilo-stage{--card-w:min(36vw, 11rem);padding-inline:.5rem}.hilo-table{border-radius:1.5rem 1.5rem 40% 40%/1.5rem 1.5rem 16% 16%;padding-inline:.75rem}.hilo-lights>span{border-radius:1.5rem 1.5rem 40% 40%/1.5rem 1.5rem 16% 16%}.hilo-hand{gap:.5rem;margin-top:0}.hilo-marking{display:none}}@media (prefers-reduced-motion:reduce){.hilo-card-lift,.hilo-card:hover .hilo-card-lift{transform:none}}