/* rangooo OTT layer */
.ott-sb{margin-right:6px}
html.ott-lock,html.ott-lock body{overflow:hidden}
.ott-s{position:fixed;inset:0;z-index:2147483000;background:rgba(246,246,242,.94);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);overflow-y:auto;opacity:0;transition:opacity .28s ease;color:var(--ink)}
.ott-s[hidden]{display:none}
.ott-s.on{opacity:1}
html[data-night="1"] .ott-s{background:rgba(9,14,22,.94)}
.ott-s-in{max-width:1240px;margin:0 auto;padding:clamp(20px,6vh,64px) clamp(18px,4vw,48px) 64px;transform:translateY(14px);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ott-s.on .ott-s-in{transform:none}
.ott-s-bar{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--line-strong);padding:6px 4px 12px;color:var(--muted)}
.ott-s-bar:focus-within{border-color:var(--accent);color:var(--accent)}
.ott-s-bar input{flex:1;min-width:0;border:0;outline:0;background:none;font:500 clamp(24px,4vw,44px)/1.2 var(--head);color:var(--ink);letter-spacing:-.01em}
.ott-s-bar input::placeholder{color:var(--muted);opacity:.6}
.ott-s-bar input::-webkit-search-cancel-button{display:none}
.ott-s-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.ott-s-x:hover{border-color:var(--ink)}
.ott-s-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px}
.ott-s-chips button{height:34px;padding:0 14px;border-radius:99px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 13.5px var(--ui);cursor:pointer;transition:background .2s,color .2s}
.ott-s-chips button:hover{background:var(--ink);color:var(--bg)}
.ott-s-h{margin:22px 2px 14px;font:600 13px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ott-s-h:empty{margin:10px 0}
.ott-st-h{margin:22px 2px 12px;font:600 13px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ott-st-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.ott-st{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px 8px 10px;border-radius:16px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);text-decoration:none;font:600 14.5px var(--ui);transition:transform .18s,background .2s,border-color .2s}
.ott-st:hover{transform:translateY(-2px);border-color:var(--accent,#145C63)}
.ott-st:active{transform:scale(.98)}
.ott-st:focus-visible{outline:3px solid #E8590C;outline-offset:2px}
.ott-st-i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(20,92,99,.10);font-size:20px;flex:none}
.ott-s-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 16px}
.ott-c{display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit;opacity:0;transform:translateY(14px);animation:ottin .5s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 35ms) both}
@keyframes ottin{to{opacity:1;transform:none}}
.ott-a{display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#fff;border:3px solid #fff;box-shadow:var(--sh-2);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.ott-a svg{display:block;width:100%;height:100%}
.ott-c:hover .ott-a,.ott-c:focus-visible .ott-a{transform:translateY(-6px) scale(1.04);box-shadow:0 22px 50px rgba(0,0,0,.28)}
.ott-c:focus-visible{outline:none}.ott-c:focus-visible .ott-a{outline:3px solid #E8590C}
.ott-t{font:600 14px/1.3 var(--ui);color:var(--ink)}
.ott-m{font:500 12px var(--ui);color:var(--muted)}
.ott-s-none{margin:40px 4px;font:500 18px var(--ui);color:var(--muted)}

/* header blends into the hero at the very top */
html.ott-top header.top{background:rgba(255,255,255,0);border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .3s,border-color .3s,backdrop-filter .3s}
html.ott-top[data-night="1"] header.top{background:rgba(15,23,32,0)}
html:not(.ott-top) header.top{transition:background .3s,border-color .3s}

/* cinematic rows (dark theme) */
html[data-night="1"] .kr-scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 56px),transparent 100%)}
html[data-night="1"] .kr-head h2{color:#F1F4F8;letter-spacing:-.01em}
html[data-night="1"] .kr-art{border-color:#1B2634;box-shadow:0 14px 34px rgba(0,0,0,.5)}
html[data-night="1"] .kr-t{color:#D7DEE8}
html[data-night="1"] .kr-card:hover .kr-art,html[data-night="1"] .kr-card:focus-within .kr-art{box-shadow:0 22px 56px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.14)}
html[data-night="1"] .kr-num{-webkit-text-stroke-color:rgba(233,238,242,.32)}
html[data-night="1"] .sechead h2{color:#F1F4F8}
html[data-night="1"] .story .title{color:#E9EEF2}
html[data-night="1"] .story{background:transparent;border-color:transparent;box-shadow:none}
html[data-night="1"] .story:hover{background:var(--surface);border-color:var(--line)}
@media (max-width:760px){.ott-s-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px 12px}.ott-s-in{padding-top:18px}}
@media (prefers-reduced-motion:reduce){.ott-c{animation:none;opacity:1;transform:none}.ott-s,.ott-s-in{transition:none}}
@media (max-width:520px){
  header.top .top-right{gap:6px!important;min-width:0}
  header.top .kn-btn,header.top .ott-sb{width:36px;height:36px;margin:0;border-radius:10px}
  header.top .rgs-hb{padding:0 10px!important;min-width:0}
  header.top .langwrap{min-width:0;flex:0 1 auto}
  header.top .langwrap .select{max-width:112px;padding-right:22px}
}
@media (max-width:420px){
  header.top{gap:8px!important;padding-inline:12px!important}
  header.top .brand .wm svg{width:84px;height:auto}
  header.top .top-right{gap:4px!important}
  header.top .kn-btn,header.top .ott-sb{width:34px;height:34px}
  header.top .langwrap .select{max-width:100px;font-size:13px}
}
@media (max-width:420px){
  header.top .langwrap .select{padding-left:26px!important;padding-right:18px!important;max-width:104px;font-size:12.5px}
  header.top .langwrap svg{width:15px;height:15px}
  header.top .langwrap>svg:first-child{left:8px}
  header.top .brand .wm svg{width:78px}
}
