@font-face{font-family:"DM Sans";src:url("assets/dm-sans.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("assets/dm-sans-semibold.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"DM Serif";src:url("assets/dm-serif.woff2") format("woff2");font-weight:400;font-display:swap}
:root{font-family:"DM Sans",sans-serif;color-scheme:dark;--cream:oklch(0.95 0.02 85);--ink:oklch(0.2 0.035 18);--green:oklch(0.44 0.15 25);--paper:oklch(0.95 0.025 85);--room:oklch(0.17 0.035 18)}
/* Brand colourways: Velvet (dark default) and Matinee (light), from design/marquee/tokens.css */
:root{--b-ink-muted:oklch(0.43 0.03 25);--b-paper-border:oklch(0.78 0.03 80);--b-paper-muted:oklch(0.88 0.03 82);--b-card:oklch(0.95 0.025 85);--b-error:oklch(0.44 0.15 25);--b-focus:oklch(0.81 0.12 82);--b-device:oklch(0.265 0.048 18)}
html[data-theme=light]{--b-ink-muted:oklch(0.43 0.025 285);--b-paper-border:oklch(0.78 0.03 85);--b-paper-muted:oklch(0.885 0.028 85);--b-card:oklch(0.97 0.012 88);--b-error:oklch(0.5 0.16 28);--b-focus:oklch(0.45 0.2 265);--b-device:oklch(0.45 0.2 265)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--room);color:var(--cream)}a{color:inherit}button,input[type="text"]{font:inherit}button{color:inherit;cursor:pointer;border:0}button,a,input[type="text"]{-webkit-tap-highlight-color:transparent}button,a{transition:background-color 160ms,color 160ms,opacity 160ms}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,input[type="text"]:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--b-focus);outline-offset:5px}svg{pointer-events:none}svg[hidden],[hidden]{display:none!important}.skip-link{position:fixed;top:12px;left:20px;padding:12px 20px;background:var(--cream);color:var(--ink);z-index:20;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}
.site-header{position:absolute;top:0;left:0;width:100%;display:flex;align-items:center;gap:24px;min-height:90px;padding:15px 3.125%;z-index:3;background:linear-gradient(180deg,color-mix(in oklch,oklch(0.17 0.035 18) 93%,transparent),color-mix(in oklch,oklch(0.17 0.035 18) 50%,transparent) 75%,color-mix(in oklch,oklch(0.17 0.035 18) 0%,transparent))}.brand{display:flex;align-items:center;gap:17px;text-decoration:none;flex-shrink:0}.brand img{width:44px;height:44px}.brand span{font-size:28px;letter-spacing:.11em;text-transform:uppercase;font-weight:600}.desktop-nav{margin-left:auto;display:flex;align-items:center;gap:25px}.desktop-nav a,.desktop-nav button{display:inline-flex;align-items:center;font-size:15px;white-space:nowrap;text-decoration:none;background:none;min-height:44px;padding:8px 0}.desktop-nav a:hover,.desktop-nav button:hover{text-decoration:underline;text-underline-offset:6px}.header-actions{display:flex;align-items:center;gap:15px}.header-join{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-underline-offset:5px;white-space:nowrap}.icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:11px;border-radius:5px;background:transparent}.icon-button:hover{background:color-mix(in oklch,oklch(0.95 0.02 85) 12%,transparent)}.icon-button svg{width:22px;height:22px}.menu-toggle{display:none}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 26px;background:var(--cream);color:oklch(0.17 0.035 18);border-radius:6px;font-size:18px;font-weight:600;text-decoration:none;white-space:nowrap}.button:hover{background:oklch(0.88 0.03 82)}
.theatre{position:relative;min-height:66.66667vw;isolation:isolate;overflow:hidden}.auditorium{position:absolute;left:0;top:0;width:100%;height:66.66667vw;z-index:-1}.architecture{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:saturate(.75) brightness(.85)}.room-shade{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in oklch,oklch(0.17 0.035 18) 56%,transparent),transparent 28%),linear-gradient(90deg,color-mix(in oklch,oklch(0.17 0.035 18) 44%,transparent),color-mix(in oklch,oklch(0.17 0.035 18) 21%,transparent) 30%,transparent 44%),linear-gradient(0deg,color-mix(in oklch,oklch(0.17 0.035 18) 40%,transparent),transparent 17%)}.film-frame{position:absolute;left:35.15%;top:21.3%;width:54.7%;height:53.4%;clip-path:polygon(0 26%,100% 0,100% 100%,0 95.7%);margin:0;overflow:hidden;background:oklch(0.2 0.035 18)}.film-frame>.film-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 65%;transform-origin:0 0}.invitation{position:absolute;left:3.125%;top:20vw;width:29.2%;text-shadow:0 2px 10px color-mix(in oklch,oklch(0.17 0.035 18) 46%,transparent)}.invitation h1{font-family:"DM Serif",Georgia,serif;font-size:clamp(48px,4.15vw,72px);font-weight:400;line-height:.99;letter-spacing:-.035em;margin:0 0 18px}.invitation p{font-size:18px;line-height:1.45;margin:0;max-width:440px}.join-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:26px}.primary-join{font-size:20px;padding:12px 25px;min-height:54px;text-shadow:none}.host-link{display:inline-flex;align-items:center;min-height:44px;font-size:16px;text-underline-offset:6px}.scroll-cue{display:inline-flex;align-items:center;gap:20px;min-height:44px;margin-top:20px;font-size:13px;text-decoration:none}.scroll-label{text-decoration:underline;text-underline-offset:5px}.scroll-arrow{font-size:22px}.film-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:24px;background:oklch(0.215 0.042 18);color:var(--cream);font-family:"DM Serif",Georgia,serif;font-size:25px;line-height:1.2}.film-fallback span{font-family:"DM Sans",sans-serif;font-size:12px;line-height:1.5;margin-top:14px}
.hero-annotation{position:absolute;right:6%;bottom:14%;width:clamp(330px,28vw,410px);padding:18px 21px 20px;background:var(--b-card);color:var(--ink);border:4px solid oklch(0.81 0.12 82);box-shadow:0 16px 36px color-mix(in oklch,oklch(0.17 0.035 18) 33%,transparent)}.hero-note-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.hero-note-heading h2{font-size:12px;font-weight:600;margin:0}.hero-note-heading>span{font-size:10px;color:var(--b-ink-muted)}.hero-note-film{font-size:11px;color:var(--b-ink-muted);margin:8px 0 12px}.hero-note-copy{font-family:Georgia,serif;font-size:20px;line-height:1.35;margin:0}
.demo-section{background:var(--paper);color:var(--ink);padding:92px 48px 24px;scroll-margin-top:0;color-scheme:light}.demo-intro{max-width:750px;margin:0 auto 44px;text-align:center}.demo-intro h2{font-family:"DM Serif",Georgia,serif;font-weight:400;font-size:48px;letter-spacing:-.025em;line-height:1.1;margin:0 0 20px}.demo-intro>p{font-size:18px;line-height:1.55;margin:0 auto;max-width:610px}.demo-intro .demo-disclosure{font-size:12px;line-height:1.6;color:var(--b-ink-muted);margin-top:18px;max-width:560px}.device-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(330px,1fr);align-items:start;gap:64px;max-width:1248px;margin:0 auto}.device-label{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:0 3px 15px;font-size:15px;font-weight:600}.tv-column{padding-top:0}.tv-device{padding:6px;border-radius:5px;background:oklch(0.2 0.035 18);color:var(--cream);box-shadow:0 12px 26px color-mix(in oklch,oklch(0.17 0.035 18) 7%,transparent);overflow:hidden}.tv-footer{padding-top:12px}.moment-caption{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.5;margin:0 0 15px}.moment-marker{display:inline-block;flex-shrink:0;width:7px;height:7px;border-radius:50%;background:oklch(0.81 0.12 82);margin-right:1px}.note-heading h4{display:flex;align-items:center;gap:5px}.tv-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:0}.tv-heading h3,.phone-header h3{font-family:"DM Serif",Georgia,serif;font-size:24px;line-height:1.15;font-weight:400;margin:0}.tv-heading h3>span,.phone-header h3>span{font-family:"DM Sans",sans-serif;font-size:11px;margin-left:8px;color:oklch(0.76 0.03 45);white-space:nowrap}.paired-status{font-size:11px;white-space:nowrap;color:var(--b-ink-muted)}.tv-heading h3>span{color:var(--b-ink-muted)}.paired-status>span{margin:0 3px}.tv-picture{position:relative;aspect-ratio:16/9;margin:0;overflow:hidden;background:oklch(0.2 0.035 18)}.tv-picture>.film-image{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 65%}.tv-controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:7px 0}.sample-clock{display:flex;align-items:center;gap:12px}.timecode{font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}.playback-actions{display:flex;align-items:center;gap:5px}.playback-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 7px;background:none;border-radius:4px;font-size:14px}.playback-button:hover{background:color-mix(in oklch,oklch(0.95 0.02 85) 8%,transparent)}.playback-button svg{width:18px;height:18px}.tv-feet{position:relative;width:76%;height:24px;margin:0 auto}.tv-feet:before,.tv-feet:after{content:"";position:absolute;top:7px;width:45px;height:5px;background:oklch(0.2 0.035 18);border-radius:2px}.tv-feet:before{left:0;transform:rotate(-23deg)}.tv-feet:after{right:0;transform:rotate(23deg)}.replay-button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px;background:none;font-size:14px;border-radius:4px}.replay-button svg{width:18px;height:18px}.replay-button:hover{background:color-mix(in oklch,var(--green) 7%,transparent)}.source-credit{display:block;min-height:44px;max-width:100%;padding:13px 0;background:none;font-size:14px;line-height:1.4;color:var(--b-ink-muted);text-decoration:underline;text-underline-offset:4px}
.phone-column{max-width:365px;width:100%;justify-self:end}.phone-device{background:var(--b-device);padding:8px;border-radius:27px;box-shadow:0 12px 26px color-mix(in oklch,oklch(0.17 0.035 18) 7%,transparent);overflow:hidden}.phone-device:before{content:"";display:block;width:44px;height:4px;border-radius:4px;background:oklch(0.215 0.042 18);margin:4px auto 0}.phone-header{color:var(--cream);padding:15px 18px 7px}.phone-brand{display:flex;justify-content:space-between;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:600}.phone-brand>span{text-transform:none;letter-spacing:0;font-size:9px;font-weight:400;color:oklch(0.76 0.03 45)}.phone-header h3{margin-top:19px;font-size:25px}.phone-sync{display:flex;justify-content:space-between;align-items:center;margin-top:3px}.phone-sync .icon-button{width:auto;gap:6px;padding:8px}.phone-control-label{font-size:9px;white-space:nowrap}.phone-sync .timecode{font-size:12px;color:oklch(0.76 0.03 45)}.phone-body{background:var(--b-card);border-radius:0 0 20px 20px;padding:14px 20px 21px}.note-heading,.room-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.note-heading h4,.room-heading h4{margin:0;font-size:12px;font-weight:600}.note-heading h4>span{font-weight:400;color:var(--b-ink-muted)}.save-button{color:var(--b-ink-muted)}.save-button:hover{background:color-mix(in oklch,var(--b-paper-muted) 60%,transparent)}.save-button[aria-pressed=true] svg{fill:var(--green);stroke:var(--green)}.host-byline{font-size:12px;margin:0 0 13px;line-height:1.5}.host-byline>span{display:block;font-size:10px;color:var(--b-ink-muted)}.note-content p{font-family:Georgia,serif;font-size:20px;line-height:1.4;margin:0}.note-content .waiting-note{font-family:"DM Sans",sans-serif;font-size:16px;line-height:1.6;color:var(--b-ink-muted)}.waiting-note strong{font-weight:600;white-space:nowrap}.save-feedback{font-size:11px;line-height:1.4;min-height:16px;margin:9px 0 0;color:var(--b-ink-muted)}.room-chat{border-top:1px solid var(--b-paper-border);padding-top:21px;margin-top:14px}.room-heading>span{font-size:9px;color:var(--b-ink-muted)}.messages{margin-top:18px}.message{margin-bottom:16px}.message h5{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;line-height:1.4;font-weight:600;margin:0 0 5px}.message h5>span{font-size:9px;font-weight:400;color:var(--b-ink-muted);margin-left:6px}.message-time{font-size:10px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--b-ink-muted)}.message p{overflow-wrap:anywhere;font-size:16px;line-height:1.5;margin:0}.message.is-you{border-left:2px solid var(--green);padding-left:10px}#reply-form{border-top:1px solid var(--b-paper-border);padding-top:16px}#reply-form label{display:block;font-size:11px;font-weight:600;margin-bottom:8px}.reply-composer{display:flex;align-items:stretch;gap:8px}input[type="text"]{display:block;flex:1;width:100%;min-width:0;min-height:48px;border:1px solid var(--b-paper-border);border-radius:4px;background:oklch(0.95 0.025 85);color:var(--ink);padding:9px 10px;font-size:14px;line-height:1.5}input[type="text"][aria-invalid=true]{border-color:var(--b-error)}.reply-hint{font-size:9px;line-height:1.5;color:var(--b-ink-muted);margin:7px 0 10px}.reply-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 12px;white-space:nowrap;border:1px solid var(--green);border-radius:4px;background:none;color:var(--green);font-size:12px;font-weight:600}.reply-button:hover{background:var(--b-paper-muted)}.reply-feedback{font-size:11px;line-height:1.5;color:var(--b-ink-muted);margin:8px 0 0}.reply-feedback:empty{margin:0}.reply-feedback.is-error{color:var(--b-error)}.demo-join{display:flex;justify-content:center;max-width:1248px;margin:48px auto 0}.demo-join .button{background:var(--green);color:var(--cream)}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:1248px;margin:72px auto 0;padding-top:20px;border-top:1px solid var(--b-paper-border);color:var(--b-ink-muted);font-size:11px}.site-footer a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}
.dialog-demo-link,.source-link{display:flex;align-items:center;min-height:44px;padding:8px 0;text-underline-offset:3px}dialog{width:min(540px,calc(100% - 40px));max-height:calc(100dvh - 40px);border:1px solid var(--b-paper-border);border-radius:12px;background:var(--cream);color:var(--ink);padding:45px 36px 36px;box-shadow:0 20px 80px #0008;color-scheme:light}dialog::backdrop{background:color-mix(in oklch,oklch(0.17 0.035 18) 75%,transparent);backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:8px;top:7px;font-size:29px;font-family:Arial,sans-serif}.dialog-close:hover{background:color-mix(in oklch,var(--b-ink-muted) 15%,transparent)}dialog h2{font-family:"DM Serif",Georgia,serif;font-size:34px;line-height:1.1;font-weight:400;letter-spacing:-.02em;margin:0 0 20px}dialog p{font-size:16px;line-height:1.6}dialog .button{background:var(--green);color:var(--cream);margin-top:10px}.menu-dialog nav{display:flex;flex-direction:column;gap:6px}.menu-dialog nav>button,.menu-dialog nav>a:not(.button){background:none;text-align:left;text-decoration:none;min-height:44px;padding:10px 0;font-size:18px}
.brand .brand-mark-light{display:none}
html[data-theme=light] .brand .brand-mark-dark{display:none}
html[data-theme=light] .brand .brand-mark-light{display:block}
/* Light theme uses the live site's cobalt: oklch(0.45 0.2 265). */
html[data-theme=light]{color-scheme:light;--cobalt:oklch(0.45 0.2 265);--room:oklch(0.955 0.02 88);--paper:oklch(0.925 0.025 85);--ink:oklch(0.19 0.026 285);--green:var(--cobalt)}
html[data-theme=light] .site-header{color:var(--ink);background:oklch(0.955 0.02 88);border-bottom:1px solid oklch(0.78 0.03 85)}
html[data-theme=light] .brand,html[data-theme=light] .header-join,html[data-theme=light] .theme-toggle{color:var(--cobalt)}
html[data-theme=light] .theatre{background:oklch(0.19 0.026 285)}
html[data-theme=light] .invitation{color:var(--cream);text-shadow:0 2px 10px color-mix(in oklch,oklch(0.17 0.035 18) 46%,transparent)}
html[data-theme=light] .invitation h1{color:var(--cream)}
html[data-theme=light] .architecture{opacity:1}
html[data-theme=light] .primary-join,html[data-theme=light] .demo-join .button,html[data-theme=light] dialog .button{background:var(--cobalt);color:oklch(0.97 0.012 88)}
html[data-theme=light] .primary-join:hover,html[data-theme=light] .demo-join .button:hover,html[data-theme=light] dialog .button:hover{background:color-mix(in oklch,oklch(0.45 0.2 265) 82%,oklch(0.19 0.026 285))}
html[data-theme=light] .host-link,html[data-theme=light] .scroll-cue,html[data-theme=light] .source-credit,html[data-theme=light] .source-link,html[data-theme=light] .dialog-demo-link{color:var(--cobalt)}
html[data-theme=light] .invitation .host-link,html[data-theme=light] .invitation .scroll-cue{color:var(--cream)}
html[data-theme=light] .hero-annotation{background:oklch(0.97 0.012 88);border-color:var(--cobalt);box-shadow:0 16px 36px color-mix(in oklch,oklch(0.19 0.026 285) 19%,transparent)}
html[data-theme=light] .hero-note-heading h2,html[data-theme=light] .note-heading h4,html[data-theme=light] .room-heading h4,html[data-theme=light] .hero-note-heading>span{color:var(--cobalt)}
html[data-theme=light] .phone-body{background:oklch(0.97 0.012 88)}
html[data-theme=light] .phone-header{color:oklch(0.97 0.012 88)}
html[data-theme=light] .phone-brand>span,html[data-theme=light] .phone-header h3>span,html[data-theme=light] .phone-sync .timecode{color:oklch(0.97 0.012 88)}
html[data-theme=light] .phone-device:before{background:color-mix(in oklch,oklch(0.45 0.2 265) 70%,oklch(0.19 0.026 285))}
html[data-theme=light] .moment-marker{background:var(--cobalt)}
html[data-theme=light] .save-button{color:var(--cobalt)}
html[data-theme=light] .save-button[aria-pressed=true] svg{fill:var(--cobalt);stroke:var(--cobalt)}
html[data-theme=light] .save-button:hover,html[data-theme=light] .reply-button:hover,html[data-theme=light] .replay-button:hover,html[data-theme=light] .playback-button:hover,html[data-theme=light] .theme-toggle:hover,html[data-theme=light] .menu-toggle:hover,html[data-theme=light] .dialog-close:hover{background:oklch(0.885 0.028 85)}
html[data-theme=light] .reply-button{border-color:var(--cobalt);color:var(--cobalt)}
html[data-theme=light] input[type=text]{background:oklch(0.97 0.012 88);border-color:oklch(0.78 0.03 85)}
html[data-theme=light] input[aria-invalid=true]{border-color:var(--b-error)}
html[data-theme=light] .save-feedback,html[data-theme=light] .reply-feedback{color:var(--cobalt)}
html[data-theme=light] .reply-feedback.is-error{color:var(--b-error)}
html[data-theme=light] .message.is-you{border-left-color:var(--cobalt)}
html[data-theme=light] .room-chat,html[data-theme=light] #reply-form,html[data-theme=light] .site-footer{border-color:oklch(0.78 0.03 85)}
html[data-theme=light] dialog{background:oklch(0.97 0.012 88);border-color:oklch(0.78 0.03 85)}
html[data-theme=light] :is(button,a,input,[tabindex]):focus-visible{outline-color:var(--cobalt)}
@media(min-width:1700px){.invitation{top:21vw}.demo-section{padding-top:110px}}
@media(max-width:1270px) and (min-width:1001px){.site-header{gap:15px}.brand span{font-size:23px}.desktop-nav{gap:17px}.desktop-nav a,.desktop-nav button{font-size:14px}.header-actions{gap:6px}.invitation h1{font-size:45px}.invitation p{font-size:17px}.primary-join{font-size:18px}.scroll-cue{margin-top:10px}.device-layout{gap:40px;grid-template-columns:minmax(0,1.45fr) minmax(330px,1fr)}.paired-status{font-size:9px}.tv-heading h3{font-size:22px}.sample-clock{gap:7px}}
@media(max-width:1000px){.hero-annotation{position:relative;right:auto;bottom:auto;width:calc(100% - 64px);max-width:500px;margin:-70px auto 32px;padding:19px 23px 22px}.site-header{padding:18px 32px;min-height:86px}.brand span{font-size:24px}.desktop-nav,.header-join{display:none}.menu-toggle{display:inline-flex}.header-actions{margin-left:auto;gap:7px}.theatre{min-height:0}.invitation{position:relative;left:auto;top:auto;width:auto;margin:0 auto;padding:143px 32px 32px;max-width:760px;text-align:center}.invitation h1{font-size:60px;line-height:1.02}.invitation p{max-width:520px;margin:0 auto}.join-actions{flex-direction:row;align-items:center;justify-content:center;gap:28px;margin-top:26px}.scroll-cue{margin-top:20px}.auditorium{position:relative;height:auto;aspect-ratio:1.5;z-index:-1}.room-shade{background:linear-gradient(180deg,color-mix(in oklch,oklch(0.17 0.035 18) 0%,transparent) 76%,color-mix(in oklch,oklch(0.17 0.035 18) 50%,transparent))}.demo-section{padding:68px 32px 24px}.demo-intro{margin-bottom:32px}.demo-intro h2{font-size:42px}.device-layout{grid-template-columns:minmax(0,1fr);gap:42px;max-width:660px}.phone-column{justify-self:center;max-width:365px}.tv-heading{padding-bottom:0}.site-footer{margin-top:48px}}
@media(max-width:620px){.hero-annotation{width:calc(100% - 40px);margin:-24px 20px 28px;padding:17px 19px 20px}.hero-note-copy{font-size:19px}.site-header{padding:16px 20px;min-height:76px;gap:10px;background:oklch(0.17 0.035 18)}.brand{gap:10px}.brand img{width:35px;height:35px}.brand span{font-size:20px;letter-spacing:.11em}.header-actions{gap:0}.invitation{text-align:left;padding:118px 20px 20px}.invitation h1{font-size:40px;line-height:1.08;letter-spacing:-.025em;margin-bottom:16px}.invitation p{font-size:18px;line-height:1.45}.join-actions{justify-content:flex-start;gap:23px;margin-top:24px;flex-wrap:wrap}.primary-join{padding:12px 22px;font-size:18px;min-height:52px}.host-link{font-size:17px}.scroll-cue{margin-top:13px}.demo-section{padding:52px 20px 20px}.demo-intro{text-align:left;margin-bottom:24px}.demo-intro h2{font-size:36px;line-height:1.1;margin-top:0}.demo-intro>p{font-size:16px;line-height:1.55}.demo-intro .demo-disclosure{font-size:11px;margin-top:15px}.device-layout{gap:35px}.device-label{font-size:14px;padding-bottom:12px}.tv-device{padding:5px;border-radius:4px}.tv-heading{align-items:center;padding:0;gap:8px}.tv-heading h3{font-size:20px}.tv-heading h3>span{font-size:9px;margin-left:4px}.paired-status{font-size:8px;line-height:1.5}.tv-controls{padding:6px 1px 0;gap:4px;min-height:56px}.sample-clock{display:block}.timecode{font-size:12px}.playback-actions{width:100%;justify-content:space-between;gap:0}.tv-controls .timecode{font-size:14px}.playback-button{gap:5px;padding:9px 5px;font-size:14px}.replay-button{gap:4px;font-size:14px;padding:8px 4px}.replay-button svg{width:16px}.playback-actions .icon-button{width:44px;padding:11px}.phone-column{max-width:none}.phone-device{padding:7px;border-radius:23px}.phone-header{padding:14px 16px 5px}.phone-body{padding:13px 17px 19px;border-radius:0 0 17px 17px}.note-content p{font-size:19px;line-height:1.4}.message p{font-size:16px}.room-heading>span{font-size:9px}.reply-hint{font-size:10px}.reply-button{font-size:12px}.site-footer{font-size:10px;margin-top:38px;gap:12px}.site-footer>span{max-width:210px}dialog{padding:42px 24px 28px}dialog h2{font-size:31px}html[data-theme=light] .site-header{background:oklch(0.955 0.02 88)}}
@media(max-width:350px){.brand span{font-size:17px;letter-spacing:.08em}.brand{gap:8px}.invitation h1{font-size:37px}.join-actions{gap:12px}.primary-join{padding:12px 17px;font-size:16px}.host-link{font-size:16px}.demo-intro h2{font-size:32px}.phone-body{padding:12px 14px 17px}.room-heading>span{font-size:8px}.tv-heading h3{font-size:18px}.paired-status{font-size:7px}.tv-controls .timecode{font-size:14px}.playback-button{font-size:14px;gap:3px}.playback-button svg{width:15px}.phone-brand>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Public landing-page extension. The approved theatre and demo stay intact. */
:root{--extension-surface:oklch(0.17 0.035 18);--extension-soft:oklch(0.215 0.042 18);--extension-text:oklch(0.95 0.02 85);--extension-muted:oklch(0.76 0.03 45);--extension-rule:oklch(0.42 0.045 18);--extension-accent:oklch(0.81 0.12 82);--extension-closing:oklch(0.265 0.048 18);--extension-space:88px;--extension-gutter:48px;--extension-serif:"DM Serif",Georgia,serif}
.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}
.extension-section{padding:var(--extension-space) var(--extension-gutter);color:var(--extension-text);scroll-margin-top:24px}
.section-inner{max-width:1248px;margin:0 auto}
.extension-section h2{font:400 clamp(40px,4.4vw,62px)/1.06 var(--extension-serif);letter-spacing:-.025em;margin:0}
.extension-section p{font-size:17px;line-height:1.6;margin:0}
.how-section{background:var(--extension-soft)}
.how-heading{display:flex;align-items:baseline;justify-content:space-between;gap:32px;padding-bottom:38px;border-bottom:1px solid var(--extension-rule)}
.how-heading h2{font-size:44px;margin:0}
.screening-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.screening-steps li{padding-top:26px}
.step-reel{display:block;width:26px;height:26px;color:var(--extension-accent);margin-bottom:22px}
.screening-steps h3{font-size:20px;font-weight:600;line-height:1.3;margin:0 0 12px}
.screening-steps p{color:var(--extension-muted);max-width:320px}
.programme-section{background:var(--extension-surface)}
.programme-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:44px}
.programme-heading>div:first-child{flex:1}
.programme-image{display:block;width:100%;height:100%;object-fit:cover}
.programme-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:28px;color:var(--extension-text)}
.programme-fallback>span{font:400 30px/1.15 var(--extension-serif)}
.programme-fallback p{font-size:16px;max-width:330px}
.hosts-section{background:var(--extension-soft);border-top:1px solid var(--extension-rule)}
.hosts-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:100px;align-items:start}
.hosts-intro{scroll-margin-top:24px}.hosts-intro h3{font:400 36px/1.15 var(--extension-serif);letter-spacing:-.015em;margin:0}.hosts-intro>p{max-width:440px;margin-top:24px;color:var(--extension-muted)}
.host-apply{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:18px;color:var(--extension-accent);font-size:16px;text-underline-offset:5px}.host-apply:hover{text-decoration-thickness:2px}
.screening-roles{min-width:0}
.role-tabs{display:flex;border-bottom:1px solid var(--extension-rule);gap:30px;margin-top:29px}
.role-tabs [role=tab]{position:relative;min-height:48px;padding:8px 0 15px;background:none;color:var(--extension-muted);font-size:16px}
.role-tabs [role=tab][aria-selected=true]{color:var(--extension-text)}
.role-tabs [role=tab][aria-selected=true]:after{position:absolute;content:"";height:3px;bottom:-1px;left:0;right:0;background:var(--extension-accent)}
.role-tabs [role=tab]:hover{color:var(--extension-text)}
.role-panel{padding-top:31px}
.role-panel h3{font:400 32px/1.15 var(--extension-serif);letter-spacing:-.01em;margin:0 0 16px}
.role-points{list-style:none;padding:0;margin:0;max-width:480px;display:grid;gap:24px}
.role-points li{display:grid;grid-template-columns:25px minmax(0,1fr);gap:15px;align-items:start}
.role-points p{margin:0;color:var(--extension-muted)}
.role-reel{width:20px;height:20px;color:var(--extension-accent);margin-top:4px}
.waitlist-section{background:var(--extension-closing);padding-bottom:22px}
.closing-invitation{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:80px;align-items:center}
.waitlist-section h2{font-size:clamp(44px,5.5vw,76px)}
.closing-signup>p{max-width:340px;color:var(--extension-text)}
.closing-actions{display:flex;flex-direction:column;align-items:flex-start;gap:26px;margin-top:26px}
.closing-actions .button{background:var(--extension-text);color:var(--extension-closing)}
.closing-actions .button:hover{background:oklch(0.88 0.03 82)}

.waitlist-section .site-footer{margin-top:80px;border-color:color-mix(in oklch,oklch(0.95 0.02 85) 25%,transparent);color:var(--extension-text);font-size:13px}
.footer-wordmark{display:inline-flex;align-items:center;gap:14px;font-size:17px;font-weight:600;letter-spacing:.12em;text-decoration:none;text-transform:uppercase}.footer-wordmark img{display:block;width:44px;height:44px}.footer-wordmark .footer-mark-light{display:none}html[data-theme=light] .footer-mark-dark{display:none}html[data-theme=light] .footer-mark-light{display:block}
html[data-theme=light]{--extension-surface:oklch(0.955 0.02 88);--extension-soft:oklch(0.925 0.025 85);--extension-text:oklch(0.19 0.026 285);--extension-muted:oklch(0.43 0.025 285);--extension-rule:oklch(0.78 0.03 85);--extension-accent:var(--cobalt);--extension-closing:var(--cobalt)}


html[data-theme=light] .waitlist-section{color:oklch(0.97 0.012 88);--extension-text:oklch(0.97 0.012 88)}
html[data-theme=light] .closing-actions .button{color:var(--cobalt);background:oklch(0.97 0.012 88)}
html[data-theme=light] .closing-actions .button:hover{background:oklch(0.885 0.028 85)}
@media(max-width:1100px){.hosts-layout{gap:54px}.programme-heading{gap:34px}.screening-steps{gap:32px}}
@media(max-width:800px){:root{--extension-space:64px;--extension-gutter:32px}.how-heading{display:block;padding-bottom:28px}.how-heading h2{margin-top:0;font-size:40px}.screening-steps{gap:26px}.screening-steps h3{font-size:18px}.screening-steps p{font-size:16px}.programme-heading{display:block}.programme-heading h2 br{display:none}.hosts-layout{gap:38px}.hosts-intro>p{font-size:16px}.role-tabs{gap:25px}.role-panel h3{font-size:29px}.waitlist-section .site-footer{margin-top:60px}}
@media(max-width:620px){:root{--extension-space:52px;--extension-gutter:20px}.extension-section{scroll-margin-top:16px}.extension-section h2{font-size:38px}.extension-section p{font-size:16px}.how-heading{padding-bottom:23px}.how-heading h2{font-size:36px}.screening-steps{display:block}.screening-steps li{position:relative;padding:23px 0 23px 47px;border-bottom:1px solid var(--extension-rule)}.screening-steps li:last-child{border:0;padding-bottom:0}.step-reel{position:absolute;left:0;top:25px;width:22px;height:22px;margin:0}.screening-steps h3{font-size:19px;margin-bottom:9px}.screening-steps p{max-width:none;font-size:16px}.programme-heading{margin-bottom:29px}.hosts-layout{display:block}.hosts-intro>p{margin-top:24px}.hosts-intro{margin-top:40px;padding-top:30px;border-top:1px solid var(--extension-rule);scroll-margin-top:16px}.hosts-intro h3{font-size:32px;margin-top:0}.host-apply{font-size:16px;margin-top:15px;gap:14px}.role-tabs{gap:32px}.role-panel{padding-top:27px}.role-panel h3{font-size:31px}.waitlist-section h2{font-size:44px}.closing-actions{gap:22px;margin-top:24px}.waitlist-section .site-footer{margin-top:54px;font-size:12px}.programme-fallback{padding:20px}.programme-fallback>span{font-size:26px}.programme-fallback p{font-size:16px}}
@media(max-width:350px){.extension-section h2{font-size:34px}.waitlist-section h2{font-size:38px}}
html[data-theme=light] .waitlist-section :is(button,a,[tabindex]):focus-visible{outline-color:oklch(0.97 0.012 88)}
@media(max-width:800px){.hosts-intro h3{font-size:32px}}
@media(max-width:620px){.hosts-intro h3{font-size:32px}}


@media(max-width:1100px){.closing-invitation{gap:44px}}
@media(max-width:900px){.closing-invitation{grid-template-columns:1fr;gap:30px}.closing-signup>p{max-width:470px}.closing-actions{gap:22px}}
@media(max-width:620px){.closing-invitation{gap:25px}}

/* Original portrait posters extend the live site's geometric artwork language. */
.genre-programme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;align-items:start}
.genre-film{min-width:0}
.genre-poster{position:relative;aspect-ratio:3/4;margin:0;overflow:hidden;background:oklch(0.215 0.042 18)}
.genre-poster .programme-image{object-fit:contain}
.genre-caption{padding-top:24px}
.genre-caption h3{font:400 34px/1.13 var(--extension-serif);letter-spacing:-.015em;margin:0}
.genre-caption h3>span{display:inline-block;vertical-align:middle;font:400 14px/1.5 "DM Sans",sans-serif;letter-spacing:0;color:var(--extension-muted);margin-left:8px}
.genre-caption .genre-credit{font-size:14px;line-height:1.5;margin-top:11px;color:var(--extension-accent)}

@media(max-width:1100px){.genre-programme{gap:28px}.genre-caption h3{font-size:31px}}
@media(max-width:800px){.genre-programme{gap:22px}.genre-caption{padding-top:20px}.genre-caption h3{font-size:29px}.genre-caption h3>span{font-size:12px;margin-left:5px}}
@media(max-width:620px){.genre-programme{grid-template-columns:1fr;gap:36px}.genre-film+.genre-film{padding-top:30px;border-top:1px solid var(--extension-rule)}.genre-poster{max-width:440px}.genre-caption h3{font-size:34px}.genre-caption h3>span{font-size:13px;margin-left:8px}.genre-caption{padding-top:22px}}

/* Host-note attribution follows the note, without an eyebrow label. */
.programme-host-note{margin:22px 0 0;padding:18px 20px;border-left:3px solid var(--extension-accent);background:var(--extension-soft)}
.programme-host-note p{font:400 17px/1.6 "DM Sans",sans-serif;color:var(--extension-text)}
.programme-host-note footer{margin-top:16px;font:500 13px/1.5 "DM Sans",sans-serif;color:var(--extension-accent)}
.programme-host-note footer span{font-weight:400;color:var(--extension-muted)}
@media(max-width:800px){.programme-host-note{padding:16px}.programme-host-note p{font-size:16px}}

/* v31: programme disclosure; phone demo keeps the TV in view while the phone scrolls */
.programme-disclosure{margin-top:14px!important;font-size:14px!important;line-height:1.5;color:var(--extension-muted)}

/* v31: waitlist and host forms in dialogs (demo only, nothing is sent) */
.signup-dialog{width:min(580px,calc(100% - 32px));overscroll-behavior:contain}
.signup-dialog h2{padding-right:32px}
.signup-dialog [data-step=form]>p{margin:0 0 8px}
.signup-dialog [data-step=form]>.form-disclosure{font-size:13px;line-height:1.5;color:var(--b-ink-muted);margin:0 0 26px}
.signup-form{display:flex;flex-direction:column;gap:24px}
.field{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;border:0;min-width:0}
.field>label,.field>legend{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;padding:0;font-size:15px;line-height:1.4;font-weight:600}
.field>legend{margin-bottom:9px}
.field-opt{font-size:12px;font-weight:400;color:var(--b-ink-muted)}
.field-hint{margin:-4px 0 0!important;font-size:13px!important;line-height:1.45!important;color:var(--b-ink-muted)}
.signup-form input[type=text],.signup-form input[type=email],.signup-form select,.signup-form textarea{width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--b-paper-border);border-radius:4px;background:oklch(0.95 0.025 85);color:var(--ink);font:inherit;font-size:16px}
.signup-form textarea{resize:vertical}
.signup-form ::placeholder{color:var(--b-ink-muted)}
.signup-form [aria-invalid=true]{border-color:var(--b-error)}
.signup-form :is(input,select,textarea):focus-visible{outline:3px solid var(--b-focus);outline-offset:3px}
.host-row{display:flex;gap:8px}.host-row input{flex:1 1 auto;min-width:0}.host-row select{flex:0 0 auto;width:auto}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--green);border-radius:4px;font-size:14px;line-height:1.2;color:var(--green);transition:background-color 160ms,color 160ms}
.chip:hover span{background:var(--b-paper-muted)}
.chip input:checked+span{background:var(--green);border-color:var(--green);color:var(--cream)}
.chip input:focus-visible+span{outline:3px solid var(--b-focus);outline-offset:3px}
.form-error{margin:0!important;font-size:14px!important;line-height:1.5;color:var(--b-error)}
.signup-form .button{width:100%;margin-top:0}
.form-note{margin:0!important;font-size:13px!important;line-height:1.55!important;color:var(--b-ink-muted)}
.signup-done{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.signup-done h3{font-size:18px;margin:0}.signup-done p{margin:0 0 12px}
html[data-theme=light] .signup-form input[type=text],html[data-theme=light] .signup-form input[type=email],html[data-theme=light] .signup-form select,html[data-theme=light] .signup-form textarea{background:oklch(0.955 0.02 88);border-color:oklch(0.78 0.03 85);color:oklch(0.19 0.026 285)}
html[data-theme=light] .signup-form :is(input,select,textarea):focus-visible,html[data-theme=light] .chip input:focus-visible+span{outline-color:var(--cobalt)}
html[data-theme=light] .chip span{border-color:var(--cobalt);color:var(--cobalt)}
html[data-theme=light] .chip:hover span{background:oklch(0.885 0.028 85)}
html[data-theme=light] .chip input:checked+span{background:var(--cobalt);color:oklch(0.97 0.012 88)}
html[data-theme=light] .signup-dialog .form-disclosure,html[data-theme=light] .field-opt,html[data-theme=light] .field-hint,html[data-theme=light] .form-note{color:oklch(0.43 0.025 285)}
@media(max-width:620px){.signup-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}.host-row{flex-wrap:wrap}.host-row select{flex:1 1 100%}}
/* v31: headline sizing for the longer hero line */
.invitation h1{text-wrap:balance}
@media(min-width:1271px){.invitation h1{font-size:clamp(48px,3.9vw,70px)}}
@media(max-width:1270px) and (min-width:1001px){.invitation h1{font-size:clamp(36px,3.8vw,45px)}}
/* v31: hero scroll caret replaces the host link and scroll cue */
.scroll-caret{position:absolute;left:50%;top:min(calc(100svh - 166px),calc(66.66667vw - 76px));z-index:2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-left:-24px;border-radius:50%;color:var(--cream);filter:drop-shadow(0 2px 6px #0009);animation:caret-blink 2.4s ease-in-out infinite}
.scroll-caret svg{width:34px;height:34px}
.scroll-caret:hover,.scroll-caret:focus-visible{animation-play-state:paused;opacity:1}
@keyframes caret-blink{0%,100%{opacity:.9;transform:translateY(0)}50%{opacity:.3;transform:translateY(5px)}}
@media(max-width:1000px){.scroll-caret{display:none}}
/* v31: sticky navigation */
html{scroll-padding-top:90px}
.site-header{position:fixed;top:env(safe-area-inset-top,0px);z-index:10;transition:background-color .25s,box-shadow .25s}
.site-header.is-scrolled{background:oklch(0.17 0.035 18);box-shadow:0 1px 0 oklch(0.42 0.045 18)}
html[data-theme=light] .site-header.is-scrolled{background:oklch(0.955 0.02 88);box-shadow:none}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:oklch(0.17 0.035 18)}
html[data-theme=light] body::before{background:oklch(0.955 0.02 88)}
@media(max-width:620px){html{scroll-padding-top:76px}}
/* v31: on phones the TV pins below the nav while the phone scrolls past it */
@media(max-width:620px){.device-layout{gap:0}.tv-column{display:contents}.source-credit{margin-bottom:28px}.tv-device{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);z-index:1}.phone-column{position:relative;z-index:2}.phone-column>.device-label{visibility:hidden}.phone-device{box-shadow:0 -12px 28px #0000004d}}
/* v31: hero screen shows a silent-film title card; the hero card describes the screening */
.film-frame{container-type:inline-size}
.film-frame>.intertitle{position:absolute;inset:0;width:100%;height:100%;transform-origin:0 0;display:flex;align-items:center;justify-content:center;background:oklch(0.2 0.035 18);color:oklch(0.95 0.02 85)}
.intertitle-inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqw;width:72%;height:66%;border:.5cqw double color-mix(in oklch,oklch(0.95 0.02 85) 72%,transparent);text-align:center;transition:opacity .5s}.intertitle-inner:before{content:"";position:absolute;inset:1.1cqw;border:.12cqw solid color-mix(in oklch,oklch(0.95 0.02 85) 40%,transparent)}.intertitle.is-fading .intertitle-inner{opacity:0}
.intertitle p{margin:0}
.intertitle-kicker{font-family:"IM Fell English",Georgia,serif;font-style:italic;font-size:3.2cqw;letter-spacing:.04em;opacity:.8}.intertitle-title{font-family:"IM Fell English",Georgia,serif;font-size:8.6cqw;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;padding:0 4cqw}
.intertitle-rule{width:18%;height:.3cqw;background:color-mix(in oklch,oklch(0.95 0.02 85) 70%,transparent)}
.intertitle-line{font-family:"IM Fell English",Georgia,serif;font-style:italic;font-size:4.4cqw;line-height:1.1}
.screening-film{font-family:"DM Serif",Georgia,serif;font-size:30px;line-height:1.1;margin:12px 0 0}
.screening-film [data-slate=year]{font-family:"DM Sans",sans-serif;font-size:12px;margin-left:6px;color:var(--b-ink-muted)}
.hero-screening .hero-note-film{margin:6px 0 16px}
.screening-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 28px;margin:0;padding-top:14px;border-top:1px solid var(--b-paper-border)}
.screening-facts dt{font-size:11px;color:var(--b-ink-muted)}
.screening-facts dd{margin:3px 0 0;font-size:15px;font-weight:600}
@media(max-width:620px){.screening-film{font-size:27px}.screening-facts{gap:8px 20px}}
/* v31: on phones and tablets the hero copy sits over the theatre itself */
:root{--hero-shade:30%}
@media(max-width:1000px){
.theatre{display:flex;flex-direction:column;min-height:0}
.auditorium{position:absolute;inset:0;height:auto;aspect-ratio:auto;z-index:-1}
.architecture{object-fit:cover;object-position:50% 30%}
.film-frame{display:none}
.room-shade{background:linear-gradient(180deg,color-mix(in oklch,oklch(0.17 0.035 18) var(--hero-shade),transparent) 0%,color-mix(in oklch,oklch(0.17 0.035 18) var(--hero-shade),transparent) 55%,color-mix(in oklch,oklch(0.17 0.035 18) calc(var(--hero-shade) + 20%),transparent) 100%)}
.invitation{padding:143px 32px 24px;text-shadow:0 2px 14px color-mix(in oklch,oklch(0.17 0.035 18) 70%,transparent)}
.hero-annotation{margin:16px auto 36px}
}
@media(max-width:620px){.invitation{padding:118px 20px 20px}.hero-annotation{margin:12px 20px 32px}.scroll-caret{display:none}}
@media(max-width:1000px){.invitation{padding-bottom:64px}}
@media(max-width:620px){.invitation{padding-bottom:56px}}
/* v31: start the theatre below the nav so the ceiling starburst shows */
.theatre{margin-top:90px}
.site-header{background:oklch(0.17 0.035 18)}
html[data-theme=light] .site-header{background:oklch(0.955 0.02 88)}
@media(max-width:1000px){.theatre{margin-top:86px}.invitation{padding-top:60px}.architecture{object-position:50% 0}}
@media(max-width:620px){.theatre{margin-top:76px}.invitation{padding-top:48px}}
@media(max-width:1000px){.hero-screening{display:none}}
@media(min-width:1001px){.hero-annotation{bottom:21%}}
/* v31: rotating slate of screenings in the hero */
.hero-screening [data-slate]{transition:opacity .4s}
.hero-screening.is-fading [data-slate]{opacity:0}
.slate-dots{display:flex;gap:6px;margin-top:14px}
.slate-dots i{width:6px;height:6px;border-radius:50%;background:var(--b-paper-border)}
.slate-dots i.is-on{background:var(--b-ink-muted)}
.screening-film [data-slate=year]{font-family:"DM Sans",sans-serif;font-size:12px;margin-left:6px;color:var(--b-ink-muted)}
.intertitle-title.is-long{font-size:6.4cqw}
.intertitle-inner{height:60%;transform:translateY(-6%)}
/* Launch: signup dialogs post to the Cloudflare functions in functions/api */
.host-list{display:flex;flex-direction:column;gap:8px}
.host-remove{font-size:24px;font-family:Arial,sans-serif;color:var(--b-ink-muted)}
.host-remove:hover{background:color-mix(in oklch,var(--b-ink-muted) 15%,transparent)}
.host-add{align-self:flex-start;background:none;padding:8px 0;font-size:15px;text-decoration:underline;color:var(--green)}
.signup-form .button:disabled{opacity:.6}
html[data-theme=light] .host-remove:hover{background:oklch(0.885 0.028 85)}
html[data-theme=light] .host-add{color:var(--cobalt)}
@media(max-width:620px){.host-row select{flex:1 1 calc(100% - 52px)}}
/* Back to top: a quiet pill that appears once the reader is well down the page. */
.to-top{position:fixed;right:24px;bottom:24px;z-index:6;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--extension-rule);border-radius:999px;background:color-mix(in oklch,var(--extension-surface) 70%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--extension-muted);font:500 13px/1 "DM Sans",sans-serif;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 400ms,transform 400ms,visibility 0s linear 400ms,color 160ms}
.to-top.is-on{opacity:1;visibility:visible;transform:none;transition:opacity 400ms,transform 400ms,visibility 0s,color 160ms}
.to-top::before{content:"";position:absolute;inset:-4px}
.to-top:hover{color:var(--extension-text)}
.to-top svg{transition:transform 400ms}
.to-top:hover svg{transform:translateY(-2px)}
@media(max-width:620px){.to-top{right:16px;bottom:16px}}
/* A thin accent bar along the bottom of the nav shows progress down the page, at every width. */
.scroll-progress{display:block;position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--extension-accent);transform:scaleX(var(--progress,0));transform-origin:0 50%;pointer-events:none;z-index:1}