/* RTC product scene: derived from the checked dummy's color/material/motion roles.
   Hero DOM is rebuilt; other five-region content/behaviour remains the checked marketing revision. */
:root{--detail-grid:color-mix(in srgb,var(--plae-gray) 32%,transparent);--detail-shadow:0 28px 48px -28px #20202066;--detail-ease:cubic-bezier(.2,0,0,1)}

/* Overview = blue. Selected detail = orange. Both use the same neutral surface. */
:root{--explanation-secondary-ink:#9C4400}
html[data-theme=dark]{--explanation-secondary-ink:#FFB985}
.explanation-card{--explanation-accent:var(--plae-blue);--explanation-label:var(--plae-link);min-width:0;padding:24px;background:var(--plae-surface);color:var(--plae-ink);border:1px solid var(--plae-line);border-left:3px solid var(--explanation-accent);box-shadow:0 12px 28px -20px #20202077}
.explanation-card.explanation-secondary{--explanation-accent:var(--plae-orange);--explanation-label:var(--explanation-secondary-ink)}
.explanation-card .explanation-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.explanation-card .explanation-label{font-size:12px;line-height:1.5;font-weight:600;color:var(--explanation-label)}
.explanation-card .explanation-title{font:400 26px/1.4 var(--candidate-display);letter-spacing:-.025em;word-break:keep-all;margin-top:12px}
.explanation-card .explanation-body{font-size:15px;line-height:1.75;word-break:keep-all;margin-top:16px}
.explanation-card .explanation-hint,.explanation-card .explanation-link{font-size:13px;line-height:1.7;margin-top:20px;padding-top:16px;border-top:1px solid var(--plae-line)}
.explanation-card .explanation-hint{color:var(--plae-muted)}
.explanation-card .explanation-link{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--plae-ink)}
.explanation-card .explanation-link:hover{color:var(--explanation-label)}
.explanation-heading button{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--plae-line);border-radius:50%;flex-shrink:0}
.explanation-heading button svg{width:18px;height:18px}
.detail-aside:has(.detail-inspect:not([hidden]))>.hero-access-note{display:none}
.detail-motion svg,.scene-play-icon svg{display:block;width:18px;height:18px;fill:currentColor}
.detail-motion{display:grid;place-items:center}
.detail-inspect:not([hidden]){animation:detail-reveal .32s var(--detail-ease)}
@media(max-width:639px){.explanation-card{padding:20px}.explanation-card .explanation-title{font-size:24px}}
@media(prefers-reduced-motion:reduce){.detail-inspect:not([hidden]){animation:none}}

.hero-section{position:relative;padding-top:112px;padding-bottom:52px}.hero-heading{grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:56px;align-items:end}.hero-heading h1{font-size:clamp(56px,6.5vw,94px);line-height:1.1;letter-spacing:-.055em}.hero-heading .eyebrow{margin-bottom:30px}.hero-copy>p{font-size:17px;line-height:1.65}.hero-actions{margin-top:24px}.hero-copy .small-copy{line-height:1.65}
.detail-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,2.5fr) minmax(230px,1fr);gap:28px;align-items:center;margin-top:44px;padding:30px 0 18px}.detail-stage:before{content:"";position:absolute;inset:0 -28px -8px -20px;z-index:-2;background-image:linear-gradient(var(--detail-grid) 1px,transparent 1px),linear-gradient(90deg,var(--detail-grid) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(110deg,#000 10%,#0009 70%,transparent);pointer-events:none}.detail-orbit-layer{position:absolute;inset:0;overflow-x:clip;overflow-y:visible;pointer-events:none;z-index:-1}.detail-orbit{position:absolute;width:250px;height:250px;border:1px solid var(--plae-orange);border-radius:50%;z-index:-1;top:-12px;right:90px;opacity:.5}.detail-orbit:before,.detail-orbit:after{content:"";position:absolute;border:1px solid var(--plae-gray);border-radius:50%;inset:30px}.detail-orbit:after{inset:60px;border-color:var(--plae-blue)}
.detail-workspace{min-width:0;background:var(--plae-surface);border:1px solid var(--plae-line);border-radius:10px;box-shadow:var(--detail-shadow);position:relative;z-index:1;transform:translateY(0);transition:box-shadow .6s var(--detail-ease)}.detail-workspace:before,.detail-workspace:after{content:"";position:absolute;top:12px;width:3px;height:3px;border:1px solid var(--plae-muted);border-radius:50%;pointer-events:none}.detail-workspace:before{left:10px}.detail-workspace:after{right:10px}.detail-appbar{display:flex;align-items:center;gap:8px;padding:15px 20px 12px;border-bottom:1px solid var(--plae-line)}.detail-appbar .wordmark{font-size:24px}.detail-appbar>span:nth-child(2){font:9px 'Study Departure',monospace;color:var(--plae-muted);letter-spacing:.02em}.detail-static{margin-left:auto;font-size:10px;color:var(--plae-muted);display:flex;align-items:center;gap:6px}.detail-static:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--plae-blue)}.detail-tools{display:flex;gap:0;padding:0 16px;background:var(--color-surface-2)}.detail-tools button{min-height:46px;display:flex;align-items:center;gap:10px;flex:1;justify-content:center;font-size:12px;border-bottom:3px solid transparent;padding:10px 8px;transition:background .15s,border-color .15s}.detail-digit{font:10px 'Study Departure',monospace;letter-spacing:0}.detail-tools button[aria-selected=true]{background:var(--plae-surface);border-color:var(--plae-blue)}.detail-tools button:hover{background:color-mix(in srgb,var(--plae-blue) 18%,var(--plae-surface))}.detail-display{position:relative;aspect-ratio:2.135;background:var(--plae-surface);margin:16px;min-width:0}.detail-display img{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0;border-radius:7px}.detail-display.enter img{animation:detail-reveal .45s var(--detail-ease) both}.detail-hotspot{position:absolute;display:flex;align-items:center;gap:7px;min-height:36px;padding:4px 10px 4px 4px;border:1px solid var(--plae-line);border-radius:999px;background:var(--plae-surface);box-shadow:0 3px 10px #20202020;transition:transform .15s,background .15s;z-index:3;white-space:nowrap;font-size:12px}.detail-hotspot>span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--plae-ink);color:var(--plae-workspace);font:9px 'Study Departure',monospace}.detail-hotspot b{font-weight:500}.detail-hotspot:hover{transform:translateY(-3px)}.detail-hotspot[aria-expanded=true]{background:var(--plae-orange);border-color:var(--plae-orange);color:#202020}.detail-hotspot-a{left:42%;top:66%}.detail-hotspot-b{left:20%;top:17%}.detail-stage[data-detail-scene=harmony] .detail-hotspot-a{left:44%;top:48%}.detail-stage[data-detail-scene=harmony] .detail-hotspot-b{left:33%;top:85%}.detail-stage[data-detail-scene=melody] .detail-hotspot-a{left:39%;top:63%}.detail-stage[data-detail-scene=melody] .detail-hotspot-b{left:8%;top:42%}.detail-aside{position:relative;z-index:2;min-width:0;margin-left:-10px}.hero-principles{margin-top:30px}.principle-link{position:relative;padding-top:18px}.principle-link:before{content:"";display:inline-block;width:6px;height:6px;background:var(--plae-blue);margin-right:9px}
/* Same material roles in the subsequent normal-flow product scenes. */
.choice-visual{position:relative;background-color:var(--color-surface-2);background-image:linear-gradient(var(--detail-grid) 1px,transparent 1px),linear-gradient(90deg,var(--detail-grid) 1px,transparent 1px);background-size:24px 24px}.choice-panel{box-shadow:var(--detail-shadow)}.module-tabs{position:relative;z-index:1}.module-tabs [data-module=rhythm][aria-selected=true]{border-bottom:3px solid var(--plae-orange)}.module-tabs [data-module=harmony][aria-selected=true]{border-bottom:3px solid var(--plae-blue)}.module-tabs [data-module=melody][aria-selected=true]{border-bottom:3px solid var(--plae-gray)}.choice-copy{border-top:3px solid var(--plae-orange)}.choice-panel[data-creation-mode=ai] .choice-copy{border-color:var(--plae-blue)}.choice-panel.detail-changing .choice-copy{animation:detail-reveal .32s var(--detail-ease)}.explanation-section{background-image:linear-gradient(90deg,transparent 49.9%,var(--detail-grid) 50%,transparent 50.1%)}.explanation-board{box-shadow:var(--detail-shadow);border-radius:0}.prompt-side{position:relative;border-top:3px solid var(--plae-orange)}.response-side{border-top:3px solid var(--plae-blue);border-radius:0}.response-side.detail-changing #phrase-response{animation:detail-reveal .32s var(--detail-ease)}.phrase-options [aria-selected=true]{background:var(--plae-orange);color:var(--plae-ink);border-color:var(--plae-orange)}.classroom-path article{border-top:3px solid var(--plae-orange)}.classroom-path article:nth-child(2){border-top-color:var(--plae-blue)}.classroom-path article:nth-child(3){border-top-color:var(--plae-gray)}.classroom-path .role-label{color:var(--plae-ink)}.license-card{border-top:3px solid var(--plae-gray)}.landing-closing{position:relative;background-image:linear-gradient(var(--detail-grid) 1px,transparent 1px),linear-gradient(90deg,var(--detail-grid) 1px,transparent 1px);background-size:24px 24px}.detail-observed.detail-visible .section-heading{animation:detail-reveal .6s var(--detail-ease) both}
@keyframes detail-reveal{from{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes detail-ambient{to{transform:rotate(16deg) scale(1.05)}}
@media(prefers-reduced-motion:no-preference){.detail-orbit{animation:detail-ambient 20s ease-in-out infinite alternate}.detail-stage:before{animation:detail-backdrop 8s linear infinite alternate}@keyframes detail-backdrop{to{background-position:24px 0,24px 0}}}
@media(max-width:1199px){.hero-heading{grid-template-columns:1fr 300px;gap:28px}.hero-heading h1{font-size:clamp(48px,6.3vw,76px);max-width:none}.hero-copy>p{font-size:16px}.detail-stage{grid-template-columns:minmax(0,1.9fr) minmax(220px,1fr);gap:22px}}
@media(max-width:899px){.hero-heading{grid-template-columns:1fr;gap:28px}.hero-heading h1{font-size:clamp(48px,8.6vw,74px)}.hero-copy{max-width:640px}.hero-copy>p{max-width:46ch}.detail-stage{grid-template-columns:1fr;gap:24px}.detail-aside{margin-left:0}.detail-stage:before{inset:0 -12px}.detail-orbit{right:0;top:100px}.detail-appbar{padding:16px 20px}}
@media(max-width:639px){.hero-section{padding-top:100px;padding-bottom:36px}.hero-heading h1{font-size:clamp(38px,10.6vw,62px);line-height:1.12}.hero-heading .eyebrow{margin-bottom:24px;}.hero-heading{gap:22px}.hero-copy>p{line-height:1.75}.hero-actions{gap:8px;margin-top:20px}.detail-stage{margin-top:28px;padding-top:20px;gap:24px}.detail-appbar{padding:14px 16px 10px;gap:6px}.detail-appbar>span:nth-child(2){font-size:7px}.detail-static{font-size:9px}.detail-tools{padding:0 8px}.detail-tools button{font-size:11px;gap:7px;min-height:44px}.detail-display{margin:12px 8px;aspect-ratio:2.135}.detail-hotspot{min-height:36px;padding-right:7px;gap:4px;}.detail-hotspot>span{width:22px;height:22px;font-size:8px}.detail-hotspot-a{left:44%;top:62%}.detail-hotspot-b{left:17%;top:12%}.detail-orbit{width:180px;height:180px;top:80px;right:-4px}.detail-stage:before{inset:0 -12px 0}.hero-principles{margin-top:22px}.principle-link{padding-block:16px}.classroom-path article+article{border-top-width:3px}}
@media(max-height:650px) and (min-width:900px){.hero-section{padding-top:96px}.hero-heading h1{font-size:clamp(48px,5.5vw,70px)}.hero-heading .eyebrow{margin-bottom:20px}.hero-copy>p{font-size:16px}.detail-stage{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.detail-stage *,.detail-stage:before,.detail-stage:after,.detail-observed *,.response-side *{animation:none!important;transition:none!important}.detail-observed{opacity:1}}/* Explanatory track colors follow the fixed source pattern, not editable or generated notes. */
.detail-motion{min-width:36px;min-height:36px;font-size:15px;margin-left:auto;border:1px solid var(--plae-line);border-radius:50%;flex-shrink:0}.detail-appbar .detail-static{margin-left:4px}.detail-stage[data-paused=true] *,.detail-stage[data-paused=true]:before{animation-play-state:paused!important}@media(prefers-reduced-motion:reduce){.detail-motion{display:none}}.detail-media-missing .detail-hotspot,.detail-media-missing img{display:none}.detail-media-fallback{position:absolute;inset:0;display:grid;place-content:center;padding:24px;font-size:13px;line-height:1.8;border:1px dashed var(--plae-line);color:var(--plae-muted)}

/* Native module proportions: keep the square harmony readable, never stretch it. */
.detail-stage[data-detail-scene=harmony] .detail-display{aspect-ratio:400/345;max-width:400px;width:calc(100% - 32px);margin-inline:auto}
.detail-stage[data-detail-scene=melody] .detail-display{aspect-ratio:688/345}
.detail-stage[data-detail-scene=harmony] .detail-hotspot-a{left:50%;top:83%}
.detail-stage[data-detail-scene=harmony] .detail-hotspot-b{left:8%;top:40%}
.detail-stage[data-detail-scene=melody] .detail-hotspot-b{left:auto;right:2%;top:4%}
.detail-stage[data-detail-scene=rhythm] .detail-hotspot-b{left:9%;top:44%}
/* scrollIntoView must reserve the real fixed header and phone bar/safe area. */
@media(max-width:899px){.detail-inspect{scroll-margin-top:88px;scroll-margin-bottom:16px}}
@media(max-width:639px){.detail-inspect{scroll-margin-top:80px;scroll-margin-bottom:calc(80px + env(safe-area-inset-bottom,0px))}}