/* The top page's first screen: a vertical feed of our own mosaic videos (feed.js), one window tall, phone first.
   The site's other screens and the about text below are styled by app.css. Every class here starts with f-, so it
   cannot meet app.css; nothing here is fixed to the window, so scrolling past the feed reaches the text below. */
.f-wrap { --f-bar: 64px; --f-accent: #ff3d7f; --f-accent-2: #e3175f;
  position: relative; height: 100vh; height: 100svh; overflow: hidden; padding: 0; background: #000; color: #fff; }
.f-wrap button, .f-wrap a { font: inherit; color: inherit; }
.f-wrap svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* the feed: one full-height slide per video, snapping like a short-video app */
.f-feed { position: absolute; inset: 0 0 calc(var(--f-bar) + env(safe-area-inset-bottom)) 0; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; }
.f-feed::-webkit-scrollbar { display: none; }
.f-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #000; }
/* the whole video, never cropped; the space beside it is the same video, blurred (drawn small into a canvas) */
.f-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.f-slide canvas { position: absolute; inset: -6%; width: 112%; height: 112%; filter: blur(22px) brightness(.85); }
.f-slide::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(0,0,0,.28) 45%, rgba(0,0,0,.66)); pointer-events: none; }
.f-cap { position: absolute; z-index: 2; left: 16px; right: 76px; bottom: 18px; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 12px rgba(0,0,0,.35); }
.f-cap strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; word-break: auto-phrase; }
.f-cap span { display: block; margin-top: 4px; font-size: 14px; opacity: .9; }
.f-time { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.18); }
.f-time i { display: block; height: 100%; width: 0; background: var(--f-accent); }

/* the title and the occasion tabs, over the top of the feed */
.f-top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; padding: max(14px, env(safe-area-inset-top)) 16px 32px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.2) 65%, transparent); pointer-events: none; }
.f-top h1 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; text-wrap: balance; word-break: auto-phrase; }
.f-top h1 .phrase, .f-h1 .phrase { display: inline-block; }
.f-top p { margin: 1px 0 0; font-size: 11px; opacity: .85; }
.f-tabs { pointer-events: auto; display: flex; gap: 18px; margin: 10px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  --f-fl: 0px; --f-fr: 0px; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--f-fl), #000 calc(100% - var(--f-fr)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--f-fl), #000 calc(100% - var(--f-fr)), transparent); }
.f-tabs.f-more-l { --f-fl: 36px; } .f-tabs.f-more-r { --f-fr: 36px; }
.f-tabs::-webkit-scrollbar { display: none; }
.f-tabs a { flex: none; padding: 4px 0 7px; font-size: 16px; font-weight: 700; color: rgba(255,255,255,.72); text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,.5); position: relative; white-space: nowrap; }
.f-tabs a:hover { color: #fff; }
.f-tabs a[aria-current] { color: #fff; }
.f-tabs a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: var(--f-accent); }
body.f-zooming .f-top { visibility: hidden; }

/* the rail of actions on the right, low down */
.f-rail { position: absolute; z-index: 5; right: 10px; bottom: calc(var(--f-bar) + env(safe-area-inset-bottom) + 18px); display: flex; flex-direction: column; gap: 16px; align-items: center; }
[dir="rtl"] .f-rail { right: auto; left: 10px; }
.f-rail button { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; line-height: 1.15; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 8px rgba(0,0,0,.45); cursor: pointer; width: 64px; text-align: center; }
.f-rail i { width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s; }
.f-rail button:active i { transform: scale(.92); }
.f-rail svg { width: 23px; height: 23px; stroke: #fff; stroke-width: 2; }
.f-rail .f-buy i { background: linear-gradient(135deg, var(--f-accent), var(--f-accent-2)); box-shadow: 0 4px 14px rgba(227,23,95,.45); }
body.f-zooming .f-rail { display: none; }
[dir="rtl"] .f-cap { right: 16px; left: 76px; }

/* zoom mode: a mosaic at full size in the deep-zoom viewer, its name and a close button on top, the others to pick below */
.f-zoom { position: absolute; inset: 0 0 calc(var(--f-bar) + env(safe-area-inset-bottom)) 0; z-index: 3; background: #0f0f0f; opacity: 0; pointer-events: none; transition: opacity .25s; }
body.f-zooming .f-zoom { opacity: 1; pointer-events: auto; }
#f-osd { position: absolute; inset: 56px 0 112px; }
.f-zbar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 56px; padding: max(0px, env(safe-area-inset-top)) 8px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.f-zbar strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f-zbar button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.f-zbar button:hover { background: rgba(255,255,255,.18); }
.f-zbar svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.4; }
.f-zfoot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 112px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 12px; pointer-events: none; }
.f-hint { position: absolute; left: 50%; top: -44px; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; color: #111; background: rgba(255,255,255,.94); padding: 8px 14px; border-radius: 99px; box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: opacity .3s; pointer-events: none; }
.f-zoom.used .f-hint { opacity: 0; }
.f-gallery { pointer-events: auto; display: flex; gap: 6px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.f-gallery::-webkit-scrollbar { display: none; }
.f-gallery button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 68px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 11px; font-weight: 700; color: #9a9a9a; }
.f-gallery img { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; opacity: .7; box-shadow: 0 0 0 2px transparent; transition: opacity .15s, box-shadow .15s; }
.f-gallery button:hover img { opacity: 1; }
.f-gallery [aria-current] { color: #fff; }
.f-gallery [aria-current] img { opacity: 1; box-shadow: 0 0 0 2px #0f0f0f, 0 0 0 4px var(--f-accent); }
.f-gallery span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* the bottom bar: white, the icon's pink for Create */
.f-bar { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: calc(var(--f-bar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid #ececec; display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; }
.f-bar button { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: #8a8a8a; cursor: pointer; min-width: 0; }
.f-bar svg { width: 24px; height: 24px; stroke-width: 2; }
.f-bar button > span { max-width: 100%; padding: 0 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f-bar .on { color: #111; }
.f-bar .f-create { color: #fff; padding: 0 4px; }
.f-bar .f-create b { display: flex; align-items: center; justify-content: center; gap: 4px; height: 38px; padding: 0 14px; border-radius: 99px; background: linear-gradient(135deg, var(--f-accent), var(--f-accent-2)); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 12px rgba(227,23,95,.35); }
.f-bar .f-create b svg { width: 16px; height: 16px; stroke-width: 3; }

/* ---------- the computer: the same feed in a column, the menu on the left, what you get on the right ---------- */
.f-side, .f-panel, .f-arrows { display: none; }
@media (min-width: 1000px) {
  .f-wrap { --f-side: 264px; --f-panel: 0px; --f-col-h: calc(100vh - 40px); --f-col-w: calc(var(--f-col-h) * 9 / 16);
            --f-col-l: calc(var(--f-side) + (100vw - var(--f-side) - var(--f-panel) - var(--f-col-w)) / 2 - 36px); background: #0b0b0b; height: 100vh; }
  .f-bar { display: none; }
  .f-feed { inset: auto; top: 20px; left: var(--f-col-l); width: var(--f-col-w); height: var(--f-col-h); border-radius: 16px; }
  .f-slide { border-radius: 16px; }
  .f-cap { right: 16px; bottom: 22px; }
  .f-top { left: var(--f-col-l); right: auto; width: var(--f-col-w); top: 20px; padding: 12px 16px 28px; border-radius: 16px 16px 0 0; }
  .f-top h1, .f-top p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .f-tabs { margin: 0 -16px; justify-content: safe center; }
  .f-rail { left: calc(var(--f-col-l) + var(--f-col-w) + 16px); right: auto; bottom: 28px; }
  .f-rail i { background: rgba(255,255,255,.12); }
  .f-zoom { inset: 20px calc(var(--f-panel) + 24px) 20px calc(var(--f-side) + 24px); border-radius: 16px; background: #141414; }
  .f-zbar { padding: 0 10px 0 20px; }
  .f-tabs { gap: 14px; margin: 0 -12px; padding: 0 12px; }
  .f-tabs a { font-size: 14.5px; }
  .f-side { display: flex; flex-direction: column; position: absolute; z-index: 7; left: 0; top: 0; bottom: 0; width: var(--f-side); padding: 24px 16px 20px; background: #0b0b0b; border-right: 1px solid #1d1d1d; }
  .f-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; text-decoration: none; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
  .f-brand img { width: 32px; height: 32px; border-radius: 8px; }
  .f-h1 { margin: 22px 8px 4px; font-size: 22px; line-height: 1.18; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; word-break: auto-phrase; }
  :lang(ja) .f-h1, :lang(zh) .f-h1, :lang(ko) .f-h1 { font-size: 17.5px; line-height: 1.3; letter-spacing: 0; }   /* about 12 characters a line: no word cut in two */
  .f-sub { margin: 0 8px 20px; font-size: 13px; color: #a8a8a8; }
  .f-side .f-create { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--f-accent), var(--f-accent-2)); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(227,23,95,.35); }
  .f-side .f-create svg { width: 18px; height: 18px; stroke-width: 3; }
  .f-side nav { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
  .f-side nav button { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font-size: 15px; font-weight: 700; color: #d6d6d6; cursor: pointer; text-align: start; }
  .f-side nav button:hover { background: #171717; }
  .f-side nav .on { color: #fff; background: #1a1a1a; }
  .f-side nav svg { width: 22px; height: 22px; stroke-width: 2; }
  .f-fine { margin-top: auto; padding: 0 8px; font-size: 12px; color: #7d7d7d; line-height: 1.6; }
  .f-fine a { color: #9a9a9a; }
  .f-arrows { display: flex; flex-direction: column; gap: 12px; position: absolute; z-index: 5; top: 50%; right: calc(var(--f-panel) + 24px); transform: translateY(-50%); }
  .f-arrows button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #1c1c1c; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .f-arrows button:hover { background: #2a2a2a; }
  .f-arrows svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.4; }
  body.f-zooming .f-arrows { display: none; }
}
@media (min-width: 1280px) {
  .f-wrap { --f-panel: 340px; }
  .f-panel { display: block; position: absolute; z-index: 7; right: 0; top: 0; bottom: 0; width: var(--f-panel); padding: 36px 28px; overflow-y: auto; background: #111; border-left: 1px solid #1d1d1d; }
  .f-panel h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.03em; }
  .f-panel .f-lead { margin: 0 0 22px; font-size: 14px; color: #b3b3b3; line-height: 1.5; }
  .f-panel ol { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
  .f-panel ol li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: #e6e6e6; }
  .f-panel ol b { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #1f1f1f; color: var(--f-accent); font-size: 14px; font-weight: 800; }
  .f-panel ol span small { display: block; color: #9a9a9a; font-size: 12.5px; }
  .f-panel h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #8c8c8c; }
  .f-panel dl { margin: 0 0 24px; display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; font-size: 14px; }
  .f-panel dt { color: #e6e6e6; } .f-panel dd { margin: 0; font-weight: 700; text-align: end; }
  .f-panel dd.f-free { color: var(--f-accent); }
  .f-panel .f-create { display: flex; width: 100%; align-items: center; justify-content: center; height: 48px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--f-accent), var(--f-accent-2)); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; }
  .f-panel .f-note { margin: 10px 0 0; font-size: 12px; color: #8c8c8c; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .f-feed { scroll-behavior: auto; } }