:root {
  --bg: #0b0b10; --panel: #16161f; --line: #262633; --text: #f4f4f7; --muted: #9a9aad;
  --like: #22d39a; --nope: #ff4d6d; --brand: #ff2d6f; --radius: 18px;
  --top: 56px;
}
body[data-theme="editorial"] {
  --bg: #f4efe6; --panel: #fffaf0; --line: #dfd3bf; --text: #27251f; --muted: #777064;
  --like: #087f5b; --nope: #cc3348; --brand: #a64b35; --radius: 8px;
}
body[data-theme="editorial"] header.top { background: rgba(250, 246, 238, .94); }
body[data-theme="editorial"] .tabs a.on { background: #27251f; color: #fff; }
body[data-theme="ocean"] {
  --bg: #071923; --panel: #102a36; --line: #1d4351; --text: #e7f5f7; --muted: #91b3bc;
  --like: #4ee0b0; --nope: #ff6b85; --brand: #20b8c5; --radius: 12px;
}
body[data-theme="ocean"] header.top { background: rgba(7, 25, 35, .94); }
body[data-theme="ocean"] .tabs a.on { background: #20b8c5; color: #06202a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

header.top { position: fixed; inset: 0 0 auto; height: var(--top); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: rgba(11, 11, 16, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); z-index: 20; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.logo .dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand); flex: none; }
.tabs { margin-left: auto; display: flex; gap: 4px; flex: none; }
.tabs a { text-decoration: none; padding: 7px 12px; border-radius: 999px; color: var(--muted); font-weight: 600; }
.tabs a.on { background: #fff; color: #000; }
main { padding-top: var(--top); min-height: 100%; }

/* swipe */
.swipe { height: calc(100dvh - var(--top)); display: flex; flex-direction: column; align-items: center; padding: 10px 12px 14px; }
.bar { width: 100%; max-width: 520px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.bar .chip { padding: 4px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 700; }
.stack { position: relative; width: 100%; max-width: 520px; flex: 1; min-height: 0; }
.card { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 12px 40px rgba(0, 0, 0, .55); touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.card.back { transform: scale(.95) translateY(10px); filter: brightness(.6); pointer-events: none; }
.card.top { cursor: grab; transition: transform .25s ease; }
.card.dragging { cursor: grabbing; transition: none; }
.card .blur { position: absolute; inset: -30px; filter: blur(28px) brightness(.45); }
.card .blur .backdrop { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
.card .media.still { display: none; }
.card.frozen img.media { visibility: hidden; }
.card.frozen .media.still { display: block; }
.card .spin { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.card .overlay { position: absolute; inset: auto 0 0; padding: 70px 58px 16px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, .88)); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.card h2 { margin: 0 0 4px; font-size: 19px; line-height: 1.3; }
.card .desc { margin: 0; color: #e2e2ea; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.card.expanded .desc { display: block; max-height: 38dvh; overflow: auto; touch-action: pan-y; }
.card .more { background: none; border: 0; padding: 2px 0; color: #fff; font-weight: 700; font-size: 13px; opacity: .85; }
.card .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12px; }
.card .meta span { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.card .meta .voted-like { background: var(--like); color: #00140d; }
.card .meta .voted-dislike { background: var(--nope); }
.stamp { position: absolute; top: 28px; padding: 6px 14px; border: 4px solid; border-radius: 10px; font-size: 30px; font-weight: 900; letter-spacing: 2px; opacity: 0; pointer-events: none; z-index: 2; }
/* TikTok-style comment button on the right edge of the card. */
.card .cbtn { position: absolute; right: 10px; top: 45%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 38px; padding: 6px 0; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .28); color: #fff; font-size: 16px; line-height: 1; opacity: .8; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); transition: opacity .12s, background .12s; }
.card .cbtn b { font-size: 10px; font-weight: 600; }
.card .cbtn:hover { opacity: 1; background: rgba(0, 0, 0, .55); }
.card.back .cbtn { visibility: hidden; }
.stamp.like { left: 22px; color: var(--like); transform: rotate(-14deg); }
.stamp.nope { right: 22px; color: var(--nope); transform: rotate(14deg); }
.actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.actions button { display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: transparent; opacity: .75; transition: transform .12s, opacity .12s, background .12s; }
.actions button:hover { transform: scale(1.06); opacity: 1; background: var(--panel); }
.actions button:disabled { opacity: .25; transform: none; cursor: default; background: transparent; }
.actions .undo { width: 34px; height: 34px; font-size: 14px; color: #ffc94d; }
.actions .nope { width: 44px; height: 44px; font-size: 18px; color: var(--nope); }
.actions .like { width: 44px; height: 44px; font-size: 18px; color: var(--like); }
.hint { margin-top: 8px; font-size: 12px; color: var(--muted); }
.done { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; border-radius: var(--radius); background: var(--panel); border: 1px dashed var(--line); padding: 20px; }
.done .big { font-size: 44px; }

/* reading */
.read { max-width: 760px; margin: 0 auto; padding: 22px 16px 60px; }
.read h1 { margin: 6px 0 14px; }
.tools { display: flex; gap: 8px; margin-bottom: 14px; }
.tools input, .tools select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; }
.tools input { flex: 1; min-width: 0; }
.count { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.entry { display: block; padding: 16px; margin-bottom: 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; }
.entry:hover { border-color: #3a3a4d; }
.entry h3 { margin: 0 0 4px; font-size: 17px; }
.entry p { margin: 0; color: var(--muted); font-size: 14px; }
.entry .m { margin-top: 6px; font-size: 12px; color: var(--muted); }
.btn { display: inline-block; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: transparent; text-decoration: none; font-weight: 600; font-size: 13px; opacity: .85; transition: opacity .12s, background .12s; }
.btn:hover { opacity: 1; background: var(--panel); }
.btn:disabled { opacity: .3; cursor: default; background: transparent; }
.btn.primary { background: var(--brand); border-color: var(--brand); opacity: 1; }
.center { text-align: center; margin-top: 16px; }
.reader { max-width: 680px; margin: 0 auto; padding: 22px 18px 80px; }
.reader h1 { font-size: clamp(24px, 4.5vw, 34px); line-height: 1.25; margin: 14px 0 6px; }
.reader .m { color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.reader article p { font-size: 18px; line-height: 1.75; margin: 0 0 1.1em; color: #e7e7ee; overflow-wrap: anywhere; }
.reader .nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 34px; }
.project-page { max-width: 900px; }
.project-page article p { color: var(--text); }
.project-page article h2 { margin: 36px 0 12px; font-size: 23px; color: var(--text); }
.project-kicker { margin-top: 32px; color: var(--brand); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.project-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.project-landing h1 { font-size: clamp(36px, 6vw, 64px); max-width: 760px; }
.project-landing article .project-lead { font-size: clamp(20px, 3vw, 26px); color: var(--muted); }
@media (max-width: 1100px) {
  header.top .tabs { min-width: 0; flex: 1; overflow-x: auto; }
  header.top .tabs a { white-space: nowrap; }
  header.top .wallet { flex-shrink: 0; }
}

/* liked */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tile { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #000; border: 0; padding: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile span { position: absolute; inset: auto 0 0; padding: 22px 8px 6px; font-size: 12px; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .94); display: flex; flex-direction: column; }
.viewer .vbar { display: flex; gap: 10px; align-items: center; padding: 12px 16px; flex: none; }
.viewer .vbar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbody { flex: 1; min-height: 0; display: flex; }
.vmedia { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 8px 16px 16px; }
.vmedia figure { margin: auto 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; }
/* Original pixel size: never enlarged, only scaled down to fit the panel. */
.vmedia img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 150px); object-fit: contain; border-radius: 6px; }
.vmedia figcaption { margin-top: 8px; color: var(--muted); font-size: 12px; }
.viewer .vdesc { margin: 12px 0 0; max-width: 720px; color: var(--muted); font-size: 14px; white-space: pre-line; }
.vside { width: 360px; flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: rgba(22, 22, 31, .9); }
.vside h3 { margin: 0; padding: 12px 16px; font-size: 15px; border-bottom: 1px solid var(--line); }
.clist { flex: 1; min-height: 0; overflow: auto; padding: 8px 16px; }
.cempty { color: var(--muted); font-size: 13px; padding: 18px 0; text-align: center; }
.comment { padding: 10px 0; border-bottom: 1px solid var(--line); }
.chead { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cwho { font-weight: 700; font-family: ui-monospace, Consolas, monospace; }
.cwhen { color: var(--muted); flex: 1; }
.cdel { border: 0; background: none; color: var(--muted); padding: 0 4px; }
.cdel:hover { color: var(--nope); }
.ctext { margin-top: 4px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cform { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.cform textarea { width: 100%; resize: vertical; min-height: 64px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; }
.cform .crow { display: flex; align-items: center; justify-content: space-between; }
.wallet { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-weight: 600; font-size: 12px; opacity: .85; }
.wallet:hover { opacity: 1; background: var(--panel); }
.wallet.on { border-color: #f6851b; }
.wallet.on span { font-family: ui-monospace, Consolas, monospace; }
.mtile .tc { position: absolute; left: 4px; top: 4px; height: 20px; display: flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #fff; font-size: 10px; font-style: normal; font-weight: 600; opacity: .75; pointer-events: none; }
.mtile .tc.zero { opacity: .45; }
.mtile:hover .tc { opacity: 1; }
@media (max-width: 860px) {
  .vbody { flex-direction: column; overflow: auto; }
  .vmedia { flex: none; overflow: visible; }
  .vside { width: auto; border-left: 0; border-top: 1px solid var(--line); }
}

/* thumbnail gallery */
.thumbs { max-width: 1400px; margin: 0 auto; padding: 18px 12px 40px; }
.thumbs .tools { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.thumbs h1 { flex: 1; margin: 0; font-size: 24px; }
.thumbs select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.masonry { position: relative; }
.mtile { position: absolute; overflow: hidden; border-radius: 6px; background: #15151d; cursor: zoom-in; }
.mtile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mtile span { position: absolute; inset: auto 0 0; padding: 18px 6px 4px; font-size: 11px; text-align: left; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); opacity: 0; transition: opacity .15s; pointer-events: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mtile:hover span { opacity: 1; }
.tvote { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; }
.tv { min-width: 22px; height: 20px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 5px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, .35); color: #fff; font-size: 11px; opacity: .75; cursor: pointer; transition: transform .1s, background .1s, opacity .1s; }
.tv b { font-size: 10px; font-weight: 600; }
.mtile:hover .tv, .tv.on { opacity: 1; }
.tv:hover { transform: scale(1.08); }
.tv.nope:hover, .tv.nope.on { background: #e5394c; }
.tv.like:hover, .tv.like.on { background: #19b36b; }
.thumbs .tools > .count { font-size: 13px; }
#t-more a { color: var(--brand); }
.empty { text-align: center; color: var(--muted); padding: 60px 10px; }
.empty .big { font-size: 44px; }

#gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(5, 5, 8, .97); padding: 20px; }
#gate .box { max-width: 420px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 24px; }
#gate h2 { margin: 6px 0 8px; }
#gate p { color: var(--muted); }
#gate .row { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: #fff; color: #000; padding: 8px 16px; border-radius: 999px; font-weight: 600; transition: .2s; z-index: 70; pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.act.show { pointer-events: auto; }
#toast button { margin-left: 8px; padding: 2px 10px; border: 0; border-radius: 999px; background: #000; color: #fff; font-weight: 700; cursor: pointer; }
.loading { color: var(--muted); text-align: center; padding: 50px 0; }

/* FTHX: header balance, wallet panel, card author, viewer tips */
.wallet em { font-style: normal; margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line); color: #f6c453; }
.card .meta .by { cursor: pointer; font-family: ui-monospace, Consolas, monospace; }
.card .meta .by:hover { background: rgba(246, 196, 83, .35); }
.vauthor { padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.vauthor b { font-family: ui-monospace, Consolas, monospace; }
.vauthor .tips { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.vauthor .tips .btn { padding: 2px 10px; font-size: 12px; }

/* new post */
.postpage { max-width: 1100px; margin: 0 auto; padding: 18px 14px 40px; }
.phead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.phead h1 { margin: 0; font-size: 24px; }
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.drop { min-height: 380px; border: 1.5px dashed var(--line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; padding: 18px; transition: border-color .12s, background .12s; outline: none; }
.drop.over, .drop:focus-visible { border-color: var(--brand); background: rgba(255, 45, 111, .06); }
.dz { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--muted); font-size: 14px; width: 100%; max-width: 520px; }
.dz .big, .pv .done .big { font-size: 40px; opacity: .6; }
.dz kbd { padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; }
.srcs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.linkrow { display: flex; gap: 6px; width: 100%; }
.linkrow input, .pform input, .pform textarea { flex: 1; min-width: 0; width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; }
.pform textarea { resize: vertical; }
.pv { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pv figure { margin: 0; max-width: 100%; }
.pv img, .pv video { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; border-radius: 8px; background: #000; }
.pinfo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 12px; }
.pinfo .dest { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-weight: 600; }
.pv .done { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pform { display: flex; flex-direction: column; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.pform label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.pform label .count { font-weight: 400; }
.pfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pfoot a { color: var(--brand); }
@media (max-width: 860px) {
  .pgrid { grid-template-columns: 1fr; }
  .drop { min-height: 260px; }
}

@media (max-width: 560px) {
  .tabs a span { display: none; }
  .tabs a { padding: 7px 11px; font-size: 17px; }
  .wallet span { display: none; }
}

/* trending */
.ttags { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.ttags .chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; text-decoration: none; white-space: nowrap; }
.ttags .chip:hover { color: var(--text); border-color: var(--muted); }
.ttags .chip.on { background: #fff; color: #000; border-color: #fff; font-weight: 600; }
.mtile .tgif { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .04em; opacity: .7; pointer-events: none; }
.mtile:hover .tgif { opacity: 0; }
.vtags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.vtags a { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: 12px; text-decoration: none; }
.vtags a:hover { color: var(--text); background: rgba(255, 255, 255, .16); }
.trending .tools input { flex: 0 1 260px; min-width: 120px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; }
.trending .tools input:focus { outline: none; border-color: var(--muted); }
.ttags button.chip { font: inherit; font-size: 12px; cursor: pointer; }
.ttags .chip.more { border-style: dashed; }
.ttags .chip.more:disabled { opacity: .6; cursor: default; }
@media (max-width: 600px) { .trending .tools { flex-wrap: wrap; } .trending .tools h1 { flex-basis: 100%; } .trending .tools input { flex: 1; } }

/* brand mark: black feather with a red 18 */
.logo .mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 6px rgba(227, 18, 31, .25)); }
.logo .sub { display: block; font-size: 11px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.logo .names { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
@media (max-width: 1100px) { .logo .sub { display: none; } }

/* floating new-post button */
.fab { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 35; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5a7e, var(--brand) 55%, #b5103f); color: #fff; box-shadow: 0 8px 24px rgba(255, 45, 111, .45), 0 2px 6px rgba(0, 0, 0, .5); transition: transform .15s, box-shadow .15s; }
.fab:hover { transform: scale(1.08) rotate(90deg); box-shadow: 0 10px 30px rgba(255, 45, 111, .6), 0 2px 6px rgba(0, 0, 0, .5); }
.fab.here { display: none; }
@media (max-width: 560px) { .fab { width: 50px; height: 50px; } }

/* keyword tags on swipe cards */
.card .ctags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.card .ctags a { padding: 1px 8px; border-radius: 999px; background: rgba(255, 45, 111, .2); border: 1px solid rgba(255, 45, 111, .35); color: #ffd3e0; font-size: 11.5px; text-decoration: none; }
.card .ctags a:hover { background: rgba(255, 45, 111, .45); color: #fff; }

/* YouTube posts */
.card .ytplay, .vmedia .ytplay { position: absolute; left: 50%; top: 45%; z-index: 3; width: 74px; height: 52px; transform: translate(-50%, -50%); border: 0; border-radius: 14px; background: rgba(230, 0, 18, .9); cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5); transition: transform .12s, background .12s; }
.card .ytplay::after, .vmedia .ytplay::after { content: ''; position: absolute; left: 30px; top: 15px; border: 11px solid transparent; border-left: 18px solid #fff; border-right: 0; }
.card .ytplay:hover, .vmedia .ytplay:hover { transform: translate(-50%, -50%) scale(1.07); background: #ff0000; }
.card .ytframe { position: absolute; inset: 0 0 auto; z-index: 4; width: 100%; height: calc(100% - 120px); border: 0; background: #000; }
.vmedia .ytbox { position: relative; width: min(100%, calc((100dvh - 170px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.vmedia .ytbox img, .vmedia .ytbox iframe { width: 100%; height: 100%; max-height: none; object-fit: cover; border: 0; border-radius: 0; }
.ytbadge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 27px; border-radius: 8px; background: rgba(230, 0, 18, .88); pointer-events: none; }
.ytbadge::after { content: ''; position: absolute; left: 15px; top: 7.5px; border: 6px solid transparent; border-left: 10px solid #fff; border-right: 0; }
.pv .ytprev { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; }
.pv figure.ytwrap { width: 100%; margin: 0; }
#gate .tl { margin: 4px 0 0; color: #d6d6e2; font-style: italic; }
#gate h3 { margin: 16px 0 4px; font-size: 16px; }