/* OpenTesla — original web adaptation. Apple component references: frontend/DESIGN.md. */
:root{color-scheme:dark;--viewport-height:100vh;--header-height:92px;--bg:#0b0b0d;--surface:#1c1c1f;--elevated:#2b2b2e;--ink:#f5f5f7;--muted:#a1a1a9;--accent:#e3e9ef;--line:#ffffff12;--gutter:clamp(24px,4vw,72px);--radius:20px;font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;font-optical-sizing:auto}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:0}button,a,input,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.38;cursor:default}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #acd2ff;outline-offset:4px}button:active,.button:active{transform:scale(.97)}[hidden]{display:none!important}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:white;color:black;padding:15px;border-radius:12px}.skip-link:focus{top:15px}#main{min-height:76vh;outline:none}
/* The iOS large segmented control: 50px shell, 46px selection, 2px inset. */
.app-header{position:sticky;top:0;z-index:20;height:var(--header-height);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#0b0b0de8;backdrop-filter:blur(28px) saturate(140%)}
.brand{display:inline-flex;align-items:center;gap:10px;min-width:190px;font-size:25px;font-weight:720;letter-spacing:-1.2px}.brand img{width:30px;height:30px;border-radius:9px}
.app-header nav{display:flex;gap:4px;padding:2px;border-radius:100px;background:#7676801f;box-shadow:inset 0 0 0 1px #ffffff05}.app-header nav a{min-height:46px;padding:12px 24px;border-radius:100px;font-size:13px;font-weight:550;display:flex;align-items:center;justify-content:center;color:#b9b9c1;white-space:nowrap;transition:background .18s,color .18s}.app-header nav a:hover{color:#fff;background:#ffffff08}.app-header nav a[aria-current=page]{background:#f5f5f7;color:#171719;font-weight:650;box-shadow:0 2px 5px #0002}
.header-tools{min-width:190px;display:flex;justify-content:flex-end;gap:10px}.icon-button{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#232326;border:1px solid #ffffff08;transition:background .18s}.icon-button:hover,.icon-button[aria-current=page]{background:#3a3a3e}.icon-button svg{width:20px;height:20px}.header-tools circle{fill:#232326}
.home-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:22px var(--gutter) 26px;max-width:1800px;margin:auto}.eyebrow{font-size:10px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:#b4b4bd;margin:0 0 10px;display:flex;align-items:center;gap:8px}.eyebrow svg{width:16px;height:16px}.home-heading h2{font-size:36px;line-height:1.12;font-weight:700;letter-spacing:-1.25px;margin:0}.browse-link{margin-bottom:0}
.hero{position:relative;isolation:isolate;overflow:hidden;height:610px;margin:0 var(--gutter) 32px;border-radius:26px;background:#151c19;box-shadow:0 24px 65px #0003}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:-3}.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#07110c9c,transparent 72%),linear-gradient(0deg,#0c1110fa 0%,#0a120ca3 22%,transparent 80%)}.hero::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff14;pointer-events:none}.hero-topline{position:absolute;inset:28px 34px auto;display:flex;justify-content:space-between;align-items:center}.feature-label{font-size:10px;letter-spacing:.19em;font-weight:700;color:#ffffffd1}.feature-counter{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.feature-counter span{color:#ffffff70}
.hero-content{position:absolute;left:clamp(28px,4vw,64px);right:28px;bottom:140px;max-width:510px}.hero-content .eyebrow{color:#f0f1e7;font-size:11px;letter-spacing:.13em;margin-bottom:12px}.hero h1{font-size:clamp(80px,8.2vw,126px);font-weight:740;line-height:.95;letter-spacing:-.065em;margin:0 0 20px;text-shadow:0 3px 40px #0002}.hero-description{max-width:340px;font-size:17px;line-height:1.55;color:#efefea;margin:0 0 16px}.hero-meta{display:flex;align-items:center;gap:10px;color:#c2c6bf;font-size:12px;font-weight:500;margin-bottom:23px}.meta-badge{border:1px solid #ffffff5a;border-radius:4px;padding:0 4px;font-size:10px;font-weight:650}.hero-actions{display:flex;gap:10px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;min-height:48px;border-radius:100px;font-size:14px;line-height:1.35;font-weight:650;white-space:nowrap;transition:background .18s,transform .12s}.button svg{width:18px;height:18px}.button.primary{color:#151517;background:#f5f5f7;box-shadow:0 2px 8px #0002}.button.primary:hover{background:#fff}.button.secondary{color:#f5f5f7;background:#ffffff18;border:1px solid #ffffff12;backdrop-filter:blur(18px)}.button.secondary:hover{background:#ffffff2b}.play-icon{fill:currentColor;stroke:none}
.hero-bottom{position:absolute;bottom:24px;left:clamp(28px,4vw,64px);right:28px;display:flex;gap:32px;align-items:center;justify-content:space-between;border-top:1px solid #ffffff20;padding-top:19px}.hero-note{font-size:12px;line-height:1.7;color:#afb7af;white-space:nowrap}.hero-note strong{font-weight:550;color:#eff0eb}.hero-switcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(64%,660px)}.hero-switcher button{display:flex;align-items:center;gap:12px;padding:8px;min-height:66px;background:#ffffff04;border:1px solid transparent;border-radius:13px;text-align:left;color:#ffffffb3;transition:background .18s,border-color .18s}.hero-switcher button:hover{background:#ffffff12}.hero-switcher button[aria-pressed=true]{background:#ffffff16;border-color:#ffffff26;color:white;box-shadow:0 3px 14px #0001}.hero-switcher img{width:74px;height:46px;object-fit:cover;border-radius:7px;flex-shrink:0}.hero-switcher span{display:flex;flex-direction:column;gap:3px}.hero-switcher small{font-size:8px;letter-spacing:.08em;color:#b8c0b8;white-space:nowrap}.hero-switcher strong{font-size:14px;font-weight:600}.hero-switcher i{margin-left:auto;margin-right:4px;width:5px;height:5px;border-radius:100%;background:transparent}.hero-switcher [aria-pressed=true] i{background:#fff}
.content-section{padding:20px var(--gutter) 32px;max-width:1800px;margin:auto}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.section-heading h2{font-size:25px;line-height:1.2;letter-spacing:-.65px;font-weight:670;margin:0}.section-heading p{font-size:13px;color:var(--muted);margin:7px 0 0}.section-actions{display:flex;align-items:center;gap:20px}.text-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:#b8b8c0;font-size:13px;font-weight:550}.text-link:hover{color:white}.text-link svg{width:15px;height:15px}.rail-controls{display:flex;gap:6px}.rail-controls button{width:44px;height:44px;border-radius:50%;background:#222225;display:grid;place-items:center;color:#c1c1c8}.rail-controls button:hover{background:#343439}.rail-controls svg{width:17px;height:17px}.video-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:5px 3px 16px;margin:-5px -3px -16px;overscroll-behavior-x:contain}.video-rail::-webkit-scrollbar{display:none}.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px}.video-card{min-width:0;scroll-snap-align:start;position:relative}.video-card a{display:block;border-radius:14px}.card-art{aspect-ratio:16/9;position:relative;overflow:hidden;background:#252528;border-radius:14px;box-shadow:0 5px 16px #0003}.card-art img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s ease}.card-art img.unavailable{visibility:hidden}.card-art::after{content:"";position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#0006);pointer-events:none}.duration{position:absolute;z-index:1;bottom:10px;right:10px;background:#111111aa;backdrop-filter:blur(12px);padding:3px 6px;border-radius:5px;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}.card-copy{padding:13px 2px 3px}.card-copy h3{margin:0 0 5px;font-size:14px;font-weight:590;line-height:1.4;letter-spacing:-.12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-copy p{font-size:12px;color:#a1a1aa;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-save{position:absolute;top:9px;right:9px;z-index:3;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#171719ba;border:1px solid #ffffff24;backdrop-filter:blur(12px);opacity:1;transition:opacity .18s}.card-save svg{width:18px;height:18px}.card-save[aria-pressed=true],.video-card:focus-within .card-save{opacity:1}.card-play{position:absolute;bottom:14px;left:14px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:white;color:#141416;z-index:2;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}.card-play svg{width:18px;height:18px;fill:currentColor;stroke:none}.card-progress{position:absolute;bottom:0;left:0;height:3px;background:#fff;z-index:2}
@media(hover:hover){.video-card:hover img{transform:scale(1.025)}.video-card:hover .card-save{opacity:1}.video-card:hover .card-play,.video-card:focus-within .card-play{opacity:1;transform:none}}
.collections{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.collection{position:relative;min-height:150px;padding:27px 28px;border-radius:18px;overflow:hidden;background:#1d2824;box-shadow:inset 0 0 0 1px #ffffff09;transition:background .2s}.collection:nth-child(2){background:#28212a}.collection:nth-child(3){background:#232630}.collection span{font-size:9px;font-weight:650;letter-spacing:.13em;color:#d1d4cf}.collection h3{font-size:27px;letter-spacing:-.85px;line-height:1.12;font-weight:620;margin:12px 0 0;max-width:200px}.collection>svg{position:absolute;width:95px;height:95px;right:22px;bottom:-5px;color:#ffffff12;stroke-width:1.2;transform:rotate(-12deg)}.collection .collection-arrow{right:22px;bottom:auto;top:24px;transform:none;width:18px;height:18px;color:#c3c5cb}.collection:hover{filter:brightness(1.15)}
.page{padding:46px var(--gutter) 30px;max-width:1800px;margin:auto}.page-heading{margin-bottom:34px}.page-heading h1{font-size:clamp(36px,4vw,58px);letter-spacing:-.045em;line-height:1.1;font-weight:700;margin:0 0 15px}.page-heading p:not(.eyebrow){font-size:15px;line-height:1.65;color:var(--muted);margin:0}.page-heading .eyebrow{margin-bottom:14px}.search-form{display:flex;align-items:center;gap:14px;padding:7px 8px 7px 22px;background:#212124;border:1px solid #ffffff15;border-radius:100px;max-width:800px;margin:28px 0 22px;box-shadow:inset 0 1px 3px #0002}.search-form>svg{flex-shrink:0;color:#aaaab3;width:20px;height:20px}.search-form input{width:100%;min-width:0;background:none;border:0;padding:12px 0;font-size:17px}.search-form input:focus-visible{outline:0}.search-form:focus-within{outline:3px solid #b9d8ff77;outline-offset:3px}.search-form input::placeholder{color:#92929c}.search-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 44px}.search-chips a{display:flex;align-items:center;min-height:44px;background:#1a1a1d;border:1px solid #ffffff0a;padding:9px 18px;border-radius:100px;color:#bebec6;font-size:12px}.search-chips a:hover{background:#2a2a2e}.results-heading{font-size:22px;letter-spacing:-.5px;margin:30px 0 22px}.search-featured{border-top:1px solid var(--line);padding-top:32px}.curated-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quiet-label{font-size:9px;letter-spacing:.15em;color:var(--muted)}.load-more{display:flex;justify-content:center;margin:36px 0}.empty-state{text-align:center;padding:80px 24px;border-radius:24px;background:#151517;border:1px solid var(--line)}.empty-state>svg{width:44px;height:44px;margin-bottom:18px;color:#aaaab4}.empty-state h2{font-size:25px;font-weight:650;letter-spacing:-.6px;margin:0 0 10px}.empty-state p{font-size:14px;line-height:1.6;max-width:360px;margin:0 auto 24px;color:var(--muted)}.inline-error{display:flex;align-items:center;gap:16px;min-width:0;flex-wrap:wrap;grid-column:1/-1;padding:28px 0;color:var(--muted);font-size:14px}.skeleton-art{aspect-ratio:16/9;border-radius:14px;background:#222225;animation:breathe 1.5s ease-in-out infinite alternate}.skeleton-line{width:65%;height:10px;border-radius:5px;background:#222225;margin:14px 0}.skeleton-line.short{width:40%;opacity:.6}.video-grid>.empty-state{grid-column:1/-1}@keyframes breathe{to{opacity:.5}}
.settings-page{max-width:1380px}.settings-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}.settings-groups{display:grid;gap:28px}.group-heading{font-size:13px;font-weight:550;margin:0 0 11px 18px;color:#b1b1ba}.settings-panel{background:#1b1b1e;border:1px solid #ffffff08;border-radius:18px;overflow:hidden}.setting-row{display:flex;align-items:center;gap:16px;padding:23px}.setting-row+.setting-row{border-top:1px solid var(--line)}.setting-icon{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border-radius:11px;background:#ffffff09;color:#d3d3dc}.setting-icon svg{width:20px;height:20px}.setting-copy{flex:1;min-width:0}.setting-copy h3{font-size:14px;font-weight:600;margin:0 0 5px}.setting-copy p{font-size:12px;color:#a2a2ad;line-height:1.55;max-width:350px;margin:0}.setting-row select,.watch-tools select{background:#303034;color:var(--ink);border:1px solid #ffffff0a;min-height:44px;border-radius:12px;padding:10px 12px;font-size:13px;font-weight:550}.setting-row .button{min-height:44px;font-size:12px;padding:10px 17px}.setting-row .text-link{white-space:nowrap}.settings-footnote{font-size:11px;color:#9595a0;line-height:1.6;margin:11px 18px 0}.version-badge{white-space:nowrap;font-size:11px;color:#a9a9b3;background:#ffffff07;padding:5px 9px;border-radius:7px}.settings-mark{border-radius:11px}.creator-credit{margin-top:31px;padding:30px;border-radius:22px;border:1px solid #ffffff10;background:linear-gradient(145deg,#232326,#18181b)}.creator-monogram{display:block;width:56px;height:56px;font-size:29px;letter-spacing:-2px;font-weight:600;background:#f0f0f2;color:#232327;text-align:center;line-height:53px;border-radius:16px;margin-bottom:36px}.creator-label{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#a6a6b0}.creator-name{font-size:34px;line-height:1.2;letter-spacing:-1.3px;font-weight:650;margin:10px 0 18px}.creator-description,.creator-license{font-size:12px;line-height:1.75;color:#adadb7;margin:0 0 12px}.creator-license a{color:#ededf4;text-decoration:underline;text-underline-offset:3px}.creator-copyright{border-top:1px solid #ffffff0d;padding-top:20px;font-size:10px;line-height:1.8;color:#9898a4;margin:30px 0 0}
.watch-page{max-width:1560px;padding-top:18px}.watch-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.back-button{display:flex;align-items:center;gap:8px;min-height:44px;background:transparent;color:#b7b7c0;font-size:13px;padding:0 8px 0 0}.back-button svg{width:18px;height:18px}.watch-tools{display:flex;align-items:center;gap:10px}.playback-quality{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:12px;color:#b8b8c4;padding:8px 12px;border-radius:12px;background:#1d1d20;font-variant-numeric:tabular-nums}.playback-quality svg{width:16px;height:16px}.player-shell{height:min(65vh,760px);min-height:220px;border-radius:22px;overflow:hidden;background:#000;position:relative;outline:1px solid #ffffff0f;box-shadow:0 20px 70px #0005}.player-shell .video-js{width:100%;height:100%;font-family:inherit}.video-js .vjs-big-play-button{height:76px;width:76px;line-height:74px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid white;background:#f5f5f7ed;color:#17171a;box-shadow:0 5px 30px #0005}.video-js:hover .vjs-big-play-button{background:white}.video-js .vjs-control-bar{background:linear-gradient(transparent,#000e);height:64px;padding:15px 16px 8px;font-size:12px}.video-js .vjs-play-progress{background:#f5f5f7}.video-js .vjs-load-progress{background:#ffffff40}.video-js .vjs-slider{background:#ffffff20}.video-js .vjs-poster{background-size:contain;background-color:#000}.player-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);background:#151518;font-size:14px}.watch-info{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding:28px 0 22px}.watch-info h1{font-size:clamp(24px,2.4vw,35px);line-height:1.25;letter-spacing:-.85px;font-weight:650;margin:0 0 12px}.watch-info .button{flex-shrink:0}.watch-meta{font-size:13px;color:var(--muted)}.description{white-space:pre-line;max-width:850px;max-height:75px;overflow:hidden;color:#b0b0bb;font-size:14px;line-height:1.75;margin-bottom:12px}.description.expanded{max-height:none}.description-toggle{min-height:44px;background:none;padding:6px 0;font-size:13px;font-weight:550}.watch-page .content-section{padding:32px 0 0}.watch-page #related-area{margin-top:30px;border-top:1px solid var(--line)}
.app-footer{display:flex;align-items:center;gap:18px;margin:48px var(--gutter) 0;padding:30px 0;border-top:1px solid var(--line);font-size:11px;color:#8b8b96}.footer-brand{font-size:19px;font-weight:650;letter-spacing:-.8px;color:#c0c0c8}#toast{position:fixed;z-index:60;bottom:28px;left:50%;max-width:90%;transform:translate(-50%,10px);padding:14px 24px;border-radius:100px;background:#353539ed;border:1px solid #ffffff1a;backdrop-filter:blur(24px);box-shadow:0 8px 30px #0004;font-size:13px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#toast.visible{opacity:1;transform:translate(-50%,0)}.no-script{padding:80px 30px}
@media(min-width:1700px){.hero{max-width:1656px;margin-left:auto;margin-right:auto;height:690px}.video-rail{grid-auto-columns:calc((100% - 66px)/4)}.video-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.curated-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.brand,.header-tools{min-width:0}.app-header nav a{padding:12px 18px}.hero{height:570px}.hero-switcher{width:70%;gap:6px}.hero-switcher button{gap:8px}.hero-switcher img{width:54px;height:40px}.hero-switcher i{display:none}.hero-switcher strong{font-size:12px}.hero-switcher small{font-size:7px}.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.settings-layout{gap:24px;grid-template-columns:minmax(0,1fr) 280px}.setting-row{padding:18px;gap:12px}.setting-icon{display:none}.collection h3{font-size:24px}.collection{padding:25px}}
@media(max-width:760px){
:root{--gutter:22px;--header-height:78px}.app-header{height:var(--header-height);gap:12px;backdrop-filter:none;background:#0b0b0d}.brand{font-size:23px;gap:9px}.brand img{width:28px;height:28px}.header-tools{gap:8px}.icon-button{width:44px;height:44px}.app-header nav{position:fixed;z-index:50;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);padding:4px;gap:2px;background:#2b2b30f2;border:1px solid #ffffff1a;backdrop-filter:blur(28px);box-shadow:0 8px 28px #0008}.app-header nav a{min-height:46px;font-size:12px;padding:12px 16px}.home-heading{padding-top:17px;padding-bottom:24px}.home-heading .eyebrow{font-size:9px;margin-bottom:9px}.home-heading h2{font-size:30px;letter-spacing:-1px}.browse-link{display:none}.hero{height:580px;margin:0 12px 19px;border-radius:22px}.hero-art{height:76%;object-position:58% top}.hero::before{background:linear-gradient(0deg,#0d1510 0%,#0d1510 17%,#0d1510f5 29%,#0d151075 57%,#07110c1a 100%)}.hero-topline{inset:22px 22px auto}.feature-label{font-size:8px}.feature-counter{font-size:10px}.hero-content{left:24px;right:24px;bottom:135px;max-width:none}.hero-content .eyebrow{font-size:9px;margin-bottom:13px}.hero h1{font-size:83px;margin-bottom:18px}.hero-description{font-size:15px;max-width:275px;line-height:1.55;margin-bottom:15px}.hero-meta{font-size:11px;gap:8px;margin-bottom:23px}.hero-actions{gap:8px}.hero-actions .button{padding:13px 18px;font-size:12px;min-height:48px}.hero-bottom{left:20px;right:20px;bottom:20px;padding-top:15px}.hero-note{display:none}.hero-switcher{width:100%;gap:6px}.hero-switcher button{padding:5px;display:flex;flex-direction:column;gap:5px;min-height:71px;border-radius:10px}.hero-switcher img{width:100%;height:36px;border-radius:5px}.hero-switcher small{display:none}.hero-switcher strong{font-size:10px;font-weight:550}.content-section{padding-top:18px;padding-bottom:26px}.section-heading{gap:12px;margin-bottom:17px}.section-heading h2{font-size:22px;letter-spacing:-.55px}.section-heading p{font-size:12px;line-height:1.5;max-width:225px}.text-link{font-size:11px;white-space:nowrap}.rail-controls{display:none}.section-actions{gap:0}.video-rail{grid-auto-columns:83%;gap:15px;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}.card-save{opacity:1}.card-play{display:none}.card-art{border-radius:12px}.card-copy h3{font-size:14px}.card-copy p{font-size:11px}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px}.video-grid .card-copy h3{font-size:12px}.video-grid .card-save{top:3px;right:3px;background:#151518a8;border:none}.duration{font-size:9px;bottom:7px;right:7px}.collections{grid-template-columns:1fr;gap:12px}.collection{min-height:123px;padding:24px}.collection h3{font-size:26px;max-width:none}.collection>svg{bottom:-3px;right:48px;width:88px;height:88px}.collection .collection-arrow{right:23px;top:27px}.page{padding-top:30px}.page-heading{margin-bottom:28px}.page-heading h1{font-size:40px}.page-heading p:not(.eyebrow){font-size:14px}.search-form{padding-left:17px;gap:10px}.search-form input{font-size:15px}.search-form .button{padding:13px 17px;font-size:12px}.search-chips{gap:7px;margin-bottom:30px}.search-chips a{font-size:11px;padding:9px 14px}.search-featured .section-heading{align-items:start}.quiet-label{display:none}.curated-grid{grid-template-columns:1fr}.curated-grid .card-copy h3{font-size:15px}.settings-layout{grid-template-columns:1fr;gap:28px}.setting-row{padding:20px 18px}.setting-copy p{font-size:11px}.setting-row select{max-width:120px}.setting-row .text-link{font-size:12px}.creator-credit{margin:0;padding:27px}.creator-monogram{margin-bottom:25px}.watch-page{padding-top:12px}.watch-top{gap:7px}.watch-tools{gap:6px}.watch-tools select{font-size:11px;padding:8px;max-width:100px}.playback-quality{font-size:10px;padding:8px}.playback-quality svg{display:none}.player-shell{height:auto;min-height:0;aspect-ratio:16/9;border-radius:14px}.video-js .vjs-big-play-button{width:60px;height:60px;line-height:58px}.video-js .vjs-control-bar{height:50px;font-size:10px;padding:12px 5px 5px}.watch-info{display:block;padding-top:23px}.watch-info h1{font-size:25px}.watch-info .button{margin-top:20px}.watch-meta{font-size:12px}.app-footer{margin-top:28px;padding-bottom:112px;gap:14px}.empty-state{padding:62px 22px}#toast{bottom:94px}
}
@media(max-width:380px){.app-header nav a{padding:12px 12px}.hero-content{left:20px;right:20px}.hero-actions .button{padding:13px 14px}.hero h1{font-size:74px}.section-heading h2{font-size:20px}.setting-row{gap:10px}.setting-row select{max-width:105px}}
@media(hover:none){.card-save{opacity:1}}
/* Browser canvas, not panel resolution: Tesla panes can be resized and keyboard-shortened. */
@supports(height:100dvh){:root{--viewport-height:100dvh}}
html{scroll-padding-top:calc(var(--header-height) + 16px)}
img{max-width:100%}
.watch-info>div,.section-heading>div,.settings-groups,.settings-layout>*{min-width:0}
.watch-info h1,.description,.card-copy h3{overflow-wrap:anywhere}
.search-form input{scroll-margin-top:calc(var(--header-height) + 24px)}
.player-shell .vjs-tech{object-fit:contain}
@media(min-width:761px){
  :root{--header-height:80px;--gutter:clamp(24px,3.2vw,64px)}
  .app-header{gap:16px}
  .home-heading{padding-top:14px;padding-bottom:22px}
  .home-heading h2{font-size:32px}
  .hero{height:clamp(380px,calc(var(--viewport-height) - 214px),650px)}
  .button,.icon-button,.rail-controls button,.card-save{min-width:48px;min-height:48px}
  .app-header nav a{min-height:48px}
  .header-tools{flex-shrink:0}
  .card-save{width:48px;height:48px;opacity:1}
  .card-copy h3{font-size:15px}.card-copy p{font-size:13px}
  .hero-switcher small{font-size:9px}
  .search-chips a{min-height:48px;font-size:13px}
  .watch-tools select,.back-button,.setting-row select,.setting-row .button,.setting-row .text-link{min-height:48px}
  .watch-page{padding-top:10px}
  .watch-top{margin-bottom:12px}
  .player-shell{height:min(calc(var(--viewport-height) - var(--header-height) - 90px),calc((100vw - 2 * var(--gutter)) * .5625));min-height:180px;max-height:900px}
  .video-js .vjs-control-bar{height:68px;padding:8px 12px;font-size:13px}
  .video-js .vjs-control-bar .vjs-button{min-width:48px;height:48px}
  .video-js .vjs-progress-control{min-height:48px}
}
@media(min-width:761px) and (max-width:1000px){
  .brand{font-size:22px;gap:8px;min-width:0}
  .header-tools{min-width:0;gap:8px}
  .app-header nav{gap:2px}.app-header nav a{padding:12px 13px}
  .settings-layout{grid-template-columns:1fr;gap:24px}
  .creator-credit{margin-top:0}
  .hero-note{display:none}.hero-switcher{width:100%}
  .hero-switcher img{width:62px}.hero-switcher strong{font-size:14px}
  .collections{gap:14px}.collection{padding:22px}.collection h3{font-size:23px}
  .watch-info{flex-wrap:wrap}
}
@media(min-width:761px) and (max-height:800px){
  :root{--header-height:72px}
  .home-heading{padding-top:8px;padding-bottom:16px}
  .home-heading .eyebrow{display:none}
  .home-heading h2{font-size:28px}
  .hero{height:clamp(360px,calc(var(--viewport-height) - 164px),610px);margin-bottom:20px}
  .hero-topline{inset:20px 28px auto}
  .hero-content{left:32px;bottom:112px;max-width:440px}
  .hero-content .eyebrow{display:none}
  .hero h1{font-size:clamp(60px,6.5vw,88px);margin-bottom:12px}
  .hero-description{font-size:15px;line-height:1.45;margin-bottom:10px}
  .hero-meta{margin-bottom:16px}
  .hero-actions .button{min-height:48px;padding:12px 22px}
  .hero-bottom{left:28px;right:28px;bottom:18px;padding-top:12px}
  .hero-switcher button{min-height:58px}
  .hero-switcher img{height:38px}
  .page{padding-top:24px}.watch-page{padding-top:10px}
  .page-heading{margin-bottom:24px}.page-heading h1{font-size:42px}
}
@media(min-width:761px) and (max-height:520px){
  .app-header{position:relative}
  .hero{height:330px}.hero-description{display:none}
  .hero h1{font-size:60px}.hero-content{bottom:108px}
  .home-heading{padding-top:0;padding-bottom:12px}
}
/* Rear/split panes and portrait screens keep readable card widths. */
@media(min-width:761px) and (max-width:900px){
  .video-rail{grid-auto-columns:calc((100% - 18px)/2);gap:18px}
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .curated-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .section-actions{gap:10px}.section-heading h2{font-size:22px}
}
@media(max-width:760px) and (orientation:landscape){
  :root{--header-height:64px}
  .app-header{position:relative}
  .app-header nav{position:static;transform:none;max-width:none;box-shadow:none;flex:1;justify-content:center;padding:2px;background:#232326}
  .app-header nav a{padding:10px 12px;font-size:11px;min-height:44px}
  .brand{min-width:28px}.brand span{display:none}
  .home-heading{padding-top:8px;padding-bottom:14px}.home-heading .eyebrow{display:none}
  .hero{height:350px}.hero-art{height:100%;object-position:center}
  .hero-content{bottom:106px}.hero-content .eyebrow,.hero-description{display:none}
  .hero h1{font-size:62px;margin-bottom:12px}.hero-meta{margin-bottom:12px}
  .hero-switcher{margin-left:auto;max-width:300px}.hero-switcher button{min-height:62px}
  .hero-switcher img{height:29px}.hero-bottom{bottom:15px;padding-top:10px}
  .player-shell{height:max(160px,calc(var(--viewport-height) - 145px));aspect-ratio:auto}
  .video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.curated-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app-footer{padding-bottom:32px}#toast{bottom:20px}
}
@media(max-width:420px){
  .watch-top{flex-wrap:wrap}.watch-tools{flex-wrap:wrap;max-width:100%}
  .section-heading{flex-wrap:wrap}.search-form input{font-size:16px}
}
/* Full-bleed cinema stills, with focal points tuned for each film. */
.hero[data-film="WhWc3b3KhnY"]{background:#071725}
.hero[data-film="WhWc3b3KhnY"] .hero-art{object-position:48% center}
.hero[data-film="eRsGyueVLvQ"] .hero-art{object-position:66% center}
.hero[data-film="UXqq0ZvbOnk"]{background:#10262b}
.hero[data-film="UXqq0ZvbOnk"] .hero-art{object-position:60% center}
.hero[data-film="WhWc3b3KhnY"]::before,.hero[data-film="UXqq0ZvbOnk"]::before{background:linear-gradient(90deg,#070d16a8,transparent 58%),linear-gradient(0deg,#0c1110f5 0%,#0c11109c 17%,transparent 57%)}
@media(max-width:760px) and (orientation:portrait){
  .hero[data-film="UXqq0ZvbOnk"] .hero-art{object-position:59% center}
  .hero[data-film="WhWc3b3KhnY"] .hero-art{object-position:48% center}
  .hero[data-film="WhWc3b3KhnY"]::before,.hero[data-film="UXqq0ZvbOnk"]::before{background:linear-gradient(0deg,#0d1510 0%,#0d1510 17%,#0d1510f5 29%,#0d151075 57%,#07110c1a 100%)}
  .hero[data-film="eRsGyueVLvQ"] .hero-art{object-position:70% center}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.video-card:hover img{transform:none}}
@media(prefers-reduced-transparency:reduce){.app-header{background:#0b0b0d}.app-header nav,.button.secondary,.card-save,#toast{background:#2b2b2e;backdrop-filter:none}.hero-switcher button[aria-pressed=true]{background:#333936}}
@media(prefers-contrast:more){:root{--muted:#d0d0d7;--line:#777}.card-copy p,.setting-copy p,.settings-footnote,.creator-description,.creator-license,.creator-copyright{color:#d0d0d7}.app-header nav,.settings-panel{border:1px solid #777}}

/* Supplied transparent logo: original alpha silhouette, white SVG display. */
.brand img{width:98px;height:60px;object-fit:contain;border-radius:0;flex-shrink:0}
.footer-brand{display:inline-flex;align-items:center}.footer-brand img{width:180px;height:110px;object-fit:contain;border-radius:0}
.settings-mark{width:72px;height:48px;object-fit:contain;border-radius:0}.brand-artwork{margin:0;padding:30px;border-top:1px solid var(--line);background:transparent}.brand-artwork img{display:block;width:100%;height:auto;max-height:230px;object-fit:contain}
@media(max-width:760px){.brand{min-width:110px}.brand img{width:98px;height:60px}}
@media(max-width:760px) and (orientation:landscape){.brand{min-width:78px}.brand img{width:78px;height:48px}}

/* Photographic discovery covers; source files retain 4K-wide detail. */
.collection{isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;padding:26px;background:#080b11;transition:box-shadow .2s}
.collection .collection-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.collection::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#070a10f2 0%,#070a10b3 17%,#070a101a 58%,transparent 78%)}
.collection span{color:#e6e7eb;font-size:9px;text-shadow:0 1px 6px #0009}
.collection h3{font-size:clamp(24px,2.2vw,32px);line-height:1.08;max-width:none;margin:9px 0 0;color:#fff;text-shadow:0 2px 15px #0008}
.collection .collection-arrow{top:18px;right:18px;bottom:auto;width:36px;height:36px;padding:9px;border:1px solid #ffffff38;border-radius:50%;background:#090c1480;color:#fff}
.collection:hover{filter:none;box-shadow:inset 0 0 0 1px #ffffff70}
.collection-earth{background:#000}.collection-earth .collection-image{inset:-6% -15% auto auto;width:110%;height:110%;object-fit:contain}
.collection-music .collection-image{object-position:50% 29%}
.collection-animation .collection-image{object-position:50% 44%}
@media(min-width:761px) and (max-width:1000px){.collections{gap:14px}.collection{min-height:245px;padding:20px}.collection h3{max-width:180px}}
@media(max-width:760px){.collection{min-height:255px;padding:24px}.collection h3{font-size:29px}.collection-earth .collection-image{inset:-13% -12% auto auto;width:104%;height:124%}}