:root { --ivory:#f5eee5; --paper:#fffaf4; --ink:#24201d; --muted:#746d65; --line:#ddd1c4; --terra:#b6573c; --terra-dark:#8f3d2b; --blush:#e8cabb; --sage:#6e7766; --red:#a23832; --shadow:0 16px 40px rgba(58,36,24,.09); font-family:Arial,sans-serif; color:var(--ink); background:var(--ivory); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:linear-gradient(115deg,#f7f0e8 0%,#f5eee5 50%,#eee1d4 100%); }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #2d766d; outline-offset:3px; }
.skip-link { position:fixed; z-index:20; top:-5rem; left:1rem; padding:.8rem; background:var(--ink); color:white; }.skip-link:focus { top:1rem; }
.topbar { min-height:76px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:1.2rem; padding:0 clamp(1rem,5vw,5rem); background:rgba(255,250,244,.76); backdrop-filter:blur(14px); }
.brand { text-decoration:none; display:flex; align-items:center; gap:.65rem; min-width:max-content; }.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:var(--terra); color:#fff8f0; font:600 21px/1 'Playfair Display',serif; }.brand-name { font:600 14px/1 Manrope,sans-serif; letter-spacing:.01em; }.topbar-context { min-width:0; display:flex; align-items:baseline; gap:.65rem; }.eyebrow { margin:0; color:var(--terra); font:500 11px/1.25 'DM Mono',monospace; letter-spacing:.11em; text-transform:uppercase; }.event-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 13px/1.2 Manrope,sans-serif; }.topnav { margin-left:auto; display:flex; gap:.5rem; }.bot-pill,.status { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:.38rem .65rem; font:500 11px/1 Manrope,sans-serif; text-decoration:none; background:#fff9f3; }.bot-pill.is-muted { color:var(--muted); background:transparent; }
.page { width:min(1160px,100% - 2rem); margin:0 auto; padding:clamp(2rem,6vw,5.5rem) 0 5rem; }.landing-grid { min-height:calc(100vh - 76px - 7rem); display:grid; grid-template-columns:1.5fr .78fr; align-items:center; gap:clamp(2rem,7vw,9rem); }.hero h1,.gallery-title,.dashboard-title,.host-intro h1,.empty-state h1 { font:600 clamp(2.8rem,6.3vw,6rem)/.96 'Playfair Display',Georgia,serif; letter-spacing:-.05em; margin:.8rem 0 1.4rem; }.hero h1 i { color:var(--terra); font-weight:500; }.lead { color:#514b45; max-width:36rem; font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.65; }.hero-frame { position:relative; margin-top:2.7rem; overflow:hidden; width:min(100%,550px); height:165px; background:linear-gradient(110deg,#bd674b,#9a402e 55%,#5d473c); box-shadow:var(--shadow); color:#fff8ed; padding:1.15rem; }.hero-frame:after { content:""; position:absolute; width:310px; height:310px; border-radius:50%; right:-4rem; top:-8rem; border:1px solid rgba(255,255,255,.35); box-shadow:0 0 0 34px rgba(255,255,255,.08),0 0 0 68px rgba(255,255,255,.06); }.frame-label { position:relative; z-index:1; font:500 10px 'DM Mono',monospace; letter-spacing:.13em; text-transform:uppercase; }.frame-word { position:absolute; z-index:1; right:1.2rem; bottom:.5rem; font:italic 500 52px 'Playfair Display',serif; }
.landing-side { display:grid; gap:1.2rem; }.login-card,.panel,.upload-box,.empty-state { background:rgba(255,250,244,.84); border:1px solid var(--line); box-shadow:var(--shadow); }.login-card { padding:clamp(1.3rem,3vw,2.2rem); }.login-card h2,.panel h2,.upload-box h2 { font:600 1.7rem/1.1 'Playfair Display',serif; margin:.55rem 0 1.6rem; }.login-card label,.settings label { display:grid; gap:.45rem; font-size:.8rem; font-weight:600; }.login-card input,.settings input,.settings select { width:100%; border:1px solid #cfc0b1; border-radius:0; background:#fffdf9; min-height:45px; padding:.65rem .75rem; color:var(--ink); }.login-card .button { width:100%; margin-top:1.1rem; }.form-note,.muted { color:var(--muted); font-size:.78rem; line-height:1.5; }.text-link { display:inline-block; color:var(--terra-dark); font-size:.84rem; font-weight:700; text-decoration-thickness:1px; text-underline-offset:4px; }.button,.file-button { display:inline-flex; justify-content:center; align-items:center; cursor:pointer; min-height:43px; border:1px solid var(--terra); border-radius:0; background:var(--terra); color:#fffaf4; padding:.65rem 1rem; font-weight:700; font-size:.78rem; text-decoration:none; transition:.17s ease; }.button:hover,.file-button:hover { background:var(--terra-dark); border-color:var(--terra-dark); }.button.secondary { background:transparent; color:var(--terra-dark); }.button.secondary:hover { color:white; }.button.tiny { min-height:32px; padding:.35rem .55rem; font-size:.67rem; }.button:disabled { opacity:.55; cursor:wait; }
.host-intro { display:flex; align-items:end; gap:1rem; border-bottom:1px solid var(--line); padding-bottom:1.5rem; }.host-intro > div { color:var(--terra); font:500 10px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }.host-intro h1 { margin:.45rem 0 0; font-size:clamp(2.5rem,5vw,4.5rem); }.host-intro .button { margin-left:auto; }.event-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2rem; }.event-card { position:relative; text-decoration:none; padding:1.35rem; min-height:165px; background:#e7c9b9; border:1px solid #d6af9c; transition:transform .18s ease; }.event-card:nth-child(3n+2) { background:#ddd5c9; border-color:#c7bcad; }.event-card:hover { transform:translateY(-3px); }.event-number { color:#715647; font:500 10px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }.event-card h2 { max-width:85%; margin:1.2rem 0 0; font:600 1.65rem/1.1 'Playfair Display',serif; }.arrow { position:absolute; right:1.3rem; bottom:1rem; font-size:1.45rem; }
.event-dashboard { margin-top:3rem; }.dashboard-head,.panel-head { display:flex; align-items:center; justify-content:space-between; color:var(--terra); font:500 10px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }.dashboard-title { font-size:clamp(2.5rem,5.5vw,5rem); margin:.65rem 0 1.7rem; }.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.stat { padding:1.15rem 1rem; border-right:1px solid var(--line); }.stat:last-child { border:0; }.stat strong { display:block; font:500 2rem/1 'Playfair Display',serif; }.stat span { color:var(--muted); font-size:.72rem; }.action-row { display:flex; flex-wrap:wrap; gap:.65rem; margin:1.35rem 0; }.panel { margin-top:1.15rem; padding:1.3rem; }.panel h2 { margin:0 0 .65rem; }.share-row { display:grid; grid-template-columns:95px 1fr auto; align-items:center; gap:.7rem; padding:.75rem 0; border-top:1px solid #e9ded4; font-size:.78rem; }.share-row code { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--terra-dark); }.settings { display:grid; gap:1rem; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.check { display:flex!important; align-items:flex-start; gap:.55rem!important; color:#4f4842; font-size:.8rem!important; font-weight:500!important; line-height:1.4; }.check input { margin:.1rem 0 0; min-height:unset!important; width:auto!important; accent-color:var(--terra); }.file-button { width:max-content; }.job-row,.clip-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; border-top:1px solid #e9ded4; padding:.85rem 0; font-size:.77rem; }.job-row > div { flex:1; }.status { border:0; background:#eee5da; color:#64594e; }.status-ready { background:#dbe2d4; color:#46533e; }.status-failed { background:#f4d9d4; color:#872f2b; }.status-processing { background:#f1e2bf; color:#70551c; }.clip-row { display:grid; grid-template-columns:60px 1fr auto; }.clip-thumb { width:60px; height:44px; object-fit:cover; background:#d9c9bd; }.clip-info { display:grid; gap:.4rem; }.clip-controls { display:flex; align-items:center; flex-wrap:wrap; justify-content:end; gap:.7rem; }.clip-controls select { border:1px solid var(--line); background:#fffaf4; padding:.35rem; font-size:.7rem; }.compact { font-size:.7rem!important; white-space:nowrap; }.empty-inline { color:var(--muted); font-size:.83rem; }.notice { width:100%; margin:0; font-size:.75rem; }.notice.error { color:var(--red); }.toast { position:fixed; z-index:30; left:50%; bottom:1.2rem; transform:translate(-50%,130%); max-width:calc(100% - 2rem); padding:.8rem 1rem; color:#fff; background:var(--red); box-shadow:var(--shadow); transition:transform .2s ease; font-size:.82rem; }.toast.is-visible { transform:translate(-50%,0); }.toast.success { background:#53624c; }
.gallery { max-width:950px; }.gallery-title { font-size:clamp(2.7rem,6.5vw,5.4rem); max-width:790px; }.upload-box { display:grid; gap:1rem; margin:2rem 0 2.5rem; padding:1.35rem; }.upload-box h2 { margin:0; }.upload-box p { margin:0; color:#5e5650; max-width:44rem; font-size:.84rem; line-height:1.6; }.consent { max-width:46rem; }.upload-progress { min-height:1.2rem; color:var(--sage); font-size:.78rem; }.clip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.gallery-clip { position:relative; overflow:hidden; aspect-ratio:1/1.1; border:0; padding:0; background:#d6c0ae; cursor:pointer; text-align:left; }.gallery-clip img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }.gallery-clip:hover img { transform:scale(1.04); }.clip-label { position:absolute; left:.65rem; right:.65rem; bottom:.65rem; color:#fff; font:600 .65rem/1.2 Manrope,sans-serif; text-shadow:0 1px 5px #27160d; }.empty-state { margin-top:2rem; padding:clamp(1.5rem,5vw,4rem); }.empty-state h1 { font-size:clamp(2rem,4vw,3.6rem); }.empty-state p { color:var(--muted); max-width:29rem; line-height:1.5; }.video-modal { width:min(900px,calc(100% - 2rem)); max-height:90vh; border:0; padding:0; background:#181514; box-shadow:0 30px 80px rgba(0,0,0,.45); }.video-modal::backdrop { background:rgba(31,23,19,.75); }.video-modal video { display:block; width:100%; max-height:86vh; }.modal-close { position:absolute; z-index:1; top:.65rem; right:.65rem; width:36px; height:36px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:26px; cursor:pointer; }
.screen-page { overflow:hidden; background:#100d0b; }.screen { position:fixed; inset:0; background:#100d0b; color:white; }.screen-video { width:100%; height:100%; object-fit:contain; background:#100d0b; }.screen-overlay { pointer-events:none; position:absolute; inset:0; display:flex; justify-content:space-between; align-items:flex-start; padding:clamp(1rem,3vw,3rem); background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 22%,transparent 80%,rgba(0,0,0,.34)); }.screen-event { margin:0; font:600 clamp(1.15rem,2.2vw,2.4rem)/1 'Playfair Display',serif; }.screen-count { margin:.4rem 0; color:rgba(255,255,255,.72); font:500 .7rem 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }.screen-controls { pointer-events:auto; display:flex; gap:.5rem; }.screen-controls button { border:1px solid rgba(255,255,255,.5); background:rgba(16,13,11,.45); color:#fff; padding:.5rem .65rem; cursor:pointer; font:600 .67rem Manrope,sans-serif; }.screen-qr { position:absolute; right:clamp(1rem,3vw,3rem); bottom:clamp(1rem,3vw,3rem); padding:.7rem .85rem; background:#fff; color:#201a17; font:700 .68rem Manrope,sans-serif; text-decoration:none; }
@media (max-width:700px) { .topbar { min-height:64px; padding:0 1rem; }.topbar-context { display:none; }.topnav { margin-left:auto; }.page { width:min(100% - 1.25rem,1160px); padding-top:2.2rem; }.landing-grid { min-height:0; grid-template-columns:1fr; gap:2.5rem; }.hero h1 { font-size:clamp(3rem,15vw,4.5rem); }.hero-frame { height:130px; margin-top:1.7rem; }.frame-word { font-size:42px; }.event-list { grid-template-columns:1fr; }.event-card { min-height:135px; }.host-intro { align-items:flex-start; flex-wrap:wrap; }.host-intro .button { margin-left:0; }.stat strong { font-size:1.5rem; }.share-row { grid-template-columns:72px 1fr; }.share-row .button { grid-column:2; justify-self:start; }.field-grid,.clip-grid { grid-template-columns:1fr; }.clip-grid { gap:.8rem; }.gallery-clip { aspect-ratio:16/10; }.clip-row { grid-template-columns:50px 1fr; }.clip-thumb { width:50px; }.clip-controls { grid-column:1/-1; justify-content:start; }.screen-overlay { align-items:flex-end; }.screen-controls { flex-wrap:wrap; justify-content:flex-end; }.screen-event { max-width:65vw; }.screen-qr { bottom:auto; top:clamp(5rem,12vw,7rem); } }
@media (max-width:390px) { .brand-name { display:none; }.topnav .bot-pill { max-width:145px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.hero h1 { font-size:2.85rem; }.action-row .button { width:100%; }.stat-grid { margin-left:-.15rem; margin-right:-.15rem; }.stat { padding:.85rem .5rem; }.screen-controls button { padding:.43rem; font-size:.61rem; } }
.trim-controls { display:flex; align-items:center; gap:.35rem; width:100%; color:var(--muted); font-size:.68rem; }.trim-controls input { width:4.5rem; border:1px solid var(--line); padding:.35rem; background:#fffdf9; }
.screen-qr { display:grid; gap:.35rem; justify-items:center; padding:.55rem; font-family:Arial,sans-serif; }.screen-qr img { display:block; width:88px; height:88px; }.screen-error { display:grid; place-items:center; gap:1rem; min-height:100%; padding:2rem; text-align:center; color:#fff; }
.screen::before { content:""; position:absolute; inset:-28px; z-index:0; background:var(--screen-poster) center/cover; filter:blur(24px); opacity:.55; }.screen-video { position:relative; z-index:1; }.screen-overlay { z-index:2; }.screen-qr { z-index:3; }