.bks-rw{display:grid;grid-template-columns:repeat(5,var(--t));column-gap:calc(var(--t) * 5 / 58);justify-content:center}
.bks-t{display:flex;align-items:center;justify-content:center;width:var(--t);height:var(--t);box-sizing:border-box;border:max(2px,var(--t) * 2 / 58) solid #2A3550;
  border-radius:calc(var(--t) * 6 / 58);font:700 calc(var(--t) * .46)/1 var(--font-sans);font-style:normal;color:#E8EDF5}
.bks-t[data-s=tbd]{border-color:#4A7EC7}
.bks-t[data-s=correct]{background:#3B8EEA;border-color:#3B8EEA;color:#fff}
.bks-t[data-s=present]{background:#E8A838;border-color:#E8A838;color:#fff}
.bks-t[data-s=absent]{background:#2A3550;border-color:#2A3550;color:#fff}
.bks-t[data-f=a]{animation:bks-fa .4s}
.bks-t[data-f=b]{animation:bks-fb .4s}
@keyframes bks-fa{0%{transform:scaleY(1);animation-timing-function:ease}50%{transform:scaleY(0);animation-timing-function:ease}100%{transform:scaleY(1)}}
@keyframes bks-fb{0%{transform:scaleY(1);animation-timing-function:ease}50%{transform:scaleY(0);animation-timing-function:ease}100%{transform:scaleY(1)}}
.bks-pp{animation:bks-pop .11s ease-in-out}
@keyframes bks-pop{50%{transform:scale(1.12)}}

.bks-rl{display:grid;row-gap:120px}
.bks-st{--t:112px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:center}
.bks-st:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.bks-st:nth-child(even) .bks-m{order:2}
.bks-m{display:grid;justify-items:center;row-gap:28px;min-width:0}
.bks-st .bks-rw{perspective:calc(var(--t) * 7)}
.bks-tx{max-width:440px}
.bks-h{margin:0;font:600 48px/52px var(--font-sans);letter-spacing:-.02em;color:#f5f5f7}
.bks-p{margin:14px 0 0;font:600 21px/29px var(--font-sans);letter-spacing:-.012em;color:#86868b;text-wrap:pretty}
.bks-tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:calc(var(--t) * 8 / 58);width:calc(var(--t) * 5 + var(--t) * 20 / 58)}
.bks-tr i{display:block;height:6px;border-radius:3px;background:#2A3550;overflow:hidden}
.bks-tr b{display:block;height:100%;background:#4A7EC7;transform:scaleX(0);transform-origin:0 50%}
.bks-cap{margin:-8px 0 0;font:400 15px/20px var(--font-sans);color:#86868b;opacity:0}
.bks-cw{white-space:nowrap}
.bks-sw{display:inline-block;box-sizing:border-box;width:.64em;height:.64em;margin-right:.24em;vertical-align:-.02em;border:2px solid #2A3550;border-radius:.13em}
.bks-sw.bks-on{animation:bks-pop .3s ease-in-out}
.bks-sw.bks-on[data-c=correct]{background:#3B8EEA;border-color:#3B8EEA}
.bks-sw.bks-on[data-c=present]{background:#E8A838;border-color:#E8A838}
.bks-sw.bks-on[data-c=absent]{background:#2A3550;border-color:#2A3550}
.bks-kb{display:grid;row-gap:8px;width:min(100%,640px)}
.bks-kr{display:flex;gap:6px;justify-content:center}
.bks-kr-m{padding:0 4%}
.bks-k{flex:1 1 0;min-width:0;height:56px;display:grid;place-items:center;border-radius:8px;background:#2D3D5C;font:600 19px/1 var(--font-sans);color:#E8EDF5}
.bks-ka{flex:1.5 1 0;background:#3B5278}
.bks-k[data-s=correct]{background:#3B8EEA;color:#fff}
.bks-k[data-s=present]{background:#E8A838;color:#fff}
.bks-k[data-s=absent]{background:#1A2030;color:#7d8fb5}

.bks-bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.bks-x{grid-column:span var(--sp,6);display:flex;flex-direction:column;box-sizing:border-box;min-height:500px;padding:40px;border-radius:28px;background:#1d1d1f;overflow:hidden;
  transform:translateY(15vh)}
.bks-x.bks-in{transform:none;transition:transform 1s cubic-bezier(.39,.575,.565,1) var(--d,0ms)}
.bks-xt h3{margin:0;font:600 28px/32px var(--font-sans);letter-spacing:-.015em;color:#f5f5f7}
.bks-xt p{max-width:440px;margin:10px 0 0;font:600 17px/24px var(--font-sans);letter-spacing:-.016em;color:#86868b;text-wrap:pretty}
.bks-xv{margin-top:auto;padding-top:36px}
.bks-lad{display:grid;row-gap:10px}
.bks-lr{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;column-gap:16px;font:400 15px/20px var(--font-sans);color:#86868b}
.bks-lr i{display:flex;align-items:center;column-gap:12px;min-width:0;font-style:normal}
.bks-lr b{flex:none;display:block;height:28px;width:calc((100% - 60px) * var(--v) / 15);min-width:12px;border-radius:7px;background:#2D3D5C;transform:scaleX(0);transform-origin:0 50%}
.bks-lr b.bks-top{background:#3B8EEA}
.bks-lr em{flex:none;font:600 17px/20px var(--font-sans);font-style:normal;color:#f5f5f7;opacity:0}
.bks-lm{margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.bks-lm em{color:#ff6961}
.bks-lm small{font:400 13px/17px var(--font-sans);color:#86868b;opacity:0}
.bks-live .bks-lr b{transform:none;transition:transform .7s cubic-bezier(.33,1,.68,1) calc(var(--i) * 100ms)}
.bks-live .bks-lr :is(em,small){opacity:1;transition:opacity .4s ease calc(var(--i) * 100ms + 400ms)}
.bks-sk{--t:46px}
.bks-x-streak .bks-xv,.bks-x-streakb .bks-xv{margin:auto 0}
.bks-skr{display:flex;flex-wrap:wrap;gap:6px}
.bks-skr .bks-t{flex:none}
.bks-sks{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.bks-ws{display:grid;justify-items:center;row-gap:2px;min-width:112px;padding:14px 20px;border-radius:14px;background:#131929;opacity:0;transform:translateY(10px)}
.bks-ws b{font:700 26px/30px var(--font-sans);color:#f5f5f7;white-space:nowrap}
.bks-ws small{font:400 13px/17px var(--font-sans);color:#a1a1a6;white-space:nowrap}
.bks-live .bks-ws{opacity:1;transform:none;transition:opacity .4s ease calc(550ms + var(--i) * 150ms),transform .5s cubic-bezier(.2,.9,.25,1) calc(550ms + var(--i) * 150ms)}
.bks-bn{display:grid;row-gap:6px}
.bks-br{display:flex;justify-content:space-between;align-items:center;column-gap:16px;padding:11px 16px;border-radius:12px;background:#131929;font:400 17px/22px var(--font-sans);color:#d2d2d7;
  opacity:0;transform:translateY(10px)}
.bks-br b{font:700 17px/22px var(--font-sans);color:#f5f5f7}
.bks-br.bks-on{background:#1b3256;box-shadow:inset 0 0 0 1.5px #3B8EEA;color:#f5f5f7}
.bks-live .bks-br{opacity:1;transform:none;transition:opacity .4s ease calc(var(--i, 0) * 100ms),transform .5s cubic-bezier(.2,.9,.25,1) calc(var(--i, 0) * 100ms)}
.bks-bn1{margin-top:16px}
.bks-bn1 .bks-br{transition-delay:calc(var(--d,0ms) + 1500ms)}
.bks-mn{--t:60px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.bks-mn .bks-rw{justify-content:start}
.bks-mv{opacity:0;transform:translateY(10px)}
.bks-mv b{display:block;font:600 56px/60px var(--font-sans);letter-spacing:-.02em;color:#ff6961}
.bks-mv small{display:block;font:400 15px/20px var(--font-sans);color:#86868b}
.bks-live .bks-mv{opacity:1;transform:none;transition:opacity .5s ease 2.2s,transform .6s cubic-bezier(.2,.9,.25,1) 2.2s}
.bks-x-place{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto;column-gap:32px;padding-bottom:0}
.bks-x-place .bks-xt{padding-bottom:40px}
.bks-x-place .bks-xv{align-self:end;margin:0;padding:0}
.bks-ps{height:460px;overflow:hidden}
.bks-ps img{display:block;width:300px;height:100%;object-fit:cover;object-position:50% 0;border-radius:30px 30px 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.08);transform:translateY(80px) scale(1.08);transform-origin:50% 0}
.bks-live .bks-ps img{transform:none;transition:transform 1.5s cubic-bezier(.33,0,.83,1)}

.bks-dl .bks-c{opacity:0;transform:translateY(30px)}
.bks-go .bks-dl .bks-c{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.42,0,.58,1) calc(var(--i) * 150ms),transform .7s cubic-bezier(.42,0,.58,1) calc(var(--i) * 150ms)}
.bks-go .bks-dl .bks-c.bks-c0{transition:none}
.bks-dl .bks-card{position:relative;display:grid;place-items:center;box-sizing:border-box}
.bks-eye{position:absolute;left:70%;top:30%;width:1px;height:1px;pointer-events:none}
html:root .bks-dl .bks-card{padding-top:0}
html:root .bks-dl .bks-card img{margin:0;border-radius:0;box-shadow:none}
.bks-dl{padding-bottom:6px}
.bks-own{display:grid;row-gap:34px;width:100%;box-sizing:border-box;padding:0 28px}
.bks-pw{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start}
html:root .bks-dl .bks-av,.bks-av{display:grid;place-items:center;width:36px;height:36px;margin:2px 0 0;border-radius:50%;background:#2D3D5C;font:600 13px/1 var(--font-sans);color:#E8EDF5;object-fit:cover}
.bks-pr{--t:40px}
.bks-pr .bks-rw{justify-content:start}
.bks-q{color:#a1a1a6}
.bks-past{display:flex;column-gap:12px;height:18px;margin-top:12px;overflow:hidden;font:600 13px/18px var(--font-sans);letter-spacing:.06em;color:#86868b}
.bks-past span{flex:none;text-decoration:line-through;text-decoration-color:rgba(134,134,139,.7);transition:opacity .5s ease}
.bks-past .bks-new{opacity:0}
.bks-clk{--t:56px;display:grid;justify-items:center;row-gap:34px}
.bks-ib{display:grid;justify-items:center;row-gap:4px;padding:14px 24px;border-radius:16px;background:#131929;box-shadow:inset 0 0 0 1px #2A3550}
.bks-ib b{font:700 28px/32px var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:#E8EDF5;white-space:nowrap}
.bks-ib small{font:400 13px/17px var(--font-sans);color:#a1a1a6;white-space:nowrap}
.bks-dl .bks-card[data-k=wait]{background:#0D1117}
.bks-wt{position:absolute;inset:24px 0 0;overflow:hidden}
.bks-wsc{--w:300px;position:absolute;left:50%;top:0;width:var(--w);margin-left:calc(var(--w) / -2);transform:translateY(calc(var(--w) * -.55));transition:transform .7s cubic-bezier(.2,.8,.25,1),opacity .5s ease}
html:root .bks-dl .bks-wsc img{display:block;width:100%;height:auto}
.bks-wsc.bks-off{transform:translateY(calc(var(--w) * -.55 + 100%));opacity:0;transition:transform .6s cubic-bezier(.55,0,.75,.3),opacity .45s ease .15s}
.bks-dc{--t:52px;display:grid;justify-items:center;row-gap:24px}
.bks-add{padding:8px 12px;border-radius:20px;background:#6B7FA3;box-shadow:0 2px 8px rgba(107,127,163,.35);font:700 13px/16px var(--font-sans);color:#fff;white-space:nowrap;
  visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
.bks-btn .bks-add{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.9,.25,1)}
.bks-btn.bks-press .bks-add{transform:scale(.94);transition-duration:.15s}
.bks-btn.bks-ok .bks-add{opacity:0;transform:translateY(-6px)}
.bks-shk .bks-rw{animation:bks-shake .4s ease-in-out}
@keyframes bks-shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.bks-vt{display:flex;gap:7px}
.bks-vt i{display:block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px #2A3550}
.bks-vt i.bks-on{background:#4A7EC7;box-shadow:none;animation:bks-pop .3s ease-in-out}
.bks-dl .bks-card .tgw{position:absolute;inset:0;width:auto;height:auto;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
html:root .bks-dl .tgw-hd img{width:40px;height:40px;margin:0;border-radius:50%}
.bks-dl .tgw-bd{-webkit-mask:none;mask:none}
.bks-dl .tgw-ls{will-change:auto}
.bks-dl .tgw-bot{grid-template-columns:minmax(0,1fr);max-width:92%}
.bks-dl .tgw-b{font-size:15px;line-height:20px;max-width:92%}
.bks-dl .tgw-bot .tgw-b{max-width:none}
.bks-sp{margin-top:8px}
.bks-gr{display:block;font-size:15px;line-height:19px;letter-spacing:1px;opacity:0}
.bks-lnk{color:#6ab3f3}
.bks-dl .tgw-m{visibility:hidden;opacity:0;transform:translateY(14px)}
.bks-dl .bks-play .tgw-m{visibility:visible;opacity:1;transform:none;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.9,.25,1)}
.bks-dl .bks-play .bks-gr{opacity:1;transition:opacity .35s ease calc(500ms + var(--r) * 160ms)}
.bks-dl .tgw-kb span{transition:background-color .15s ease}
.bks-dl .tgw-kb span.bks-tap{background:rgba(255,255,255,.2)}
.bks-nf{font-style:normal}

@media (max-width:1068px){
  .bks-st,.bks-st:nth-child(even){--t:72px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
  .bks-h{font-size:36px;line-height:40px}
  .bks-p{font-size:19px;line-height:26px}
  .bks-k{height:48px;font-size:17px}
  .bks-x,.bks-x[style]{grid-column:span 6}
  .bks-x-place{grid-template-columns:minmax(0,1fr) 220px;column-gap:24px}
  .bks-ps img{width:220px}
}
@media (max-width:734px){
  .bks-rl{row-gap:80px}
  .bks-st,.bks-st:nth-child(even){--t:min(64px,calc((100vw - 32px) / 5.4));grid-template-columns:minmax(0,1fr);row-gap:28px}
  .bks-st:nth-child(even) .bks-m{order:0}
  .bks-m{row-gap:20px}
  .bks-h{font-size:28px;line-height:32px}
  .bks-p{margin-top:10px;font-size:17px;line-height:23px}
  .bks-kb{row-gap:6px}
  .bks-kr{gap:4px}
  .bks-k{height:42px;border-radius:6px;font-size:15px}
  .bks-bento{grid-template-columns:minmax(0,1fr);gap:16px}
  .bks-x,.bks-x[style]{grid-column:1/-1;min-height:0;padding:28px 24px;border-radius:24px}
  .bks-xt h3{font-size:24px;line-height:28px}
  .bks-xt p{font-size:15px;line-height:21px}
  .bks-xv{padding-top:28px}
  .bks-lr{grid-template-columns:82px minmax(0,1fr);column-gap:12px;font-size:14px}
  .bks-lr b{height:24px;width:calc((100% - 52px) * var(--v) / 15)}
  .bks-lr em{font-size:15px}
  .bks-lm i{flex-wrap:wrap;row-gap:2px}
  .bks-lm small{flex-basis:100%}
  .bks-sk{--t:min(36px,calc((100vw - 136px) / 8))}
  .bks-skr{flex-wrap:nowrap;gap:5px}
  .bks-ws{min-width:0;padding:10px 14px}
  .bks-ws b{font-size:19px;line-height:23px}
  .bks-br{padding:10px 14px;font-size:15px}
  .bks-br b{font-size:15px}
  .bks-mn{--t:min(52px,calc((100vw - 32px - 48px) / 5.4))}
  .bks-mv b{font-size:44px;line-height:48px}
  .bks-x-place{grid-template-columns:minmax(0,1fr);padding-bottom:0}
  .bks-x-place .bks-xt{padding-bottom:0}
  .bks-x-place .bks-xv{justify-self:center;padding-top:28px}
  .bks-ps{height:340px}
  .bks-ps img{width:220px}
  .bks-own{row-gap:24px;padding:0 18px}
  .bks-pw{grid-template-columns:30px minmax(0,1fr);column-gap:10px}
  html:root .bks-dl .bks-av,.bks-av{width:30px;height:30px;font-size:11px}
  .bks-pr{--t:30px}
  .bks-past{column-gap:8px;margin-top:8px;font-size:11px;line-height:16px;height:16px}
  .bks-clk{--t:40px;row-gap:24px}
  .bks-ib{padding:10px 16px}
  .bks-ib b{font-size:21px;line-height:25px}
  .bks-ib small{font-size:12px;line-height:16px}
  .bks-wt{top:14px}
  .bks-wsc{--w:210px}
  .bks-dc{--t:38px;row-gap:18px}
  .bks-add{font-size:12px;line-height:15px;padding:7px 11px}
  .bks-vt{gap:5px}
  .bks-vt i{width:11px;height:11px}
  .bks-dl .tgw-hd{padding:10px 12px;gap:10px}
  html:root .bks-dl .tgw-hd img{width:32px;height:32px}
  .bks-dl .tgw-hd b{font-size:15px;line-height:19px}
  .bks-dl .tgw-hd small{font-size:12px;line-height:15px}
  .bks-dl .tgw-ls{padding:0 10px 12px}
  .bks-dl .tgw-b{font-size:13px;line-height:17px;padding:7px 10px 6px}
  .bks-dl .tgw-kb span{min-height:32px;padding:0 8px;font-size:12px}
  .bks-gr{font-size:12px;line-height:15px}
}