/* Color and luminous edges for the learning journey. */
.hero{isolation:isolate;background:radial-gradient(ellipse at 5% 0%,#27c7b72b,transparent 55%),radial-gradient(ellipse at 100% 12%,#a776ed30,transparent 60%),linear-gradient(135deg,var(--guide-hero-a),var(--guide-hero-b));border-color:color-mix(in srgb,var(--cyan) 45%,var(--line));box-shadow:0 18px 60px #0003,inset 0 1px 0 #ffffff25,0 0 30px #8b5cf610}
.hero:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:linear-gradient(115deg,#69dcd5,#79acdf 38%,#b98be4 72%,#f1c879);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.8}
.hero h1{letter-spacing:-.025em;text-wrap:balance;text-shadow:0 2px 18px #a78bfa1a}
.guide-brand>span{color:var(--muted);border-inline-start:1px solid var(--line);padding-inline-start:14px}
.guide-studio-brand img{filter:drop-shadow(0 0 9px #2dd4bf35)}
.hero .stats{gap:10px}.hero .stat{border-color:color-mix(in srgb,#8dcde4 35%,var(--line));background:color-mix(in srgb,var(--guide-stat) 88%,#77bfeb);box-shadow:inset 0 1px 0 #fff1}.hero .stat b{color:var(--cyan)}
.quote{border-radius:0 12px 12px 0;border-inline-start:3px solid #e3b25f;background:linear-gradient(105deg,#e6b46012,#b183dd12);box-shadow:inset 0 1px 0 #ffffff0c}
.journey{--route-glow:#5ecbd5;position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--route-glow) 48%,var(--line));background:linear-gradient(125deg,color-mix(in srgb,var(--route-glow) 12%,var(--panel2)),var(--panel));box-shadow:inset 0 1px 0 #ffffff16,0 4px 15px #0001;transition:transform .2s,box-shadow .2s,border-color .2s}
.journey[data-route=ear]{--route-glow:#be91ef}.journey[data-route=rhythm]{--route-glow:#efbd61}.journey[data-route=sound]{--route-glow:#66b9ec}.journey[data-route=create]{--route-glow:#e891bc}.journey[data-route=perform]{--route-glow:#73d1a0}
.journey:hover,.journey:focus-visible{transform:translateY(-2px);border-color:var(--route-glow);box-shadow:0 5px 22px color-mix(in srgb,var(--route-glow) 17%,transparent),inset 0 1px 0 #ffffff25}
.journey b{color:var(--text)}.journey small{color:var(--muted)}
.app-card{position:relative;border-color:color-mix(in srgb,var(--cyan) 28%,var(--line));background:radial-gradient(ellipse at top right,#69d3da0e,transparent 65%),linear-gradient(155deg,var(--guide-card-a),var(--guide-card-b));box-shadow:0 8px 24px #0002,inset 0 1px 0 #ffffff12}
.app-card:hover{border-color:color-mix(in srgb,#b48ce1 65%,var(--line));box-shadow:0 8px 26px #9174d51a,inset 0 1px 0 #ffffff22}
.open-app{background:linear-gradient(110deg,#087f94,#6355b4);border:1px solid #9accdf66;box-shadow:0 3px 10px #5163b521;color:white}.open-app:hover{background:linear-gradient(110deg,#0a91a5,#7963c5)}
@media(prefers-reduced-motion:reduce){.journey{transition:none}.journey:hover,.journey:focus-visible{transform:none}}

.hero h1{font-weight:500}

.guide-smiling-do{display:inline-block;width:64px;height:70px;vertical-align:middle;margin-inline-start:12px;filter:drop-shadow(0 3px 9px #71cfe833);transform:rotate(-8deg)}@media(max-width:620px){.guide-smiling-do{width:44px;height:48px;margin-inline-start:7px}}

/* Match tool labels and launch links to the platform typeface. */
.app-no,.open-app{font-family:"Segoe UI",Arial,sans-serif;font-weight:600;letter-spacing:normal}

/* A coherent illustrated cover for every tool in the journey map. */
.app-card{overflow:hidden}
.app-illustration{aspect-ratio:1;height:auto;flex:none;margin:-19px -19px 17px;background-color:#101529;background-image:url("assets/guide-art/music-app-atlas.webp");background-size:300% 400%;background-position:var(--art-x) var(--art-y);background-repeat:no-repeat;border-bottom:1px solid #8ba5d12b}
.app-card h3{margin-top:10px}