*{box-sizing:border-box}html{min-height:100%;background:#fff}body{margin:0;font:14px Arial,sans-serif;color:#46635d;background:#fff}button,input,summary{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #77b7a5;outline-offset:4px}button:active{transform:translateY(1px)}[hidden]{display:none!important}main{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:55px 25px 35px}.monitor{width:min(650px,86vw);position:relative;border:1px solid #b5cec5;border-radius:47px 47px 57px 57px;padding:24px 24px 15px;background:linear-gradient(100deg,#eef6efa6,#c4e1d399 18%,#e9f4e7b8 45%,#bfdacc99 86%,#e5f0e6a6),repeating-linear-gradient(90deg,#9fbeb029 0 1px,#f1f7ed20 1px 4px);box-shadow:inset 3px 3px 4px #ffffffdd,inset -4px -3px 7px #8eb3a333,3px 7px 0 #d2e3d9,0 19px 28px #5a877415;isolation:isolate}.shell-rim{position:absolute;inset:9px 10px 15px;border:1px solid #ffffffad;border-radius:39px 39px 50px 50px;pointer-events:none;box-shadow:0 0 0 1px #8eaa9e18}.face{position:relative;border-radius:28px 28px 42px 42px;background:linear-gradient(110deg,#eef3e7b8,#dbe9debf 65%,#eaf1e5a8);padding:13px 13px 0;border:1px solid #b1c8bb88;box-shadow:inset 1px 2px 2px #fff8}.glass-surround{padding:10px 12px 12px;border-radius:28px 28px 24px 24px;background:linear-gradient(145deg,#9aa99f,#c8d6c8 40%,#abbcaf);box-shadow:inset 2px 3px 5px #56675f66,0 1px 1px #fff8}.screen{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border:3px solid #39443e;border-radius:23px 23px 21px 21px;background:#17201d;box-shadow:0 0 0 1px #657267}.screen img#poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#17201d;opacity:.92}#media{position:absolute;inset:0;width:100%;height:100%;display:none;background:#101613}#media.active{display:block}#media iframe,#media video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border:0;margin:0}.screen-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#ffffff16,transparent 45%)}.channel{position:absolute;top:18px;left:21px;color:#e7f9e9;font:15px 'Courier New',monospace;letter-spacing:1px;text-shadow:1px 1px 2px #111}.screen-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;border:0;background:transparent;color:#eef6ee;font-size:27px;text-shadow:1px 2px 4px #000}.screen-play span{display:grid;place-items:center;width:55px;height:55px;border:1px solid #faffed88;border-radius:50%;background:#c9d9cf22;padding-left:3px}.osd{position:absolute;inset:0;pointer-events:none;color:#eff8ec;text-shadow:1px 2px 1px #102019,0 0 3px #102019;font-family:'Courier New',monospace;font-weight:bold}#osd-title{position:absolute;left:20px;top:20px;max-width:85%;font-size:clamp(19px,3vw,27px);line-height:1.2;overflow-wrap:anywhere}#timecode{position:absolute;right:20px;bottom:18px;font-size:clamp(22px,3.4vw,31px);font-variant-numeric:tabular-nums}#osd-state{position:absolute;left:20px;bottom:23px;font-size:15px}.standby{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse,#2b3932,#101b15);color:#6b8b7a;font:12px Arial;letter-spacing:3px}.chin{padding:19px 9px 12px}.drive{width:42%;height:11px;margin:0 auto 11px;position:relative;border:1px solid #8aa19199;border-radius:12px;background:#c9d8cb;box-shadow:0 1px 1px #fff8;display:flex;align-items:center;padding:0 8px;gap:9px}.drive span{height:2px;flex:1;background:#455f50;box-shadow:0 1px #eaf6e8}.drive i{width:3px;height:3px;border-radius:50%;background:#759686}.control-row{display:flex;justify-content:space-between;align-items:center;gap:15px}.speaker{width:61px;height:48px;border-radius:44%;background:radial-gradient(circle,#485d51 1px,transparent 1.5px) 0 0/3px 3px,linear-gradient(#889e8f,#748c7d);border:3px solid #a5bdac;box-shadow:inset 1px 2px 5px #334d4144,0 1px 0 #f2f8ed}.transport{display:flex;gap:15px;align-items:center}.transport button,.small-controls button{display:grid;place-items:center;width:35px;height:29px;border:1px solid #9db5a5;background:linear-gradient(#f2f7eeb8,#c4d8c6);box-shadow:inset 1px 1px #fff9,0 2px 1px #96b1a08c;border-radius:10px;font-size:11px}.transport .main-button{width:47px;height:38px;border-radius:13px;font-size:17px}.small-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}.small-controls button{width:25px;height:23px;border:0;background:transparent;box-shadow:none;font-size:17px;opacity:.85}.small-controls #power[aria-pressed=true]{color:#417d63}.small-controls label{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1px;color:#819a8b}.small-controls input{width:68px;height:12px;accent-color:#8ba898}.foot{position:absolute;width:38%;left:31%;height:16px;bottom:-20px;border-radius:0 0 20px 20px;border:1px solid #c6d9ca;background:linear-gradient(#c3d6c8,#e3ece2);box-shadow:0 9px 14px #5c786522;z-index:-1}.under-monitor{width:min(650px,86vw);display:flex;align-items:center;gap:15px;margin-top:29px;color:#8f9f94;font-size:11px;min-height:25px;position:relative}#status{flex:1;text-align:center;margin:0;line-height:1.5}details>summary{list-style:none;cursor:pointer;font:bold 19px Arial;min-width:24px;min-height:25px;text-align:center}details>summary::-webkit-details-marker{display:none}.source-options{position:absolute;right:0;top:30px;z-index:5;background:#fafcf9;border:1px solid #cfddd0;border-radius:9px;padding:15px;display:flex;flex-direction:column;gap:12px;box-shadow:0 5px 18px #47665315;color:#647c6c;max-width:280px}.source-options a{color:inherit}.source-options button,.source-options label{font:12px Arial;border:1px solid #bacdbf;background:#f3f7ef;border-radius:5px;padding:9px;cursor:pointer}.source-options input{display:block;max-width:225px;font-size:11px;margin-top:8px}.source-options span{font-size:10px}.screen:fullscreen{border:0;border-radius:0;aspect-ratio:auto;width:100%;height:100%;background:black}.monitor.off .screen-play{display:none}
@media(max-width:600px){main{padding:40px 12px}.monitor{width:94vw;padding:16px 13px 10px;border-radius:35px 35px 42px 42px}.face{padding:9px 9px 0;border-radius:24px 24px 31px 31px}.glass-surround{padding:7px;border-radius:22px}.screen{border-width:2px;border-radius:16px}.chin{padding:15px 2px 10px}.speaker{width:46px;height:39px}.transport{gap:10px}.transport button{min-height:40px;width:37px}.transport .main-button{height:44px;width:45px}.small-controls{gap:8px;margin-top:6px}.small-controls button{width:32px;height:32px}#osd-title{font-size:19px;left:14px;top:15px}#timecode{font-size:23px;right:14px;bottom:15px}#osd-state{font-size:12px;left:14px;bottom:20px}.channel{left:14px;top:15px;font-size:12px}.under-monitor{width:91vw;font-size:10px}.drive{width:45%;margin-bottom:10px}.shell-rim{inset:6px 7px 10px;border-radius:30px 30px 36px 36px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Static early-digital softness, not a change to Vimeo resolution.
   The OSD remains above the textures; every overlay ignores pointer input. */
.small-controls #texture{font:8px Arial;letter-spacing:.7px;width:37px;opacity:.7;border-bottom:1px solid #a6bdac;border-radius:0}
.monitor.vintage{background:linear-gradient(100deg,#ecf2e8c9,#c6dcccd4 18%,#e3edddcf 45%,#bed5c4c9 86%,#e2ecdfce),repeating-linear-gradient(90deg,#94ad9826 0 1px,#eff4e820 1px 4px);box-shadow:inset 3px 3px 6px #fffffbc4,inset -4px -3px 10px #92aa8733,3px 7px 1px #d0dfcf,0 19px 33px #6982661b}
.vintage .shell-rim,.vintage .speaker,.vintage .drive{filter:blur(.27px);opacity:.92}
.vintage #media,.vintage .screen img#poster{filter:blur(.52px) contrast(.88) saturate(.82) sepia(.075);transform:scale(1.003);transform-origin:center}
.vintage .screen:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,#14271920 0 1px,transparent 1px 3px),radial-gradient(ellipse at 45% 35%,#d9e6b508,transparent 60%,#263e3014);opacity:.42;mix-blend-mode:soft-light}
.vintage .screen:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.osd,.channel{z-index:3}.screen-play,.standby{z-index:4}.vintage .osd{text-shadow:1px 1px 1px #17392a,-.6px 0 #bde3ce88,.7px 0 #deb7bf66}
@media(max-width:600px){.small-controls{gap:6px}.small-controls #texture{width:34px;font-size:7px}.vintage #media,.vintage .screen img#poster{filter:blur(.4px) contrast(.9) saturate(.83) sepia(.075)}}

/* A softly lit monitor in darkness; the chassis retains its mint materials. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--channel-fade:180ms}
html,body{background:#000}.monitor:before{content:'';position:absolute;inset:-72px;z-index:-2;pointer-events:none;border-radius:35%;background:radial-gradient(ellipse,#bbefdc1b 15%,#9ce6ca10 43%,#9ce6ca06 60%,transparent 74%);filter:blur(18px)}
.monitor{box-shadow:inset 3px 3px 4px #ffffffdd,inset -4px -3px 7px #8eb3a333,3px 7px 0 #cbded3,0 0 20px #d2ffe926,0 0 64px #b6ebd41a}
.monitor.vintage{box-shadow:inset 3px 3px 6px #fffffbc4,inset -4px -3px 10px #92aa8733,3px 7px 1px #d0dfcf,0 0 24px #d8ffe92b,0 0 70px #b9e7ce1a}
.under-monitor{color:#8eaa99}.picture{position:absolute;inset:0;opacity:1;transform:scaleY(1);transform-origin:center;transition:opacity var(--channel-fade) var(--ease-out),transform var(--channel-fade) var(--ease-out)}
.screen.is-switching .picture{opacity:0;transform:scaleY(.94)}
.screen{background:#080f0b}.osd,.channel{font-family:'Courier New',Courier,monospace;letter-spacing:.08em;-webkit-font-smoothing:auto;filter:blur(.22px);text-shadow:1px 0 #bfe8c640,-1px 0 #d4bcc530,0 0 2px #e7ffe960,1px 2px 1px #102019}
#osd-title{font-weight:600}#timecode{font-weight:600}.vintage .osd,.vintage .channel{filter:blur(.32px);text-shadow:1px 0 #cbeac350,-1px 0 #d5bdc338,0 0 3px #e7ffd66b,1px 2px 1px #102019}
.small-controls #texture{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.2px}.small-controls label{font-family:'Courier New',monospace}
@media(prefers-reduced-motion:reduce){.picture{transition:opacity 120ms var(--ease-out)!important;transform:none!important}.screen.is-switching .picture{transform:none!important}}
@media(max-width:600px){.monitor:before{inset:-35px;filter:blur(12px)}.small-controls #texture{font-size:9px}}
/* The below-screen status is accessible, but no longer visual page copy. */
#status{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.under-monitor{justify-content:flex-end}
.shell-surface{display:none}
/* Only independent decorative chassis pixels are sampled. Neither the screen
   nor any iframe ancestor receives this filter. 2023 stays unchanged. */
.monitor.vintage{background:transparent}
.vintage .shell-surface{display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;pointer-events:none;background:linear-gradient(100deg,#e4eddf,#bcd2bf 18%,#dbe8d4 45%,#b8cebd 86%,#d8e6d3),repeating-linear-gradient(90deg,#6f92784d 0 1px,#e7efdd42 1px 4px);filter:url(#shell-blocks)}
.vintage .shell-surface:after{content:'';position:absolute;inset:0;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.22' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.vintage .shell-rim,.vintage .speaker,.vintage .drive{filter:url(#shell-blocks)}
.cinema-home{position:absolute;top:22px;left:26px;z-index:10;color:#a6bbad;text-decoration:none;font:13px Arial,sans-serif;letter-spacing:.3px;padding:8px}
.cinema-home:focus-visible{outline:2px solid #a6bbad;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.cinema-home:hover{color:#e6f5eb}}
@media(max-width:600px){.cinema-home{top:10px;left:10px;font-size:12px}}

/* Keep an opaque chassis under independently composited screen transitions. */
.monitor.vintage{background:linear-gradient(100deg,#e4eddf,#bcd2bf 18%,#dbe8d4 45%,#b8cebd 86%,#d8e6d3)}
.vintage .shell-surface{z-index:0;contain:paint}
.face{z-index:1}
.shell-rim{z-index:2}
.screen{isolation:isolate;contain:paint}
.picture{will-change:opacity;transform:none;transition:opacity var(--channel-fade) var(--ease-out)}
.screen.is-switching .picture{transform:none}
.vintage #media,.vintage .screen img#poster{filter:url(#screen-pixels) saturate(.65) contrast(.9);transform:none}
.vintage .chin .speaker,.vintage .chin .drive{filter:url(#shell-blocks)}
.vintage .transport,.vintage .small-controls{filter:none}
.vintage .small-controls{font-family:monospace}
.vintage .screen:before{opacity:.65;background:repeating-linear-gradient(0deg,#081a1640 0 2px,transparent 2px 6px)}
.vintage .osd,.vintage .channel{filter:none}

/* A little CRT softness on functional UI, without coarse pixel sampling. */
.vintage .osd,.vintage .channel{filter:blur(.3px);text-shadow:1px 1px 2px #102019}
.vintage .transport,.vintage .small-controls,.vintage .screen-play{filter:blur(.35px)}

/* Font-independent stepped silhouettes: consistent on desktop and phones. */
.transport-icon{display:block;width:16px;height:16px;fill:currentColor;shape-rendering:crispEdges;pointer-events:none}
.main-button .transport-icon{width:20px;height:20px}
.icon-pause{display:none}
[data-transport="pause"] .icon-play{display:none}
[data-transport="pause"] .icon-pause{display:block}
.screen-play span{border-radius:5px;padding:0;background:#15251d55;box-shadow:inset 1px 1px #efffed33,1px 2px 0 #07140e44}
.screen-play .transport-icon{width:24px;height:24px}