/* TL3 Old Leather — the film reel inside the Film Room TV */
.tl3ol{--gt-orange:#f26a1b;--gt-ink:#efe6d6;--gt-dim:#b9ad99;--gt-bg:#0e0b08;--gt-line:#3a2c20;
  max-width:1280px;margin:0 auto 2rem;color:var(--gt-ink);background:var(--gt-bg);border:1px solid var(--gt-line);border-radius:10px;overflow:hidden;
  font-family:inherit;line-height:1.35}
.tl3ol *,.tl3ol *::before,.tl3ol *::after{box-sizing:border-box}
.tl3ol button{font-family:inherit;line-height:1.2;color:inherit;margin:0;text-shadow:none;-webkit-tap-highlight-color:transparent}

/* The picture, kept whole on a computer */
.tl3ol-frame{position:relative;width:100%;aspect-ratio:1280/853;overflow:hidden;background:#000}
.tl3ol-set{position:absolute;left:0;top:0;width:100%;height:100%}
.tl3ol .tl3ol-art{display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;object-fit:fill;user-select:none;-webkit-user-drag:none}

/* The glass: x 393-790, y 208-509 of 1280 x 853 */
.tl3ol button.tl3ol-screen{position:absolute;left:30.703%;top:24.385%;width:31.016%;height:35.287%;padding:0;border:0;background:transparent;
  border-radius:7% / 9.5%;overflow:hidden;cursor:pointer;display:block;isolation:isolate}
.tl3ol button.tl3ol-screen:hover,.tl3ol button.tl3ol-screen:focus,.tl3ol button.tl3ol-screen:active{background:transparent;box-shadow:none;color:inherit;transform:none}
.tl3ol button.tl3ol-screen:focus{outline:0}
.tl3ol button.tl3ol-screen:focus-visible{outline:3px solid var(--gt-orange);outline-offset:3px}
.tl3ol-video,.tl3ol-snow,.tl3ol-glass{position:absolute;inset:0;width:100%;height:100%}
.tl3ol-video{object-fit:cover;background:#000;opacity:0;filter:sepia(.35) contrast(1.12) brightness(.92);transition:opacity .25s}
.tl3ol-snow{opacity:0;image-rendering:pixelated;pointer-events:none}
.tl3ol.is-live .tl3ol-video{opacity:1}
.tl3ol.is-flip .tl3ol-snow{opacity:1}
.tl3ol.is-flip .tl3ol-video{opacity:0}

/* Scanlines, curved-glass shade and a little flicker, only while the set is on */
.tl3ol-glass{pointer-events:none;opacity:0;transition:opacity .3s;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.07) 0,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(to bottom,rgba(0,0,0,.26) 0,rgba(0,0,0,.26) 1px,rgba(0,0,0,0) 2px,rgba(0,0,0,0) 3px)}
.tl3ol.is-on .tl3ol-glass{opacity:1;animation:tl3ol-flicker 4.2s infinite steps(1)}
@keyframes tl3ol-flicker{0%{opacity:1}31%{opacity:.86}32%{opacity:1}63%{opacity:.93}64%{opacity:1}88%{opacity:.82}89%{opacity:1}}

/* Channel number, top right of the glass */
.tl3ol-osd{position:absolute;right:6%;top:7%;font-family:"Courier New",Courier,monospace;font-weight:700;font-size:clamp(12px,2.1vw,26px);letter-spacing:.06em;
  color:#9df59a;text-shadow:0 0 6px rgba(120,255,120,.7),2px 2px 0 rgba(0,0,0,.6);opacity:0;transition:opacity .2s;pointer-events:none}
.tl3ol.is-osd .tl3ol-osd{opacity:1}

/* "Press to play" over his picture before anything starts */
.tl3ol-press{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;align-items:center;gap:.5em;white-space:nowrap;
  padding:.35em .8em;border-radius:999px;background:rgba(10,8,6,.72);border:1px solid rgba(242,106,27,.75);
  font-size:clamp(11px,1.15vw,15px);letter-spacing:.12em;text-transform:uppercase;color:#fff;pointer-events:none;transition:opacity .2s}
.tl3ol-press-icon{width:0;height:0;border-left:.75em solid var(--gt-orange);border-top:.45em solid transparent;border-bottom:.45em solid transparent}
.tl3ol.is-on .tl3ol-press{opacity:0}
.tl3ol.is-paused .tl3ol-press{opacity:1}
.tl3ol-screen:hover .tl3ol-press{border-color:var(--gt-orange);background:rgba(10,8,6,.86)}

/* The two knobs on the set turn the channel */
.tl3ol button.tl3ol-knob{position:absolute;left:66.56%;width:4.69%;height:7.03%;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.tl3ol button.tl3ol-knob-up{top:26.96%}
.tl3ol button.tl3ol-knob-down{top:35.40%}
.tl3ol button.tl3ol-knob:hover,.tl3ol button.tl3ol-knob:focus,.tl3ol button.tl3ol-knob:active{background:transparent;color:inherit;box-shadow:none;outline:0}
.tl3ol button.tl3ol-knob:hover,.tl3ol button.tl3ol-knob:focus-visible{box-shadow:0 0 0 2px rgba(242,106,27,.85),0 0 14px rgba(242,106,27,.55)}
.tl3ol button.tl3ol-knob:active{transform:rotate(25deg)}

/* Now playing + the keys */
.tl3ol-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;padding:.9rem 1.1rem;border-top:1px solid var(--gt-line);background:#15100b}
.tl3ol-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;min-width:0}
.tl3ol-now-ch{font-family:"Courier New",Courier,monospace;font-weight:700;color:var(--gt-orange);letter-spacing:.08em}
.tl3ol-now-title{font-weight:700;font-size:1.05rem}
.tl3ol-now-credit{color:var(--gt-dim);font-size:.85rem}
.tl3ol-keys{display:flex;flex-wrap:wrap;gap:.4rem}
.tl3ol button.tl3ol-key{min-height:40px;min-width:44px;padding:.4rem .8rem;border:1px solid #4a3828;border-radius:6px;background:#1f170f;cursor:pointer;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.tl3ol button.tl3ol-key:hover,.tl3ol button.tl3ol-key:focus,.tl3ol button.tl3ol-key:active{background:#1f170f;color:var(--gt-ink);box-shadow:none;outline:0}
.tl3ol button.tl3ol-key:hover,.tl3ol button.tl3ol-key:focus-visible{border-color:var(--gt-orange)}
.tl3ol button.tl3ol-key[aria-pressed="true"],.tl3ol button.tl3ol-key[aria-pressed="true"]:hover,.tl3ol button.tl3ol-key[aria-pressed="true"]:focus{border-color:var(--gt-orange);color:#fff;background:#3a1e0c}
.tl3ol button.tl3ol-key-play{min-width:5.2em}

/* The tape shelf: picture cards, his still underneath */
.tl3ol-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem;padding:1rem 1.1rem 1.1rem}
.tl3ol-cell{min-width:0}
.tl3ol button.tl3ol-tape{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;aspect-ratio:4/3;padding:.75rem .8rem;text-align:left;cursor:pointer;
  border:1px solid #4a3828;border-radius:8px;overflow:hidden;background-color:#1b140d;background-size:cover;background-position:center;isolation:isolate;color:var(--gt-ink);font-size:1rem;box-shadow:none}
.tl3ol-tape::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,11,8,.05) 0%,rgba(14,11,8,.35) 45%,rgba(14,11,8,.93) 100%)}
.tl3ol-tape::after{content:"";position:absolute;inset:0;z-index:-2;background:inherit;filter:sepia(.55) contrast(1.05) brightness(.85)}
.tl3ol button.tl3ol-tape-nostill,.tl3ol button.tl3ol-tape-nostill:hover,.tl3ol button.tl3ol-tape-nostill:focus,.tl3ol button.tl3ol-tape-nostill:active{background-image:url("old-leather-set.jpg");background-size:330% auto;background-position:47% 38%}
.tl3ol button.tl3ol-tape:hover,.tl3ol button.tl3ol-tape:focus,.tl3ol button.tl3ol-tape:active{background-color:#1b140d;background-size:cover;background-position:center;color:var(--gt-ink);box-shadow:none;outline:0}
.tl3ol button.tl3ol-tape-nostill:hover,.tl3ol button.tl3ol-tape-nostill:focus,.tl3ol button.tl3ol-tape-nostill:active{background-size:330% auto;background-position:47% 38%}
.tl3ol button.tl3ol-tape:hover,.tl3ol button.tl3ol-tape:focus-visible{border-color:var(--gt-orange)}
.tl3ol button.tl3ol-tape.is-on{border-color:var(--gt-orange);box-shadow:0 0 0 1px var(--gt-orange) inset,0 0 18px rgba(242,106,27,.28)}
.tl3ol-tape-ch{position:absolute;top:.55rem;left:.65rem;font-family:"Courier New",Courier,monospace;font-weight:700;font-size:.8rem;letter-spacing:.08em;color:#9df59a;text-shadow:0 0 5px rgba(120,255,120,.6)}
.tl3ol-tape.is-on .tl3ol-tape-ch::after{content:" \25CF";color:var(--gt-orange);text-shadow:none}
.tl3ol-tape-year{font-family:"Courier New",Courier,monospace;font-weight:700;font-size:1.35rem;color:var(--gt-orange);line-height:1.1}
.tl3ol-tape-title{font-weight:700;font-size:1rem;color:#fff}
.tl3ol-tape-credit{font-size:.78rem;color:var(--gt-dim)}

.tl3ol-foot{margin:0;padding:0 1.1rem 1.1rem;color:var(--gt-dim);font-size:.85rem}
.tl3ol-owner{margin:0 1.1rem 1.1rem;padding:.75rem .9rem;border:1px dashed var(--gt-orange);border-radius:6px;font-size:.85rem;color:var(--gt-ink)}
.tl3ol-owner ul{margin:.4rem 0 0 1.1rem;padding:0}

/* Phone: show the TV up close (x 340-945, y 160-560 of the picture) */
@media (max-width:700px){
  .tl3ol{border-radius:0;border-left:0;border-right:0}
  .tl3ol-frame{aspect-ratio:605/400}
  .tl3ol-set{left:-56.198%;top:-40%;width:211.570%;height:213.250%}
  .tl3ol-osd{font-size:clamp(12px,4.2vw,22px)}
  .tl3ol-press{font-size:12px;letter-spacing:.08em}
  .tl3ol-bar{padding:.8rem 16px}
  .tl3ol-keys{width:100%}
  .tl3ol button.tl3ol-key{flex:1 1 auto}
  .tl3ol-shelf{grid-template-columns:1fr 1fr;gap:.6rem;padding:.8rem 16px 1rem}
  .tl3ol button.tl3ol-tape{padding:.6rem}
  .tl3ol-tape-year{font-size:1.1rem}
  .tl3ol-tape-title{font-size:.9rem}
  .tl3ol-tape-credit{font-size:.72rem}
  .tl3ol-foot{padding:0 16px 1rem}
  .tl3ol-owner{margin:0 16px 1rem}
}

@media (prefers-reduced-motion:reduce){
  .tl3ol.is-on .tl3ol-glass{animation:none}
  .tl3ol-video,.tl3ol-glass,.tl3ol-osd,.tl3ol-press{transition:none}
}

/* Full screen: the film fills the screen, no glass corners */
.tl3ol-screen:fullscreen{border-radius:0;background:#000}
.tl3ol-screen:-webkit-full-screen{border-radius:0;background:#000}
.tl3ol-screen:fullscreen .tl3ol-video{object-fit:contain}
.tl3ol-screen:-webkit-full-screen .tl3ol-video{object-fit:contain}
.tl3ol-screen:fullscreen .tl3ol-press{display:none}
.tl3ol-screen:-webkit-full-screen .tl3ol-press{display:none}

/* Older browsers without aspect-ratio: hold the picture's shape with padding */
@supports not (aspect-ratio:1/1){
  .tl3ol-frame{height:0;padding-top:66.64%}
}
@media (max-width:700px){
  @supports not (aspect-ratio:1/1){ .tl3ol-frame{padding-top:66.12%} }
}