@font-face{font-family:"Campton";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/campton-book.woff") format("woff")}
@font-face{font-family:"Campton";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/campton-medium.woff") format("woff")}
@font-face{font-family:"Campton";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/campton-semibold.woff") format("woff")}
@font-face{font-family:"Campton";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/campton-bold.woff") format("woff")}
@font-face{font-family:"Campton";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/campton-extrabold.woff") format("woff")}
@font-face{font-family:"Campton";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/campton-book-italic.woff") format("woff")}
@font-face{font-family:"Campton";font-style:italic;font-weight:700;font-display:swap;src:url("/fonts/campton-bold-italic.woff") format("woff")}
:root{--font:"Campton",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--ink:#082935;--blue:#13638b;--light-blue:#48b0e4;--orange:#e98324;--pale:#edf7fd;--paper:#f6fafd;--line:#cfe4ef;--muted:#466877;--orange-pale:#fff3e8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--font)}header{border-top:4px solid var(--light-blue);max-width:1240px;margin:auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}.brand{font-size:29px;font-weight:800;letter-spacing:-1.5px;color:var(--ink);line-height:1}.brand span{color:var(--blue)}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:9px}nav{display:flex;gap:24px;font-size:14px}main{max-width:1180px;margin:0 auto;padding:46px 24px;min-height:76vh}footer{text-align:center;color:var(--muted);font-size:12px;padding:20px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;text-transform:uppercase;color:var(--blue)}h1{font-size:clamp(32px,5vw,54px);line-height:1.12;letter-spacing:-1.8px;margin:15px 0 22px}h2{font-size:25px;line-height:1.3;letter-spacing:-.5px}h3{margin:0 0 8px}p{margin:12px 0}.muted{color:var(--muted)}.hero{max-width:500px;margin:30px auto}.card{background:white;border:1px solid var(--line);border-radius:18px;padding:26px;margin-bottom:20px}.hero .card{margin-top:30px;box-shadow:0 15px 50px #0829350d}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.between{justify-content:space-between}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.stack>*{margin-bottom:12px}label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}input,textarea,select{width:100%;padding:12px 14px;border:1px solid #b8d4e3;border-radius:9px;background:#fff;color:var(--ink);font:inherit}textarea{min-height:94px;resize:vertical}input:focus,textarea:focus,select:focus{outline:3px solid #48b0e440;border-color:var(--blue)}button,.button{border:0;border-radius:9px;padding:12px 19px;font:600 14px/1.5 var(--font);cursor:pointer;background:var(--blue);color:white;display:inline-block;text-align:center}button:hover,.button:hover{filter:brightness(.94);text-decoration:none}button:disabled{opacity:.5;cursor:default}.secondary{background:var(--pale);color:var(--ink)}.danger{background:var(--orange-pale);color:var(--ink)}.full{width:100%}.tabs{display:flex;gap:8px;margin:25px 0}.tabs button{background:transparent;color:var(--muted)}.tabs button.active{background:var(--ink);color:white}.badge{display:inline-block;font-size:12px;border-radius:30px;background:var(--pale);padding:4px 10px;color:var(--blue)}.list-item{border-top:1px solid var(--line);padding:18px 0}.list-item:first-child{border-top:0}.list-item p{margin:6px 0}.tiny{font-size:12px}.question-select{display:flex;align-items:flex-start;gap:12px;margin:0;border-bottom:1px solid var(--line);padding:12px 0;font-weight:400}.question-select input{width:20px;margin-top:3px}.option-edit{display:flex;gap:10px;align-items:center;margin:10px 0}.option-edit input[type=radio]{width:22px;flex-shrink:0}.code{font-size:clamp(40px,9vw,82px);font-weight:800;letter-spacing:10px;line-height:1.2}.lobby{text-align:center;max-width:800px;margin:20px auto}.stats{display:flex;justify-content:center;gap:30px;margin:26px 0}.stats strong{font-size:30px;display:block}.stats span{font-size:13px;color:var(--muted)}.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:25px 0}.answer{background:white;border:2px solid var(--line);text-align:left;color:var(--ink);padding:20px;position:relative;overflow:hidden;min-height:80px;font-size:18px}.answer b{display:inline-grid;place-items:center;border-radius:7px;background:var(--pale);width:32px;height:32px;margin-right:10px}.answer.selected{border-color:var(--blue);background:var(--pale)}.answer.correct{border-color:var(--blue);background:var(--pale)}.answer.wrong{border-color:var(--orange);background:var(--orange-pale)}.bar{height:6px;background:var(--line);border-radius:6px;margin-top:12px}.bar span{display:block;height:100%;background:var(--blue);border-radius:6px}.question-image{max-height:400px;max-width:100%;object-fit:contain;display:block;margin:20px auto;border-radius:10px}.notice{border-left:4px solid var(--blue);background:var(--pale);padding:16px 20px;border-radius:0 9px 9px 0;margin:20px 0}.session-head{margin-bottom:25px}.session-head h1{font-size:30px}.controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.names{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:20px}.present h2{font-size:clamp(28px,4vw,48px)}.present .answer{font-size:23px}.present header{display:none}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;background:var(--ink);color:white;border-radius:10px;padding:14px 22px;z-index:10;display:none}.status{font-size:13px;color:var(--muted)}.join-code{font-size:26px;letter-spacing:6px;text-align:center}dialog{border:0;border-radius:16px;max-width:500px;padding:25px}button.link{background:none;color:var(--blue);padding:5px}.empty{padding:30px;text-align:center;color:var(--muted)}@media(max-width:700px){header{padding:20px}nav{gap:16px}main{padding:28px 18px}.grid,.answers{grid-template-columns:1fr}.card{padding:20px}.hero{margin:10px auto}h1{letter-spacing:-1px}.code{letter-spacing:6px}.answer{font-size:16px}.stats{gap:24px}.present .answer{font-size:18px}}
.answer:disabled{opacity:1;cursor:default}.answer:disabled:hover{filter:none}.question-select{flex:1;min-width:180px}.question-select span{overflow-wrap:anywhere}

/* SonoSkills brand accents; use dark text on light blue and orange for contrast. */
#join button[type=submit],#login button[type=submit],.controls button:not(.secondary){background:var(--orange);color:var(--ink)}
.code{color:var(--blue)}
.stats strong{color:var(--blue)}
.answer.selected b,.answer.correct b{background:var(--blue);color:white}
.answer.wrong b{background:var(--orange);color:var(--ink)}
.bar span{background:var(--light-blue)}
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}
button:focus-visible,.button:focus-visible,a:focus-visible{outline:3px solid var(--light-blue);outline-offset:3px}
::selection{background:var(--light-blue);color:var(--ink)}

/* Clear action hierarchy and readable quiz feedback. */
#newquiz,#newq,#startquiz{background:var(--orange);color:var(--ink)}
button.secondary,.button.secondary{background:#eef3f6;color:var(--ink)}
button.danger{background:#fff1f2;color:#9f1239}
button:not(:disabled):hover,.button:hover{filter:brightness(.96)}
button:disabled:hover{filter:none}
.tabs button.active{background:var(--ink);color:#fff}
.answer{background:#fff;color:var(--ink)}
.answer.selected{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.answer.selected b{background:var(--ink);color:#fff}
.answer.correct{background:#dcfce7;border-color:#15803d;color:#14532d}
.answer.correct b{background:#15803d;color:#fff}
.answer.correct .bar{background:#bbf7d0}
.answer.correct .bar span{background:#15803d}
.answer.wrong{background:#fee2e2;border-color:#b91c1c;color:#7f1d1d}
.answer.wrong b{background:#b91c1c;color:#fff}
.answer.wrong .bar{background:#fecaca}
.answer.wrong .bar span{background:#b91c1c}
.notice.correct-answer{background:#dcfce7;border-color:#15803d;color:#14532d}

.quiz-title{margin-top:24px}.quiz-title .row input{flex:1;min-width:200px}.question-thumbnail{display:block;max-width:180px;max-height:120px;object-fit:contain;margin:12px 0;border-radius:8px}.list-item h3{margin-top:16px}.question-thumbnail,.question-image{background:#fff}[hidden]{display:none!important}


/* Presentation controls remain available in full screen. */
body.present>header,body.present>footer{display:none}
.present main{max-width:1440px;padding-top:24px;padding-bottom:110px}
.present .session-head{margin-bottom:16px}
.present .controls{position:sticky;bottom:0;z-index:2;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 -5px 20px #0829350d}
:fullscreen{background:var(--paper)}


/* Timed questions and final rankings. */
.countdown{display:inline-block;min-width:54px;padding:5px 10px;border-radius:8px;background:var(--pale);color:var(--ink);font-variant-numeric:tabular-nums;font-size:22px}
.countdown.urgent{background:#fee2e2;color:#7f1d1d}
.table-scroll{overflow-x:auto}.leaderboard table{width:100%;border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums}
.leaderboard th,.leaderboard td{padding:14px;border-bottom:1px solid var(--line)}
.leaderboard thead{background:var(--pale)}.leaderboard .winner{background:#dcfce7;color:#14532d}
.leaderboard .is-you th{font-weight:800;text-decoration:underline;text-underline-offset:4px}
.names .badge{font-size:17px;padding:8px 16px}.present .leaderboard{font-size:22px}

/* Account management adapts to smaller instructor devices. */
.tabs{flex-wrap:wrap}#userform,#changepassword{max-width:680px}#userform .row,#changepassword button{margin-top:20px}

/* Source text and translations remain aligned on large screens. */
.language-tools{margin-top:20px}.language-tools .row select{flex:1;min-width:150px;width:auto}
.translation-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}.translation-question{padding:24px 0;border-top:1px solid var(--line);margin-top:24px}.translation-source{background:var(--paper);padding:18px;border-radius:10px;overflow-wrap:anywhere;white-space:pre-wrap}.translation-status.ready{background:#dcfce7;color:#14532d}.translation-status.review_needed{background:#fff3e8;color:#7c3a06}
#sessionlanguage-dialog::backdrop{background:#08293588}#sessionlanguage-dialog .row{margin-top:20px}#translationform>.row{position:sticky;bottom:0;padding:14px;background:white;border-top:1px solid var(--line)}
@media(max-width:700px){.translation-pair{grid-template-columns:1fr}.translation-source{font-size:14px}}

/* SonoHolic welcome mascot */
.hero{position:relative;isolation:isolate}
.sonoholic-mascot{position:absolute;width:clamp(180px,32vw,390px);height:auto;left:calc(100% + 30px);top:0;pointer-events:none;filter:drop-shadow(0 12px 20px rgba(8,41,53,.12))}
@media(max-width:950px){.sonoholic-mascot{position:relative;display:block;width:min(220px,58vw);left:auto;top:auto;margin:0 auto 12px}}

/* Calm, legible system typography for the administration interface only. */
body:has(#workspace){--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
body:has(#workspace) .brand{font-family:"Campton",system-ui,sans-serif}

/* Scannable quiz management table */
.quiz-table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:14px;margin-top:20px}
.quiz-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.quiz-table th{background:#f0f6fa;color:#466877;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:13px 18px;white-space:nowrap}
.quiz-table td{padding:14px 18px;border-top:1px solid var(--line);vertical-align:middle}
.quiz-table tbody tr:hover{background:#f8fbfd}
.quiz-table-title{font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.quiz-table .tiny{margin-top:3px}
.quiz-sort{border:0;background:transparent;color:inherit;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.quiz-category{display:inline-block;border-radius:7px;background:#edf4f8;padding:5px 9px;font-size:12px;white-space:nowrap}
.quiz-flags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.quiz-flag{position:relative;font-size:22px;line-height:1.3;cursor:help}
.quiz-flag-pending{opacity:.5}
.quiz-flag-dot{position:absolute;right:-4px;bottom:-7px;color:#b45309;font-size:18px;font-weight:800}
.quiz-actions-head{text-align:right}
.quiz-table-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;white-space:nowrap}
.quiz-table-actions button{width:auto;padding:9px 13px;font-size:13px}
.quiz-table-actions .quiz-edit{font-size:20px;min-width:40px;padding:5px 10px}
@media(max-width:650px){.quiz-table-wrap{border:0;background:transparent;overflow:visible}.quiz-table,.quiz-table tbody,.quiz-table tr,.quiz-table td{display:block;width:100%}.quiz-table thead{display:none}.quiz-table tr{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:10px 14px}.quiz-table td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border:0;text-align:right}.quiz-table td:first-child{display:block;text-align:left}.quiz-table td:not(:first-child):before{content:attr(data-label);font-size:12px;color:var(--muted);font-weight:600}.quiz-table-actions{flex-wrap:wrap}.quiz-table td:last-child{align-items:center}}

/* Quiz editor sections and language management */
.quiz-editor-heading{padding:0 0 20px}.quiz-editor-heading .eyebrow{margin-top:20px}.quiz-editor-heading h2{margin:8px 0 4px;font-size:clamp(23px,3vw,32px)}.quiz-editor-heading p{margin:0 0 8px}.quiz-editor-flags{display:flex;gap:8px;font-size:22px}
.quiz-editor-tabs{display:flex;gap:6px;margin:8px 0 24px;border-bottom:1px solid var(--line);overflow-x:auto}
.quiz-editor-tabs button{border:0;border-radius:9px 9px 0 0;background:transparent;color:var(--muted);padding:12px 20px;white-space:nowrap;font-weight:650;cursor:pointer}
.quiz-editor-tabs button.active{background:#e8f4fb;color:var(--blue);box-shadow:inset 0 -3px var(--blue)}
.quiz-language-list{border:1px solid var(--line);border-radius:12px;margin-top:20px;overflow:hidden}
.quiz-language-row{display:flex;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line)}.quiz-language-row:last-child{border-bottom:0}.quiz-language-flag{font-size:30px}.quiz-language-name{flex:1;min-width:0}.quiz-language-row button{white-space:nowrap}
#addlanguagepanel{margin-top:20px;padding:20px;background:var(--paper);border-radius:12px}#addlanguagepanel[hidden]{display:none}#addlanguagepanel .row select{width:auto;min-width:180px;flex:1}
.quiz-danger-zone{margin-top:24px;border-color:#f4c5c9}.quiz-danger-zone h3{color:#a41c35}
@media(max-width:650px){.quiz-language-row{flex-wrap:wrap;gap:10px}.quiz-language-row .quiz-language-name{flex-basis:55%}.quiz-language-row button{margin-left:auto}.quiz-editor-tabs button{flex:1;padding:12px 10px}}

/* QR code in the instructor and presentation lobbies */
.session-join-panel{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,70px);flex-wrap:wrap;margin:24px auto}.session-qr{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:650}.session-qr img{width:clamp(160px,20vw,250px);height:auto;aspect-ratio:1;background:white;border:10px solid white;border-radius:14px;box-shadow:0 4px 24px #0829351a}.session-join-code{display:flex;flex-direction:column;align-items:center;gap:14px}.session-join-code .code{margin:0}@media(max-width:600px){.session-join-panel{gap:16px}.session-qr img{width:190px}}

/* Two clearly separated ways to join a live quiz */
.lobby-subtitle{text-align:center;margin:8px 0 20px}
.session-join-options{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:14px;margin:20px auto 26px;max-width:920px}
.session-join-method{background:#f4f8fa;border:1px solid #dceaf0;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 16px;min-width:0;text-align:center}
.session-join-method h3{font-size:clamp(18px,2vw,23px);margin:0 0 5px}
.session-join-method p{margin:0}
.session-qr-image{width:clamp(180px,20vw,245px);height:auto;aspect-ratio:1;display:block;background:#fff;padding:12px;border-radius:14px;box-shadow:0 3px 14px #08293515}
.session-join-url{font-weight:750;font-size:clamp(16px,1.8vw,24px);overflow-wrap:anywhere;color:#12658c}
.session-access-code{font-size:clamp(36px,5vw,64px)!important;letter-spacing:.09em;line-height:1.1;margin:2px 0 8px!important}
.session-join-divider{display:flex;align-items:center;justify-content:center;position:relative;color:#527387;font-weight:800;font-size:15px}
.session-join-divider:before{content:"";position:absolute;width:1px;height:100%;background:#dceaf0;z-index:0}
.session-join-divider span{position:relative;z-index:1;padding:12px 6px;border-radius:30px;background:#fff}
@media(max-width:680px){.session-join-options{grid-template-columns:minmax(0,1fr);gap:10px}.session-join-method{padding:20px 12px}.session-join-divider:before{width:100%;height:1px}.session-join-divider span{padding:7px 14px}.session-qr-image{width:205px}.session-access-code{font-size:46px!important}}

/* Updated SonoQuiz identity */
.brand-logo{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;text-decoration:none}.brand-logo img{display:block;width:clamp(170px,17vw,225px);height:auto;object-fit:contain}.brand-logo img[hidden],.brand-logo-fallback[hidden]{display:none}.brand-logo .brand-logo-fallback{font:800 32px/1 "Campton",system-ui,sans-serif;color:var(--ink);letter-spacing:-1.4px}.brand-logo .brand-logo-fallback span{color:var(--blue)}.brand-logo small{display:block;letter-spacing:.2em;font-size:10px;font-weight:800;color:var(--ink);margin-top:4px}

/* Primary orange calls to action: white uppercase labels */
#join button[type="submit"],.hero button[type="submit"]{color:#fff!important;text-transform:uppercase;font-weight:800;letter-spacing:.035em}

/* Compact quiz question management */
.question-list-card{padding:0;overflow:hidden}
.question-table{width:100%}
.question-table-head,.question-table-row{display:grid;grid-template-columns:48px minmax(0,1fr) 135px 176px;align-items:center;gap:12px;padding:12px 18px}
.question-table-head{background:#f0f7fb;color:var(--muted);font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)}
.question-table-head span:last-child{text-align:right}
.question-table-row{min-height:72px;border-bottom:1px solid var(--line)}
.question-table-row:last-child{border-bottom:0}
.question-table-row:hover{background:#f8fbfd}
.question-row-number{font-weight:700;color:var(--blue);font-size:13px}
.question-row-content{display:flex;flex-direction:column;gap:4px;min-width:0}
.question-row-content strong{font-size:14px;line-height:1.4;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.question-row-meta{font-size:11px;color:var(--muted)}
.question-row-type{font-size:12px;color:var(--muted)}
.question-row-actions{display:flex;justify-content:flex-end;gap:6px}
.question-row-actions .icon-button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;padding:0;border-radius:9px;font-size:19px;line-height:1;background:#edf4f7;color:var(--ink)}
.question-row-actions .question-remove-button{color:#b32945;background:#fff0f2}
.question-row-actions .icon-button:hover{filter:brightness(.93)}
@media(max-width:760px){.question-table-head{display:none}.question-table-row{grid-template-columns:28px minmax(0,1fr);gap:5px 10px;padding:12px}.question-row-content strong{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.question-row-type{grid-column:2;font-size:11px}.question-row-actions{grid-column:2;justify-content:flex-start;margin-top:5px}.question-row-actions .icon-button{width:36px;height:36px}}

/* Optional explanation imagery */
.explanation-image-editor{margin:18px 0 24px;padding:18px;border:1px solid var(--line);border-radius:12px;background:#f8fbfd}
.explanation-image-editor>label:first-child{margin-top:0;font-weight:750}
.explanation-image-editor .question-image{max-width:min(100%,360px);max-height:240px;object-fit:contain;display:block;margin:12px 0}
.explanation-image-editor [hidden]{display:none!important}
.explanation-reveal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:20px;margin-top:16px}
.explanation-reveal.image-only{display:flex;justify-content:center}
.explanation-reveal-text p{white-space:pre-line;margin:0}
.explanation-image-link{display:flex;justify-content:center;align-items:center;min-width:0}
.explanation-reveal-image{display:block;max-width:100%;width:auto;height:auto;max-height:min(45vh,440px);object-fit:contain;border-radius:10px;background:#fff}
.explanation-reveal.image-only .explanation-reveal-text{display:none}
.explanation-reveal.image-only .explanation-reveal-image{max-height:min(55vh,560px)}
@media(max-width:700px){.explanation-reveal{grid-template-columns:minmax(0,1fr)}.explanation-reveal-image{max-height:38vh}}

/* Targeted translation controls */
.translation-ai-actions{flex-wrap:wrap;gap:10px;margin:14px 0 8px}.translation-question>.row.between{gap:12px;flex-wrap:wrap;align-items:center}.translation-question>.row.between .row{gap:9px;flex-wrap:wrap}.translation-question [data-translate-one]{font-size:13px;padding:9px 12px}.translation-question-status{white-space:nowrap}