.voc-app{--voc-accent:#2e7d32;--voc-learn-size:18px;width:min(100%,880px);margin:12px auto;font-family:"Times New Roman",Times,"Noto Serif Telugu",serif;color:#20231f;background:#f7f8f2;box-sizing:border-box}
.voc-app *{box-sizing:border-box}
.voc-app>code:has(#voc-learn){display:contents;white-space:normal;font:inherit}
.voc-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:5px 0 10px}
.voc-tabs span{text-align:center;border:1px solid #bac2c7;border-radius:12px;padding:2px 4px;line-height:1.1;background:linear-gradient(#fff,#dbe0e3);font-size:17px;font-weight:bold}
.voc-tabs span.active{box-shadow:inset 0 -3px #758087;background:linear-gradient(#fff,#c9d1d6)}
#spokenbee-voc .voc-tabs span.active{background:#d9ecff!important;border-color:#4c91cc!important;color:#075597!important;box-shadow:inset 0 -2px #3185c5!important}
.voc-card{border:1px solid #d4dad3;border-radius:16px;background:#f8f9f4;padding:16px;display:flex;flex-direction:column;min-height:360px}
.voc-card[hidden],.voc-tabs[hidden],.voc-app button[hidden]{display:none!important}
.voc-app button{border:1px solid #9aa1a9;border-radius:11px;background:linear-gradient(#fff,#dce1e5,#f8f9fa);color:#202428;min-height:44px;padding:7px 12px;font:700 16px/1.15 "Times New Roman",Times,serif;cursor:pointer;box-shadow:0 2px 4px #0002}
.voc-app button.voc-primary{background:var(--voc-accent)!important;border-color:var(--voc-accent)!important;color:#fff!important}
.voc-app button:disabled{opacity:.6;cursor:default}
.voc-select{gap:9px;align-items:stretch}
.voc-select label{font-weight:bold;margin-top:5px}
.voc-select select{min-height:43px;min-width:0;width:100%;border:1px solid #aeb7b2;border-radius:8px;background:#fff;color:#202428;padding:7px 9px;font:16px "Times New Roman",Times,serif}
#spokenbee-voc .voc-pronunciation-setting{display:flex;align-items:center;justify-content:space-between;gap:7px;width:100%;min-height:44px;padding:6px 9px;border:1px solid #b5bec5;border-radius:11px;background:#f0f3f5;font-size:clamp(12px,3.4vw,15px);cursor:pointer}
#spokenbee-voc .voc-pronunciation-setting>span:first-child{flex:1 1 auto}
#spokenbee-voc #voc-pronunciation{position:absolute;width:1px;height:1px;opacity:0}
#spokenbee-voc .voc-switch-track{flex:0 0 42px;height:24px;border-radius:14px;background:#838b93;position:relative;transition:background .15s}
#spokenbee-voc .voc-switch-track:before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
#spokenbee-voc #voc-pronunciation:checked+.voc-switch-track{background:#237bc6}
#spokenbee-voc #voc-pronunciation:checked+.voc-switch-track:before{transform:translateX(18px)}
#spokenbee-voc #voc-pronunciation:focus-visible+.voc-switch-track{outline:3px solid #1a65b8;outline-offset:2px}
#spokenbee-voc #voc-pronunciation-status{flex:0 0 30px;text-align:center}
#voc-message{min-height:20px;text-align:center;color:#8f2c28}
#voc-select-exit{margin-top:auto;background:#c62828;color:#fff;border-color:#a91f1f}
.voc-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.voc-head h2{margin:2px 0 8px;font-size:clamp(21px,5vw,28px)}
.voc-head b{white-space:nowrap;font-size:18px}
.voc-learn .voc-head{align-items:center}
.voc-learn .voc-head h2{min-width:0;flex:1 1 auto}
#spokenbee-voc .voc-learn .voc-head h2{font-size:clamp(18px,4.4vw,22px)!important;line-height:1.15!important;margin:0 0 3px!important}
#spokenbee-voc .voc-learn #voc-learn-stop{flex:0 0 auto;min-width:74px;min-height:35px;padding:4px 10px;margin:0 0 7px 0;font-size:15px;background:linear-gradient(#fff,#dce1e5,#f8f9fa)!important;color:#202428!important}
#spokenbee-voc .voc-learn #voc-learn-stop[aria-pressed="true"]{background:#c62828!important;border-color:#a91f1f!important;color:#fff!important}
.voc-content{position:relative;flex:1 1 auto;min-height:0;max-height:65vh;overflow-y:auto;overflow-x:auto;font-size:max(12px,calc(var(--voc-learn-size) - 2px));background:transparent;overscroll-behavior:contain}
#spokenbee-voc .voc-learn .voc-content{margin-top:0!important;padding-top:0!important}
#spokenbee-voc .voc-content :is(table,tbody,tr,td,th,td *,th *){font-size:inherit!important}
#spokenbee-voc .voc-content td.voc-tts-current-cell{background:#fff0a6!important;box-shadow:inset 0 0 0 3px #dfa923!important}
#spokenbee-voc .voc-content.voc-hide-pronunciation [data-voc-pronunciation="1"]{display:none!important}
#spokenbee-voc .voc-content.voc-hide-pronunciation table[data-voc-pronunciation-table="1"]{width:100%!important;max-width:100%!important;table-layout:fixed!important}
#spokenbee-voc .voc-content.voc-hide-pronunciation table[data-voc-pronunciation-table="1"] colgroup{display:none!important}
#spokenbee-voc .voc-content.voc-hide-pronunciation table[data-voc-pronunciation-table="1"] :is(td,th):not([data-voc-pronunciation="1"]):not([colspan]){width:calc(100% / var(--voc-visible-columns,2))!important;min-width:0!important;max-width:none!important;overflow-wrap:break-word}
.voc-content table{max-width:100%;height:auto!important}
.voc-content tr,.voc-content th,.voc-content td{height:auto!important;min-height:0!important}
.voc-content img,.voc-content video,.voc-content iframe{max-width:100%;height:auto}
.voc-learn #voc-start{margin-top:9px;width:100%}
.voc-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;align-self:stretch;gap:8px;margin-top:9px}
.voc-actions button{width:100%;min-width:0}
.voc-bottom{margin-top:auto}
.voc-bottom button,.voc-learn .voc-actions button{background:#c62828!important;color:#fff!important;border-color:#a91f1f!important}
.voc-score{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;text-align:center;border:1px solid #d4dad3;border-radius:10px;background:#fff;padding:5px;font-size:clamp(13px,3.8vw,17px);line-height:1.2;font-weight:bold}
.voc-score span:first-child{color:#228233}.voc-score span:nth-child(2){color:#c62828}.voc-score span:nth-child(3){color:#8b5a2b}
#voc-feedback{min-height:26px;text-align:center;font-weight:bold}.voc-app .good{color:#228233}.voc-app .bad{color:#c62828}
.voc-question{background:#fff;border-radius:12px;padding:16px 12px;margin:7px 0 13px;font-size:clamp(20px,5vw,27px);font-weight:bold;line-height:1.4}
.voc-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;flex:1 1 auto}
.voc-app .voc-choice{font-size:clamp(18px,4.8vw,26px);height:auto;min-height:58px;white-space:normal;overflow-wrap:anywhere}
.voc-app .voc-choice.selected{border:3px solid var(--voc-accent);background:#e4f5e6}
.voc-result{text-align:center}.voc-result #voc-percent{font-size:38px;font-weight:bold;color:var(--voc-accent)}
.voc-result #voc-status{font-size:20px;font-weight:bold}.voc-result #voc-summary{font-size:15px;line-height:1.5;margin:12px 0 18px}
#spokenbee-voc .voc-result-breakdown[hidden]{display:none!important}
.voc-result-breakdown{flex:0 0 auto;border:1px solid #d4dad3;border-radius:10px;background:#fff;padding:9px;margin:5px 0;text-align:left}
.voc-result-breakdown h3{margin:0 0 6px;font-size:18px;text-align:center}
.voc-result-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;text-align:center;font-size:clamp(13px,3.5vw,16px);font-weight:bold}
.voc-result-stats span:first-child{color:#228233}.voc-result-stats span:nth-child(2){color:#c62828}
.voc-tabs span[hidden]{display:none!important}
.voc-translation #voc-input{width:100%;height:48px;min-height:48px;max-height:48px;border:1px solid #aeb7b2;border-radius:10px;background:#fff;padding:8px 10px;font:19px/1.3 "Times New Roman",Times,serif;color:#202428}
.voc-translation #voc-mic.active{background:#fff0ee;border-color:#c62828;color:#9b1d1d}
.voc-translation #voc-mic-status{min-height:42px;margin:5px 0;text-align:center}
#spokenbee-voc .voc-translation #voc-tfeedback{height:46px;min-height:46px;max-height:46px;overflow:hidden;margin:0 0 7px;text-align:center;font-size:clamp(23px,6vw,32px);line-height:1.15;font-weight:800;flex:0 0 46px}
.voc-translation-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,70%);gap:12px;align-items:center;margin-top:auto!important;margin-bottom:clamp(42px,10vh,90px)}
.voc-translation-answer-actions{display:flex;flex-direction:column;gap:18px;min-width:0}
#spokenbee-voc .voc-translation #voc-mic,#spokenbee-voc .voc-translation #voc-tsubmit,#spokenbee-voc .voc-translation #voc-tskip{width:100%;height:42px!important;min-height:42px!important;padding:3px 6px!important;margin:0!important;font-size:clamp(13px,3.6vw,16px)}
#spokenbee-voc .voc-translation #voc-tskip{background:#c62828!important;border-color:#a91f1f!important;color:#fff!important}
#spokenbee-voc .voc-translation #voc-instructions-voice{width:62px;height:62px;min-height:62px;border-radius:50%;font-size:30px;justify-self:center;background:#e3ebf3}
@media(max-width:340px){.voc-translation-controls{grid-template-columns:minmax(44px,1fr) minmax(185px,68%);gap:7px}#spokenbee-voc .voc-translation #voc-instructions-voice{width:48px;height:48px;min-height:48px;font-size:25px}}
@media(max-height:700px){#spokenbee-voc .voc-translation-controls{margin-bottom:18px}.voc-translation-answer-actions{gap:10px}}
.voc-translation .voc-bottom{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:auto;margin-bottom:0}
.voc-translation #voc-texit,.voc-translation #voc-tback{background:#c62828!important;color:#fff!important;border-color:#a91f1f!important}
#spokenbee-voc .voc-translation .voc-score{padding:4px 6px!important;gap:2px!important;line-height:1.15!important}
#spokenbee-voc .voc-translation .voc-score span{font-size:clamp(13px,3.6vw,17px)!important;line-height:1.15!important;margin:0!important;padding:0!important}
#spokenbee-voc .voc-translation .voc-score span:nth-child(3){grid-column:1/-1;color:#20231f}
#spokenbee-voc .voc-translation #voc-input{height:48px!important;min-height:48px!important;max-height:48px!important;font-size:18px!important}
#spokenbee-voc .voc-translation #voc-tsubmit{margin-top:0!important}
#spokenbee-voc .voc-translation .voc-bottom{margin-top:0!important}
@media(max-width:782px),(hover:none) and (pointer:coarse){
  html:has(#spokenbee-voc),body:has(#spokenbee-voc){overflow-x:hidden}
  #spokenbee-voc.voc-app{position:fixed;inset:0;z-index:99999;width:100%;max-width:none;height:100vh;height:100dvh;min-height:0;margin:0;padding:6px 8px max(6px,env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden}
  #spokenbee-voc .voc-tabs{flex:0 0 auto;margin:2px 0 6px;gap:5px}
  #spokenbee-voc .voc-tabs span{font-size:clamp(14px,4vw,17px);padding:2px 3px}
  #spokenbee-voc .voc-card{flex:1 1 0;min-height:0;padding:8px;overflow:hidden}
  #spokenbee-voc .voc-head{flex:0 0 auto}
  #spokenbee-voc .voc-head h2{font-size:clamp(19px,5vw,25px);line-height:1.2;margin:2px 0 6px}
  #spokenbee-voc .voc-content{flex:1 1 0;max-height:none;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  #spokenbee-voc .voc-learn #voc-start,#spokenbee-voc .voc-actions{flex:0 0 auto;margin-top:5px}
  #spokenbee-voc .voc-app button,#spokenbee-voc button{font-family:"Times New Roman",Times,serif}
  #spokenbee-voc .voc-actions button{min-height:42px;padding:6px 5px}
  #spokenbee-voc .voc-practice .voc-choices{overflow-y:auto;min-height:0;padding:2px}
  #spokenbee-voc .voc-bottom{flex:0 0 auto}
  #spokenbee-voc .voc-select{overflow-y:auto}
  #spokenbee-voc .voc-translation{overflow-y:auto}
  #spokenbee-voc .voc-result{overflow-y:auto!important}
}
#spokenbee-voc :is(h1,h2,h3,h4,h5,h6,button,.voc-tabs span){font-family:"Times New Roman",Times,"Noto Serif Telugu",serif}
/* Phone browsers can report a desktop layout viewport while still using touch. */
#spokenbee-voc.voc-mobile{position:fixed!important;inset:0!important;z-index:99999;width:100%!important;max-width:none!important;height:100vh!important;height:100dvh!important;min-height:0!important;margin:0!important;padding:6px 8px max(6px,env(safe-area-inset-bottom));display:flex!important;flex-direction:column;overflow:hidden}
#spokenbee-voc.voc-mobile .voc-tabs{flex:0 0 auto}
#spokenbee-voc.voc-mobile .voc-card{flex:1 1 0!important;min-height:0!important;overflow:hidden}
#spokenbee-voc.voc-mobile .voc-content{flex:1 1 0;min-height:0!important;max-height:none!important;overflow:auto;-webkit-overflow-scrolling:touch}
#spokenbee-voc.voc-mobile .voc-result{overflow-y:auto!important}
#spokenbee-voc.voc-mobile .voc-learn #voc-start,#spokenbee-voc.voc-mobile .voc-actions{flex:0 0 auto}
#spokenbee-voc .voc-tabs span{padding:2px 3px!important;line-height:1.1!important;height:auto!important;min-height:0!important}