.classroom-colour-bar{display:flex;align-items:center;justify-content:center;gap:2px;padding:7px 26px;background:var(--paper);border-bottom:1px solid var(--line)}
.colour-choice{width:40px;min-width:40px;height:40px;border:0;background:transparent;padding:8px;display:grid;place-items:center;border-radius:50%;cursor:pointer;position:relative}
.colour-choice>span{width:23px;height:23px;border-radius:50%;box-shadow:inset 0 0 0 1px #00000014;display:block}
.colour-green>span{background:#194f50}.colour-navy>span{background:#344966}.colour-plum>span{background:#65455d}.colour-rose>span{background:#8c4960}.colour-cocoa>span{background:#645046}.colour-mixed>span{background:conic-gradient(#f3cbc6 0 25%,#cee6d9 25% 50%,#e0d7f2 50% 75%,#f1d251 75%)}
.colour-choice[aria-pressed=true]:after{content:'';position:absolute;inset:4px;border:2px solid var(--ink);border-radius:50%}.colour-choice:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.colour-choice:hover{background:#ffffff90}
[data-classroom-theme]{color:var(--ink)}
[data-classroom-theme=mixed] :is(.student-topbar,.admin-topbar){background:linear-gradient(110deg,#f3cbc6 0%,#cee6d9 35%,#e0d7f2 70%,#f5e8b1 100%)!important;color:var(--ink)}
[data-classroom-theme=mixed] :is(.student-topbar,.admin-topbar) :is(button,.mobile-menu-toggle){color:var(--ink);background:#ffffff45}
[data-classroom-theme=mixed] .mobile-menu{background:#fffaf5;color:var(--ink);border-color:var(--line)}
[data-classroom-theme=mixed] .mobile-menu header :is(strong,small,button){color:var(--ink)}
[data-classroom-theme=mixed] .mobile-menu header,[data-classroom-theme=mixed] .mobile-menu footer{border-color:var(--line)}
[data-classroom-theme=mixed] .mobile-menu nav button{color:var(--ink);background:var(--rose)}
[data-classroom-theme=mixed] .mobile-menu nav button:nth-child(4n+2){background:var(--mint)}
[data-classroom-theme=mixed] .mobile-menu nav button:nth-child(4n+3){background:var(--lilac)}
[data-classroom-theme=mixed] .mobile-menu nav button:nth-child(4n){background:#f5e8b1}
[data-classroom-theme=mixed] .mobile-menu nav button[aria-current]{outline:2px solid var(--ink);outline-offset:-2px}
[data-classroom-theme=mixed] .mobile-menu footer button{color:var(--ink);background:#fff;border-color:var(--line)}
@media(max-width:600px){.classroom-colour-bar{justify-content:center;padding:5px 12px}.colour-choice{width:44px;min-width:44px;height:44px}}
@media(prefers-reduced-motion:no-preference){[data-classroom-theme] :is(.student-topbar,.admin-topbar,.student-button){transition:background-color .18s,color .18s}}