:root { color-scheme: light; --cabinet: #4a493f; --cabinet-dark: #292a26; --phosphor: #a9f8cb; }
.crt-takeover, .crt-takeover * { box-sizing: border-box; }
html, body { min-height: 100%; }
body.crt-prototype-page { margin: 0; overflow-x: hidden; background: #77bde2 url("../images/sky_tile.gif") repeat; }
.crt-takeover button, .crt-takeover input, .crt-takeover a { font: inherit; }
body.crt-active { overflow: hidden; }
.crt-retro { min-height: 100dvh; padding: 20px 10px 90px; color: #f00; font-family: "Times New Roman", serif; text-align: center; }
.retro-document { width: min(500px, 100%); margin: 0 auto; }
.lab-return { color: #0000ee; font: 14px Arial, sans-serif; }
.retro-title { margin: 24px 0 2px; font-size: 34px; font-weight: bold; }
.crt-retro h1 { margin: 5px 0; font-size: 25px; }
.retro-subtitle, .purple { color: #800080; }
.retro-document > img { display: block; max-width: 100%; margin: 24px auto; object-fit: fill; }
.retro-projects { display: grid; gap: 16px; margin: 26px 0; text-align: left; }
.retro-projects a { display: block; padding: 16px; border: 3px outset #efefef; color: #0000ee; background: #fff; font-size: 18px; line-height: 1.22; }
.retro-projects a:hover, .retro-projects a:focus-visible { color: #f00; outline: 3px dotted #f00; outline-offset: 3px; }
.retro-projects b { color: #f00; font-size: 13px; }
.crt-takeover { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; overflow: hidden; padding: clamp(14px, 3vh, 32px); background: radial-gradient(circle at 50% 35%, #222 0, #090909 46%, #010101 100%); opacity: 0; visibility: hidden; transition: opacity 220ms linear, visibility 0s 220ms; }
body.crt-active .crt-takeover { opacity: 1; visibility: visible; transition-delay: 0s; }
.crt-set { width: min(100%, calc((100dvh - 28px) * 1.39)); min-width: 0; max-width: 100%; padding: clamp(14px, 2.4vw, 30px); border: 1px solid #77766b; border-radius: 28px 28px 20px 20px; background: linear-gradient(145deg, #6c6a5d 0%, var(--cabinet) 23%, #353631 76%, #242521 100%); box-shadow: 0 42px 90px #000, inset 0 2px 1px #aaa89a66, inset 0 -10px 24px #111b; transform: scale(.965); transform-origin: center; transition: transform 520ms cubic-bezier(.2,.8,.2,1); }
body.crt-active .crt-set { transform: scale(1); }
.crt-topline { display: flex; justify-content: flex-start; padding: 0 8px 10px; }
.crt-brand-logo, .crt-mobile-brand { color: #d5d2c4; font-family: "Brush Script MT", "Segoe Script", cursive; font-weight: 400; letter-spacing: .02em; text-shadow: 0 1px #050505, 0 -1px #ffffff33; }
.crt-brand-logo { font-size: clamp(25px, 2.2vw, 34px); line-height: 1; }
.crt-bezel { position: relative; padding: clamp(16px, 2.5vw, 34px); border: 2px solid #1b1c19; border-radius: 25px; background: linear-gradient(145deg, #22231f, #11120f 65%, #35362f); box-shadow: inset 0 0 0 3px #55564e, inset 0 8px 24px #000, 0 2px 0 #85847788; }
.crt-screen-shell { position: relative; }
.crt-screen { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 4px solid #070907; border-radius: 9% / 12%; background: #010504; box-shadow: inset 0 0 70px #000, inset 0 0 12px #84ffc955, 0 0 0 2px #5d5f58, 0 12px 28px #000b; isolation: isolate; }
.crt-screen:focus-visible { outline: 3px solid var(--phosphor); outline-offset: 5px; }
.crt-screen[aria-disabled="true"] { cursor: default; }
.crt-screen video, .crt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crt-poster { z-index: 0; filter: saturate(.76) contrast(1.16) brightness(.77) sepia(.05); }
.crt-screen video { z-index: 1; transform: translateX(var(--signal-jitter, 0)) scale(1.018); filter: saturate(.76) contrast(1.16) brightness(.77) sepia(.05); }
html[data-crt-project="aphantas"] .crt-screen video { filter: saturate(.92) contrast(1.08) brightness(1.18); }
html[data-crt-project="aphantas"] .crt-poster { filter: saturate(.92) contrast(1.08) brightness(1.18); }
#crt-static, .crt-scanlines, .crt-glass { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#crt-static { z-index: 2; mix-blend-mode: screen; }
.crt-scanlines { z-index: 3; opacity: .28; background: repeating-linear-gradient(to bottom, transparent 0 2px, #000 3px 4px); mix-blend-mode: multiply; }
.crt-glass { z-index: 4; border-radius: inherit; background: radial-gradient(ellipse at center, transparent 48%, #0008 100%), linear-gradient(112deg, #fff1 0 15%, transparent 33% 72%, #9ff1 92% 100%); box-shadow: inset 0 0 55px #000c; }
.crt-osd { position: absolute; z-index: 5; top: 6%; right: 5%; color: var(--phosphor); font: 700 clamp(18px, 1.45vw, 24px)/1 "Courier New", monospace; letter-spacing: .08em; text-align: right; text-shadow: 0 0 8px #79ffb4; opacity: .84; }
.crt-playback-prompt { position: absolute; z-index: 7; inset: 42% auto auto 50%; transform: translate(-50%, -50%); padding: 10px 14px; border: 1px solid var(--phosphor); color: var(--phosphor); background: #001b; font: 700 12px "Courier New", monospace; text-transform: uppercase; cursor: pointer; }
.crt-signal-message { position: absolute; z-index: 6; left: 50%; bottom: 12%; width: min(82%, 520px); transform: translateX(-50%); padding: 10px 14px; border: 1px solid #a9f8cb99; color: var(--phosphor); background: #001b; font: 700 clamp(11px, 1.2vw, 15px)/1.35 "Courier New", monospace; text-align: center; text-transform: uppercase; text-shadow: 0 0 8px #79ffb4; }
.crt-mobile-brand { display: none; }
.crt-deck { display: grid; grid-template-columns: minmax(118px, .5fr) minmax(180px, 1fr) minmax(118px, .5fr); grid-template-areas: "channel speaker power"; gap: clamp(16px, 2vw, 30px); align-items: center; padding: 22px 10px 0; }
.channel-bank { display: grid; grid-area: channel; grid-template-columns: repeat(2, 48px); gap: 7px; align-items: center; }
.control-label { grid-column: 1 / -1; color: #c8c6b8; font: 700 9px Arial, sans-serif; letter-spacing: .16em; }
.channel-bank button { width: 48px; height: 42px; padding: 0; border: 1px solid #171815; border-radius: 4px; color: #c9c8bb; background: linear-gradient(#626157, #373832); box-shadow: inset 0 1px #8f8d80, inset 0 -2px #20211d, 0 3px 4px #0009; font: 700 15px/1 Arial, sans-serif; text-align: center; text-shadow: 0 1px #111; cursor: pointer; }
.channel-bank button:hover, .channel-bank button:focus-visible { color: var(--phosphor); outline: 1px solid var(--phosphor); outline-offset: 2px; }
.channel-bank button:active { transform: translateY(1px); box-shadow: inset 0 2px 5px #161713, 0 1px 2px #0008; }
.speaker { grid-area: speaker; justify-self: center; width: min(100%, 460px); height: 44px; border-radius: 5px; opacity: .62; background: radial-gradient(circle, #080907 0 2px, transparent 2.5px) 0 0 / 10px 10px; box-shadow: inset 0 0 10px #000; }
.signal-controls { display: none; grid-template-columns: auto 1fr; gap: 7px 10px; align-items: center; }
.signal-controls label { color: #c8c6b8; font: 700 9px Arial, sans-serif; letter-spacing: .14em; }
.signal-controls input { width: 100%; accent-color: #a9f8cb; }
html[data-crt-static-control="visible"] .crt-deck { grid-template-columns: minmax(118px, .5fr) 1fr minmax(180px, .6fr) auto; grid-template-areas: "channel speaker static power"; }
html[data-crt-static-control="visible"] .signal-controls { display: grid; grid-area: static; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.crt-power { display: grid; grid-area: power; grid-template-columns: 10px 38px; grid-template-rows: 38px auto; gap: 5px 8px; align-items: center; justify-self: end; padding: 8px; border: 0; color: #c7c5b8; background: transparent; font: 700 8px Arial, sans-serif; letter-spacing: .13em; cursor: pointer; }
.power-lamp { width: 8px; height: 8px; border-radius: 50%; background: #f33; box-shadow: 0 0 8px #f22; }
.power-knob { width: 38px; height: 38px; border: 1px solid #111; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #77766d 0 12%, #34352f 38%, #151612 72%); box-shadow: inset 0 1px #aaa8, 0 2px 5px #000; }
.crt-power > span:last-child { grid-column: 1 / -1; text-align: center; }
.crt-power:hover .power-knob, .crt-power:focus-visible .power-knob { box-shadow: inset 0 1px #aaa8, 0 0 0 2px var(--phosphor), 0 0 12px #a9f8cb88; }
.crt-power:focus-visible { outline: none; }
html[data-crt-state="signal-acquiring"] .crt-screen { animation: crt-wake 780ms cubic-bezier(.2,.8,.2,1) both; }
html[data-crt-state="powering-off"] .crt-screen { animation: crt-sleep 470ms ease-in both; }
html[data-crt-renderer="css"] .crt-screen::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .16; background: repeating-radial-gradient(circle at 30% 40%, #fff 0 1px, transparent 1px 4px); mix-blend-mode: screen; }
html[data-crt-renderer="css"][data-crt-channel-kind="empty"] .crt-screen::after { opacity: .92; background: repeating-radial-gradient(circle at 31% 43%, #e8e8df 0 1px, #393c39 1px 2px, #aaa 2px 3px, #111 3px 4px); mix-blend-mode: normal; }
@keyframes crt-wake { 0% { transform: scaleY(.004) scaleX(.12); filter: brightness(8); } 18% { transform: scaleY(.018) scaleX(.72); } 42% { transform: scaleY(1.04) scaleX(.96); filter: brightness(1.7); } 68% { transform: scaleY(.98) scaleX(1.01); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes crt-sleep { 0% { transform: scale(1); filter: brightness(1); } 60% { transform: scaleY(.06) scaleX(.92); filter: brightness(4); } 100% { transform: scaleY(.003) scaleX(.08); filter: brightness(10); } }
@media (min-width: 1001px) and (max-height: 800px) { .crt-takeover { padding: 4px; } .crt-set { width: min(100%, calc((100dvh - 20px) * 1.39)); padding: 12px; } .crt-topline { padding-bottom: 6px; } .crt-brand-logo { font-size: 25px; } .crt-bezel { padding: 12px; } .crt-deck { gap: 14px; padding-top: 10px; } .speaker { height: 34px; } }
@media (max-width: 1000px) { .crt-takeover { padding: 0; place-items: stretch; } .crt-set { display: grid; grid-template-rows: minmax(0, 58dvh) auto minmax(0, 1fr); gap: 7px; width: 100%; height: 100dvh; min-height: 0; padding: 8px; border-radius: 0; } .crt-topline { display: none; } .crt-bezel { display: flex; min-height: 0; padding: 7px; border-radius: 12px; } .crt-screen-shell { display: flex; flex: 1; min-height: 0; } .crt-screen { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 5% / 4%; } .crt-screen video { object-fit: cover; } .crt-mobile-brand { display: block; padding: 3px 8px 2px; font-size: clamp(28px, 8vw, 38px); line-height: 1; text-align: center; } .crt-deck, html[data-crt-static-control="visible"] .crt-deck { grid-template-columns: 1fr auto; grid-template-rows: minmax(64px, 1fr) auto; grid-template-areas: "speaker speaker" "channel power"; gap: 10px 12px; min-height: 0; padding: 0 4px 8px; } .channel-bank { grid-area: channel; align-self: end; } .speaker { grid-area: speaker; align-self: center; justify-self: center; width: 96%; height: clamp(72px, 14dvh, 118px); min-height: 0; min-width: 0; opacity: .72; } .signal-controls, html[data-crt-static-control="visible"] .signal-controls { display: none; } .crt-power { grid-area: power; align-self: end; padding-block: 0; } .crt-osd { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } #crt-static { display: none; } .crt-screen video { transform: scale(1.018); } html[data-crt-channel-kind="empty"] .crt-screen::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .88; background: repeating-radial-gradient(circle at 31% 43%, #e8e8df 0 1px, #393c39 1px 2px, #aaa 2px 3px, #111 3px 4px); } }