/* Player page: the same Portfloor bar over every trade module, the module filling the rest. */
:root{--bar:52px;--ink:#f3f4f6;--muted:rgba(243,244,246,.62);--line:rgba(255,255,255,.08);--accent:#2997ff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0c0e12;color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body{display:grid;grid-template-rows:var(--bar) 1fr;grid-template-columns:minmax(0,1fr);height:100dvh;overflow:hidden}
.pbar{grid-row:1;display:flex;align-items:center;gap:14px;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-left));
  background:rgba(12,14,18,.94);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:relative;z-index:2}
.pb-brand{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;height:100%}
.wm{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:21px;font-weight:650;letter-spacing:-1px;line-height:1;white-space:nowrap}
.wm-p{display:inline-block;width:.516em;height:.703em;margin-right:-.05em;background:currentColor;-webkit-mask:url(/assets/mark.svg) 0 0/100% 100% no-repeat;mask:url(/assets/mark.svg) 0 0/100% 100% no-repeat}
.pb-trade{display:flex;align-items:baseline;gap:8px;min-width:0;padding-left:14px;border-left:1px solid var(--line)}
.pb-trade b{font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.pb-trade span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.pb-all{height:34px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:600;
  background:rgba(255,255,255,.07);border:1px solid var(--line)}
.pb-all:hover{background:rgba(255,255,255,.12)}
.pb-home{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--line)}
.pb-home:hover{background:rgba(255,255,255,.12)}
.pb-home svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pb-all:focus-visible,.pb-home:focus-visible,.pb-brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pframe{display:block;width:100%;height:100%;border:0;background:#15171b;grid-row:2;grid-column:1}
/* the unlock card sits over the live preview */
.paywall{grid-row:2;grid-column:1;position:relative;z-index:1;display:grid;place-items:center;padding:20px;
  background:#0c0e12 center/cover no-repeat}
.pframe[hidden]{display:none}
.paywall[hidden]{display:none}
/* the trade's gameplay demo behind the card, darkened toward the bottom so the card reads */
.pw-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.paywall:has(.pw-video)::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(12,14,18,.25),rgba(12,14,18,.7))}
.pw-card{position:relative;z-index:1}
.pw-card{width:min(400px,100%);padding:28px 28px 22px;border-radius:22px;background:rgba(17,19,23,.82);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.pw-eyebrow{margin:0 0 10px;font:500 11.5px/1.2 "Geist Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.pw-card h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.035em;line-height:1.1}
.pw-price{display:flex;align-items:baseline;gap:8px;margin:14px 0 0}
.pw-price b{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1}
.pw-price span{color:var(--muted);font-size:15px}
.pw-list{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:14.5px}
.pw-list li{display:flex;gap:10px;align-items:baseline}
.pw-list li::before{content:"";flex:none;width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--accent)}
.pw-btn{width:100%;height:48px;margin-top:22px;border:0;border-radius:14px;background:#fff;color:#111317;font-family:inherit;font-size:15.5px;font-weight:600;line-height:1;cursor:pointer}
.pw-btn:hover{background:#e9ecf1}
.pw-btn:disabled{opacity:.6;cursor:progress}
.pw-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pw-note{min-height:18px;margin:10px 0 0;text-align:center;color:var(--muted);font-size:12.5px}
.pw-alt{display:block;margin-top:14px;text-align:center;color:var(--ink);font-size:13.5px;text-decoration:none;opacity:.8}
.pw-alt:hover{opacity:1;text-decoration:underline}
.pw-scope{margin-top:20px;padding-top:18px;border-top:1px solid #ffffff24}
.pw-scope h2{margin:0;font-size:14px;font-weight:650;line-height:1.4;color:#e7f0fb}
.pw-scope p{font-size:12.5px;line-height:1.65;color:#bfcddd;margin:9px 0}
.pw-scope strong{font-weight:600;color:#e4edf7}
.pw-scope a{display:inline-flex;align-items:center;min-height:44px;color:#9dccff;font-size:12.5px;line-height:1.5;text-underline-offset:3px}
.pw-scope a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:640px){
  :root{--bar:48px}
  .pbar{gap:10px}
  .wm{font-size:19px}
  .pb-trade{padding-left:10px}
  .pb-trade span{display:none}
  .pb-all{height:32px;padding:0 12px;font-size:13px}
  .pb-home{width:32px;height:32px}
}
/* The pass card remains scrollable on small phones and in landscape. */
body{grid-template-rows:var(--bar) minmax(0,1fr)}.pframe{min-height:0}.pbar{padding-right:max(12px,env(safe-area-inset-right));padding-left:max(12px,env(safe-area-inset-left));gap:12px}.pb-home{width:44px;height:44px;border:0;background:transparent}.pb-nav{flex:none}.pb-trade b{overflow:hidden;text-overflow:ellipsis}.pb-brand{flex:none}.paywall{min-height:0;overflow:auto;overscroll-behavior:contain;padding:32px 20px max(24px,env(safe-area-inset-bottom));align-items:safe center}.pw-card{margin:auto;padding:28px;border-radius:20px;background:#111d2bf5;border-color:#ffffff24}.pw-card h1{font-size:28px}.pw-note{line-height:1.6;font-size:13px}.pw-alt{min-height:44px;display:flex;align-items:center;justify-content:center}.pw-btn{height:auto;min-height:48px;padding:14px 16px;line-height:1.4;background:#2586ed;color:white}.player-status{grid-row:2;grid-column:1;z-index:2;align-self:center;justify-self:center;padding:18px;color:#b7c8dc;text-align:center;font-size:14px}.player-status[hidden]{display:none}.pw-terms{font-size:12px;line-height:1.6;color:#b7c5d6;text-align:center;margin:12px 0 0}.pw-terms a{color:inherit;text-underline-offset:3px}.pb-home:focus-visible{outline:2px solid #64b4ff;outline-offset:-3px}
@media(max-width:640px){.pbar{gap:10px}.wm{font-size:20px}.pb-trade{padding-left:10px}.pb-trade b{font-size:13px}.paywall{padding:20px 16px max(20px,env(safe-area-inset-bottom))}.pw-card{padding:24px 20px}.pw-card h1{font-size:26px}.pw-price b{font-size:42px}}
@media(max-height:500px){.paywall{align-items:start;padding-block:16px}.pw-card{width:min(560px,100%);padding:20px 24px}.pw-list{gap:6px;margin-top:12px;padding-top:12px}.pw-btn{margin-top:16px}.pw-card h1{font-size:24px}}

/* Unlock card in the course's asphalt and steel; the one action in safety yellow. */
:root{--accent:#f5c518}
.pw-card{background:rgba(18,21,24,.96)!important;border-color:rgba(255,255,255,.12)!important;border-radius:14px!important}
.pw-eyebrow{font:500 12px/1.4 Inter,system-ui,sans-serif!important;letter-spacing:.01em!important;text-transform:none!important;color:#a2a7a8!important}
.pw-list li::before{background:#f1f0ec!important}
.pw-btn{background:#f5c518!important;color:#111214!important;border-radius:8px!important;color-scheme:only light}
.pw-btn:hover{background:#ffd640!important}
.pw-scope{border-top-color:rgba(255,255,255,.12)!important}
.pw-scope h2,.pw-scope strong{color:#f1f0ec!important}.pw-scope p,.pw-terms{color:#a2a7a8!important}
.pw-scope a{color:#f1f0ec!important}
.pb-home:focus-visible{outline-color:#f5c518}

/* step 1: free account first, the price card after sign-in */
.pw-signup,.pw-signin{display:none}
.pw-card.is-signup>:not(.pw-signup):not(.pw-btn):not(.pw-note):not(.pw-signin){display:none}
.pw-card.is-signup .pw-signup{display:block}
.pw-card.is-signup .pw-signin{display:block;margin:14px 0 0;text-align:center;color:#a2a7a8;font-size:13.5px}
.pw-signin button{border:0;background:none;padding:0;color:#f1f0ec;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pw-signup h2{margin:0;font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.12;color:#f1f0ec}
.pw-signup>p:last-child{margin:12px 0 0;color:#a2a7a8;font-size:14.5px;line-height:1.5}
.pw-card.is-signup .pw-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:24px;background:#fff!important;color:#111214!important}
.pw-card.is-signup .pw-btn:hover{background:#eceae4!important}
.pw-btn svg{width:20px;height:20px;flex:none}