/* AI PRACTICE INSIDE THE PORTAL'S TRAINING LIBRARY (issue #700). VIEW ONLY.
   EVERY RULE IS SCOPED BY html.ptr-portal-view, which only portal-practice-view.js sets (a portal host, /practice,
   unframed, no ?embed=1). The Labs site, the pitch pages and the shell's frame never match a rule here
   (functions/test/portal-practice-view.test.js holds that).
   The portal's bar, rail and drawer are NOT styled here: portal-practice-shell.js draws them inside a shadow root with
   the real portal-app.css. This sheet only puts the practice page (slotted into the shell's content area) in the
   shell's light palette (portal-app.css html[data-theme="light"]) and its buttons (.btn / .btn-primary), edge to edge
   in the content area. Nothing here invents a style the portal does not already have. */

html.ptr-portal-view {
  --ppv-bg: #f3f4f8;
  --ppv-surface: #ffffff;
  --ppv-surface-2: #f6f7fb;
  --ppv-surface-3: #eceef5;
  --ppv-ink: #0b0b12;
  --ppv-ink-2: rgba(11,11,18,.74);
  --ppv-ink-3: rgba(11,11,18,.58);
  --ppv-hair: rgba(11,11,18,.12);
  --ppv-hair-2: rgba(11,11,18,.22);
  --ppv-accent: #0B6B75;
  --ppv-accent-soft: rgba(13,111,120,.12);
  --ppv-danger: #b3261e;
  --ppv-danger-soft: rgba(179,38,30,.1);
  --ppv-focus: #6A3FC9;
  --ppv-shadow: 0 10px 30px rgba(20,24,40,.12);
  --ppv-hover: 0 0 0 1px rgba(106,63,201,.45), 0 6px 22px rgba(161,0,155,.16), 0 0 24px rgba(10,98,160,.18);
  --ppv-bar: 56px;
  --ppv-rail: 104px;
  --ppv-gutter: 16px;
}
html.ptr-portal-view.ptr-portal-light { color-scheme: light; }
@media (min-width: 768px) { html.ptr-portal-view { --ppv-bar: 60px; --ppv-gutter: 24px; } }

/* THE THEME. The portal's own choice (portal-theme.js: 'ptr-portal-theme', light unless chosen) decides, read by
   portal-practice-view.js, which marks html.ptr-portal-light. Light: the shell's light palette below. Dark: the
   practice page keeps its own dark styling, inside the dark shell. */
html.ptr-portal-view.ptr-portal-light, html.ptr-portal-view.ptr-portal-light body { background: var(--ppv-bg); color: var(--ppv-ink); }
html.ptr-portal-view :where(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--ppv-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ the Labs chrome, not shown */
html.ptr-portal-view :is(header.topbar, aside.drawer, .ptr-field, .ptr-vignette, .ptr-grain, .landing > .brand, .landing > .modes, .landing > .typed, .route-intro, #ptrTopNavTwin) { display: none !important; }

/* ------------------------------------------------------------------ the content area: edge to edge
   The page sits in the shell's content area (a slot in .main.bleed, which has no padding): one viewport minus the
   shell's bar (--topbar, inherited from the shell host), nothing around it. */
html.ptr-portal-view body > main { height: calc(100vh - var(--topbar, 56px)); height: calc(100dvh - var(--topbar, 56px)); padding: 0; }
html.ptr-portal-view body:not(.unlocked) > main { padding: 24px var(--ppv-gutter); }
/* The Labs mode words were the landing's first row; without them the panels take the whole height and width. */
html.ptr-portal-view body.unlocked .landing { width: 100%; text-align: left; grid-template-rows: minmax(0, 1fr); gap: 0; }
html.ptr-portal-view body.unlocked .panel.active { animation: none; }
html.ptr-portal-view [data-panel="practice"] > .panel-head { margin: 0; padding: 20px var(--ppv-gutter) 12px; }
html.ptr-portal-view [data-panel="practice"][data-practice-state="scenario-select"] > .panel-body { padding: 0 var(--ppv-gutter) 20px; }
html.ptr-portal-view [data-panel="practice"]:not([data-practice-state="scenario-select"]) > .panel-body { padding: 0; }
html.ptr-portal-view [data-panel="practice"]:not([data-practice-state="scenario-select"]) .practice-layout,
html.ptr-portal-view [data-panel="practice"]:not([data-practice-state="scenario-select"]) .practice-stage { height: 100%; min-height: 0; gap: 0; }


/* ------------------------------------------------------------------ the layout, in both themes */
html.ptr-portal-view [data-panel="practice"]:not([data-practice-state="scenario-select"]) { grid-template-rows: minmax(0, 1fr); }
html.ptr-portal-view [data-panel="practice"]:not([data-practice-state="scenario-select"]) > .panel-head { display: none; }
html.ptr-portal-view [data-panel="practice"] .practice-stage > .card { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
/* The mode screen, full bleed: the room behind a large character, the brief on a card on the right. */
html.ptr-portal-view [data-panel="practice"] #modeCard { padding: 0; gap: 0; background: #0b0d12; grid-template-columns: minmax(0, 1fr) minmax(420px, 46%); overflow: hidden; }
html.ptr-portal-view #modeCard > .scene-bg { border-radius: 0; }
/* The room loop carries a thin dark band at its top and bottom edge; a slight zoom keeps it out of the frame. */
html.ptr-portal-view :is(#modeCard, #roleplayCard) > .scene-bg video { transform: scale(1.06); }
html.ptr-portal-view #modeCard > .scene-bg .scene-bg-scrim { background: linear-gradient(90deg, rgba(5,5,7,.05), rgba(5,5,7,.22)); }
html.ptr-portal-view [data-panel="practice"] #modeCard .mode-stage { background: none; border: 0; border-radius: 0; min-height: 0; }
html.ptr-portal-view [data-panel="practice"] #modeCard .mode-avatar { inset: 4% 0 0; }
html.ptr-portal-view [data-panel="practice"] #modeCard .mode-brief { align-self: center; margin: 24px var(--ppv-gutter) 24px 0; padding: 24px; max-height: calc(100% - 48px); overflow-y: auto; border-radius: 16px; }
html.ptr-portal-view:not(.ptr-portal-light) [data-panel="practice"] #modeCard .mode-brief { background: rgba(8,9,14,.78); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html.ptr-portal-view [data-panel="practice"] #modeCard .mode-disclaimer { margin-top: 4px; }
html.ptr-portal-view #modeCard .roleplay-head { align-items: flex-start; }
html.ptr-portal-view #modeCard .roleplay-head h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 650; letter-spacing: -.02em; margin-top: 2px; }
html.ptr-portal-view :is(#modeEyebrow, #roleEyebrow) { display: none; }
html.ptr-portal-view .ppv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ptr-ink-3); min-height: 24px; }
html.ptr-portal-view .ppv-crumb-link { color: inherit; text-decoration: none; }
html.ptr-portal-view .ppv-crumb-link:hover { text-decoration: underline; }
html.ptr-portal-view .ppv-crumb-sep:has(+ .ppv-crumb-cat:empty), html.ptr-portal-view .ppv-crumb-cat:empty { display: none; }
@media (max-width: 850px) {
  html.ptr-portal-view [data-panel="practice"] #modeCard { grid-template-columns: 1fr; grid-template-rows: minmax(260px, 46vh) auto; overflow-y: auto; }
  html.ptr-portal-view [data-panel="practice"] #modeCard .mode-avatar { inset: 0; background-position: 50% 100%; }
  html.ptr-portal-view [data-panel="practice"] #modeCard .mode-brief { margin: 0 12px 12px; padding: 18px 16px; max-height: none; overflow: visible; align-self: start; }
}

/* The entry gate, a portal card (shown only before a session is open). */
html.ptr-portal-view.ptr-portal-light .gate.plate { background: var(--ppv-surface); border: 1px solid var(--ppv-hair); border-radius: 16px; box-shadow: var(--ppv-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ptr-portal-view.ptr-portal-light .gate input { background: var(--ppv-surface); border: 1px solid var(--ppv-hair-2); color: var(--ppv-ink); }
html.ptr-portal-view.ptr-portal-light .gate input::placeholder { color: var(--ppv-ink-3); }
html.ptr-portal-view.ptr-portal-light .gate input:focus { border-color: var(--ppv-focus); box-shadow: 0 0 0 3px rgba(106,63,201,.15); }
html.ptr-portal-view.ptr-portal-light .gate-notice { color: var(--ppv-ink-2); }
html.ptr-portal-view.ptr-portal-light .gate-notice a:hover { color: var(--ppv-ink); }
html.ptr-portal-view.ptr-portal-light .gate-error { color: var(--ppv-ink); border-color: var(--ppv-danger); background: var(--ppv-danger-soft); }

/* Icon and mic buttons: the shell's light surface. The text buttons (.glass-btn, .primary-btn, .enter-btn) are the site
   pill, at the end of this file (#738). */
html.ptr-portal-view.ptr-portal-light :is(.icon-btn, .mic-btn) {
  background: var(--ppv-surface); border: 1px solid var(--ppv-hair-2); color: var(--ppv-ink);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ptr-portal-view.ptr-portal-light :is(.icon-btn, .mic-btn):hover:not(:disabled),
html.ptr-portal-view.ptr-portal-light :is(.icon-btn, .mic-btn):focus-visible { background: var(--ppv-surface-2); box-shadow: 0 0 0 1px #0B0D12; transform: none; }
html.ptr-portal-view.ptr-portal-light .icon-btn.on,
html.ptr-portal-view.ptr-portal-light .icon-btn.on:hover:not(:disabled),
html.ptr-portal-view.ptr-portal-light .icon-btn.on:focus-visible {
  color: #FFFFFF; background: #0B0D12; border-color: #0B0D12;
}
html.ptr-portal-view.ptr-portal-light .icon-btn.danger { color: var(--ppv-danger); background: var(--ppv-danger-soft); border-color: rgba(179,38,30,.45); }
html.ptr-portal-view.ptr-portal-light .mic-btn.live { border-color: rgba(161,0,155,.5); box-shadow: 0 0 0 3px rgba(240,14,249,.14); }

/* ------------------------------------------------------------------ AI practice in the portal's light palette
   The practice panel reads every ink and surface from its own tokens (labs.css "pr-contrast-tokens"), so the light
   palette is mostly those tokens, given the shell's light values. */
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] {
  --ptr-ink-2: rgba(11,11,18,.74);
  --ptr-ink-3: rgba(11,11,18,.62);
  --ptr-cyan: #0B6B75;
  --pr-ink-body: rgba(11,11,18,.86);
  --pr-ink-time: rgba(11,11,18,.74);
  --pr-ink-label: rgba(11,11,18,.62);
  --pr-ink-quiet: rgba(11,11,18,.66);
  --pr-ink-pip: rgba(11,11,18,.62);
  --pr-ink-place: rgba(11,11,18,.55);
  --pr-ink-foot: rgba(11,11,18,.58);
  --pr-glass: #ffffff;
  --pr-tile: #ffffff;
  --pr-inset: #f6f7fb;
  --pr-bubble-ai: #f6f7fb;
  --pr-bubble-user: #ffffff;
  --pr-tint-cyan: transparent;
  --pr-tint-violet: transparent;
  --pr-tint-user: rgba(13,111,120,.08);
  --pr-hair: rgba(11,11,18,.12);
  color: var(--ppv-ink);
}
/* The page head, the portal's (portal-app.css .page-head). */
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .panel-head h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 650; letter-spacing: -.025em; }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .eyebrow { color: var(--ppv-ink-3); }
/* After a scenario is chosen the step's own card names it, so the page head steps aside (as Play does). */
html.ptr-portal-view.ptr-portal-light [data-panel="practice"]:not([data-practice-state="scenario-select"]) { grid-template-rows: minmax(0, 1fr); }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"]:not([data-practice-state="scenario-select"]) > .panel-head { display: none; }
html.ptr-portal-view.ptr-portal-light .panel-body { scrollbar-color: rgba(11,11,18,.2) transparent; }
html.ptr-portal-view.ptr-portal-light .panel-body::-webkit-scrollbar-thumb { background: rgba(11,11,18,.18); background-clip: content-box; }

/* Cards: the shell's .card material (white, a hairline). Each step's card fills the content area edge to edge, so it
   has no radius, no outer border and no shadow of its own. */
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .card {
  background: var(--ppv-surface); border: 1px solid var(--ppv-hair); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(20,24,40,.08); -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .practice-stage > .card { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
/* The chat, full bleed: on a desktop the room stays behind the character (as on the mode screen) and the transcript
   sits on white beside it; on a phone, where the character is a chip, the transcript has the whole white card. */
@media (max-width: 850px) { html.ptr-portal-view.ptr-portal-light #roleplayCard > .scene-bg { display: none; } }
@media (min-width: 851px) {
  html.ptr-portal-view.ptr-portal-light #roleplayCard { background: #0b0d12; }
  html.ptr-portal-view.ptr-portal-light #roleplayCard::before { content: ""; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 34%; background: var(--ppv-surface); border-left: 1px solid var(--ppv-hair); }
  html.ptr-portal-view.ptr-portal-light #roleplayCard > .scene-bg .scene-bg-scrim { background: linear-gradient(90deg, rgba(5,5,7,.05), rgba(5,5,7,.18)); }
  html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .roleplay .role-avatar { background: none; border: 0; border-radius: 0; }
  html.ptr-portal-view [data-panel="practice"] #roleplayCard { padding-top: 16px; padding-right: var(--ppv-gutter); }
}

/* Step 1: the scenario tiles. */
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .scenario { color: var(--ppv-ink); box-shadow: 0 8px 24px rgba(20,24,40,.08); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .scenario:hover { border-color: rgba(11,107,117,.45); box-shadow: var(--ppv-hover); }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .scenario.active { border-color: var(--ppv-accent); }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .scenario-figure { background: linear-gradient(180deg, var(--ppv-surface-3), var(--ppv-surface-2)); }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .scenario-scene { opacity: .7; }
html.ptr-portal-view.ptr-portal-light .scenario-levels .lvl { border-color: var(--ppv-hair-2); }
html.ptr-portal-view.ptr-portal-light .scenario-levels .lvl[data-unlocked="true"] { border-color: rgba(11,107,117,.5); background: var(--ppv-accent-soft); }

/* Step 2: the mode screen, full bleed. The scenario's room fills the content area behind a large character on the
   left (as the practice page always had it); the breadcrumb, title, levels, the two choices and the disclaimer sit on
   the right on a portal card, in portal type and colours. */
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] #modeCard { padding: 0; gap: 0; background: #0b0d12; grid-template-columns: minmax(0, 1fr) minmax(420px, 46%); overflow: hidden; }
html.ptr-portal-view.ptr-portal-light #modeCard > .scene-bg { border-radius: 0; }
html.ptr-portal-view.ptr-portal-light #modeCard > .scene-bg .scene-bg-scrim { background: linear-gradient(90deg, rgba(5,5,7,.05), rgba(5,5,7,.22)); }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] #modeCard .mode-stage { background: none; border: 0; border-radius: 0; min-height: 0; }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] #modeCard .mode-avatar { inset: 4% 0 0; }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] #modeCard .mode-brief {
  align-self: center; margin: 24px var(--ppv-gutter) 24px 0; padding: 24px; max-height: calc(100% - 48px); overflow-y: auto;
  background: rgba(255,255,255,.96); border: 1px solid var(--ppv-hair); border-radius: 16px; box-shadow: var(--ppv-shadow);
}
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] #modeCard .mode-disclaimer { margin-top: 4px; }
@media (max-width: 850px) {
  html.ptr-portal-view.ptr-portal-light [data-panel="practice"] #modeCard { grid-template-columns: 1fr; grid-template-rows: minmax(260px, 46vh) auto; overflow-y: auto; }
  html.ptr-portal-view.ptr-portal-light [data-panel="practice"] #modeCard .mode-avatar { inset: 0; background-position: 50% 100%; }
  html.ptr-portal-view.ptr-portal-light [data-panel="practice"] #modeCard .mode-brief { margin: 0 12px 12px; padding: 18px 16px; max-height: none; overflow: visible; align-self: start; }
}
html.ptr-portal-view.ptr-portal-light #modeCard .roleplay-head { align-items: flex-start; }
html.ptr-portal-view.ptr-portal-light #modeCard .roleplay-head h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 650; letter-spacing: -.02em; margin-top: 2px; }
html.ptr-portal-view.ptr-portal-light #modeEyebrow { display: none; }
html.ptr-portal-view.ptr-portal-light .ppv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ppv-ink-3); min-height: 24px; }
html.ptr-portal-view.ptr-portal-light .ppv-crumb-link { border: 0; background: none; padding: 0; font: inherit; color: var(--ppv-ink-3); cursor: pointer; text-decoration: none; }
html.ptr-portal-view.ptr-portal-light .ppv-crumb-link:hover { color: var(--ppv-ink); text-decoration: underline; }
html.ptr-portal-view.ptr-portal-light .ppv-crumb-cat:empty, html.ptr-portal-view.ptr-portal-light .ppv-crumb-cat:empty + .ppv-crumb-sep { display: none; }
html.ptr-portal-view.ptr-portal-light .mode-choice { background: var(--ppv-surface); border: 1px solid var(--ppv-hair); border-radius: 16px; box-shadow: none; color: var(--ppv-ink); }
html.ptr-portal-view.ptr-portal-light .mode-choice:hover { border-color: rgba(11,107,117,.45); box-shadow: var(--ppv-hover); }
html.ptr-portal-view.ptr-portal-light .difficulty .diff:not([aria-pressed="true"]) { background: var(--ppv-surface); border-color: var(--ppv-hair-2); }

/* Step 3a: chat. */
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .msg.ai { border-color: var(--ppv-hair); }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .msg.user { border-color: rgba(11,107,117,.35); }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .msg.err { background: var(--ppv-danger-soft); border-color: rgba(179,38,30,.4); }
html.ptr-portal-view.ptr-portal-light .msg-act:hover { background: rgba(11,11,18,.06); }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .composer :is(input, textarea) { color: var(--ppv-ink); background: var(--ppv-surface); border-color: var(--ppv-hair-2); }
html.ptr-portal-view.ptr-portal-light [data-panel="practice"] .composer input:focus { border-color: var(--ppv-focus); box-shadow: 0 0 0 3px rgba(106,63,201,.15); }
html.ptr-portal-view.ptr-portal-light .role-avatar { color: var(--ppv-ink-3); border-color: var(--ppv-hair); background: var(--ppv-surface-2); }
html.ptr-portal-view.ptr-portal-light .mic-live { background: rgba(240,14,249,.06); border-color: rgba(161,0,155,.4); }
html.ptr-portal-view.ptr-portal-light .mic-live-label { color: #a1009b; }
html.ptr-portal-view.ptr-portal-light .mic-live.quiet { background: var(--ppv-surface-2); border-color: var(--ppv-hair-2); }
html.ptr-portal-view.ptr-portal-light .mic-live.quiet .mic-live-label { color: var(--ppv-ink-2); }

/* Step 3b: live call. A call surface stays dark (the character in a frame), on the portal's white card. */
html.ptr-portal-view.ptr-portal-light #liveCard .live-stage {
  --pr-ink-body: rgba(255,255,255,.92); --pr-ink-quiet: rgba(255,255,255,.72); --pr-ink-time: rgba(255,255,255,.8); --ptr-cyan: #80EDEF;
  color: #ffffff;
  background: radial-gradient(120% 90% at 50% 0%, rgba(65,187,245,.18), transparent 62%), #0b0d12;
}
html.ptr-portal-view.ptr-portal-light #liveCard .mic-live-label { color: #F7A8FA; }
html.ptr-portal-view.ptr-portal-light #liveCard .mic-live.quiet { background: rgba(6,8,14,.72); }
html.ptr-portal-view.ptr-portal-light #liveCard .mic-live.quiet .mic-live-label { color: var(--pr-ink-time); }

/* Step 4: results. */
html.ptr-portal-view.ptr-portal-light .result-overall { border-color: rgba(11,107,117,.3); background: var(--ppv-accent-soft); }
html.ptr-portal-view.ptr-portal-light .criterion-bar { background: rgba(11,11,18,.08); }
html.ptr-portal-view.ptr-portal-light .criterion-meter i { background: rgba(11,11,18,.1); }
html.ptr-portal-view.ptr-portal-light .level-chip { border-color: var(--ppv-hair-2); color: var(--ppv-ink); }
html.ptr-portal-view.ptr-portal-light .level-chip[data-level="0"] { color: var(--ppv-ink-3); }
html.ptr-portal-view.ptr-portal-light .level-chip:is([data-level="3"], [data-level="4"]) { border-color: var(--ppv-accent); color: var(--ppv-accent); }
html.ptr-portal-view.ptr-portal-light :is(.criterion-since, .criterion-level-text) { color: var(--ppv-ink-2); }
html.ptr-portal-view.ptr-portal-light .criterion-since:not([data-delta^="-"]):not([data-delta="0"]), html.ptr-portal-view.ptr-portal-light .result-since { color: var(--ppv-accent); }
html.ptr-portal-view.ptr-portal-light :is(.criterion-since, .result-since)[data-delta^="-"] { color: #8a5300; }
html.ptr-portal-view.ptr-portal-light .debrief-line { background: var(--ppv-accent-soft); }
html.ptr-portal-view.ptr-portal-light .result-card { border-color: rgba(11,107,117,.3); background: radial-gradient(120% 80% at 50% 0%, rgba(65,187,245,.16), transparent 60%), var(--ppv-surface-2); }
html.ptr-portal-view.ptr-portal-light .result-card-head b { color: var(--ppv-ink); }

/* Overlays and the toast: the shell's (dark toast on the light page). */
html.ptr-portal-view.ptr-portal-light .toast { background: var(--ppv-ink); color: #ffffff; }

/* BUTTONS (Kim 2026-11-04, issue #738): the peopletechrevolution.com .pm-btn, as the shell's .btn / .btn-primary
   (portal-app.css): a 44 px pill, 13 px / 600 / uppercase / .08em, no gradient, no glow, no lift. .primary-btn and
   .enter-btn are the solid one; .glass-btn the outline. Light: solid #0B0D12 / white ink; outline #0B0D12 on white.
   Dark: the inverse. Same block as portal-embed.css (keep the two in step). */
html.ptr-portal-view {
  --pmb-bg: transparent; --pmb-ink: #FFFFFF; --pmb-line: #FFFFFF; --pmb-hover: rgba(255,255,255,.12);
  --pmb-solid: #FFFFFF; --pmb-solid-ink: #0B0D12; --pmb-solid-hover: #DCDEE4; --pmb-focus: #8FD3FF;
}
html.ptr-portal-view.ptr-portal-light {
  --pmb-bg: #FFFFFF; --pmb-ink: #0B0D12; --pmb-line: #0B0D12; --pmb-hover: #F1F1F4;
  --pmb-solid: #0B0D12; --pmb-solid-ink: #FFFFFF; --pmb-solid-hover: #1B1E28; --pmb-focus: #6D57FF;
}
html.ptr-portal-view :is(.glass-btn, .primary-btn, .enter-btn) {
  min-height: 44px; padding: 0 20px;
  border-radius: 22px; border: 1px solid var(--pmb-line); background: var(--pmb-bg); color: var(--pmb-ink);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; text-shadow: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html.ptr-portal-view :is(.glass-btn, .primary-btn, .enter-btn):is(:hover, :active, :focus-visible):not(:disabled) { transform: none; box-shadow: none; }
html.ptr-portal-view .glass-btn:not(.primary-btn):hover:not(:disabled) { background: var(--pmb-hover); color: var(--pmb-ink); }
html.ptr-portal-view :is(.primary-btn, .enter-btn) { background: var(--pmb-solid); border-color: var(--pmb-solid); color: var(--pmb-solid-ink); }
html.ptr-portal-view :is(.primary-btn, .enter-btn):is(:hover, :focus-visible, :active):not(:disabled) { background: var(--pmb-solid-hover); border-color: var(--pmb-solid-hover); color: var(--pmb-solid-ink); }
html.ptr-portal-view :is(.glass-btn, .primary-btn, .enter-btn):focus-visible { outline: 2px solid var(--pmb-focus); outline-offset: 3px; }
/* A button that is a link keeps the button ink over the page's own link colour (studio.html .studio a.primary-btn). */
html.ptr-portal-view a:is(.primary-btn, .enter-btn), html.ptr-portal-view a:is(.primary-btn, .enter-btn):is(:hover, :focus-visible, :active) { color: var(--pmb-solid-ink); }
html.ptr-portal-view a.glass-btn:not(.primary-btn) { color: var(--pmb-ink); }