.frontend-tutorial-page,.frontend-tutorial-detail{background:linear-gradient(#fbf7f8 0%,#fff 100%);width:100%;overflow-x:hidden}.tutorial-page-hero,.tutorial-detail-hero{color:#fff;background:radial-gradient(circle at 84% 20%,#ffffff24,#0000 27%),radial-gradient(circle at 10% 90%,#e58eab2e,#0000 32%),linear-gradient(120deg,#4a1424 0%,#681c35 48%,#8b294d 100%);padding:76px 0 82px;position:relative;overflow:hidden}.tutorial-page-hero:after,.tutorial-detail-hero:after{content:"";pointer-events:none;border:1px solid #ffffff1c;border-radius:50%;width:380px;height:380px;position:absolute;bottom:-260px;right:-110px}.tutorial-page-hero .frontend-container,.tutorial-detail-hero .frontend-container{z-index:1;position:relative}.tutorial-page-eyebrow{color:#f6c8d7;letter-spacing:.14em;background:#ffffff12;border:1px solid #ffcddc42;border-radius:999px;align-items:center;padding:7px 13px;font-size:10px;font-weight:900;display:inline-flex}.tutorial-page-hero h1,.tutorial-detail-hero h1{color:#fff;letter-spacing:-.035em;max-width:930px;margin:18px 0 0;font-size:clamp(38px,5vw,62px);font-weight:850;line-height:1.08}.tutorial-detail-date{color:#ffe7efcc;align-items:center;gap:8px;margin-top:19px;font-size:11px;font-weight:700;display:flex}.tutorial-detail-date svg{width:16px;height:16px}.tutorial-page-content{padding:64px 0 84px}.tutorial-page-heading{margin-bottom:25px}.tutorial-page-heading>span{color:#9d3d61;letter-spacing:.14em;font-size:9px;font-weight:900}.tutorial-page-heading h2{color:#482735;letter-spacing:-.025em;margin:5px 0 0;font-size:clamp(28px,3vw,38px);font-weight:850}.tutorial-list{gap:18px;display:grid}.tutorial-card{background:#fff;border:1px solid #eadde2;border-radius:20px;grid-template-columns:270px minmax(0,1fr);transition:transform .22s,border-color .22s,box-shadow .22s;display:grid;overflow:hidden;box-shadow:0 9px 27px #5b20370e}.tutorial-card:hover{border-color:#ddbeca;transform:translateY(-2px);box-shadow:0 16px 38px #5b20371a}.tutorial-card-thumbnail{background:#eee3e7;min-height:210px;position:relative;overflow:hidden}.tutorial-card-thumbnail img{object-fit:cover;width:100%;height:100%;transition:transform .32s;display:block;position:absolute;inset:0}.tutorial-card:hover .tutorial-card-thumbnail img{transform:scale(1.04)}.tutorial-video-indicator{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.08em;background:#5b1834e6;border:1px solid #ffffff38;border-radius:999px;align-items:center;gap:6px;padding:7px 10px;font-size:8px;font-weight:900;display:inline-flex;position:absolute;bottom:14px;left:14px}.tutorial-video-indicator svg{fill:currentColor;width:12px;height:12px}.tutorial-card-content{flex-direction:column;padding:27px 30px;display:flex}.tutorial-card-date{color:#9d858e;align-items:center;gap:7px;margin-bottom:10px;font-size:9px;font-weight:700;display:flex}.tutorial-card-date svg{color:#a34266;width:14px;height:14px}.tutorial-card-content h2{margin:0;font-size:20px;font-weight:850;line-height:1.38}.tutorial-card-content h2 a{color:#482735;text-decoration:none;transition:color .18s}.tutorial-card:hover .tutorial-card-content h2 a{color:#8b294d}.tutorial-card-content p{color:#706268;margin:11px 0 0;font-size:13px;line-height:1.75}.tutorial-card-more{color:#8b294d;letter-spacing:.07em;align-self:flex-start;align-items:center;gap:7px;margin-top:auto;padding-top:18px;font-size:9px;font-weight:900;text-decoration:none;display:inline-flex}.tutorial-card-more svg{width:15px;height:15px;transition:transform .18s}.tutorial-card-more:hover svg{transform:translate(3px)}.tutorial-pagination{justify-content:center;align-items:center;gap:7px;margin-top:34px;display:flex}.tutorial-page-button,.tutorial-page-number{color:#74505e;background:#fff;border:1px solid #e5d6dc;border-radius:10px;justify-content:center;align-items:center;min-width:39px;height:39px;font-size:11px;font-weight:850;text-decoration:none;display:inline-flex}.tutorial-page-number.active{color:#fff;background:linear-gradient(145deg,#8b294d,#681c35);border-color:#7f2948}.tutorial-page-button:hover,.tutorial-page-number:not(.active):hover{color:#7f2948;background:#fff4f8;border-color:#c8879e}.tutorial-page-button svg{width:16px;height:16px}.tutorial-detail-content{padding:54px 0 88px}.tutorial-detail-layout{grid-template-columns:minmax(0,1fr) 310px;align-items:start;gap:28px;display:grid}.tutorial-detail-article{width:100%;min-width:0}.tutorial-breadcrumb{color:#88747c;background:#fffdfd;border:1px solid #e7d9de;border-radius:12px;flex-wrap:nowrap;align-items:center;gap:8px;min-height:46px;margin-bottom:17px;padding:0 15px;font-size:8px;font-weight:850;display:flex;overflow:hidden}.tutorial-breadcrumb a{color:#8b294d;flex:none;text-decoration:none}.tutorial-breadcrumb svg{color:#c6b1b9;flex:none;width:12px;height:12px}.tutorial-breadcrumb span{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.tutorial-detail-thumbnail{background:#eee4e8;border:1px solid #e7d7dd;border-radius:21px;margin:0 0 20px;overflow:hidden;box-shadow:0 14px 36px #5b203712}.tutorial-detail-thumbnail img{object-fit:cover;width:100%;height:auto;max-height:620px;display:block}.tutorial-video-section{background:#fff;border:1px solid #e6d4db;border-radius:20px;margin-bottom:20px;overflow:hidden;box-shadow:0 12px 34px #5a1e3611}.tutorial-video-heading{background:linear-gradient(105deg,#f9e5ec 0%,#fff 100%);border-bottom:1px solid #eadde2;align-items:center;gap:12px;padding:16px 19px;display:flex}.tutorial-video-heading>svg{color:#9d3d61;width:26px;height:26px}.tutorial-video-heading>div{min-width:0}.tutorial-video-heading span{color:#a34266;letter-spacing:.13em;font-size:8px;font-weight:900;display:block}.tutorial-video-heading h2{color:#4c2937;margin:4px 0 0;font-size:18px;font-weight:850}.tutorial-video-frame{aspect-ratio:16/9;background:#16090f;width:100%;position:relative;overflow:hidden}.tutorial-video-frame iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.tutorial-detail-copy{color:#51494c;background:#fff;border:1px solid #e6d9de;border-radius:20px;padding:34px 38px;font-size:14px;line-height:1.95;box-shadow:0 9px 28px #5422350b}.tutorial-detail-sidebar{min-width:0}.tutorial-sidebar-block{background:#fff;border:1px solid #e5d4db;border-radius:18px;overflow:hidden;box-shadow:0 10px 28px #5b20370e}.tutorial-sidebar-heading{background:linear-gradient(105deg,#f9e5ec 0%,#fff 100%);border-bottom:1px solid #eadde2;padding:17px 18px}.tutorial-sidebar-heading>span{color:#9d3d61;letter-spacing:.13em;font-size:8px;font-weight:900}.tutorial-sidebar-heading h2{color:#472632;margin:4px 0 0;font-size:18px;font-weight:850;line-height:1.35}.tutorial-sidebar-list{display:grid}.tutorial-sidebar-item{color:inherit;background:#fff;border-bottom:1px solid #f0e5e9;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:11px;padding:12px;text-decoration:none;transition:background .18s;display:grid}.tutorial-sidebar-item:last-child{border-bottom:0}.tutorial-sidebar-item:hover{background:#fff3f7}.tutorial-sidebar-thumb{aspect-ratio:4/3;background:#eee4e8;border-radius:10px;position:relative;overflow:hidden}.tutorial-sidebar-thumb img{object-fit:cover;width:100%;height:100%;transition:transform .28s;display:block;position:absolute;inset:0}.tutorial-sidebar-item:hover .tutorial-sidebar-thumb img{transform:scale(1.045)}.tutorial-sidebar-thumb>span{color:#fff;background:#440f2426;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.tutorial-sidebar-thumb>span svg{fill:currentColor;background:#701e3de8;border-radius:50%;width:24px;height:24px;padding:6px}.tutorial-sidebar-copy{min-width:0}.tutorial-sidebar-copy>span{color:#9e8991;margin-bottom:4px;font-size:8px;font-weight:750;display:block}.tutorial-sidebar-copy h3{color:#50313d;margin:0;font-size:11px;font-weight:800;line-height:1.45;transition:color .18s}.tutorial-sidebar-item:hover .tutorial-sidebar-copy h3{color:#8b294d}.tutorial-empty{color:#8d737d;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:300px;display:flex}.tutorial-empty svg{color:#a34266;width:35px;height:35px}@media (width>=961px){.tutorial-detail-sidebar{position:sticky;top:100px}}@media (width<=960px){.tutorial-detail-layout{grid-template-columns:1fr}.tutorial-detail-sidebar{position:static}}@media (width<=760px){.tutorial-page-hero,.tutorial-detail-hero{padding:58px 0 62px}.tutorial-page-content,.tutorial-detail-content{padding:40px 0 62px}.tutorial-card{grid-template-columns:1fr}.tutorial-card-thumbnail{aspect-ratio:16/9;min-height:auto}.tutorial-card-content{padding:21px 20px 23px}.tutorial-detail-thumbnail{border-radius:16px}.tutorial-detail-copy{padding:23px 20px;font-size:13px}.tutorial-video-section{border-radius:16px}.tutorial-breadcrumb{padding:0 13px}}@media (width<=480px){.tutorial-page-hero h1,.tutorial-detail-hero h1{font-size:32px}.tutorial-card-content h2{font-size:18px}.tutorial-sidebar-item{grid-template-columns:74px minmax(0,1fr)}}.tutorial-pdf-actions{align-items:center;margin-top:18px;display:flex}.tutorial-open-pdf{color:#fff;letter-spacing:.06em;background:linear-gradient(120deg,#681c35,#963657);border-radius:11px;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:0 18px;font-size:9px;font-weight:900;text-decoration:none;transition:transform .18s,box-shadow .18s;display:inline-flex;box-shadow:0 10px 24px #681c352e}.tutorial-open-pdf:hover{transform:translateY(-2px);box-shadow:0 14px 28px #681c353d}.tutorial-open-pdf svg{width:17px;height:17px}.tutorial-sidebar-thumb-placeholder{color:#9d3d61;background:linear-gradient(135deg,#f6e3ea 0%,#ead3dc 100%);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.tutorial-sidebar-thumb-placeholder svg{width:28px;height:28px}