/* Glass and depth remain enhancements; all content rests on readable surfaces. */
:root { --glass: #ffffffd9; --edge: #ffffffed; --ease-out: cubic-bezier(.2,.8,.2,1); }
body { background: radial-gradient(ellipse at 92% 0, #fff4bd70, transparent 42%), var(--bg); }
.topbar, .sidebar, .mobile-nav {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  box-shadow: inset 0 1px 0 var(--edge);
}
.search { background: #eef0f3a8; box-shadow: inset 0 1px 2px #22222204; }
.nav-link.active { box-shadow: 0 5px 14px #d8ad0020, inset 0 1px 0 #fff8; }
.discovery-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 80% 0, #fff7baa8, transparent 65%), linear-gradient(115deg, #ffe66e, #ffd100);
  border: 1px solid #f0cb3e;
  box-shadow: inset 0 1px 0 #fff9, 0 12px 30px #b79c1410;
}
.intro-heading { position: relative; min-height: 148px; padding-right: 260px; flex-wrap: wrap; gap: 14px; justify-content: flex-start; }
.intro-heading h1 { flex-basis: 100%; letter-spacing: -1.2px; font-size: clamp(28px, 2.6vw, 38px); max-width: 650px; }
.intro-heading .btn { font-size: 12px; padding: 10px 15px; }
.exchange-sculpture { position: absolute; width: 240px; height: 180px; right: 10px; top: -16px; pointer-events: none; perspective: 650px; }
.sculpture-stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(-12deg + var(--tilt-x, 0deg) * 2.5)) rotateY(calc(-18deg + var(--tilt-y, 0deg) * 2.5)); transition: transform .45s var(--ease-out); }
.glass-tile { position: absolute; width: 110px; height: 114px; display: grid; place-items: center; border-radius: 24px; border: 1px solid #ffffffd9; box-shadow: inset 2px 2px 1px #fff9, inset -3px -3px 2px #ffffff38, 6px 12px 18px #634b1720; }
.glass-tile.back { left: 36px; top: 10px; background: linear-gradient(135deg, #ffffffcb, #ffffff46); transform: translateZ(-15px) rotateZ(-17deg); color: #a17b0d; }
.glass-tile.front { right: 20px; bottom: 10px; background: linear-gradient(135deg, #fff9caef, #ffec73b8); transform: translateZ(25px) rotateZ(13deg); color: #594300; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.glass-tile .icon { width: 44px; height: 44px; stroke-width: 1.25; }
.sculpture-shadow { position: absolute; left: 20px; right: 0; bottom: -14px; height: 17px; border-radius: 50%; background: #86640020; filter: blur(9px); }
.intro-skills { background: #ffffff35; padding: 13px 15px; border: 1px solid #ffffff5c; border-radius: 12px; }
.intro-help { border-top: 0; margin-top: 10px; padding-top: 0; }
.skill-card { box-shadow: 0 3px 10px #25211504; border-color: #e5e6e9; transform: perspective(1000px) rotateX(0) rotateY(0); transition: transform .4s var(--ease-out), box-shadow .3s, border-color .3s; }
.skill-card::after { height: 188px; bottom: auto; content: ''; position: absolute; left: 0; right: 0; top: 0; border-radius: 16px 16px 0 0; background: radial-gradient(ellipse at var(--light-x, 50%) var(--light-y, 0%), #fff9, transparent 55%), linear-gradient(115deg, transparent 25%, #fff3 45%, #fff7 49%, #fff0 57%); opacity: 0; pointer-events: none; transition: opacity .3s; }
.cover-copy, .favorite { background: #ffffffe0; border: 1px solid #fff9; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 3px 8px #1515150b; }
.btn, .category, .favorite, .nav-link, .card-link .icon { transition: transform .22s var(--ease-out), box-shadow .22s, background .22s, color .22s; }
.btn.primary { box-shadow: inset 0 1px 0 #fff8, 0 4px 10px #d4ac0020; }
.btn:active, .favorite:active { transform: scale(.96); }
.btn:focus-visible { outline: 3px solid #8b6b0a; outline-offset: 3px; }
dialog[open] { animation: dialog-arrive .25s var(--ease-out); box-shadow: 0 28px 90px #15151526; }
dialog::backdrop { background: #171a2440; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] .skill-card.is-tilting { transform: perspective(1000px) rotateX(calc(var(--tilt-x, 0deg) * 1.5)) rotateY(calc(var(--tilt-y, 0deg) * 1.5)) translateY(-7px); box-shadow: 0 24px 44px #3a301124, 0 4px 10px #3a30130b; border-color: #d5c987; }
  html[data-motion="on"] .skill-card.is-tilting::after { opacity: 1; }
  html[data-motion="on"] .btn:hover { transform: translateY(-2px); }
  html[data-motion="on"] .card-link:hover .icon { transform: translateX(4px); }
  html[data-motion="on"] .favorite:hover { transform: scale(1.08); }
}
@media (max-width: 700px) {
  .intro-heading { min-height: 125px; padding-right: 115px; }
  .intro-heading h1 { font-size: 24px; max-width: 200px; }
  .intro-heading .btn { margin-top: 13px; }
  .exchange-sculpture { width: 124px; height: 138px; right: -6px; top: 6px; }
  .glass-tile { width: 68px; height: 72px; border-radius: 18px; }
  .glass-tile.back { left: 6px; }
  .glass-tile.front { right: 0; bottom: 15px; }
  .skill-card::after { height: 202px; }
  .glass-tile .icon { width: 32px; height: 32px; }
  .intro-skills { padding: 11px; gap: 10px; }
  .top-actions { gap: 7px; flex-shrink: 0; }
  .topbar { gap: 9px; }
  .topbar .search { min-width: 0; width: 0; }
  .topbar .search input { width: 0; }
  .mobile-nav { bottom: 10px; left: 10px; right: 10px; width: auto; border: 1px solid #fff; border-radius: 20px; box-shadow: 0 8px 30px #22222215, inset 0 1px 0 #fff; }
}

/* The exchange sculpture is the only continuously animated area. */
.discovery-intro { --ambient-play: paused; }
html[data-motion="on"] .discovery-intro[data-ambient="true"] { --ambient-play: running; }
.orbit-ring { position: absolute; inset: -16px -6px; border: 1px solid #91670042; border-radius: 50%; transform: rotateX(64deg) rotateZ(-28deg); transform-style: preserve-3d; box-shadow: 0 1px 0 #fff8; }
.orbit-ring.secondary { inset: -8px 9px; transform: rotateY(65deg) rotateZ(24deg); border-color: #ffffff9c; }
.orbit-track { position: absolute; inset: -1px; border-radius: inherit; animation: orbit-turn 14s linear infinite; animation-play-state: var(--ambient-play); }
.orbit-track i { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #fff, #b38a07); box-shadow: 0 0 14px #fff9; }
.secondary .orbit-track { animation-duration: 18s; animation-direction: reverse; }
.sculpture-spark { position: absolute; font: 300 22px/1 sans-serif; color: #fff; text-shadow: 0 1px 2px #9d751740; }
.spark-one { top: 15px; right: 16px; }
.spark-two { bottom: 20px; left: 14px; font-size: 15px; }
html[data-motion="on"] .glass-tile { animation: tile-float 6s ease-in-out infinite; animation-play-state: var(--ambient-play); }
html[data-motion="on"] .glass-tile.front { animation-delay: -3s; }
html[data-motion="on"] .sculpture-spark { animation: spark-breathe 4s ease-in-out infinite; animation-play-state: var(--ambient-play); }
@keyframes orbit-turn { to { transform: rotateZ(360deg); } }
@keyframes tile-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes spark-breathe { 0%,100% { opacity: .45; scale: .8; } 50% { opacity: 1; scale: 1.1; } }
.cover-photo { transition: transform .7s var(--ease-out); }
.category.selected { box-shadow: 0 5px 12px #22222218, inset 0 1px 0 #ffffff30; }
html[data-motion="on"] .category:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] .skill-card.is-tilting .cover-photo { transform: scale(1.07) translate(calc((var(--light-x, 50%) - 50%) * -.065), calc((var(--light-y, 50%) - 50%) * -.065)); }
  html[data-motion="on"] .category:hover:not(.selected) { transform: translateY(-3px); box-shadow: 0 5px 12px #22222209; }
}
@media (max-width: 700px) {
  .orbit-ring { inset: -2px -4px; }
  .orbit-ring.secondary { inset: 0 4px; }
  .orbit-track i { width: 7px; height: 7px; top: -3px; }
  .spark-one { top: -3px; right: 7px; font-size: 17px; }
  .spark-two { bottom: 8px; left: 6px; font-size: 12px; }
}

/* Business modules share the same depth, with status and reading kept still. */
.match-summary { display: grid; grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr) auto; gap: 20px; padding: 24px; background: linear-gradient(120deg, #fff3ae, #fffaf0); border: 1px solid #eedb83; box-shadow: inset 0 1px 0 #fff, 0 8px 24px #b89a0710; }
.match-summary > div { padding: 16px 20px; min-width: 0; border: 1px solid #fff; border-radius: 14px; background: #ffffff9c; }
.match-summary strong { overflow-wrap: anywhere; }
.match-summary > .icon { width: 42px; height: 42px; padding: 9px; border-radius: 50%; color: #806618; background: #ffdb41; box-shadow: 0 4px 12px #ae850021; }
.segmented { width: fit-content; max-width: 100%; padding: 5px; border: 1px solid #e9e8e2; border-radius: 14px; background: #eeefeb90; gap: 3px; }
.segmented button { border-radius: 10px; white-space: nowrap; transition: background .2s, box-shadow .2s; }
.segmented button.selected { background: #fff; color: #282617; box-shadow: 0 2px 7px #27220e12; }
.segmented button.selected span { background: #ffe371; color: #5e4c0e; }
.exchange-row { border-radius: 16px; border-left: 3px solid #dddeda; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease-out); }
.exchange-row[data-status="scheduled"], .exchange-row[data-status="learning"] { border-left-color: #edc124; }
.exchange-row[data-status="review"] { border-left-color: #c38b53; }
.exchange-row[data-status="completed"] { border-left-color: #72a080; }
.exchange-next { display: block; font-size: 11px; line-height: 1.7; color: #777971; margin-top: 9px; }
.row-progress { flex-shrink: 0; }
.mini-progress { height: 5px; }
.mini-progress i { border-radius: inherit; background: linear-gradient(90deg, #f7cf2c, #e5b500); transition: width .45s var(--ease-out); }
.exchange-row[data-status="completed"] .mini-progress i { background: #72a080; }
.lesson { position: relative; }
.lesson + .lesson { border-top: 0; }
.lesson:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: 57px; bottom: -16px; width: 2px; background: #eeeee8; }
.lesson.done:not(:last-child)::after { background: #cde1d0; }
.lesson-number { position: relative; z-index: 1; border: 1px solid #e6d799; background: #fff7d5; color: #796315; box-shadow: 0 0 0 5px white; }
.lesson.done .lesson-number { border-color: #bdd8c4; }
.lesson-main { padding-bottom: 8px; }
.profile-summary { background: radial-gradient(ellipse at 0 0, #fff2b0a0, transparent 65%), #fff; border-color: #e8e2cb; }
.profile-summary .avatar { box-shadow: 0 0 0 6px #fff, 0 7px 22px #6d501b18; }
.profile-skills { align-items: stretch; }
.profile-skills > div { border: 1px solid #ebe7d8; background: #fffdf6; border-radius: 14px; padding: 20px; }
.profile-skills > div:last-child { background: #f7f9f5; border-color: #e4e9df; }
.swap-large { align-self: center; }
.display-preferences { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 18px; }
.display-preferences summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 13px; color: #5a5c54; }
.display-preferences summary::-webkit-details-marker { display: none; }
.display-preferences summary .icon { width: 16px; height: 16px; transition: transform .2s; }
.display-preferences[open] summary .icon { transform: rotate(90deg); }
.display-preferences label { display: flex; gap: 10px; align-items: center; margin-top: 20px; font-size: 13px; cursor: pointer; }
.display-preferences input { accent-color: #a08213; width: 17px; height: 17px; }
.display-preferences p { font-size: 12px; color: var(--muted); margin: 8px 0 0 27px; }
.display-preferences + .demo-settings { margin-top: 20px; }
@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] .exchange-row:hover { transform: translateY(-3px); box-shadow: 0 10px 24px #3028190d; }
}
@media (max-width: 700px) {
  .match-summary { grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr); gap: 10px; padding: 16px; }
  .match-summary > div { padding: 13px 10px; }
  .match-summary > .icon { width: 30px; height: 30px; padding: 6px; }
  .match-summary > .btn { grid-column: 1 / -1; margin-left: 0; justify-self: end; }
  .profile-skills { grid-template-columns: 1fr; gap: 12px; }
  .profile-skills > div { padding: 16px; }
  .profile-skills .swap-large { display: none; }
  .exchange-next { max-width: 260px; }
  .segmented { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; }
  .segmented button { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 3px; min-width: 0; }
  .segmented button > span { min-width: 20px; }
}

html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="off"] .skill-card, html[data-motion="off"] .btn, html[data-motion="off"] .favorite { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@supports not (backdrop-filter: blur(1px)) {
  .topbar, .sidebar, .mobile-nav, .cover-copy, .favorite { background: #fffffff5; }
}