/* Stage player (Player v2.0), ported from the demos.
   Generated by Utilities/build_stage_css.py from two stylesheets with every selector scoped:
     .pp-stage-page  Demo/styles.css         (desktop)
     .pp-stage-m     Demo/mobile/mobile.css  (phone, shown below 760 px)
   Edit the demos or the script's integration block, regenerate; do not edit this file by hand.
   Class names are the demos', except desktop .skip -> .stage-skip (the site has its own .skip
   link) and a few id selectors turned into classes. Loaded only on stage pages. */
.pp-stage-page {--ink: #1B1819;
  --ink-2: #0F0D0E;
  --panel: #252122;
  --panel-2: #2F2A2B;
  --line: #3A3536;
  --line-2: #4B4547;
  --text: #F5F0E8;
  --text-2: #D6CFC5;
  --dim: #B0A99F;
  --faint: #938C83;
  --accent: #F8ED47;
  --green: #3BB54A;
  --green-text: #7EE08C;
  --sky: #6CB4E8;
  --clay: #F08A5D;
  --paper: #F5F0E8;
  --display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;}
.pp-stage-page * {box-sizing: border-box;}
.pp-stage-page [hidden] {display: none !important;}
.pp-stage-page {margin: 0; background: var(--ink); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.5;}
.pp-stage-page a {color: var(--text);}
.pp-stage-page a:hover {color: var(--accent);}
.pp-stage-page button {font: inherit; color: inherit;}
.pp-stage-page :focus-visible {outline: 3px solid var(--sky); outline-offset: 2px;}
.pp-stage-page .sr {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.pp-stage-page .mono {font-family: var(--mono);}
.pp-stage-page .dim {color: var(--dim);}
.pp-stage-page .small-text {font-size: 13px;}
.pp-stage-page .grow {flex: 1 1 0;}
.pp-stage-page .ico {fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;}
.pp-stage-page .wrap {max-width: 1480px; margin: 0 auto; padding-left: 24px; padding-right: 24px;}
.pp-stage-page .btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--line-2); background: transparent; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;}
.pp-stage-page .btn-accent {background: var(--accent); color: var(--ink); border-color: var(--accent);}
.pp-stage-page .btn-accent:hover {color: var(--ink); filter: brightness(1.06);}
.pp-stage-page .btn-light {background: var(--paper); color: var(--ink); border-color: var(--paper);}
.pp-stage-page .icon-btn {width: 36px; height: 36px; flex: 0 0 36px; border-radius: 18px; border: 1px solid var(--line-2); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;}
.pp-stage-page .icon-btn:hover {border-color: var(--text-2);}
.pp-stage-page .topbar {border-bottom: 1px solid var(--line);}
.pp-stage-page .topbar-inner {max-width: 1480px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 24px; min-height: 68px;}
.pp-stage-page .brand {display: flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 17px; white-space: nowrap;}
.pp-stage-page .brand-mark {width: 44px; height: auto; flex: 0 0 auto; display: block;}
.pp-stage-page .brand:hover .brand-mark {transform: rotate(-6deg); transition: transform .2s ease;}
.pp-stage-page .brand-name .g {color: var(--green-text);}
.pp-stage-page .ep-id {display: flex; align-items: center; gap: 12px; min-width: 0;}
.pp-stage-page .ep-thumb {width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 2px solid var(--ink-2); flex: 0 0 auto;}
.pp-stage-page .ep-text {display: flex; flex-direction: column; min-width: 0;}
.pp-stage-page .ep-kicker {font-size: 11.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;}
.pp-stage-page h1 {margin: 0; font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pp-stage-page h2 {margin: 0; font-family: var(--display); font-size: 18px; font-weight: 700;}
.pp-stage-page .chap-picker {position: relative; display: flex; align-items: center; gap: 10px; height: 48px; width: min(400px, 34vw); padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); cursor: pointer; text-align: left; overflow: hidden;}
.pp-stage-page .chap-picker:hover,
.pp-stage-page .chap-picker[aria-expanded="true"] {border-color: var(--text-2);}
.pp-stage-page .cp-text {flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25;}
.pp-stage-page .cp-kicker {font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em;}
.pp-stage-page .cp-title {font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pp-stage-page .cp-progress {position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line);}
.pp-stage-page .cp-progress span {display: block; height: 100%; width: 0; background: var(--green);}
.pp-stage-page .menu {background: #1F1B1C; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.55);}
.pp-stage-page .chapters-menu {position: fixed; z-index: 40; width: 400px; max-width: calc(100vw - 24px); max-height: min(560px, 70vh); display: flex; flex-direction: column; padding: 12px; gap: 10px;}
.pp-stage-page .cm-head {display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px;}
.pp-stage-page .cm-head .mono {font-size: 12px;}
.pp-stage-page .chapters-menu input {height: 38px; border-radius: 19px;}
.pp-stage-page .cm-list {list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain;}
.pp-stage-page .cm-list button {width: 100%; display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; border: none; background: transparent; cursor: pointer; text-align: left;}
.pp-stage-page .cm-list button:hover {background: var(--panel-2);}
.pp-stage-page .cm-list img {width: 64px; height: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 auto;}
.pp-stage-page .cm-list .cm-n {font-family: var(--mono); font-size: 12px; color: var(--dim); width: 22px; text-align: right; flex: 0 0 auto;}
.pp-stage-page .cm-list .cm-t {flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.3;}
.pp-stage-page .cm-list .cm-time {font-family: var(--mono); font-size: 12px; color: var(--dim);}
.pp-stage-page .cm-list .done .cm-n {color: var(--green-text);}
.pp-stage-page .cm-list .cur {background: var(--panel-2); box-shadow: inset 3px 0 0 var(--green);}
.pp-stage-page .cm-list .cur .cm-t {color: var(--green-text); font-weight: 600;}
.pp-stage-page .layout {display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding-top: 16px; padding-bottom: 56px;}
.pp-stage-page .player-col {flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px;}
.pp-stage-page .side {flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; position: sticky; top: 16px; max-height: calc(100vh - 32px);}
.pp-stage-page .card {background: var(--panel); border: 1px solid var(--line); border-radius: 14px;}
.pp-stage-page .card-head {display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px;}
.pp-stage-page .player {display: flex; flex-direction: column; gap: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel);}
.pp-stage-page .player:fullscreen {border: none; border-radius: 0; background: #000;}
.pp-stage-page .player:fullscreen .stage {flex: 1 1 auto; aspect-ratio: auto;}
.pp-stage-page .stage {position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #211D1E; isolation: isolate;}
.pp-stage-page .stage.idle {cursor: none;}
.pp-stage-page .bg {position: absolute; inset: 0; z-index: 0;}
.pp-stage-page .bg video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.2s ease;}
.pp-stage-page .bg video.is-on {opacity: 1;}
.pp-stage-page .bg-fallback {position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, #2A2526 0 46px, #221E1F 46px 92px);}
.pp-stage-page .bg-scrim {position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(15,13,14,0) 45%, rgba(15,13,14,.4) 100%), linear-gradient(180deg, rgba(15,13,14,.2), rgba(15,13,14,0) 35%, rgba(15,13,14,0) 70%, rgba(15,13,14,.55));}
.pp-stage-page .stage.scenery-off .bg video {opacity: 0 !important;}
.pp-stage-page .click-layer {position: absolute; inset: 0; z-index: 1;}
.pp-stage-page .artblock {position: absolute; z-index: 2; top: 4.5%; left: 3%; width: clamp(110px, 22%, 240px); margin: 0;}
.pp-stage-page .art-frame {position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink-2); background: var(--ink); transition: border-color .4s;}
.pp-stage-page .art-frame img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease;}
.pp-stage-page .art-frame img.contain {object-fit: contain;}
.pp-stage-page .art-frame img.is-on {opacity: 1;}
.pp-stage-page .artblock figcaption {margin-top: 8px; padding: 6px 10px 7px; border-radius: 9px; background: rgba(15,13,14,.82); display: flex; flex-direction: column; gap: 1px;}
.pp-stage-page .art-tag {font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--dim);}
.pp-stage-page .art-title {font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.pp-stage-page .art-view {position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 16px; border: none; background: rgba(15,13,14,.75); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .2s;}
.pp-stage-page .artblock:hover .art-view,
.pp-stage-page .art-view:focus-visible {opacity: 1;}
.pp-stage-page .artblock.is-temp .art-frame {border-color: var(--sky); animation: nudge .45s cubic-bezier(.2,.9,.3,1.25);}
.pp-stage-page .artblock.is-temp .art-tag {color: var(--sky);}
@keyframes nudge { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
.pp-stage-page .start {position: absolute; inset: 0 0 64px 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; pointer-events: none; transition: opacity .4s ease;}
.pp-stage-page .start > * {pointer-events: auto;}
.pp-stage-page .start.gone {opacity: 0;}
.pp-stage-page .start.gone > * {pointer-events: none;}
.pp-stage-page .big-play {width: 92px; height: 92px; border-radius: 46px; border: 4px solid var(--ink); background: var(--accent); color: var(--ink); box-shadow: 6px 6px 0 var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s ease;}
.pp-stage-page .big-play:hover {transform: scale(1.05);}
.pp-stage-page .start-hint {margin: 0; max-width: 400px; font-size: 14px; padding: 7px 14px; border-radius: 10px; background: rgba(15,13,14,.72);}
.pp-stage-page .stage-skip {position: absolute; z-index: 3; top: 50%; width: 64px; height: 64px; margin-top: -32px; border-radius: 32px; border: none; background: rgba(15,13,14,.55); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .25s, background-color .15s;}
.pp-stage-page .stage-skip span {position: absolute; font-family: var(--mono); font-size: 10.5px; font-weight: 500; margin-top: 2px;}
.pp-stage-page .stage-skip:hover {background: rgba(15,13,14,.8);}
.pp-stage-page .stage.fresh .stage-skip {display: none;}
.pp-stage-page .stage-skip-back {left: 30%;}
.pp-stage-page .stage-skip-fwd {right: 30%;}
.pp-stage-page .pops {position: absolute; inset: 0 0 70px 0; z-index: 4; pointer-events: none;}
.pp-stage-page .pop {position: absolute; width: min(330px, 38%); padding: 13px 15px 12px; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink-2); color: var(--ink); pointer-events: auto; transform-origin: 80% 100%; animation: pop-in .38s cubic-bezier(.2,.9,.3,1.25) both;}
.pp-stage-page .pop.out {animation: pop-out .3s ease-in both;}
.pp-stage-page .pop[data-slot="tr"] {top: 5%; right: 3%;}
.pp-stage-page .pop[data-slot="br"] {bottom: 6%; right: 7%;}
.pp-stage-page .pop.pinned {box-shadow: 5px 5px 0 var(--ink-2), 0 0 0 4px rgba(108,180,232,.55);}
.pp-stage-page .pop .tail {position: absolute; bottom: -11px; right: 36px; width: 18px; height: 18px; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); background: inherit;}
.pp-stage-page .pop-tag {display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em;}
.pp-stage-page .pop-body {margin: 6px 0 8px; font-family: var(--display); font-weight: 500; font-size: 16.5px; line-height: 1.28;}
.pp-stage-page .pop-body.plain {font-family: var(--body); font-size: 15px;}
.pp-stage-page .pop-desc {margin: -2px 0 8px; font-size: 13px; line-height: 1.35;}
.pp-stage-page .pop-actions {display: flex; align-items: center; gap: 8px;}
.pp-stage-page .pop-btn {height: 32px; padding: 0 12px; border-radius: 16px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;}
.pp-stage-page .pop-btn:hover {background: rgba(18,20,25,.1); color: var(--ink);}
.pp-stage-page .pop-btn.round {width: 32px; padding: 0; justify-content: center;}
.pp-stage-page .k-extra {background: var(--accent);}
.pp-stage-page .k-ref {background: var(--clay);}
.pp-stage-page .k-photo {background: var(--sky);}
.pp-stage-page .k-comment {background: var(--paper);}
.pp-stage-page .k-chapter {background: var(--ink); color: var(--text); border-color: var(--text);}
.pp-stage-page .sample {font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 8px; border: 1.5px dashed currentColor;}
@keyframes pop-in { 0% { transform: scale(.5) rotate(4deg); opacity: 0; } 70% { transform: scale(1.04) rotate(-1deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes pop-out { to { transform: scale(.85); opacity: 0; } }
.pp-stage-page .hud {position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 30px 12px 6px; background: linear-gradient(180deg, rgba(15,13,14,0), rgba(15,13,14,.82) 55%); transition: opacity .3s ease;}
.pp-stage-page .stage.idle .hud,
.pp-stage-page .stage.idle .stage-skip {opacity: 0; pointer-events: none;}
.pp-stage-page .stage:not(.hover):not(.paused) .stage-skip {opacity: 0; pointer-events: none;}
.pp-stage-page .hud-row {display: flex; align-items: center; gap: 2px; height: 46px;}
.pp-stage-page .hb {width: 44px; height: 44px; flex: 0 0 44px; border-radius: 22px; border: none; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; position: relative;}
.pp-stage-page .hb:hover {background: rgba(245,240,232,.12);}
.pp-stage-page .hb .i-pause {display: none;}
.pp-stage-page .playing .hb .i-pause {display: block;}
.pp-stage-page .playing .hb .i-play {display: none;}
.pp-stage-page .hb.toggle::after {content: ''; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 3px; border-radius: 2px; background: transparent;}
.pp-stage-page .hb.toggle[aria-pressed="true"]::after {background: var(--green);}
.pp-stage-page .hb.toggle[aria-pressed="false"] {color: var(--dim);}
.pp-stage-page .vol {display: flex; align-items: center;}
.pp-stage-page .vol-slide {width: 0; overflow: hidden; transition: width .2s ease; display: flex; align-items: center;}
.pp-stage-page .vol:hover .vol-slide,
.pp-stage-page .vol:focus-within .vol-slide {width: 84px;}
.pp-stage-page .vol-slide input {width: 72px; margin: 0 6px 0 2px; accent-color: var(--paper); cursor: pointer;}
.pp-stage-page .vol .v-x {display: none;}
.pp-stage-page .vol.is-muted .v-x {display: block;}
.pp-stage-page .vol.is-muted .v-wave1,
.pp-stage-page .vol.is-muted .v-wave2,
.pp-stage-page .vol.is-low .v-wave2 {display: none;}
.pp-stage-page .hud-time {font-size: 13px; padding: 0 10px; white-space: nowrap; color: var(--text);}
.pp-stage-page .hud-chapter {display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px; border: none; border-radius: 8px; background: transparent; font-size: 13.5px; cursor: pointer; min-width: 0; max-width: 42%;}
.pp-stage-page .hud-chapter span:nth-child(2) {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pp-stage-page .hud-chapter:hover {background: rgba(245,240,232,.12);}
.pp-stage-page .scrub {position: relative; height: 18px; margin: 0 4px; cursor: pointer;}
.pp-stage-page .scrub-chapters {position: absolute; left: 0; right: 0; top: 7px; height: 4px; display: flex; gap: 2px; transition: height .15s, top .15s;}
.pp-stage-page .scrub-chapters div {background: rgba(245,240,232,.28); height: 100%;}
.pp-stage-page .scrub-chapters div.hover {background: rgba(245,240,232,.5);}
.pp-stage-page .scrub-fill {position: absolute; left: 0; top: 7px; height: 4px; background: var(--green); width: 0; pointer-events: none; transition: height .15s, top .15s;}
.pp-stage-page .scrub:hover .scrub-chapters,
.pp-stage-page .scrub:hover .scrub-fill {top: 6px; height: 6px;}
.pp-stage-page .scrub-knob {position: absolute; top: 2px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 7px; background: var(--green-text); pointer-events: none; transform: scale(0); transition: transform .15s;}
.pp-stage-page .scrub:hover .scrub-knob,
.pp-stage-page .scrub:focus-within .scrub-knob {transform: scale(1);}
.pp-stage-page .scrub input {position: absolute; inset: -4px 0; width: 100%; height: calc(100% + 8px); margin: 0; opacity: 0; cursor: pointer;}
.pp-stage-page .scrub-tip {position: absolute; bottom: 24px; transform: translateX(-50%); background: rgba(15,13,14,.92); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 9px; font-size: 12.5px; white-space: nowrap; display: none; flex-direction: column; align-items: center; pointer-events: none; max-width: 260px;}
.pp-stage-page .scrub-tip .tip-ch {overflow: hidden; text-overflow: ellipsis; max-width: 240px; color: var(--text-2);}
.pp-stage-page .scrub:hover .scrub-tip {display: flex;}
.pp-stage-page .settings {position: absolute; right: 12px; bottom: 64px; width: 340px; max-width: calc(100% - 24px); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;}
.pp-stage-page .menu-row {display: flex; flex-direction: column; gap: 6px; padding: 6px 2px;}
.pp-stage-page .menu-row + .menu-row {border-top: 1px solid var(--line);}
.pp-stage-page .menu-label {font-size: 12.5px; color: var(--dim);}
.pp-stage-page .opts {display: flex; flex-wrap: wrap; gap: 4px;}
.pp-stage-page .opts button {height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--line-2); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer;}
.pp-stage-page .opts button[aria-pressed="true"] {background: var(--paper); color: var(--ink); border-color: var(--paper);}
.pp-stage-page .opts button:hover:not([aria-pressed="true"]) {border-color: var(--text-2);}
.pp-stage-page .menu-note {margin: 2px 2px 0; font-size: 11.5px; color: var(--faint);}
.pp-stage-page .captions {position: relative; padding: 12px 64px 12px 22px; border-top: 1px solid var(--line);}
.pp-stage-page .player:fullscreen .captions {padding-left: 48px;}
.pp-stage-page .cap-lines {font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; overflow: hidden;}
.pp-stage-page .player:fullscreen .cap-lines {font-size: clamp(22px, 2.2vw, 34px);}
.pp-stage-page .captions[data-lines="1"] .cap-lines {height: 1.5em;}
.pp-stage-page .captions[data-lines="2"] .cap-lines {height: 3em;}
.pp-stage-page .captions[data-lines="3"] .cap-lines {height: 4.5em;}
.pp-stage-page .cap-line {margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #A9A298;}
.pp-stage-page .cap-line.ahead2 {color: #8C867D;}
.pp-stage-page .cap-line.cur {color: #B3ACA2;}
.pp-stage-page .cap-lines.adv .cap-line {animation: cap-up .32s ease-out both;}
@keyframes cap-up { from { transform: translateY(1.5em); } to { transform: none; } }
.pp-stage-page .cap-line .w {padding: 0 2px; border-radius: 5px; cursor: pointer; transition: background-color .08s, color .08s;}
.pp-stage-page .cap-line.cur .w.past {color: var(--text);}
.pp-stage-page .cap-line.cur .w.cur {background: var(--accent); color: var(--ink);}
.pp-stage-page .cap-line .w:hover {text-decoration: underline; text-underline-offset: 4px;}
.pp-stage-page .cap-opts {position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; opacity: .55; transition: opacity .2s;}
.pp-stage-page .captions:hover .cap-opts,
.pp-stage-page .cap-opts:focus-within {opacity: 1;}
.pp-stage-page .cap-opts button {width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-family: var(--mono); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;}
.pp-stage-page .cap-opts button:hover {border-color: var(--green); color: var(--green-text);}
.pp-stage-page .trail {padding: 16px 18px;}
.pp-stage-page .trail-viewport {position: relative;}
.pp-stage-page .trail-row {display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; scroll-snap-type: x mandatory;}
.pp-stage-page .trail-row::-webkit-scrollbar {display: none;}
.pp-stage-page .trail-arrow {position: absolute; z-index: 2; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 21px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.5);}
.pp-stage-page .trail-arrow.left {left: -10px;}
.pp-stage-page .trail-arrow.right {right: -10px;}
.pp-stage-page .trail-arrow:hover {filter: brightness(1.08);}
.pp-stage-page .tcard {flex: 0 0 236px; scroll-snap-align: start; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ink); padding: 12px; display: flex; flex-direction: column; gap: 6px;}
.pp-stage-page .tcard.fresh {animation: pop-in .4s cubic-bezier(.2,.9,.3,1.25) both;}
.pp-stage-page .tcard-top {display: flex; align-items: center; justify-content: space-between; gap: 8px;}
.pp-stage-page .tag {font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 10px; color: var(--ink); border: none;}
.pp-stage-page .tag.k-chapter {border: 1px solid var(--text); color: var(--text);}
.pp-stage-page button.tag {cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border-radius: 14px;}
.pp-stage-page button.tag:hover {filter: brightness(1.1); box-shadow: 0 0 0 2px rgba(245,240,232,.35);}
.pp-stage-page .tcard p {margin: 0; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.pp-stage-page .tcard .row {margin-top: auto;}
.pp-stage-page .linkish {background: none; border: none; padding: 6px 0; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;}
.pp-stage-page .linkish:hover {color: var(--accent);}
.pp-stage-page .empty {color: var(--dim); font-size: 14px; padding: 8px 0;}
.pp-stage-page .chapter-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px;}
.pp-stage-page .chapter {text-align: left; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; padding: 0; cursor: pointer;}
.pp-stage-page .chapter img {width: 100%; height: 96px; object-fit: cover; display: block;}
.pp-stage-page .chapter .c-meta {padding: 9px 12px 12px;}
.pp-stage-page .chapter .c-time {font-family: var(--mono); font-size: 12px; color: var(--dim);}
.pp-stage-page .chapter .c-title {font-weight: 600; font-size: 14px; line-height: 1.3;}
.pp-stage-page .chapter[aria-current="true"] {border: 2px solid var(--green);}
.pp-stage-page .chapter:hover {border-color: var(--text-2);}
.pp-stage-page .tabs {flex: 0 0 auto; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 10px 8px; border-bottom: 1px solid var(--line);}
.pp-stage-page .tabs button {flex: 0 0 auto; height: 40px; padding: 0 9px; border-radius: 20px; border: none; background: transparent; font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;}
.pp-stage-page .tabs button[aria-selected="true"] {background: var(--accent); color: var(--ink);}
.pp-stage-page .tabs button:hover:not([aria-selected="true"]) {background: var(--panel-2);}
.pp-stage-page .count {font-family: var(--mono); font-size: 11px; font-weight: 500; min-width: 20px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--line-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center;}
.pp-stage-page .tabs button[aria-selected="true"] .count {background: var(--ink); color: var(--accent);}
.pp-stage-page .seg.active {box-shadow: inset 3px 0 0 var(--green);}
.pp-stage-page .panel-body {position: relative; flex: 1 1 auto; min-height: 240px; overflow-y: auto; padding: 14px 18px; overscroll-behavior: contain;}
.pp-stage-page .resume {position: absolute; left: 50%; transform: translateX(-50%); bottom: 132px; height: 38px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.4); z-index: 2;}
.pp-stage-page .ch-head {margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--green-text);}
.pp-stage-page .ch-head:first-child {margin-top: 0; padding-top: 0; border-top: none;}
.pp-stage-page .seg {padding: 8px 10px; margin: 0 -10px 4px; border-radius: 12px;}
.pp-stage-page .seg-head {display: flex; align-items: center; gap: 6px;}
.pp-stage-page .seg-head .ts {font-family: var(--mono); font-size: 12px; color: var(--dim); background: none; border: none; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;}
.pp-stage-page .seg-head .ts:hover {color: var(--accent);}
.pp-stage-page .seg-head .icon-btn {width: 30px; height: 30px; flex-basis: 30px; margin-left: auto; opacity: 0;}
.pp-stage-page .seg:hover .icon-btn,
.pp-stage-page .seg.active .icon-btn,
.pp-stage-page .seg .icon-btn:focus-visible {opacity: 1;}
.pp-stage-page .seg-text {margin: 0; color: var(--text-2);}
.pp-stage-page .seg.ahead .seg-text {color: var(--faint);}
.pp-stage-page .seg.active {background: var(--panel-2);}
.pp-stage-page .seg.active .seg-text {font-size: 16.5px; line-height: 1.6; color: var(--faint);}
.pp-stage-page .seg-text .w {cursor: pointer; padding: 1px 1px; border-radius: 4px;}
.pp-stage-page .seg-text .w.past {color: var(--text);}
.pp-stage-page .seg-text .w.cur {background: var(--accent); color: var(--ink);}
.pp-stage-page .seg-text .w:hover {text-decoration: underline;}
.pp-stage-page .stack {display: flex; flex-direction: column; gap: 12px;}
.pp-stage-page .item {border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;}
.pp-stage-page .item .row {display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;}
.pp-stage-page .item-title {font-weight: 600;}
.pp-stage-page .item-quote {font-family: var(--display); font-size: 17px; line-height: 1.3;}
.pp-stage-page .item img {width: 100%; border-radius: 8px;}
.pp-stage-page .item p {margin: 0; color: var(--text-2); font-size: 14px;}
.pp-stage-page .who {font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.pp-stage-page .who b {font-weight: 600;}
.pp-stage-page .gallery {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.pp-stage-page .gallery button {padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); cursor: pointer; position: relative; aspect-ratio: 1;}
.pp-stage-page .gallery img {width: 100%; height: 100%; object-fit: cover; display: block;}
.pp-stage-page .gallery span {position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 12px; text-align: left; background: rgba(15,13,14,.8); padding: 3px 7px; border-radius: 6px;}
.pp-stage-page .comment-form {flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding: 14px 18px 16px;}
.pp-stage-page .comment-form label {font-size: 13px; font-weight: 600;}
.pp-stage-page .row {display: flex; gap: 8px; align-items: center;}
.pp-stage-page input[type="text"] {flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--line-2); background: var(--ink); color: var(--text); font: inherit;}
.pp-stage-page dialog {border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); color: var(--text); padding: 0; width: min(860px, calc(100vw - 32px));}
.pp-stage-page dialog::backdrop {background: rgba(6,5,5,.8);}
.pp-stage-page .lightbox::backdrop {background: rgba(4,3,3,.95); backdrop-filter: blur(8px) saturate(.4);}
.pp-stage-page .lightbox {background: #141112; border-color: #2A2526; box-shadow: 0 30px 90px rgba(0,0,0,.8);}
.pp-stage-page .dialog-inner {padding: 24px 28px; display: flex; flex-direction: column; gap: 18px;}
.pp-stage-page .dialog-head {display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.pp-stage-page .dialog-head h2 {font-size: 24px;}
.pp-stage-page .share-cols {display: flex; flex-wrap: wrap; gap: 24px;}
.pp-stage-page .share-scope {flex: 1 1 300px; margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: 8px;}
.pp-stage-page .share-scope legend {font-size: 13px; color: var(--dim); margin-bottom: 8px;}
.pp-stage-page .share-scope label {display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer;}
.pp-stage-page .share-scope label:has(input:checked) {border: 2px solid var(--accent); background: var(--panel-2);}
.pp-stage-page .share-scope input {width: 18px; height: 18px; accent-color: var(--accent);}
.pp-stage-page .share-scope small {display: block; color: var(--dim); font-size: 12px;}
.pp-stage-page .share-preview {flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px;}
.pp-stage-page .preview-card {border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: var(--ink);}
.pp-stage-page .preview-img {position: relative; height: 170px;}
.pp-stage-page .preview-img img {width: 100%; height: 100%; object-fit: cover; display: block;}
.pp-stage-page .preview-img p {position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 9px 12px; border-radius: 10px; background: rgba(15,13,14,.88); font-family: var(--display); font-size: 15px; line-height: 1.35;}
.pp-stage-page .preview-img p:empty {display: none;}
.pp-stage-page .preview-meta {padding: 10px 14px 12px; display: flex; flex-direction: column; font-size: 14px;}
.pp-stage-page .anatomy code {font-family: var(--mono); background: var(--panel-2); padding: 1px 6px; border-radius: 6px; color: var(--text);}
.pp-stage-page .lb img {width: 100%; max-height: 60vh; object-fit: contain; border-radius: 10px; background: var(--ink);}
.pp-stage-page .lb p {margin: 0;}
.pp-stage-page .toast {position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--paper); color: var(--ink); font-weight: 600; padding: 10px 18px; border-radius: 22px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60;}
.pp-stage-page .toast.show {opacity: 1; transform: translate(-50%, 0);}
@media (max-width: 1100px) {
.pp-stage-page .brand-name,
.pp-stage-page .share-label {display: none;}
.pp-stage-page .share-open {width: 44px; padding: 0;}
}
@media (max-width: 760px) {
.pp-stage-page .wrap {padding-left: 12px; padding-right: 12px;}
.pp-stage-page .topbar-inner {flex-wrap: wrap; padding: 8px 12px; gap: 10px;}
.pp-stage-page .ep-id {flex: 1 1 0;}
.pp-stage-page h1 {font-size: 16px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.pp-stage-page .ep-thumb {width: 36px; height: 36px;}
.pp-stage-page .chap-picker {order: 5; width: 100%; height: 44px;}
.pp-stage-page .side {position: relative; top: 0; max-height: none;}
.pp-stage-page .panel-body {max-height: 60vh;}
.pp-stage-page .artblock {width: 26%;}
.pp-stage-page .artblock figcaption {padding: 4px 7px; margin-top: 6px;}
.pp-stage-page .art-title {display: none;}
.pp-stage-page .art-tag {font-size: 10px;}
.pp-stage-page .pop {width: min(230px, 56%); padding: 9px 11px;}
.pp-stage-page .pop-body {font-size: 14px;}
.pp-stage-page .pop-desc {display: none;}
.pp-stage-page .pop[data-slot="br"] {display: none;}
.pp-stage-page .start-hint {display: none;}
.pp-stage-page .stage-skip {width: 52px; height: 52px; margin-top: -26px;}
.pp-stage-page .stage-skip-back {left: 22%;}
.pp-stage-page .stage-skip-fwd {right: 22%;}
.pp-stage-page .hud-chapter,
.pp-stage-page .next-ch,
.pp-stage-page .vol-slide {display: none;}
.pp-stage-page .hud {padding: 18px 6px 2px;}
.pp-stage-page .captions {padding: 10px 54px 10px 14px;}
.pp-stage-page .cap-opts {right: 10px;}
.pp-stage-page .trail-arrow.left {left: -4px;}
.pp-stage-page .trail-arrow.right {right: -4px;}
}
@media (prefers-reduced-motion: reduce) {
.pp-stage-page .pop,
.pp-stage-page .tcard.fresh,
.pp-stage-page .cap-lines.adv .cap-line,
.pp-stage-page .artblock.is-temp .art-frame {animation: none;}
}
.pp-stage-page .markers {position: relative; height: 18px; margin: 0 4px 4px;}
.pp-stage-page .markers-dots {position: absolute; inset: 0;}
.pp-stage-page .mk {position: absolute; width: 11px; height: 10px; margin-left: -5.5px; padding: 0; border: none; background: transparent; cursor: pointer;}
.pp-stage-page .mk::before {content: ''; position: absolute; left: 2.5px; top: 2px; width: 6px; height: 6px; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 1.5px rgba(15,13,14,.7); opacity: .75; transition: transform .12s, opacity .12s;}
.pp-stage-page .mk:hover::before,
.pp-stage-page .mk:focus-visible::before {transform: scale(1.8); opacity: 1;}
.pp-stage-page .mk:hover {z-index: 2;}
.pp-stage-page .marker-tip {position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 280px; background: rgba(15,13,14,.95); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; line-height: 1.35; display: flex; flex-direction: column; gap: 2px; pointer-events: none; z-index: 3;}
.pp-stage-page .marker-tip .mono {font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em;}
.pp-stage-page .pop.long {width: min(360px, 42%);}
.pp-stage-page .pop-body.scroll {max-height: 9.5em; overflow-y: auto; padding-right: 6px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(27,24,25,.5) transparent;}
.pp-stage-page .pop-body.scroll:focus-visible {outline: 2px solid var(--ink);}
.pp-stage-page .likes {font-size: 12.5px; font-weight: 600; margin-left: 2px;}
.pp-stage-page .ep-about {display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: none; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left;}
.pp-stage-page .ep-about span {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pp-stage-page .ep-about svg {flex: 0 0 auto; color: var(--dim); transition: transform .2s;}
.pp-stage-page .ep-about:hover svg,
.pp-stage-page .ep-about[aria-expanded="true"] svg {color: var(--green-text);}
.pp-stage-page .ep-about[aria-expanded="true"] svg {transform: rotate(180deg);}
.pp-stage-page .about {position: fixed; z-index: 45; width: 440px; max-width: calc(100vw - 24px); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;}
.pp-stage-page .about p {margin: 0;}
.pp-stage-page .about-kicker {font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--green-text);}
.pp-stage-page .about-desc {font-size: 14.5px; line-height: 1.55; color: var(--text);}
.pp-stage-page .about-meta {font-size: 13px;}
.pp-stage-page .about-draft {font-size: 11px; color: var(--faint); border-top: 1px solid var(--line); padding-top: 8px;}
.pp-stage-page .walk {display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 15px; border: 1px solid var(--line-2); background: transparent; color: var(--dim); font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, background-color .15s;}
.pp-stage-page .walk svg {color: var(--green-text); opacity: .8;}
.pp-stage-page .walk:hover,
.pp-stage-page .walk:focus-visible {color: var(--text); border-color: var(--green); background: rgba(59,181,74,.08);}
.pp-stage-page .walk.small {height: 26px; padding: 0 9px; font-size: 12px; font-family: var(--mono);}
.pp-stage-page .tcard-replies {font-size: 12px; color: var(--green-text);}
.pp-stage-page .thread {display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-left: 10px; border-left: 2px solid rgba(27,24,25,.35);}
.pp-stage-page .pop .reply {display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.35;}
.pp-stage-page .pop .reply.fresh {animation: reply-in .35s ease-out both;}
.pp-stage-page .pop .reply-who {font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; opacity: .7;}
.pp-stage-page .pop .reply.from-show .reply-who {opacity: 1; color: #1E7A2A;}
.pp-stage-page .thread-count {font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; opacity: .65; margin: 6px 0 8px;}
@keyframes reply-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pp-stage-page .cthread.flash {box-shadow: 0 0 0 2px var(--green); transition: box-shadow .3s;}
.pp-stage-page .replies {display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px 6px; padding-left: 12px; border-left: 2px solid var(--line-2); align-items: flex-start;}
.pp-stage-page .item .reply {display: flex; flex-direction: column; font-size: 13.5px; color: var(--text-2);}
.pp-stage-page .item .reply-who {font-size: 12px; font-weight: 600; color: var(--text);}
.pp-stage-page .item .reply.from-show .reply-who {color: var(--green-text);}
.pp-stage-page .reply-form {display: flex; gap: 6px; margin-top: 4px;}
.pp-stage-page .reply-form input[type="text"] {height: 36px; font-size: 14px;}
.pp-stage-page .small-btn {height: 36px; padding: 0 14px; font-size: 13px;}
.pp-stage-page .pop {display: flex; flex-direction: column; max-height: 46%;}
.pp-stage-page .pop .pop-tag,
.pp-stage-page .pop .pop-actions,
.pp-stage-page .pop .thread-count {flex: 0 0 auto;}
.pp-stage-page .pop-body.scroll {max-height: none; flex: 1 1 auto; min-height: 2.6em;}
.pp-stage-page .pop[data-slot="br"] {right: auto; left: 27%; bottom: 5%; transform-origin: 20% 100%;}
.pp-stage-page .pop[data-slot="br"] .tail {right: auto; left: 36px;}
.pp-stage-page .pop {padding-right: 40px;}
.pp-stage-page .pop-x {position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 13px; border: 2px solid currentColor; background: transparent; color: inherit; opacity: .55; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: opacity .15s, background-color .15s;}
.pp-stage-page .pop-x:hover,
.pp-stage-page .pop-x:focus-visible {opacity: 1; background: rgba(27,24,25,.12);}
.pp-stage-page .art-x {display: none; position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 14px; border: none; background: rgba(15,13,14,.8); color: var(--text); align-items: center; justify-content: center; padding: 0; cursor: pointer; z-index: 2;}
.pp-stage-page .artblock.is-temp .art-x {display: inline-flex;}
.pp-stage-page .art-x:hover {background: rgba(15,13,14,.95); color: var(--sky);}
.pp-stage-page .pops {inset: 0 0 104px 0;}
@media (max-width: 760px) {
.pp-stage-page .pops {inset: 0 0 64px 0;}
}
.pp-stage-page .pop.detour {background: var(--green); color: #0F1F12; border-color: var(--ink); width: min(330px, 38%);}
.pp-stage-page .pop.detour .pop-tag {font-weight: 600; letter-spacing: .1em;}
.pp-stage-page .sign-mark {display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--paper); color: #1E7A2A; transform: rotate(-4deg);}
.pp-stage-page .detour-lead {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px;}
.pp-stage-page .detour-meta {display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px;}
.pp-stage-page .faces {display: inline-flex;}
.pp-stage-page .face {width: 22px; height: 22px; border-radius: 11px; background: var(--paper); color: var(--ink); border: 2px solid var(--green); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-left: -6px;}
.pp-stage-page .face:first-child {margin-left: 0;}
.pp-stage-page .pop-btn.take {background: var(--ink); color: var(--paper); border-color: var(--ink);}
.pp-stage-page .pop-btn.take:hover {background: #000; color: var(--accent);}
.pp-stage-page .pop.detour .pop-btn {border-color: #0F1F12; color: #0F1F12;}
.pp-stage-page .pop.detour .pop-btn.take {color: var(--paper);}
.pp-stage-page .mk.mk-detour::before {border-radius: 1px; transform: rotate(45deg); width: 7px; height: 7px; opacity: .9;}
.pp-stage-page .mk.mk-detour:hover::before {transform: rotate(45deg) scale(1.7);}
.pp-stage-page .tag.k-detour {background: var(--green); color: #0F1F12;}
.pp-stage-page .tcard.is-detour {border-color: rgba(59,181,74,.6); background: linear-gradient(180deg, rgba(59,181,74,.1), var(--ink) 60%);}
.pp-stage-page .cthread.is-detour {border-color: rgba(59,181,74,.55);}
.pp-stage-page .detour-row {display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(59,181,74,.5); background: rgba(59,181,74,.1); color: var(--text); cursor: pointer; text-align: left; font-size: 13.5px;}
.pp-stage-page .detour-row:hover {background: rgba(59,181,74,.2);}
.pp-stage-page .detour-go {margin-left: auto; color: var(--green-text); font-weight: 600; font-size: 13px;}
.pp-stage-page .dt-scrim {position: fixed; inset: 0; z-index: 70; background: rgba(6,5,5,.55); opacity: 0; pointer-events: none; transition: opacity .25s;}
.pp-stage-page.on-detour .dt-scrim {opacity: 1; pointer-events: auto;}
.pp-stage-page .detour-sheet {position: fixed; z-index: 71; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--panel); border-left: 1px solid var(--line-2); box-shadow: -20px 0 60px rgba(0,0,0,.5); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);}
.pp-stage-page .detour-sheet.open {transform: none;}
.pp-stage-page .dt-head {display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(59,181,74,.16), transparent);}
.pp-stage-page .dt-sign {width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; background: var(--green); color: #0F1F12; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink-2); display: flex; align-items: center; justify-content: center; transform: rotate(-4deg);}
.pp-stage-page .dt-titles {flex: 1; min-width: 0; display: flex; flex-direction: column;}
.pp-stage-page .dt-titles h2 {font-size: 22px; letter-spacing: .02em;}
.pp-stage-page .dt-titles .mono {font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pp-stage-page .dt-back {height: 40px;}
.pp-stage-page .dt-context {margin: 14px 18px 4px; padding: 12px 14px; border-radius: 12px; background: var(--ink); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; align-items: flex-start;}
.pp-stage-page .dt-label {font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--green-text);}
.pp-stage-page .dt-context p {margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); max-height: 7.5em; overflow-y: auto;}
.pp-stage-page .dt-bar {display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 6px;}
.pp-stage-page .dt-bar .mono {font-size: 12px;}
.pp-stage-page .dt-conv {flex: 1 1 auto; overflow-y: auto; padding: 4px 18px 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain;}
.pp-stage-page .dt-msg {padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); margin-left: 22px; position: relative;}
.pp-stage-page .dt-msg::before {content: ''; position: absolute; left: -14px; top: -10px; bottom: 50%; width: 10px; border-left: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); border-bottom-left-radius: 8px;}
.pp-stage-page .dt-msg.op {margin-left: 0; background: var(--paper); color: var(--ink); border-color: var(--paper);}
.pp-stage-page .dt-msg.op::before {display: none;}
.pp-stage-page .dt-msg.op .dim {color: #5A544C;}
.pp-stage-page .dt-msg.from-show {border-color: rgba(59,181,74,.6);}
.pp-stage-page .dt-msg.is-op {border-color: var(--line-2);}
.pp-stage-page .dt-who {font-size: 12.5px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap;}
.pp-stage-page .dt-who .sample {margin-left: 8px;}
.pp-stage-page .dt-msg p {margin: 4px 0 0; font-size: 14.5px; line-height: 1.45;}
.pp-stage-page .dt-form {display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line);}
.pp-stage-page .dt-foot {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px 14px; border-top: 1px solid var(--line);}
.pp-stage-page .dt-keep {display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); cursor: pointer;}
.pp-stage-page .dt-keep input {width: 16px; height: 16px; accent-color: var(--green);}
@media (prefers-reduced-motion: reduce) {
.pp-stage-page .detour-sheet {transition: none;}
}
.pp-stage-page .card-head .key {margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px;}
.pp-stage-page .key-chip {display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--line-2); background: transparent; font-size: 12.5px; cursor: pointer; color: var(--text);}
.pp-stage-page .key-chip .mono {font-size: 11px; color: var(--dim);}
.pp-stage-page .key-chip .sw {width: 9px; height: 9px; border-radius: 5px; display: inline-block;}
.pp-stage-page .key-extra .sw {background: var(--accent);}
.pp-stage-page .key-ref .sw {background: var(--clay);}
.pp-stage-page .key-photo .sw {background: var(--sky);}
.pp-stage-page .key-comment .sw {background: var(--paper);}
.pp-stage-page .key-detour .sw {background: var(--green); border-radius: 1px; transform: rotate(45deg); width: 8px; height: 8px;}
.pp-stage-page .key-chip[aria-pressed="false"] {opacity: .45; text-decoration: line-through;}
.pp-stage-page .key-chip:hover {border-color: var(--text-2);}
.pp-stage-page .pop.pinned {box-shadow: 5px 5px 0 var(--ink-2), 0 0 0 4px rgba(245,240,232,.6);}
.pp-stage-page .artblock.is-temp.is-chapter .art-frame {border-color: var(--paper);}
.pp-stage-page .artblock.is-temp.is-chapter .art-tag {color: var(--text);}
.pp-stage-page .item.kind-extra {border-left: 3px solid var(--accent);}
.pp-stage-page .item.kind-ref {border-left: 3px solid var(--clay);}
.pp-stage-page .item.kind-photo {border-left: 3px solid var(--sky);}
.pp-stage-page .cthread {border-left: 3px solid var(--paper);}
.pp-stage-page .cthread.is-detour {border-left: 3px solid var(--green);}
.pp-stage-page .gallery button:hover {border-color: var(--sky);}
.pp-stage-page .scrub-chapters {display: block;}
.pp-stage-page .scrub-chapters div {position: absolute; top: 0; height: 100%; border-radius: 1px;}
.pp-stage-page .minimap {position: relative; height: 10px; margin: 0 4px 6px; border-radius: 5px; background: rgba(245,240,232,.12); cursor: pointer; touch-action: none;}
.pp-stage-page .mm-fill {position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: rgba(59,181,74,.45); pointer-events: none;}
.pp-stage-page .mm-window {position: absolute; top: -2px; bottom: -2px; min-width: 8px; border-radius: 6px; border: 2px solid var(--paper); background: rgba(245,240,232,.15); cursor: grab;}
.pp-stage-page .mm-window:active {cursor: grabbing;}
.pp-stage-page .zoom {display: flex; align-items: center; gap: 0; margin-right: 6px; padding-right: 6px; border-right: 1px solid rgba(245,240,232,.18);}
.pp-stage-page .hb.sm {width: 36px; height: 36px; flex-basis: 36px;}
.pp-stage-page .hb:disabled {opacity: .35; cursor: default; background: transparent;}
.pp-stage-page .zoom-level {font-size: 12px; min-width: 26px; text-align: center; color: var(--text);}
.pp-stage-page .zoom-range {font-size: 11.5px; color: var(--dim); margin-right: 4px; white-space: nowrap;}
@media (max-width: 760px) {
.pp-stage-page .zoom-range,
.pp-stage-page .card-head .key {display: none;}
}
.pp-stage-page .linkish {display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--line-2); background: transparent; color: var(--dim); font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer;}
.pp-stage-page .linkish:hover,
.pp-stage-page .linkish:focus-visible {color: var(--text); border-color: var(--green); background: rgba(59,181,74,.08);}
.pp-stage-page a.walk {text-decoration: none;}
.pp-stage-page .walk.icon-only {width: 30px; padding: 0; justify-content: center;}
.pp-stage-page .walk.small.icon-only {width: 26px;}
.pp-stage-page .walk svg.ico {width: 13px; height: 13px;}
.pp-stage-page .seg-head .walk.small {height: 24px; padding: 0 8px; font-size: 11.5px;}
.pp-stage-page .seg.active .seg-head .walk {color: var(--text); border-color: rgba(59,181,74,.6);}
.pp-stage-page .item .row {gap: 6px;}
.pp-stage-page .cap-line .w:hover,
.pp-stage-page .seg-text .w:hover {text-decoration: none; background: rgba(245,240,232,.12);}
.pp-stage-page .cap-line.cur .w.cur:hover,
.pp-stage-page .seg-text .w.cur:hover {background: var(--accent);}
.pp-stage-page .minimap {margin: 2px 4px 6px; height: 8px;}
.pp-stage-page .stage.force-hud .hud {opacity: 1 !important; pointer-events: auto !important;}
.pp-stage-page .stage.force-hud .markers {outline: 1px dashed rgba(245,240,232,.25); outline-offset: 3px; border-radius: 4px;}
.pp-stage-page .tabs {justify-content: space-between; gap: 0; padding: 10px 8px;}
.pp-stage-page .tabs button {padding: 0 8px; font-size: 13.5px;}
.pp-stage-page .dt-msg {cursor: pointer; transition: border-color .15s, box-shadow .15s;}
.pp-stage-page .dt-msg:hover {border-color: var(--text-2);}
.pp-stage-page .dt-msg.op:hover {box-shadow: 0 0 0 2px rgba(245,240,232,.4);}
.pp-stage-page .dt-msg.is-target {border-color: var(--green); box-shadow: 0 0 0 2px var(--green);}
.pp-stage-page .dt-msg.op.is-target {box-shadow: 0 0 0 3px var(--green);}
.pp-stage-page .dt-msg.mine {border-color: rgba(248,237,71,.4);}
.pp-stage-page .dt-msg.just-posted {animation: reply-in .4s ease-out both; box-shadow: 0 0 0 2px var(--accent);}
.pp-stage-page .dt-reply {margin-left: auto; height: 24px; font-size: 11.5px;}
.pp-stage-page .dt-msg.op .dt-reply {color: #4A453F; border-color: #CFC8BD;}
.pp-stage-page .dt-msg.is-target .dt-reply {color: var(--green-text); border-color: var(--green);}
.pp-stage-page .dt-msg.op.is-target .dt-reply {color: #1E7A2A;}
.pp-stage-page .dt-to {font-size: 11.5px; color: var(--green-text); margin-left: 6px;}
.pp-stage-page .dt-replying {display: flex; align-items: center; gap: 8px; margin: 0 18px; padding: 8px 10px 8px 12px; border-radius: 10px 10px 0 0; background: rgba(59,181,74,.12); border: 1px solid rgba(59,181,74,.5); border-bottom: none; font-size: 12.5px; min-width: 0;}
.pp-stage-page .dt-rt-label {white-space: nowrap; color: var(--text-2);}
.pp-stage-page .dt-rt-label b {color: var(--green-text);}
.pp-stage-page .dt-rt-quote {flex: 1; min-width: 0; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic;}
.pp-stage-page .dt-rt-x {width: 24px; height: 24px; flex: 0 0 24px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; padding: 0;}
.pp-stage-page .dt-rt-x:hover {border-color: var(--text-2);}
.pp-stage-page .dt-form {padding-top: 8px; border-top: none;}
.pp-stage-page .dt-msg::before {left: -14px;}
.pp-stage-page .bg video.is-on {opacity: .5;}
.pp-stage-page .bg video {filter: blur(1.2px) saturate(.85); transform: scale(1.02);}
.pp-stage-page .bg.stills video.kb {animation: kb-a 13s ease-out both;}
.pp-stage-page .bg.stills video.kb2 {animation: kb-b 13s ease-out both;}
@keyframes kb-a { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.09) translate(-1.2%, -0.8%); } }
@keyframes kb-b { from { transform: scale(1.08) translate(1%, 0.6%); } to { transform: scale(1.03) translate(0, 0); } }
@media (prefers-reduced-motion: reduce) {
.pp-stage-page .bg.stills video.kb,
.pp-stage-page .bg.stills video.kb2 {animation: none;}
}
.pp-stage-page .bg video.is-on {opacity: 1;}
.pp-stage-page .bg.stills video {filter: saturate(.95);}
.pp-stage-page .bg:not(.stills) .bg-scrim {background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    radial-gradient(ellipse at 50% 50%, rgba(10,11,14,0) 45%, rgba(10,11,14,.4) 100%),
    linear-gradient(180deg, rgba(10,11,14,.2), rgba(10,11,14,0) 35%, rgba(10,11,14,0) 70%, rgba(10,11,14,.55));}
.pp-stage-page .bg.halted video {animation-play-state: paused !important;}
.pp-stage-m {--ink: #1B1819;
  --ink-2: #0F0D0E;
  --panel: #252122;
  --panel-2: #2F2A2B;
  --line: #3A3536;
  --line-2: #4B4547;
  --text: #F5F0E8;
  --text-2: #D6CFC5;
  --dim: #B0A99F;
  --faint: #938C83;
  --accent: #F8ED47;
  --green: #3BB54A;
  --green-text: #7EE08C;
  --sky: #6CB4E8;
  --clay: #F08A5D;
  --paper: #F5F0E8;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --top-h: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);}
.pp-stage-m * {box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
.pp-stage-m [hidden] {display: none !important;}
.pp-stage-m {margin: 0; background: var(--ink); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.5; overflow-x: hidden;}
body.pp-sheet-open {overflow: hidden;}
.pp-stage-m a {color: var(--text);}
.pp-stage-m button {font: inherit; color: inherit;}
.pp-stage-m :focus-visible {outline: 3px solid var(--sky); outline-offset: 2px;}
.pp-stage-m .ico {fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;}
.pp-stage-m .mono {font-family: var(--mono);}
.pp-stage-m .dim {color: var(--dim);}
.pp-stage-m .small {font-size: 13px;}
.pp-stage-m h1,
.pp-stage-m h2 {font-family: var(--display); margin: 0; letter-spacing: -0.01em;}
.pp-stage-m h2 {font-size: 18px;}
.pp-stage-m .btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--line-2); background: transparent; font-weight: 600; cursor: pointer; white-space: nowrap;}
.pp-stage-m .btn-accent {background: var(--accent); color: var(--ink); border-color: var(--accent);}
.pp-stage-m .icon-btn {width: 40px; height: 40px; flex: 0 0 40px; border-radius: 20px; border: 1px solid var(--line-2); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: 22px; line-height: 1;}
.pp-stage-m .chip {display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 12px; border-radius: 15px; border: 1px solid var(--line-2); background: transparent; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; cursor: pointer; white-space: nowrap;}
.pp-stage-m .chip:active {background: var(--panel-2);}
.pp-stage-m .chip.time {font-family: var(--mono); font-weight: 500;}
.pp-stage-m .sample {font-family: var(--mono); font-size: 10px; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; border: 1px solid currentColor; opacity: .7;}
.pp-stage-m .top {position: sticky; top: 0; z-index: 40; height: var(--top-h); display: flex; align-items: center; gap: 8px; padding: 0 12px; padding-top: env(safe-area-inset-top, 0px); height: calc(var(--top-h) + env(safe-area-inset-top, 0px)); background: rgba(27,24,25,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);}
.pp-stage-m .brand {display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 16px; white-space: nowrap; margin-right: auto; min-width: 0;}
.pp-stage-m .brand-mark {width: 34px; height: auto; display: block;}
.pp-stage-m .brand-name .g {color: var(--green-text);}
.pp-stage-m .stage {position: relative; height: clamp(360px, 58svh, 560px); overflow: hidden; background: var(--ink-2); isolation: isolate; touch-action: manipulation; user-select: none; -webkit-user-select: none;}
.pp-stage-m .bg {position: absolute; inset: 0; z-index: 0;}
.pp-stage-m .bg video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.2s ease; filter: blur(1.2px) saturate(.85);}
.pp-stage-m .bg video.is-on {opacity: 1;}
.pp-stage-m .bg.stills video {filter: saturate(.95);}
.pp-stage-m .bg-scrim {position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,13,14,.55), rgba(15,13,14,0) 26%, rgba(15,13,14,0) 52%, rgba(15,13,14,.88) 100%);}
.pp-stage-m .bg:not(.stills) .bg-scrim {background: linear-gradient(180deg, rgba(15,13,14,.35), rgba(15,13,14,0) 26%, rgba(15,13,14,0) 52%, rgba(15,13,14,.8) 100%), rgba(0,0,0,.5);}
.pp-stage-m .stage.scenery-off .bg video {opacity: 0 !important;}
.pp-stage-m .bg video.kb {animation: kb-a 11s ease-out both;}
.pp-stage-m .bg video.kb2 {animation: kb-b 11s ease-out both;}
@keyframes kb-a { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
@keyframes kb-b { from { transform: scale(1.12) translate(1%, 1%); } to { transform: scale(1.04) translate(0, 0); } }
.pp-stage-m .now {position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 11px; padding: 6px 10px 6px 6px; border-radius: 16px; border: 1px solid rgba(245,240,232,.16); background: rgba(15,13,14,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; text-align: left;}
.pp-stage-m .now-art {position: relative; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 11px; overflow: hidden; background: var(--panel);}
.pp-stage-m .now-art img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease;}
.pp-stage-m .now-art img.is-on {opacity: 1;}
.pp-stage-m .now-text {display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 1px;}
.pp-stage-m .now-tag {font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--green-text); font-weight: 600;}
.pp-stage-m .now-title {font-family: var(--display); font-weight: 700; font-size: 15.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.pp-stage-m .now-bar {display: block; height: 3px; border-radius: 2px; background: rgba(245,240,232,.18); margin-top: 5px; overflow: hidden;}
.pp-stage-m .now-bar i {display: block; height: 100%; width: 0; background: var(--green);}
.pp-stage-m .now-chev {flex: 0 0 auto; color: var(--dim);}
.pp-stage-m .pops {position: absolute; z-index: 4; left: 12px; right: 12px; top: 92px; bottom: 96px; pointer-events: none; display: flex; flex-direction: column; justify-content: center;}
.pp-stage-m .stage.caps-1 .pops {bottom: 70px;}
.pp-stage-m .stage.caps-3 .pops {bottom: 122px;}
.pp-stage-m .stage.caps-off .pops {bottom: 16px;}
.pp-stage-m .pop {position: relative; max-height: 100%; display: flex; flex-direction: column; padding: 11px 13px 10px; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink-2); color: var(--ink); pointer-events: auto; animation: pop-in .38s cubic-bezier(.2,.9,.3,1.25) both; touch-action: pan-y; will-change: transform;}
.pp-stage-m .pop.out {animation: pop-out .28s ease-in both;}
.pp-stage-m .pop.swiping {animation: none; transition: none;}
.pp-stage-m .pop.fling {transition: transform .22s ease-in, opacity .22s ease-in; opacity: 0;}
.pp-stage-m .pop.snap {transition: transform .2s ease;}
.pp-stage-m .pop.pinned {box-shadow: 4px 4px 0 var(--ink-2), 0 0 0 4px rgba(108,180,232,.55);}
@keyframes pop-in { from { transform: scale(.6) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop-out { to { transform: scale(.85); opacity: 0; } }
.pp-stage-m .k-extra {background: var(--accent);}
.pp-stage-m .k-ref {background: var(--clay);}
.pp-stage-m .k-photo {background: var(--sky);}
.pp-stage-m .k-comment {background: var(--paper);}
.pp-stage-m .pop.detour {background: var(--green); color: var(--ink);}
.pp-stage-m .pop-tag {display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding-right: 34px; flex: 0 0 auto;}
.pp-stage-m .pop-x {position: absolute; top: 5px; right: 5px; width: 34px; height: 34px; border-radius: 17px; border: 0; background: rgba(15,13,14,.12); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;}
.pp-stage-m .pop-body {margin: 6px 0 4px; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.3;}
.pp-stage-m .pop-body.plain {font-family: var(--body); font-weight: 500; font-size: 15.5px; line-height: 1.42;}
.pp-stage-m .pop-body.scroll {overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; padding-right: 4px;}
.pp-stage-m .pop-desc {margin: 0 0 6px; font-size: 13px; line-height: 1.35; opacity: .85;}
.pp-stage-m .pop-img {display: block; width: 100%; max-height: 170px; object-fit: contain; background: rgba(15,13,14,.12); border-radius: 10px; margin: 7px 0 5px;}
.pp-stage-m .pop-actions {display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 6px; flex: 0 0 auto;}
.pp-stage-m .pop-btn {display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 3px 13px; border-radius: 17px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer;}
.pp-stage-m .pop-btn.round {width: 34px; padding: 0; justify-content: center; margin-left: auto;}
.pp-stage-m .pop-btn.take {background: var(--ink); color: var(--green-text);}
.pp-stage-m .pop .likes {font-size: 13px; font-weight: 600; opacity: .75;}
.pp-stage-m .thread {display: flex; flex-direction: column; gap: 6px; margin-top: 8px;}
.pp-stage-m .reply {display: flex; flex-direction: column; padding: 6px 9px; border-radius: 10px; background: rgba(15,13,14,.08); border-left: 3px solid rgba(15,13,14,.35); font-size: 14.5px; line-height: 1.38;}
.pp-stage-m .reply.fresh {animation: pop-in .35s ease both;}
.pp-stage-m .reply.from-show {border-left-color: var(--green);}
.pp-stage-m .reply-who {font-size: 12px; font-weight: 700; opacity: .75;}
.pp-stage-m .thread-count {font-size: 12px; font-weight: 600; opacity: .7; margin-top: 4px;}
.pp-stage-m .detour-lead {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.pp-stage-m .detour-meta {display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;}
.pp-stage-m .faces {display: inline-flex;}
.pp-stage-m .face {width: 24px; height: 24px; border-radius: 12px; background: var(--ink); color: var(--green-text); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: -6px; border: 2px solid var(--green);}
.pp-stage-m .face:first-child {margin-left: 0;}
.pp-stage-m .sign-mark {display: inline-flex;}
.pp-stage-m .swipe-hint {position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--dim); pointer-events: none;}
.pp-stage-m .caps {position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 10px 16px 14px; font-size: 17px; line-height: 1.45; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.8);}
.pp-stage-m .stage.caps-off .caps {display: none;}
.pp-stage-m .cap-line {white-space: nowrap; overflow: hidden; text-overflow: clip;}
.pp-stage-m .cap-line.ahead {color: rgba(245,240,232,.55);}
.pp-stage-m .cap-line .w {cursor: pointer; border-radius: 4px; padding: 0 1px; transition: color .12s ease, background-color .12s ease;}
.pp-stage-m .cap-line.cur .w {color: rgba(245,240,232,.62);}
.pp-stage-m .cap-line.cur .w.said {color: var(--text);}
.pp-stage-m .cap-line.cur .w.on {color: var(--ink); background: var(--accent); text-shadow: none;}
.pp-stage-m .skip-flash {position: absolute; z-index: 5; top: 50%; width: 92px; height: 92px; margin-top: -46px; border-radius: 46px; background: rgba(15,13,14,.55); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600; font-size: 15px; opacity: 0; pointer-events: none;}
.pp-stage-m .skip-flash.l {left: 16%;}
.pp-stage-m .skip-flash.r {right: 16%;}
.pp-stage-m .skip-flash.show {animation: flash .55s ease both;}
@keyframes flash { 0% { opacity: 0; transform: scale(.8); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pp-stage-m .stage:not(.started) .caps,
.pp-stage-m .stage:not(.started) .now,
.pp-stage-m .stage:not(.started) .pops {visibility: hidden;}
.pp-stage-m .start {position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 24px; text-align: center; background: radial-gradient(ellipse at 50% 40%, rgba(27,24,25,.55), rgba(15,13,14,.92));}
.pp-stage-m .start-cover {width: 132px; height: 132px; border-radius: 16px; object-fit: cover; border: 3px solid var(--ink-2); box-shadow: 5px 5px 0 var(--ink-2); margin-bottom: 14px;}
.pp-stage-m .start-kicker {margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim);}
.pp-stage-m .start-title {font-size: 25px; line-height: 1.15; margin: 4px 0 16px;}
.pp-stage-m .start-play {display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px 0 22px; border-radius: 27px; border: 3px solid var(--ink-2); background: var(--accent); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 17px; box-shadow: 4px 4px 0 var(--ink-2); cursor: pointer;}
.pp-stage-m .start-play:active {transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink-2);}
.pp-stage-m .start-hint {margin: 14px 0 0; font-size: 12.5px; color: var(--faint);}
.pp-stage-m .transport {padding: 10px 14px 12px; background: var(--ink); border-bottom: 1px solid var(--line);}
.pp-stage-m .key {display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0 -14px; padding-left: 14px; padding-right: 14px;}
.pp-stage-m .key::-webkit-scrollbar {display: none;}
.pp-stage-m .key-chip {display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 30px; padding: 0 11px; border-radius: 15px; border: 1px solid var(--line-2); background: transparent; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer;}
.pp-stage-m .key-chip .sw {width: 10px; height: 10px; border-radius: 5px;}
.pp-stage-m .key-chip .n {font-family: var(--mono); font-size: 11.5px; color: var(--dim);}
.pp-stage-m .key-chip[aria-pressed="false"] {opacity: .45;}
.pp-stage-m .key-chip[aria-pressed="false"] .sw {background: transparent !important; border: 1.5px solid var(--dim);}
.pp-stage-m .key-chip.k-detour .sw {border-radius: 2px; transform: rotate(45deg); width: 9px; height: 9px;}
.pp-stage-m .key-chip.k-chapter .sw {border: 1.5px solid var(--text-2);}
.pp-stage-m .lane-head {display: flex; align-items: center; gap: 8px;}
.pp-stage-m .lane-head .key {flex: 1 1 auto; min-width: 0; margin: 0 0 0 -14px; padding-right: 18px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);}
.pp-stage-m .lane-wrap {position: relative; margin-top: 8px;}
.pp-stage-m .lane {position: relative; height: 56px; overflow-x: auto; overflow-y: hidden; border-radius: 10px; background: var(--panel); scrollbar-width: none; overscroll-behavior-x: contain;}
.pp-stage-m .lane::-webkit-scrollbar {display: none;}
.pp-stage-m .lane-in {position: relative; height: 100%;}
.pp-stage-m .lane-head-line {position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--green); z-index: 2; pointer-events: none; box-shadow: 0 0 0 1px rgba(15,13,14,.4);}
.pp-stage-m .lane-ch {position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(245,240,232,.22); pointer-events: none;}
.pp-stage-m .lane-ch span {position: absolute; top: 2px; left: 4px; font-family: var(--mono); font-size: 10px; color: var(--faint); white-space: nowrap;}
.pp-stage-m .lane-played {position: absolute; top: 0; bottom: 0; left: 0; background: rgba(59,181,74,.09); pointer-events: none;}
.pp-stage-m .dot {position: absolute; width: 28px; height: 22px; margin-left: -14px; border: 0; padding: 0; background: transparent; cursor: pointer; z-index: 1;}
.pp-stage-m .dot::after {content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--c); opacity: .78; border: 1.5px solid rgba(15,13,14,.7);}
.pp-stage-m .dot.k-detour::after {border-radius: 2px; transform: rotate(45deg); width: 10px; height: 10px; margin: -5px 0 0 -5px;}
.pp-stage-m .dot.past::after {opacity: .45;}
.pp-stage-m .dot.on::after {opacity: 1; box-shadow: 0 0 0 3px rgba(245,240,232,.5);}
.pp-stage-m .lane-tools {display: flex; align-items: center; gap: 1px; flex: 0 0 auto; padding: 2px; border-radius: 16px; border: 1px solid var(--line-2);}
.pp-stage-m .lane-follow {position: absolute; right: 6px; top: 50%; margin-top: -16px; z-index: 3; width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--green); background: rgba(15,13,14,.88); color: var(--green-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;}
.pp-stage-m .mini-btn {width: 28px; height: 26px; border-radius: 13px; border: 0; background: transparent; font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;}
.pp-stage-m .mini-btn:disabled {opacity: .3;}
.pp-stage-m .mini-btn.follow {color: var(--green-text);}
.pp-stage-m .zoom-lbl {font-size: 11px; color: var(--dim); min-width: 22px; text-align: center;}
.pp-stage-m .scrub {position: relative; height: 30px; margin-top: 6px;}
.pp-stage-m .scrub-track {position: absolute; left: 0; right: 0; top: 13px; height: 5px; border-radius: 3px; background: var(--line-2); overflow: hidden;}
.pp-stage-m .scrub-fill {position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--green);}
.pp-stage-m .scrub-ticks i {position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); z-index: 1;}
.pp-stage-m .seek {position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: pointer;}
.pp-stage-m .scrub-knob {position: absolute; top: 8px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none;}
.pp-stage-m .scrub.dragging .scrub-knob {transform: scale(1.35);}
.pp-stage-m .scrub-tip {position: absolute; bottom: 32px; transform: translateX(-50%); padding: 3px 9px; border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; max-width: 80vw; overflow: hidden; text-overflow: ellipsis;}
.pp-stage-m .times {display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-top: -2px;}
.pp-stage-m .ch-left {color: var(--faint);}
.pp-stage-m .buttons {display: flex; align-items: center; justify-content: space-between; margin: 6px auto 2px; max-width: 360px;}
.pp-stage-m .tbtn {position: relative; width: 52px; height: 52px; border-radius: 26px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;}
.pp-stage-m .tbtn:active,
.pp-stage-m .tog:active,
.pp-stage-m .mini-btn:active {background: var(--panel-2);}
.pp-stage-m .tnum {position: absolute; font-family: var(--mono); font-size: 9.5px; font-weight: 600; top: 50%; left: 50%; transform: translate(-50%, -38%);}
.pp-stage-m .play {width: 70px; height: 70px; border-radius: 35px; border: 3px solid var(--ink-2); background: var(--accent); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 3px 3px 0 var(--ink-2);}
.pp-stage-m .play:active {transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink-2);}
.pp-stage-m .i-pause {display: none;}
.pp-stage-m .playing .i-play {display: none;}
.pp-stage-m .playing .i-pause {display: block;}
.pp-stage-m .toggles {display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-wrap: nowrap;}
.pp-stage-m .tog {height: 34px; padding: 0 11px; border-radius: 17px; border: 1px solid var(--line-2); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--text-2); flex: 0 1 auto; min-width: 0;}
.pp-stage-m .tog[aria-pressed="true"] {border-color: var(--green); color: var(--green-text);}
.pp-stage-m .tog[aria-pressed="false"] {color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1.5px;}
.pp-stage-m .tog.icon {width: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center;}
.pp-stage-m .speed-btn {font-family: var(--mono); min-width: 52px;}
.pp-stage-m .trail-sec {padding: 16px 0 6px;}
.pp-stage-m .sec-head {display: flex; align-items: baseline; gap: 10px; padding: 0 14px 8px;}
.pp-stage-m .trail {display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 14px 10px; scrollbar-width: none; scroll-padding-left: 14px;}
.pp-stage-m .trail::-webkit-scrollbar {display: none;}
.pp-stage-m .tcard {flex: 0 0 72%; max-width: 280px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--c, var(--line-2)); text-align: left; cursor: pointer; min-height: 116px;}
.pp-stage-m .tcard.fresh {animation: pop-in .35s ease both;}
.pp-stage-m .tcard .tc-top {display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2);}
.pp-stage-m .tcard .tc-top .mono {margin-left: auto; font-weight: 500; letter-spacing: 0; color: var(--dim);}
.pp-stage-m .tcard p {margin: 0; font-size: 14px; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.pp-stage-m .tcard.k-chapter {border-top-color: var(--line-2);}
.pp-stage-m .tcard img {width: 100%; height: 64px; object-fit: cover; border-radius: 8px;}
.pp-stage-m .trail-empty {padding: 4px 14px 10px; color: var(--dim); font-size: 14px;}
.pp-stage-m .tabs {position: sticky; top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); z-index: 30; display: flex; background: rgba(27,24,25,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;}
.pp-stage-m .tabs::-webkit-scrollbar {display: none;}
.pp-stage-m .tabs button {flex: 1 1 auto; height: 46px; padding: 0 7px; border: 0; background: transparent; font-weight: 600; font-size: 13.5px; color: var(--dim); border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap;}
.pp-stage-m .tabs button[aria-selected="true"] {color: var(--text); border-bottom-color: var(--green);}
.pp-stage-m .count {font-family: var(--mono); font-size: 10.5px; font-weight: 500; padding: 1px 5px; border-radius: 9px; background: var(--panel-2); color: var(--dim); margin-left: 2px;}
.pp-stage-m .panel {padding: 12px 14px 24px; min-height: 60vh;}
.pp-stage-m .list {display: flex; flex-direction: column; gap: 10px;}
.pp-stage-m .item {padding: 12px 13px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line);}
.pp-stage-m .item.kind-extra {border-left: 4px solid var(--accent);}
.pp-stage-m .item.kind-ref {border-left: 4px solid var(--clay);}
.pp-stage-m .item.kind-photo {border-left: 4px solid var(--sky);}
.pp-stage-m .item.kind-comment {border-left: 4px solid var(--paper);}
.pp-stage-m .item.is-detour {border-left: 4px solid var(--green);}
.pp-stage-m .item .lbl {font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dim);}
.pp-stage-m .item h3 {margin: 4px 0 3px; font-family: var(--display); font-size: 16px; line-height: 1.3;}
.pp-stage-m .item p {margin: 4px 0 8px; font-size: 14.5px; line-height: 1.45; color: var(--text-2);}
.pp-stage-m .item .q {font-family: var(--display); font-weight: 700; font-size: 16.5px; color: var(--text);}
.pp-stage-m .item img.thumb {width: 100%; max-height: 200px; object-fit: contain; border-radius: 10px; background: var(--ink-2); margin: 6px 0;}
.pp-stage-m .row {display: flex; flex-wrap: wrap; gap: 7px; align-items: center;}
.pp-stage-m .item.flash {animation: flash-item 1.6s ease;}
@keyframes flash-item { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.pp-stage-m .who {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px;}
.pp-stage-m .replies {display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px 6px;}
.pp-stage-m .replies .reply {background: var(--panel-2); border-left-color: var(--line-2);}
.pp-stage-m .replies .reply.from-show {border-left-color: var(--green);}
.pp-stage-m .reply-form {display: flex; gap: 8px; margin-top: 8px;}
.pp-stage-m .reply-form input,
.pp-stage-m .dt-form input {flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 14px; border-radius: 21px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); font-size: 16px;}
.pp-stage-m .detour-row {display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--green); background: rgba(59,181,74,.1); color: var(--green-text); font-size: 14px; cursor: pointer; text-align: left; margin-bottom: 8px;}
.pp-stage-m .detour-go {margin-left: auto; font-weight: 700; white-space: nowrap;}
.pp-stage-m .composer {padding: 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 12px;}
.pp-stage-m .composer textarea {width: 100%; resize: vertical; min-height: 52px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); font: inherit; font-size: 16px;}
.pp-stage-m .composer-row {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px;}
.pp-stage-m .gallery {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.pp-stage-m .gallery button {display: flex; flex-direction: column; gap: 5px; padding: 0; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; overflow: hidden; cursor: pointer; text-align: left;}
.pp-stage-m .gallery img {width: 100%; aspect-ratio: 1; object-fit: cover; display: block;}
.pp-stage-m .gallery span {padding: 0 9px 8px; font-size: 12.5px; line-height: 1.3; color: var(--text-2);}
.pp-stage-m .transcript {display: flex; flex-direction: column; gap: 4px;}
.pp-stage-m .seg {}
.pp-stage-m .tseg {display: flex; gap: 10px; padding: 8px 8px; border-radius: 10px; cursor: pointer;}
.pp-stage-m .tseg .mono {font-size: 12px; color: var(--faint); padding-top: 3px; flex: 0 0 44px;}
.pp-stage-m .tseg p {margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2);}
.pp-stage-m .tseg.on {background: rgba(59,181,74,.12);}
.pp-stage-m .tseg.on p {color: var(--text);}
.pp-stage-m .tch {margin: 14px 0 4px; font-family: var(--display); font-size: 15px; color: var(--green-text);}
.pp-stage-m .jump-now {position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: calc(84px + var(--safe-b)); height: 38px; padding: 0 16px; border-radius: 19px; border: 2px solid var(--ink-2); background: var(--green); color: var(--ink); font-weight: 700; box-shadow: 3px 3px 0 var(--ink-2); cursor: pointer;}
.pp-stage-m .foot {padding: 20px 14px calc(100px + var(--safe-b)); color: var(--dim); font-size: 13px; border-top: 1px solid var(--line);}
.pp-stage-m .foot p {margin: 0 0 10px;}
.pp-stage-m .mini {position: fixed; z-index: 45; left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 7px; border-radius: 16px; background: rgba(37,33,34,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-2); box-shadow: 0 8px 24px rgba(0,0,0,.45); animation: mini-in .25s ease both; overflow: hidden;}
@keyframes mini-in { from { transform: translateY(120%); } to { transform: none; } }
.pp-stage-m .mini-prog {position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--line);}
.pp-stage-m .mini-prog i {display: block; height: 100%; width: 0; background: var(--green);}
.pp-stage-m .mini-main {flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer;}
.pp-stage-m .mini-main img {width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: 0 0 44px;}
.pp-stage-m .mini-text {display: flex; flex-direction: column; min-width: 0;}
.pp-stage-m .mini-text b {font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pp-stage-m .mini-text span {font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pp-stage-m .mini-play {width: 48px; height: 48px; flex: 0 0 48px; border-radius: 24px; border: 0; background: var(--accent); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;}
.pp-stage-m .mini-pop {position: absolute;}
.pp-stage-m .scrim {position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s ease;}
.pp-stage-m .scrim.open {opacity: 1;}
.pp-stage-m .sheet {position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 82svh; display: flex; flex-direction: column; background: var(--panel); border-radius: 20px 20px 0 0; border-top: 1px solid var(--line-2); padding-bottom: var(--safe-b); transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.3,1); box-shadow: 0 -10px 40px rgba(0,0,0,.4);}
.pp-stage-m .sheet.open {transform: none;}
.pp-stage-m .sheet.dragging {transition: none;}
.pp-stage-m .sheet.tall {height: 92svh; max-height: 92svh;}
.pp-stage-m .grab {width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto 2px; flex: 0 0 auto;}
.pp-stage-m .sheet-head {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px 8px; flex: 0 0 auto; touch-action: none;}
.pp-stage-m .sheet-note {margin: -2px 14px 6px;}
.pp-stage-m .sheet-body {overflow-y: auto; padding: 4px 14px 16px; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0;}
.pp-stage-m .chrow {display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer;}
.pp-stage-m .chrow img {width: 54px; height: 54px; border-radius: 9px; object-fit: cover; flex: 0 0 54px;}
.pp-stage-m .chrow .t {display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto;}
.pp-stage-m .chrow .t b {font-size: 15px; line-height: 1.3;}
.pp-stage-m .chrow .t span {font-size: 12.5px; color: var(--dim); font-family: var(--mono);}
.pp-stage-m .chrow.on {background: rgba(59,181,74,.13);}
.pp-stage-m .chrow.on .t span {color: var(--green-text);}
.pp-stage-m .chrow .chbar {height: 3px; border-radius: 2px; background: var(--line); margin-top: 5px; overflow: hidden;}
.pp-stage-m .chrow .chbar i {display: block; height: 100%; background: var(--green);}
.pp-stage-m .settings .set-row {display: flex; flex-direction: column; gap: 7px; padding: 10px 0; border-bottom: 1px solid var(--line);}
.pp-stage-m .settings .set-row > span {font-size: 13px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .05em;}
.pp-stage-m .seg-ctl,
.pp-stage-m .seg {display: flex; gap: 6px; flex-wrap: wrap;}
.pp-stage-m .seg button {height: 38px; padding: 0 15px; border-radius: 19px; border: 1px solid var(--line-2); background: transparent; font-weight: 600; font-size: 14px; cursor: pointer;}
.pp-stage-m .seg button[aria-pressed="true"] {background: var(--green); border-color: var(--green); color: var(--ink);}
.pp-stage-m .draft {display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 6px; border: 1px dashed var(--accent); color: var(--accent);}
.pp-stage-m .share-opt {display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer;}
.pp-stage-m .share-opt b {display: block; font-size: 15px;}
.pp-stage-m .share-opt span {display: block; font-size: 13px; color: var(--dim);}
.pp-stage-m .share-opt .ico-wrap {width: 40px; height: 40px; border-radius: 20px; background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; color: var(--green-text);}
.pp-stage-m .detour .sheet-head {border-bottom: 1px solid var(--line);}
.pp-stage-m .back-walk {display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px 0 12px; border-radius: 20px; border: 0; background: var(--green); color: var(--ink); font-weight: 700; cursor: pointer;}
.pp-stage-m .dt-body {padding-top: 12px;}
.pp-stage-m .dt-kicker {display: flex; align-items: center; gap: 8px; color: var(--green-text);}
.pp-stage-m .dt-said {margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line);}
.pp-stage-m .dt-said-lbl {font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dim);}
.pp-stage-m .dt-said p {margin: 4px 0 8px; font-size: 14px; line-height: 1.45; color: var(--text-2);}
.pp-stage-m .dt-conv {display: flex; flex-direction: column; gap: 8px; margin-top: 6px;}
.pp-stage-m .dt-msg {padding: 9px 11px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--line-2); cursor: pointer;}
.pp-stage-m .dt-msg.op {border-left-color: var(--paper);}
.pp-stage-m .dt-msg.from-show {border-left-color: var(--green);}
.pp-stage-m .dt-msg.is-target {border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);}
.pp-stage-m .dt-msg.just-posted {animation: flash-item 1.6s ease;}
.pp-stage-m .dt-msg p {margin: 4px 0 0; font-size: 14.5px; line-height: 1.42;}
.pp-stage-m .dt-who {display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px;}
.pp-stage-m .dt-to {font-size: 12px; color: var(--sky);}
.pp-stage-m .dt-reply {margin-left: auto; min-height: 28px !important;}
.pp-stage-m .dt-reply[aria-pressed="true"] {border-color: var(--accent); color: var(--accent);}
.pp-stage-m .dt-foot {flex: 0 0 auto; padding: 8px 14px 10px; border-top: 1px solid var(--line); background: var(--panel);}
.pp-stage-m .dt-replying {display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; min-width: 0;}
.pp-stage-m .dt-rt-label {white-space: nowrap; color: var(--accent);}
.pp-stage-m .dt-rt-quote {color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto;}
.pp-stage-m .dt-rt-x {width: 28px; height: 28px; border-radius: 14px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; flex: 0 0 28px;}
.pp-stage-m .dt-form {display: flex; gap: 8px;}
.pp-stage-m .dt-keep {display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); margin-top: 8px;}
.pp-stage-m .lightbox {position: fixed; inset: 0; z-index: 70; background: rgba(8,7,7,.96); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px calc(20px + var(--safe-b));}
.pp-stage-m .lightbox img {max-width: 100%; max-height: 70svh; object-fit: contain; border-radius: 8px;}
.pp-stage-m .lb-x {position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; background: var(--panel);}
.pp-stage-m .lb-cap {display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; text-align: center; font-size: 14px;}
.pp-stage-m .toast {position: fixed; z-index: 80; left: 50%; top: calc(var(--top-h) + env(safe-area-inset-top, 0px) + 10px); transform: translate(-50%, -12px); padding: 9px 16px; border-radius: 20px; background: var(--paper); color: var(--ink); font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; max-width: 90vw; text-align: center;}
.pp-stage-m .toast.show {opacity: 1; transform: translate(-50%, 0);}
@media (orientation: landscape) and (max-height: 520px) {
.pp-stage-m .stage {height: calc(100svh - var(--top-h));}
.pp-stage-m .now {right: auto; max-width: 52%;}
.pp-stage-m .pops {left: auto; right: 12px; width: min(420px, 50%); top: 12px; bottom: 64px;}
.pp-stage-m .caps {right: 0;}
}
@media (min-width: 700px) {
.pp-stage-m main,
.pp-stage-m .top {max-width: 640px; margin: 0 auto;}
.pp-stage-m .stage {border-radius: 0 0 16px 16px;}
}
@media (prefers-reduced-motion: reduce) {
.pp-stage-m .pop,
.pp-stage-m .reply.fresh,
.pp-stage-m .tcard.fresh,
.pp-stage-m .bg video.kb,
.pp-stage-m .bg video.kb2 {animation: none !important;}
}
.pp-stage-m .bg.halted video {animation-play-state: paused !important;}

/* ── Integration with the production page ───────────────────────────────── */
/* The site resets margins and padding on everything; the demos rely on browser defaults in a few places. */
.pp-stage-page, .pp-stage-m { position: relative; }
.pp-stage-page dialog { margin: auto; }
.pp-stage-page ol, .pp-stage-page ul, .pp-stage-m ol, .pp-stage-m ul { list-style: none; }
.pp-stage-page img, .pp-stage-m img { display: block; max-width: 100%; }
.pp-stage-page .art-frame img, .pp-stage-page .preview-img img, .pp-stage-page .cm-list img, .pp-stage-page .gallery img, .pp-stage-page .chapter img,
.pp-stage-m .now-art img, .pp-stage-m .gallery img, .pp-stage-m .tcard img, .pp-stage-m .chrow img, .pp-stage-m .mini-main img, .pp-stage-m .start-cover { max-width: none; }
.pp-stage-page .menu.chapters-menu, .pp-stage-page .menu.about { z-index: 120; }
.pp-stage-page .detour-sheet { z-index: 600; }
.pp-stage-page .dt-scrim { z-index: 599; }
.pp-stage-page .toast { z-index: 700; }
/* Static base behind the scenery: the show's mixing-desk image, used on every episode in place of the demo's stripes. */
.pp-stage-page .bg-fallback { background: #0f0d0e url("../img/stage-bg.jpg") center / cover no-repeat; }
.pp-stage-m .stage { background: #0f0d0e url("../img/stage-bg.jpg") center / cover no-repeat; }
/* Community: the comment box, author marks and the visitor's own held comments. */
.pp-stage-m .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp-stage-page .comments-box { display: flex; flex-direction: column; gap: 12px; }
.pp-stage-page .comments-box .comment-form { border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); padding: 12px 14px 14px; }
.pp-stage-page .comment-form textarea, .pp-stage-m .composer textarea { width: 100%; resize: vertical; min-height: 56px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-2, #0f0d0e); color: var(--text); font: inherit; font-size: 14px; line-height: 1.45; }
.pp-stage-page .comment-form .row, .pp-stage-m .composer .composer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-stage-page .comment-form .row input[type="text"], .pp-stage-m .composer-row input[type="text"] { flex: 1 1 140px; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-2, #0f0d0e); color: var(--text); font: inherit; font-size: 13px; }
.pp-stage-page .comment-form .btn, .pp-stage-m .composer .btn { margin-left: auto; }
.pp-stage-page .comment-form .hp, .pp-stage-m .composer .hp { display: none; }
.pp-stage-page .comment-status, .pp-stage-m .comment-status { min-height: 1.2em; margin: 0; }
.pp-stage-page .comment-status[data-kind="error"], .pp-stage-m .comment-status[data-kind="error"] { color: var(--clay); font-weight: 600; }
.pp-stage-page .comment-status[data-kind="ok"], .pp-stage-m .comment-status[data-kind="ok"] { color: var(--green-text); }
.pp-stage-page [data-stage="comment-widget"]:empty, .pp-stage-m [data-m="composer-widget"]:empty { display: none; }
.pp-stage-page .star, .pp-stage-m .star { color: var(--accent); margin-left: 4px; }
.pp-stage-page .host-mark, .pp-stage-m .host-mark { margin-left: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; background: var(--green); color: #0f1f12; }
.pp-stage-page .ai-pill, .pp-stage-m .ai-pill { margin-left: 6px; text-decoration: none; color: inherit; cursor: pointer; }
.pp-stage-page .ai-pill:hover, .pp-stage-m .ai-pill:hover { text-decoration: underline; }
.pp-stage-page .mine, .pp-stage-m .mine { border-style: dashed; }
.pp-stage-page .mine-chip, .pp-stage-m .mine-chip { font-size: 11.5px; color: var(--text-2); margin-left: auto; }
.pp-stage-page .mine-rejected, .pp-stage-m .mine-rejected { opacity: .7; }
.pp-stage-page .empty-note, .pp-stage-m .empty-note { padding: 14px 4px; margin: 0; font-size: 13.5px; }
.pp-stage-page .reply-controls, .pp-stage-m .reply-controls { margin-top: 8px; }
.pp-stage-page .reply-form, .pp-stage-m .reply-form { display: grid; gap: 6px; margin-top: 8px; }
.pp-stage-page .reply-form textarea, .pp-stage-m .reply-form textarea { width: 100%; resize: vertical; min-height: 48px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-2, #0f0d0e); color: var(--text); font: inherit; font-size: 13.5px; }
.pp-stage-page .reply.mine, .pp-stage-m .reply.mine { border-left: 2px dashed var(--line-2); padding-left: 8px; }
.pp-stage-page .dt-msg.mine, .pp-stage-m .dt-msg.mine { border-style: dashed; }
.pp-stage-m .reply-form[hidden], .pp-stage-page .reply-form[hidden] { display: none; }
/* Artwork explorations: the Episode Art section (alternate takes and prompts) moved into the Gallery tab. */
.pp-stage-page .art-explore, .pp-stage-m .art-explore { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.pp-stage-page .art-explore h3, .pp-stage-m .art-explore h3 { font: 700 15px/1.2 var(--display, inherit); margin: 0 0 4px; }
.pp-stage-page .art-explore > p, .pp-stage-m .art-explore > p { margin: 0 0 12px; font-size: 13px; color: var(--text-2); }
.pp-stage-page .art-explore details.in-stage, .pp-stage-m .art-explore details.in-stage { border: 0; background: none; padding: 0; margin: 0; }
.pp-stage-page .art-explore details.in-stage > summary, .pp-stage-m .art-explore details.in-stage > summary { display: none; }
.pp-stage-page .art-explore img, .pp-stage-m .art-explore img { max-width: 100%; }
/* What crawlers and no-JavaScript readers get: shown only without JavaScript (the template's noscript rule). */
.pp-stage-shell .seo-copy { display: none; padding: 16px 24px; max-width: 900px; margin: 0 auto; color: var(--text); }
/* Production additions to the desktop start overlay and captions */
.pp-stage-page .start-resume { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pp-stage-page .start-resume .small-btn { background: rgba(15,13,14,.8); color: var(--text); border-color: var(--line-2); }
.pp-stage-page .start-resume .small-btn.btn-accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.pp-stage-page .cap-note { position: absolute; left: 22px; bottom: 3px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pp-stage-page .cap-line.cur.is-line { color: var(--text); }
.pp-stage-page .player:fullscreen .stage { aspect-ratio: auto; }
.pp-stage-page .pop[data-slot="one"] { top: 5%; right: 3%; }
/* Below the stage band: the previous/next episode links stay in the site's light theme */
.stage-after { max-width: 940px; margin: 0 auto; padding: 1.5rem 1.25rem 0; }

/* Layout switch: the phone layout replaces the desktop one below 760 px (the demos' own breakpoint). */
.pp-stage-m { display: none; --top-h: 67px; overflow-x: clip; }
@media (max-width: 759.98px) {
    .pp-stage-page { display: none; }
    .pp-stage-m { display: block; }
}
/* Phone layout: the site header above is the brand and is sticky, so the demo's own top bar is a plain row and the tabs stick below the site header. */
.pp-stage-m .top { position: static; height: auto; min-height: 52px; padding-top: 0; padding-bottom: 0; }
.pp-stage-m .top-title { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: 16px; }
.pp-stage-m .tabs { top: var(--top-h); }
.pp-stage-m .start-resume { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.pp-stage-m .mini { z-index: 150; }
.pp-stage-m .scrim { z-index: 700; }
.pp-stage-m .sheet { z-index: 701; }
.pp-stage-m .lightbox { z-index: 710; }
.pp-stage-m .toast { z-index: 720; top: calc(var(--top-h) + 10px); }
.pp-stage-m .jump-now { z-index: 140; }
.pp-stage-m button { cursor: pointer; }
.pp-stage-m .cap-line.is-line.cur { color: var(--text); }
.pp-stage-m .cap-line.is-line { cursor: pointer; }


/* ── Light theme (the site's original branding) ─────────────────────────── */
/* The demos are dark; that is the dark theme (html[data-theme="dark"]). In any other case the surfaces around the
   stage take the site's cream, white and green. The stage itself (video, bubbles, control bar, now-playing card)
   stays dark in both themes, like a video player, by re-asserting the dark tokens inside it. */
:root:not([data-theme="dark"]) .pp-stage-page,
:root:not([data-theme="dark"]) .pp-stage-m {
    --panel: #ffffff; --panel-2: #f0ece2; --line: #ddd8ce; --line-2: #a8a39a;
    --text: #1f1d1a; --text-2: #4a4640; --dim: #6b665d; --faint: #6b665d; --green-text: #1a6e28;
    background: #f5f0e8;
}
:root:not([data-theme="dark"]) .pp-stage-page .stage,
:root:not([data-theme="dark"]) .pp-stage-page .player:fullscreen,
:root:not([data-theme="dark"]) .pp-stage-m .stage,
:root:not([data-theme="dark"]) .pp-stage-m .lightbox,
:root:not([data-theme="dark"]) .pp-stage-page dialog#lightbox,
:root:not([data-theme="dark"]) .pp-stage-page .lightbox {
    --panel: #252122; --panel-2: #2f2a2b; --line: #3a3536; --line-2: #4b4547;
    --text: #f5f0e8; --text-2: #d6cfc5; --dim: #b0a99f; --faint: #938c83; --green-text: #7ee08c;
    color: var(--text);
}
:root:not([data-theme="dark"]) .pp-stage-page a:hover { color: #1a6e28; }
:root:not([data-theme="dark"]) .pp-stage-page .stage a:hover { color: var(--accent); }
/* surfaces the demo paints with its page colour */
:root:not([data-theme="dark"]) .pp-stage-page .tcard,
:root:not([data-theme="dark"]) .pp-stage-page .preview-card,
:root:not([data-theme="dark"]) .pp-stage-page .dt-context,
:root:not([data-theme="dark"]) .pp-stage-page .lb img { background: var(--panel-2); }
:root:not([data-theme="dark"]) .pp-stage-page .tcard.is-detour { background: linear-gradient(180deg, rgba(59,181,74,.14), #fff 70%); }
:root:not([data-theme="dark"]) .pp-stage-page input[type="text"] { background: #fff; color: var(--text); }
:root:not([data-theme="dark"]) .pp-stage-page .tag.k-chapter { background: transparent; color: var(--text); border: 1px solid var(--text); }
:root:not([data-theme="dark"]) .pp-stage-page .menu.chapters-menu,
:root:not([data-theme="dark"]) .pp-stage-page .menu.about { background: #fff; color: var(--text); border-color: var(--line-2); box-shadow: 0 12px 40px rgba(31,29,26,.22); }
:root:not([data-theme="dark"]) .pp-stage-page .cap-line { color: #6b665d; }
:root:not([data-theme="dark"]) .pp-stage-page .cap-line.ahead2 { color: #7a746b; }
:root:not([data-theme="dark"]) .pp-stage-page .cap-line.cur { color: #57524a; }
:root:not([data-theme="dark"]) .pp-stage-page .gallery span,
:root:not([data-theme="dark"]) .pp-stage-page .preview-img p { color: #f5f0e8; }
:root:not([data-theme="dark"]) .pp-stage-page .trail-arrow { box-shadow: 0 4px 14px rgba(31,29,26,.25); }
:root:not([data-theme="dark"]) .pp-stage-page .detour-sheet { box-shadow: -20px 0 60px rgba(31,29,26,.25); }
/* phone layout */
:root:not([data-theme="dark"]) .pp-stage-m .top { background: rgba(245,240,232,.94); }
:root:not([data-theme="dark"]) .pp-stage-m .transport,
:root:not([data-theme="dark"]) .pp-stage-m .scrub-ticks i { background: #f5f0e8; }
:root:not([data-theme="dark"]) .pp-stage-m .tabs { background: rgba(245,240,232,.96); }
:root:not([data-theme="dark"]) .pp-stage-m .mini { background: rgba(255,255,255,.97); box-shadow: 0 8px 24px rgba(31,29,26,.25); }
:root:not([data-theme="dark"]) .pp-stage-m .lane-follow { background: #fff; }
:root:not([data-theme="dark"]) .pp-stage-m .item img.thumb,
:root:not([data-theme="dark"]) .pp-stage-m .dt-said { background: var(--panel-2); }
:root:not([data-theme="dark"]) .pp-stage-m .reply-form input,
:root:not([data-theme="dark"]) .pp-stage-m .dt-form input,
:root:not([data-theme="dark"]) .pp-stage-m .composer textarea { background: #fff; color: var(--text); }
:root:not([data-theme="dark"]) .pp-stage-m .sheet { box-shadow: 0 -10px 40px rgba(31,29,26,.25); }
/* dark: the demo's faintest text is 4.2:1 on its panels; lift it to pass AA */
:root[data-theme="dark"] .pp-stage-page, :root[data-theme="dark"] .pp-stage-m { --faint: #a8a198; }

/* AI marker: a plain robot emoji, no outline */
.pp-stage-page .ai-pill, .pp-stage-m .ai-pill { border: 0; padding: 0; opacity: 1; font-family: inherit; font-size: 1.05em; line-height: 1; vertical-align: middle; text-transform: none; }
.pp-stage-page .reply .reply-controls, .pp-stage-m .reply .reply-controls { margin-top: 2px; }
.pp-stage-page .dt-msg > .walk, .pp-stage-m .dt-msg > .chip { align-self: flex-start; margin-top: 4px; }

/* Light theme: every text field in the stage reads dark-on-white (the dark tokens above are for the stage surface only). */
:root:not([data-theme="dark"]) .pp-stage-page textarea,
:root:not([data-theme="dark"]) .pp-stage-m textarea,
:root:not([data-theme="dark"]) .pp-stage-page input[type="text"],
:root:not([data-theme="dark"]) .pp-stage-m input[type="text"],
:root:not([data-theme="dark"]) .pp-stage-m .composer-row input[type="text"] { background: #fff; color: var(--text); border-color: var(--line-2); }
:root:not([data-theme="dark"]) .pp-stage-page textarea::placeholder,
:root:not([data-theme="dark"]) .pp-stage-m textarea::placeholder,
:root:not([data-theme="dark"]) .pp-stage-page input::placeholder,
:root:not([data-theme="dark"]) .pp-stage-m input::placeholder { color: var(--dim); opacity: 1; }