/* UTC+8 — shared base for the 3 mockup propositions (Claude). Not GPT's code. */
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#0A0F12; --ink2:#11181C; --paper:#F4F7F8;
  --mint:#2CFBBF; --teal:#19C5C9; --red:#FF3B3B; --muted:#8A98A0;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --sans:"Inter",-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --cn:"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.55}
html.is-navigating{cursor:progress}
html.is-navigating::before{content:"";position:fixed;z-index:10000;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--mint),var(--teal));transform-origin:left;animation:page-loading 1.2s ease-in-out infinite;box-shadow:0 0 14px rgba(44,251,191,.65)}
@keyframes page-loading{0%{transform:scaleX(.08)}65%{transform:scaleX(.78)}100%{transform:scaleX(.94)}}
@media (prefers-reduced-motion:reduce){html.is-navigating::before{animation:none;transform:scaleX(.7)}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.cn{font-family:var(--cn)}
.mono{font-family:var(--mono);letter-spacing:.04em}
.cond{font-family:var(--cond);text-transform:uppercase;letter-spacing:.01em}

/* ---------- Logo: [UTC+8] with corner brackets ---------- */
.logo{position:relative;display:inline-flex;align-items:center;font-family:var(--cond);font-weight:700;
  font-size:26px;line-height:1;padding:7px 10px 6px;letter-spacing:.01em;color:currentColor}
.logo b{color:var(--mint);font-weight:700}
.logo::before,.logo::after{content:"";position:absolute;width:11px;height:11px;border:2.5px solid currentColor}
.logo::before{left:0;top:0;border-right:0;border-bottom:0}
.logo::after{right:0;bottom:0;border-left:0;border-top:0}
.logo.on-light b{color:#0FBF8F}
.logo.big{font-size:64px;padding:14px 22px 12px}
.logo.big::before,.logo.big::after{width:24px;height:24px;border-width:5px}

/* ---------- Composed thumbnail (brand style: white condensed + 1 word mint) ---------- */
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000 center/cover no-repeat;border-radius:inherit}
.thumb>img{width:100%;height:100%;object-fit:cover}
.thumb .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,10,.92) 0%,rgba(5,8,10,.55) 45%,rgba(5,8,10,0) 75%)}
.thumb .tt{position:absolute;left:6%;top:50%;transform:translateY(-50%);font-family:var(--cond);font-weight:700;text-transform:uppercase;
  color:#fff;line-height:.92;font-size:clamp(22px,4.2vw,64px);max-width:60%;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.thumb .tt em{font-style:normal;color:var(--mint);display:block}
.thumb.sm .tt{font-size:clamp(18px,2.2vw,34px)}
.thumb .badge{position:absolute;left:6%;bottom:7%;font-family:var(--cond);font-weight:700;color:#fff;font-size:14px;letter-spacing:.04em}
.thumb .badge b{color:var(--mint)}
.thumb .dur{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.82);color:#fff;font:600 12px/1 var(--sans);padding:4px 6px;border-radius:4px}
.thumb .flag{position:absolute;left:10px;bottom:10px;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:6px 8px;border-radius:3px;background:var(--mint);color:var(--ink)}
.thumb .flag.soon{background:rgba(10,15,18,.82);color:var(--mint);border:1px solid rgba(44,251,191,.5)}
.thumb .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;
  background:rgba(10,15,18,.55);border:2px solid rgba(255,255,255,.85);backdrop-filter:blur(4px)}
.thumb .play::after{content:"";position:absolute;left:30px;top:22px;border-left:24px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent}
.thumb.sm .play{display:none}

/* corner brackets decoration usable anywhere */
.brk{position:relative}
.brk::before,.brk::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--mint);pointer-events:none}
.brk::before{left:-8px;top:-8px;border-right:0;border-bottom:0}
.brk::after{right:-8px;bottom:-8px;border-left:0;border-top:0}

/* mock label (to remind it's a maquette) */
.mocknote{position:fixed;right:14px;bottom:14px;z-index:99;font:500 11px/1.3 var(--mono);background:#0A0F12;color:#9fb;padding:8px 10px;border-radius:6px;opacity:.85}
.mocknote a{color:var(--mint);text-decoration:underline}

@media (max-width:760px){.thumb .play{width:54px;height:54px;margin:-27px 0 0 -27px}.thumb .play::after{left:21px;top:15px;border-left-width:17px;border-top-width:12px;border-bottom-width:12px}}