/* One viewport workspace for every workshop; keep long content scrollable. */
html body :is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog,#odakEnglishDialog){
 box-sizing:border-box;position:fixed;inset:0;margin:0;
 width:100%;max-width:100%;height:100vh;height:100dvh;
 max-height:100vh;max-height:100dvh;border:0;border-radius:0;
 padding:0 max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
 overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
 overflow-wrap:break-word;
}
html body :is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog,#odakEnglishDialog)>:is(header,.math-head){
 position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
 min-height:68px;margin:0 0 16px;padding:max(12px,env(safe-area-inset-top)) 0 12px;
 background:#f5f9ff;border-bottom:1px solid #c8d9ec;
}
html body :is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog,#odakEnglishDialog)>:is(header,.math-head) h2{flex:1 1 220px;margin:0;font-size:clamp(20px,2.5vw,28px);min-width:0}
html body :is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog,#odakEnglishDialog) :is(button,select,input){box-sizing:border-box;min-height:44px;max-width:100%;font-size:max(16px,1em)}
html body :is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog,#odakEnglishDialog) :is(img,canvas,svg){max-width:100%}
html body :is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog,#odakEnglishDialog)>*{min-width:0}
/* A variable-height toolbar must not overlap a second sticky question. */
html body #odakMathDialog .math-current-question{position:static;top:auto}
html:has(:is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog,#odakEnglishDialog)[open]),
body:has(:is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog,#odakEnglishDialog)[open]){overflow:hidden}
@media(max-width:600px){
 html body :is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog,#odakEnglishDialog)>:is(header,.math-head) h2{flex-basis:100%;font-size:20px}
 html body :is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog,#odakEnglishDialog)>:is(header,.math-head) button{flex:1;white-space:normal}
 html body #odakMathDialog .math-settings{grid-template-columns:minmax(0,1fr)}
}
@media(max-height:500px) and (orientation:landscape){
 html body :is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog,#odakEnglishDialog)>:is(header,.math-head){position:static}
 html body :is(#odakMathDialog,#odakTurkishDialog,#odakScienceDialog)>:is(header,.math-head) h2{flex-basis:auto;font-size:20px}
 html body #odakScienceDialog .science-scene{height:110px}
 html body #odakScienceDialog .science-picture-choice{min-height:80px}
 html body #odakScienceDialog .science-answer-picture{font-size:36px}
}
@media(min-width:700px){
 html body #odakTurkishDialog .tr-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 html body #odakScienceDialog .science-picture-options{grid-template-columns:repeat(4,minmax(0,1fr))}
 html body #odakTurkishDialog .tr-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:699px) and (orientation:portrait){
 html body #odakTurkishDialog .tr-fields{display:grid;grid-template-columns:minmax(0,1fr)}
 html body #odakScienceDialog .science-settings{display:grid;grid-template-columns:minmax(0,1fr)}
 html body #odakTurkishDialog .tr-options{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
}
html body #odakMathDialog .math-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}html body #odakMathDialog .math-settings label{min-width:0;width:100%}html body #odakMathDialog .math-settings select{min-width:0;width:100%}