:root{
  --ink:#29304f;--muted:#737a96;--paper:#fffaf4;--panel:#fffefc;--line:#ebe6ef;
  --violet:#806ee8;--mint:#45d5ae;--navy:#38406c;--pink:#ff8ea6;--sun:#ffc857;--sky:#6dc8f5;
}
body{background:linear-gradient(180deg,#fffaf4 0,#f8fbff 48%,#fff9fd 100%)}
.topbar{background:#fffefaee;backdrop-filter:blur(14px);border-bottom-color:#eee5ef}
.brandmark{background:linear-gradient(145deg,#7668df,#9b88f3);color:#fff;box-shadow:0 7px 18px #7d6ce43b;transform:rotate(-4deg)}
.brand b{color:#3c4263}.topbar nav button.active:after{background:linear-gradient(90deg,var(--pink),var(--violet),var(--sky))}
.profile span{background:linear-gradient(145deg,#fff0aa,#ffd36d);color:#79580b;box-shadow:0 4px 12px #f1c84b38}
.hero{position:relative;background:linear-gradient(125deg,#fff7df 0%,#f5efff 48%,#e8fbff 100%);color:var(--ink)}
.hero:before,.hero:after{position:absolute;font-family:Georgia,serif;color:#ffffffb8;filter:drop-shadow(0 5px 14px #7766b31c);pointer-events:none}
.hero:before{content:'♪';font-size:130px;left:48%;top:18px;transform:rotate(-14deg)}
.hero:after{content:'♫';font-size:94px;right:4%;bottom:8px;transform:rotate(12deg)}
.music-doodles{position:absolute;inset:0;pointer-events:none}.doodle{position:absolute;display:block;filter:drop-shadow(0 7px 10px #655b8b18);animation:doodleFloat 4.5s ease-in-out infinite}.doodle.staff{right:3%;top:4%;font-size:28px;letter-spacing:3px;color:#7668c4;transform:rotate(7deg)}.doodle.brush{left:7%;bottom:8%;font-size:38px;transform:rotate(-28deg)}.doodle.s1{right:14%;top:28%;font-size:30px;color:#ffc24f}.doodle.s2{left:16%;top:17%;font-size:18px;color:#ff8da4;animation-delay:-1.2s}.doodle.heart{right:3%;top:48%;font-size:42px;color:#f07a9c;transform:rotate(12deg)}.doodle.dynamic{left:5%;top:48%;font:italic 700 21px Georgia,serif;color:#53b99f;letter-spacing:4px}.doodle.dots{right:20%;bottom:3%;font-size:22px;color:#6eb9dc;letter-spacing:8px;animation-delay:-2s}@keyframes doodleFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
.hero h1 em{background:linear-gradient(90deg,#e86d93,#7c6ce8,#35a7d7);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero p{color:#6c728d}.primary{background:linear-gradient(135deg,#8171e9,#9d75e8);box-shadow:0 7px 18px #7866d82d;transition:.2s transform,.2s box-shadow}.primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px #7866d83d}
.orbit{border-color:#bcb4e4}.o1{background:#ffffff42}.note.n1{color:#f37d9c}.note.n2{color:#50bde7}.glass-card{background:#ffffffa6;border-color:#fff;color:var(--ink);box-shadow:0 20px 50px #7771a723}.glass-card small{color:#8b86a4}.glass-card span{color:#2dac8b}
.manifest{border:1px solid #f1e9ef;box-shadow:0 14px 40px #5d568a12}.manifest div:nth-child(1) b{color:#f39aae}.manifest div:nth-child(3) b{color:#65cdb5}.manifest div:nth-child(5) b{color:#7fbfe5}
.student-steps span{font-size:15px}.student-steps small{margin-top:2px}.student-steps i{color:#b9b1c8;font-size:18px}
.work-card{border-color:#eee7ed;box-shadow:0 9px 28px #5d568a0c;transition:.25s transform,.25s box-shadow}.work-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px #5d568a19}.cover{background:linear-gradient(145deg,#7971db,#a68fec)}.amber .cover,.package-icon.amber{background:linear-gradient(145deg,#ffc15c,#f58e6b)}.cover:after{content:'· ♪ · ♫ ·';position:absolute;left:20px;right:20px;bottom:18px;color:#ffffffb8;letter-spacing:8px;font-style:normal}.cover i{color:#fff;text-shadow:8px 8px 0 #ff94ae66}.tags span:nth-child(3n+1){background:#fff0f3;color:#c85d78}.tags span:nth-child(3n+2){background:#eafbf6;color:#218d75}.tags span:nth-child(3n){background:#ebf6ff;color:#347da8}
.phasebar-wrap{background:#fffefbe8}.journey-label{color:#968eaa}.phasebar-wrap .phase.current{background:linear-gradient(135deg,#fff1f5,#f2efff);box-shadow:inset 0 0 0 1px #eee0ef}.phasebar-wrap .phase.current span{background:linear-gradient(145deg,#ff89a4,#8d78e6)}.phase.done span{background:#dcf8ed;color:#238b73}.stage-banner{background:linear-gradient(110deg,#fff4c9,#f5efff 52%,#e7fbff);border-color:#eee4de;box-shadow:0 6px 20px #6f628512}.stage-number{background:linear-gradient(135deg,#ff809e,#ed9a74)}.stage-banner em{color:#278a72;box-shadow:0 3px 10px #756b8c10}
.taskline{background:linear-gradient(100deg,#4d557e,#6b619d);position:relative;overflow:hidden}.taskline:after{content:'♪  ·  ♫';position:absolute;right:70px;color:#ffffff17;font-size:28px;letter-spacing:10px}.player,.trace-panel,.impression,.history,.evidence-card{background:#fffefc}.play{background:linear-gradient(145deg,#ff819e,#8b74e5);box-shadow:0 5px 14px #8c75df42}.timeline{background:#eeeaf0}.progress{background:linear-gradient(90deg,#ff8da4,#f9c859,#45d5ae,#6bbff0,#8873e7)}
.audio-notice{background:#fff9df;border-color:#f5e5a9;color:#96702b}.listen-visual{background:radial-gradient(circle at center,#fff 0,#f5edff 48%,#eafcff 100%)}.p1{border-color:#f7a3b7}.p2{border-color:#8ad8ee}.tool{border-color:#ebe5ee}.tool b{color:#7368d6}.tool:nth-child(2n) b{color:#e47391}.tool.active{border-color:#8c7de1;background:linear-gradient(135deg,#fff2f6,#f0efff);box-shadow:0 4px 12px #7064b914}
.paint-options{background:#fffaf5;border:1px solid #f0e8e7;border-radius:10px;padding:11px;margin-top:15px}.mark.active{border-color:#ff8da4;background:#fff0f4;color:#c95775}.custom-color{background:#fff}.trace-area{background:linear-gradient(180deg,#fff,#fbfdff)}#traceCanvas{background-color:#fff;background-image:radial-gradient(#dcd8ec 1px,transparent 1px);background-size:18px 18px;border-color:#dcd4e6}.stamp{filter:drop-shadow(0 3px 3px #4e477b22)}
.hint{background:linear-gradient(110deg,#e9fcf6,#eef8ff);border-color:#cfeee5}.hint>span{background:linear-gradient(145deg,#4bc8a9,#6a8cde);color:#fff}.gate{background:linear-gradient(145deg,#4d557f,#5f4f89)}.ring:after{background:#514d7b}.aside-title button{color:#dd6687}.evidence-card.valid{border-left-color:#43d1a9}.evidence-card.pending{border-left-color:#ffc857}
.teacher-hero{background:linear-gradient(120deg,#fff1c4,#f2edff 55%,#e5faff);color:var(--ink);position:relative;overflow:hidden}.teacher-hero:after{content:'♪ ♫ ♪';position:absolute;right:7%;bottom:-24px;font-size:72px;color:#ffffff9c;letter-spacing:22px}.teacher-actions button{border-color:#c8bee0;color:var(--ink);background:#ffffff8c}.teacher-actions .primary{color:#fff}.stats,.teacher-grid article{background:#fffefc;border-color:#eee7ed}.package-icon{background:linear-gradient(145deg,#7a71da,#a88fe7)}
dialog{background:#fffdfa}dialog::backdrop{background:#504c7199}.eyebrow{color:#806ee8}.eyebrow.mint{color:#20a887}
@media(max-width:600px){.hero{padding-top:45px}.hero:before{left:auto;right:4%;font-size:75px}.stage-banner{background:linear-gradient(120deg,#fff5d7,#f2efff)}.doodle.staff,.doodle.dynamic{display:none}.doodle.brush{left:auto;right:12%;bottom:3%}.doodle.heart{right:5%;top:22%}}