/* ==================================================================
   Training film "Learn it live." · stage (16:9 + 9:16) + /training embed.
   ================================================================== */
:root { --tf-ink:#111110; --tf-surf:#1A1A18; --tf-card:#1E1E1C; --tf-paper:#F5F5F0; --tf-body:#A3A39F; --tf-muted:#6B6B68; --tf-line:rgba(245,245,240,.08);
  --tf-teal:#00A89D; --tf-blue:#0099D6; --tf-sans:'Geist','Inter',system-ui,sans-serif; --tf-mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace; --tf-serif:'Instrument Serif','Libre Baskerville',Georgia,serif; }

.tfilm { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--tf-ink); cursor:pointer; isolation:isolate; contain:layout paint; }
.tfilm.v { aspect-ratio:9/16; }
.tf-stage { position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0; overflow:hidden; font-family:var(--tf-sans); color:var(--tf-paper); -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; }
.tf-stage.tf-v { width:1080px; height:1920px; }
.tf-stage * { box-sizing:border-box; }
.tf-stage :is(h2,h3,h4) { font-family:var(--tf-sans); color:var(--tf-paper); margin:0; font-style:normal; }
.tf-stage p { margin:0; }
.tf-bg { position:absolute; inset:0; background:radial-gradient(1100px 700px at 80% 20%, rgba(0,153,214,.10), transparent 60%), radial-gradient(900px 700px at 8% 100%, rgba(0,168,157,.09), transparent 60%), var(--tf-ink); }
.tf-bg::after { content:''; position:absolute; inset:0; opacity:.05; mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tf-stage .w { display:inline-block; will-change:transform, filter, opacity; }
.tf-k { white-space:nowrap; }
.tf-mono { font-family:var(--tf-mono); font-size:17px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--tf-muted); }
.tf-ser { font-family:var(--tf-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
.tf-kick { color:var(--tf-teal); }
.tf-h { font-weight:500 !important; font-size:62px; line-height:1.08; letter-spacing:-.045em; }

/* session frame */
.tf-top { position:absolute; left:60px; right:60px; top:58px; display:flex; justify-content:space-between; align-items:center; font-family:var(--tf-mono); font-size:16px; letter-spacing:.14em; color:rgba(245,245,240,.6); }
.tf-live { display:inline-flex; align-items:center; gap:12px; color:var(--tf-paper); }
.tf-live i { width:10px; height:10px; border-radius:50%; background:#22D390; box-shadow:0 0 0 6px rgba(34,211,144,.15); }
.tf-clock { color:var(--tf-paper); font-variant-numeric:tabular-nums; background:rgba(245,245,240,.06); border:1px solid var(--tf-line); border-radius:999px; padding:8px 18px; letter-spacing:.08em; }
.tf-share { position:absolute; left:60px; top:150px; width:1450px; height:830px; border-radius:24px; background:linear-gradient(180deg,#191917,#151514); border:1px solid rgba(245,245,240,.09); box-shadow:0 50px 120px -60px rgba(0,0,0,.9); overflow:hidden; opacity:0; }
.tf-share-tag { position:absolute; right:22px; top:20px; font-family:var(--tf-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--tf-muted); }
.tf-share-tag::before { content:''; display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--tf-teal); margin-right:10px; }
.tf-ch { position:absolute; inset:0; padding:66px 80px; display:none; }
.tf-tile { position:absolute; left:0; top:0; border-radius:20px; overflow:hidden; background:radial-gradient(circle at 50% 38%, #1f2b2a, #141413 70%); border:1px solid rgba(245,245,240,.09); container-type:size; opacity:0; }
.tf-av { position:absolute; left:50%; top:42%; width:34cqh; height:34cqh; margin:-17cqh 0 0 -17cqh; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--tf-teal),var(--tf-blue)); }
.tf-tile[data-i="1"] .tf-av { background:linear-gradient(135deg,#3B3A37,#262624); }
.tf-av span { font-family:var(--tf-mono); font-weight:500; font-size:10cqh; letter-spacing:.06em; color:#fff; }
.tf-ring { position:absolute; inset:-3cqh; border-radius:50%; border:.8cqh solid rgba(0,168,157,.75); opacity:0; }
.tf-name { position:absolute; left:6cqh; bottom:5cqh; line-height:1.2; }
.tf-name strong { display:block; font-weight:600; font-size:7.5cqh; letter-spacing:-.02em; }
.tf-name span { display:block; font-family:var(--tf-mono); font-size:4.6cqh; letter-spacing:.1em; text-transform:uppercase; color:var(--tf-muted); }
.tf-mic { position:absolute; right:6cqh; bottom:6cqh; display:flex; gap:1cqh; align-items:flex-end; height:7cqh; }
.tf-mic i { width:1.4cqh; height:100%; border-radius:1cqh; background:var(--tf-teal); transform-origin:50% 100%; transform:scaleY(.2); }

/* open */
.tf-open { position:absolute; left:0; right:0; top:170px; text-align:center; display:none; }
.tf-oh { font-weight:500 !important; font-size:104px; line-height:1.04; letter-spacing:-.05em; }
.tf-os { margin-top:24px !important; font-size:52px; color:rgba(245,245,240,.82); }

/* fit */
.tf-fit .tf-h { margin-top:18px !important; }
.tf-fitlist { margin-top:44px; display:flex; flex-direction:column; gap:30px; }
.tf-fitrow { display:flex; align-items:flex-start; gap:24px; }
.tf-fitrow p { font-size:38px; line-height:1.28; letter-spacing:-.025em; max-width:1100px; }
.tf-ck { flex:none; width:44px; height:44px; margin-top:2px; opacity:0; }
.tf-ck circle { fill:rgba(0,168,157,.14); stroke:rgba(0,168,157,.6); stroke-width:1.4; }
.tf-ck path { fill:none; stroke:#6FE0D6; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }

/* modules */
.tf-modhead { display:flex; justify-content:space-between; }
.tf-deck { position:relative; margin-top:56px; height:580px; perspective:2200px; }
.tf-card { position:absolute; left:110px; top:20px; width:1000px; height:520px; border-radius:28px; padding:56px 60px; background:linear-gradient(160deg,#22221F,#1A1A18); border:1px solid rgba(245,245,240,.1); box-shadow:0 50px 90px -50px rgba(0,0,0,.95); transform-origin:50% 100%; overflow:hidden; }
.tf-cardk { color:var(--tf-teal); }
.tf-card h4 { margin-top:26px !important; font-weight:600; font-size:68px; line-height:1.02; letter-spacing:-.05em; max-width:820px; }
.tf-card p { margin-top:30px !important; font-size:40px; line-height:1.25; letter-spacing:-.025em; color:rgba(245,245,240,.78); max-width:820px; }
.tf-cardnum { position:absolute; right:40px; bottom:-50px; font-weight:700; font-size:300px; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:2px rgba(0,168,157,.18); }

/* steps */
.tf-track { position:relative; height:30px; margin:80px 0 56px; }
.tf-track-l, .tf-track-f { position:absolute; left:12.5%; right:12.5%; top:14px; height:2px; background:rgba(245,245,240,.14); transform-origin:0 50%; transform:scaleX(0); }
.tf-track-f { left:0; right:0; height:3px; top:13px; background:linear-gradient(90deg,var(--tf-teal),var(--tf-blue)); }
.tf-node { position:absolute; top:3px; width:24px; height:24px; margin-left:-12px; border-radius:50%; background:var(--tf-ink); border:2px solid var(--tf-teal); }
.tf-stepcards { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tf-step { background:var(--tf-card); border:1px solid var(--tf-line); border-radius:20px; padding:30px 28px 34px; min-height:330px; opacity:0; }
.tf-step .tf-mono { color:var(--tf-teal); }
.tf-step h4 { margin:18px 0 14px !important; font-weight:600; font-size:34px; line-height:1.1; letter-spacing:-.035em; }
.tf-step p { font-size:25px; line-height:1.35; color:var(--tf-body); }

/* outcomes */
.tf-outhead { display:flex; align-items:baseline; gap:28px; flex-wrap:wrap; }
.tf-nohw { font-family:var(--tf-serif); font-style:italic; font-size:48px; color:#6FE0D6; }
.tf-outgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; }
.tf-out { background:var(--tf-card); border:1px solid var(--tf-line); border-radius:22px; padding:28px 30px 34px; opacity:0; }
.tf-out .tf-mono { color:var(--tf-teal); font-size:15px; }
.tf-out h4 { margin:12px 0 12px !important; font-weight:600; font-size:40px; letter-spacing:-.04em; }
.tf-out p { font-size:25px; line-height:1.35; color:var(--tf-body); }
.tf-obj { height:200px; display:grid; place-items:center; margin-bottom:20px; border-radius:14px; background:rgba(245,245,240,.03); border:1px solid var(--tf-line); }
.tf-obj svg { width:80%; height:80%; overflow:visible; }
.tf-map { fill:none; stroke:var(--tf-teal); stroke-width:4; stroke-dasharray:1; stroke-dashoffset:1; stroke-linecap:round; }
.tf-obj-0 circle { fill:var(--tf-ink); stroke:#6FE0D6; stroke-width:3; opacity:0; }
.tf-proto { position:relative; display:flex; align-items:center; width:84%; }
.tf-proto span { flex:none; font-family:var(--tf-mono); font-size:16px; letter-spacing:.08em; padding:12px 16px; border-radius:12px; background:var(--tf-surf); border:1px solid rgba(0,168,157,.5); color:var(--tf-paper); }
.tf-proto i { flex:1; height:2px; background:var(--tf-teal); transform-origin:0 50%; transform:scaleX(0); }
.tf-pk { position:absolute; left:0; right:0; top:50%; height:0; }
.tf-pk::before { content:''; position:absolute; left:0; top:-6px; width:12px; height:12px; border-radius:50%; background:#6FE0D6; box-shadow:0 0 14px 4px rgba(0,168,157,.6); }
.tf-badge svg { width:130px; height:130px; }
.tf-badge circle { fill:rgba(0,168,157,.12); stroke:var(--tf-teal); stroke-width:4; stroke-dasharray:1; stroke-dashoffset:1; }
.tf-badge path { fill:none; stroke:#6FE0D6; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }

/* prices */
.tf-pricehead .tf-h { margin-top:16px !important; }
.tf-ladder { display:flex; align-items:flex-end; gap:16px; height:500px; margin-top:34px; }
.tf-rung { position:relative; flex:1; height:var(--h); border-radius:18px; padding:20px 18px; background:var(--tf-card); border:1px solid var(--tf-line); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; opacity:0; }
.tf-rung.rec { border-color:rgba(0,168,157,.7); background:linear-gradient(180deg,#152422,#1A1A18); }
.tf-rungtop strong { display:block; font-weight:600; font-size:23px; line-height:1.15; letter-spacing:-.025em; }
.tf-rungtop .tf-mono { font-size:13px; margin-top:6px; display:block; }
.tf-pr { position:relative; z-index:1; }
.tf-pr em { display:block; font-style:normal; font-family:var(--tf-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--tf-muted); }
.tf-pr b { font-weight:600; font-size:40px; letter-spacing:-.04em; }
.tf-pr > span { font-size:17px; color:var(--tf-body); margin-left:4px; }
.tf-pr small { display:block; font-family:var(--tf-mono); font-size:15px; color:var(--tf-muted); margin-top:4px; }
.tf-bar { position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(180deg,rgba(0,168,157,0),rgba(0,168,157,.16)); transform-origin:50% 100%; transform:scaleY(0); }
.tf-recp { position:absolute; right:14px; top:14px; font-family:var(--tf-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#0B1211; background:var(--tf-teal); border-radius:6px; padding:4px 8px; opacity:0; }
.tf-rung.rec .tf-rungtop { padding-top:28px; }
.tf-billed { margin-top:22px; font-size:14px; }

/* end */
.tf-end { position:absolute; inset:0; display:none; }
.tf-eh { position:absolute; left:0; right:0; top:330px; margin:0 auto !important; max-width:1300px; text-align:center; font-weight:500 !important; font-size:80px; line-height:1.06; letter-spacing:-.05em; }
.tf-btn { position:absolute; left:0; right:0; top:600px; margin:0 auto; width:max-content; display:flex; align-items:center; gap:18px; padding:28px 48px; border-radius:999px; background:var(--tf-paper); color:var(--tf-ink); font-weight:600; font-size:40px; letter-spacing:-.025em; overflow:hidden; opacity:0; }
.tf-rip { position:absolute; left:62%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; background:#fff; opacity:0; }
.tf-cursor { position:absolute; left:0; top:0; width:40px; height:40px; transform-origin:5px 3px; opacity:0; z-index:12; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.tf-logo { position:absolute; left:830px; top:330px; width:260px; height:auto; overflow:visible; opacity:0; }
.tf-word { position:absolute; left:0; right:0; top:520px; text-align:center; font-weight:600; font-size:66px; }
.tf-stage .ch { display:inline-block; width:.8em; text-align:center; } .tf-stage .sp { display:inline-block; width:.3em; }
.tf-cert { position:absolute; left:0; right:0; top:630px; text-align:center; opacity:0; }
.tf-url { position:absolute; left:0; right:0; top:676px; text-align:center; color:var(--tf-teal); text-transform:none; letter-spacing:.06em; font-size:24px; opacity:0; }

/* pen + chrome */
.tf-pen { position:absolute; left:0; top:0; z-index:11; pointer-events:none; overflow:visible; }
.tf-ink { fill:none; stroke:#3CC8BC; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 6px rgba(0,168,157,.45)); }
.tf-chrome { position:absolute; inset:0; z-index:10; pointer-events:none; font-family:var(--tf-mono); font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,245,240,.5); }
.tf-chap { position:absolute; left:60px; bottom:30px; }
.tf-prog { position:absolute; left:60px; right:60px; bottom:16px; height:2px; background:rgba(245,245,240,.1); border-radius:2px; overflow:hidden; }
.tf-prog i { display:block; height:100%; background:linear-gradient(90deg,var(--tf-teal),var(--tf-blue)); transform-origin:0 50%; transform:scaleX(0); }

/* ============================ 9:16 vertical ============================ */
.tf-v .tf-top { top:64px; left:40px; right:40px; font-size:15px; }
.tf-v .tf-brand { display:none; }
.tf-v .tf-share { left:40px; top:400px; width:1000px; height:1260px; }
.tf-v .tf-ch { padding:60px 50px; }
.tf-v .tf-open { top:300px; padding:0 60px; }
.tf-v .tf-oh { font-size:96px; }
.tf-v .tf-os { font-size:50px; }
.tf-v .tf-h { font-size:64px; }
.tf-v .tf-fitrow p { font-size:40px; }
.tf-v .tf-fitlist { gap:40px; margin-top:56px; }
.tf-v .tf-modhead { flex-direction:column; gap:14px; }
.tf-v .tf-deck { height:960px; margin-top:44px; }
.tf-v .tf-card { left:0; width:900px; height:860px; padding:60px 56px; }
.tf-v .tf-card h4 { font-size:78px; } .tf-v .tf-card p { font-size:44px; }
.tf-v .tf-cardnum { font-size:380px; }
.tf-v .tf-track { margin:60px 0 44px; }
.tf-v .tf-stepcards { grid-template-columns:1fr 1fr; gap:22px; }
.tf-v .tf-step { min-height:400px; padding:30px 28px; } .tf-v .tf-step h4 { font-size:38px; } .tf-v .tf-step p { font-size:28px; }
.tf-v .tf-outgrid { grid-template-columns:1fr; gap:22px; margin-top:36px; }
.tf-v .tf-out { display:grid; grid-template-columns:240px 1fr; column-gap:26px; align-items:center; padding:24px; }
.tf-v .tf-obj { grid-row:span 3; height:220px; margin:0; }
.tf-v .tf-out h4 { font-size:40px; margin:6px 0 !important; } .tf-v .tf-out p { font-size:26px; }
.tf-v .tf-outhead { flex-direction:column; gap:10px; }
.tf-v .tf-ladder { flex-direction:column; align-items:stretch; height:auto; gap:14px; margin-top:40px; }
.tf-v .tf-rung { flex:none; height:auto; width:calc(52% + var(--h) * .6); flex-direction:row; align-items:center; padding:22px 24px; min-height:122px; }
.tf-v .tf-rung.rec .tf-rungtop { padding-top:0; } .tf-v .tf-recp { top:auto; bottom:12px; }
.tf-v .tf-rungtop strong { font-size:28px; } .tf-v .tf-pr { text-align:right; } .tf-v .tf-pr b { font-size:42px; }
.tf-v .tf-bar { height:100%; }
.tf-v .tf-eh { top:640px; font-size:76px; padding:0 70px; }
.tf-v .tf-btn { top:1010px; }
.tf-v .tf-logo { left:410px; top:700px; }
.tf-v .tf-word { top:890px; }
.tf-v .tf-cert { top:1000px; padding:0 60px; line-height:1.6; } .tf-v .tf-url { top:1090px; }

/* render mode */
.tf-render, .tf-render body { margin:0; background:#000; overflow:hidden; }
.tf-render .tfilm { width:1920px; height:1080px; aspect-ratio:auto; }
.tf-render .tfilm.v { width:1080px; height:1920px; }

/* ============================ /training embed ============================ */
.tf-sec { padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem); }
.tf-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.tf-head h2 { margin:0; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.12; }
.tf-head p { margin:0; max-width:46ch; color:var(--text-body); }
.tf-frame { position:relative; border-radius:18px; overflow:hidden; background:#000; border:1px solid var(--border); box-shadow:0 50px 120px -60px rgba(0,153,214,.45); }
.tf-frame:fullscreen { border-radius:0; display:flex; flex-direction:column; justify-content:center; }
.tf-frame:fullscreen .tfilm { width:min(100vw, calc((100vh - 60px) * 16 / 9)); margin:0 auto; }
.tf-poster { position:absolute; left:0; top:0; width:100%; height:calc(100% - 60px); object-fit:cover; z-index:1; }
.tfilm.is-ready ~ .tf-poster { display:none; }
.tf-start { position:absolute; inset:0 0 60px 0; z-index:5; display:grid; place-items:center; border:0; cursor:pointer; background:radial-gradient(ellipse at center, rgba(17,17,16,.35), rgba(17,17,16,.7)); font:inherit; color:var(--text); }
.tf-start[hidden] { display:none; }
.tf-start-in { display:flex; align-items:center; gap:1rem; padding:.7rem 1.4rem .7rem .7rem; border-radius:999px; background:rgba(245,245,240,.95); color:#111110; box-shadow:0 24px 50px -20px rgba(0,0,0,.7); transition:transform .5s cubic-bezier(.22,1,.36,1); }
.tf-start:hover .tf-start-in { transform:scale(1.04); }
.tf-start-btn { width:52px; height:52px; border-radius:50%; background:var(--grad); display:grid; place-items:center; }
.tf-start-btn svg { width:18px; height:18px; margin-left:3px; fill:#fff; }
.tf-start-in b { display:block; font-weight:600; font-size:1rem; text-align:left; }
.tf-start-in span span { display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#6B6B68; text-align:left; }
.tf-bar2 { display:flex; align-items:center; gap:.9rem; height:60px; padding:0 1rem; background:#141413; border-top:1px solid var(--border); font-family:var(--f-mono); font-size:.76rem; color:var(--text-muted); position:relative; z-index:6; }
.tf-ib { flex:none; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:9px; border:0; background:transparent; color:var(--text); cursor:pointer; }
.tf-ib:hover { background:rgba(255,255,255,.06); } .tf-ib svg { width:18px; height:18px; fill:currentColor; }
.tf-ib:focus-visible, .tf-scrub:focus-visible, .tf-chapb:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
#tfPlay .i-pause, #tfPlay[data-state="playing"] .i-play { display:none; } #tfPlay[data-state="playing"] .i-pause { display:block; }
#tfSound .i-off, #tfSound[data-on="0"] .i-on { display:none; } #tfSound[data-on="0"] .i-off { display:block; }
.tf-time { flex:none; min-width:9ch; color:var(--text); font-variant-numeric:tabular-nums; }
.tf-scrub { --p:0%; flex:1; min-width:60px; -webkit-appearance:none; appearance:none; height:4px; border-radius:4px; margin:0; cursor:pointer; background:linear-gradient(90deg,var(--teal),var(--blue)) 0/var(--p) 100% no-repeat, rgba(255,255,255,.12); }
.tf-scrub::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; }
.tf-scrub::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:#fff; }
.tf-dl { flex:none; display:inline-flex; align-items:center; gap:.45rem; height:36px; padding:0 .9rem; border-radius:999px; background:var(--grad); color:#fff; text-decoration:none; font-weight:600; font-size:.78rem; font-family:var(--f-sans); }
.tf-dl:hover { color:#fff; } .tf-dl svg { width:15px; height:15px; fill:currentColor; }
.tf-dl--ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
.tf-chaps { display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem 1rem; margin-top:1.1rem; }
.tf-chapb { position:relative; text-align:left; background:none; border:0; padding:.6rem 0 0; cursor:pointer; color:var(--text-muted); font:inherit; }
.tf-chapb::before { content:''; position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px; background:rgba(255,255,255,.1); }
.tf-chapb i { position:absolute; left:0; top:0; height:2px; width:var(--f,0%); border-radius:2px; background:var(--grad); }
.tf-chapb b { display:block; font-family:var(--f-mono); font-weight:500; font-size:.66rem; letter-spacing:.12em; color:var(--teal); }
.tf-chapb span { display:block; font-size:.84rem; line-height:1.35; margin-top:.2rem; transition:color .3s; }
.tf-chapb.is-on span, .tf-chapb:hover span { color:var(--text); }
@media (max-width: 900px) { .tf-chaps { grid-template-columns:repeat(4,1fr); } }
@media (max-width: 560px) { .tf-chaps { grid-template-columns:1fr 1fr; } .tf-dl span, .tf-start-in span span { display:none; } .tf-bar2 { gap:.4rem; padding:0 .5rem; } }