:root { color-scheme:dark; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#07090d; color:#ecf1ed; } * { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(circle at 18% 0%,#17322d 0,transparent 34rem),#07090d; } button,a { font:inherit; } .deck { min-height:100vh; padding:20px clamp(20px,5vw,84px) 64px; } .masthead { display:flex; align-items:center; justify-content:space-between; gap:20px; border-block:1px solid #52635d; padding:14px 0; letter-spacing:.13em; font-size:12px; } .brand { color:#edeee5; text-decoration:none; font-weight:700; } .brand span { margin-left:10px; color:#91a29b; } .signal { display:flex; align-items:center; gap:8px; color:#66d6a4; } .signal i { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 14px currentColor; } .end { color:#f1c8aa; border:0; border-bottom:1px solid currentColor; padding:4px 0; background:transparent; cursor:pointer; } .hero,.session,.expired { max-width:1040px; margin:clamp(76px,13vw,166px) auto; } .eyebrow,.timer-card p,.screen-label,.mode { color:#79d4b0; letter-spacing:.16em; font-size:12px; } h1,h2 { margin:15px 0 22px; font-family:Georgia,serif; font-weight:400; letter-spacing:-.055em; line-height:.9; } h1 { font-size:clamp(61px,10vw,138px); } h2 { font-size:clamp(43px,6vw,82px); } .lede,.fine,.channel-copy>p,.channel-detail>p,.expired p { max-width:670px; color:#bcc9c2; font:17px/1.65 Georgia,serif; } .fine { font:12px/1.5 ui-monospace,monospace; color:#8b9b94; } .start { display:flex; align-items:center; justify-content:space-between; gap:34px; width:min(100%,490px); margin:35px 0 14px; padding:17px 18px; color:#06100c; border:1px solid #81e9bf; background:#81e9bf; cursor:pointer; letter-spacing:.1em; font-weight:700; } .start:hover,.start:focus-visible { background:#c5fae1; } .start:disabled { opacity:.6; cursor:wait; } .session { display:grid; grid-template-columns:minmax(200px,.72fr) minmax(0,1.3fr); gap:clamp(36px,8vw,116px); align-items:end; } .timer-card { padding:22px; border:1px solid #558c79; background:rgba(17,39,33,.76); } .timer-card p { margin:0; } .timer-card strong { display:block; margin:12px 0; font-size:clamp(60px,9vw,108px); line-height:.78; letter-spacing:-.09em; font-variant-numeric:tabular-nums; } .timer-card span { color:#a2d8c0; font-size:11px; letter-spacing:.12em; } .rack,.screen { max-width:1240px; margin:0 auto 22px; border:1px solid #34423e; background:#0b0f12; } .rack-head { display:flex; justify-content:space-between; gap:16px; padding:13px 16px; border-bottom:1px solid #34423e; color:#79d4b0; font-size:10px; letter-spacing:.14em; } .rack-group { margin:0; padding:16px; border-bottom:1px solid #26332f; } .rack-group:last-child { border-bottom:0; } .rack-group>p { margin:0 0 11px; color:#b2c4bb; font-size:11px; letter-spacing:.13em; } .channel-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .channel { position:relative; min-width:0; overflow:hidden; padding:0 0 12px; color:#dce9e1; border:1px solid #31443c; background:#11181a; text-align:left; cursor:pointer; } .channel img { width:100%; aspect-ratio:16/9; display:block; object-fit:cover; opacity:.72; filter:saturate(.82) contrast(1.05); transition:transform .32s ease,opacity .32s ease; } .channel:hover img,.channel.active img { opacity:1; transform:scale(1.035); } .channel.active { border-color:#72dbae; box-shadow:0 0 0 1px rgba(114,219,174,.26),0 0 28px rgba(76,211,166,.13); } .channel strong,.channel b { display:block; padding-inline:12px; } .channel strong { margin-top:10px; font-size:13px; letter-spacing:.05em; } .channel b { min-height:22px; margin-top:5px; color:#78c7a4; font-size:8px; line-height:1.35; letter-spacing:.09em; } .channel-plate { position:absolute; top:7px; left:7px; z-index:1; padding:4px 5px; color:#06100c; background:#dce9e1; font-size:8px; letter-spacing:.1em; } .screen-label { margin:0; padding:13px 16px; border-bottom:1px solid #34423e; } .screen-content { display:grid; grid-template-columns:minmax(0,1.38fr) minmax(260px,.62fr); gap:0; } .capture-frame { min-height:350px; margin:0; background:#020506; } .capture-frame img { width:100%; height:100%; min-height:350px; display:block; object-fit:cover; } .channel-detail { padding:clamp(24px,4vw,48px); background:linear-gradient(145deg,rgba(65,151,115,.16),transparent 58%),#101718; } .channel-detail h2 { font-size:clamp(38px,4vw,65px); } .channel-detail .mode { margin:0; font-family:ui-monospace,monospace; } .channel-actions { margin-top:32px; } .launch,.boundary { display:inline-block; color:#a6f1ca; font-size:11px; line-height:1.5; letter-spacing:.1em; } .launch { padding-bottom:4px; border-bottom:1px solid currentColor; text-decoration:none; } .boundary { color:#91a49b; } .expired { text-align:center; } .expired p { margin-inline:auto; } .expired a { display:inline-block; margin-top:16px; color:#89e9c1; letter-spacing:.09em; font-size:12px; } @media (max-width:860px) { .channel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .screen-content,.session { grid-template-columns:1fr; } .capture-frame img,.capture-frame { min-height:0; } } @media (max-width:680px) { .masthead { align-items:flex-start; flex-wrap:wrap; } .signal { order:3; width:100%; } .rack-head { flex-direction:column; } .channel-grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }