*{box-sizing:border-box}html{min-height:100%;background:#193450}body{margin:0;min-height:100svh;display:flex;align-items:center;padding:48px clamp(24px,4vw,80px);color:#fff;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(90deg,rgba(10,26,46,.52),rgba(10,26,46,.18)),url('/assets/university.png') center/cover fixed}.card{width:510px;max-width:100%;padding:48px 48px 30px;border-radius:20px;background:linear-gradient(120deg,rgba(34,64,111,.97),rgba(47,92,149,.96));box-shadow:0 24px 70px #10264445;position:relative;overflow:hidden}.card:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='90' viewBox='0 0 180 90'%3E%3Cpath d='M-45 45Q0 0 45 45T135 45T225 45' fill='none' stroke='%2375a2d1' stroke-width='2'/%3E%3C/svg%3E")} .card>*{position:relative}.brand{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:600;line-height:1.6;margin-bottom:38px}.brand-secondary{font-weight:400;color:#c0d3eb}.brand-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:white;color:#244a80;flex-shrink:0}.brand-icon svg{width:31px;height:31px}.eyebrow{font-size:10px;letter-spacing:1.4px;color:#bfd2ea;font-weight:700;line-height:1.7}h1{font-family:Georgia,'Times New Roman',serif;font-size:48px;line-height:1.1;letter-spacing:-1.8px;margin:18px 0}h1 span{position:relative;z-index:0}h1 span:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:15px;background:#40a6ee;z-index:-1}.kazakh-title{font-family:Georgia,serif;font-size:26px;margin:0 0 24px;color:#e0edfc}.description{font-size:16px;line-height:1.8;color:#c5d7ef;margin:20px 0 30px}.languages{display:grid;gap:14px}button{font:inherit;cursor:pointer;border:0} .languages button{display:flex;align-items:center;justify-content:space-between;padding:19px 22px;border-radius:8px;background:linear-gradient(100deg,#318bc7,#40a6ee);color:#fff;font-weight:600;transition:filter .15s,transform .15s}.languages button:last-child{background:#fff;color:#254c80}.languages button:hover{filter:brightness(1.08);transform:translateY(-1px)}button:focus-visible{outline:3px solid #a5dfff;outline-offset:4px}.back{padding:0;background:none;color:#d8e9fb;margin:0 0 22px;font-size:14px;text-align:left}.back:hover{text-decoration:underline}#instruction h1{font-size:38px}footer{font-size:11px;color:#b4c9e3;line-height:1.7;margin-top:34px}.video-wrap{border-radius:10px;overflow:hidden;background:#172e4e}video{display:block;width:100%;max-height:60svh}.placeholder{min-height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;color:#bed1e9;font-size:14px;line-height:1.6}.play-icon{border:1px solid #617ea6;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;color:#d1e7ff}[hidden]{display:none!important}@media(max-width:600px){body{padding:24px 18px;align-items:center;background-position:42% center;background-attachment:scroll}.card{padding:32px 28px 24px;border-radius:16px;width:100%}.brand{margin-bottom:28px;font-size:12px}h1{font-size:42px}.description{font-size:15px}.eyebrow{font-size:9px;letter-spacing:1px}#instruction h1{font-size:34px}footer{margin-top:28px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Portrait video layout: generous text column and a fitted player. */
.card.watching{width:900px;padding:36px 40px 28px}
.watching .brand{margin-bottom:24px}
#instruction{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);column-gap:40px;align-content:center}
#instruction .back{grid-column:1;align-self:start;justify-self:start}
#instruction .eyebrow{grid-column:1;margin-top:20px;align-self:end}
#instruction h1{grid-column:1;font-size:46px;line-height:1.12;margin:16px 0;letter-spacing:-1.4px}
#instruction .description{grid-column:1;margin:0;align-self:start}
#instruction .video-wrap{grid-column:2;grid-row:1 / span 4;width:100%;max-width:320px;aspect-ratio:9/16;align-self:center;border-radius:18px;border:1px solid #799dcc55;background:#0c1c31;box-shadow:0 16px 40px #0c1c3155;display:grid;place-items:center}
#instruction video{width:100%;height:100%;max-height:none;object-fit:contain;background:#0c1c31}
#instruction .placeholder{width:100%;height:100%}
@media(min-width:761px){.watching .video-wrap{max-height:72svh;width:auto;justify-self:center}.watching footer{margin-top:24px}}
@media(max-width:760px){.card.watching{width:510px;padding:28px 24px 22px}#instruction{display:flex;flex-direction:column;gap:0}#instruction .back{margin-bottom:18px}#instruction .eyebrow{margin:0}#instruction h1{font-size:34px;margin:12px 0}#instruction .description{font-size:14px;line-height:1.65;margin-bottom:22px}#instruction .video-wrap{width:100%;max-width:300px;align-self:center;border-radius:14px} .watching .brand{margin-bottom:24px}.watching footer{text-align:center;margin-top:22px}}
@media(max-width:380px){.card.watching{padding:24px 18px}#instruction h1{font-size:30px}}

#instruction .video-wrap{display:flex;flex-direction:column;aspect-ratio:auto;overflow:hidden}
#instruction video{aspect-ratio:9/16;flex:1;min-height:0;object-fit:contain}
#instruction .placeholder{aspect-ratio:9/16}
.player-controls{width:100%;flex-shrink:0;padding:14px 14px 12px;background:#10233d;border-top:1px solid #ffffff18}
.player-row{display:flex;align-items:center;gap:8px;margin-top:9px}
.player-row button{display:grid;place-items:center;min-width:36px;min-height:38px;border-radius:9px;color:#e4f1ff;background:#ffffff0b;font-size:12px;padding:0 9px}
.player-row button:hover{background:#ffffff20}
.player-row .player-play{background:#40a6ee;color:#fff;font-size:18px;width:42px}
.player-row #fullscreen{font-size:25px;margin-left:0}
.player-time{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#c5d7ef;flex:1}
.seek{appearance:none;display:block;width:100%;height:6px;border-radius:9px;margin:8px 0;background:linear-gradient(to right,#40a6ee var(--progress,0%),#ffffff25 var(--progress,0%));cursor:pointer}
.seek::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #40a6ee30}
.seek::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}
.seek:focus-visible{outline:2px solid #a5dfff;outline-offset:6px}
#instruction .video-wrap:fullscreen{width:100%;max-width:none;max-height:none;border:0;border-radius:0;background:#081322;justify-content:center}
#instruction .video-wrap:fullscreen video{aspect-ratio:auto;max-height:calc(100dvh - 88px);width:100%;flex:1}
#instruction .video-wrap:fullscreen .player-controls{max-width:700px;align-self:center}
@media(min-width:761px){#instruction .video-wrap{width:320px;max-height:none}#instruction video{max-height:65svh}}

.guide-title{font-size:36px;line-height:1.18;letter-spacing:-1px;overflow-wrap:break-word}
.kazakh-title{font-size:22px;line-height:1.4}
#instruction h1{font-size:36px;overflow-wrap:break-word}
#instruction .warning{grid-column:1;margin:22px 0 0;padding:16px 18px;border-radius:10px;background:#fff0ef;color:#b42318;font-size:15px;line-height:1.65;border:1px solid #ffc9c3;align-self:start}
#instruction .video-wrap{grid-row:1 / span 5}
@media(max-width:760px){.guide-title{font-size:30px}.kazakh-title{font-size:20px}#instruction h1{font-size:30px}#instruction .warning{margin:0 0 22px;font-size:14px}}

.brand-icon{border-radius:10px;overflow:hidden;background:#fff}.brand-icon img{display:block;width:100%;height:100%;object-fit:contain}

.brand-icon{width:64px;height:64px;border-radius:50%;padding:11px;background:linear-gradient(145deg,#fff,#eaf1fc);border:2px solid #ffffff70;box-shadow:0 5px 16px #0a20363b,0 0 0 5px #ffffff08;overflow:hidden}
.brand-icon img{width:100%;height:100%;object-fit:contain}

.guide-title span::after{display:none}