.qb-cover{width:100%;height:520px;border:0;border-radius:24px;padding:38px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:24px;background:#fd5127;color:#140d0b;overflow:hidden}.qb-cover .kicker{color:#522015;margin:0}.qb-cover strong{font-size:clamp(38px,4vw,66px);letter-spacing:-2px;line-height:1.05;font-weight:650}.qb-cover-copy{font-size:18px}.qb-cover-actions{border-top:1px solid #140d0b40;padding-top:22px;margin-top:26px;font-size:13px}.qb-cover:hover{background:#ff633d}.qb-project .project-meta{position:relative;inset:auto;padding:22px 4px 2px;background:none;border-radius:0}.qb-project .project-meta h3{font-family:inherit}#question-bank-dialog{background:#101010;color:#f0efeb;border:1px solid #333;border-radius:32px;box-shadow:0 24px 100px #0009}#question-bank-dialog::backdrop{background:#000b;backdrop-filter:blur(10px)}#question-bank-dialog .case-text{line-height:1.8}#question-bank-dialog li{margin-bottom:12px}#question-bank-dialog .qb-step{border-top:1px solid #333;padding-top:24px;margin-top:28px}#question-bank-dialog .qb-step .kicker{color:#ff805e}#question-bank-dialog .qb-step h4{margin:12px 0}#question-bank-dialog .case-toolbar{z-index:3}@media(max-width:700px){.qb-cover{height:360px;padding:28px}}
/* Screenshot compositions use transparent surroundings; device shells are drawn in CSS. */
#question-bank-dialog .qb-visual{margin:56px auto;max-width:1040px;width:100%;background:transparent;box-sizing:border-box}
#question-bank-dialog .qb-visual figcaption{font:12px/1.6 inherit;color:#a6a6a6;text-align:center;margin-top:24px}
.qb-device-stage{position:relative;padding:44px 8% 80px 1%;isolation:isolate}
.qb-laptop{position:relative;width:90%;filter:drop-shadow(0 26px 22px #0005)}
.qb-laptop-lid{position:relative;padding:14px 10px 11px;border-radius:20px 20px 5px 5px;background:linear-gradient(135deg,#73777c,#191b1e 3%,#070809 48%,#777c82);border:1px solid #81858b;box-shadow:inset 0 0 0 4px #17191b}
.qb-camera{position:absolute;left:50%;top:5px;width:4px;height:4px;background:#303a47;border-radius:50%}
.qb-laptop-screen{border-radius:5px;aspect-ratio:16/10;overflow:hidden;background:#f0f3f7}
.qb-laptop-screen img{display:block;width:100%;height:auto;animation:qb-screen-pan 22s ease-in-out infinite}
.qb-laptop-base{height:14px;width:114%;margin-left:-7%;border-radius:2px 2px 55% 55%/2px 2px 100% 100%;background:linear-gradient(#d3d5d8,#92969d 40%,#45484d 75%,#26282b);position:relative}
.qb-laptop-base:before{content:"";position:absolute;top:0;left:40%;width:20%;height:5px;border-radius:0 0 10px 10px;background:#686d75}
.qb-phone{background:linear-gradient(130deg,#9b9fa5,#27292e 10%,#07080a 55%,#61656b);padding:5px;border-radius:36px;border:1px solid #8c9097;box-shadow:0 24px 40px #0005;position:relative}
.qb-phone-top{height:21px;background:#080a0e;border-radius:29px 29px 0 0;display:flex;align-items:center;justify-content:center}
.qb-phone-top span{width:40px;height:4px;border-radius:8px;background:#282c34}
.qb-phone-screen{overflow:hidden;background:#000c29}
.qb-phone-screen img{display:block;width:100%;height:auto}
.qb-phone-bottom{height:18px;background:#080a0e;border-radius:0 0 29px 29px;position:relative}
.qb-phone-bottom:after{content:"";position:absolute;left:34%;right:34%;top:8px;height:3px;border-radius:3px;background:#aaa}
.qb-hero-phone{position:absolute;right:2%;bottom:60px;width:24%;transform:rotate(4deg)}
.qb-device-stage>figcaption{position:absolute;bottom:0;left:0;right:0}
.qb-visual-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;font-size:14px;color:#ddd}
.qb-theme-options{display:flex;gap:4px;border:1px solid #444;padding:4px;border-radius:30px;flex-shrink:0}
#question-bank-dialog .qb-theme-options button{padding:8px 16px;border:0;background:transparent;color:#aaa;border-radius:30px;font-size:12px;min-height:34px;cursor:pointer}
#question-bank-dialog .qb-theme-options button[aria-pressed="true"]{background:#f0efeb;color:#151515}
.qb-window{overflow:hidden;border-radius:16px;border:1px solid #555;box-shadow:0 22px 44px #0004;background:#202838}
.qb-window-chrome{display:flex;align-items:center;gap:5px;height:30px;padding:0 12px;background:#20242a;color:#b4b7bd;font:9px/1 monospace}
.qb-window-chrome i{height:5px;width:5px;border-radius:50%;background:#797d84}.qb-window-chrome span{margin-left:9px}
.qb-window>img{display:block;width:100%;height:auto}
#question-bank-dialog .qb-practice{background:#1b229f;border-radius:28px;padding:40px 32px 28px;color:white}
.qb-practice-heading{max-width:630px;margin:auto;text-align:center}.qb-practice-heading .kicker{color:#b8c7ff;font-size:10px}.qb-practice-heading h3{font-size:32px;letter-spacing:-1px;margin:14px 0}.qb-practice-heading p{font-size:15px;line-height:1.7;color:#e0e4ff}
.qb-phone-pair{display:flex;align-items:flex-start;justify-content:center;gap:50px;padding:28px 0 4px}.qb-phone-item{width:260px;max-width:42%}.qb-phone-item:nth-child(2){padding-top:50px}.qb-device-label{display:block;font:11px/1.5 monospace;color:#e0e4ff;margin:0 0 16px;text-align:center}
.qb-scroll-screen{aspect-ratio:390/844;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#6b89c3 transparent;outline-offset:5px}
#question-bank-dialog .qb-practice figcaption{color:#d6dfff}
@keyframes qb-screen-pan{0%,15%,100%{transform:translateY(0)}55%,80%{transform:translateY(-18%)}}
@media(prefers-reduced-motion:reduce){.qb-laptop-screen img{animation:none}}
@media(max-width:700px){#question-bank-dialog .qb-visual{margin:36px auto}.qb-device-stage{padding:24px 5% 66px}.qb-laptop{width:88%}.qb-laptop-lid{padding:10px 5px 6px;border-radius:12px 12px 3px 3px}.qb-laptop-base{height:9px}.qb-hero-phone{width:27%;right:1%;bottom:52px}.qb-phone{border-radius:24px;padding:3px}.qb-phone-top{height:15px;border-radius:21px 21px 0 0}.qb-phone-bottom{height:13px;border-radius:0 0 21px 21px}.qb-phone-bottom:after{top:5px;height:2px}.qb-phone-top span{width:25px;height:3px}.qb-visual-toolbar{font-size:12px;gap:8px}.qb-theme-options button{padding:7px 10px!important}.qb-window{border-radius:10px}.qb-window-chrome{height:24px}#question-bank-dialog .qb-practice{padding:28px 16px 20px}.qb-practice-heading h3{font-size:26px}.qb-phone-pair{gap:18px}.qb-phone-item{max-width:46%}.qb-phone-item:nth-child(2){padding-top:32px}.qb-device-label{font-size:9px}}
@media(max-width:440px){.qb-phone-pair{flex-direction:column;align-items:center;gap:28px}.qb-phone-item{width:260px;max-width:100%}.qb-phone-item:nth-child(2){padding-top:0}.qb-practice-heading p{font-size:14px}.qb-visual-toolbar{flex-wrap:wrap}}
.qb-cover{justify-content:flex-start;position:relative;gap:18px;padding:34px 34px 0}.qb-cover strong{font-size:44px;line-height:1;letter-spacing:-1.5px}.qb-cover-copy{font-size:13px}.qb-cover-preview{display:block;position:absolute;left:12%;top:54%;width:87%;height:65%;padding:7px;background:#17191e;border:1px solid #858991;border-radius:12px;box-shadow:0 20px 40px #57200e66;transform:rotate(-5deg);overflow:hidden}.qb-cover-preview img{display:block;width:100%;height:auto;border-radius:6px}.qb-cover:hover .qb-cover-preview{transform:rotate(-3deg) translateY(-5px);transition:transform .4s ease}@media(max-width:700px){.qb-cover{padding:28px 28px 0;gap:12px}.qb-cover strong{font-size:36px}.qb-cover-preview{top:55%}}
/* Cover entrance: separate directions, a slight overshoot, then a soft settle. */
.qb-cover-preview,.qb-cover:hover .qb-cover-preview{transform:none;transition:none;left:9%;width:91%}
.qb-cover.qb-motion-ready:not(.qb-entered) strong{opacity:0;transform:translateX(110%)}
.qb-cover.qb-motion-ready:not(.qb-entered) .qb-cover-preview{opacity:0;transform:translateY(110%)}
.qb-cover.qb-entered strong{animation:qb-title-enter 1100ms both}
.qb-cover.qb-entered .qb-cover-preview{animation:qb-laptop-enter 1350ms 140ms both}
@keyframes qb-title-enter{
 0%{opacity:0;transform:translateX(110%);animation-timing-function:cubic-bezier(.18,.7,.2,1)}
 78%{opacity:1;transform:translateX(-4px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 100%{opacity:1;transform:translateX(0)}
}
@keyframes qb-laptop-enter{
 0%{opacity:0;transform:translateY(110%);animation-timing-function:cubic-bezier(.16,.6,.16,1)}
 80%{opacity:1;transform:translateY(-7px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 100%{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
 .qb-cover.qb-motion-ready strong,.qb-cover.qb-motion-ready .qb-cover-preview{animation:none!important;opacity:1!important;transform:none!important}
}
/* Five-second loop: entrance, reading pause, then a brief fade before restarting. */
.qb-cover-preview,.qb-cover:hover .qb-cover-preview{left:5%;width:90%}
.qb-cover.qb-entered strong{animation:qb-title-loop 5s infinite both}
.qb-cover.qb-entered .qb-cover-preview{animation:qb-laptop-loop 5s infinite both}
@keyframes qb-title-loop{
 0%{opacity:0;transform:translateX(110%);animation-timing-function:cubic-bezier(.18,.7,.2,1)}
 17%{opacity:1;transform:translateX(-4px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 22%,90%{opacity:1;transform:translateX(0);animation-timing-function:ease-in-out}
 97%,100%{opacity:0;transform:translateX(0)}
}
@keyframes qb-laptop-loop{
 0%,3%{opacity:0;transform:translateY(110%);animation-timing-function:cubic-bezier(.16,.6,.16,1)}
 24%{opacity:1;transform:translateY(-7px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
 30%,90%{opacity:1;transform:translateY(0);animation-timing-function:ease-in-out}
 97%,100%{opacity:0;transform:translateY(0)}
}

/* Case layout shares the scale and controls of the Design System case. */
#question-bank-dialog .qb-screen-showcase{max-width:700px}
#question-bank-dialog .qb-device-stage{max-width:620px;padding:30px 95px 64px 30px}
.qb-device-stage .qb-laptop{width:100%;max-width:450px}
.qb-laptop-screen{position:relative}
.qb-laptop-screen img{animation:qb-full-page-pan 24s cubic-bezier(.45,0,.25,1) infinite}
@keyframes qb-full-page-pan{0%,12%,100%{transform:translateY(0)}50%,85%{transform:translateY(calc(-100% + 100cqw * .625))}}
.qb-laptop-screen{container-type:inline-size}
.qb-phone{border:1px solid #fafafa;padding:5px;border-radius:34px;background:linear-gradient(110deg,#fff,#b9bec4 4%,#f8f8f8 9%,#e7e8ea 90%,#a9aeb5 97%,#fff);box-shadow:inset 0 0 0 2px #d5d8dc,0 16px 24px #0003;overflow:visible}
.qb-phone:before,.qb-phone:after{content:"";position:absolute;width:3px;background:linear-gradient(#f7f7f8,#b8bcc2);border-radius:3px;top:22%;height:12%;right:-3px}
.qb-phone:before{right:auto;left:-3px;top:18%;height:17%}
.qb-phone-top{height:27px;border:3px solid #111;border-bottom:0;border-radius:29px 29px 0 0;background:#f0f3f7;position:relative}
.qb-phone-top span{height:13px;width:28%;background:#08090b;border-radius:20px;position:absolute;top:6px;left:36%}
.qb-phone-top span:after{content:"";position:absolute;right:5px;top:4px;width:5px;height:5px;border-radius:50%;background:#142139}
.qb-phone-screen{border-inline:3px solid #111;background:#f0f3f7;overflow:hidden;aspect-ratio:440/956}
.qb-phone-screen img{width:100%;height:100%;object-fit:contain}
.qb-phone-bottom{height:16px;background:#f0f3f7;border:3px solid #111;border-top:0;border-radius:0 0 29px 29px}
.qb-phone-bottom:after{top:5px;background:#151515;height:3px}
.qb-hero-phone{width:138px;right:12px;bottom:54px;transform:none}
.qb-hero-phone .qb-phone-screen img{object-fit:cover;object-position:top}
#question-bank-dialog .qb-practice{max-width:900px;background:#fd5127;color:#21110d;padding:36px 32px 26px}
.qb-practice-heading .kicker,.qb-practice-heading p,.qb-device-label,#question-bank-dialog .qb-practice figcaption{color:#462016}
.qb-phone-pair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start;padding-top:28px}
.qb-phone-item{width:auto;max-width:none;min-width:0}
.qb-phone-item:nth-child(2){padding-top:0}
@media(max-width:700px){#question-bank-dialog .qb-device-stage{padding:20px 65px 60px 15px}.qb-hero-phone{width:26%;right:0}.qb-phone-pair{gap:12px}.qb-phone{border-radius:24px;padding:3px}.qb-phone-top{border-radius:20px 20px 0 0;height:22px}.qb-phone-bottom{border-radius:0 0 20px 20px;height:12px}.qb-phone-top span{height:10px}.qb-phone-top span:after{width:3px;height:3px;top:3px}.qb-device-label{font-size:9px}#question-bank-dialog .qb-practice{padding:28px 14px 20px}}
@media(max-width:440px){.qb-phone-pair{gap:8px}.qb-phone{padding:2px;border-radius:17px}.qb-phone-top{border-width:2px;border-radius:14px 14px 0 0;height:16px}.qb-phone-top span{top:3px;height:8px;width:36%;left:32%}.qb-phone-screen{border-width:2px}.qb-phone-bottom{border-width:2px;border-radius:0 0 14px 14px;height:9px}.qb-phone-bottom:after{top:3px;height:2px}.qb-device-label{font-size:8px}}
@media(prefers-reduced-motion:reduce){.qb-laptop-screen img{animation:none}}

.qb-hero-phone .qb-phone-screen{container-type:inline-size}
.qb-hero-phone .qb-phone-screen img{height:auto;object-fit:initial;animation:qb-mobile-pan 30s cubic-bezier(.45,0,.25,1) infinite}
@keyframes qb-mobile-pan{0%,12%,100%{transform:translateY(0)}55%,85%{transform:translateY(calc(-100% + 100cqw * 2.1727))}}
@media(prefers-reduced-motion:reduce){.qb-hero-phone .qb-phone-screen img{animation:none}}

/* Same thumbnail affordance and modal motion as the Design System case. */
.qb-project{box-shadow:none!important}
.qb-cover:hover{background:#fd5127}
.qb-project .project-expand{z-index:5;background:#ffffffd9;border:1px solid #0001;right:16px;top:16px;color:#000c29!important}
#question-bank-dialog[open]{animation:none;transform-origin:top left}
#question-bank-dialog::backdrop{animation:none;opacity:0;transition:opacity .38s ease}
#question-bank-dialog.case-visible::backdrop{opacity:1}
#question-bank-dialog.case-closing{pointer-events:none}
.qb-laptop-screen img{animation-duration:12s}
@keyframes qb-full-page-pan{0%,4%,100%{transform:translateY(0)}68%,76%{transform:translateY(calc(-100% + 100cqw * .625))}}
.qb-hero-phone .qb-phone-screen img{animation-duration:18s}
@keyframes qb-mobile-pan{0%,4%,100%{transform:translateY(0)}68%,76%{transform:translateY(calc(-100% + 100cqw * 2.1727))}}
@media(prefers-reduced-motion:reduce){#question-bank-dialog::backdrop{transition:none}}