/* Preview: one recessed, backlit design system across the main app and embeds. */
:root{--pp-backlight:#00E5FF;--pp-control-shadow:inset 0 4px 7px #000a,inset 0 -2px 4px #00E5FF30,0 9px 25px #00E5FF3d,0 5px 15px #0005;--pp-control-hover:inset 0 3px 6px #0009,inset 0 -2px 5px #00E5FF40,0 12px 32px #00E5FF60,0 6px 16px #0005;--pp-card-shadow:inset 0 4px 11px #0002,inset 0 -2px 5px #00E5FF1f,0 14px 36px #00E5FF1f,0 12px 25px #0002}

/* Primary actions have a dark inset face; the yellow belongs behind them. */
body[data-theme] :is(.button:not(.quiet):not(.outline):not(.dark):not(.text-link),.button:is(.quiet,.outline,.dark),.hero-login,.ppc-plus,.pco-pay){position:relative;border:0!important;border-radius:999px!important;background:linear-gradient(180deg,#132a21 0%,#071610 56%,#0c2117 100%)!important;color:#E9FCFF!important;box-shadow:var(--pp-control-shadow)!important;transition:transform .2s ease,box-shadow .2s ease}
body[data-theme] :is(.button:not(.quiet):not(.outline):not(.dark):not(.text-link),.button:is(.quiet,.outline,.dark),.hero-login,.ppc-plus,.pco-pay):hover{transform:translateY(-2px)!important;box-shadow:var(--pp-control-hover)!important}
body[data-theme] :is(.button:not(.quiet):not(.outline):not(.dark):not(.text-link),.button:is(.quiet,.outline,.dark),.hero-login,.ppc-plus,.pco-pay):active{transform:translateY(1px)!important;box-shadow:inset 0 6px 11px #000c,inset 0 -1px 3px #00E5FF24,0 5px 16px #00E5FF2e!important}
body[data-theme] :is(.button,.hero-login,.ppc-plus,.pco-pay):focus-visible{outline:2px solid var(--pp-backlight);outline-offset:3px}
body[data-theme] :is(.button,.hero-login,.ppc-plus,.pco-pay):disabled{opacity:.55;box-shadow:inset 0 3px 6px #0005!important;transform:none!important}

/* Keep small filters, lesson links, navigation and editor controls in their own colors. */
body[data-theme] button:not(:is(.button,.text-link,.profile,.close,.pp-horse-close)){box-shadow:inset 0 3px 6px #0003,0 7px 20px #00E5FF26;transition:transform .2s ease,box-shadow .2s ease}
body[data-theme] :is(.chip,.reaction,.play-button,.results-motion-toggle,.lesson-link,.event-link,.level-roadmap-button,.pp-mobile-outline,.pp-dash-pills button,.pp-resource-add>summary,.pp-resource-menu button,.pp-horse-tier,.pp-horse-motion-controls button,.profile-menu a,.composer button,.ppc-chip,.ppc-eat,.ppc-seg button,.ppc-tabs button,.ppc-sugg button,.ppc-unknown button,.ppc-ghost,.ppc-admin,.ppc-profile,.account-popover button,.pp-editor-toolbar button){border-color:transparent!important;box-shadow:inset 0 3px 7px #0003,inset 0 -1px 3px #00E5FF24,0 7px 19px #00E5FF26,0 3px 9px #0002!important;transition:transform .2s ease,box-shadow .2s ease}
body[data-theme] :is(.chip,.reaction,.play-button,.results-motion-toggle,.lesson-link,.event-link,.level-roadmap-button,.pp-mobile-outline,.pp-dash-pills button,.pp-resource-add>summary,.pp-resource-menu button,.pp-horse-tier,.pp-horse-motion-controls button,.profile-menu a,.composer button,.ppc-chip,.ppc-eat,.ppc-seg button,.ppc-tabs button,.ppc-sugg button,.ppc-unknown button,.ppc-ghost,.ppc-admin,.ppc-profile,.account-popover button,.pp-editor-toolbar button):hover{box-shadow:inset 0 3px 7px #0004,inset 0 -1px 3px #00E5FF3d,0 9px 24px #00E5FF3d,0 4px 10px #0002!important}
body[data-theme] :is(nav a.active,.mobile-dock a[aria-current="page"],.profile-menu a.active){box-shadow:inset 0 2px 6px #0003,0 5px 18px #00E5FF35}
body[data-theme] button:not(.button):focus-visible{outline:2px solid var(--pp-backlight);outline-offset:3px}

/* Content surfaces keep their original fills while acquiring depth and backlight. */
body[data-theme] :is(.card,.panel,.course-card,.member-card,.result-card,.home-price-card,.home-price-card.featured.pp-plan,.home-step-grid article,.stat,.membership-plan,.membership-plan.discounted,.level-panel,.pp-dash-card,.result-slide,.results-text-stories button,.profile-card,.ppc-card,.pco-card,.ppc-meal,.welcome,.benefit,.profile-course,.named-level,.profile-image-card,.skool-profile,.pp-horse-journey,.invite-row,.pp-resource-row,.pp-resource-view,.pco-link-box,.ppc-stats>div,.pph-stats>div){border-color:transparent!important;box-shadow:var(--pp-card-shadow)!important}
body[data-theme] :is(.home-price-card,.course-card,.member-card,.result-slide,.results-text-stories button,.pp-dash-card,.profile-course):hover{box-shadow:inset 0 4px 11px #0002,inset 0 -2px 5px #00E5FF2e,0 18px 44px #00E5FF35,0 14px 28px #0002!important}

/* The level celebration uses the same cyan light. */
body[data-theme] dialog.pp-horse-celebration .pp-horse-celebration-actions .button{background:linear-gradient(180deg,#C5FBFF,#4CB7C8)!important;color:#10231a!important;box-shadow:inset 0 3px 6px #E8FEFF77,inset 0 -3px 5px #115563AA,0 9px 25px #00E5FF55!important}
body[data-theme] dialog.pp-horse-celebration{border-color:#00E5FF80!important}
body[data-theme] dialog.pp-horse-celebration .eyebrow{color:#9AF4FF!important}
body[data-theme] :is(.pp-horse-stage-badge,.pp-level-ladder .tier-9,.pp-level-ladder .tier-10){border-color:#00E5FF77!important}
body[data-theme] .pp-horse-stage-badge{color:#A9F6FF}
body[data-theme] .pp-level-ladder .current .pp-horse-tier{border-color:#00E5FF!important;background:#D7FAFF}
body[data-theme] .pp-horse-celebration .pp-horse-evolution>div>span:last-child{color:#A9F6FF}
body[data-theme] :is(.stage-9 .pp-horse-stage-badge,.stage-10 .pp-horse-stage-badge){color:#A9F6FF;box-shadow:0 0 16px #00E5FF4D}
body[data-theme] .stage-10:after{border-color:#00E5FF50;box-shadow:0 0 45px #00E5FF33}
body[data-theme] .pp-horse-after .pp-horse-sprite{filter:drop-shadow(0 0 15px #00E5FF55)}
body[data-theme] .pp-horse-scene.stage-10 .pp-horse-sprite{animation-name:pp-horse-glow-cyan}
@keyframes pp-horse-glow-cyan{50%{filter:drop-shadow(0 0 12px #00E5FF77)}}

/* The food calculator is a separate document inside the website. */
body.calculator-page :is(.card,.tracker-card){border-color:transparent!important;box-shadow:var(--pp-card-shadow)!important}
body.calculator-page button:not(.log-del){border-color:transparent!important;box-shadow:inset 0 3px 6px #0003,0 7px 19px #00E5FF2b;transition:transform .2s ease,box-shadow .2s ease}
body.calculator-page :is(.calc-btn,.menu-btn,.lookup-btn,.log-add-btn-wide,.shuffle-btn){background:linear-gradient(180deg,#132a21,#071610 56%,#0c2117)!important;color:#E9FCFF!important;box-shadow:var(--pp-control-shadow)!important;border-radius:999px}
body.calculator-page :is(.calc-btn,.menu-btn,.lookup-btn,.log-add-btn-wide,.shuffle-btn):hover{transform:translateY(-2px);box-shadow:var(--pp-control-hover)!important}
body.calculator-page button:focus-visible{outline:2px solid var(--pp-backlight);outline-offset:3px}

/* Live lessons are also rendered inside their own document. */
body.live-page .live-card{border-color:transparent!important;box-shadow:var(--pp-card-shadow)!important}
body.live-page :is(.chat-input button,.live-admin button,.live-theme){border:0!important;background:linear-gradient(180deg,#132a21,#071610 56%,#0c2117)!important;color:#E9FCFF!important;box-shadow:var(--pp-control-shadow)!important;transition:transform .2s ease,box-shadow .2s ease}
body.live-page :is(.chat-input button,.live-admin button,.live-theme):hover{transform:translateY(-2px);box-shadow:var(--pp-control-hover)!important}
body.live-page :is(button,a):focus-visible{outline:2px solid var(--pp-backlight);outline-offset:3px}

@media(prefers-reduced-motion:reduce){body[data-theme] :is(button,.button,.hero-login,.profile-menu a),body.calculator-page button,body.live-page button{transition:none!important}}