/* BUMBLEBEE by Samarth, 15 — my lock-tab. dark only, I like it dark so I skipped light mode. tuned on my laptop */
* { margin:0; padding:0; box-sizing:border-box; }

html{ min-height:100%; scroll-behavior:smooth; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Helvetica,Arial,sans-serif;
  background:#0A0A0A; color:#fff;
  min-height:100vh; overflow-x:hidden; overflow-y:auto;
  -webkit-font-smoothing:antialiased;
}

/* backdrop — video sits behind everything */
.bb-backdrop-stage{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:radial-gradient(1200px 600px at 70% 30%, #1a1a0a 0%, #0A0A0A 60%); }
#bb-ambient-film{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:bb-slow-zoom 32s ease-in-out infinite alternate; }
@keyframes bb-slow-zoom{ from{transform:scale(1)} to{transform:scale(1.06)} }
.bb-backdrop-fallbackwash{ position:absolute; inset:0; background:radial-gradient(900px 500px at 20% 15%, rgba(245,197,24,.18), transparent 60%), radial-gradient(700px 400px at 85% 85%, rgba(245,197,24,.1), transparent 65%), linear-gradient(180deg,#141410,#0A0A0A); z-index:-1; }
.bb-film-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.18) 45%, rgba(0,0,0,.08)), linear-gradient(to bottom, rgba(0,0,0,.22), transparent 30%); pointer-events:none; }
.bb-honey-topline{ position:fixed; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, #F5C518, transparent); opacity:.9; z-index:10; }

/* corner weather — tiny, I wanted it barely there so inline spans not flex */
.bb-corner-weather{ position:fixed; left:14px; top:10px; z-index:10; white-space:nowrap; pointer-events:none; font-size:11px; font-weight:500; letter-spacing:.02em; color:rgba(255,255,255,.88); text-shadow:0 1px 10px rgba(0,0,0,.28); }
.bb-corner-weather-glyph, .bb-corner-weather-deg, .bb-corner-weather-words, .bb-corner-weather-city{ display:inline; margin-right:6px; }
.bb-corner-weather-city{ margin-right:0; color:rgba(255,255,255,.52); font-size:10px; letter-spacing:.03em; }
.bb-corner-weather-glyph{ font-size:11px; opacity:.92; }
.bb-corner-weather-deg{ font-weight:700; letter-spacing:-.02em; }
.bb-corner-weather-words{ color:rgba(255,255,255,.72); text-transform:lowercase; }
.bb-corner-weather-city::before{ content:"•"; margin-right:6px; opacity:.7; }
.bb-corner-weather-city:empty::before{ display:none; }

/* hero — only place I used column flex, everything else is grid/block so it doesn't all look the same */
.bb-hero-column{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px 140px; gap:28px; text-align:center; }
.bb-lock-clockbox{ display:block; text-align:center; }
.bb-lock-time{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Rounded",Helvetica,Arial,sans-serif;
  font-size:clamp(64px,11vw,108px); font-weight:600; letter-spacing:-.04em; line-height:.88;
  color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.48));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.22)) drop-shadow(0 8px 20px rgba(0,0,0,.22)) blur(.18px);
  font-variant-numeric:tabular-nums;
}
.bb-lock-dateline{ margin-top:6px; font-size:15px; color:transparent; background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.52)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 8px rgba(0,0,0,.18)) blur(.12px); }
.bb-lock-hello{ margin-top:8px; font-size:13px; color:rgba(255,255,255,.72); text-shadow:0 1px 10px rgba(0,0,0,.22); opacity:.9; }

/* search — flex here because input + button need it */
.bb-find-lozenge{ position:relative; display:flex; align-items:center; gap:10px; width:min(560px,92vw); padding:10px 10px 10px 18px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); border-radius:999px; box-shadow:0 8px 32px rgba(0,0,0,.32); transition:transform .22s, border-color .22s; }
.bb-find-lozenge:focus-within{ transform:translateY(-1px) scale(1.01); border-color:rgba(245,197,24,.55); box-shadow:0 12px 36px rgba(0,0,0,.38), 0 0 0 4px rgba(245,197,24,.14); }
.bb-find-lozenge.bb-find-open{ border-radius:22px; }
.bb-find-mag{ color:rgba(255,255,255,.48); flex-shrink:0; }
.bb-find-lozenge input{ flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:15px; }
.bb-find-lozenge input::placeholder{ color:rgba(255,255,255,.48); }
.bb-find-go{ width:36px; height:36px; border-radius:999px; border:none; background:#F5C518; color:#0A0A0A; cursor:pointer; display:grid; place-items:center; box-shadow:0 2px 10px rgba(245,197,24,.45); }
.bb-find-go:hover{ transform:scale(1.06); }

/* droplist */
.bb-find-droplist{ position:absolute; top:calc(100% + 10px); left:0; right:0; background:rgba(28,28,30,.9); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(24px) saturate(180%); border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,.38); padding:6px; z-index:20; overflow:hidden; }
.bb-find-droplist.bb-is-hidden{ display:none; }
.bb-find-row{ display:grid; grid-template-columns:14px 1fr auto; align-items:center; column-gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; font-size:13.5px; color:rgba(255,255,255,.92); }
.bb-find-row:hover, .bb-find-row.bb-is-lit{ background:rgba(245,197,24,.18); }

/* visited — I used grid here on purpose, 5 across, no wrap */
.bb-visit-tray{ display:grid; grid-template-columns:repeat(5,56px); justify-content:center; column-gap:14px; max-width:360px; overflow:hidden; }
.bb-visit-tile{ display:block; text-align:center; text-decoration:none; color:inherit; transition:transform .22s; }
.bb-visit-tile:hover{ transform:translateY(-3px); }
.bb-visit-tile-art{ width:56px; height:56px; display:grid; place-items:center; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; box-shadow:0 4px 16px rgba(0,0,0,.14); overflow:hidden; margin:0 auto; }
.bb-visit-tile:hover .bb-visit-tile-art{ box-shadow:0 10px 28px rgba(0,0,0,.22), 0 0 0 2px rgba(245,197,24,.22); border-color:rgba(245,197,24,.35); }
.bb-visit-tile-art img{ width:24px; height:24px; border-radius:4px; object-fit:contain; }
.bb-visit-tile-name{ display:block; margin-top:8px; font-size:11px; color:rgba(255,255,255,.72); }
.bb-tiny-hint{ font-size:11px; color:rgba(255,255,255,.48); text-align:center; margin-top:-4px; }

/* tv + note topbars — grid 3 cols so title sits middle-ish, different from search flex */
.bb-tv-topbar,.bb-note-topbar{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:10px; padding:10px 14px 9px; border-bottom:1px solid rgba(255,255,255,.1); cursor:grab; user-select:none; }
.bb-tv-lights,.bb-note-lights{ display:block; white-space:nowrap; }
.bb-pip{ display:inline-grid; place-items:center; width:12px; height:12px; margin-right:6px; border-radius:999px; border:1px solid rgba(0,0,0,.12); cursor:pointer; box-shadow:inset 0 .5px 0 rgba(255,255,255,.5); vertical-align:middle; }
.bb-pip:last-child{ margin-right:0; }
.bb-pip span{ font-size:9px; font-weight:700; opacity:0; color:rgba(0,0,0,.62); line-height:1; }
.bb-tv-lights:hover .bb-pip span, .bb-note-lights:hover .bb-pip span{ opacity:1; }
.bb-pip:hover{ filter:brightness(.92); }
.bb-pip-shut{ background:#FF5F56; border-color:#E0443E; } .bb-pip-snooze{ background:#FFBD2E; border-color:#DEA123; } .bb-pip-big{ background:#27CA3F; border-color:#1FAB34; }

/* old shell kept for fallback */
.bb-tv-shell{ position:fixed; right:28px; bottom:72px; width:320px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(24px) saturate(180%); border-radius:18px; box-shadow:0 16px 48px rgba(0,0,0,.42); overflow:hidden; z-index:5; touch-action:none; }
.bb-tv-shell.bb-is-held{ opacity:.96; }
.bb-tv-shell.bb-is-folded{ width:280px; } .bb-tv-shell.bb-is-big{ width:480px; } .bb-tv-shell.bb-is-gone-tv{ display:none!important; }
.bb-tv-name{ font-size:10px; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.72); white-space:nowrap; }
.bb-audio-chip{ justify-self:end; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:999px; background:rgba(0,0,0,.45); color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.14); }
.bb-audio-chip.bb-is-live{ background:#F5C518; color:#0A0A0A; box-shadow:0 2px 10px rgba(245,197,24,.45); }
.bb-old-screenbox{ position:relative; aspect-ratio:16/9.6; background:#0A0A0A; overflow:hidden; }
#bb-tv-film{ width:100%; height:100%; object-fit:cover; display:block; }

/* my tv — no glass on the shell itself, just the header */
.bb-retro-tv{ width:360px; background:transparent; border:none; overflow:visible; }
.bb-retro-tv .bb-tv-topbar{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(18px) saturate(160%); border-radius:14px; margin-bottom:8px; box-shadow:0 8px 32px rgba(0,0,0,.32); }
.bb-retro-cabinet{ position:relative; width:100%; aspect-ratio:1537/1023; display:block; filter:drop-shadow(0 14px 28px rgba(0,0,0,.38)); }
.bb-retro-tube{ position:absolute; left:19.91%; top:22.1%; width:49.58%; height:45.45%; overflow:hidden; border-radius:22px/16px; background:#000; box-shadow:inset 0 0 18px rgba(0,0,0,.85); z-index:2; }
.bb-retro-tube #bb-tv-film{ object-position:center; filter:contrast(1.04) saturate(1.08); }
.bb-retro-chassis-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; z-index:1; }
/* remote strip sits where caption was */
.bb-tv-remote-strip{ display:block; margin-top:8px; padding:10px 14px 12px; background:rgba(28,28,30,.92); border:1px solid rgba(255,255,255,.1); border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.32); transform:translate(-1%,102%); }
.bb-tv-remote-strip .bb-timecode{ color:#fff; }
.bb-retro-tv.bb-is-folded .bb-retro-cabinet{ display:none; } .bb-retro-tv.bb-is-big{ width:560px; }

/* deck controls — table-ish row, not flex, so it doesn't match everything else */
.bb-deck-controls{ position:absolute; inset:auto 10px 10px 10px; padding:8px; background:rgba(10,10,10,.55); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(16px) saturate(160%); border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.32); }
.bb-roundkey{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.14); color:#fff; cursor:pointer; vertical-align:middle; margin-right:8px; }
.bb-key-play{ background:#F5C518; color:#0A0A0A; border-color:rgba(0,0,0,.08); box-shadow:0 2px 10px rgba(245,197,24,.45); }
.bb-scrub-group{ display:inline-block; vertical-align:middle; width:calc(100% - 100px); }
.bb-scrub-rail{ display:block; height:4px; background:rgba(255,255,255,.22); border-radius:999px; position:relative; cursor:pointer; overflow:hidden; }
.bb-scrub-juice{ position:absolute; left:0; top:0; bottom:0; width:0%; background:#F5C518; border-radius:999px; box-shadow:0 0 8px rgba(245,197,24,.55); }
.bb-scrub-knob{ position:absolute; top:50%; left:0%; width:10px; height:10px; background:#fff; border-radius:999px; transform:translate(-50%,-50%); opacity:0; }
.bb-scrub-rail:hover .bb-scrub-knob{ opacity:1; }
.bb-timecode{ display:inline-block; vertical-align:middle; margin-left:8px; font-size:10px; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.85); white-space:nowrap; }

/* paper note — slight tilt is mine */
.bb-paper-note{ position:fixed; left:28px; bottom:72px; width:300px; min-height:220px; background:#FFE55C; border:1px solid rgba(0,0,0,.08); border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,.28); overflow:hidden; z-index:6; transform:rotate(-.4deg); touch-action:none; }
.bb-paper-note:hover{ transform:rotate(0) translateY(-1px); }
.bb-paper-note.bb-is-held{ transform:rotate(0); opacity:.96; }
.bb-paper-note.bb-is-folded{ height:52px; min-height:52px; overflow:hidden; } .bb-paper-note.bb-is-folded .bb-note-pad-area, .bb-paper-note.bb-is-folded .bb-note-foot{ display:none; }
.bb-paper-note.bb-is-big{ width:380px; min-height:360px; } .bb-paper-note.bb-is-gone-note{ display:none!important; }
.bb-note-topbar{ background:rgba(0,0,0,.04); border-bottom:1px solid rgba(0,0,0,.08); }
.bb-note-nameplate{ font-size:10px; font-weight:800; letter-spacing:.14em; color:rgba(0,0,0,.62); }
.bb-note-actions{ justify-self:end; }
.bb-note-clear-key{ font-size:10px; font-weight:600; padding:4px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.1); background:rgba(255,255,255,.7); color:rgba(0,0,0,.66); cursor:pointer; }
.bb-note-pad-area{ display:block; min-height:140px; }
#bb-note-scribble{ display:block; width:100%; height:140px; background:transparent; border:none; outline:none; resize:none; padding:14px 16px; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; font-size:13.5px; line-height:1.55; color:rgba(0,0,0,.82); }
/* swatches — inline row */
.bb-note-foot{ display:block; padding:10px 12px; border-top:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.35); }
.bb-paint-swatches{ display:inline-block; vertical-align:middle; }
.bb-paint-dot{ display:inline-block; width:18px; height:18px; margin-right:6px; border-radius:999px; border:2px solid transparent; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.18); vertical-align:middle; }
.bb-paint-dot.bb-is-lit{ border-color:rgba(0,0,0,.55); box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.22); }

/* bringbacks */
.bb-bringback-pill{ position:fixed; right:28px; bottom:72px; padding:10px 16px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(20px) saturate(180%); border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.28); font-size:12px; font-weight:600; color:#fff; cursor:pointer; z-index:5; }
.bb-bringback-pill.bb-is-hidden{ display:none!important; } .bb-bringback-dot{ display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:999px; vertical-align:middle; }

/* toast */
.bb-missing-reel-toast{ position:fixed; left:50%; bottom:76px; transform:translateX(-50%); padding:10px 16px; background:rgba(10,10,10,.78); border:1px solid rgba(245,197,24,.32); backdrop-filter:blur(16px); border-radius:999px; font-size:12px; color:rgba(255,255,255,.88); z-index:20; white-space:nowrap; }
.bb-missing-reel-toast.bb-is-hidden{ display:none; } .bb-toast-pulse-dot{ display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:999px; background:#F5C518; box-shadow:0 0 10px rgba(245,197,24,.55); animation:bb-toast-pulse 1.6s infinite; vertical-align:middle; }
@keyframes bb-toast-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.6; transform:scale(.92); } }

/* discover — horizontal reel must stay flex for swipe, cards are block inside */
.bb-discover-deck{ position:relative; z-index:1; margin:60px auto 80px; width:min(1120px,94vw); background:rgba(28,28,30,.78); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(12px) saturate(150%); border-radius:28px; box-shadow:0 8px 32px rgba(0,0,0,.32); padding:22px 20px 18px; }
.bb-discover-masthead{ display:block; margin-bottom:16px; }
.bb-discover-heading{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.bb-discover-sub{ margin-top:4px; font-size:12px; color:rgba(255,255,255,.48); }
.bb-discover-controls{ margin-top:12px; display:block; }
.bb-discover-topics{ display:inline-block; vertical-align:middle; }
.bb-topic-chip{ display:inline-block; margin:0 8px 8px 0; font-size:12px; font-weight:600; padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08); color:rgba(255,255,255,.72); cursor:pointer; }
.bb-topic-chip.bb-is-lit, .bb-topic-chip:hover{ background:#F5C518; color:#0A0A0A; border-color:rgba(0,0,0,.08); }
.bb-discover-retry{ display:inline-grid; place-items:center; width:34px; height:34px; margin-left:6px; border-radius:999px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.12); cursor:pointer; vertical-align:middle; }
.bb-discover-reel{ display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 4px 14px; scrollbar-width:none; }
.bb-discover-reel::-webkit-scrollbar{ display:none; }
.bb-story-card{ flex:0 0 320px; scroll-snap-align:start; display:block; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:20px; overflow:hidden; text-decoration:none; color:inherit; }
.bb-story-card:hover{ transform:translateY(-2px); border-color:rgba(245,197,24,.32); }
.bb-story-art-frame{ position:relative; width:100%; height:168px; overflow:hidden; background:#1C1C1E; }
.bb-story-art{ width:100%; height:100%; object-fit:cover; display:block; }
.bb-story-kicker{ position:absolute; top:10px; right:10px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:rgba(0,0,0,.58); color:#fff; border:1px solid rgba(255,255,255,.18); }
.bb-story-copy{ display:block; padding:12px 14px 14px; }
.bb-story-headline{ font-size:14px; font-weight:700; line-height:1.32; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bb-story-blurb{ margin-top:6px; font-size:12px; line-height:1.4; color:rgba(255,255,255,.72); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bb-story-byline{ margin-top:6px; font-size:11px; color:rgba(255,255,255,.48); }
.bb-story-outlet{ font-weight:600; color:#F5C518; }
.bb-reel-bubbles{ display:block; text-align:center; margin-top:12px; }
.bb-reel-bubble{ display:inline-block; width:6px; height:6px; margin:0 3px; border-radius:999px; background:rgba(255,255,255,.28); vertical-align:middle; }
.bb-reel-bubble.bb-is-lit{ background:#F5C518; width:18px; }
.bb-discover-status{ text-align:center; padding:18px 10px 6px; font-size:12px; color:rgba(255,255,255,.48); } .bb-discover-status.bb-is-hidden{ display:none; }

/* my two sizes — 847 for my old tablet, 629 for my phone. plus reduced motion for access */
@media (max-width:847px){
  .bb-paper-note{ left:14px; bottom:72px; width:280px; }
  .bb-tv-shell{ right:14px; bottom:72px; width:300px; }
  .bb-hero-column{ padding-bottom:320px; }
  .bb-retro-tv.bb-is-big{ width:480px; }
}
@media (max-width:629px){
  .bb-paper-note{ display:none; }
  .bb-paper-note.bb-is-big{ display:block; width:92vw; left:4vw; }
  .bb-tv-shell{ left:14px; right:14px; width:auto; }
  .bb-retro-tv.bb-is-big{ width:92vw; }
  .bb-lock-time{ font-size:54px; }
  .bb-visit-tray{ grid-template-columns:repeat(5,50px); column-gap:10px; }
  .bb-visit-tile-art{ width:50px; height:50px; border-radius:14px; }
  .bb-discover-deck{ margin:32px auto 40px; padding:16px 12px 12px; border-radius:20px; }
}
*:focus-visible{ outline:2px solid #F5C518; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ #bb-ambient-film{ animation:none; } }