@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Quicksand:wght@500;600;700&display=swap";:root{--color-bg-gradient: linear-gradient(135deg, #eef7f6 0%, #d4ebf0 50%, #cbe3db 100%);--color-primary: #3d8c9e;--color-primary-hover: #2e6c7a;--color-primary-light: #e0f2f5;--color-accent: #6ebca4;--color-accent-hover: #509e86;--color-dark: #1b3d45;--color-text: #2f565e;--color-text-muted: #5e848d;--color-white: #ffffff;--color-card-bg: rgba(255, 255, 255, .85);--color-error: #e57373;--color-error-bg: #ffebee;--color-success: #66bb6a;--color-success-bg: #e8f5e9;--color-border: rgba(61, 140, 158, .15);--color-border-hover: rgba(61, 140, 158, .35);--shadow-sm: 0 4px 6px -1px rgba(27, 61, 69, .05), 0 2px 4px -1px rgba(27, 61, 69, .03);--shadow-md: 0 10px 15px -3px rgba(27, 61, 69, .08), 0 4px 6px -2px rgba(27, 61, 69, .04);--shadow-lg: 0 20px 25px -5px rgba(27, 61, 69, .1), 0 10px 10px -5px rgba(27, 61, 69, .04);--shadow-glow: 0 0 15px rgba(61, 140, 158, .2);--font-heading: "Outfit", sans-serif;--font-body: "Quicksand", sans-serif;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-round: 50%}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg-gradient);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-x:hidden;line-height:1.6}.hidden{display:none!important;opacity:0;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-6px)}20%,40%,60%,80%{transform:translate(6px)}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(1deg)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 15px #3d8c9e1a}50%{box-shadow:0 0 25px #3d8c9e59}}.app-container{width:100%;max-width:1200px;padding:2rem 1.5rem;margin:0 auto;display:flex;flex-direction:column;min-height:100vh;justify-content:center}.tutorial-wrapper{animation:fadeIn .8s cubic-bezier(.16,1,.3,1) forwards;width:100%}.tutorial-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.5rem;background:var(--color-card-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.6);padding:1.25rem 2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.header-brand{display:flex;align-items:center;gap:1rem}.header-logo{width:52px;height:52px;background:var(--color-white);border-radius:var(--radius-round);padding:5px;box-shadow:var(--shadow-sm)}.header-logo img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-round)}.header-text-container{display:flex;flex-direction:column}.header-brand-name{font-family:var(--font-heading);font-size:.85rem;font-weight:700;letter-spacing:.1em;color:var(--color-accent);text-transform:uppercase}.header-title{font-family:var(--font-heading);font-size:1.4rem;font-weight:700;color:var(--color-dark)}.progress-card{background:var(--color-card-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-md);padding:1.25rem 2rem;margin-bottom:2.5rem;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.progress-info{min-width:140px}.progress-label{font-family:var(--font-heading);font-weight:700;font-size:1rem;color:var(--color-dark);margin-bottom:.25rem}.progress-sub{font-size:.8rem;color:var(--color-text-muted);font-weight:600}.progress-track-wrapper{flex-grow:1;display:flex;align-items:center;gap:1rem}.progress-track{width:100%;height:12px;background:#3d8c9e1a;border-radius:6px;overflow:hidden;position:relative}.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--color-accent) 0%,var(--color-primary) 100%);border-radius:6px;transition:width .5s cubic-bezier(.4,0,.2,1)}.progress-percent{font-family:var(--font-heading);font-weight:700;font-size:1.2rem;color:var(--color-primary);min-width:50px;text-align:right}.lessons-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-bottom:4rem}.lesson-card{background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid rgba(61,140,158,.08);overflow:hidden;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}.lesson-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#3d8c9e26}.lesson-card.completed{border-color:#6ebca459;box-shadow:0 10px 20px -3px #6ebca40f,var(--shadow-sm)}.lesson-card.completed .lesson-header-bar{background:var(--color-primary-light)}.lesson-header-bar{padding:1.25rem 2rem;background:#f5fafb;border-bottom:1px solid rgba(61,140,158,.05);display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background-color .3s ease}.lesson-title-area{display:flex;align-items:center;gap:.75rem}.part-badge{background:var(--color-primary);color:var(--color-white);padding:.25rem .75rem;border-radius:20px;font-family:var(--font-heading);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.lesson-card.completed .part-badge{background:var(--color-accent)}.lesson-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;color:var(--color-dark)}.checkbox-container{display:block;position:relative;width:28px;height:28px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.custom-checkmark{position:absolute;top:0;left:0;height:28px;width:28px;background-color:var(--color-white);border:2px solid var(--color-border);border-radius:8px;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;justify-content:center}.checkbox-container:hover input~.custom-checkmark{border-color:var(--color-primary);background-color:var(--color-primary-light)}.checkbox-container input:checked~.custom-checkmark{background-color:var(--color-accent);border-color:var(--color-accent);box-shadow:0 4px 10px #6ebca44d}.custom-checkmark:after{content:"";position:absolute;display:none}.checkbox-container input:checked~.custom-checkmark:after{display:block}.checkbox-container .custom-checkmark:after{width:6px;height:12px;border:solid var(--color-white);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin-bottom:2px}.lesson-body{padding:2rem;display:grid;grid-template-columns:1.6fr 1fr;gap:2rem}.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.03);background-color:#000}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.video-cover{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:#000;transition:opacity .3s ease}.video-cover img{width:100%;height:100%;object-fit:cover;transform:scale(1.2)}.video-cover .play-btn{position:absolute;width:68px;height:48px;background-color:#212121cc;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:background-color .1s cubic-bezier(.4,0,1,1),transform .2s ease}.video-cover:hover .play-btn{background-color:red;transform:scale(1.05)}.video-cover .play-btn svg{width:20px;height:20px;fill:#fff;margin-left:2px}.lesson-details{display:flex;flex-direction:column;justify-content:flex-start}.lesson-desc-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;color:var(--color-dark);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.lesson-desc-title:before{content:"";display:inline-block;width:6px;height:14px;background:var(--color-accent);border-radius:3px}.lesson-desc-text{font-size:.95rem;color:var(--color-text-muted);margin-bottom:1.25rem}.lesson-steps-list{list-style:none;margin-top:auto}.lesson-steps-list li{font-size:.9rem;color:var(--color-text);margin-bottom:.6rem;padding-left:1.5rem;position:relative;font-weight:500}.lesson-steps-list li:before{content:"\2726";position:absolute;left:0;color:var(--color-accent);font-weight:700}.site-footer{margin-top:auto;width:100%;text-align:center;padding:2.5rem 1rem;border-top:1px solid rgba(61,140,158,.08);font-size:.85rem;color:var(--color-text-muted)}.site-footer a{color:var(--color-primary);text-decoration:none;font-weight:600}.site-footer a:hover{text-decoration:underline}@media(max-width:992px){.lesson-body{grid-template-columns:1fr;gap:1.5rem}.lesson-details{margin-top:.5rem}}@media(max-width:576px){.app-container{padding:1rem}.tutorial-header{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.5rem}.progress-card{flex-direction:column;align-items:stretch;padding:1.5rem;gap:1rem}.progress-track-wrapper{width:100%}.lesson-header-bar{padding:1rem 1.5rem}.lesson-body{padding:1.5rem}}.back-to-library-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:var(--color-primary-light);color:var(--color-primary);border-radius:var(--radius-sm);text-decoration:none;font-family:var(--font-heading);font-weight:700;font-size:.9rem;transition:all .2s ease;border:1px solid rgba(61,140,158,.1)}.back-to-library-btn:hover{background-color:var(--color-primary);color:var(--color-white);transform:translate(-2px);box-shadow:var(--shadow-sm)}.back-to-library-btn svg{transition:transform .2s ease}.back-to-library-btn:hover svg{transform:translate(-2px)}.library-hero{margin-bottom:2.5rem;background:var(--color-card-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-lg);padding:2.5rem 2rem;box-shadow:var(--shadow-sm);text-align:center;animation:fadeIn .8s cubic-bezier(.16,1,.3,1) forwards}.hero-title{font-family:var(--font-heading);font-size:2rem;font-weight:700;color:var(--color-dark);margin-bottom:.75rem}.hero-desc{font-size:1.05rem;color:var(--color-text-muted);max-width:700px;margin:0 auto}.controls-container{display:flex;justify-content:center;align-items:center;gap:1.5rem;margin-bottom:2.5rem;animation:fadeIn .8s cubic-bezier(.16,1,.3,1) .1s forwards;opacity:0}.search-wrapper{position:relative;flex-grow:1;max-width:450px}.search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--color-primary);pointer-events:none;transition:color .2s ease}#library-search{width:100%;padding:.85rem 1.25rem .85rem 3.25rem;border-radius:var(--radius-md);border:1px solid rgba(61,140,158,.15);background:var(--color-white);font-family:var(--font-body);font-size:.95rem;color:var(--color-dark);outline:none;box-shadow:var(--shadow-sm);transition:all .3s cubic-bezier(.16,1,.3,1)}#library-search:focus{border-color:var(--color-primary);box-shadow:var(--shadow-glow)}#library-search:focus+.search-icon{color:var(--color-primary-hover)}.filter-tabs{display:flex;gap:.5rem;flex-shrink:0;overflow-x:auto;padding-bottom:4px}.filter-tab{background:var(--color-card-bg);border:1px solid rgba(61,140,158,.1);color:var(--color-text);padding:.6rem 1.2rem;border-radius:30px;font-family:var(--font-heading);font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap;transition:all .25s cubic-bezier(.16,1,.3,1)}.filter-tab:hover{background:var(--color-primary-light);color:var(--color-primary);border-color:#3d8c9e40;transform:translateY(-1px)}.filter-tab.active{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary);box-shadow:0 4px 10px #3d8c9e40}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2rem;margin-bottom:4rem;animation:fadeIn .8s cubic-bezier(.16,1,.3,1) .2s forwards;opacity:0}.kit-card{background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid rgba(61,140,158,.08);overflow:hidden;display:flex;flex-direction:column;transition:all .3s cubic-bezier(.16,1,.3,1)}.kit-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#3d8c9e33}.kit-image-wrapper{position:relative;width:100%;height:220px;overflow:hidden;background-color:var(--color-primary-light)}.kit-image{width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform .6s cubic-bezier(.16,1,.3,1)}.kit-card:hover .kit-image{transform:scale(1.06)}.kit-status-badge{position:absolute;top:1rem;right:1rem;padding:.35rem .85rem;border-radius:20px;font-family:var(--font-heading);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;z-index:3;box-shadow:var(--shadow-sm)}.badge-active{background-color:var(--color-accent);color:var(--color-white)}.soon-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#1b3d458c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;z-index:2;color:var(--color-white);transition:background .3s ease}.kit-card-soon:hover .soon-overlay{background:#1b3d4573}.soon-lock-icon{background:#fff3;border:1.5px solid rgba(255,255,255,.6);width:48px;height:48px;border-radius:var(--radius-round);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:all .3s ease}.kit-card-soon:hover .soon-lock-icon{transform:scale(1.1) rotate(-5deg);background:#ffffff4d;border-color:var(--color-white)}.soon-badge{font-family:var(--font-heading);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;background-color:#0000004d;padding:.25rem .75rem;border-radius:12px;border:1px solid rgba(255,255,255,.15)}.kit-image-placeholder{width:100%;height:100%;transition:transform .6s cubic-bezier(.16,1,.3,1)}.kit-card-soon:hover .kit-image-placeholder{transform:scale(1.06)}.octopus-pattern{background:radial-gradient(circle at 30% 20%,#dbe2ef,#3d8c9e);background-image:radial-gradient(rgba(255,255,255,.15) 8%,transparent 8%),radial-gradient(rgba(255,255,255,.1) 8%,transparent 8%);background-size:24px 24px;background-position:0 0,12px 12px}.dino-pattern{background:linear-gradient(135deg,#e2f3ec,#6ebca4);background-image:linear-gradient(30deg,rgba(255,255,255,.1) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.1) 87.5%,rgba(255,255,255,.1)),linear-gradient(150deg,rgba(255,255,255,.1) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.1) 87.5%,rgba(255,255,255,.1)),linear-gradient(300deg,rgba(255,255,255,.1) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.1) 87.5%,rgba(255,255,255,.1)),linear-gradient(60deg,rgba(255,255,255,.1) 25%,transparent 25.5%,transparent 75%,rgba(255,255,255,.1) 75.5%,rgba(255,255,255,.1));background-size:30px 52px}.kit-card-body{padding:1.75rem 2rem;display:flex;flex-direction:column;flex-grow:1}.kit-tags{display:flex;gap:.5rem;margin-bottom:.75rem}.kit-tag{background:var(--color-primary-light);color:var(--color-primary);font-size:.75rem;font-family:var(--font-heading);font-weight:700;padding:.2rem .6rem;border-radius:6px;text-transform:uppercase;letter-spacing:.02em}.kit-card-soon .kit-tag{background:#6ebca41f;color:var(--color-accent-hover)}.kit-title{font-family:var(--font-heading);font-size:1.35rem;font-weight:700;color:var(--color-dark);margin-bottom:.75rem;line-height:1.25}.kit-desc{font-size:.925rem;color:var(--color-text-muted);margin-bottom:1.5rem;flex-grow:1;line-height:1.5}.kit-meta{display:flex;justify-content:center;gap:1.5rem;border-top:1px dashed var(--color-border);padding-top:1.25rem;margin-bottom:1.25rem}.meta-item{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--color-text-muted);font-weight:600}.meta-item svg{color:var(--color-primary)}.kit-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.85rem;border-radius:var(--radius-md);font-family:var(--font-heading);font-weight:700;font-size:.95rem;text-decoration:none;background-color:var(--color-primary);color:var(--color-white);border:1px solid var(--color-primary);cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 12px #3d8c9e26}.kit-action-btn:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);box-shadow:0 6px 16px #3d8c9e4d;transform:translateY(-1px)}.kit-action-btn svg{transition:transform .25s ease}.kit-action-btn:hover svg{transform:translate(3px)}.soon-btn{background-color:#1b3d450d;border-color:#1b3d450d;color:var(--color-text-muted);cursor:not-allowed;box-shadow:none}.soon-btn:hover{background-color:#1b3d450d;border-color:#1b3d450d;transform:none;box-shadow:none}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5rem 2rem;background:var(--color-card-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:4rem;animation:fadeIn .5s ease forwards}.empty-state svg{color:var(--color-primary);margin-bottom:1.25rem}.empty-state h3{font-family:var(--font-heading);font-size:1.4rem;font-weight:700;color:var(--color-dark);margin-bottom:.5rem}.empty-state p{font-size:.95rem;color:var(--color-text-muted);max-width:450px}@media(max-width:768px){.controls-container{flex-direction:column;align-items:stretch;gap:1rem}.search-wrapper{max-width:100%}.filter-tabs{width:100%;justify-content:flex-start}}.welcome-compact{background:var(--color-card-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-md);padding:1.25rem 1.75rem;margin-bottom:2.25rem;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between;gap:2rem;animation:fadeIn .8s cubic-bezier(.16,1,.3,1) forwards}.welcome-header-inline{display:flex;flex-direction:column;align-items:flex-start;text-align:left;flex:1}.welcome-title-compact{font-family:var(--font-heading);font-size:1.2rem;font-weight:700;color:var(--color-dark);margin-bottom:.25rem}.welcome-text-compact{font-family:var(--font-body);font-size:.9rem;color:var(--color-text-muted);line-height:1.45}.welcome-help-links{display:flex;gap:.75rem;flex-shrink:0}.help-link-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:20px;font-family:var(--font-heading);font-weight:700;font-size:.8rem;text-decoration:none;transition:all .2s cubic-bezier(.16,1,.3,1);border:1px solid transparent}.playlist-pill{background-color:#ffebee;color:#c62828}.playlist-pill:hover{background-color:#c62828;color:var(--color-white);box-shadow:0 4px 10px #c6282826;transform:translateY(-1px)}.email-pill{background-color:var(--color-primary-light);color:var(--color-primary)}.email-pill:hover{background-color:var(--color-primary);color:var(--color-white);box-shadow:0 4px 10px #3d8c9e26;transform:translateY(-1px)}@media(max-width:900px){.welcome-compact{flex-direction:column;align-items:stretch;gap:1.25rem;text-align:center;padding:1.5rem}.welcome-header-inline{align-items:center;text-align:center}.welcome-help-links{justify-content:center}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/tutorial-style.css.map */