:root {
  color-scheme: light;
  background: #f7f8f4;
  color: #213a32;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.sx-app {
  --ink: #213a32;
  --muted: #65736c;
  --green: #275e4d;
  --line: #dde4db;
  --paper: #fffefa;
  --orange: #e3a376;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: #f7f8f4;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sx-app [hidden] { display: none !important; }
.sx-app button { cursor: pointer; }
.sx-app button:disabled { cursor: not-allowed; opacity: .46; }
.sx-app button, .sx-app input { transition: border-color .16s, background-color .16s, box-shadow .16s; }
.sx-app :focus-visible { outline: 3px solid #b66b33; outline-offset: 4px; }
.sx-app h1:focus, .sx-app .sx-status:focus { outline-offset: 6px; }
.sx-app h1, .sx-app h2, .sx-app h3, .sx-app p { margin: 0; }
.sx-app svg { display: block; width: 20px; height: 20px; flex: none; }
.sx-app button svg { width: 18px; height: 18px; }
.sx-app button { color: inherit; }

.sx-header {
  min-height: 88px;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.sx-brand { border: 0; background: none; display: inline-flex; align-items: center; gap: 11px; justify-self: start; padding: 10px 0; font-size: 24px; font-weight: 650; letter-spacing: -1.1px; min-height: 44px; }
.sx-mark { position: relative; display: block; width: 29px; height: 29px; flex: none; }
.sx-mark::before, .sx-mark::after { content: ""; position: absolute; width: 19px; height: 21px; border: 2px solid var(--green); border-radius: 6px; background: var(--paper); }
.sx-mark::before { top: 0; left: 0; background: #dae6d7; }
.sx-mark::after { right: 0; bottom: 0; }
.sx-nav { display: flex; gap: 8px; }
.sx-nav-button { min-height: 44px; padding: 9px 15px; font-size: 13px; font-weight: 550; border: 0; border-radius: 8px; background: transparent; color: var(--muted) !important; white-space: nowrap; }
.sx-nav-button:hover:not(:disabled), .sx-nav-button[aria-current] { color: var(--ink) !important; background: #eff2eb; }
.sx-identity { justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sx-identity-name { font-size: 13px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-avatar { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #365443; background: #e7eddf; font-size: 12px; font-weight: 650; letter-spacing: .2px; }
.sx-avatar-small { width: 32px; height: 32px; font-size: 10px; background: #f0e8d9; }
.sx-simulation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; padding: 9px 24px; color: #646343; background: #eeefe0; font-size: 11px; border-bottom: 1px solid #e1e4ce; }
.sx-simulation strong { font-weight: 650; }
.sx-preview-dot { height: 5px; width: 5px; border-radius: 50%; background: #818457; }
.sx-main { width: 100%; max-width: 1168px; margin: 0 auto; padding: 58px 40px 32px; flex: 1; }
.sx-eyebrow { color: var(--green); text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; line-height: 1.6; }
.sx-hero { max-width: 660px; margin: 0 auto 42px; text-align: center; }
.sx-hero h1 { max-width: 630px; margin: 17px auto 18px; font-size: clamp(40px, 4.8vw, 60px); line-height: 1.08; font-weight: 500; letter-spacing: -2.9px; text-wrap: balance; }
.sx-lead { max-width: 440px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.sx-hero .sx-lead { margin: auto; }
.sx-start-grid { display: grid; grid-template-columns: 1.14fr 1fr; gap: 20px; }
.sx-start-card { border: 1px solid var(--line); border-radius: 17px; padding: 30px 32px 24px; position: relative; overflow: hidden; }
.sx-start-primary { background: #285b4b; color: #fffefa; border-color: #285b4b; }
.sx-start-secondary { background: #fffefa; }
.sx-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 31px; }
.sx-card-top svg { width: 24px; height: 24px; opacity: .7; }
.sx-step { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border: 1px solid #dfe5d9; border-radius: 50%; font-size: 10px; font-variant-numeric: tabular-nums; }
.sx-start-primary .sx-step { border-color: #5d8270; color: #d4e1d2; }
.sx-start-card h2 { font-size: 25px; line-height: 1.25; font-weight: 500; letter-spacing: -.9px; margin-bottom: 12px; }
.sx-start-card > p:not(.sx-card-note) { max-width: 330px; font-size: 13px; line-height: 1.75; color: var(--muted); min-height: 46px; }
.sx-start-primary > p:not(.sx-card-note) { color: #d5e3d8; }
.sx-start-card .sx-button { margin-top: 27px; }
.sx-start-card .sx-card-note { font-size: 10px; margin-top: 14px; color: var(--muted); }
.sx-start-primary .sx-card-note { color: #d0ddcf; }
.sx-button { min-height: 44px; border: 1px solid transparent; border-radius: 7px; padding: 11px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; line-height: 1.45; font-weight: 600; white-space: normal; text-align: center; }
.sx-button-primary { color: #fffefa !important; background: var(--green); border-color: var(--green); }
.sx-button-primary:hover:not(:disabled) { background: #1d493b; border-color: #1d493b; }
.sx-button-light { color: #264d3b !important; background: #edf0df; border-color: #edf0df; }
.sx-button-light:hover:not(:disabled) { background: #fffefa; border-color: #fffefa; }
.sx-button-outline { background: transparent; border-color: #cdd7ca; }
.sx-button-outline:hover:not(:disabled) { border-color: #71927a; background: #f0f3ea; }
.sx-button-danger { color: #8b4435 !important; border-color: #e0cdc5; background: #fffefa; }
.sx-button-danger:hover:not(:disabled) { border-color: #b37a68; background: #fff1ea; }
.sx-button-quiet { background: transparent; color: var(--muted) !important; }
.sx-button-quiet:hover:not(:disabled) { background: #edf1e7; }
.sx-button-full { width: 100%; }
.sx-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 33px 2px 20px; }
.sx-principle { display: flex; align-items: flex-start; gap: 12px; }
.sx-principle svg { width: 18px; height: 18px; margin-top: 3px; color: #6c8574; }
.sx-principle h3 { font-size: 12px; font-weight: 600; }
.sx-principle p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.65; }

.sx-join { min-height: 510px; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 76px; max-width: 890px; margin: 27px auto 15px; }
.sx-join-intro { padding-top: 36px; }
.sx-join h1 { font-size: clamp(36px, 4.2vw, 52px); font-weight: 500; letter-spacing: -2.2px; line-height: 1.12; margin: 20px 0; }
.sx-join .sx-lead { font-size: 14px; max-width: 310px; }
.sx-join-form { border: 1px solid var(--line); background: var(--paper); border-radius: 15px; padding: 29px; box-shadow: 0 8px 32px #24372b04; }
.sx-join-identity { display: flex; align-items: center; gap: 13px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.sx-join-identity > div { min-width: 0; }
.sx-join-identity strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.sx-small-label { font-size: 10px; color: var(--muted); display: block; margin-bottom: 3px; }
.sx-role { display: inline-block; font-size: 10px; margin-left: 9px; color: var(--muted); }
.sx-field-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 9px; }
.sx-input { display: block; width: 100%; padding: 13px 12px; min-height: 46px; background: #fdfef9; border: 1px solid #cdd8ca; border-radius: 6px; font-size: 13px; color: var(--ink); }
.sx-input::placeholder { color: #788476; opacity: 1; }
.sx-input:focus { border-color: #6c9075; }
.sx-input[aria-invalid] { border-color: #aa4b39; }
.sx-input:disabled { color: #6c776b; background: #eef1e9; }
.sx-field-hint { font-size: 10px; color: var(--muted); line-height: 1.7; margin-top: 9px !important; }
.sx-field-error { margin-top: 10px !important; color: #9b3c2d; font-size: 12px; }
.sx-join-form .sx-button { margin-top: 24px; }
.sx-join-note { padding-top: 17px; margin-top: 20px !important; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.7; }

.sx-session-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 27px; }
.sx-session-header h1 { font-size: 35px; line-height: 1.2; font-weight: 500; letter-spacing: -1.4px; margin-top: 8px; }
.sx-session-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 12px; }
.sx-state-badge { border: 1px solid #d4ddce; border-radius: 20px; background: #eef1e7; color: #5a6e56; font-size: 10px; padding: 5px 10px; white-space: nowrap; }
.sx-state-badge[data-active="true"]::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #54815b; margin-right: 6px; vertical-align: 1px; }
.sx-countdown { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sx-countdown svg { height: 15px; width: 15px; }
.sx-session-grid { display: grid; grid-template-columns: minmax(0, 1fr) 294px; align-items: start; gap: 22px; }
.sx-workspace-column, .sx-session-side { min-width: 0; }
.sx-stage { min-height: 390px; border-radius: 14px; background-color: #1e3831; color: #f1f3e7; overflow: hidden; position: relative; display: flex; flex-direction: column; border: 1px solid #233e34; background-image: radial-gradient(#a8bd9d13 .7px, transparent .7px); background-size: 17px 17px; }
.sx-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; }
.sx-stage-label { font-size: 11px; font-weight: 550; }
.sx-stage-mode { color: #b5c7b7; font-size: 9px; padding: 4px 8px; border: 1px solid #52715d; border-radius: 5px; }
.sx-stage-body { text-align: center; margin: auto; padding: 18px 38px 28px; max-width: 430px; }
.sx-stage-body h2 { font-size: 22px; font-weight: 450; letter-spacing: -.6px; line-height: 1.3; margin-bottom: 10px; }
.sx-stage-body p { color: #c3d1c2; font-size: 11px; line-height: 1.8; max-width: 300px; margin: auto; }
.sx-media-frame { width: calc(100% - 36px); margin: auto 18px 18px; border: 1px solid #6d87744d; border-radius: 8px; overflow: hidden; background: #12231e; }
.sx-media-frame > video, .sx-media-frame > canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.sx-stage-art { position: relative; width: 100px; height: 81px; margin: 2px auto 22px; }
.sx-art-window { position: absolute; width: 63px; height: 49px; border: 1px solid #98ae91; border-radius: 8px; background: #335446; }
.sx-art-window::before { content: ""; display: block; position: absolute; height: 10px; top: 0; left: 0; right: 0; border-bottom: 1px solid #627e63; }
.sx-art-window::after { content: ""; position: absolute; width: 24px; height: 4px; border-radius: 3px; background: #94a98a; top: 23px; left: 12px; box-shadow: 0 9px 0 -1px #789071; }
.sx-art-window-back { top: 2px; left: 3px; opacity: .55; transform: rotate(-8deg); }
.sx-art-window-front { bottom: 6px; right: 2px; transform: rotate(5deg); background: #43634d; }
.sx-art-dot { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #e0b084; left: 2px; bottom: 5px; border: 3px solid #29463b; }
.sx-stage-foot { padding: 13px 20px; border-top: 1px solid #789a7b24; display: flex; gap: 8px; align-items: center; color: #b5c8b7; font-size: 9px; }
.sx-stage-foot svg { width: 13px; height: 13px; }
.sx-pointer-layer { pointer-events: none; position: absolute; inset: 0; overflow: hidden; }
.sx-pointer { position: absolute; left: clamp(12px, var(--pointer-x), calc(100% - 22px)); top: clamp(12px, var(--pointer-y), calc(100% - 40px)); color: var(--person-color); filter: drop-shadow(0 1px 1px #0003); transition: left .1s linear, top .1s linear; }
.sx-pointer svg { height: 23px; width: 23px; fill: var(--person-color); stroke: #fff; stroke-width: 1.5; }
.sx-pointer-name { display: block; max-width: 125px; margin-left: 16px; margin-top: -3px; padding: 3px 7px; border-radius: 4px; background: var(--person-color); color: #fff; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-pointer[data-edge="right"] .sx-pointer-name { transform: translateX(calc(-100% + 5px)); }
.sx-stage[data-terminal="true"] { background-color: #2f3932; border-color: #38443a; }
.sx-stage[data-terminal="true"] .sx-stage-art { opacity: .5; }
.sx-session-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 17px; padding: 20px 0; }
.sx-control-hint { color: var(--muted); max-width: 248px; flex: 1 1 180px; font-size: 10px; line-height: 1.65; }
.sx-control-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.sx-control-buttons .sx-button { font-size: 11px; padding: 10px 12px; }
.sx-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 21px; }
.sx-panel + .sx-panel { margin-top: 16px; }
.sx-panel h2 { font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.sx-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.sx-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 6px; background: #eef1e7; font-size: 10px; color: var(--muted); }
.sx-participant-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 19px; }
.sx-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sx-person .sx-avatar { height: 33px; width: 33px; font-size: 9px; border: 1px solid #d9e2d2; }
.sx-person-info { min-width: 0; flex: 1; }
.sx-person-name { font-size: 11px; display: block; font-weight: 600; overflow-wrap: anywhere; }
.sx-person-detail { font-size: 9px; color: var(--muted); margin-top: 2px; display: block; }
.sx-presence-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #b2b9ad; }
.sx-person[data-presence="present"] .sx-presence-dot { background: var(--person-color); }
.sx-person[data-presence="away"] .sx-presence-dot { background: transparent; border: 1px solid var(--person-color); }
.sx-participants > .sx-button { border-top: 1px solid var(--line); border-radius: 0; margin: 20px 0 -8px; padding: 14px 0 7px; font-size: 10px; }
.sx-participants > .sx-button svg { width: 14px; height: 14px; }
.sx-invite-panel { background: #f0f3e8; border-color: #e1e7d8; }
.sx-invite-panel .sx-eyebrow, .sx-guest-panel .sx-eyebrow { font-size: 8px; letter-spacing: 1.1px; margin-bottom: 9px; }
.sx-panel-copy { font-size: 10px; color: var(--muted); line-height: 1.75; margin-top: 9px !important; }
.sx-invite-panel .sx-button { margin-top: 16px; font-size: 10px; }
.sx-invite-panel .sx-button svg { width: 14px; height: 14px; }
.sx-invite-token { display: block; margin-top: 17px; border-radius: 6px; background: #fffefa; border: 1px solid #d4ddcb; padding: 11px 12px; color: #42583e; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; word-break: break-all; user-select: all; }
.sx-invite-panel .sx-field-hint { font-size: 9px; }
.sx-guest-panel { background: #f2f3eb; }
.sx-receipt { margin-top: 1px; padding: 19px 20px; background: #f0f1e9; border: 1px solid var(--line); border-radius: 10px; }
.sx-receipt h2 { font-size: 12px; font-weight: 600; margin-bottom: 16px; }
.sx-receipt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 0; }
.sx-receipt dt { color: var(--muted); font-size: 9px; line-height: 1.5; }
.sx-receipt dd { margin: 5px 0 0; font-size: 11px; font-weight: 550; overflow-wrap: anywhere; }
.sx-receipt .sx-field-hint { margin-top: 17px !important; font-size: 9px; }
.sx-empty-session { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; min-height: 330px; padding: 70px 24px; text-align: center; }
.sx-empty-session h2 { font-size: 25px; font-weight: 500; letter-spacing: -.7px; }
.sx-empty-session p { color: var(--muted); font-size: 13px; margin: 12px 0 24px; }

.sx-feedback { display: flex; align-items: center; gap: 12px; background: #eff2e9; padding: 14px 17px; border: 1px solid #dfe6d7; border-radius: 8px; margin-top: 25px; min-height: 54px; }
.sx-feedback-mark { width: 6px; height: 6px; flex: none; background: #6f8c66; border-radius: 50%; }
.sx-feedback-content { flex: 1; min-width: 0; }
.sx-status { color: #4e6546; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.sx-uncertainty { font-size: 10px; line-height: 1.7; color: #77523e; margin-top: 5px !important; }
.sx-feedback[data-kind="error"] { background: #fcf0e6; border-color: #ecd6c6; }
.sx-feedback[data-kind="error"] .sx-feedback-mark { background: #a45b36; }
.sx-feedback[data-kind="error"] .sx-status { color: #874a32; }
.sx-feedback[data-kind="progress"] .sx-feedback-mark { height: 12px; width: 12px; border: 1.5px solid #c1cfb9; border-top-color: #426346; background: transparent; animation: sx-spin 1s linear infinite; }
.sx-feedback > .sx-button { min-height: 34px; font-size: 10px; padding: 8px 10px; flex: none; }
.sx-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 48px; border-top: 1px solid var(--line); color: #798575; font-size: 10px; }
.sx-footer > :last-child { letter-spacing: -.3px; font-size: 12px; font-weight: 550; }

.simulation-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 24px; border-bottom: 1px solid #dce1d4; background: #e9eee2; color: #465b3c; font-size: 11px; line-height: 1.6; }
.simulation-tools label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.simulation-tools button, .simulation-tools select { min-height: 34px; padding: 6px 10px; border: 1px solid #bdcdb5; border-radius: 6px; font: inherit; color: #36513a; background: #fffefa; }
.simulation-tools button { cursor: pointer; }
.simulation-tools button:hover { background: #f4f7ec; }
.simulation-tools :focus-visible { outline: 3px solid #b66b33; outline-offset: 3px; }
#simulation-outcome { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }

@keyframes sx-spin { to { transform: rotate(360deg); } }

@media (min-width: 1440px) {
  .sx-main { padding-top: 70px; }
  .sx-hero { margin-bottom: 48px; }
  .sx-start-card { padding: 34px 36px 27px; }
}

@media (max-width: 1000px) {
  .sx-header { padding: 0 28px; gap: 16px; }
  .sx-main { padding: 45px 28px 28px; }
  .sx-identity-name { max-width: 90px; }
  .sx-session-grid { grid-template-columns: minmax(0, 1fr) 263px; gap: 17px; }
  .sx-stage { min-height: 380px; }
  .sx-join { gap: 42px; }
  .sx-panel { padding: 18px; }
  .sx-control-hint { max-width: none; flex-basis: 100%; }
  .sx-control-buttons { width: 100%; }
  .sx-control-buttons .sx-button { flex: 1; }
}

@media (max-width: 720px) {
  .sx-header { min-height: auto; grid-template-columns: 1fr auto; padding: 15px 22px 10px; gap: 10px 18px; }
  .sx-brand { font-size: 23px; }
  .sx-identity { grid-column: 2; grid-row: 1; }
  .sx-identity-name { max-width: 110px; }
  .sx-nav { grid-column: 1 / -1; justify-content: center; gap: 5px; padding-top: 2px; }
  .sx-nav-button { padding: 8px 14px; min-height: 40px; font-size: 12px; }
  .sx-simulation { padding: 9px 20px; font-size: 10px; gap: 3px 7px; }
  .sx-simulation > :last-child { flex-basis: 100%; text-align: center; }
  .sx-main { padding: 36px 22px 25px; }
  .sx-hero { margin-bottom: 29px; }
  .sx-hero h1 { font-size: 44px; letter-spacing: -2.3px; max-width: 450px; }
  .sx-hero .sx-lead { max-width: 360px; font-size: 13px; }
  .sx-eyebrow { font-size: 9px; }
  .sx-start-grid { grid-template-columns: 1fr; gap: 16px; }
  .sx-start-card { padding: 23px 25px; }
  .sx-card-top { margin-bottom: 23px; }
  .sx-start-card h2 { font-size: 25px; }
  .sx-start-card > p:not(.sx-card-note) { max-width: 390px; min-height: 0; }
  .sx-start-card .sx-button { margin-top: 22px; }
  .sx-principles { grid-template-columns: 1fr; gap: 21px; padding-top: 28px; }
  .sx-principle { gap: 13px; }
  .sx-principle p { margin-top: 2px; }
  .sx-join { grid-template-columns: 1fr; gap: 27px; min-height: 0; max-width: 430px; margin-top: 0; }
  .sx-join-intro { padding-top: 0; }
  .sx-join h1 { font-size: 42px; margin: 15px 0; }
  .sx-join-form { padding: 25px; }
  .sx-session-grid { grid-template-columns: 1fr; }
  .sx-session-header { align-items: start; margin-bottom: 21px; gap: 12px; }
  .sx-session-header h1 { font-size: 31px; }
  .sx-session-meta { gap: 9px; flex-direction: column; align-items: end; padding-top: 3px; }
  .sx-session-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 15px; }
  .sx-panel + .sx-panel { margin-top: 0; }
  .sx-stage { min-height: 360px; }
  .sx-control-hint { flex-basis: 180px; }
  .sx-control-buttons { width: auto; }
  .sx-receipt { margin-bottom: 6px; }
  .sx-footer { padding: 21px 22px; }
  .sx-feedback { margin-top: 22px; }
}

@media (max-width: 420px) {
  .sx-main { padding-left: 17px; padding-right: 17px; }
  .sx-header { padding-left: 17px; padding-right: 17px; }
  .sx-identity-name { max-width: 100px; }
  .sx-hero h1 { font-size: 39px; }
  .sx-start-card { padding: 23px; }
  .sx-session-side { grid-template-columns: 1fr; }
  .sx-stage-body { padding-left: 26px; padding-right: 26px; }
  .sx-session-header h1 { font-size: 29px; }
  .sx-state-badge { font-size: 9px; }
  .sx-countdown { font-size: 10px; }
  .sx-session-controls { gap: 13px; }
  .sx-control-buttons { width: 100%; }
  .sx-control-hint { flex-basis: 100%; }
  .sx-receipt-grid { grid-template-columns: 1fr; gap: 13px; }
  .sx-receipt-grid > div { display: flex; gap: 15px; justify-content: space-between; align-items: baseline; }
  .sx-receipt dt { max-width: 150px; }
  .sx-receipt dd { text-align: right; margin-top: 0; }
  .sx-feedback { flex-wrap: wrap; padding: 14px; gap: 10px; }
  .sx-feedback > .sx-button { margin-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-app *, .sx-app *::before, .sx-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.sa-root { --green: #285442; --paper: #fffefa; --line: #dce5da; --muted: #60756c; max-width: 1120px; margin: 0 auto; padding: 64px 24px; }
.sa-root :focus-visible { outline: 3px solid #b66b33; outline-offset: 4px; }
.sa-root button { cursor: pointer; }
.sa-root button:disabled,.sa-root button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.sa-root [hidden] { display: none !important; }
.sa-root h1 { margin: 12px 0 16px; font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; letter-spacing: -.045em; }
.sa-root .sa-intro { max-width: 600px; color: #60756c; line-height: 1.6; margin-bottom: 28px; }
.sa-status { margin: 24px 0; padding: 18px; background: #ecf1e8; border-radius: 8px; line-height: 1.6; }
.sa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sa-card h2 { margin: 0 0 20px; font-size: 1.1rem; }
.sa-grid .sx-panel + .sx-panel { margin-top: 0; }
.sa-value { font-size: 1.3rem; font-weight: 500; }
.sa-detail,.sa-note { color: #60756c; line-height: 1.7; font-size: .9rem; }
.sa-card button { margin-top: 12px; margin-right: 8px; }
.sa-steps,.sa-requests { padding: 0; list-style: none; }
.sa-steps li,.sa-requests li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 14px 0; border-top: 1px solid #dce5da; font-size: .9rem; }
.sa-requests small { flex-basis: 100%; line-height: 1.6; color: #60756c; }
.sa-note { margin-top: 28px; }
.sa-simulation { text-align: center; padding: 12px 18px; background: #e5ebe0; color: #335e48; font-size: .8rem; line-height: 1.5; }
@media(max-width:640px) { .sa-root { padding: 32px 18px; } .sa-grid { grid-template-columns: 1fr; } .sa-steps li { flex-direction: column; } }

.ss-stage{position:fixed;inset:0;isolation:isolate;width:100%;height:100dvh;min-height:280px;overflow:hidden;background:var(--sessions-stage-background,#101a17);color:var(--sessions-stage-text,#f7faf6);font:13px/1.45 var(--sessions-font,Inter,ui-sans-serif,system-ui,sans-serif);--ss-edge:16px;--ss-top:72px;--ss-bottom:86px}
.ss-stage[hidden],.ss-stage [hidden]{display:none!important}
.ss-stage *{box-sizing:border-box}
.ss-stage h1,.ss-stage h2,.ss-stage h3,.ss-stage p{margin:0}
.ss-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ss-media-surface{position:absolute;inset:0;overflow:hidden;background:var(--sessions-stage-background,#101a17)}
.ss-media-surface>video{display:block;width:100%;height:100%;object-fit:contain;background:var(--sessions-stage-background,#101a17)}
.ss-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#a4b8aa;pointer-events:none;font-size:13px}
.ss-empty-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid #476052;border-radius:13px;color:#c3d7c8;font-family:var(--sessions-display-font,var(--sessions-font,Inter,ui-sans-serif,system-ui,sans-serif));font-size:27px}
.ss-corner,.ss-safety{position:absolute;top:var(--ss-edge);z-index:30;display:flex;align-items:center;gap:8px}
.ss-corner{left:var(--ss-edge);min-height:44px;padding:0 5px 0 14px;border:1px solid #ffffff20;border-radius:12px;background:var(--sessions-stage-surface,#14241ee8);backdrop-filter:blur(16px);box-shadow:0 4px 20px #0002}
.ss-brand{font-family:var(--sessions-display-font,var(--sessions-font,Inter,ui-sans-serif,system-ui,sans-serif));max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:600;letter-spacing:-.4px;line-height:1}
.ss-brand-image{display:block;max-width:120px;max-height:26px;object-fit:contain}
.ss-safety{right:var(--ss-edge)}
.ss-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:9px 13px;border:1px solid #d7e1d32b;border-radius:9px;background:var(--sessions-stage-surface,#182920ed);color:var(--sessions-stage-text,#f6faf4);font-family:inherit;font-size:12px;font-weight:600;line-height:1.35;cursor:pointer;white-space:nowrap;touch-action:manipulation;backdrop-filter:blur(14px)}
.ss-button:hover:not(:disabled){background:#2a4134}
.ss-button:disabled,.ss-button[aria-disabled=true]{opacity:.48;cursor:default}
.ss-button:focus-visible,.ss-stage [tabindex]:focus-visible{outline:3px solid #efbb70;outline-offset:3px}
.ss-stop{background:var(--sessions-paper,#fffefa);color:var(--sessions-ink,#213a32);border-color:var(--sessions-paper,#fffefa);box-shadow:0 3px 15px #0003}
.ss-stop:hover:not(:disabled){background:#f0dfca}
.ss-end{background:#4a2928ed;border-color:#c58f7e61;color:#ffe9df}
.ss-end:hover:not(:disabled){background:#60312e}
.ss-people{background:transparent;border:0;padding:9px;min-width:49px;backdrop-filter:none}
.ss-people-mark{font-size:12px;color:#afc4b5}
.ss-preview{font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:#e0d9a2;padding:0 8px 0 0}
.ss-feedback{position:absolute;z-index:25;top:var(--ss-top);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:min(620px,calc(100% - 32px));max-height:120px;overflow:auto;padding:10px 13px;border:1px solid #b4c5b33d;border-radius:10px;background:#14231fed;box-shadow:0 6px 20px #0002;backdrop-filter:blur(14px)}
.ss-status{font-size:12px;color:#e8f0e7;overflow-wrap:anywhere}
.ss-feedback[data-kind=error]{border-color:#e4b39b70;background:#462b26f5}
.ss-cancel{min-height:36px;flex:none;padding:6px 10px}
.ss-media-controls{position:absolute;inset:0;z-index:20;pointer-events:none}
.ss-media-controls .mp-compact{height:100%;pointer-events:none}
.ss-pointer-plane{position:absolute;z-index:10;overflow:hidden;pointer-events:none;contain:layout paint}
.ss-pointer{position:absolute;left:clamp(3px,var(--pointer-x),calc(100% - 25px));top:clamp(3px,var(--pointer-y),calc(100% - 29px));width:24px;height:28px;pointer-events:none;filter:drop-shadow(0 1px 2px #0007)}
.ss-pointer>svg{display:block;width:24px;height:28px;fill:var(--person-color);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.ss-pointer-label{position:absolute;top:25px;left:14px;max-width:min(160px,36vw);padding:4px 8px;border:1px solid #ffffff90;border-radius:5px;background:var(--person-color);color:#fff;font-size:11px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-pointer[data-edge-x=right] .ss-pointer-label{left:auto;right:5px}
.ss-pointer[data-edge-y=bottom] .ss-pointer-label{top:auto;bottom:27px}
.ss-drawer{position:absolute;z-index:40;right:var(--ss-edge);top:var(--ss-top);bottom:var(--ss-bottom);display:flex;flex-direction:column;width:min(370px,calc(100% - 32px));border:1px solid var(--sessions-line,#dde4db);border-radius:14px;background:var(--sessions-paper,#fffefa);color:var(--sessions-ink,#213a32);box-shadow:0 15px 70px #0005;overflow:hidden}
.ss-drawer-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:12px 15px;border-bottom:1px solid #dce4d7;background:#f5f8ee}
.ss-drawer h2{font-size:17px;letter-spacing:-.4px;font-weight:600}
.ss-drawer h3{font-size:13px;letter-spacing:-.1px;font-weight:650}
.ss-drawer-body{overflow:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:16px}
.ss-drawer .ss-button{background:#f2f6eb;color:var(--sessions-green,#275e4d);border:1px solid var(--sessions-line,#dde4db);backdrop-filter:none;align-self:flex-start;font-family:inherit}
.ss-drawer .ss-button:hover:not(:disabled){background:#e6efdb}
.ss-drawer .ss-button:focus-visible,.ss-drawer [tabindex]:focus-visible{outline-color:#a96229}
.ss-drawer-section{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding-top:15px;border-top:1px solid #e0e6db}
.ss-meta,.ss-help,.ss-removal-status{font-size:11px;line-height:1.6;color:#62735e;overflow-wrap:anywhere}
.ss-removal-status{color:#825136}
.ss-roster{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px}
.ss-person{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 0}
.ss-presence-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--person-color)}
.ss-person[data-presence=unknown] .ss-presence-dot,.ss-person[data-presence=away] .ss-presence-dot,.ss-person[data-presence=left] .ss-presence-dot{background:transparent;border:2px solid #7c8c75}
.ss-person-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.ss-person-info>strong{font-size:12px;font-weight:600}
.ss-person-info>span{font-size:10px;color:#687a60}
.ss-drawer .ss-remove{flex:none;min-height:36px;align-self:center;padding:7px 9px;font-size:10px;color:#874734;border-color:#e0ccbf;background:transparent}
.ss-invite-token{display:block;width:100%;padding:12px;background:#eef3e6;border:1px dashed #becfb2;border-radius:7px;color:#304b35;font:12px/1.6 ui-monospace,SFMono-Regular,monospace;overflow-wrap:anywhere;user-select:all}
@media(max-width:620px){.ss-stage{--ss-edge:10px;--ss-top:66px;--ss-bottom:90px}.ss-corner{padding-left:10px;gap:1px;border-radius:9px}.ss-brand{font-size:14px;max-width:78px}.ss-brand-image{max-width:78px;max-height:22px}.ss-preview{display:none}.ss-safety{gap:5px}.ss-button{padding:9px 10px;font-size:11px}.ss-people{padding:9px 7px;min-width:40px}.ss-details-toggle{padding:9px 7px}.ss-drawer{width:calc(100% - 20px)}.ss-feedback{max-width:calc(100% - 20px);padding:8px 11px}.ss-status{font-size:11px}.ss-empty p{max-width:230px;text-align:center}}
@media(max-width:370px){.ss-brand{font-size:14px}.ss-corner{padding-left:8px}.ss-safety{gap:3px}.ss-safety .ss-button{padding:9px 8px}.ss-people-mark{display:none}.ss-people{min-width:28px}}
@media(max-height:500px){.ss-stage{--ss-edge:8px;--ss-top:62px;--ss-bottom:64px}.ss-feedback{max-height:84px}.ss-drawer-header{padding:6px 12px}.ss-drawer-body{padding:12px}}
@media(prefers-reduced-motion:reduce){.ss-stage *{scroll-behavior:auto!important;transition:none!important}}

/* Sessions website theme — Page page_aa0109ba9c0c81918ec0182bc481dc2b, sequence 2.
 * Canonical tokens/wordmark metrics: assets/source/website-original.css.
 * Light brand is original; dark stage/media treatments are derived adaptations.
 * Font declarations are verified; binaries and rendered parity are unverified.
 * No source website CSS or remote font/resource is imported here.
 * Every rule is scoped. This file styles existing PR19 DOM without changing its
 * state, gestures, pointer identity palette, safety receipts or hidden states.
 */
[data-sessions-theme] {
  --sessions-ink: #163c36;
  --sessions-dark: #112e2a;
  --sessions-muted: #61736b;
  --sessions-mint: #edf3e9;
  --sessions-lime: #d9f69d;
  --sessions-line: #dce4dc;
  --sessions-cream: #fafaf6;
  --sessions-white: #ffffff;
  --sessions-dot: #849c54;
  --sessions-focus: #658131;
  --sessions-primary-hover: #24554a;
  --sessions-lime-hover: #e7ffb3;
  --sessions-font: "DM Sans", Arial, sans-serif;
  --sessions-display-font: Manrope, Arial, sans-serif;
  --sessions-green: var(--sessions-ink);
  --sessions-paper: var(--sessions-cream);
  --sessions-stage-background: var(--sessions-dark);
  --sessions-stage-surface: var(--sessions-ink);
  --sessions-stage-text: var(--sessions-cream);
  color: var(--sessions-ink);
  font-family: var(--sessions-font);
  font-synthesis: none;
}

/* Namespaced reusable administrative surface/control contract. */
[data-sessions-theme].sessions-surface,
[data-sessions-theme] .sessions-surface {
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--sessions-line);
  border-radius: 14px;
  background: var(--sessions-cream);
  color: var(--sessions-ink);
  font: 14px/1.6 var(--sessions-font);
}
/* Optional administrative dark surface is a palette adaptation. Inputs and
 * buttons retain light fills and ink text; choose the dark factory brand too. */
[data-sessions-theme="dark"] {
  background: var(--sessions-dark);
  color: var(--sessions-cream);
}
[data-sessions-theme="dark"].sessions-surface,
[data-sessions-theme="dark"] .sessions-surface {
  background: var(--sessions-dark);
  color: var(--sessions-cream);
  border-color: var(--sessions-ink);
}
[data-sessions-theme] .sessions-heading {
  margin: 0 0 16px;
  font-family: var(--sessions-display-font);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.055em;
}
[data-sessions-theme] .sessions-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 13px 20px;
  border: 1px solid var(--sessions-line);
  border-radius: 7px;
  background: var(--sessions-cream);
  color: var(--sessions-ink);
  font: 600 13px/1.4 var(--sessions-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
[data-sessions-theme] .sessions-button:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--sessions-mint);
  border-color: var(--sessions-ink);
}
[data-sessions-theme] .sessions-button-primary {
  background: var(--sessions-ink);
  border-color: var(--sessions-ink);
  color: var(--sessions-white);
}
[data-sessions-theme] .sessions-button-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--sessions-primary-hover);
  border-color: var(--sessions-primary-hover);
}
[data-sessions-theme] .sessions-button-lime {
  background: var(--sessions-lime);
  border-color: var(--sessions-lime);
  color: var(--sessions-ink);
}
[data-sessions-theme] .sessions-button-lime:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--sessions-lime-hover);
  border-color: var(--sessions-lime-hover);
}
[data-sessions-theme] .sessions-button:disabled,
[data-sessions-theme] .sessions-button[aria-disabled="true"] {
  cursor: default;
  border-style: dashed;
}
[data-sessions-theme] .sessions-field,
[data-sessions-theme] .sx-app .sx-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 12px;
  border: 1px solid var(--sessions-line);
  border-radius: 7px;
  background: var(--sessions-white);
  color: var(--sessions-ink);
  font: 13px/1.5 var(--sessions-font);
}
[data-sessions-theme] .sessions-field::placeholder,
[data-sessions-theme] .sx-app .sx-input::placeholder {
  color: var(--sessions-muted);
  opacity: 1;
}
[data-sessions-theme] .sessions-field:focus,
[data-sessions-theme] .sx-app .sx-input:focus {
  border-color: var(--sessions-focus);
}
[data-sessions-theme] .sessions-field[aria-invalid="true"],
[data-sessions-theme] .sx-app .sx-input[aria-invalid="true"] {
  border-color: #aa4b39;
}

/* The factory owns exact SVG geometry and accessible labeling. These dimensions
 * are original website metrics, including both original mobile breakpoints. */
[data-sessions-theme] .sessions-brand {
  --sessions-brand-tile: var(--sessions-ink);
  --sessions-brand-symbol: var(--sessions-lime);
  --sessions-brand-word: var(--sessions-ink);
  --sessions-brand-dot: var(--sessions-dot);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--sessions-brand-word);
  font-family: var(--sessions-display-font);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
[data-sessions-theme] .sessions-brand[data-sessions-brand="dark"] {
  --sessions-brand-tile: var(--sessions-lime);
  --sessions-brand-symbol: var(--sessions-ink);
  --sessions-brand-word: var(--sessions-cream);
  --sessions-brand-dot: var(--sessions-lime);
}
[data-sessions-theme] .sessions-brand__icon {
  display: flex;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sessions-brand-tile);
  color: var(--sessions-brand-symbol);
}
[data-sessions-theme] .sessions-brand__icon svg {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
}
[data-sessions-theme] .sessions-brand__wordmark { color: var(--sessions-brand-word); }
[data-sessions-theme] .sessions-brand__dot { color: var(--sessions-brand-dot); }

/* Specificity exceeds the frozen embedded styles, independent of link order.
 * Only existing !important button text colors need matching importance. */
[data-sessions-theme] .me-experience,
[data-sessions-theme] .me-experience .sx-app,
[data-sessions-theme] .so-onboarding,
[data-sessions-theme] .ss-stage,
[data-sessions-theme] .sx-media-panel {
  font-family: var(--sessions-font);
}
[data-sessions-theme] .me-experience .sx-app {
  --ink: var(--sessions-ink);
  --muted: var(--sessions-muted);
  --green: var(--sessions-ink);
  --line: var(--sessions-line);
  --paper: var(--sessions-cream);
  background-color: var(--sessions-cream);
}
[data-sessions-theme] .me-experience .me-launcher { background: var(--sessions-cream); }
[data-sessions-theme] .me-card h1,
[data-sessions-theme] .so-dialog h1,
[data-sessions-theme] .so-dialog h2,
[data-sessions-theme] .ss-drawer h2,
[data-sessions-theme] .ss-drawer h3,
[data-sessions-theme] .sx-media-panel h2,
[data-sessions-theme] .sx-media-panel h3 {
  font-family: var(--sessions-display-font);
  font-weight: 600;
}
[data-sessions-theme] .me-card h1,
[data-sessions-theme] .so-dialog h1 { letter-spacing: -.055em; }
[data-sessions-theme] .sx-app .sx-button { font-family: var(--sessions-font); }
[data-sessions-theme] .sx-app .sx-button-primary {
  background: var(--sessions-ink);
  border-color: var(--sessions-ink);
  color: var(--sessions-white) !important;
}
[data-sessions-theme] .sx-app .sx-button-primary:hover:not(:disabled) {
  background: var(--sessions-primary-hover);
  border-color: var(--sessions-primary-hover);
}
[data-sessions-theme] .sx-app .sx-button-light {
  background: var(--sessions-lime);
  border-color: var(--sessions-lime);
  color: var(--sessions-ink) !important;
}
[data-sessions-theme] .sx-app .sx-button-light:hover:not(:disabled) {
  background: var(--sessions-lime-hover);
  border-color: var(--sessions-lime-hover);
}
[data-sessions-theme] .sx-app .sx-button-outline {
  color: var(--sessions-ink);
  border-color: var(--sessions-line);
}
[data-sessions-theme] .sx-app .sx-button-outline:hover:not(:disabled),
[data-sessions-theme] .sx-app .sx-button-quiet:hover:not(:disabled) {
  background: var(--sessions-mint);
  border-color: var(--sessions-ink);
}
[data-sessions-theme] .so-dialog {
  background: var(--sessions-cream);
  color: var(--sessions-ink);
  border-color: var(--sessions-line);
  box-shadow: 0 24px 80px #163c3626;
}
[data-sessions-theme] .so-dialog::backdrop { background: #112e2a80; }
[data-sessions-theme] .so-stage { background: var(--sessions-dark); color: var(--sessions-cream); }
[data-sessions-theme] .so-accept input { accent-color: var(--sessions-ink); }

/* Full-size wordmark replaces the old 120/78px clip; safety gets its own row
 * on narrow viewports. No Stop/Leave/End visibility or authority is changed. */
[data-sessions-theme] .ss-brand {
  display: inline-flex;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
[data-sessions-theme] .ss-corner { background: var(--sessions-ink); }
[data-sessions-theme] .ss-stage { background: var(--sessions-dark); color: var(--sessions-cream); }
[data-sessions-theme] .ss-media-surface,
[data-sessions-theme] .ss-media-surface > video { background: var(--sessions-dark); }
[data-sessions-theme] .ss-empty { color: var(--sessions-mint); }
[data-sessions-theme] .ss-empty-mark {
  color: var(--sessions-lime);
  width: auto;
  height: auto;
  min-height: 36px;
  border: 0;
  border-radius: 0;
}
[data-sessions-theme] .ss-stage .ss-button:not(.ss-end):not(.ss-remove):not(.ss-stop):not(.ss-people) {
  background: var(--sessions-ink);
  color: var(--sessions-cream);
}
[data-sessions-theme] .ss-stage .ss-button:not(.ss-end):not(.ss-remove):not(.ss-stop):not(.ss-people):hover:not(:disabled) {
  background: var(--sessions-primary-hover);
}
[data-sessions-theme] .ss-stage .ss-stop {
  background: var(--sessions-cream);
  border-color: var(--sessions-cream);
  color: var(--sessions-ink);
}
[data-sessions-theme] .ss-stage .ss-stop:hover:not(:disabled) { background: var(--sessions-lime); border-color: var(--sessions-lime); }
[data-sessions-theme] .ss-safety .ss-button,
[data-sessions-theme] .ss-corner .ss-people { min-width: 44px; min-height: 44px; }
[data-sessions-theme] .ss-safety .ss-button:disabled,
[data-sessions-theme] .ss-safety .ss-button[aria-disabled="true"] { opacity: 1; border-style: dashed; }
[data-sessions-theme] .ss-feedback:not([data-kind="error"]) { background: var(--sessions-ink); }
[data-sessions-theme] .ss-status { color: var(--sessions-cream); }
[data-sessions-theme] .ss-drawer {
  background: var(--sessions-cream);
  color: var(--sessions-ink);
  border-color: var(--sessions-line);
}
[data-sessions-theme] .ss-drawer-header { background: var(--sessions-mint); border-color: var(--sessions-line); }
[data-sessions-theme] .ss-drawer .ss-drawer-section { border-color: var(--sessions-line); }
[data-sessions-theme] .ss-stage .ss-drawer .ss-button:not(.ss-remove):not(.ss-end):not(.ss-stop):not(.ss-people) {
  background: var(--sessions-mint);
  color: var(--sessions-ink);
  border-color: var(--sessions-line);
}
[data-sessions-theme] .ss-stage .ss-drawer .ss-button:not(.ss-remove):not(.ss-end):not(.ss-stop):not(.ss-people):hover:not(:disabled) {
  background: var(--sessions-lime);
}
[data-sessions-theme] .ss-drawer .ss-meta,
[data-sessions-theme] .ss-drawer .ss-help,
[data-sessions-theme] .ss-drawer .ss-person-info > span { color: var(--sessions-muted); }

/* Derived dark media chrome; errors, unconfirmed outcomes and destructive
 * controls retain the frozen semantic colors instead of becoming brand green. */
[data-sessions-theme] .sx-media-panel { color: var(--sessions-cream); }
[data-sessions-theme] .sx-media-panel .mp-video,
[data-sessions-theme] .sx-media-panel .mp-video > video,
[data-sessions-theme] .sx-media-panel.mp-standalone { background: var(--sessions-dark); }
[data-sessions-theme] .sx-media-panel .mp-toolbar,
[data-sessions-theme] .sx-media-panel .mp-popover,
[data-sessions-theme] .sx-media-panel .mp-drawer,
[data-sessions-theme] .sx-media-panel .mp-feedback:not([data-kind="error"]) { background: var(--sessions-ink); }
[data-sessions-theme] .sx-media-panel .mp-primary { background: var(--sessions-lime); color: var(--sessions-ink); }
[data-sessions-theme] .sx-media-panel .mp-primary:hover:not(:disabled) { background: var(--sessions-lime-hover); }
[data-sessions-theme] .sx-media-panel select { background: var(--sessions-dark); color: var(--sessions-cream); }
[data-sessions-theme] .sx-media-panel label,
[data-sessions-theme] .sx-media-panel .mp-help,
[data-sessions-theme] .sx-media-panel .mp-note,
[data-sessions-theme] .sx-media-panel .mp-empty,
[data-sessions-theme] .sx-media-panel .mp-detail-row p:not(.mp-recovery),
[data-sessions-theme] .sx-media-panel .mp-row:not([data-phase="failed"]):not([data-phase="unknown"]) .mp-phase {
  color: var(--sessions-mint);
}

[data-sessions-theme] .sessions-button:focus-visible,
[data-sessions-theme] .sessions-field:focus-visible,
[data-sessions-theme] .sessions-brand:focus-visible,
[data-sessions-theme] .sx-app :focus-visible,
[data-sessions-theme] .so-dialog:focus-visible,
[data-sessions-theme] .so-dialog :focus-visible {
  outline: 3px solid var(--sessions-focus);
  outline-offset: 4px;
}
[data-sessions-theme] .ss-stage :focus-visible,
[data-sessions-theme] .ss-stage .ss-button:focus-visible,
[data-sessions-theme] .ss-stage [tabindex]:focus-visible,
[data-sessions-theme] .sx-media-panel :focus-visible {
  outline: 3px solid var(--sessions-lime);
  outline-offset: 4px;
}
[data-sessions-theme] .ss-stage .ss-drawer :focus-visible,
[data-sessions-theme] .ss-stage .ss-drawer .ss-button:focus-visible,
[data-sessions-theme] .ss-stage .ss-drawer [tabindex]:focus-visible {
  outline-color: var(--sessions-focus);
}
[data-sessions-theme="dark"] .sessions-button:focus-visible,
[data-sessions-theme="dark"] .sessions-field:focus-visible,
[data-sessions-theme="dark"] .sessions-brand:focus-visible {
  outline-color: var(--sessions-lime);
}

@media (max-width: 760px) {
  [data-sessions-theme] .sessions-brand { font-size: 26px; }
  [data-sessions-theme] .sessions-brand__icon,
  [data-sessions-theme] .sessions-brand__icon svg { width: 32px; height: 32px; }
}
@media (max-width: 620px) {
  [data-sessions-theme] .ss-stage { --ss-top: calc(var(--ss-edge) + 104px); }
  [data-sessions-theme] .ss-corner { max-width: calc(100% - 2 * var(--ss-edge)); }
  [data-sessions-theme] .ss-safety {
    top: calc(var(--ss-edge) + 52px);
    left: var(--ss-edge);
    right: var(--ss-edge);
    justify-content: flex-end;
    gap: 8px;
  }
}
@media (max-width: 390px) {
  [data-sessions-theme] .sessions-brand { font-size: 24px; }
}

.sr-unavailable { max-width: 38rem; margin: 15vh auto; padding: 2rem; font-family: system-ui, sans-serif; }
.sr-unavailable p { line-height: 1.6; color: #475569; }
.sr-media { width: 100%; padding: 1.4rem; color: #172c36; background: #f8faf5; }
.sr-media h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.sr-media-explanation, .sr-media-status { max-width: 56ch; font-size: .9rem; line-height: 1.5; }
.sr-media-controls { display: flex; flex-wrap: wrap; gap: .65rem; align-items: end; margin: 1rem 0; }
.sr-media-controls label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 600; }
.sr-media-controls select { min-height: 2.7rem; max-width: 15rem; padding: .4rem; color: #172c36; background: white; border: 1px solid #b8c9ce; border-radius: .45rem; }
.sr-media video { display: block; width: 100%; max-height: 30rem; margin-top: 1rem; border-radius: .6rem; background: #10212c; aspect-ratio: 16 / 9; object-fit: contain; }
.sr-media video[hidden], .sr-media [hidden] { display: none; }
@media (max-width: 620px) { .sr-media { padding: 1rem; } .sr-media-controls { align-items: stretch; } .sr-media-controls label { width: 100%; } }

.cm-account-nav{padding:12px 20px;background:#edf3e9;color:#163c36;font:14px system-ui}
.cm-account-nav[hidden]{display:none}.cm-membership-dialog{box-sizing:border-box;width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #ccd5cd;border-radius:16px;background:#fafaf6;color:#163c36;padding:24px;font:16px/1.5 system-ui}
.cm-membership-dialog::backdrop{background:#10251ecc}.cm-membership-dialog button,.cm-account-nav button{min-height:44px;padding:10px 16px;font:inherit;border:1px solid #314d40;border-radius:8px;background:#fff;color:#163c36;margin:6px 8px 0 0}
.cm-membership-dialog .membership-actions{display:flex;flex-wrap:wrap;gap:8px}.cm-membership-dialog .primary{background:#234937;color:#fff}.cm-membership-dialog button:disabled{opacity:.5}.cm-membership-dialog :focus-visible,.cm-account-nav :focus-visible{outline:3px solid #a56623;outline-offset:3px}
.cm-membership-dialog .test-notice{border-left:3px solid #9c6c26;padding:12px}.cm-membership-dialog .eyebrow{letter-spacing:.12em}