.portrait-watch-page{display:flow-root;min-height:100vh;min-height:100dvh;background:#000;color:#fff}
.portrait-watch{position:relative;width:min(100%,56.25dvh);max-width:28rem;height:100vh;height:100dvh;margin:0 auto;overflow:hidden;background:#000;isolation:isolate}
.portrait-watch__scene,.portrait-watch__media{position:absolute;inset:0}
.portrait-watch__scene{touch-action:pan-x}
.portrait-watch__scene a,.portrait-watch__scene button{touch-action:manipulation}
.portrait-watch__media{overflow:hidden;background:#000}
.portrait-watch__poster,.portrait-watch__video{display:block;width:100%;height:100%;object-fit:cover}
.portrait-watch__poster{filter:blur(.75rem) brightness(.45);transform:scale(1.08);user-select:none}
.portrait-watch__shade{position:absolute;inset:0;background:linear-gradient(to top,#000b,transparent 55%,#0006);pointer-events:none}
.portrait-watch--has-source .portrait-watch__shade{background:linear-gradient(to bottom,#0008,transparent 25%)}
.portrait-watch__message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:2rem 4.5rem 3rem 2rem;text-align:center;background:#0002}
.portrait-watch__message[hidden],.portrait-watch__sheet[hidden]{display:none}
.portrait-watch__message-icon{display:grid;width:4rem;height:4rem;place-items:center;border:1px solid #ffffff1a;border-radius:50%;background:#ffffff0d;color:#ffffffe0;backdrop-filter:blur(.75rem)}
.portrait-watch__message h1{margin:0;font-size:1.125rem;font-weight:750;line-height:1.3;text-wrap:balance}
.portrait-watch__message p{max-width:17rem;margin:0;color:#ffffffb3;font-size:.8125rem;line-height:1.6;text-wrap:pretty}
.portrait-watch__recovery{display:flex;justify-content:center;gap:.75rem;margin-top:.25rem}
.portrait-watch__recovery[hidden],.portrait-watch__recovery button[hidden]{display:none}
.portrait-watch__recovery .primary-button{min-height:2.75rem;padding:.75rem 1.25rem;border:0;cursor:pointer}
.portrait-watch__unlock-actions{display:flex;align-items:center;flex-direction:column;gap:16px;margin-top:6px}.portrait-watch__unlock-actions>a{font-size:12px;color:#fff;text-decoration:underline;text-underline-offset:4px}.portrait-watch--has-source .portrait-watch__footer{bottom:44px}.portrait-watch--has-source .portrait-watch__topbar{right:44px}
.portrait-watch__topbar{position:absolute;z-index:3;inset:0 0 auto;display:flex;align-items:center;gap:.75rem;padding:max(1rem,env(safe-area-inset-top)) 1rem 1rem;pointer-events:none}
.portrait-watch__circle{display:flex;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;align-items:center;justify-content:center;border-radius:50%;background:#0006;color:#fff;backdrop-filter:blur(.75rem)}
.portrait-watch__topbar>a{pointer-events:auto}
.portrait-watch__topbar>div{display:flex;min-width:0;flex-direction:column}
.portrait-watch__topbar strong{overflow:hidden;color:#fff;font-size:.875rem;font-weight:700;line-height:1.4;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px #0008}
.portrait-watch__topbar>div>span{margin-top:.2rem;color:#ffffffb3;font-size:.75rem;line-height:1.4}
.portrait-watch__actions{position:absolute;z-index:3;right:.75rem;bottom:9.5rem;display:flex;align-items:center;flex-direction:column;gap:.875rem}
.portrait-watch__actions>button{display:flex;max-width:4.5rem;align-items:center;flex-direction:column;gap:.25rem;border:0;padding:0;background:transparent;color:#fff;cursor:pointer}
.portrait-watch__actions small{max-width:4.5rem;overflow:hidden;color:#fff;font-size:.6875rem;font-weight:650;line-height:1.4;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px #000}
.portrait-watch__actions .is-saved>.portrait-watch__circle{color:var(--primary)}
.portrait-watch__actions>button:hover>.portrait-watch__circle,.portrait-watch__topbar>a:hover{background:#0009}
.portrait-watch__footer{position:absolute;z-index:3;inset:auto 0 0;display:flex;min-height:5rem;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1rem max(1rem,env(safe-area-inset-bottom));background:linear-gradient(to top,#000a,transparent);color:#ffffffe5;font-size:.875rem}
.portrait-watch__footer>a{display:inline-flex;min-height:2.75rem;align-items:center;gap:.375rem;color:#fff;font-size:.75rem;font-weight:700}
.portrait-watch__last{color:#ffffff80;font-size:.75rem}
.portrait-watch--has-source .portrait-watch__footer{bottom:3rem;min-height:4rem;padding-block:.5rem;background:transparent;pointer-events:none}
.portrait-watch--has-source .portrait-watch__footer>a{pointer-events:auto}
.portrait-watch__sheet{position:absolute;z-index:10;inset:0;display:flex;align-items:flex-end}
.portrait-watch__sheet-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0009;cursor:pointer}
.portrait-watch__sheet-card{position:relative;width:100%;max-height:70%;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:1.35rem 1.35rem 0 0;padding:1rem 1rem max(1rem,env(safe-area-inset-bottom));background:var(--card);color:#fff;box-shadow:0 -1.25rem 4rem #0005;scrollbar-width:thin}
.portrait-watch__sheet-card:focus{outline:none}
.portrait-watch__sheet-card>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.portrait-watch__sheet-card>header>div{min-width:0}
.portrait-watch__sheet-card h2{margin:0;font-size:1rem;font-weight:750;line-height:1.4;text-wrap:balance}
.portrait-watch__sheet-card header p{margin:.25rem 0 0;color:var(--muted-foreground);font-size:.75rem}
.portrait-watch__sheet-close{display:flex;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--secondary,#332b2d);color:#fff;cursor:pointer}
.portrait-watch__episode-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.625rem}
.portrait-watch__episode-grid>a{position:relative;display:flex;height:2.75rem;align-items:center;justify-content:center;border:1px solid transparent;border-radius:.5rem;background:var(--secondary,#332b2d);color:#fff;font-size:.875rem;font-weight:700;transition:background-color .15s,border-color .15s}
.portrait-watch__episode-grid>a:hover{border-color:color-mix(in oklch,var(--primary) 65%,transparent)}
.portrait-watch__episode-grid>a.is-current{background:var(--primary);color:#fff}
.portrait-watch__episode-grid>a>.ph{position:absolute;top:.25rem;right:.25rem;color:var(--accent,#dcae50)}
.portrait-watch__episode-grid>a.is-current>.ph{color:#fff}
.portrait-watch__empty{margin:0;padding:1rem 0;color:var(--muted-foreground);font-size:.8125rem;line-height:1.5}
@media(min-width:64rem){.portrait-watch{height:calc(100dvh - 3rem);margin-block:1.5rem;border:1px solid var(--border);border-radius:1.5rem;box-shadow:0 1.5rem 4rem #0009}.portrait-watch__topbar{padding:1rem}.portrait-watch__footer{padding-bottom:1rem}.portrait-watch__sheet-card{padding-bottom:1rem}}
@media(prefers-reduced-motion:reduce){.portrait-watch__episode-grid>a{transition:none}}