/* The prototype's page styles. Written by port-engine.mjs. Do not edit by hand: the site's own rules are in site.css. */
@font-face { font-family: "ND"; src: url("/a/NewsreaderDisplay-latin.268e8b86f3.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "SG"; src: url("/a/SchibstedGrotesk-latin.3db1e48b02.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "MN"; src: url("/a/MonaspaceNeon-latin.cd9b4427a1.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { background: #1f3f34; scroll-behavior: smooth; }
body { font-family: "SG", -apple-system, system-ui, sans-serif; color: #f2f3ef; background: #1f3f34; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.scene { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px 26px; overflow: hidden; --bgc: #1f3f34; background: var(--bgc); --pu: 1px; --su: 1px; }
.scene:nth-of-type(even) { --bgc: #18332a; }
.scene::before { content: ""; position: absolute; left: 50%; top: 44%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; background: radial-gradient(closest-side, rgba(190,251,55,0.12), rgba(190,251,55,0)); pointer-events: none; }
.kick { position: relative; font-family: "MN", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #a3bcae; }
.kick b { color: #befb37; font-weight: 600; }
.beat { position: relative; width: 100%; }
.cam { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; grid-template-areas: "h" "rig" "slot" "line"; }
.cam h2 { grid-area: h; }
h1, h2 { font-family: "ND", Georgia, serif; font-weight: 500; letter-spacing: -0.022em; line-height: 1; text-align: center; text-wrap: balance; font-size: clamp(34px, 9.6vw, 62px); margin-top: 8px; }
.scene.hero h2 { font-size: clamp(42px, 11.6vw, 74px); }
.rig { grid-area: rig; margin-top: 18px; width: 550px !important; padding: 0 120px; height: var(--crop, 414px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
.scene .msgs { flex: none; height: var(--msgs, 262px); }
.scene .glow { top: 250px; height: 250px; opacity: 0.32; }
.slot { grid-area: slot; position: relative; z-index: 4; min-height: var(--pay, 76px); margin-top: -40px; display: flex; justify-content: center; align-items: flex-start; }
.line { grid-area: line; margin-top: 14px; font-size: 17px; line-height: 1.25; color: #a3bcae; text-align: center; text-wrap: balance; max-width: 320px; min-height: 22px; }
.line b { color: #f2f3ef; font-weight: 600; }
.replay { position: absolute; z-index: 6; right: 14px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%; background: rgba(242,243,239,0.14); color: #f2f3ef; display: grid; place-items: center; opacity: 0; transition: opacity 0.3s; }
.scene.done .replay { opacity: 1; }

.picks { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 360px); }
.pick { position: relative; text-align: left; border-radius: 16px; padding: 14px 14px 14px 44px; min-height: 62px; font-size: 15px; line-height: 1.18; font-weight: 600; color: #f2f3ef; background: rgba(242,243,239,0.08); border: 1.5px solid rgba(242,243,239,0.2); transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.28s cubic-bezier(0.3, 1.7, 0.5, 1); }
.pick:active { transform: scale(0.94); }
.pick::before { content: ""; position: absolute; left: 13px; top: 50%; width: 20px; height: 20px; margin-top: -11px; border-radius: 6px; border: 2px solid #a3bcae; }
.pick.on { background: #befb37; color: #111614; border-color: #befb37; }
.pick.on::before { border-color: #111614; background: #111614 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.500 3.500 3.500L15.500 6.500' fill='none' stroke='%23befb37' stroke-width='2.600' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.count { margin-top: 16px; font-family: "MN", monospace; font-size: 13px; color: #a3bcae; }
.go { margin-top: 12px; display: inline-flex; align-items: center; gap: 12px; background: rgba(242,243,239,0.12); color: #a3bcae; font-weight: 700; font-size: 18px; border-radius: 999px; padding: 16px 18px 16px 26px; text-decoration: none; transition: background 0.3s, color 0.3s, transform 0.4s cubic-bezier(0.3, 1.7, 0.5, 1), box-shadow 0.3s; pointer-events: none; }
.go i { width: 36px; height: 36px; border-radius: 50%; background: rgba(17,22,20,0.4); color: #a3bcae; display: grid; place-items: center; font-style: normal; transition: background 0.3s, color 0.3s; }
.go.ready { background: #befb37; color: #111614; pointer-events: auto; transform: scale(1.04); box-shadow: 0 18px 44px -10px rgba(190,251,55,0.55); } .go.ready i { background: #111614; color: #befb37; }
.sign { margin-top: 20px; font-size: 15px; text-align: center; } .fine { margin-top: 6px; font-size: 12px; color: #a3bcae; text-align: center; }

.film { margin: 16px 20px 0; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px rgba(17,22,20,0.22); background: #0e1a15; }
.film video { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .scene { --pu: 1.2px; --su: 1.2px; } .rig { width: calc(310px * 1.2 + 240px) !important; height: calc(var(--crop, 414px) * 1.2); } .scene .msgs { height: calc(var(--msgs, 262px) * 1.2); } .slot { min-height: calc(var(--pay, 76px) * 1.2); } .film, .filmband h2 { max-width: 900px; margin-left: auto; margin-right: auto; } }

/* The site's own rules. The prototype's rules are in proto.css, which the build puts first. */
:focus-visible { outline: 2px solid #befb37; outline-offset: 3px; }
.foot { position: relative; margin-top: 18px; display: grid; gap: 5px; font-size: 12px; line-height: 1.3; color: #a3bcae; text-align: center; }
.foot a { color: inherit; text-underline-offset: 3px; }

/* The film, on paper, between the last example and the picks. */
.filmband { background: #f2f3ef; color: #111614; padding: 44px 0 50px; }
.filmband h2 { font-size: 40px; letter-spacing: -0.02em; text-align: left; padding: 0 20px; margin-top: 0; }
.film video { aspect-ratio: 16 / 9; }

/* The plain pages: privacy and not found. */
.plain { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.plain .copy { margin-top: 22px; max-width: 420px; display: grid; gap: 14px; font-size: 17px; line-height: 1.4; color: #dfe6e0; }
.plain .copy a, .plain .back { color: #befb37; text-underline-offset: 3px; }
.plain .back { margin-top: 26px; font-weight: 700; font-size: 16px; }
.plain .foot { margin-top: 34px; }

@media (min-width: 900px) { .filmband h2 { padding: 0; } }