:root{
 --abyss:#07131a;
 --lantern:#e8dcc4;
 --tide:#2f7f9a;
 --buoy:#e26a2d;
 --kelp:#8fb9a8;
 --fog:#13242d;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
html,body,#app,.bay{margin:0;min-height:100%;overflow-x:hidden;width:100%;max-width:100%}
body{background:var(--abyss);color:var(--lantern);font:16px/1.5 Outfit,sans-serif}
button,input,select{font:inherit;color:inherit;background:none;border:0;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{opacity:.45}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--buoy);outline-offset:3px}
img{max-width:100%;display:block}
.ico{width:1.25em;height:1.25em;display:block;flex:none}
.piers button,.look button,.board,.acts button{display:inline-flex;align-items:center;gap:8px}
.now,.still-stage,main,.mast{max-width:100%}
.bay{min-height:100dvh;display:flex;flex-direction:column}
.mast{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:18px 28px;align-items:end;padding:28px 32px 18px;border-bottom:1px solid #1d3642;background:var(--abyss)}
.mark{font-family:Fraunces,serif;font-size:34px;font-weight:650;letter-spacing:-.04em;text-decoration:none;color:var(--lantern)}
.mark span{display:block;font-family:Outfit,sans-serif;font-size:12px;font-weight:400;letter-spacing:.18em;color:var(--kelp);margin-top:4px}
.line{margin:0;max-width:18em;color:#c9bda8;align-self:center}
.look{display:flex;border-bottom:1px solid var(--kelp);min-width:220px}
.look input{flex:1;padding:8px 0;min-width:0;outline:0}
.look button,.board{background:var(--buoy);color:#2a1208;padding:8px 16px;font-weight:600;transition:filter .2s,transform .2s}
.look button:hover,.board:hover{filter:brightness(1.1);transform:translateY(-1px)}
.lang{border:1px solid #35515c;padding:6px 8px;background:var(--fog);align-self:end;max-width:12rem}
.piers{display:flex;gap:4px;padding:0 32px;overflow:auto;border-bottom:1px solid #1d3642}
.piers button{padding:14px 16px;color:#9bb0b8;white-space:nowrap;transition:color .25s,box-shadow .25s}
.piers button.on{color:var(--lantern);box-shadow:inset 0 -2px 0 var(--buoy);animation:buoy-pulse 2.8s ease-in-out infinite}
.now{position:relative;margin:28px 32px 0}
.still-stage{position:relative;background:#0c1c24;overflow:hidden}
.still-stage img,.preview-video{width:100%;height:min(68vh,560px);object-fit:cover;filter:saturate(.86)}
.still-stage img{animation:drift 22s ease-in-out infinite}
.still-stage::after{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
 background:linear-gradient(180deg,transparent 42%,#07131ae8 100%),radial-gradient(90% 42% at 50% 100%,#2f7f9a55,transparent 72%);
 animation:tide-wash 8s ease-in-out infinite;
}
.preview-video{position:absolute;inset:0;opacity:0;pointer-events:none;background:#000;transition:opacity .7s ease;z-index:0}
img.preview-video{animation:none}
.preview-video.is-on{opacity:1}
.still-open{position:absolute;inset:0;z-index:2}
.now-copy{position:absolute;left:28px;bottom:28px;max-width:min(28rem,70%);text-shadow:0 10px 30px #07131a;text-align:left;z-index:3;padding:0;animation:lantern-rise .9s ease both}
.now-copy p{margin:0 0 8px;color:var(--kelp)}
.now-copy h1{margin:0 0 10px;font-family:Fraunces,serif;font-size:clamp(28px,5vw,54px);line-height:1.1;font-weight:650}
.now-shift{position:absolute;right:20px;bottom:20px;display:flex;gap:8px;z-index:3}
.now-shift button{border:1px solid var(--lantern);padding:6px 10px;background:#07131acc;transition:background .2s,color .2s}
.now-shift button:hover{background:var(--lantern);color:var(--abyss)}
main{padding:28px 32px 64px;flex:1}
.dock-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px;flex-wrap:wrap}
.dock-head h2{margin:0;font-family:Fraunces,serif;font-size:32px;font-weight:500}
.dock-head p{margin:6px 0 0;color:#9bb0b8}
.filters{display:flex;gap:10px}
select{border:1px solid #35515c;padding:6px 8px;background:var(--fog)}
.ghost{border-bottom:1px solid var(--kelp);padding:6px 0}
.wait{padding:48px 0;color:#9bb0b8;animation:kelp-breathe 1.8s ease-in-out infinite}
.dock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px}
.dock article,.poster,.meta{min-width:0;max-width:100%}
.dock article:nth-child(-n+8){animation:tide-in .7s cubic-bezier(.22,.7,.2,1) both}
.dock article:nth-child(1){animation-delay:.04s}
.dock article:nth-child(2){animation-delay:.1s}
.dock article:nth-child(3){animation-delay:.16s}
.dock article:nth-child(4){animation-delay:.22s}
.dock article:nth-child(5){animation-delay:.28s}
.dock article:nth-child(6){animation-delay:.34s}
.dock article:nth-child(7){animation-delay:.4s}
.dock article:nth-child(8){animation-delay:.46s}
.poster{padding:0;width:100%;background:#0c1c24;overflow:hidden}
.poster img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.86);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}
.poster:hover img{transform:scale(1.07);filter:saturate(1)}
.meta h3{margin:10px 0 4px;font-family:Fraunces,serif;font-size:20px;font-weight:500;line-height:1.25}
.meta p{margin:0;color:#9bb0b8;font-size:14px}
.acts{display:flex;gap:12px;margin-top:10px}
.acts button{color:var(--kelp);transition:color .2s}
.acts button.on{color:var(--buoy)}
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kinds button{border:1px solid #35515c;padding:22px;text-align:left;background:var(--fog);transition:transform .25s,border-color .25s}
.kinds button:hover{transform:translateY(-4px);border-color:var(--kelp)}
.kinds strong{display:block;font-family:Fraunces,serif;font-size:24px}
.pages{display:flex;gap:16px;align-items:center;margin-top:32px}
.pages button{border:1px solid var(--lantern);padding:6px 12px;transition:background .2s,color .2s}
.pages button:hover:not(:disabled){background:var(--lantern);color:var(--abyss)}
footer{display:flex;justify-content:space-between;padding:18px 32px 28px;color:#6d8791;border-top:1px solid #1d3642}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--lantern);color:var(--abyss);padding:10px 16px;z-index:7;animation:float-up .4s ease}
.veil{position:fixed;inset:0;background:#07131ae8;display:grid;place-items:center;padding:20px;z-index:8;animation:fog-in .3s ease}
.pass,.player{background:var(--fog);border:1px solid #35515c;width:min(920px,100%);padding:28px;position:relative;animation:dock-up .36s cubic-bezier(.2,.8,.2,1)}
.pass{width:min(420px,100%)}
.pass h2,.player-copy h2{font-family:Fraunces,serif;margin:0 0 8px}
.pass form{display:grid;gap:12px;margin:18px 0}
.pass label{display:grid;gap:6px}
.pass input{border:1px solid #35515c;padding:10px;background:#07131a}
.x{position:absolute;top:12px;right:12px;color:var(--kelp)}
.player video{width:100%;background:#000;aspect-ratio:16/9}
.player-copy{margin-top:16px}
.related{margin-top:18px;display:grid;gap:8px}
.related h3{margin:0;font-size:14px;color:var(--kelp)}
.related button{text-align:left;color:var(--lantern)}
html[dir=rtl] .now-copy{left:auto;right:28px;text-align:right}
html[dir=rtl] .now-shift{right:auto;left:20px}
html[dir=rtl] .look{flex-direction:row-reverse}
@keyframes drift{
 0%{transform:scale(1.05) translate(0,0)}
 50%{transform:scale(1.14) translate(-2%,1.4%)}
 100%{transform:scale(1.05) translate(0,0)}
}
@keyframes tide-wash{
 0%,100%{opacity:.82}
 50%{opacity:1}
}
@keyframes lantern-rise{
 from{opacity:0;transform:translateY(18px)}
 to{opacity:1;transform:none}
}
@keyframes buoy-pulse{
 0%,100%{box-shadow:inset 0 -2px 0 var(--buoy)}
 50%{box-shadow:inset 0 -2px 0 var(--buoy),0 0 16px #e26a2d55}
}
@keyframes tide-in{
 from{clip-path:inset(16% 0 0 0);opacity:0}
 to{clip-path:inset(0);opacity:1}
}
@keyframes fog-in{from{background:#07131a00}to{background:#07131ae8}}
@keyframes dock-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes float-up{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes kelp-breathe{0%,100%{opacity:.5}50%{opacity:1}}
@media(max-width:899px){
 .still-stage img{animation:none}
 .mast{
  position:sticky;top:0;z-index:6;
  grid-template-columns:1fr auto auto;
  grid-template-areas:"mark lang board" "look look look";
  gap:8px 8px;
  align-items:center;
  padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
  background:#07131af5;
 }
 .mark{grid-area:mark;font-size:22px}
 .mark span,.line{display:none}
 .board{grid-area:board;padding:8px 12px;min-height:40px;white-space:nowrap}
 .lang{grid-area:lang;max-width:5.8rem;font-size:12px;padding:6px 4px;align-self:center;min-height:40px}
 .look{grid-area:look;min-width:0;width:100%}
 .look input{padding:10px 0}
 .look button{flex:0 0 auto;min-height:40px}
 .piers{
  position:fixed;left:0;right:0;bottom:0;z-index:6;width:100%;max-width:100%;
  margin:0;padding:6px 2px calc(8px + env(safe-area-inset-bottom,0px));
  background:#0a1a21;border-bottom:0;border-top:1px solid #1d3642;
  gap:0;overflow:hidden;
 }
 .piers button{
  flex:1 1 0;min-width:0;min-height:52px;padding:8px 2px;
  flex-direction:column;gap:3px;font-size:10px;line-height:1.15;text-align:center;
 }
 .piers button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .piers .ico{width:22px;height:22px}
 .look button span,.board span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .look button,.board{width:40px;min-width:40px;padding:0;display:grid;place-items:center}
 .lang{max-width:4.6rem;min-width:0}
 .now-shift button{width:44px;padding:0;display:grid;place-items:center}
 .now{overflow:hidden}
 .piers button.on{box-shadow:inset 0 2px 0 var(--buoy)}
 .now{margin:0}
 .now-copy{left:14px;right:14px;bottom:16px;max-width:none}
 .now-copy h1{
  font-size:clamp(22px,6.4vw,32px);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
 }
 .now-shift{
  top:12px;right:12px;left:12px;bottom:auto;justify-content:space-between;
 }
 .now-shift button{
  min-width:44px;min-height:44px;
  background:#07131ae6;backdrop-filter:blur(8px);
 }
 .still-stage img,.preview-video{height:min(58dvh,440px);filter:none}
 main{padding:14px 12px calc(96px + env(safe-area-inset-bottom,0px));margin:0}
 .dock{grid-template-columns:minmax(0,1fr);gap:18px}
 .kinds{grid-template-columns:minmax(0,1fr)}
 .dock article,.poster,main,.meta,.filters,select{min-width:0;max-width:100%}
 .dock-head{margin-bottom:14px}
 .dock-head h2{font-size:22px}
 .filters{width:100%}
 .filters select{flex:1;min-height:40px}
 .meta h3{font-size:17px}
 .acts button{min-height:40px;padding:8px 4px}
 .pages button{min-height:44px;padding:8px 16px}
 footer{display:none}
 .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 .veil{padding:0;align-items:end}
 .player,.pass{width:100%;max-height:100dvh;overflow:auto;border:0;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))}
 .x{top:8px;right:8px;min-width:44px;min-height:44px}
 .poster:hover img{transform:none}
}
@media(min-width:640px) and (max-width:899px){
 .dock,.kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
}