.tutorial-page{--bg:#080808;--surface:#141414;--text:#f3f3ef;--muted:#a5a5a4;--accent:#d3d3ce;background:var(--bg)}.tutorial-page .site-header{background:#080808ed;border-bottom-color:#ffffff12}.tutorial-page .navigation{max-width:1520px}.tutorial-page .button{box-shadow:none;white-space:nowrap;border-radius:10px;padding-inline:23px;font-weight:550}.tutorial-page .sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tutorial-hero{isolation:isolate;border-bottom:1px solid #282828;position:relative;overflow:clip}.tutorial-hero-inner{grid-template-columns:1fr 1fr;align-items:center;gap:30px;width:min(1300px,100% - 80px);min-height:660px;margin:auto;display:grid}.tutorial-copy{z-index:3;padding:70px 0 65px;position:relative}.tutorial-eyebrow{letter-spacing:.08em;color:#a6aaa6;align-items:center;gap:10px;font-size:12px;display:flex}.tutorial-eyebrow>span{background:#b4d4b9;border-radius:50%;width:5px;height:5px}.tutorial-copy h1{letter-spacing:-.06em;color:#f5f5f1;margin:27px 0 0;font-size:clamp(50px,5.6vw,80px);font-weight:540;line-height:1.27}.tutorial-copy h1>span{color:#a4a8a1}.tutorial-lead{color:#aaa;margin-top:27px;font-size:16px;line-height:1.95}.tutorial-actions{flex-wrap:wrap;align-items:center;gap:24px;margin-top:30px;display:flex}.tutorial-stats{color:#999d97;flex-wrap:wrap;gap:23px;margin-top:45px;font-size:12px;display:flex}.tutorial-stats strong{color:#dadcd5;font-variant-numeric:tabular-nums;margin-right:4px;font-size:18px;font-weight:500}.tutorial-stage{perspective:1400px;min-width:0;height:540px;position:relative}.tutorial-orbit{pointer-events:none;background:radial-gradient(#353b4030,#0000 70%);border-radius:50%;position:absolute;inset:10% -15%}.tutorial-preview{background:#131513;border:1px solid #464940;border-radius:13px;width:83%;animation:9s cubic-bezier(.45,0,.55,1) infinite paused tutorial-float;display:block;position:absolute;overflow:hidden;box-shadow:0 24px 70px #0009}.tutorial-preview img{aspect-ratio:1.7;object-fit:contain;background:#090909;width:100%}.preview-0{z-index:3;top:127px;left:1%;rotate:-3deg}.preview-1{z-index:1;width:69%;animation-delay:-3s;top:16px;left:22%;rotate:6deg}.preview-2{z-index:4;width:60%;animation-delay:-6s;top:341px;left:32%;rotate:5deg}.preview-chrome{color:#acaea8;border-bottom:1px solid #292c29;justify-content:space-between;align-items:center;gap:10px;padding:9px 13px;font-size:10px;display:flex}.preview-dots{color:#61665d;letter-spacing:2px;font-size:7px}.preview-caption{color:#d7d9d2;background:#1b1e1a;border-top:1px solid #2c3029;justify-content:space-between;align-items:center;padding:9px 13px;font-size:11px;display:flex}.preview-play{color:#d7e4c5;border:1px solid #636b59;border-radius:50%;place-items:center;width:26px;height:26px;font-size:9px;display:grid}.tutorial-motion-running .tutorial-preview{animation-play-state:running}@keyframes tutorial-float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.tutorial-hero-foot{letter-spacing:.03em;color:#93988f;justify-content:space-between;align-items:center;gap:20px;width:min(1360px,100% - 80px);min-height:72px;margin:0 auto;font-size:11px;display:flex}#tutorial-motion{white-space:nowrap;color:#d5d8cf;background:#171917;border:1px solid #343832;border-radius:8px;min-height:44px;padding:10px 14px;font-size:11px}#tutorial-motion:disabled{color:#9b9f96;cursor:default}.tutorial-library{width:min(1240px,100% - 80px);margin:0 auto;padding:90px 0;scroll-margin-top:104px}.library-heading{justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:40px;display:flex}.library-heading h2{letter-spacing:-.035em;margin-top:14px;font-size:clamp(26px,3vw,36px);font-weight:500;line-height:1.4}.tutorial-search{color:#aaa;background:#151615;border:1px solid #363933;border-radius:10px;align-items:center;gap:11px;width:315px;min-width:220px;min-height:48px;padding:0 15px;display:flex}.tutorial-search:focus-within{outline-offset:3px;outline:2px solid #a7b698}.tutorial-search>span[aria-hidden]{font-size:28px;line-height:1}.tutorial-search input{width:100%;min-width:0;font:inherit;color:#e1e5da;background:0 0;border:0;outline:0;padding:13px 0;font-size:13px}.tutorial-search input::placeholder{color:#959b90}.tutorial-browser{grid-template-columns:180px minmax(0,1fr);align-items:start;gap:42px;display:grid}.tutorial-sidebar{position:sticky;top:100px}.tutorial-filters{flex-direction:column;gap:7px;display:flex}.tutorial-filters button{color:#a8ada2;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:space-between;align-items:center;gap:20px;min-height:47px;padding:11px 14px;font-size:13px;display:flex}.tutorial-filters button>span:last-child{font-variant-numeric:tabular-nums;color:#969f8b;font-size:11px}.tutorial-filters button[aria-pressed=true]{color:#e1e8d5;background:#20251e;border-color:#414c36}.tutorial-filters button[aria-pressed=true]>span:last-child{color:#c9d6b7}.tutorial-sidebar-note{color:#8f9589;margin:24px 14px 0;font-size:11px;line-height:1.9}.tutorial-results-top{color:#b9c1af;border-bottom:1px solid #34382f;justify-content:space-between;gap:20px;padding:13px 0 19px;font-size:12px;display:flex}.tutorial-results-top>span:last-child{color:#888f82;font-size:11px}.tutorial-list{margin:0;padding:0;list-style:none}.tutorial-list>li{border-bottom:1px solid #282d25;scroll-margin-top:100px}.tutorial-row{border-radius:8px;grid-template-columns:210px minmax(0,1fr) auto;align-items:center;gap:25px;padding:23px 0;display:grid}.tutorial-thumbnail{aspect-ratio:1.7;background:#121512;border:1px solid #343b2f;border-radius:8px;position:relative;overflow:hidden}.tutorial-thumbnail img{object-fit:contain;width:100%;height:100%;transition:transform .22s var(--ease)}.tutorial-time{color:#eeeee7;font-variant-numeric:tabular-nums;background:#080a08db;border:1px solid #ffffff18;border-radius:4px;padding:2px 5px;font-size:10px;line-height:1.4;position:absolute;bottom:6px;right:7px}.thumbnail-play{color:#eff8e3;opacity:0;width:34px;height:34px;transition:opacity .16s var(--ease);background:#111810d9;border:1px solid #dfe8d87a;border-radius:50%;place-items:center;font-size:10px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tutorial-row-copy{min-width:0}.tutorial-meta{color:#8c9682;flex-wrap:wrap;gap:13px;margin-bottom:8px;font-size:11px;display:flex}.tutorial-meta>span:first-child{color:#b5c1a6;font-variant-numeric:tabular-nums}.tutorial-row h3{letter-spacing:-.02em;color:#e0e5d9;font-size:18px;font-weight:500;line-height:1.55}.tutorial-summary{color:#929a89;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:9px;font-size:12px;line-height:1.75;display:-webkit-box;overflow:hidden}.tutorial-row-action{color:#dce8ca;white-space:nowrap;min-height:40px;transition:background .18s var(--ease),transform .16s var(--ease);border:1px solid #3c4434;border-radius:8px;justify-content:center;align-items:center;gap:13px;padding:9px 13px;font-size:12px;display:flex}.tutorial-row:focus-visible .thumbnail-play{opacity:1}@media (hover:hover) and (pointer:fine){.tutorial-row:hover .tutorial-thumbnail img{transform:scale(1.025)}.tutorial-row:hover .thumbnail-play{opacity:1}.tutorial-row:hover .tutorial-row-action{background:#282f21}.tutorial-filters button:hover{background:#1b2018}.tutorial-preview:hover{border-color:#a0ae8e}}.tutorial-row:active .tutorial-row-action{transform:scale(.97)}.tutorial-row.is-revealing{animation:tutorial-reveal .26s var(--ease) both}@keyframes tutorial-reveal{0%{opacity:.5;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}#tutorial-empty{text-align:center;border-bottom:1px solid #34382f;padding:70px 24px}#tutorial-empty h3{font-size:20px;font-weight:500}#tutorial-empty p{color:#a1a997;margin-top:12px;font-size:13px}#tutorial-reset{background:#293122;border:1px solid #4c5c3f;border-radius:8px;min-height:44px;margin-top:22px;padding:10px 16px;font-size:13px}.tutorial-next{border-top:1px solid #30362b;justify-content:space-between;align-items:center;gap:35px;width:min(1240px,100% - 80px);margin:auto;padding:54px 0 80px;display:flex}.tutorial-next h2{letter-spacing:-.03em;margin-top:17px;font-size:clamp(25px,3vw,36px);font-weight:500;line-height:1.4}.tutorial-next p:last-child{color:#a2a999;margin-top:17px;font-size:14px}#tutorial-dialog{color:#eef1e9;background:#11140f;border:1px solid #535c49;border-radius:15px;width:min(1320px,100vw - 64px);max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;overflow:auto;box-shadow:0 40px 150px #000b}#tutorial-dialog::backdrop{backdrop-filter:blur(8px);background:#000c}body.tutorial-player-open{overflow:hidden}.tutorial-player-header{border-bottom:1px solid #333b2b;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;display:flex}.tutorial-player-header p{color:#9faa92;margin-bottom:5px;font-size:11px}.tutorial-player-header h2{font-size:20px;font-weight:500;line-height:1.5}#tutorial-close{white-space:nowrap;background:#242b1e;border:1px solid #3d4930;border-radius:8px;align-items:center;gap:15px;min-height:44px;padding:8px 13px;font-size:12px;display:flex}#tutorial-close>span{font-size:22px;line-height:1}.tutorial-player-layout{grid-template-columns:minmax(0,1fr) 290px;align-items:stretch;display:grid}.tutorial-video-column{background:#080a07;min-width:0}.tutorial-video-frame{aspect-ratio:16/10;background:#000;align-items:center;display:grid;overflow:hidden}#tutorial-video{object-fit:contain;width:100%;height:100%;max-height:calc(100dvh - 250px);display:block}.tutorial-playback-status{color:#b8c5a7;border-top:1px solid #2c3426;align-items:center;gap:16px;min-height:43px;padding:9px 18px;font-size:12px;display:flex}#tutorial-retry{white-space:nowrap;background:#283620;border:1px solid #5f7450;border-radius:7px;min-height:36px;padding:7px 12px;font-size:12px}.tutorial-player-bottom{justify-content:space-between;align-items:center;gap:20px;padding:5px 18px 18px;display:flex}.tutorial-player-bottom p>span{color:#8f9b81;margin-bottom:5px;font-size:10px;display:block}.tutorial-player-bottom strong{color:#d1dcc5;font-size:13px;font-weight:450;line-height:1.5;display:block}#tutorial-next-video{white-space:nowrap;background:0 0;border:1px solid #45543a;border-radius:7px;min-height:40px;padding:9px 13px;font-size:12px}#tutorial-next-video:disabled{color:#7e8972;cursor:default}.tutorial-chapter-panel{border-left:1px solid #333b2b;flex-direction:column;min-width:0;max-height:calc(100dvh - 160px);display:flex}.tutorial-chapter-heading{border-bottom:1px solid #2f3827;justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.tutorial-chapter-heading h3{font-size:13px;font-weight:500}.tutorial-chapter-heading>span{color:#97a587;font-size:11px}#tutorial-chapters{overscroll-behavior:contain;margin:0;padding:8px;list-style:none;overflow:auto}#tutorial-chapters button{text-align:left;color:#b0bda2;background:0 0;border:1px solid #0000;border-radius:7px;align-items:baseline;gap:12px;width:100%;min-height:48px;padding:12px 10px;font-size:12px;line-height:1.65;display:flex}#tutorial-chapters button>span:first-child{color:#8b9e78;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11px}#tutorial-chapters button[aria-current=true]{color:#e4f0d7;background:#27331f;border-color:#455e34}#tutorial-chapters button[aria-current=true]>span:first-child{color:#b7d398}.keyboard-input .tutorial-row.is-revealing{animation:none}.keyboard-input .tutorial-row:active .tutorial-row-action{transform:none}@media (width<=1100px){.tutorial-hero-inner{gap:10px}.tutorial-stage{height:480px}.preview-0{width:92%;top:126px}.preview-1{width:78%;top:38px;left:18%}.preview-2{width:70%;top:309px;left:24%}.tutorial-row{grid-template-columns:175px minmax(0,1fr) auto;gap:18px}.tutorial-browser{grid-template-columns:156px minmax(0,1fr);gap:25px}.tutorial-player-layout{grid-template-columns:minmax(0,1fr) 245px}}@media (width<=800px){.tutorial-hero-inner{grid-template-columns:1fr;gap:0;width:calc(100% - 48px);min-height:0}.tutorial-copy{padding:55px 0 15px}.tutorial-copy h1{font-size:55px}.tutorial-stage{width:100%;max-width:530px;height:520px;margin:0 auto}.preview-0{width:82%;top:106px;left:0}.preview-1{width:63%;top:15px;left:32%}.preview-2{width:57%;top:275px;left:40%}.tutorial-hero-foot{width:calc(100% - 48px)}.tutorial-stats{margin-top:30px}.tutorial-library{width:calc(100% - 48px);padding:58px 0}.library-heading{flex-direction:column;align-items:stretch;gap:23px;margin-bottom:22px}.tutorial-search{width:100%;min-width:0}.tutorial-browser{grid-template-columns:1fr;gap:19px}.tutorial-sidebar{min-width:0;position:static}.tutorial-filters{flex-direction:row;gap:7px;padding:3px 2px 10px;overflow:auto}.tutorial-filters button{flex-shrink:0;gap:12px;padding:9px 12px}.tutorial-sidebar-note{display:none}.tutorial-row{grid-template-columns:155px minmax(0,1fr);gap:18px}.tutorial-row-action{display:none}.tutorial-row h3{font-size:17px}.tutorial-meta{gap:10px;font-size:10px}.tutorial-next{flex-direction:column;align-items:flex-start;width:calc(100% - 48px);padding:40px 0 56px}#tutorial-dialog{border-radius:12px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.tutorial-player-layout{grid-template-columns:1fr}.tutorial-player-header{gap:14px;padding:14px 16px}.tutorial-player-header h2{font-size:17px}.tutorial-video-frame{aspect-ratio:16/10}#tutorial-video{max-height:none}.tutorial-chapter-panel{border-top:1px solid #333b2b;border-left:0;max-height:300px}}@media (width<=480px){.tutorial-hero-inner,.tutorial-hero-foot,.tutorial-library,.tutorial-next{width:calc(100% - 36px)}.tutorial-copy h1{font-size:48px}.tutorial-lead{font-size:14px}.tutorial-actions{gap:12px}.tutorial-actions .button{padding:11px 18px;font-size:13px}.tutorial-actions .text-action{gap:8px;font-size:12px}.tutorial-stats{gap:18px;font-size:10px}.tutorial-stats strong{font-size:16px}.tutorial-stage{height:410px}.preview-0{width:85%;top:93px}.preview-1{width:70%;top:20px;left:28%}.preview-2{width:58%;top:222px;left:40%}.preview-chrome{padding:6px 9px;font-size:8px}.preview-caption{padding:6px 9px;font-size:9px}.preview-play{width:21px;height:21px;font-size:8px}.tutorial-hero-foot{gap:10px;min-height:75px;font-size:9px}#tutorial-motion{padding:8px 10px;font-size:10px}.library-heading h2{font-size:25px}.tutorial-results-top>span:last-child{display:none}.tutorial-row{grid-template-columns:106px minmax(0,1fr);gap:13px;padding:20px 0}.tutorial-row h3{font-size:14px}.tutorial-summary{-webkit-line-clamp:1;margin-top:5px;font-size:11px}.tutorial-meta{gap:7px;margin-bottom:5px;font-size:9px}.tutorial-meta>span:first-child{display:none}.tutorial-time{font-size:9px;bottom:4px;right:4px}.tutorial-player-header h2{font-size:15px}#tutorial-close{gap:8px;padding:7px 10px}.tutorial-player-bottom{gap:10px}.tutorial-player-bottom strong{font-size:12px}}@media (prefers-reduced-motion:reduce){.tutorial-preview,.tutorial-row.is-revealing{animation:none}.tutorial-page{scroll-behavior:auto}.tutorial-thumbnail img,.tutorial-row-action{transition:none}.tutorial-row:hover .tutorial-thumbnail img,.tutorial-row:active .tutorial-row-action{transform:none}}