/* PianoPi unified warm brand theme — 2026-09-14 */
:root{
  --pp-brand-brown:#55321f;
  --pp-brand-brown-2:#744326;
  --pp-brand-gold:#c99a55;
  --pp-brand-cream:#fbf5ea;
  --pp-brand-paper:#f4ecdf;
  --pp-brand-ink:#2b2018;
  --pp-brand-soft-shadow:0 18px 44px rgba(63,37,20,.13);
}
body{background:linear-gradient(180deg,#f7f2e8 0%,#eee7dc 100%)!important;color:var(--pp-brand-ink)}
.pp-page-shell,.school-shell,.musicbox-shell{position:relative}

/* One visual identity for every primary header. */
.pp-page-header,.school-topbar,.musicbox-topbar{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  border:1px solid rgba(255,224,177,.20)!important;
  background:
    radial-gradient(circle at 72% 28%,rgba(225,174,103,.18),transparent 34%),
    linear-gradient(135deg,#3f2618 0%,#603820 54%,#3b2418 100%)!important;
  color:#fff9ef!important;
  box-shadow:0 20px 44px rgba(54,31,16,.20)!important;
}
.pp-page-header::after,.school-topbar::after,.musicbox-topbar::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:12px;
  bottom:-3px;
  width:min(42%,330px);
  height:112px;
  opacity:.32;
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 130'%3E%3Cg fill='none' stroke='%23efc888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M42 77h213c31 0 48 12 48 28v8H67c-18 0-29-10-29-24V77z' fill='%23efc888' fill-opacity='.11'/%3E%3Cpath d='M143 73c16-46 57-67 124-61 13 1 26 5 35 10-37 2-65 9-86 22-18 11-31 22-40 33'/%3E%3Cpath d='M67 77v-12h176v12M89 65V52M112 65V49M136 65V54M160 65V48M184 65V53M208 65V47M232 65V52'/%3E%3Cpath d='M76 113l-9 15M278 113l9 15M53 113h252'/%3E%3C/g%3E%3C/svg%3E");
}
.pp-page-header h1,.school-topbar h1,.musicbox-topbar h1{
  color:#fffaf1!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(2.15rem,5vw,3.45rem)!important;
  letter-spacing:-.035em!important;
  line-height:1!important;
  text-shadow:0 4px 20px rgba(0,0,0,.22)!important;
}
.pp-page-header :is(.muted,.lead,.intro),.school-topbar .muted,.musicbox-topbar :is(.lead,.muted){color:#f2e4d3!important;max-width:60ch}
.pp-page-header :is(.pp-page-kicker,.kicker),.musicbox-topbar .kicker{color:#e9c48c!important}
.pp-global-nav{position:relative;z-index:2}
.pp-global-nav a,.pp-global-nav button{
  background:rgba(255,250,242,.94)!important;
  border-color:rgba(238,201,146,.38)!important;
  color:#4b3020!important;
  box-shadow:0 7px 20px rgba(25,13,7,.16)!important;
}

/* Shared surfaces feel like one app. */
.pp-content-surface,.panel,.school-overview,.school-learning,.play-sound-card,.play-library-card,.assistant-step,.assistant-selection-card,.assistant-live-card{
  border-color:rgba(116,67,38,.14)!important;
  background:linear-gradient(180deg,rgba(255,252,246,.96),rgba(248,239,226,.94))!important;
  box-shadow:var(--pp-brand-soft-shadow)!important;
}
.section-kicker,.kicker,.eyebrow{color:#8b674a!important}

/* Start-page action cards. */
.hero-card{padding:28px!important;border-radius:28px!important}
.hero-copy{margin-bottom:16px!important}
.hero-copy h2{font-size:clamp(1.65rem,3.4vw,2.25rem)!important}
.hero-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.pp-action-card{
  position:relative;
  min-height:138px!important;
  padding:18px 54px 18px 92px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
  overflow:hidden;
  text-align:left!important;
  border-radius:24px!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.pp-action-card:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(65,37,18,.18)!important}
.pp-action-card::after{content:"›";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.26);font-size:1.8rem;line-height:1;color:currentColor}
.pp-action-copy{display:grid;gap:5px;min-width:0}
.pp-action-copy>span{font-family:Georgia,"Times New Roman",serif;font-size:1.32rem;font-weight:800;line-height:1.05}
.pp-action-copy small{font-size:.92rem;line-height:1.25;opacity:.88}
.pp-action-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:17px;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);display:grid;place-items:center}
.pp-action-icon::before{font-size:1.85rem;line-height:1}
.pp-action-play .pp-action-icon::before{content:"♬"}
.pp-action-school .pp-action-icon::before{content:"♩"}
.pp-action-music .pp-action-icon::before{content:"♫"}
.pp-action-karaoke .pp-action-icon::before{content:"●";font-size:1.2rem;box-shadow:0 13px 0 -3px currentColor;border-radius:50%}
.primary-action{background:linear-gradient(135deg,#7b4828 0%,#4b2b1b 100%)!important;border-color:rgba(235,193,128,.46)!important}
.school-action{background:linear-gradient(135deg,#eff7e8 0%,#cfe4bc 100%)!important}
.musicbox-action{background:linear-gradient(135deg,#fff2dc 0%,#e7c386 100%)!important}

/* Demo stays useful but visually secondary. */
.demo-strip{margin-top:14px!important;border-radius:22px!important;box-shadow:0 12px 28px rgba(61,36,17,.10)!important;background:linear-gradient(180deg,#fffaf1,#f4e5cc)!important}

/* Page-specific accent, without creating separate themes. */
.play-library-card,.play-sound-card{border-radius:22px!important}
.school-chapter-card{box-shadow:0 10px 24px rgba(63,37,20,.07)!important}
.now-playing,.karaoke-panel,.assistant-panel{border-radius:24px!important}
.status-pill,.play-status-item{box-shadow:none!important}

@media(max-width:760px){
  .pp-page-header::after,.school-topbar::after,.musicbox-topbar::after{width:48%;height:92px;right:4px;opacity:.23}
  .pp-page-header h1,.school-topbar h1,.musicbox-topbar h1{font-size:2.45rem!important}
  .hero-card{padding:18px!important}
  .hero-actions{grid-template-columns:1fr!important;gap:10px!important}
  .pp-action-card{min-height:112px!important;padding:15px 48px 15px 82px!important;border-radius:22px!important}
  .pp-action-icon{left:16px;width:52px;height:52px;border-radius:16px}
  .pp-action-copy>span{font-size:1.2rem}
  .pp-action-copy small{font-size:.88rem}
}

/* Low-GFX keeps identity without expensive effects. */
html.lowgfx .pp-page-header,html.lowgfx .school-topbar,html.lowgfx .musicbox-topbar{background:#54321f!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.lowgfx .pp-page-header::after,html.lowgfx .school-topbar::after,html.lowgfx .musicbox-topbar::after{opacity:.13}
html.lowgfx .pp-content-surface,html.lowgfx .panel,html.lowgfx .school-overview,html.lowgfx .school-learning,html.lowgfx .play-sound-card,html.lowgfx .play-library-card{box-shadow:none!important;background:#f7f1e7!important}
html.lowgfx .pp-action-card{box-shadow:none!important;transition:none!important}


/* Low-GFX contrast corrections and complete app coverage. */
.lowgfx-marker{display:none!important}
html.lowgfx .pp-page-header h1,
html.lowgfx .school-topbar h1,
html.lowgfx .musicbox-topbar h1,
html.lowgfx body.piano-learning-theme .pp-page-header h1,
html.lowgfx body.piano-learning-theme .school-topbar h1{color:#fffaf1!important;text-shadow:none!important}
html.lowgfx .pp-page-header :is(.muted,.lead,.intro,.pp-page-kicker,.kicker),
html.lowgfx .school-topbar :is(.muted,.learning-topbar-title),
html.lowgfx .musicbox-topbar :is(.muted,.lead,.kicker){color:#f0dfcb!important}
html.lowgfx .primary-action.pp-action-card{background:#5a341f!important;color:#fffaf1!important;border-color:#b98750!important}
html.lowgfx .primary-action.pp-action-card .pp-action-icon{background:#70462b!important;color:#fffaf1!important}
html.lowgfx .school-action.pp-action-card{background:#dceacc!important;color:#272019!important}
html.lowgfx .musicbox-action.pp-action-card{background:#efd3a4!important;color:#272019!important}


/* PIANOPI_BRAND_FIX3_20260914 */
/* Clear keyboard motif instead of the former grand-piano outline. */
.pp-page-header::after,.school-topbar::after,.musicbox-topbar::after{
  width:min(44%,340px)!important;height:92px!important;right:14px!important;bottom:8px!important;opacity:.30!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 110'%3E%3Cg fill='none' stroke='%23efc888' stroke-width='3'%3E%3Crect x='10' y='22' width='330' height='72' rx='12' fill='%23efc888' fill-opacity='.07'/%3E%3Cpath d='M28 34h294M28 82h294'/%3E%3Cpath d='M57 34v48M86 34v48M115 34v48M144 34v48M173 34v48M202 34v48M231 34v48M260 34v48M289 34v48'/%3E%3C/g%3E%3Cg fill='%23efc888' fill-opacity='.55'%3E%3Crect x='48' y='34' width='16' height='29' rx='2'/%3E%3Crect x='77' y='34' width='16' height='29' rx='2'/%3E%3Crect x='135' y='34' width='16' height='29' rx='2'/%3E%3Crect x='164' y='34' width='16' height='29' rx='2'/%3E%3Crect x='193' y='34' width='16' height='29' rx='2'/%3E%3Crect x='251' y='34' width='16' height='29' rx='2'/%3E%3Crect x='280' y='34' width='16' height='29' rx='2'/%3E%3C/g%3E%3C/svg%3E")!important;
}

/* Crisp embedded icons: keyboard, book, speaker and microphone. */
.pp-action-icon{background-color:rgba(255,255,255,.24)!important;background-repeat:no-repeat!important;background-position:center!important;background-size:34px 34px!important}
.pp-action-icon::before,.pp-action-icon::after{content:none!important;display:none!important}
.pp-action-play .pp-action-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='7' y='14' width='50' height='36' rx='5' fill='%23fff8ec' stroke='%23553320' stroke-width='3'/%3E%3Cg stroke='%23553320' stroke-width='2'%3E%3Cpath d='M17 14v36M27 14v36M37 14v36M47 14v36'/%3E%3C/g%3E%3Cg fill='%23553320'%3E%3Crect x='13' y='14' width='7' height='21' rx='1'/%3E%3Crect x='23' y='14' width='7' height='21' rx='1'/%3E%3Crect x='43' y='14' width='7' height='21' rx='1'/%3E%3C/g%3E%3C/svg%3E")!important}
.pp-action-school .pp-action-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%234d5f3d' stroke-width='4' stroke-linejoin='round'%3E%3Cpath d='M9 14c10-3 17-1 23 4v34c-6-5-13-7-23-4z' fill='%23f7fbf1'/%3E%3Cpath d='M55 14c-10-3-17-1-23 4v34c6-5 13-7 23-4z' fill='%23f7fbf1'/%3E%3C/g%3E%3C/svg%3E")!important}
.pp-action-music .pp-action-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23734426'%3E%3Cpath d='M11 27h13l14-11v32L24 37H11z'/%3E%3Cpath d='M43 24c6 5 6 11 0 16l4 4c9-8 9-17 0-24z'/%3E%3Cpath d='M49 17c11 10 11 22 0 32l4 4c14-12 14-28 0-40z'/%3E%3C/g%3E%3C/svg%3E")!important}
.pp-action-karaoke .pp-action-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23734426' stroke-width='4' stroke-linecap='round'%3E%3Crect x='22' y='8' width='20' height='34' rx='10' fill='%23fff6e7'/%3E%3Cpath d='M15 30c0 11 7 18 17 18s17-7 17-18M32 48v9M23 57h18'/%3E%3C/g%3E%3C/svg%3E")!important}

/* Learning hub cards use the same visual language as the start page. */
.learning-hub-choices{display:grid!important;gap:12px!important}
.learning-hub-choice{
  position:relative!important;display:grid!important;grid-template-columns:68px minmax(0,1fr) 36px!important;align-items:center!important;gap:16px!important;
  min-height:138px!important;padding:18px!important;border-radius:24px!important;border:1px solid rgba(116,67,38,.18)!important;
  background:linear-gradient(135deg,#fff8ec 0%,#f2e1c7 100%)!important;color:var(--pp-brand-ink)!important;text-decoration:none!important;
  box-shadow:0 12px 28px rgba(63,37,20,.09)!important;
}
.learning-hub-choice:nth-child(1){background:linear-gradient(135deg,#eff7e8 0%,#d5e8c4 100%)!important}
.learning-hub-choice:nth-child(2){background:linear-gradient(135deg,#fff2dc 0%,#e8c68d 100%)!important}
.learning-hub-choice:nth-child(3){background:linear-gradient(135deg,#f7ead8 0%,#dfb985 100%)!important}
.learning-hub-choice::before{content:"";width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.46) center/34px 34px no-repeat;border:1px solid rgba(255,255,255,.55)}
.learning-hub-choice:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%234d5f3d' stroke-width='4'%3E%3Cpath d='M9 14c10-3 17-1 23 4v34c-6-5-13-7-23-4z'/%3E%3Cpath d='M55 14c-10-3-17-1-23 4v34c6-5 13-7 23-4z'/%3E%3C/g%3E%3C/svg%3E")}
.learning-hub-choice:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23734426' stroke-width='4'%3E%3Ccircle cx='18' cy='42' r='8'/%3E%3Ccircle cx='46' cy='22' r='8'/%3E%3Cpath d='M25 39L39 26M28 15h20'/%3E%3C/g%3E%3C/svg%3E")}
.learning-hub-choice:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23734426' stroke-width='4'%3E%3Cpath d='M16 19h32v25H16z'/%3E%3Cpath d='M24 14h16M32 44v8M25 52h14'/%3E%3Ccircle cx='25' cy='31' r='3' fill='%23734426'/%3E%3Ccircle cx='39' cy='31' r='3' fill='%23734426'/%3E%3C/g%3E%3C/svg%3E")}
.learning-hub-choice::after{content:"›";display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.42);font-size:1.8rem;font-weight:800;color:#5a351f}
.learning-hub-choice>div:first-of-type{min-width:0}.learning-hub-choice h2{margin:3px 0 8px!important;font-size:1.35rem!important}.learning-hub-choice p{margin:0!important}.learning-hub-choice ul{margin:10px 0 0!important}.learning-hub-go{grid-column:2;margin-top:8px!important;font-weight:900!important;color:#7a4525!important}
@media(max-width:700px){.learning-hub-choice{grid-template-columns:56px minmax(0,1fr) 32px!important;min-height:120px!important;padding:14px!important;gap:12px!important}.learning-hub-choice::before{width:52px;height:52px;border-radius:16px}.learning-hub-choice ul{display:none}.learning-hub-choice h2{font-size:1.2rem!important}.learning-hub-choice p{font-size:.88rem!important}.learning-hub-go{font-size:.86rem!important}}

/* PIANOPI_BRAND_FIX3_PLAYICON_20260914 */
.pp-action-play .pp-action-icon{background-image:none!important;display:grid!important;place-items:center!important}
.pp-action-play .pp-action-icon::before{content:"🎹"!important;display:block!important;font-size:2rem!important;line-height:1!important}

/* PIANOPI_BRAND_FIX3_KEYBOARD_CSS_20260914 */
.pp-action-play .pp-action-icon{
  background:
    linear-gradient(#55321f,#55321f) 17px 13px/5px 15px no-repeat,
    linear-gradient(#55321f,#55321f) 27px 13px/5px 15px no-repeat,
    linear-gradient(#55321f,#55321f) 42px 13px/5px 15px no-repeat,
    repeating-linear-gradient(90deg,#fffaf1 0 9px,#7a573f 9px 10px) center/42px 30px no-repeat,
    rgba(255,255,255,.26)!important;
}
.pp-action-play .pp-action-icon::before{content:none!important;display:none!important}

.pp-action-icon-keyboard{background:rgba(255,255,255,.26)!important}.pp-action-icon-keyboard svg{display:block;width:38px;height:38px}