.tut-root main{max-width:1080px;margin:0 auto;padding:80px 24px 110px}.tut-root .tut-head{margin-bottom:26px}.tut-root .tut-title-lead{letter-spacing:-.025em;color:var(--text-primary);max-width:none;margin:0 0 12px;font-size:clamp(30px,4vw,42px);font-weight:700;line-height:1.08}.tut-root .tut-intro{color:var(--text-secondary);margin:0;font-size:17px;line-height:1.55}.tut-root .tut-controls{flex-direction:column;gap:16px;margin-bottom:34px;display:flex}.tut-root .tut-search{align-items:center;max-width:380px;display:flex;position:relative}.tut-root .tut-filters{flex-wrap:wrap;gap:8px;display:flex}.tut-root .tut-pill{border:1px solid var(--border-default);background:var(--surface);height:34px;color:var(--text-secondary);cursor:pointer;transition:background-color .16s var(--lp-ease-out), border-color .16s var(--lp-ease-out), color .16s var(--lp-ease-out), transform .12s var(--lp-ease-out);border-radius:999px;padding:0 15px;font-size:13px;font-weight:600}@media (hover:hover) and (pointer:fine){.tut-root .tut-pill:hover{border-color:var(--border-strong);color:var(--text-primary)}}.tut-root .tut-pill:active{transform:scale(.97)}.tut-root .tut-pill[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.tut-root .tut-pill:focus-visible{outline:2px solid var(--lp-pop);outline-offset:2px}.tut-root .tut-search-icon{color:var(--text-tertiary);pointer-events:none;position:absolute;left:13px}.tut-root .tut-search-input{border:1px solid var(--border-default);background:var(--surface);width:100%;height:42px;color:var(--text-primary);transition:border-color .16s var(--lp-ease-out), box-shadow .16s var(--lp-ease-out);border-radius:10px;padding:0 14px 0 36px;font-size:14px}.tut-root .tut-search-input::placeholder{color:var(--text-tertiary)}.tut-root .tut-search-input:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px color-mix(in srgb, var(--lp-pop) 12%, transparent);outline:none}.tut-root .tut-list{flex-direction:column;gap:24px;margin:0;padding:0;list-style:none;display:flex}.tut-root .tut-card{border:1px solid var(--border-default);background:var(--surface);transition:border-color .18s var(--lp-ease-out), transform .18s var(--lp-ease-out);opacity:0;animation:tut-in .48s var(--lp-ease-out) forwards;animation-delay:calc(var(--i,0) * 60ms);border-radius:18px;grid-template-columns:440px 1fr;display:grid;overflow:hidden;transform:translateY(12px)}@media (hover:hover) and (pointer:fine){.tut-root .tut-card:hover{border-color:var(--border-strong)}}.tut-root .tut-video{aspect-ratio:16/9;background:var(--surface);border-right:1px solid var(--border-default);position:relative}.tut-root .tut-iframe{border:0;width:100%;height:100%;display:block}.tut-root .tut-thumb{cursor:pointer;width:100%;height:100%;transition:filter .16s var(--lp-ease-out);background-position:50%;background-size:cover;border:0;place-items:center;display:grid;position:absolute;inset:0}.tut-root .tut-thumb[data-placeholder=true]{cursor:default;background:radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--lp-pop) 9%, var(--surface)), var(--surface) 64%)}@media (hover:hover) and (pointer:fine){.tut-root .tut-thumb:not([data-placeholder=true]):hover .tut-play{background:var(--lp-pop);transform:scale(1.08)}}.tut-root .tut-thumb:not([data-placeholder=true]):active .tut-play{transform:scale(.96)}.tut-root .tut-thumb:focus-visible{outline:2px solid var(--lp-pop);outline-offset:-3px}.tut-root .tut-play{background:color-mix(in srgb, var(--lp-pop) 78%, white);color:#fff;width:68px;height:48px;transition:transform .16s var(--lp-ease-out), background-color .16s var(--lp-ease-out);border-radius:14px;place-items:center;padding-left:3px;display:grid}.tut-root .tut-play svg{width:30px;height:30px}.tut-root .tut-soon{text-align:center;letter-spacing:.01em;color:var(--text-tertiary);font-size:12px;font-weight:600;position:absolute;bottom:16px;left:0;right:0}@keyframes tut-spin{to{transform:rotate(360deg)}}.tut-root .tut-body{flex-direction:column;justify-content:flex-start;gap:12px;padding:40px;display:flex}.tut-root .tut-cat{letter-spacing:.07em;text-transform:uppercase;color:var(--text-tertiary);font-size:12px;font-weight:600}.tut-root .tut-title{letter-spacing:-.022em;color:var(--text-primary);max-width:none;transition:color .16s var(--lp-ease-out);margin:0;font-size:28px;font-weight:680;line-height:1.18}.tut-root .tut-title-link{color:inherit;text-decoration:none}.tut-root .tut-title-link:focus-visible{outline:2px solid var(--lp-pop);outline-offset:3px;border-radius:4px}@media (hover:hover) and (pointer:fine){.tut-root .tut-card:hover .tut-title,.tut-root .tut-title-link:hover{color:var(--lp-pop)}}.tut-root .tut-desc{color:var(--text-secondary);max-width:56ch;margin:0;font-size:16.5px;line-height:1.6}.tut-root .tut-viewall-row{justify-content:center;margin-top:28px;display:flex}.tut-root .tut-viewall{border:1px solid var(--border-default);background:var(--surface);height:40px;color:var(--text-secondary);cursor:pointer;transition:border-color .16s var(--lp-ease-out), color .16s var(--lp-ease-out), transform .12s var(--lp-ease-out);border-radius:999px;padding:0 20px;font-size:13.5px;font-weight:600}@media (hover:hover) and (pointer:fine){.tut-root .tut-viewall:hover{border-color:var(--border-strong);color:var(--text-primary)}}.tut-root .tut-viewall:active{transform:scale(.97)}.tut-root .tut-viewall:focus-visible{outline:2px solid var(--lp-pop);outline-offset:2px}.tut-root .tut-empty{border:1px dashed var(--border-strong);text-align:center;color:var(--text-secondary);border-radius:12px;padding:40px 24px;font-size:14px}@keyframes tut-in{to{opacity:1;transform:translateY(0)}}.tut-root .tut-lightbox{z-index:100;animation:tut-fade .16s var(--lp-ease-out);background:#0f172ab8;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.tut-root .tut-lightbox-inner{aspect-ratio:16/9;width:min(960px,100%);animation:tut-zoom .22s var(--lp-ease-out);background:#000;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 24px 70px #00000073}.tut-root .tut-lightbox-inner iframe{border:0;width:100%;height:100%;display:block}.tut-root .tut-lightbox-close{color:#fff;cursor:pointer;width:40px;height:40px;transition:background-color .16s var(--lp-ease-out), transform .12s var(--lp-ease-out);background:#ffffff24;border:0;border-radius:999px;place-items:center;display:grid;position:absolute;top:18px;right:22px}@media (hover:hover) and (pointer:fine){.tut-root .tut-lightbox-close:hover{background:#ffffff3d}}.tut-root .tut-lightbox-close:active{transform:scale(.95)}@keyframes tut-fade{0%{opacity:0}}@keyframes tut-zoom{0%{opacity:0;transform:scale(.96)}}@media (max-width:720px){.tut-root main{padding:48px 20px 72px}.tut-root .tut-card{grid-template-columns:1fr}.tut-root .tut-video{border-right:none;border-bottom:1px solid var(--border-default)}.tut-root .tut-body{padding:20px 20px 22px}}.tut-root .tut-detail{max-width:760px;margin:0 auto}.tut-root .tut-back{border:1px solid var(--border-default);background:var(--surface);height:34px;color:var(--text-secondary);transition:border-color .16s var(--lp-ease-out), color .16s var(--lp-ease-out), background-color .16s var(--lp-ease-out), transform .12s var(--lp-ease-out);border-radius:999px;align-items:center;gap:5px;margin-bottom:28px;padding:0 14px 0 10px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}@media (hover:hover) and (pointer:fine){.tut-root .tut-back:hover{border-color:var(--border-strong);color:var(--text-primary);background:#f8fafc}}.tut-root .tut-back:active{transform:scale(.98)}.tut-root .tut-back:focus-visible{outline:2px solid var(--lp-pop);outline-offset:2px}.tut-root .tut-detail-head{margin-bottom:22px}.tut-root .tut-detail-cat{background:var(--ink-soft);height:26px;color:var(--text-secondary);border-radius:999px;align-items:center;margin-bottom:16px;padding:0 12px;font-size:12.5px;font-weight:600;display:inline-flex}.tut-root .tut-detail-title{letter-spacing:-.025em;color:var(--text-primary);max-width:none;margin:0 0 12px;font-size:clamp(28px,4vw,38px);font-weight:700;line-height:1.12}.tut-root .tut-detail-desc{color:var(--text-secondary);margin:0;font-size:18px;line-height:1.55}.tut-root .tut-detail-video{aspect-ratio:16/9;border:1px solid var(--border-default);background:#000;border-radius:16px;margin:28px 0 36px;position:relative;overflow:hidden}.tut-root .tut-detail-iframe{border:0;width:100%;height:100%;display:block}.tut-root .tut-detail-placeholder{background:radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--lp-pop) 9%, var(--surface)), var(--surface) 64%);place-items:center;width:100%;height:100%;display:grid}.tut-root .tut-detail-soon{color:var(--text-tertiary);font-size:13px;font-weight:600}.tut-root .tut-prose{color:var(--text-primary);font-size:17px;line-height:1.7}.tut-root .tut-prose p{color:var(--text-primary);margin:0 0 20px;font-size:17px;line-height:1.7}.tut-root .tut-prose h2{letter-spacing:-.015em;max-width:none;margin:34px 0 12px;font-size:22px;font-weight:650}.tut-root .tut-prose ol{counter-reset:step;flex-direction:column;gap:14px;margin:0 0 22px;padding:0;list-style:none;display:flex}.tut-root .tut-prose ol>li{counter-increment:step;border:1px solid var(--border-default);background:var(--surface);border-radius:12px;padding:14px 18px 14px 56px;position:relative}.tut-root .tut-prose ol>li:before{content:counter(step);background:color-mix(in srgb, var(--lp-pop) 12%, var(--surface));width:26px;height:26px;color:var(--lp-pop);border-radius:999px;place-items:center;font-size:13px;font-weight:700;display:grid;position:absolute;top:13px;left:16px}.tut-root .tut-prose ol>li p{margin:0}.tut-root .tut-prose ul{margin:0 0 22px;padding-left:22px}.tut-root .tut-prose a{color:var(--lp-pop);text-underline-offset:2px}@media (prefers-reduced-motion:reduce){.tut-root .tut-card{opacity:1;animation:none;transform:none}.tut-root .tut-thumb:hover .tut-play{transform:none}.tut-root .tut-lightbox-inner{animation:none}}