@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;700;800&display=swap');
:root{--night:#071218;--acid:#d9ff4f;--cyan:#74e4e8;--paper:#f7f7f2}*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--night);font-family:'DM Sans',Arial,sans-serif}.present-bar{height:66px;padding:0 22px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;color:white;border-bottom:1px solid #334950}.present-brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.08em}.present-brand b{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:var(--acid);color:var(--night);font:800 20px 'Manrope'}.present-status{text-align:center;line-height:1.2}.present-status span{display:block;color:var(--acid);font-size:10px;letter-spacing:.16em}.present-status strong{font:700 14px 'Manrope'}.present-actions{display:flex;justify-content:flex-end;align-items:center;gap:9px}.present-actions button,.present-actions a{border:1px solid #53666d;border-radius:100px;background:transparent;color:white;padding:8px 12px;font:600 11px 'DM Sans';text-decoration:none;cursor:pointer}.present-actions button:hover,.present-actions a:hover{border-color:var(--acid);color:var(--acid)}main{position:relative;height:calc(100% - 136px);background:#dde5e6;overflow:hidden}iframe{width:100%;height:100%;border:0;background:white}.guide{position:absolute;left:24px;top:24px;width:min(370px,calc(100% - 48px));background:rgba(7,18,24,.95);color:white;border-left:5px solid var(--acid);padding:24px 26px;box-shadow:0 18px 55px rgba(0,0,0,.3);transition:transform .25s,opacity .25s}.guide.hidden{transform:translateX(-430px);opacity:0;pointer-events:none}.guide>p:first-child{font-size:10px;letter-spacing:.17em;color:var(--acid);font-weight:800;margin:0}.guide h1{font:800 27px/1.05 'Manrope';letter-spacing:-.03em;margin:14px 0}.guide>p{font-size:14px;color:#c3d1d5;line-height:1.5}.guide>div{border-top:1px solid #43575e;padding-top:15px;margin-top:18px}.guide>div b,.guide>div span{display:block}.guide>div b{font-size:9px;color:var(--cyan);letter-spacing:.14em}.guide>div span{font-weight:700;margin-top:7px}.present-controls{height:70px;padding:0 22px;display:flex;align-items:center;gap:16px;color:white}.present-controls button{border:1px solid #53666d;background:transparent;color:white;border-radius:100px;height:40px;padding:0 18px;font:700 12px 'DM Sans';cursor:pointer}.present-controls button:hover{border-color:var(--acid);color:var(--acid)}.present-controls .play[aria-pressed=true]{background:var(--acid);color:var(--night);border-color:var(--acid)}.progress{height:4px;flex:1;background:#31434a;border-radius:4px;overflow:hidden}.progress div{height:100%;width:8.33%;background:var(--acid);transition:width .35s}.present-controls label{font-size:9px;letter-spacing:.12em;color:#8ea1a7}.present-controls select{margin-left:7px;background:var(--night);color:white;border:1px solid #53666d;border-radius:7px;padding:6px}@media(max-width:760px){.present-bar{grid-template-columns:1fr auto}.present-status{display:none}.present-actions button{display:none}.present-actions a{display:block}.present-brand span{font-size:10px}.present-controls{gap:8px;padding:0 10px}.present-controls label{display:none}.present-controls button{padding:0 12px}.progress{min-width:35px}.guide{left:12px;top:12px;width:calc(100% - 24px);padding:18px}.guide h1{font-size:22px}}