html,body{margin:0;height:100%;background:#111}#app{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100vw;height:100vh;height:100dvh;padding:2vh 4vw;background:#111;color:#eee;font-family:system-ui,sans-serif;transition:background-color .2s ease}#app.gap{background:#22324a}#app.no-lesson,#app.start,#app.fetching,#app.refused,#app.ask-teacher{align-items:center;justify-content:center;text-align:center}#app.start,#app.fetching,#app.ask-teacher{font-size:20vh;color:#555}.app-name-bar{order:-1;display:flex;gap:2vw;align-self:stretch}.app-name{background:none;border:none;color:#eee;font-size:3vh;min-height:6vh;min-width:30vw;text-align:left}.app-name:empty{border:1px dashed #333;border-radius:8px}.segment-list .segment{min-width:60vw;min-height:6vh;border:1px solid #333;border-radius:8px;background:#1b1f24;color:#eee;font-size:2.2vh;text-align:left}.segment-list .segment.selected{background:#22324a;border-color:#6d8cb8}.dots{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5vh}.dot{width:4vh;height:4vh;border-radius:50%;background:#444}.dot.filled{background:#eee}#app.gap .dot.filled{animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.buttons{display:flex;width:100%;gap:2vw}.buttons button{flex:1;min-height:25vh;border:none;border-radius:12px;background:#333;color:#eee;font-size:6vh}.buttons button:active{background:#555}