.csp{max-width:1440px;margin:32px auto;color:#192235;font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.csp *{box-sizing:border-box}.csp .csp-app{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start}.csp .csp-sidebar{background:#f7f9fc;border:1px solid #d8e1ef;border-radius:16px;padding:18px}.csp .csp-section{background:#fff;border:1px solid #dce4f1;border-radius:13px;padding:20px;margin-bottom:24px}.csp .csp-section h2{font-size:21px;line-height:1.5;margin:8px 0 0;color:#30343b}.csp .csp-muted{font-size:14px;color:#6a7a92;margin:0}.csp .csp-list-label{font-size:13px;color:#687b96;margin:26px 0 12px}.csp .csp-questions{display:flex;flex-direction:column;gap:5px;padding-bottom:24px;border-bottom:1px solid #dce4ef}.csp button{font:inherit;cursor:pointer;border:1px solid #bdd0ec;border-radius:9px;background:#edf4ff;color:#255b9e;padding:10px 16px}.csp .csp-questions button{background:transparent;border:0;text-align:left;color:#41516a;width:100%;overflow-wrap:anywhere}.csp .csp-questions button[aria-current=true]{background:#e3eeff;color:#225a9f;font-weight:700}.csp button:hover:not(:disabled){background:#dceaff}.csp button:disabled{opacity:.5;cursor:default}.csp button:focus-visible,.csp select:focus-visible{outline:3px solid #448ddd;outline-offset:3px}.csp select{width:100%;font:inherit;font-size:13px;padding:9px;border:1px solid #d8e1ef;border-radius:7px;background:white;color:#344763}.csp .csp-main{border:1px solid #d8e1ef;border-radius:13px;overflow:hidden;background:white;min-width:0}.csp .csp-header{background:#112d50;color:white;padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px}.csp .csp-eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:#b8cdef;margin:0 0 4px}.csp .csp-header h2{font-size:20px;line-height:1.4;color:#fff;margin:0;overflow-wrap:anywhere}.csp .csp-step{white-space:nowrap;font-size:16px}.csp .csp-content{padding:clamp(24px,4vw,64px)}.csp .csp-kicker{letter-spacing:2px;font-size:13px;font-weight:700;color:#2d61a9;margin:0 0 16px}.csp .csp-prompt{white-space:pre-wrap;font-size:clamp(21px,2.2vw,29px);line-height:1.55;font-weight:650;color:#192235;margin:0 0 24px}.csp img{display:block;max-width:100%;max-height:480px;object-fit:contain;margin:20px auto}.csp .csp-timer{background:#f1f5fd;border-radius:13px;padding:24px 28px;margin:28px 0 18px}.csp .csp-timer h3{font-size:22px;margin:0;color:#233c61}.csp .csp-clock{font-size:52px;font-weight:700;color:#245fa8;font-variant-numeric:tabular-nums;line-height:1.4}.csp progress{display:block;width:100%;height:12px;margin-top:12px;accent-color:#2c73bf}.csp[data-phase=recording] .csp-timer h3::before{content:'●';color:#db3b4b;margin-right:10px}.csp[data-phase=recording] progress{accent-color:#db3b4b}.csp .csp-controls,.csp .csp-choices{display:flex;gap:10px;flex-wrap:wrap}.csp .csp-note{font-size:13px;color:#6a7a92;margin-top:22px}.csp .csp-result{padding:20px;background:#f1f5fd;border-radius:12px;margin-top:18px}.csp .csp-result h3{font-size:17px;margin:0 0 12px}.csp audio{display:block;width:100%;margin:12px 0}.csp a{color:#255b9e}.csp [hidden]{display:none!important}@media(max-width:760px){.csp .csp-app{grid-template-columns:1fr;gap:18px}.csp .csp-questions{max-height:220px;overflow:auto}.csp .csp-section{margin-bottom:12px;padding:14px}.csp .csp-list-label{margin:14px 0 8px}.csp .csp-header{padding:18px;align-items:flex-start;flex-direction:column;gap:8px}.csp .csp-content{padding:22px}.csp .csp-timer{padding:20px}}

/* Reference-style preparation and recording card. */
.csp .csp-timer{display:flex;align-items:center;gap:30px;width:100%;max-width:750px;min-height:210px;margin:40px auto;background:#dbdce2;border-radius:20px;padding:40px}
.csp .csp-stage-icon{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 130px;height:130px;background:#eee;border-radius:10px;color:#aaa}
.csp .csp-timer-details{flex:1;min-width:0;text-align:center}
.csp .csp-timer h3{font-size:32px;font-weight:500;line-height:1.3;color:#000;margin:0 0 24px}
.csp .csp-clock{font-size:32px;font-weight:400;line-height:1.3;color:#005ac8}
.csp .csp-clock-icon{position:relative;width:78px;height:78px;border:8px solid #aaa;border-radius:50%}
.csp .csp-clock-icon::before{content:'';position:absolute;width:6px;height:26px;left:28px;top:9px;border-radius:3px;background:#aaa}
.csp .csp-clock-icon::after{content:'';position:absolute;width:22px;height:6px;left:29px;top:30px;border-radius:3px;background:#aaa;transform:rotate(45deg);transform-origin:3px center}
.csp .csp-mic-icon{display:none;position:relative;width:58px;height:43px;border:6px solid #aaa;border-top:0;border-radius:0 0 28px 28px;margin-top:20px}
.csp .csp-mic-icon::before{content:'';position:absolute;width:38px;height:66px;left:4px;bottom:6px;border-radius:16px;background:linear-gradient(to bottom,#aaa 0 52%,#eee 52% 58%,#aaa 58% 100%)}
.csp .csp-mic-icon::after{content:'';position:absolute;width:40px;height:22px;left:3px;top:37px;background:linear-gradient(#aaa,#aaa) center top/9px 17px no-repeat,linear-gradient(#aaa,#aaa) center bottom/40px 8px no-repeat;border-radius:4px}
.csp .csp-timer progress{display:none;appearance:none;-webkit-appearance:none;width:100%;height:36px;border:0;border-radius:0;background:#eee;margin:0;overflow:hidden}
.csp .csp-timer progress::-webkit-progress-bar{background:#eee;border-radius:0}
.csp .csp-timer progress::-webkit-progress-value{background:#00bfe8;border-radius:0}
.csp .csp-timer progress::-moz-progress-bar{background:#00bfe8;border-radius:0}
.csp[data-phase=recording] .csp-clock-icon{display:none}
.csp[data-phase=recording] .csp-mic-icon{display:block}
.csp[data-phase=recording] .csp-timer h3::before{content:none}
.csp[data-phase=recording] .csp-timer progress{display:block;accent-color:#00bfe8}
.csp[data-phase=recording] .csp-clock{display:none}
.csp[data-phase=permission] .csp-timer h3,.csp[data-phase=error] .csp-timer h3,.csp[data-phase=complete] .csp-timer h3,.csp[data-phase=idle] .csp-timer h3,.csp[data-phase=saving] .csp-timer h3{font-size:20px;margin:0}
.csp[data-phase=permission] .csp-clock,.csp[data-phase=error] .csp-clock,.csp[data-phase=complete] .csp-clock,.csp[data-phase=idle] .csp-clock,.csp[data-phase=saving] .csp-clock{display:none}
@media(max-width:1000px){.csp .csp-timer{padding:28px;gap:22px}.csp .csp-stage-icon{flex-basis:100px;height:110px}.csp .csp-timer h3{font-size:26px}}
@media(max-width:480px){.csp .csp-timer{padding:20px 16px;gap:16px;min-height:150px;border-radius:16px}.csp .csp-stage-icon{flex-basis:72px;height:90px}.csp .csp-clock-icon{transform:scale(.72);flex-shrink:0}.csp .csp-mic-icon{transform:scale(.8)}.csp .csp-timer h3{font-size:21px;margin-bottom:18px}.csp .csp-clock{font-size:28px}.csp .csp-timer progress{height:26px}}

.csp[data-phase=announcing] .csp-clock{display:none}.csp[data-phase=announcing] .csp-timer h3{font-size:24px;margin:0}

/* Compact completion notice and practice encouragement. */
.csp[data-phase=complete] .csp-timer{max-width:600px;min-height:0;padding:16px 20px;margin:24px auto 12px;gap:16px;border-radius:12px}
.csp[data-phase=complete] .csp-stage-icon{flex-basis:52px;height:52px;border-radius:8px}
.csp[data-phase=complete] .csp-clock-icon{transform:scale(.48);flex-shrink:0}
.csp[data-phase=complete] .csp-timer h3{font-size:17px;line-height:1.5;text-align:left}
.csp .csp-encouragement{display:none;max-width:600px;margin:0 auto 24px;font-size:14px;line-height:1.7;color:#53647b}
.csp[data-phase=complete] .csp-encouragement{display:block}
.csp .csp-encouragement p{margin:0 0 8px}
.csp .csp-encouragement p:first-child{font-weight:600;color:#284f7b}
.csp .csp-encouragement a{text-decoration:underline}

/* Smaller card throughout preparation and recording. */
.csp .csp-timer{max-width:600px;min-height:140px;padding:24px;gap:22px;margin:24px auto;border-radius:16px}
.csp .csp-stage-icon{flex-basis:90px;height:90px}
.csp .csp-clock-icon{transform:scale(.75);flex-shrink:0}
.csp .csp-mic-icon{transform:scale(.78)}
.csp .csp-timer h3{font-size:25px;margin-bottom:16px}
.csp .csp-clock{font-size:28px}
.csp .csp-timer progress{height:25px}
@media(max-width:480px){.csp .csp-timer{min-height:116px;padding:16px;gap:14px}.csp .csp-stage-icon{flex-basis:66px;height:74px}.csp .csp-clock-icon{transform:scale(.6)}.csp .csp-mic-icon{transform:scale(.65)}.csp .csp-timer h3{font-size:20px}.csp .csp-timer progress{height:22px}}

/* More compact question text. */
.csp .csp-prompt{font-size:18px;font-weight:400;line-height:1.65;margin-bottom:20px}
@media(max-width:480px){.csp .csp-prompt{font-size:16px}}

.csp .csp-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}
.csp .csp-option-card{display:block;min-width:0;width:100%;padding:18px;border:2px solid #c8d3e1;border-radius:10px;background:#fff;color:#26364b;text-align:left}
.csp button.csp-option-card[aria-pressed=true]{background:#ccebf2;border-color:#19798e;box-shadow:0 0 0 2px #19798e}
.csp .csp-option-card img{width:100%;height:220px;object-fit:contain;margin:0 0 16px}
.csp .csp-option-description{white-space:pre-wrap;font-size:16px;line-height:1.6;margin:0;display:block}
.csp .csp-option-owner{font-size:18px;color:#1f5d89;margin:0 0 16px}
@media(max-width:520px){.csp .csp-option-grid{grid-template-columns:1fr}.csp .csp-option-card img{height:180px}}

/* Contain long titles even when the theme applies nowrap to buttons. */
.csp .csp-sidebar,.csp .csp-section,.csp .csp-questions{min-width:0;max-width:100%;box-sizing:border-box}
.csp .csp-questions button{white-space:normal!important;overflow-wrap:anywhere;word-break:normal;min-width:0;max-width:100%;width:100%;height:auto;line-height:1.5;text-align:left;box-sizing:border-box;flex-shrink:0}
.csp .csp-section h2{white-space:normal;overflow-wrap:anywhere;min-width:0}