/* /tutorial index, 2026-10-27 (owner: tutorial 页面也要跟进): the Journal showcase look.
   Full-bleed photo hero, a centred intro, one section per chapter with a slider of the
   guide covers, the film and the questions. No italics; covers are shown whole at 16:9. */
body{background:#fff}
.tv-hero{position:relative;height:min(86vh,900px);min-height:520px;overflow:hidden;background:#11150c}
.tv-hero picture,.tv-hero img{position:absolute;inset:0;width:100%;height:100%}
.tv-hero img{object-fit:cover;object-position:60% 85%;filter:brightness(.82) saturate(.95)}
.tv-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,15,8,.72) 0%,rgba(12,15,8,.36) 42%,rgba(12,15,8,0) 70%),linear-gradient(0deg,rgba(12,15,8,.55) 0%,rgba(12,15,8,0) 45%)}
.tv-hero-tx{position:absolute;z-index:1;left:0;right:0;bottom:0;max-width:1400px;margin:0 auto;padding:0 40px 96px}
.tv-hero h1{margin:0;font-family:'Inter Tight',Inter,sans-serif;font-size:clamp(48px,6vw,88px);line-height:1;font-weight:600;letter-spacing:-.04em;color:#fff;font-style:normal}
.tv-hero h1 span{display:block;margin-bottom:14px;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em}
.tv-intro{padding:150px 24px 40px;text-align:center}
.tv-intro p{margin:0 auto;max-width:44ch;font-size:clamp(20px,1.8vw,25px);line-height:1.45;color:#1E2711;letter-spacing:-.01em}
.tv-film{margin-top:110px}
.tv-film-a{position:relative;display:block;height:min(84vh,860px);min-height:460px;overflow:hidden;background:#11150c;color:#fff;text-decoration:none}
.tv-film-a picture,.tv-film-a img{position:absolute;inset:0;width:100%;height:100%}
.tv-film-a img{object-fit:cover;object-position:50% 45%;transition:transform 1.2s ease}
.tv-film-a:hover img{transform:scale(1.02)}
.tv-film-a:after{content:"";position:absolute;inset:0;background:rgba(10,12,8,.42)}
.tv-film-tx{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding:0 24px}
.tv-film-h{font-family:'Inter Tight',Inter,sans-serif;font-size:clamp(44px,6vw,96px);line-height:1;font-weight:600;letter-spacing:-.04em}
.tv-play svg{display:block;transition:transform .3s ease}
.tv-film-a:hover .tv-play svg{transform:scale(1.08)}
.tv-film-c{font-size:16px;font-weight:500;color:rgba(255,255,255,.85)}
.tv-intro{padding-bottom:0}
.tv-modal{width:min(1200px,calc(100vw - 48px));max-width:none;padding:0;border:0;background:transparent;overflow:visible}
.tv-modal::backdrop{background:rgba(0,0,0,.86)}
.tv-modal-f{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 40px 120px -20px rgba(0,0,0,.8)}
.tv-modal-f iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-modal-x{position:absolute;top:-56px;right:0;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.tv-modal-x:hover{background:rgba(255,255,255,.26)}
.tv-go{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#DCF26B;color:#1E2711}
.tv-sec{position:relative;max-width:1400px;margin:0 auto;padding:120px 40px 0}
.tv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.tv-k{margin:0;font-size:clamp(18px,1.6vw,22px);font-weight:600;color:#566F46}
.tv-sec h2{margin:10px 0 0;font-family:'Inter Tight',Inter,sans-serif;font-size:clamp(34px,3.6vw,54px);line-height:1.05;font-weight:600;letter-spacing:-.035em;color:#1E2711}
.tv-lede{margin:16px 0 0;max-width:62ch;font-size:18px;line-height:1.55;color:#3b4130}
.tv-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.tv-track::-webkit-scrollbar{display:none}
.tv-card{flex:0 0 min(520px,80%);scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;color:#1E2711;text-decoration:none}
.tv-img{display:block;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#11150c}
.tv-img img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .5s ease}
.tv-card:hover .tv-img img{transform:scale(1.03)}
.tv-meta{margin-top:6px;font-size:13px;font-weight:600;color:#566F46}
.tv-title{font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.015em}
.tv-card:hover .tv-title{text-decoration:underline;text-underline-offset:3px}
.tv-sum{font-size:15px;line-height:1.55;color:#5A6150}
.tv-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.tv-nav button{width:44px;height:44px;border-radius:50%;border:0;background:#F2F2EF;color:#1E2711;display:grid;place-items:center;cursor:pointer}
.tv-nav button:hover{background:#E6E6E1}
.tv-faq{max-width:1000px;margin:0 auto;padding:140px 40px 140px}
.tv-faq h2{margin:0 0 28px;font-family:'Inter Tight',Inter,sans-serif;font-size:clamp(30px,3vw,44px);font-weight:600;letter-spacing:-.03em;color:#1E2711}
.tv-faq details{border-top:1px solid #ECECE8;padding:4px 0}
.tv-faq details:last-child{border-bottom:1px solid #ECECE8}
.tv-faq summary{cursor:pointer;list-style:none;padding:20px 0;font-size:19px;font-weight:600;color:#1E2711;display:flex;justify-content:space-between;gap:16px}
.tv-faq summary::-webkit-details-marker{display:none}
.tv-faq summary:after{content:"+";font-weight:400;font-size:24px;line-height:1;color:#566F46}
.tv-faq details[open] summary:after{content:"\2212"}
.tv-faq details p{margin:0 0 20px;font-size:17px;line-height:1.6;color:#3b4130;max-width:70ch}
.tv-faq .tgi-fig{margin:0 0 24px}
.tv-faq .tgi-fig-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.tv-faq iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-faq figcaption{margin-top:10px;font-size:14px;color:#5A6150;display:flex;gap:12px}
.tv-faq figcaption b{color:#1E2711;font-weight:600}
.tv-faq .tgi-more{margin:36px 0 0;font-size:16px;line-height:1.6;color:#5A6150}
.tv-faq .tgi-more a{color:#1E2711;font-weight:600}
@media(max-width:800px){
  .tv-hero{height:78vh;min-height:480px}
  .tv-hero img{object-position:70% 45%}
  .tv-hero-tx{padding:0 22px 56px}
  .tv-intro{padding:88px 22px 24px}
  .tv-film{margin-top:72px}
  .tv-film-a{height:64vh}
  .tv-play svg{width:64px;height:64px}
  .tv-sec{padding:80px 22px 0}
  .tv-track{margin-right:-22px;padding-right:22px}
  .tv-card{flex-basis:86%}
  .tv-nav{display:none}
  .tv-faq{padding:96px 22px}
}