/* AETHER / TUTORIAL — aligned to current aether-pages/site-nav/LINE Seed system */
.tutorial-page{--ink:#06100f;--paper:#f2f3ed;--mint:#74e8c6;--mint2:#c8f4e1;--muted:rgba(242,243,237,.56);--side:clamp(22px,3.3vw,54px);--pad:clamp(22px,5.1vw,82px);min-width:320px;overflow-x:clip}
.tutorial-page .tutorial-ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 54vw 42vw at 78% 8%,rgba(57,196,154,.11),transparent 70%),radial-gradient(ellipse 40vw 38vw at -5% 90%,rgba(36,153,130,.08),transparent 70%)}
.tutorial-page button{cursor:pointer}
.tutorial-page .topbar,.tutorial-page .site-brand{position:fixed}
.tutorial-page .language-switcher{position:fixed;z-index:125}
.tutorial-main{width:min(100%,1800px);margin:auto;padding:148px var(--pad) 0 calc(var(--side) + 80px)}
.tutorial-intro{min-height:320px;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,400px);gap:32px;position:relative;align-items:center;margin-bottom:78px}
.tutorial-intro-copy{max-width:880px;position:relative;z-index:2}
.tutorial-kicker{display:flex;align-items:center;gap:12px;margin-bottom:27px;color:var(--mint);font-size:12px;letter-spacing:.18em;font-weight:700}
.tutorial-kicker-line{display:block;width:36px;height:1px;background:var(--mint)}
.tutorial-kicker-index{color:rgba(237,251,245,.35);font-weight:400}
.tutorial-intro h1{margin:0 0 26px;color:#f0f7f1;font-weight:400;font-size:clamp(53px,6.1vw,98px);line-height:.96;letter-spacing:-.075em}
.tutorial-intro h1 .tut-highlight{color:var(--mint)}
html[lang=th] .tutorial-intro h1{font-size:clamp(42px,5.8vw,80px);line-height:1.2;letter-spacing:-.055em}
.tutorial-intro-lead{max-width:690px;color:rgba(232,247,239,.64);font-size:clamp(14px,1.25vw,18px);line-height:1.85;margin:0 0 27px}
.tutorial-metrics{display:flex;flex-wrap:wrap;gap:18px;align-items:center;color:#d9f8ec;font-size:11px;letter-spacing:.14em}
.tutorial-metrics>span{display:inline-flex;align-items:center;gap:9px;padding-right:18px;border-right:1px solid rgba(217,248,236,.18)}
.tutorial-metrics>span:last-child{padding-right:0;border-right:0}
.tutorial-metrics small{color:rgba(230,253,241,.4);font-size:10px}
.tut-status-dot{flex:0 0 6px;display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(116,232,198,.7)}
.tutorial-intro-aside{min-height:330px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden}
.tut-orbit{border:1px solid rgba(137,248,206,.15);border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.orbit-1{width:190px;height:190px;box-shadow:0 0 78px rgba(116,232,198,.075)}.orbit-2{width:290px;height:290px;border-color:rgba(137,248,206,.095)}.orbit-3{width:380px;height:380px;border-color:rgba(137,248,206,.055)}
.orbit-1:before,.orbit-2:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 16px rgba(116,232,198,.75);top:17%;left:15%}
.orbit-2:before{width:5px;height:5px;top:82%;left:86%;opacity:.6}
.tut-orbit-core{width:136px;height:136px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(180,255,227,.45);border-radius:28px;transform:rotate(-13deg);background:linear-gradient(145deg,rgba(41,116,92,.53),rgba(4,31,24,.95));box-shadow:0 12px 70px rgba(46,224,168,.12),inset 0 0 30px rgba(113,249,199,.07)}
.tut-orbit-core span{color:#e3fff3;font-size:64px;letter-spacing:-.1em;line-height:1;font-weight:700}.tut-orbit-core small{color:rgba(181,251,218,.66);font-size:9px;letter-spacing:.13em;margin-top:8px}
.orbit-cross{position:absolute;color:rgba(124,245,202,.55);font-size:18px;font-weight:100}.orbit-cross-1{right:27px;top:42px}.orbit-cross-2{bottom:38px;left:45px}
.orbital-coordinate{position:absolute;bottom:10px;right:10px;font-size:9px;letter-spacing:.13em;line-height:1.7;color:rgba(194,249,224,.3);text-align:right}
.tutorial-section{position:relative}
.tutorial-section-heading{display:flex;align-items:center;gap:16px;margin-bottom:17px;font-size:11px;letter-spacing:.15em;color:rgba(229,250,239,.48)}
.tutorial-section-eyebrow{display:flex;align-items:center;gap:12px;color:#d0f7e8}
.section-index{display:inline-flex;width:27px;height:27px;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(116,232,198,.4);color:var(--mint);font-size:10px}
.tutorial-section-divider{height:1px;flex:1;background:linear-gradient(90deg,rgba(116,232,198,.23),rgba(116,232,198,.05))}
/* First-time guidance / same mint-on-forest visual hierarchy as the Aether pages. */
.tutorial-first-timer{display:flex;align-items:center;gap:19px;padding:19px 22px;margin:0 0 24px;border:1px solid rgba(132,250,200,.52);border-radius:19px;background:linear-gradient(110deg,rgba(106,235,182,.18),rgba(45,141,111,.085));box-shadow:inset 3px 0 #74e8c6,0 9px 33px rgba(0,0,0,.08)}
.tutorial-first-timer-icon{width:49px;height:49px;flex:0 0 49px;display:grid;place-items:center;border-radius:14px;color:#07251c;background:#a0f1d2;font-size:27px;box-shadow:0 0 22px rgba(116,232,198,.2)}
.tutorial-first-timer-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:6px;color:rgba(236,253,243,.7);font-size:12px;line-height:1.65}
.tutorial-first-timer-eyebrow{color:#9bf4d0;font-size:10px;letter-spacing:.13em;font-weight:700}
.tutorial-first-timer-copy strong{color:#e8fff3;font-size:clamp(15px,1.5vw,20px);font-weight:650;line-height:1.5}
.tutorial-begin-button{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:20px;min-height:45px;padding:11px 17px;border:0;border-radius:999px;background:#a0f1d2;color:#06241b;font-family:inherit;font-size:11px;letter-spacing:.07em;font-weight:750;transition:transform .2s,background .2s}
.tutorial-begin-button:hover{background:#c6fbe5;transform:translateY(-1px)}.tutorial-begin-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tutorial-mobile-current{display:none}
.tutorial-grid{display:grid;grid-template-columns:minmax(0,1.27fr) minmax(330px,.73fr);gap:22px;align-items:start}
.tutorial-viewer{min-width:0}
.tutorial-screen-frame{padding:12px;background:linear-gradient(150deg,#12352d,#071c18 45%,#081410);border:1px solid rgba(131,246,204,.23);border-radius:24px;box-shadow:0 25px 90px rgba(0,0,0,.2),inset 0 1px 0 rgba(232,255,245,.07)}
.tutorial-screen-top,.tutorial-screen-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;padding:0 11px;font-size:10px;color:rgba(207,251,231,.52);letter-spacing:.14em}
.tutorial-screen-top{justify-content:flex-start}.tutorial-screen-top .screen-fraction{margin-left:auto}.screen-led{width:6px;height:6px;border-radius:50%;background:#74e8c6;box-shadow:0 0 11px #74e8c6}
.tutorial-player{position:relative;width:100%;aspect-ratio:16/9;border-radius:13px;overflow:hidden;background:radial-gradient(circle at 50% 50%,#194938,#071813 60%);border:1px solid rgba(178,255,227,.09)}
.tutorial-player iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:#071411}
.viewer-onair{display:inline-flex;align-items:center;gap:9px}.viewer-onair i{width:5px;height:5px;border-radius:50%;background:var(--mint)}
.tutorial-now-playing{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 5px 14px}
.now-label{display:flex;align-items:center;gap:8px;color:rgba(234,251,242,.48);font-size:10px;letter-spacing:.14em}.now-label i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint)}.now-label>span:last-child{color:var(--mint);margin-left:6px;letter-spacing:.08em}
.tutorial-now-playing h2{margin:8px 0 0;font-size:clamp(21px,2.05vw,30px);font-weight:400;line-height:1.32;letter-spacing:-.035em}
.tutorial-external{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;min-height:48px;white-space:nowrap;border:1px solid rgba(116,232,198,.27);border-radius:999px;color:var(--mint);font-size:10px;font-weight:700;letter-spacing:.08em;transition:background .2s,border-color .2s}
.tutorial-external:hover{background:rgba(116,232,198,.09);border-color:rgba(116,232,198,.5)}.tutorial-external>span:last-child{font-size:18px;font-weight:400}
.tutorial-help{display:flex;gap:12px;padding:8px 5px 12px;margin:0;max-width:720px;color:rgba(218,246,233,.47);font-size:12px;line-height:1.7}.tutorial-help>span:first-child{color:var(--mint);font-size:20px;line-height:1}
.tutorial-chapter-panel{min-width:0;overflow:hidden;border:1px solid rgba(116,232,198,.17);border-radius:24px;background:radial-gradient(circle at 100% 0%,rgba(54,143,107,.09),transparent 55%),linear-gradient(152deg,rgba(11,38,31,.97),rgba(6,25,21,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.tutorial-chapter-heading{display:flex;justify-content:space-between;align-items:end;gap:12px;padding:28px 26px 23px}.chapter-overline{color:var(--mint);font-size:10px;letter-spacing:.14em}.tutorial-chapter-heading h2{font-size:clamp(23px,2.25vw,35px);line-height:1.25;font-weight:400;letter-spacing:-.035em;margin:7px 0 0}.chapter-count{color:var(--mint);font-size:22px;font-weight:400;white-space:nowrap}.chapter-count>span{font-size:11px;color:rgba(225,250,240,.36)}
.tutorial-chapter-list{padding:0 12px 7px}
.chapter-item{width:100%;min-height:71px;display:grid;grid-template-columns:31px minmax(0,1fr) 41px 16px;align-items:center;gap:9px;padding:12px 12px;border:1px solid transparent;border-bottom:1px solid rgba(222,255,244,.075);border-radius:11px;background:transparent;text-align:left;color:rgba(238,254,247,.87);transition:background .2s,border-color .2s,transform .2s}
.chapter-item:hover{background:rgba(107,229,181,.055)}.chapter-item:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}.chapter-item.active{background:linear-gradient(90deg,rgba(116,232,198,.14),rgba(116,232,198,.045));border-color:rgba(116,232,198,.27);box-shadow:inset 3px 0 var(--mint)}
.chapter-number{color:rgba(198,254,224,.36);font-size:11px;letter-spacing:.07em}.chapter-item.active .chapter-number{color:var(--mint)}
.chapter-main{min-width:0;display:flex;flex-direction:column;gap:5px}.chapter-name{display:block;font-size:13px;font-weight:500;line-height:1.43;overflow-wrap:break-word}.chapter-category{display:block;font-size:9px;color:rgba(211,248,229,.39);letter-spacing:.12em}.chapter-time{font-size:12px;letter-spacing:.01em;color:rgba(215,247,232,.64);font-variant-numeric:tabular-nums}.chapter-item.active .chapter-time{color:var(--mint)}.chapter-icon{color:rgba(217,255,237,.4);font-size:15px;text-align:right}.chapter-item.active .chapter-icon{color:var(--mint)}
.chapter-panel-footer{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:21px 27px;border-top:1px solid rgba(121,251,195,.1);color:rgba(216,251,236,.43);font-size:10px;letter-spacing:.1em}.chapter-panel-footer>span:first-child{display:flex;gap:8px;align-items:center}
.tutorial-bottom{display:flex;justify-content:space-between;align-items:center;gap:40px;margin:82px 0 76px;padding:43px 0;border-top:1px solid rgba(116,232,198,.19);border-bottom:1px solid rgba(116,232,198,.13)}.bottom-kicker{font-size:10px;letter-spacing:.15em;color:var(--mint)}.tutorial-bottom h2{margin:13px 0;font-size:clamp(35px,4.4vw,64px);font-weight:400;letter-spacing:-.065em;line-height:1.14}.tutorial-bottom p{max-width:700px;color:rgba(234,251,241,.56);line-height:1.85;font-size:14px;margin:0}.tutorial-more{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:30px;padding:18px 21px;border-radius:100px;background:var(--mint);color:#06100f;font-size:11px;font-weight:700;letter-spacing:.08em;transition:transform .2s}.tutorial-more:hover{transform:translateY(-2px)}.tutorial-more>span:last-child{font-size:20px;font-weight:400}
.tutorial-footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-bottom:38px;font-size:10px;letter-spacing:.1em;color:rgba(230,255,245,.36)}.tutorial-footer a{color:var(--mint)}
html[lang=th] .tutorial-chapter-heading h2{font-size:clamp(22px,2.05vw,31px)}html[lang=th] .chapter-name{font-size:13px;line-height:1.52}html[lang=th] .tutorial-bottom h2{letter-spacing:-.035em}
@media(max-width:1520px){.tutorial-main{padding-left:var(--pad)}.tutorial-grid{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr)}.tutorial-intro-aside{opacity:.68}}
@media(max-width:1040px){.tutorial-main{padding-top:126px}.tutorial-intro{grid-template-columns:minmax(0,1fr) 230px;min-height:280px;margin-bottom:44px}.tutorial-intro-aside{min-height:250px}.orbit-3{width:290px;height:290px}.orbit-2{width:240px;height:240px}.tutorial-grid{grid-template-columns:1fr}.tutorial-chapter-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 6px}.tutorial-chapter-panel{margin-top:7px}}
@media(max-width:640px){.tutorial-main{padding:116px 20px 0}.tutorial-intro{display:block;margin-bottom:52px;min-height:0}.tutorial-intro h1{font-size:clamp(48px,12vw,72px)}html[lang=th] .tutorial-intro h1{font-size:clamp(40px,10vw,56px)}.tutorial-intro-lead{font-size:14px}.tutorial-intro-aside{display:none}.tutorial-metrics{gap:11px}.tutorial-metrics>span{padding-right:11px}.tutorial-section-heading{gap:10px}.tutorial-duration{display:none}.tutorial-grid{gap:14px}.tutorial-screen-frame{padding:8px;border-radius:16px}.tutorial-player{border-radius:10px}.tutorial-screen-top,.tutorial-screen-foot{font-size:9px;min-height:23px}.tutorial-now-playing{display:block;padding-top:21px}.tutorial-now-playing h2{font-size:25px}.tutorial-external{margin-top:18px}.tutorial-help{font-size:12px;padding-top:20px}.tutorial-chapter-panel{border-radius:18px}.tutorial-chapter-list{display:block}.tutorial-chapter-heading{padding:26px 20px 20px}.chapter-item{min-height:66px;padding:10px 9px;grid-template-columns:27px minmax(0,1fr) 43px 15px}.chapter-number{font-size:10px}.chapter-name{font-size:12.5px}.tutorial-bottom{display:block;margin:54px 0;padding:36px 0}.tutorial-bottom h2{font-size:38px}.tutorial-more{display:inline-flex;margin-top:25px;padding:16px 20px}.tutorial-footer{gap:13px;line-height:1.7}}
@media(max-width:400px){.tutorial-main{padding-left:16px;padding-right:16px}.tutorial-metrics{font-size:9px}.tutorial-screen-top,.tutorial-screen-foot{font-size:8px}.chapter-item{gap:5px;grid-template-columns:24px minmax(0,1fr) 38px 12px}.chapter-time{font-size:11px}}

/* Mobile player stays visible while selecting chapters; text/branding scroll away. */
@media(max-width:640px){
  .tutorial-first-timer{gap:13px;padding:15px;margin:0 0 19px;flex-wrap:wrap;border-radius:15px}
  .tutorial-first-timer-icon{width:39px;height:39px;flex-basis:39px;font-size:23px;border-radius:11px}
  .tutorial-first-timer-copy{flex-basis:calc(100% - 56px);font-size:12px;gap:4px}
  .tutorial-first-timer-copy strong{font-size:15px;line-height:1.43}
  .tutorial-begin-button{margin:4px 0 0 52px;min-height:38px;padding:9px 14px;font-size:10px}
  .tutorial-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .tutorial-viewer{display:contents}
  .tutorial-screen-frame{order:0;position:sticky;top:0;z-index:145;align-self:stretch;width:calc(100% + 40px);margin:0 -20px;flex-shrink:0;padding:0;border-radius:0;border:0;background:#061410;box-shadow:0 10px 30px rgba(0,0,0,.42)}
  .tutorial-screen-top,.tutorial-screen-foot{display:none}
  .tutorial-player{border-radius:0;border:0}
  .tutorial-mobile-current{display:flex;align-items:center;gap:10px;min-height:34px;padding:7px 16px;border-bottom:1px solid rgba(132,255,201,.22);background:#09221b;color:rgba(234,251,243,.8);font-size:11px}
  #mobileChapterTime{color:#97f3cd;font-size:10px;letter-spacing:.05em;white-space:nowrap;font-variant-numeric:tabular-nums}
  .tutorial-mobile-current-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
  .tutorial-mobile-live{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#74e8c6;box-shadow:0 0 9px rgba(116,232,198,.55)}
  .tutorial-chapter-panel{order:1;margin:18px 0 0}
  .tutorial-now-playing{order:2;padding:23px 5px 8px}
  .tutorial-help{order:3;padding:12px 5px 5px}
  .tutorial-page.tutorial-player-pinned .site-brand,.tutorial-page.tutorial-player-pinned .site-topbar,.tutorial-page.tutorial-player-pinned .language-switcher{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-140px)!important}
  .tutorial-page .site-brand,.tutorial-page .site-topbar,.tutorial-page .language-switcher{transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
  body.menu-open .tutorial-screen-frame{z-index:0}
}
@media(max-width:400px){
  .tutorial-screen-frame{width:calc(100% + 32px);margin-left:-16px;margin-right:-16px}
}

@media(prefers-reduced-motion:reduce){.tutorial-page *, .tutorial-page *:before,.tutorial-page *:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}