*{box-sizing:border-box} :root{font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;color:#243344;background:#f7f8f2;font-synthesis:none} body{margin:0;min-height:100svh;background:#f7f8f2 url("assets/shared/BENGAL_CIRCULAR_GARDEN_BACKGROUND_V1.png") center top/cover fixed} button,select{font:inherit} button{cursor:pointer;-webkit-tap-highlight-color:transparent} .app{width:min(100%,720px);min-height:100svh;margin:auto;padding:max(10px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.brandbar{height:48px;display:flex;align-items:center;justify-content:space-between;flex:none}.brand{display:flex;align-items:center;gap:8px;color:#233448;text-decoration:none;font-weight:850;font-size:15px}.brand-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:10px;background:#ffbd72;color:#fff;font-size:22px}.poc-tag,.eyebrow{color:#9aa6ad;font-size:10px;letter-spacing:.11em;font-weight:800}.screen{display:none;flex:1;min-height:0}.screen.active{display:flex;flex-direction:column}.welcome{text-align:center;padding:clamp(22px,6vh,58px) 10px 24px}.welcome .eyebrow{margin:0 0 8px;color:#db9555}.welcome h1,.result-heading h1{margin:0;font-size:clamp(29px,8vw,40px);letter-spacing:-.04em}.welcome>p:last-child,.result-heading>p:last-child{margin:9px 0 0;color:#7c8a93;font-size:14px}.setup-card{width:min(100%,500px);margin:0 auto;padding:clamp(20px,5vw,32px);border:1px solid #e9ece5;border-radius:26px;background:#fff;box-shadow:0 12px 32px #27384b0b}.setup-card fieldset{margin:0 0 20px;padding:0;border:0}.setup-card legend,.field-label{display:block;margin-bottom:10px;color:#485965;font-weight:800;font-size:14px}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}.segmented label{position:relative}.segmented input{position:absolute;opacity:0}.segmented span{display:grid;place-items:center;min-height:47px;border:1.5px solid #e5e9e4;border-radius:14px;color:#687984;font-size:13px;font-weight:750;background:#fbfcf9}.segmented input:checked+span{border-color:#edaa69;background:#fff4e6;color:#8d562c}.field-label{margin-top:0}.setup-card select{width:100%;height:48px;margin:0 0 20px;padding:0 13px;border:1.5px solid #e5e9e4;border-radius:14px;background:#fbfcf9;color:#314252;font-weight:700}.primary,.secondary{min-height:52px;border:0;border-radius:16px;font-weight:850}.primary{background:#f2944f;color:white;box-shadow:0 4px 0 #d8793d}.primary span{float:right;font-size:22px;line-height:18px}.primary:active,.secondary:active{transform:translateY(1px)}.setup-card>.primary{width:100%;margin-top:2px;padding:0 18px}.home-note{text-align:center;margin:15px 0 0;color:#9aa6ad;font-size:11px;line-height:1.5}
.practice-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:48px}.text-button{border:0;background:none;color:#73838d;font-weight:750;font-size:13px;padding:10px 0;text-align:left}.keyboard-switch{text-align:right;color:#d77c3e}.timer{min-width:94px;text-align:center;padding:7px 12px;border-radius:14px;background:#fff0de;color:#bb6330;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}.timer.warning{background:#ffebe9;color:#d64f46}.progress{display:grid;grid-template-columns:1fr auto;gap:3px 8px;margin:4px 0 11px;color:#778891;font-size:12px;font-weight:750}.progress-track{grid-column:1/-1;height:5px;border-radius:9px;background:#e7ebe5;overflow:hidden}.progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:#f3a05d;transition:width .2s}.question-card{min-height:clamp(180px,27vh,245px);padding:22px 16px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #e7ece5;border-radius:25px;background:#fff;box-shadow:0 9px 24px #27384b0a;position:relative}.question-kind{position:absolute;top:15px;left:17px;padding:5px 9px;border-radius:9px;background:#f2f5ef;color:#7d8d82;font-size:10px;font-weight:800}.question-text{font-size:clamp(31px,9vw,54px);font-weight:900;letter-spacing:.01em;text-align:center;line-height:1.25;overflow-wrap:anywhere}.answer-show{min-height:26px;margin-top:15px;color:#a0aab0;font-size:14px;font-weight:750}.comparison-keys{display:flex;gap:10px;margin-top:10px}.comparison-keys button{width:62px;height:48px;border:1px solid #e8e9e1;border-radius:14px;background:#fff7e8;color:#324452;font-size:25px;font-weight:900}.hidden{display:none!important}.keyboard-panel{margin-top:12px}.direct-keys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.direct-keys button,.calculator-keys button{height:clamp(42px,6.1vh,54px);border:1px solid #e4e9e3;border-radius:13px;background:#fff;color:#344655;font-size:18px;font-weight:850;box-shadow:0 2px 0 #e5e9e3}.direct-keys button:active,.calculator-keys button:active{background:#fff1dc;border-color:#efbd84}.calculator-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.calculator-keys button{height:52px}.calculator-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.secondary{background:#eef1eb;color:#596b74;padding:0 14px}.primary.small{min-height:48px;box-shadow:0 3px 0 #d8793d}.question-nav{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.question-nav button{min-height:42px;padding:0 13px;border:1px solid #e4e9e3;border-radius:13px;background:#fff;color:#50616b;font-weight:800;font-size:13px}.question-nav span{color:#9aa6ad;font-size:12px;font-weight:800}.finish-button{align-self:center;margin-top:6px;padding:7px 12px;border:0;background:none;color:#a3abad;font-size:11px}
.result-heading{text-align:center;padding:clamp(24px,7vh,65px) 10px 22px}.result-heading .eyebrow{color:#db9555}.result-card{width:min(100%,500px);margin:0 auto 18px;padding:24px;border:1px solid #e7ece5;border-radius:24px;background:white;text-align:center}.accuracy{font-size:clamp(48px,13vw,68px);font-weight:950;color:#e88845;line-height:1}.accuracy-caption{margin:5px 0 20px;color:#98a3a9;font-size:12px}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);padding-top:16px;border-top:1px solid #edf0eb}.result-grid div{display:grid;gap:4px}.result-grid strong{font-size:21px}.result-grid span{color:#89969c;font-size:11px}.resultScreen>.primary,.resultScreen>.secondary{width:min(100%,500px)}#resultScreen>.primary,#resultScreen>.secondary{width:min(100%,500px);margin:5px auto}.secondary.full{width:min(100%,500px);margin:8px auto}.review-top{display:flex;align-items:center;justify-content:space-between;min-height:48px;color:#788890;font-weight:800;font-size:12px}.review-card{position:relative;min-height:300px;margin-top:20px;padding:62px 20px 20px;border:1px solid #e7ece5;border-radius:24px;background:white}.review-card .question-kind{top:17px}.review-answer{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding:13px 15px;border-radius:14px;background:#fff0ed;color:#9b6760;font-size:13px}.review-answer strong{color:#984b44;font-size:17px}.review-answer.correct{background:#eff7ed;color:#70866b}.review-answer.correct strong{color:#528145}.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);padding:11px 16px;border-radius:14px;background:#253746;color:white;font-size:13px;box-shadow:0 6px 20px #20334433;z-index:5}
@media(min-width:560px){.direct-keys{grid-template-columns:repeat(7,minmax(0,1fr));gap:9px}.direct-keys button{height:54px}.question-card{min-height:250px}.setup-card{padding:32px 38px}}
@media(max-height:740px){.welcome{padding:18px 10px}.welcome h1{font-size:30px}.question-card{min-height:clamp(145px,24vh,205px)}.direct-keys{gap:5px}.direct-keys button{height:clamp(36px,5.2vh,46px)}.keyboard-panel{margin-top:8px}.question-nav{margin-top:6px}.finish-button{margin-top:1px}}
@media(orientation:landscape) and (max-height:520px){.app{max-width:900px}#practiceScreen.active{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:42px 1fr auto auto;gap:6px 14px}.practice-top{grid-column:1/-1}.progress{grid-column:1/-1;margin:0}.question-card{grid-column:1;grid-row:3;min-height:0}.keyboard-panel{grid-column:2;grid-row:2/5;align-self:center}.direct-keys{grid-template-columns:repeat(4,1fr)}.direct-keys button{height:42px}.question-nav{grid-column:1;grid-row:4;margin:0}.finish-button{grid-column:1;grid-row:5}.question-text{font-size:38px}}
.welcome{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 4px 16px}
.home-title-plaque{width:min(100%,390px);aspect-ratio:2.5/1;padding:10px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url("assets/ui-kit-v2/panels/plaque_title.png") center/100% 100% no-repeat}
.home-title-plaque h1{margin:0;color:#315d48;font-size:clamp(25px,7.5vw,36px);line-height:1.2;text-wrap:balance}
.home-title-plaque p{margin:4px 0 0;color:#788b73;font-size:clamp(11px,3.2vw,14px);font-weight:700}
.home-bengal-cat{display:block;width:clamp(132px,42vw,205px);height:auto;aspect-ratio:1/1;object-fit:contain}
.home-intro{margin:0;color:#7c8a93;font-size:13px;line-height:1.45}
.home-layout-button{width:100%;min-height:0;aspect-ratio:4/1;padding:8px 12%;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:15px}
.setup-card>.home-layout-button{margin:0 0 10px}
#startMistakesButton{margin-bottom:0}
@media(max-width:380px){.welcome{gap:8px;padding-top:14px}.home-title-plaque{padding-inline:12px}.home-title-plaque h1{font-size:clamp(23px,7.3vw,27px)}.home-bengal-cat{width:clamp(124px,38vw,150px)}.home-layout-button{font-size:13px}}
#homeScreen{margin-inline:-6px}
#homeScreen .welcome{gap:0;padding:14px 4px 0}
#homeScreen .home-hero{position:relative;width:min(100%,390px);margin-inline:auto;aspect-ratio:2.5/1}
#homeScreen .home-title-plaque{width:100%;height:100%;aspect-ratio:2.5/1;padding:10px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url("assets/ui-kit-v2/panels/plaque_title.png") center/100% 100% no-repeat}
#homeScreen .home-title-plaque h1{margin:0;color:#243344;font-family:"WenYuan Rounded SC",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:22px;font-weight:700;line-height:1.3;letter-spacing:normal;text-wrap:balance}
#homeScreen .home-title-plaque p{margin:4px 0 0;color:#6f8a77;font-family:"WenYuan Rounded SC",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:16px;font-weight:700;line-height:1.3}
#homeScreen .home-bengal-cat{position:absolute;left:17%;bottom:11%;width:64px;height:64px;aspect-ratio:1/1;object-fit:contain}
#homeScreen .home-intro{display:none}
#homeScreen .setup-card{flex:1;min-height:clamp(500px,70svh,620px);width:100%;max-width:500px;margin:0 auto;padding:20px;display:flex;flex-direction:column;border-color:#dfe5de;border-radius:30px;background:rgba(250,251,249,.94);box-shadow:none}
#homeScreen .setup-card .range-fieldset{margin-bottom:20px}
#homeScreen .setup-card legend,#homeScreen .setup-card .field-label{font-family:"WenYuan Rounded SC",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:16px;font-weight:500;color:#485965}
#homeScreen .setup-card .segmented{gap:8px}
#homeScreen .setup-card .segmented span{min-height:48px;border-radius:18px;font-family:"WenYuan Rounded SC",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:18px;font-weight:700;color:#243344}
#homeScreen .setup-card .segmented input:checked+span{border-color:#efa557;background:#f8ecdc;color:#243344}
#homeScreen .setup-card select{height:48px;margin-bottom:20px;border:1.5px solid #dfe5de;border-radius:18px;background-color:#f6f7f5;color:#314252;font-family:"WenYuan Rounded SC",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:18px;font-weight:600}
#homeScreen .setup-card .duration-fieldset[hidden]{display:none!important}
#homeScreen #startButton{width:87.76%;align-self:center;font-family:"WenYuan Rounded SC",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:18px;font-weight:600}
#homeScreen #startMistakesButton{width:96.3%;align-self:center;font-family:"WenYuan Rounded SC",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:16px;font-weight:600;text-align:start}
#homeScreen .home-note{margin:auto 0 0;padding-top:14px;color:#91a0a7;font-family:"WenYuan Rounded SC",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:12px;line-height:1.5;text-align:center}
@media(max-width:380px){#homeScreen{margin-inline:-4px}#homeScreen .welcome{padding-top:12px}#homeScreen .home-title-plaque{padding-inline:16px}#homeScreen .home-title-plaque h1{font-size:21px}#homeScreen .home-title-plaque p{font-size:14px}#homeScreen .home-bengal-cat{left:15%;bottom:10%;width:58px;height:58px}#homeScreen .setup-card{min-height:clamp(500px,72svh,600px);padding:18px}#homeScreen #startButton{width:87.76%}#homeScreen #startMistakesButton{width:96.3%}}

/* Home visual convergence: keep shared challenge header for non-home screens. */
.app:has(> #homeScreen.active) > .brandbar{display:none}
#homeScreen .welcome{flex:none;padding:14px 4px 16px}
#homeScreen .home-title-plaque h1{font-size:22px;font-weight:700;line-height:1.3}
#homeScreen .home-title-plaque p{display:none}
#homeScreen .home-setup-card,#homeScreen .setup-card{flex:0 0 auto;height:auto;min-height:0;overflow:visible;padding:20px}
#homeScreen .setup-card .range-fieldset{margin-bottom:20px}
#homeScreen .setup-card .field-label{margin:0 0 10px}
#homeScreen .home-type-picker{position:relative;z-index:2;width:100%;margin:0 0 20px}
#homeScreen .native-select-state{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#homeScreen .home-type-trigger{display:flex;width:100%;height:48px;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border:1.5px solid #dfe5de;border-radius:18px;background:#f8f8f4;color:#315d48;font-family:"WenYuan Rounded SC",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:18px;font-weight:600;text-align:left;box-shadow:none}
#homeScreen .home-type-trigger:focus-visible{outline:3px solid #a9c6a2;outline-offset:2px}
#homeScreen .picker-chevron{width:10px;height:10px;flex:none;border-right:2px solid #315d48;border-bottom:2px solid #315d48;transform:rotate(45deg) translateY(-2px);transition:transform .12s ease}
#homeScreen .home-type-trigger[aria-expanded="true"] .picker-chevron{transform:rotate(225deg) translate(-2px,-1px)}
#homeScreen .home-type-listbox{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;max-height:min(260px,45svh);overflow-y:auto;padding:6px;border:1px solid #e2e5dc;border-radius:18px;background:#fffdf7;box-shadow:0 12px 28px rgba(55,67,50,.18)}
#homeScreen .home-type-listbox[hidden]{display:none!important}
#homeScreen .home-type-option{display:flex;width:100%;min-height:46px;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:0;border-radius:12px;background:transparent;color:#315d48;font-family:"WenYuan Rounded SC",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:16px;font-weight:500;text-align:left}
#homeScreen .home-type-option[aria-selected="true"]{background:#e7f0e2;color:#315d48;font-weight:700}
#homeScreen .home-type-option:focus-visible{outline:2px solid #91b38a;outline-offset:-2px}
#homeScreen .option-check{visibility:hidden;color:#4c8755;font-size:20px;font-weight:800;line-height:1}
#homeScreen .home-type-option[aria-selected="true"] .option-check{visibility:visible}
#homeScreen .home-actions{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;margin-top:0}
#homeScreen .home-actions #startButton,#homeScreen .home-actions #startMistakesButton{width:min(320px,100%);height:auto;min-height:0;flex:none;aspect-ratio:4/1;margin:0;padding:8px 10%;background-size:100% 100%;font-family:"WenYuan Rounded SC",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;text-decoration:none;justify-content:center}
#homeScreen #startButton{font-size:18px;font-weight:600}
#homeScreen #startMistakesButton{font-size:16px;font-weight:600;text-align:center}
#homeScreen .home-note{display:none}
@media(max-width:380px){
  #homeScreen .welcome{padding-top:12px;padding-bottom:14px}
  #homeScreen .home-title-plaque h1{font-size:21px}
  #homeScreen .home-bengal-cat{left:15%;bottom:10%;width:58px;height:58px}
  #homeScreen .setup-card{padding:18px}
  #homeScreen .home-type-trigger{font-size:17px}
  #homeScreen .home-actions #startButton,#homeScreen .home-actions #startMistakesButton{width:min(320px,100%)}
}