/* Layout: a fixed 1920x1080 film stage scaled to the page, player controls underneath. Brand = TBC Resale supplier flyer (white, ink, bleu canard, gold for marketplaces). */
:root{
  --page:#ECEBE8; --panel:#FFFFFF; --ui-fg:#111111; --ui-muted:#5C5852; --ui-line:#D9D6D0;
  --ink:#111111; --muted:#5C5852; --paper:#FFFFFF; --stone:#F2F2F0; --line:#E2DFDA;
  --teal:#0A4F5C; --teal-soft:#E6EFF0; --teal-mid:#BFD6DA; --gold:#8C6B3F;
  --display:'Bodoni Moda',Georgia,serif; --body:'Montserrat','Noto Sans JP',system-ui,sans-serif; --thin:'Josefin Sans',system-ui,sans-serif;
}
body{background:var(--page);color:var(--ui-fg);font-family:var(--body);padding-inline:16px;padding-block:24px}
.wrap{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.frame{position:relative;width:100%;aspect-ratio:16/9;max-width:100%;overflow:hidden;background:#FFFFFF;box-shadow:0 1px 0 var(--ui-line)}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:var(--paper);color:var(--ink);font-family:var(--body);overflow:hidden}
#stage *{box-sizing:border-box}
.abs{position:absolute}
.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn{font:600 14px var(--body);color:var(--ui-fg);background:var(--panel);border:1px solid var(--ui-line);padding:10px 14px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--ui-fg)}
.btn:focus-visible,input:focus-visible,.chap:focus-visible{outline:2px solid #0A4F5C;outline-offset:2px}
.btn.primary{background:#0A4F5C;color:#FFFFFF;border-color:#0A4F5C;min-width:110px;justify-content:center}
#scrub{flex:1 1 240px;min-width:0;accent-color:#0A4F5C;height:44px}
#time{font:600 14px var(--body);font-variant-numeric:tabular-nums;color:var(--ui-muted);min-width:96px}
.chapters{display:flex;gap:8px;flex-wrap:wrap}
.chap{font:600 13px var(--body);color:var(--ui-muted);background:transparent;border:1px solid var(--ui-line);padding:8px 12px;min-height:40px;cursor:pointer}
.chap.on{color:var(--ui-fg);border-color:var(--ui-fg)}
.wm{display:flex;align-items:baseline;gap:12px;font-size:30px;line-height:1}
.wm .t{font-family:var(--thin);font-weight:300;letter-spacing:.04em}
.wm .b{font-family:var(--display);font-weight:700;letter-spacing:.02em}
.win{background:#FFFFFF;border:1.5px solid var(--ink);box-shadow:0 30px 60px -30px rgba(10,30,35,.35)}
.winbar{height:52px;border-bottom:1.5px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-weight:700;font-size:18px}
.dots{display:flex;gap:8px}.dots i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);display:block}
.tabs{display:flex;gap:6px;padding:16px 22px 0 22px}
.tab{font-size:16px;font-weight:700;padding:8px 16px;border:1.5px solid var(--line);color:var(--muted)}
.card{background:#FFFFFF;border:1px solid var(--line);display:flex;flex-direction:column}
.card .ph{background:var(--stone);height:150px;display:flex;align-items:center;justify-content:center}
.card .meta{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.card .br{font-size:12.5px;font-weight:800;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .sk{font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
.chip{font-size:17px;font-weight:600;padding:8px 14px;background:var(--stone);white-space:nowrap}
.field{display:grid;grid-template-columns:210px 1fr;align-items:center;border-bottom:1px solid var(--line);height:58px;font-size:23px}
.field .k{color:var(--muted);font-weight:500;font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.field .v{font-weight:700}
.pill{font-size:15px;font-weight:700;padding:6px 12px;white-space:nowrap}
.mp{position:absolute;transform:translate(-50%,-50%);background:#FFFFFF;border:1.5px solid var(--gold);color:var(--gold);font-weight:700;font-size:19px;padding:9px 16px;white-space:nowrap}
.row{display:grid;grid-template-columns:100px 200px 1fr 220px 150px;align-items:center;height:62px;border-bottom:1px solid var(--line);font-size:19px;padding:0 24px}
.row .m{color:var(--muted)}
.node{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;width:260px;text-align:center}
.node .c{width:76px;height:76px;border-radius:50%;border:2px solid var(--ink);background:#FFFFFF;display:flex;align-items:center;justify-content:center}
.node .l{font-size:20px;font-weight:700;line-height:1.25}
.node .s{font-size:16px;color:var(--muted);margin-top:-8px}
.big{font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ref{font-weight:800;letter-spacing:.08em}.dot{color:#B8B3AA}
.fp{font-size:26px;font-weight:600;padding:14px 24px;border:2px solid var(--ink);white-space:nowrap;display:inline-flex;align-items:baseline}

html:lang(ja) .field .k {font-size:19px;letter-spacing:0}
html:lang(ja) .big {letter-spacing:0}

/* Reuse the site's brand assets and keep product examples consistent across scenes. */
.win {border-color:#b8bdbb;box-shadow:0 24px 50px -28px #173c4938;border-radius:6px;overflow:hidden}
.winbar {border-color:#d8dddb}
.card {border-color:#e5e8e5;border-radius:3px;overflow:hidden}
.card .ph {background:#fff}
.product-photo {object-fit:contain;display:block;background:#fff;mix-blend-mode:multiply;max-width:100%;max-height:100%}
.card .br {height:19px;display:flex;align-items:center}
.brand-logo {max-width:98px;height:17px;object-fit:contain;object-position:left center}
.source-chip {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:#fff;border:1px solid #e0e5e2;border-radius:5px;padding:10px 14px;color:#284a51}
.source-chip .channel-logo {width:35px;height:28px;object-fit:contain}
#engine {border-radius:6px}
#bigBag {display:flex;align-items:center;justify-content:center;background:var(--stone)}
.listed-channel {display:inline-flex;align-items:center;justify-content:center;height:43px;border:1px solid #e0e5e2;border-radius:4px;background:white;color:var(--muted);font-size:15px}
.listed-channel {gap:7px}
.listed-channel .channel-logo {width:28px;height:27px;object-fit:contain}
.mp {padding:13px 20px;width:196px;height:68px;display:flex;align-items:center;justify-content:center;border:1px solid #c7d2ce;border-radius:6px;box-shadow:0 8px 22px #14343c0a}
.mp {width:216px;gap:10px;padding:10px 13px;color:var(--ink);font-size:17px;line-height:1.2;white-space:normal}
.mp .channel-logo {width:38px;height:38px;object-fit:contain;flex-shrink:0}
.mp span {flex:1}
#hub {border-radius:4px;box-shadow:0 6px 18px #13343a16}
.order-product {display:flex;align-items:center;gap:15px;font-weight:700;min-width:0}
.order-product img,.order-product svg {flex-shrink:0;width:48px;height:48px;object-fit:contain}
.row {grid-template-columns:95px 160px 1fr 200px 150px}
.node .s {line-height:1.4}
html:lang(zh) .field .k {letter-spacing:0}

/* A single composition for every language; text alone is localized. */
#intro {display:block!important}
#iKick {position:absolute;left:0;top:190px}
#iHead {position:absolute;left:0;top:240px;font-size:108px!important;line-height:1.08!important;max-width:1230px}
#iSub {position:absolute;left:0;top:510px;font-size:30px!important;line-height:1.45!important}
#iHow {position:absolute;left:0;top:710px}
#head {font-size:100px!important}
#catGrid {padding-bottom:24px!important}
#sources {left:120px!important;top:230px!important;width:840px!important;flex-wrap:nowrap!important;gap:10px!important;justify-content:center!important}
.source-chip {font-size:17px;min-height:52px;padding:10px 12px;gap:7px}
#iItems > div {border:1px solid #edf0ed;border-radius:4px;background:#fff!important}
#engine {box-shadow:0 20px 45px -30px #173c4940}