[hidden]{display:none!important}
/* .sn is also used by the old order step number. Isolate the topic label. */
.setb .sn{display:block;width:auto;height:auto;border-radius:0;background:transparent;color:var(--ink);margin:0;place-items:initial;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.setb{display:grid;grid-template-columns:42px minmax(0,1fr) 28px;min-height:92px;height:auto;align-items:center;gap:10px;padding:12px}
.setb .se{font-size:1.8rem;text-align:center;width:42px;line-height:1.25;overflow:visible;font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif}.setb .sn small{margin-top:5px;line-height:1.2}.setb .sp{width:28px;height:28px}
.sets{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:stretch}
.f21-menu{position:relative}.f21-menu>div{position:absolute;right:0;top:100%;z-index:50;min-width:250px;padding:12px;background:var(--panel);border:2px solid var(--line);border-radius:16px;box-shadow:0 10px 30px #0003}.f21-menu a{display:block;color:var(--ink);padding:8px;text-decoration:none}
.f21-bulk{margin-bottom:18px;padding:12px;border:2px dashed var(--line);border-radius:14px}.f21-bulk summary{cursor:pointer;font-weight:800}.f21-bulk textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:10px}
#f21-options{margin:12px 0}#f21-options a{color:var(--ink)}#f21-player{position:fixed;inset:0;z-index:1000;overflow:auto;background:var(--bg);padding:20px}#f21-player .study-card{max-width:680px;margin:24px auto;text-align:center;padding:24px;background:var(--panel);border:2px solid var(--line);border-radius:24px}#f21-player button{border:2px solid var(--line);background:var(--panel);border-radius:18px;padding:12px;margin:5px}#f21-player .emoji{font-size:100px}#f21-player .options{display:grid;gap:10px}#f21-player img{max-width:260px;max-height:280px}#f21-player progress{width:100%}.emoji-dialog{background:var(--panel);color:var(--ink);border:2px solid var(--line);border-radius:20px;width:min(680px,95vw)}.emoji-results{display:flex;flex-wrap:wrap;max-height:50vh;overflow:auto}.emoji-results button{font-size:30px;padding:8px;background:var(--bg);border:0;border-radius:10px;margin:4px}
@media(max-width:560px){.sets{grid-template-columns:repeat(2,minmax(0,1fr))}.setb{grid-template-columns:30px minmax(0,1fr);padding:10px;gap:7px;min-height:105px}.setb .se{font-size:1.7rem}.setb .sn{font-size:.9rem}.f21-menu>div{position:fixed;left:12px;right:12px;top:100px}.row{flex-wrap:wrap}.row>*{min-width:140px}header .tabs{flex-wrap:wrap}}
@media print{.f21-menu,#f21-player,.f21-bulk{display:none!important}}
.role-header{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.role-header h1{margin-right:auto}
.role-navigation{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.role-navigation>.tab,.role-menu>summary{white-space:nowrap}
.role-menu>summary{list-style:none;cursor:pointer}
.role-menu>summary::-webkit-details-marker{display:none}
.role-menu>summary::after{content:'⌄';margin-left:8px;font-size:.8em;opacity:.6}
.role-menu[open]>summary{border-color:var(--pink,#1f5bff)}
.role-menu>div{min-width:265px;max-width:min(340px,calc(100vw - 24px))}
.role-menu>div .tab,.role-menu>div .btn,.role-menu>div .go{display:block;width:100%;margin:4px 0;text-align:left;font-size:1rem;box-shadow:none}
.role-menu a:hover,.role-menu a:focus-visible{background:var(--line);border-radius:10px}
@media(max-width:760px){.role-header h1{flex:1}.role-navigation{order:3;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.role-navigation>.tab{grid-column:span 2}.role-menu>summary{width:100%;padding:10px 8px;text-align:center;font-size:.95rem}.role-menu>div{position:fixed;left:12px;right:12px;top:auto;max-width:none;min-width:0;max-height:65vh;overflow:auto}.role-header .background-theme-button{margin-left:auto}}
.role-navigation>.go{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:linear-gradient(110deg,#ff4f91,#ff8866);color:#fff;border:0;border-radius:999px;padding:14px 22px;font-weight:800;text-decoration:none;box-shadow:0 5px 0 #c43768,0 10px 22px #ff4f9126}
@media(max-width:760px){.role-navigation>.tab{grid-column:span 1}.role-navigation>.go{grid-column:span 2;padding:12px 16px}}
.custom-request .request-card-design{grid-column:1/-1;width:100%;min-width:0}.custom-request .request-card-design h3{font:inherit;font-weight:700;margin:0 0 12px}.custom-request .request-card-design>label{max-width:260px}.custom-request .request-face-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.custom-request .request-face-grid fieldset{min-width:0;border:1px solid var(--line);border-radius:14px;padding:14px;margin:0}.custom-request .request-face-grid legend{font:inherit;font-weight:700;padding:0 6px}.custom-request .request-face-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.custom-request .request-face-checks label{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;flex:none!important;margin:0!important;font:inherit!important}.custom-request .request-face-checks input[type=checkbox]{width:20px!important;height:20px!important;min-height:0!important;flex:0 0 20px;padding:0!important;margin:0!important;accent-color:#ff6592}.custom-request .request-face-grid details{margin-top:14px}.custom-request .request-face-grid summary{cursor:pointer;margin-bottom:10px;font:inherit}@media(max-width:650px){.custom-request .request-face-grid{grid-template-columns:1fr}}
/* The main navigation follows the same teacher-first order on every page. */
.role-navigation>.role-menu,.role-navigation>.tab{min-width:0}.role-navigation> .role-menu>summary{box-sizing:border-box}.role-menu>div button{white-space:normal}
@media(max-width:760px){.role-header .role-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}.role-navigation>.role-menu>summary,.role-navigation>.tab{width:100%;box-sizing:border-box;padding:10px 8px;white-space:normal;text-align:center}.role-navigation>.go{grid-column:1/-1}.role-navigation>.role-menu{width:100%}}
.role-menu[open]{z-index:1100}.role-menu>div{z-index:1101;background:var(--panel,#1c293d);isolation:isolate}
/* Canonical wordmark uses outlined Sora, independent of font loading. */
.role-header .brand-heading{min-width:0;max-width:100%;margin:0 auto 0 0;letter-spacing:normal;flex:0 1 380px}.role-header .brand-home{display:flex;flex-direction:column;align-items:flex-start;gap:7px;max-width:100%;text-decoration:none;text-align:left;padding:0;background:none;border:0;box-shadow:none;color:var(--ink);cursor:pointer}.role-header .brand-wordmark{display:block;width:270px;max-width:100%;height:auto;overflow:visible}.role-header .brand-app{fill:#6C9BFF}.role-header .brand-name{fill:#fff}.role-header .brand-tagline{display:block;max-width:380px;white-space:normal;font:500 1rem/1.35 'Baloo 2','Baloo 2 Fallback','Segoe UI',sans-serif;letter-spacing:normal;color:var(--ink)}[data-theme=light] .role-header .brand-app{fill:#1F5BFF}[data-theme=light] .role-header .brand-name{fill:#0B1F44}.role-header .brand-home:focus-visible{outline:3px solid #6C9BFF;outline-offset:6px;border-radius:6px}
@media(max-width:760px){.role-header .brand-heading{flex:1 1 100%;width:100%;margin:0}.role-header .brand-wordmark{width:250px}.role-header .brand-tagline{max-width:100%}.role-header .brand-home{width:100%}}

/* Keep the brand compact and let navigation read as one continuous bar. */
header.role-header{gap:24px;padding:18px 22px;border-radius:24px}
.role-header .brand-heading{flex:0 0 290px;margin-right:auto}
.role-header .brand-wordmark{width:240px}
.role-header .brand-home{gap:10px}
.role-header .brand-tagline{max-width:290px;color:var(--muted,#a6b6cd);line-height:1.4}
.role-header .brand-tagline>span{display:block}
.role-header .role-navigation{gap:6px}
.role-header .role-menu>summary{border:1px solid transparent;background:transparent;box-shadow:none;border-radius:12px;padding:12px 14px}
.role-header .role-menu>summary:hover,.role-header .role-menu[open]>summary{background:var(--line);border-color:var(--line)}
.role-header .role-navigation>.go{border-radius:16px;padding:12px 18px;box-shadow:0 3px 0 #c43768}
@media(min-width:761px) and (max-width:1350px){.role-header .brand-heading{flex-basis:100%}.role-header .brand-home{flex-direction:row;align-items:center;gap:28px}.role-header .role-navigation{width:100%;justify-content:space-between}}
@media(max-width:760px){header.role-header{padding:16px;gap:16px;border-radius:22px}.role-header .brand-heading{flex:1 1 100%}.role-header .brand-wordmark{width:220px}.role-header .brand-home{gap:9px}.role-header .brand-tagline{max-width:100%}.role-header .role-navigation{gap:8px}.role-header .role-menu>summary{padding:10px 8px;background:var(--panel);border-color:var(--line)}.role-header .role-navigation>.go{border-radius:14px}}

/* Desktop brand and navigation share a compact, balanced horizontal rhythm. */
@media(min-width:1351px){header.role-header{padding:14px 20px;gap:20px}.role-header .brand-heading{flex:0 1 455px}.role-header .brand-home{gap:8px}.role-header .brand-wordmark{width:215px}.role-header .brand-tagline{max-width:none;white-space:nowrap}.role-header .brand-tagline>span{display:inline}.role-header .role-navigation{gap:2px;margin-left:auto}.role-header .role-menu>summary{padding:10px 12px}.role-header .role-navigation>.go{padding:10px 16px;border-radius:14px;box-shadow:none}}
@media(min-width:761px) and (max-width:1350px){header.role-header{padding:14px 20px;gap:12px}.role-header .brand-home{justify-content:space-between;width:100%}.role-header .brand-tagline{max-width:none}.role-header .brand-tagline>span{display:inline}.role-header .brand-wordmark{width:215px}}
@media(max-width:760px){.role-header .role-menu{align-self:stretch}.role-header .role-menu>summary{height:100%;display:flex;align-items:center;justify-content:center}}

/* Light workspace uses the same blue as the wordmark. */
[data-theme=light] .role-header .brand-tagline{color:#53657e}
[data-theme=light] .role-header .role-navigation>.go,[data-theme=light] .creator-method-tabs .btn[aria-pressed=true],[data-theme=light] #v-create .pv .preview-card-actions #add,[data-theme=light] #mine #f21-cloud{background:#1F5BFF;color:#fff;border-color:transparent;box-shadow:0 3px 8px #1f5bff24}
[data-theme=light] #design-face-choices input,[data-theme=light] .extra-content-table input{accent-color:#1F5BFF}
[data-theme=light] .face-content-table tbody tr:has(input:checked){background:#1f5bff04}
[data-theme=light] .face-content-table td:has(input:checked){background:#1f5bff10}
[data-theme=light] #newcard #design-face-count{border-color:#b8caff}
[data-theme=light] #v-create .pv #pv{box-shadow:none}[data-theme=light] #v-create .pv #pv .card{box-shadow:0 4px 12px #16396414}

/* Use a crisp CSS chevron instead of a font-dependent dropdown glyph. */
.role-header .role-menu>summary{display:flex;align-items:center;justify-content:center;gap:10px}
.role-header .role-menu>summary::after{content:'';display:block;flex:0 0 6px;width:6px;height:6px;box-sizing:border-box;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;margin:0 0 3px 0;opacity:.6;transform:rotate(45deg);transition:transform .16s ease,opacity .16s ease}
.role-header .role-menu[open]>summary::after{transform:translateY(3px) rotate(225deg);opacity:1}
@media(prefers-reduced-motion:reduce){.role-header .role-menu>summary::after{transition:none}}

.role-header .role-navigation>[data-creator-method]{display:flex;align-items:center;justify-content:center;padding:10px 12px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-weight:800;text-decoration:none;box-shadow:none}.role-header .role-navigation>[data-creator-method]:hover{background:var(--line)}
@media(max-width:600px){.creator-method-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}

.site-page-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}