:root{--ink:#17233d;--ink-2:#293956;--muted:#74819a;--soft:#f7f9ff;--line:#e7ebf5;--blue:#4c70f0;--blue-dark:#3658d8;--violet:#755be8;--white:#fff;--green:#37b78a;--shadow:0 18px 55px rgba(31,53,106,.09);--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#fbfcff;color:var(--ink);font-family:"DM Sans",sans-serif;font-size:15px;line-height:1.55;overflow-x:hidden}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}.wrap{width:min(1160px,calc(100% - 56px));margin-inline:auto}.ambient{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(1px)}.ambient-one{width:550px;height:550px;left:-250px;top:150px;background:radial-gradient(circle,rgba(183,197,255,.16),transparent 67%)}.ambient-two{width:620px;height:620px;right:-330px;top:650px;background:radial-gradient(circle,rgba(218,205,255,.21),transparent 67%)}.site-header{height:88px;padding:0 max(28px,calc((100vw - 1240px)/2));display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(228,233,246,.72);background:rgba(251,252,255,.86);backdrop-filter:blur(18px);position:sticky;top:0;z-index:30}.brand{display:inline-flex;align-items:center;gap:12px;min-width:245px}.brand-mark{width:48px;height:48px;flex:none}.brand-copy{display:flex;flex-direction:column;line-height:1.15;gap:5px}.brand-copy strong{font:800 17px Manrope,sans-serif;letter-spacing:-.6px}.brand-copy strong span{font-weight:600;color:#667590}.brand-copy small{color:#98a2b7;letter-spacing:1.9px;font-size:9px;font-weight:700}.main-nav{display:flex;align-items:center;gap:36px;margin-left:auto;margin-right:auto}.nav-link{font-size:13px;color:#7d89a0;font-weight:600;transition:color .2s;position:relative}.nav-link:hover,.nav-link.active{color:var(--ink)}.nav-link.active:after{content:"";height:3px;width:15px;border-radius:5px;background:var(--blue);position:absolute;bottom:-34px;left:calc(50% - 7px)}.header-actions{display:flex;align-items:center;gap:10px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;padding:11px 16px;border-radius:12px;font-size:12px;font-weight:700;white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s}.button:hover{transform:translateY(-1px)}.button:focus-visible,.icon-button:focus-visible,.filter-chip:focus-visible,.subject-card:focus-visible{outline:3px solid rgba(76,112,240,.32);outline-offset:3px}.button-primary{color:#fff;background:linear-gradient(115deg,#5278f3,#6759e8);box-shadow:0 8px 18px rgba(79,103,232,.19)}.button-primary:hover{background:linear-gradient(115deg,#446aeb,#5949da);box-shadow:0 10px 22px rgba(79,103,232,.28)}.button-quiet{color:#64718b;background:transparent;border-color:#e8ecf5}.button-quiet:hover,.button-outline:hover{background:#f4f6ff;border-color:#d9e1fa}.button-outline{color:#3e4c6b;border-color:#dfe5f2;background:rgba(255,255,255,.7)}.button-large{padding:14px 19px;font-size:13px;border-radius:13px}.plus-icon{font-size:18px;line-height:10px;font-weight:400}.download-icon{font-size:18px;font-weight:500;line-height:1}.mobile-menu{display:none;background:#fff;border:1px solid var(--line);width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;flex-direction:column;gap:5px}.mobile-menu span{width:16px;height:2px;background:#5c6984;border-radius:3px}.hero{min-height:514px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;position:relative;padding-top:42px;padding-bottom:64px}.hero-copy{padding:9px 0 7px;position:relative;z-index:2}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:#8794b1;display:flex;align-items:center;gap:9px}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#7c6af1;box-shadow:0 0 0 4px #edeaff}.hero h1{font-family:Manrope,sans-serif;font-size:clamp(42px,5vw,64px);font-weight:800;letter-spacing:-3.8px;line-height:1.105;margin:24px 0 20px;color:#192641}.hero h1 span{color:var(--blue);background:linear-gradient(100deg,#4d76f1 10%,#7a62eb 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-subtitle{max-width:460px;color:#74809a;font-size:15px;line-height:1.85;margin:0 0 26px}.hero-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap}.hero-proof{display:flex;align-items:center;gap:9px;margin-top:34px;color:#687894;font-size:11px;font-weight:600}.avatar-stack{display:flex;align-items:center;margin-right:1px}.avatar-stack span{width:25px;height:25px;border-radius:50%;border:2px solid #fbfcff;display:grid;place-items:center;font-size:9px;font-weight:800;color:white;margin-left:-6px;background:#6b7fed}.avatar-stack span:first-child{margin-left:0;background:#f1a889}.avatar-stack span:nth-child(2){background:#8c76e9}.proof-dot{color:#c0c8d7}.proof-muted{color:#9ca7bb;font-weight:500}.hero-visual{height:414px;position:relative;display:flex;justify-content:center;align-items:center;isolation:isolate}.hero-visual:before{content:"";position:absolute;width:410px;height:365px;border-radius:45% 55% 55% 45%;background:linear-gradient(140deg,#f1f4ff 4%,#f4efff 58%,#fff7f0);transform:rotate(-8deg);z-index:-2}.visual-orbit{position:absolute;border:1px dashed rgba(118,135,202,.2);border-radius:50%;z-index:-1}.orbit-a{width:380px;height:380px;transform:rotate(24deg)}.orbit-b{width:455px;height:295px;transform:rotate(-29deg)}.hero-device{width:284px;min-height:338px;padding:15px 16px 17px;background:rgba(255,255,255,.92);border:1px solid rgba(231,235,250,.95);border-radius:22px;box-shadow:0 26px 65px rgba(48,66,125,.15),0 3px 10px rgba(57,76,134,.05);transform:rotate(3deg);position:relative}.device-top{display:flex;align-items:center;justify-content:space-between;padding:0 0 14px;border-bottom:1px solid #f0f2f8}.device-dots{display:flex;gap:4px}.device-dots i{width:4px;height:4px;border-radius:50%;background:#e1e6f3}.device-dots i:first-child{background:#f5ad9a}.device-tag{font-size:7px;letter-spacing:1.7px;font-weight:800;color:#96a2bd}.device-avatar{background:#eeeaff;color:#7261d9;border-radius:50%;height:21px;width:21px;font-size:8px;font-weight:800;display:grid;place-items:center}.device-heading{padding:17px 3px 12px;display:flex;flex-direction:column;gap:6px}.mini-overline{font-size:7px;font-weight:800;letter-spacing:1.5px;color:#9da8bd}.device-heading b{font:800 21px/1.23 Manrope,sans-serif;letter-spacing:-.7px;color:#233151}.device-feature{padding:9px;border:1px solid #edf0f8;border-radius:13px;background:#fff}.feature-art{height:93px;border-radius:9px;overflow:hidden;background:linear-gradient(139deg,#e2eaff,#ebe6ff 60%,#fff0e8);position:relative}.art-sun{width:27px;height:27px;position:absolute;right:25px;top:16px;border-radius:50%;background:#ffdaac;box-shadow:0 0 0 8px rgba(255,218,172,.22)}.art-hill{position:absolute;bottom:-27px;border-radius:50% 50% 0 0;transform:rotate(-7deg)}.hill-a{height:68px;width:205px;left:-26px;background:linear-gradient(130deg,#7186eb,#a9b5fb)}.hill-b{height:55px;width:175px;right:-27px;bottom:-28px;background:linear-gradient(125deg,#a2a3f6,#d0c4ff)}.art-play{position:absolute;left:calc(50% - 16px);top:calc(50% - 16px);height:32px;width:32px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.88);color:#596fe2;font-size:11px;padding-left:2px;box-shadow:0 4px 15px rgba(67,79,153,.13)}.feature-lines{padding:10px 2px 1px}.line-long,.line-short{height:5px;display:block;background:#e8ebf6;border-radius:5px}.line-long{width:58%;margin-bottom:6px}.line-short{width:36%;background:#f0f2f9}.feature-lines>div{display:flex;gap:5px;margin-top:10px}.tiny-pill{width:42px;height:13px;border-radius:5px;background:#e8eeff}.tiny-pill.pale{width:32px;background:#f0ebff}.device-list{height:43px;border-bottom:1px solid #f0f2f8;display:flex;align-items:center;gap:9px}.list-dot{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-size:14px;font-weight:700}.dot-blue{color:#5371e6;background:#edf1ff}.dot-violet{color:#9270e9;background:#f2edff}.list-lines{flex:1;display:flex;flex-direction:column;gap:5px}.list-lines i{height:4px;width:70%;background:#e7ebf6;border-radius:5px}.list-lines i+ i{width:47%;background:#f0f2f8}.list-time{font-size:7px;letter-spacing:1px;font-weight:800;color:#a2abc0}.floating-chip{position:absolute;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.95);border:1px solid #edf0f7;border-radius:15px;padding:10px 14px;box-shadow:0 13px 35px rgba(40,60,123,.1);z-index:3;white-space:nowrap}.floating-chip b{display:block;font-size:10px;color:#263553}.floating-chip small{display:block;color:#99a4b9;font-size:9px;margin-top:2px}.chip-top{top:61px;left:0;transform:rotate(-5deg)}.chip-bottom{right:-3px;bottom:61px;transform:rotate(3deg)}.chip-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;font-size:10px}.chip-play{background:#eef1ff;color:#5a75eb}.chip-bookmark{background:#fff0ee;color:#ec907e;font-size:18px}.decor-star{position:absolute;color:#8c78ed;font-size:21px;line-height:1}.star-a{right:45px;top:56px}.star-b{left:26px;bottom:93px;font-size:15px;color:#f0a88d}.decor-spark{position:absolute;width:7px;height:7px;background:#82a1ff;border-radius:2px;transform:rotate(45deg)}.spark-a{right:58px;bottom:42px}.spark-b{left:68px;top:99px;width:5px;height:5px;background:#f4b18e}.hero-bottom-note{position:absolute;bottom:28px;left:0;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.3px;color:#9ba6ba;font-weight:600}.note-line{width:27px;height:1px;background:#b8c5e4}.quick-stats{display:flex;align-items:center;gap:0;padding:24px 28px;background:#fff;border:1px solid #eef1f8;border-radius:19px;box-shadow:0 12px 45px rgba(40,56,108,.045);margin-bottom:100px}.stat-item{display:flex;align-items:center;gap:12px;padding:0 35px 0 0;margin-right:34px;border-right:1px solid #edf0f7;min-width:171px}.stat-icon{height:39px;width:39px;border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:700}.blue-icon{color:#5978ef;background:#eff2ff}.purple-icon{color:#9575ec;background:#f4efff}.peach-icon{color:#e99a83;background:#fff0eb}.stat-copy{display:flex;flex-direction:column;gap:0}.stat-copy strong{font:800 20px/1.3 Manrope,sans-serif;letter-spacing:-.5px;color:#293854}.stat-copy small{font-size:10px;color:#9aa5b8;white-space:nowrap}.stat-footnote{margin-left:auto;color:#8c97ad;font-size:10px;display:flex;align-items:center;gap:8px;white-space:nowrap}.live-pulse{width:6px;height:6px;border-radius:50%;background:#69cca6;box-shadow:0 0 0 4px #e6f8f0}.library-section{padding-bottom:96px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.section-eyebrow{margin-bottom:11px;color:#8c98b2}.section-heading h2,.about-text h2{font:800 clamp(27px,3.1vw,37px)/1.2 Manrope,sans-serif;letter-spacing:-1.65px;margin:0;color:#1d2a46}.heading-period{color:#6277ef}.section-subtitle{margin:10px 0 0;color:#8b96ab;font-size:13px}.section-add{margin-bottom:3px}.library-toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:31px}.search-box{height:47px;display:flex;align-items:center;gap:12px;max-width:550px;width:136%;padding:0 13px 0 16px;background:#fff;border:1px solid #e8ecf5;border-radius:12px;box-shadow:0 3px 9px rgba(38,56,110,.02);transition:border .2s,box-shadow .2s}.search-box:focus-within{border-color:#b9c8ff;box-shadow:0 0 0 4px rgba(89,115,239,.08)}.search-symbol{width:14px;height:14px;border:1.7px solid #9aa6bd;border-radius:50%;position:relative;flex:none}.search-symbol:after{content:"";position:absolute;width:6px;height:1.7px;background:#9aa6bd;right:-4px;bottom:-2px;transform:rotate(48deg);border-radius:2px}.search-box input{border:0;outline:0;background:transparent;min-width:0;flex:1;color:#2c3956;font-size:12px}.search-box input::placeholder{color:#a8b1c3}.search-box kbd{font:11px "DM Sans",sans-serif;background:#f5f7fc;border:1px solid #e8ecf5;color:#9ca7bb;border-radius:5px;padding:2px 6px}.toolbar-right{display:flex;align-items:center;gap:12px}.sort-wrap{display:flex;align-items:center;gap:8px;color:#98a2b5;font-size:11px;white-space:nowrap}.sort-wrap select{border:0;outline:none;background:transparent;color:#3d4b69;font-weight:700;font-size:11px;cursor:pointer;padding:8px 1px}.icon-button{width:43px;height:43px;border-radius:12px;background:#fff;border:1px solid #e8ecf5;display:grid;place-items:center;color:#8a96ac;font-size:21px;transition:all .2s}.icon-button:hover,.icon-button[aria-pressed="true"]{color:#e98785;border-color:#ffdcd7;background:#fff6f4}.filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:21px}.filter-chip{padding:8px 12px;border:1px solid #e9edf6;background:rgba(255,255,255,.7);border-radius:9px;color:#8a96ad;font-size:11px;font-weight:700;transition:all .2s}.filter-chip span{display:inline-block;margin-left:5px;min-width:17px;padding:1px 4px;border-radius:5px;background:#f1f3f9;color:#9da7b8;font-size:9px}.filter-chip:hover{border-color:#d8e0fb;color:#5d6fc6}.filter-chip.active{color:#506bdf;border-color:#dfe5ff;background:#eef2ff}.filter-chip.active span{background:#dce4ff;color:#5470dd}.result-line{display:flex;align-items:center;justify-content:space-between;margin:25px 0 14px;color:#98a2b6;font-size:11px}.text-button{border:0;background:transparent;color:#6779df;font-size:11px;font-weight:700;padding:3px}.text-button span{font-size:16px;vertical-align:middle}.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.video-card{position:relative;overflow:hidden;border:1px solid #e9edf6;background:#fff;border-radius:17px;box-shadow:0 5px 18px rgba(37,53,105,.035);transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0;animation:card-in .34s ease both}.video-card:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(35,54,112,.09);border-color:#dce4fa}@keyframes card-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.video-thumbnail{height:170px;position:relative;overflow:hidden;background:linear-gradient(135deg,#e4ecff,#f0eaff 60%,#fff0e6);display:block;cursor:pointer}.video-thumbnail img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}.video-card:hover .video-thumbnail img{transform:scale(1.035)}.thumb-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,34,63,.01),rgba(23,34,63,.2));display:flex;align-items:center;justify-content:center}.thumb-play{width:43px;height:43px;display:grid;place-items:center;padding-left:3px;color:#5c70dc;background:rgba(255,255,255,.94);border-radius:50%;box-shadow:0 5px 15px rgba(37,54,120,.15);font-size:13px;transition:transform .2s}.video-thumbnail:hover .thumb-play{transform:scale(1.08)}.thumb-subject-art{height:100%;width:100%;display:grid;place-items:center;position:relative;overflow:hidden}.thumb-subject-art:before,.thumb-subject-art:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.42)}.thumb-subject-art:before{width:200px;height:200px;right:-48px;top:-90px}.thumb-subject-art:after{width:150px;height:150px;left:-40px;bottom:-80px}.thumb-equation{font:800 48px Manrope,sans-serif;color:rgba(255,255,255,.9);text-shadow:0 5px 16px rgba(61,78,154,.12);transform:rotate(-8deg)}.thumb-physics{background:linear-gradient(130deg,#79a0f4,#8073e7)}.thumb-chemistry{background:linear-gradient(130deg,#6dcec0,#79a4e8)}.thumb-biology{background:linear-gradient(130deg,#9bceaa,#64b7b2)}.thumb-maths{background:linear-gradient(130deg,#f0b58f,#e58cab)}.thumb-other{background:linear-gradient(130deg,#b4a2f7,#8ba6f7)}.video-top-badges{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.category-badge{background:rgba(255,255,255,.92);color:#60719a;padding:5px 8px;border-radius:6px;font-size:9px;font-weight:800;letter-spacing:.3px;backdrop-filter:blur(8px)}.bookmark-button{height:29px;width:29px;display:grid;place-items:center;border-radius:9px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.89);color:#8d99b0;font-size:16px;line-height:1;transition:all .2s}.bookmark-button.saved{color:#e67d84;background:#fff7f6}.bookmark-button:hover{transform:scale(1.05)}.local-tag{position:absolute;bottom:11px;left:12px;font-size:8px;font-weight:800;letter-spacing:.6px;border-radius:5px;background:rgba(27,42,77,.62);color:#fff;padding:4px 6px}.video-card-body{padding:16px 16px 14px}.card-meta{display:flex;align-items:center;gap:7px;font-size:9px;color:#9ba6bb;font-weight:600;margin-bottom:9px}.meta-dot{width:3px;height:3px;border-radius:50%;background:#c4ccda}.video-title{font:800 15px/1.42 Manrope,sans-serif;color:#253451;letter-spacing:-.25px;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}.video-description{font-size:11px;line-height:1.6;color:#8d99af;margin:0 0 15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #f0f2f8;padding-top:12px}.teacher-info{display:flex;align-items:center;gap:7px;min-width:0}.teacher-avatar{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:9px;font-weight:800;color:#5b6fd2;background:#edf0ff}.teacher-name{font-size:10px;font-weight:700;color:#5b6883;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-play-link{display:flex;align-items:center;gap:5px;border:0;background:transparent;padding:4px 0;color:#5b70e5;font-size:10px;font-weight:800;white-space:nowrap}.card-play-link span{font-size:13px}.delete-local{display:block;border:0;background:transparent;color:#bd8a8a;font-size:9px;padding:8px 0 0;font-weight:600}.empty-state{border:1px dashed #dfe5f4;border-radius:19px;background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(247,249,255,.72));text-align:center;padding:35px 20px 38px;min-height:295px;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-illustration{height:105px;width:136px;position:relative;display:grid;place-items:center;margin-bottom:7px}.empty-circle{position:absolute;border-radius:50%;background:#eff2ff}.circle-one{width:88px;height:88px;left:7px;top:8px}.circle-two{width:54px;height:54px;background:#f5eefe;right:4px;bottom:0}.empty-video{width:66px;height:54px;border-radius:12px;border:1px solid #e0e6ff;background:#fff;box-shadow:0 9px 20px rgba(80,101,181,.12);position:relative;z-index:1;display:grid;place-items:center;color:#fff;font-size:15px}.empty-video:before{content:"";position:absolute;width:26px;height:26px;background:linear-gradient(135deg,#6487f5,#8269eb);border-radius:50%;z-index:-1}.empty-spark{position:absolute;right:6px;top:8px;color:#9a85ee;font-size:18px}.empty-state h3{font:800 18px Manrope,sans-serif;letter-spacing:-.5px;margin:4px 0 6px;color:#283653}.empty-state p{max-width:440px;color:#909cb1;font-size:12px;line-height:1.75;margin:0 0 18px}.empty-state .button{font-size:11px}.empty-tip{margin-top:14px;font-size:10px;color:#adb6c7}.subjects-section{position:relative;background:linear-gradient(112deg,#f0f3ff 0%,#f4f1ff 60%,#fff7f3 100%);padding:76px 0 80px;overflow:hidden}.subjects-section:before{content:"";position:absolute;width:510px;height:510px;border-radius:50%;border:1px solid rgba(139,154,223,.14);top:-335px;left:-115px}.subjects-inner{display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:70px;position:relative}.subjects-copy .eyebrow{color:#8d96b5;margin-bottom:14px}.subjects-copy h2{font:800 36px/1.23 Manrope,sans-serif;letter-spacing:-1.5px;margin:0;color:#253451}.subjects-copy h2 span{color:#6575e8}.subjects-copy p{font-size:12px;line-height:1.9;color:#8390aa;max-width:280px;margin:16px 0 21px}.text-link{display:inline-flex;align-items:center;gap:8px;color:#586fe0;font-size:11px;font-weight:800;border:0;background:transparent;padding:0}.text-link:hover{color:#4059d1}.text-link span{font-size:14px}.subject-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.subject-card{position:relative;overflow:hidden;text-align:left;min-height:154px;border:1px solid rgba(255,255,255,.9);border-radius:17px;background:rgba(255,255,255,.78);padding:16px 17px;box-shadow:0 6px 20px rgba(66,79,135,.04);display:flex;flex-direction:column;align-items:flex-start;transition:transform .2s,box-shadow .2s}.subject-card:hover{transform:translateY(-3px);box-shadow:0 13px 25px rgba(66,79,135,.09)}.subject-card-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:10px;position:relative;z-index:1}.subject-symbol{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:18px;font-weight:700}.subject-arrow{color:#b3bdd1;font-size:13px;transition:transform .2s}.subject-card:hover .subject-arrow{transform:translate(2px,-2px);color:#6677e4}.subject-card strong{font:800 13px Manrope,sans-serif;letter-spacing:-.15px;color:#34415e;position:relative;z-index:1}.subject-card>small{color:#9aa5b9;font-size:10px;margin-top:2px;position:relative;z-index:1}.subject-count{display:inline-block;margin-top:9px;color:#7585aa;background:#f2f4ff;border-radius:6px;font-size:8px;padding:4px 7px;font-weight:800;position:relative;z-index:1}.subject-physics .subject-symbol{background:#ebefff;color:#617ae9}.subject-chemistry .subject-symbol{background:#e9f8f3;color:#40a997}.subject-biology .subject-symbol{background:#e9f6ea;color:#5da873}.subject-other .subject-symbol{background:#fff1e9;color:#e29770}.subject-decoration{position:absolute;right:14px;bottom:-33px;font-size:82px;line-height:1;font-weight:400;opacity:.07;transform:rotate(-12deg);pointer-events:none}.physics-decoration{color:#526ce0}.chemistry-decoration{color:#38b69d}.biology-decoration{color:#58a870}.other-decoration{color:#e39a72}.about-section{display:flex;align-items:center;gap:22px;padding-top:69px;padding-bottom:67px}.about-mark img{width:65px;height:65px;display:block}.about-text{flex:1;max-width:460px}.about-text .eyebrow{margin-bottom:8px}.about-text h2{font-size:21px;letter-spacing:-.7px}.about-text p{margin:8px 0 0;color:#8995ab;font-size:11px;line-height:1.85;max-width:440px}.creator-card{display:flex;flex-direction:column;padding:19px 22px;border:1px solid #edf0f7;background:#fff;border-radius:14px;min-width:245px;box-shadow:0 7px 24px rgba(39,54,107,.04)}.creator-label{font-size:8px;font-weight:800;letter-spacing:1.6px;color:#a0abc0;margin-bottom:7px}.creator-card strong{font:800 16px Manrope,sans-serif;color:#33415f}.creator-sub{color:#9aa5b9;font-size:10px;margin-top:6px}.creator-sub span{color:#8a75e6;margin-left:4px}.site-footer{background:#fff;border-top:1px solid #edf0f7}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:73px}.footer-brand{display:flex;align-items:center;gap:8px;font:800 11px Manrope,sans-serif;color:#4b5876}.footer-brand img{width:27px;height:27px}.footer-note,.footer-copy{font-size:10px;color:#a2adbf}.permission-note{padding:0 0 18px;text-align:center;color:#b1bac9;font-size:9px;line-height:1.6}.modal-backdrop{position:fixed;inset:0;background:rgba(20,31,56,.42);backdrop-filter:blur(7px);z-index:60;display:grid;place-items:center;padding:20px;overflow-y:auto;animation:fade-in .18s ease}@keyframes fade-in{from{opacity:0}to{opacity:1}}.modal-panel,.player-panel{width:min(570px,100%);border-radius:22px;background:#fff;box-shadow:0 30px 100px rgba(21,34,70,.3);padding:28px;animation:modal-in .23s ease}@keyframes modal-in{from{transform:translateY(8px) scale(.99);opacity:.8}to{transform:translateY(0) scale(1);opacity:1}}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:23px}.modal-eyebrow{font-size:9px;color:#8896b3;font-weight:800;letter-spacing:1.6px}.modal-head h2,.player-head h2{font:800 25px/1.25 Manrope,sans-serif;letter-spacing:-1px;margin:5px 0;color:#1f2c48}.modal-head p{font-size:11px;color:#909bb0;margin:0}.modal-close{height:34px;width:34px;flex:none;display:grid;place-items:center;font-size:23px;line-height:1;color:#8d98ad;background:#f6f7fb;border:1px solid #edf0f6;border-radius:10px;transition:all .2s}.modal-close:hover{color:#344260;background:#edf0fa}.field-label{display:block;font-size:11px;font-weight:800;color:#3b4966;margin:16px 0 7px}.field-label>span{color:#ea827e}.field-label small{color:#a2adc0;font-weight:500;font-size:9px;margin-left:4px}.form-control{width:100%;min-height:44px;padding:11px 12px;border:1px solid #e4e9f3;border-radius:10px;background:#fcfdff;outline:0;color:#2d3b59;font-size:11px;transition:border .2s,box-shadow .2s}.form-control::placeholder{color:#b1bacc}.form-control:focus{border-color:#aebfff;box-shadow:0 0 0 4px rgba(86,112,235,.08);background:#fff}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.input-with-icon{position:relative}.input-with-icon>span{position:absolute;left:13px;top:12px;color:#8090bb}.input-with-icon input{padding-left:34px}.textarea{resize:vertical;min-height:64px}.field-hint{font-size:9px;color:#9aa5b9;line-height:1.6;margin:7px 0 0}.form-consent{display:flex;align-items:center;gap:9px;background:#f6f8ff;border:1px solid #eef1fd;border-radius:10px;padding:10px 12px;margin-top:16px}.consent-icon{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#e2f7ef;color:#39a981;font-size:11px;font-weight:800;flex:none}.form-consent p{font-size:10px;color:#7d8aa5;margin:0}.form-error{margin-top:12px;padding:10px 12px;border-radius:8px;background:#fff0ef;color:#b74a48;font-size:10px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.modal-storage-note{display:flex;align-items:flex-start;gap:8px;padding-top:14px;border-top:1px solid #f0f2f7;margin:19px 0 0;color:#98a4b9;font-size:9px;line-height:1.7}.modal-storage-note>span{color:#6f82e7}.modal-storage-note code{font-size:9px;background:#f3f5fb;padding:1px 4px;border-radius:4px;color:#61708f}.player-panel{width:min(820px,100%);padding:23px}.player-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:16px}.player-subject{font-size:8px;font-weight:800;letter-spacing:1.6px;color:#6177e5}.player-head h2{font-size:20px;margin:3px 0 1px}.player-head p{font-size:10px;margin:0;color:#98a3b6}.player-frame-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#151f35;border-radius:13px;overflow:hidden}.player-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.player-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 2px 0}.player-foot p{font-size:11px;color:#8d99ae;margin:0}.player-foot .text-link{white-space:nowrap}.toast{position:fixed;right:24px;bottom:24px;display:flex;align-items:center;gap:10px;z-index:100;border:1px solid #e4eee9;border-radius:13px;padding:12px 16px;background:#fff;box-shadow:0 12px 35px rgba(31,52,98,.16);font-size:11px;color:#4d5d78;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translateY(0)}.toast-check{width:21px;height:21px;display:grid;place-items:center;background:#e7f8f0;border-radius:50%;color:#37a77b;font-size:11px;font-weight:800}.menu-open .main-nav{display:flex}
@media(min-width:1400px){.hero{min-height:550px}.hero-visual{transform:scale(1.06)}}
@media(max-width:1050px){.wrap{width:min(100% - 42px,1000px)}.site-header{padding:0 22px}.brand{min-width:auto}.main-nav{gap:23px}.hero{grid-template-columns:1fr 1fr;min-height:480px}.hero h1{font-size:53px}.hero-visual{transform:scale(.92)}.quick-stats{padding:22px 20px}.stat-item{min-width:145px;padding-right:22px;margin-right:22px}.stat-footnote{font-size:9px}.subjects-inner{gap:34px}.video-thumbnail{height:145px}}
@media(max-width:800px){.site-header{height:75px}.brand-mark{width:42px;height:42px}.brand-copy strong{font-size:15px}.main-nav{display:none;position:absolute;top:66px;right:18px;left:18px;padding:14px;background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;gap:0;align-items:stretch}.main-nav .nav-link{padding:12px 10px}.nav-link.active:after{display:none}.mobile-menu{display:flex}.header-actions{gap:7px}.header-add{padding:10px 12px}.export-trigger{width:39px;height:39px;padding:0;justify-content:center}.export-label{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding-top:58px;padding-bottom:58px}.hero-copy{max-width:560px}.hero h1{font-size:57px}.hero-visual{height:355px;max-width:500px;width:100%;margin:4px auto 0;transform:scale(.9)}.hero-bottom-note{bottom:18px}.quick-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin-bottom:75px;padding:22px}.stat-item{margin:0;padding:0;border:0;min-width:0}.stat-footnote{grid-column:1/-1;margin:2px 0 0;padding-top:14px;border-top:1px solid #edf0f7}.library-section{padding-bottom:74px}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.video-thumbnail{height:160px}.subjects-inner{grid-template-columns:1fr;gap:28px}.subjects-copy p{max-width:480px}.subjects-copy h2 br{display:none}.about-section{flex-wrap:wrap;gap:17px}.about-text{flex-basis:calc(100% - 90px)}.creator-card{margin-left:82px;min-width:0;flex:1}.footer-inner{flex-wrap:wrap;padding:18px 0;justify-content:space-between}.footer-note{display:none}}
@media(max-width:560px){.wrap{width:calc(100% - 32px)}.site-header{padding:0 14px;height:69px;gap:8px}.brand{gap:8px}.brand-mark{height:37px;width:37px}.brand-copy strong{font-size:13px;letter-spacing:-.4px}.brand-copy strong span{display:block;font-size:11px;margin-top:2px}.brand-copy small{font-size:7px;letter-spacing:1.4px}.header-actions{gap:6px}.header-add{font-size:10px;padding:9px 10px;border-radius:10px}.header-add .plus-icon{font-size:16px}.mobile-menu{height:36px;width:36px;border-radius:10px}.export-trigger{display:none}.hero{padding-top:43px;padding-bottom:58px}.eyebrow{font-size:8px;letter-spacing:1.5px}.hero h1{font-size:44px;letter-spacing:-2.5px;margin:19px 0 16px}.hero-subtitle{font-size:13px;line-height:1.8;margin-bottom:22px}.hero-actions{gap:8px}.button-large{padding:12px 13px;font-size:11px}.hero-proof{font-size:9px;gap:6px;margin-top:25px;flex-wrap:wrap}.avatar-stack span{height:23px;width:23px}.hero-visual{height:295px;margin-top:9px;transform:scale(.74);transform-origin:top center;margin-bottom:-66px;width:100%}.hero-bottom-note{bottom:17px;font-size:9px}.quick-stats{padding:18px 14px;gap:17px 12px;margin-bottom:61px;border-radius:15px}.stat-icon{width:32px;height:32px;border-radius:10px;font-size:15px}.stat-item{gap:8px}.stat-copy strong{font-size:18px}.stat-copy small{font-size:9px;white-space:normal}.stat-footnote{font-size:9px}.section-heading{align-items:flex-start}.section-heading h2{font-size:26px;letter-spacing:-1px}.section-subtitle{font-size:11px;line-height:1.7}.section-add{display:none}.library-toolbar{align-items:stretch;flex-direction:column;gap:10px;margin-top:22px}.search-box{max-width:none;height:44px}.toolbar-right{justify-content:space-between}.sort-wrap{font-size:10px}.sort-wrap select{font-size:10px}.icon-button{height:38px;width:39px}.filter-row{gap:6px;margin-top:15px}.filter-chip{padding:7px 9px;font-size:10px}.result-line{margin:20px 0 12px}.video-grid{grid-template-columns:1fr;gap:13px}.video-card{display:grid;grid-template-columns:38% 1fr;min-height:160px}.video-thumbnail{height:100%;min-height:160px}.video-card-body{padding:12px 12px 10px}.video-top-badges{left:7px;right:7px;top:7px}.category-badge{font-size:7px;padding:4px 5px}.bookmark-button{height:24px;width:24px;font-size:14px}.thumb-play{height:34px;width:34px}.video-title{font-size:12px;min-height:auto;margin-bottom:6px}.video-description{font-size:9px;line-height:1.5;min-height:0;margin-bottom:11px;-webkit-line-clamp:2}.card-meta{font-size:8px;margin-bottom:6px}.card-bottom{padding-top:8px;gap:5px}.teacher-avatar{width:21px;height:21px;font-size:8px}.teacher-name{font-size:8px;max-width:65px}.card-play-link{font-size:8px;gap:3px}.card-play-link span{font-size:11px}.local-tag{font-size:6px;padding:3px 4px;bottom:6px;left:7px}.delete-local{font-size:8px;padding-top:5px}.empty-state{padding:28px 15px;min-height:280px}.empty-state h3{font-size:16px}.empty-state p{font-size:11px}.subjects-section{padding:53px 0 57px}.subjects-copy h2{font-size:31px}.subjects-copy h2 br{display:block}.subjects-copy p{font-size:11px}.subject-cards{gap:9px}.subject-card{padding:13px;min-height:148px;border-radius:13px}.subject-card strong{font-size:12px}.subject-card>small{font-size:9px}.subject-count{font-size:7px}.subject-symbol{height:29px;width:29px}.subject-decoration{font-size:65px}.about-section{padding-top:48px;padding-bottom:44px;gap:12px}.about-mark img{width:51px;height:51px}.about-text{flex-basis:calc(100% - 65px)}.about-text h2{font-size:17px}.about-text p{font-size:10px}.creator-card{margin-left:63px;padding:14px 16px}.creator-card strong{font-size:14px}.footer-inner{gap:9px}.footer-copy{font-size:9px}.permission-note{text-align:left;padding-bottom:15px}.modal-backdrop{padding:12px;align-items:start}.modal-panel{padding:21px 17px;border-radius:17px;margin:auto 0}.modal-head h2{font-size:22px}.form-row{grid-template-columns:1fr;gap:0}.form-row .field-label{margin-top:16px}.modal-storage-note{font-size:8px}.player-panel{padding:15px;border-radius:16px;margin:auto 0}.player-head h2{font-size:16px}.player-foot{align-items:flex-start;flex-direction:column;gap:8px}.toast{left:14px;right:14px;bottom:14px;justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Final detail tweaks */
.import-trigger{font-size:11px;padding:10px 12px}
.video-thumbnail{width:100%;padding:0;border:0;text-align:left;appearance:none}
.fallback-art{position:absolute;inset:0}
@media(max-width:1050px){.import-label{display:none}.import-trigger{width:39px;height:39px;padding:0;justify-content:center;font-size:16px}}
@media(max-width:560px){.import-trigger{display:none}}
/* GNS Playlist collection */
#videoGrid:not(.hidden) {
  display: block;
}

.playlist-section {
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid #e4e9ff;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(55, 73, 150, 0.06);
}

.playlist-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7ff, #ffffff);
}

.playlist-eyebrow {
  color: #6975d9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.playlist-heading h3 {
  margin: 6px 0 0;
  color: #20294a;
  font-family: Manrope, sans-serif;
  font-size: 19px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.playlist-count {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: #e9edff;
  color: #5266d8;
  font-size: 12px;
  font-weight: 700;
}

.playlist-video-list {
  padding: 0 20px;
}

.playlist-video-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid #edf0fa;
}

.playlist-play-icon {
  display: grid;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 13px;
  background: #edf0ff;
  color: #5869df;
  cursor: pointer;
}

.playlist-video-main {
  min-width: 0;
  flex: 1;
}

.playlist-video-title {
  padding: 0;
  border: 0;
  background: transparent;
  color: #232c4b;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.playlist-video-title:hover {
  color: #5969e5;
}

.playlist-video-meta {
  margin-top: 5px;
  color: #7b849c;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.playlist-video-description {
  margin: 6px 0 0;
  color: #69738d;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.playlist-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.playlist-remove-button {
  padding: 7px 10px;
  border: 1px solid #e4e7f0;
  border-radius: 8px;
  background: #fff;
  color: #a53d4d;
  font-size: 12px;
  cursor: pointer;
}

@media (max-width: 560px) {
  .playlist-heading {
    padding: 16px;
  }

  .playlist-video-list {
    padding: 0 14px;
  }

  .playlist-video-row {
    gap: 10px;
  }

  .playlist-row-actions {
    gap: 4px;
  }

  .playlist-remove-button {
    padding: 6px;
  }
}
/* Compact clickable playlist groups */

.playlist-section {
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid #e5e9f8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(45, 60, 130, 0.05);
}

.playlist-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  background: #fafbff;
}

.playlist-heading-copy {
  min-width: 0;
}

.playlist-heading h3 {
  margin: 5px 0 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.playlist-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.playlist-count {
  padding: 6px 9px;
  border-radius: 20px;
  background: #e9edff;
  color: #5368d9;
  font-size: 11px;
  font-weight: 700;
}

.playlist-toggle {
  padding: 8px 11px;
  border: 1px solid #dfe4ff;
  border-radius: 9px;
  background: #fff;
  color: #4e61d3;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.playlist-toggle:hover {
  background: #eef1ff;
}

.playlist-video-list {
  padding: 0 18px;
}

.playlist-video-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #edf0f8;
}

.playlist-play-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: #edf0ff;
  color: #5869df;
  cursor: pointer;
}

.playlist-video-main {
  flex: 1;
  min-width: 0;
}

.playlist-video-title {
  padding: 0;
  border: 0;
  background: transparent;
  color: #252e4c;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.playlist-video-title:hover {
  color: #5969e5;
}

.playlist-video-meta {
  margin-top: 4px;
  color: #8189a0;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.playlist-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.playlist-remove-button {
  padding: 5px 8px;
  border: 1px solid #eee0e4;
  border-radius: 7px;
  background: white;
  color: #a53d4d;
  font-size: 11px;
  cursor: pointer;
}

@media (max-width: 560px) {
  .playlist-heading {
    padding: 12px;
  }

  .playlist-heading-actions {
    gap: 6px;
  }

  .playlist-count {
    padding: 5px 7px;
  }

  .playlist-toggle {
    padding: 7px 8px;
    font-size: 11px;
  }

  .playlist-video-list {
    padding: 0 12px;
  }
}
/* Latest video preview inside playlist heading */
.playlist-heading-copy {
  flex: 1;
  min-width: 0;
}

.playlist-preview {
  position: relative;
  display: block;
  flex: 0 0 92px;
  width: 92px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: #edf0ff;
  cursor: pointer;
}

.playlist-preview img,
.playlist-preview .thumb-subject-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-preview .thumb-subject-art {
  position: absolute;
  inset: 0;
}

.playlist-preview-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 20px;
  background: rgba(16, 24, 48, 0.18);
  text-shadow: 0 1px 4px #000;
}

.playlist-preview:hover .playlist-preview-play {
  background: rgba(16, 24, 48, 0.38);
}

@media (max-width: 560px) {
  .playlist-preview {
    flex-basis: 68px;
    width: 68px;
    height: 42px;
  }

  .playlist-heading {
    gap: 8px;
  }
}
.playlist-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.playlist-heading-copy {
  flex: 1;
  min-width: 0;
}

.playlist-preview {
  position: relative;
  display: block;
  flex: 0 0 92px;
  width: 92px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: #edf0ff;
  cursor: pointer;
}

.playlist-preview img,
.playlist-preview .thumb-subject-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-preview .thumb-subject-art {
  position: absolute;
  inset: 0;
}

.playlist-preview-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 20px;
  background: rgba(16, 24, 48, 0.25);
}

@media (max-width: 560px) {
  .playlist-preview {
    flex-basis: 68px;
    width: 68px;
    height: 42px;
  }
}
/* Keep playlist preview small and neat */
.playlist-heading {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
}

.playlist-heading-copy {
  flex: 1 1 auto !important;
  min-width: 0;
}

button.playlist-preview {
  position: relative !important;
  display: block !important;
  flex: 0 0 82px !important;
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  cursor: pointer;
}

button.playlist-preview img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

button.playlist-preview .thumb-subject-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

button.playlist-preview-play,
.playlist-preview-play {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
}

@media (max-width: 560px) {
  button.playlist-preview {
    flex-basis: 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
  }
}
/* Playlist videos: four neat cards per row */
.playlist-video-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.playlist-video-row {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 14px;
  background: rgba(128, 128, 128, 0.045);
}

button.playlist-video-thumb {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #e9edf5;
  cursor: pointer;
}

.playlist-video-thumb img,
.playlist-video-thumb .thumb-subject-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-video-thumb .thumb-subject-art {
  display: grid;
  place-items: center;
}

.playlist-video-thumb-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 27px;
  background: rgba(0, 0, 0, 0.13);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease;
}

.playlist-video-thumb:hover .playlist-video-thumb-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.playlist-video-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
}

button.playlist-video-title {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.playlist-video-meta {
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0.75;
  overflow-wrap: anywhere;
}

.playlist-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}

/* Responsive layout */
@media (max-width: 1000px) {
  .playlist-video-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .playlist-video-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .playlist-video-main {
    padding: 10px;
  }
}

@media (max-width: 420px) {
  .playlist-video-list {
    grid-template-columns: 1fr;
  }
}
/* Playlist video card grid */
.playlist-section .playlist-video-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.playlist-section .playlist-video-row {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 14px;
}

.playlist-section .playlist-video-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
}

.playlist-section .playlist-video-thumb img,
.playlist-section .playlist-video-thumb .thumb-subject-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-section .playlist-video-thumb-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 26px;
  background: rgba(0, 0, 0, 0.18);
}

.playlist-section .playlist-video-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  gap: 9px;
  min-width: 0;
  padding: 12px;
}

.playlist-section .playlist-video-title {
  width: 100%;
  text-align: left;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.playlist-section .playlist-video-meta {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.playlist-section .playlist-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* Smaller screens */
@media (max-width: 1000px) {
  .playlist-section .playlist-video-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .playlist-section .playlist-video-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 420px) {
  .playlist-section .playlist-video-list {
    grid-template-columns: 1fr !important;
  }
}
/* Subject sections */
.subject-playlists-group {
  width: 100%;
  min-width: 0;
  margin-bottom: 32px;
}

.subject-playlists-heading {
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.subject-playlists-heading h2 {
  margin: 5px 0 0;
  font-size: 1.65rem;
  font-weight: 800;
}

/* Main playlist titles: three cards per row */
.playlist-catalog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100%;
  min-width: 0;
}

.playlist-catalog-grid > .playlist-catalog-card {
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 15px !important;
  border: 1px solid rgba(128, 128, 128, 0.23);
  border-radius: 15px;
  overflow: hidden;
}

.playlist-catalog-card .playlist-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.playlist-catalog-card .playlist-heading-copy {
  flex: 1;
  min-width: 0;
}

.playlist-catalog-card .playlist-heading-copy h3 {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.playlist-catalog-card .playlist-preview {
  flex: 0 0 82px !important;
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 9px;
}

.playlist-catalog-card .playlist-preview img,
.playlist-catalog-card .playlist-preview .thumb-subject-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-catalog-card .playlist-heading-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Opened playlist: show its videos in a full-width panel */
.playlist-expanded-panel {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(128, 128, 128, 0.23);
  border-radius: 16px;
}

.playlist-expanded-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.playlist-expanded-heading h3 {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

/* Keep four video thumbnails per row inside the opened playlist */
.playlist-expanded-panel .playlist-video-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100%;
  min-width: 0;
}

.playlist-expanded-panel .playlist-video-row {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(128, 128, 128, 0.23);
  border-radius: 13px;
}

.playlist-expanded-panel .playlist-video-thumb {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  cursor: pointer;
}

.playlist-expanded-panel .playlist-video-thumb img,
.playlist-expanded-panel .playlist-video-thumb .thumb-subject-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-expanded-panel .playlist-video-thumb-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 25px;
  background: rgba(0, 0, 0, 0.2);
}

.playlist-expanded-panel .playlist-video-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 12px;
}

.playlist-expanded-panel .playlist-video-title {
  text-align: left;
  overflow-wrap: anywhere;
}

.playlist-expanded-panel .playlist-video-meta {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.playlist-expanded-panel .playlist-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* Responsive layout */
@media (max-width: 950px) {
  .playlist-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .playlist-expanded-panel .playlist-video-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .playlist-catalog-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .playlist-expanded-panel {
    padding: 12px;
  }

  .playlist-expanded-panel .playlist-video-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 380px) {
  .playlist-expanded-panel .playlist-video-list {
    grid-template-columns: 1fr !important;
  }
}
/* Playlist title cards: three per row */
#videoGrid > .playlist-catalog-root {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.playlist-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.playlist-catalog-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(128, 128, 128, 0.23);
  border-radius: 15px;
  background: rgba(128, 128, 128, 0.04);
}

.playlist-catalog-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #20283a;
}

.playlist-catalog-preview img,
.playlist-catalog-preview .thumb-subject-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-catalog-preview .thumb-subject-art {
  display: grid;
  place-items: center;
}

.playlist-catalog-preview-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.playlist-catalog-preview:hover .playlist-catalog-preview-overlay {
  opacity: 1;
}

.playlist-catalog-info {
  padding: 14px;
}

.playlist-catalog-subject {
  display: block;
  margin-bottom: 5px;
  font-size: 0.75rem;
  opacity: 0.7;
}

.playlist-catalog-title {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.playlist-catalog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.85rem;
}

/* Separate playlist viewing window */
.playlist-view-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  background: rgba(10, 14, 28, 0.76);
}

.playlist-view-dialog {
  width: min(1200px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 18px;
  background: var(--card-bg, var(--surface, #fff));
  color: var(--text-color, #20283a);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.playlist-view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.playlist-view-header h2 {
  margin: 5px 0;
  overflow-wrap: anywhere;
}

.playlist-view-header p {
  margin: 5px 0 0;
  opacity: 0.7;
}

.playlist-view-close {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.playlist-view-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.playlist-view-grid > .video-card {
  width: auto;
  min-width: 0;
}

@media (max-width: 950px) {
  .playlist-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .playlist-view-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .playlist-catalog-grid,
  .playlist-view-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .playlist-view-backdrop {
    padding: 8px;
  }

  .playlist-view-dialog {
    padding: 14px;
  }

  .playlist-view-header {
    flex-wrap: wrap;
  }
}

@media (max-width: 400px) {
  .playlist-view-grid {
    grid-template-columns: 1fr;
  }
}
/* Fix horizontal overflow on mobile */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
}

img,
iframe,
video {
  max-width: 100%;
}

main,
section,
header,
footer,
#videoGrid,
.playlist-catalog-root,
.playlist-catalog-grid,
.playlist-view-dialog,
.playlist-view-grid {
  min-width: 0;
  max-width: 100%;
}

/* Mobile layout */
@media (max-width: 768px) {
  #videoGrid {
    min-width: 0;
    width: 100%;
  }

  .playlist-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
  }

  .playlist-view-backdrop {
    padding: 8px;
    align-items: flex-start;
  }

  .playlist-view-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 16px);
    overflow-x: hidden;
    padding: 14px;
  }

  .playlist-view-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
    width: 100%;
  }

  .playlist-catalog-card,
  .video-card {
    min-width: 0;
  }

  .video-title,
  .playlist-catalog-title,
  .playlist-video-title {
    overflow-wrap: anywhere;
  }

  .playlist-view-header {
    flex-wrap: wrap;
  }

  .main-nav {
    max-width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 380px) {
  .playlist-catalog-grid,
  .playlist-view-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Center the mobile hero illustration */
/* Mobile width correction */
@media (max-width: 560px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .wrap,
  .hero {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: scale(0.74) !important;
    transform-origin: top center !important;
  }

  #videoGrid,
  .playlist-catalog-root,
  .playlist-catalog-grid,
  .playlist-view-dialog,
  .playlist-view-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
/* FINAL MOBILE SCREEN FIX */
@media screen and (max-width: 560px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    position: relative !important;
    left: 0 !important;
  }

  /* Hide oversized decorative background shapes on phones */
  .ambient-one,
  .ambient-two {
    display: none !important;
  }

  /* Keep the hero illustration inside the phone screen */
  .hero,
  .hero-copy,
  .hero-visual {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .hero-visual {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  .hero-visual::before {
    max-width: 100% !important;
  }

  .visual-orbit {
    max-width: 100% !important;
  }

  /* Keep the main website sections within the screen */
  .wrap,
  .library-section,
  .subjects-section,
  .about-section,
  .site-footer,
  #videoGrid {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .wrap {
    width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-header {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Subject playlists window */
.subject-playlists-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(17, 27, 51, 0.68);
  backdrop-filter: blur(7px);
}

.subject-playlists-dialog {
  width: min(1100px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid #e5e9f8;
  border-radius: 20px;
  background: #fbfcff;
  box-shadow: 0 25px 80px rgba(20, 34, 70, 0.28);
}

.subject-playlists-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.subject-playlists-header h2 {
  margin: 6px 0;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.subject-playlists-header p {
  margin: 5px 0 0;
  color: #74819a;
  font-size: 13px;
}

.subject-playlists-close {
  flex-shrink: 0;
  padding: 9px 13px;
  border: 1px solid #dfe5f2;
  border-radius: 10px;
  background: white;
  color: #34415e;
  cursor: pointer;
}

/* Keep the video window above the subject window */
.playlist-view-backdrop {
  z-index: 950 !important;
}

@media (max-width: 650px) {
  .subject-playlists-backdrop {
    padding: 8px;
    align-items: flex-start;
  }

  .subject-playlists-dialog {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 14px;
    border-radius: 15px;
  }

  .subject-playlists-header {
    gap: 10px;
    margin-bottom: 15px;
  }

  .subject-playlists-header h2 {
    font-size: 21px;
  }

  .subject-playlists-dialog .playlist-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}
/* Main Playlist and lesson cards */
#videoGrid:not(.hidden) {
  display: block;
}

#videoGrid > .playlist-catalog-root {
  width: 100%;
  min-width: 0;
}

.playlist-catalog-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.playlist-catalog-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4e9f5;
  border-radius: 15px;
  background: #fff;
}

.playlist-catalog-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #edf0ff;
}

.playlist-catalog-preview img,
.playlist-catalog-preview .thumb-subject-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-catalog-preview-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  background: rgba(20, 30, 60, 0.25);
}

.playlist-catalog-info {
  padding: 12px;
}

.playlist-catalog-title {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-weight: 800;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.playlist-catalog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
}

.subject-playlists-backdrop {
  z-index: 900;
}

.playlist-view-backdrop {
  z-index: 950 !important;
}

@media (max-width: 950px) {
  .playlist-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 650px) {
  .playlist-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
}

@media (max-width: 380px) {
  .playlist-catalog-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Keep the video player above playlist windows */
/* Keep the player above playlists, at its original size */
#playerModal[popover="manual"] {
  position: fixed !important;
  inset: 0 !important;
  place-items: center !important;
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  padding: 20px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

#playerModal[popover="manual"] > .player-panel {
  width: min(820px, 100%) !important;
  max-width: 820px !important;
  height: auto !important;
  max-height: calc(100vh - 40px) !important;
  margin: auto !important;
  padding: 23px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 560px) {
  #playerModal[popover="manual"] {
    padding: 12px !important;
  }

  #playerModal[popover="manual"] > .player-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    padding: 15px !important;
  }
}
  #playerModal[popover="manual"] {
    padding: 12px !important;
  }
}
/* Restore the original centered video player above playlists */
#playerModal[popover="manual"]:popover-open {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  background: rgba(20, 31, 56, 0.55) !important;
  backdrop-filter: blur(7px);
  z-index: 2147483647 !important;
}

#playerModal[popover="manual"] > .player-panel {
  width: min(820px, 100%) !important;
  max-width: 820px !important;
  height: auto !important;
  max-height: calc(100vh - 40px) !important;
  margin: auto !important;
  padding: 23px !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

@media (max-width: 560px) {
  #playerModal[popover="manual"] {
    padding: 12px !important;
  }

  #playerModal[popover="manual"] > .player-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    padding: 15px !important;
  }
}


/* GNS signed-in learning flow: landing, protected library, and separate About view */
.page-view-hidden { display: none !important; }
body[data-active-page="home"] .site-footer,
body[data-active-page="library"] .site-footer,
body[data-active-page="about"] .site-footer { display: block; }

/* Account control replaces the separate Admin login button. */
.account-menu-wrap { position: relative; display: inline-flex; align-items: center; }
.account-button { gap: 8px; padding: 7px 10px 7px 7px; min-height: 42px; }
.account-avatar { width: 27px; height: 27px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#5477f1,#8064e8); font-size: 11px; font-weight: 800; }
.account-button-label { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.account-caret { color: #8e9ab0; font-size: 14px; }
.account-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: min(270px, calc(100vw - 28px)); padding: 11px; border: 1px solid #e5eaf5; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(32,46,91,.18); z-index: 80; }
.account-email { display: block; padding: 9px 9px 12px; border-bottom: 1px solid #edf0f7; color: #6c7890; font-size: 11px; overflow-wrap: anywhere; }
.account-signout { width: 100%; margin-top: 7px; padding: 10px 9px; border: 0; border-radius: 9px; background: #f5f7ff; color: #3e4f79; text-align: left; font-size: 12px; font-weight: 700; }
.account-signout:hover { background: #eaf0ff; }

/* Email/Password and Google sign-in dialog */
.user-auth-backdrop { z-index: 1000; }
.user-auth-panel { width: min(450px, 100%); padding: 26px; }
.user-auth-panel .modal-head { margin-bottom: 12px; }
.user-auth-panel .modal-head h2 { margin-top: 8px; }
.user-auth-panel .modal-head p { font-size: 12px; line-height: 1.65; }
.user-auth-form .field-label { margin-top: 13px; }
.user-auth-form .form-control { font-size: 13px; }
.user-auth-submit, .user-auth-google { width: 100%; min-height: 45px; margin-top: 15px; font-size: 13px; }
.user-auth-toggle { width: 100%; margin-top: 9px; min-height: 42px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 17px 0 3px; color: #9aa5b8; font-size: 10px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: #e9edf6; flex: 1; }
.user-auth-google { margin-top: 9px; background: #fff; color: #3f4c67; border-color: #e1e6f0; }
.user-auth-admin-note { margin: 8px 2px 0; color: #8a96ad; font-size: 10px; line-height: 1.55; text-align: center; }
.google-g { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f4f6fb; color: #4285f4; font: 800 13px Arial,sans-serif; }
.user-auth-reset { display: block; margin: 13px auto 0; border: 0; background: transparent; color: #5a6fe0; font-size: 11px; font-weight: 700; }
.user-auth-message { min-height: 0; margin: 10px 0 0; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.user-auth-message:empty { display: none; }
.user-auth-message.is-error { color: #b74a48; }
.user-auth-message.is-success { color: #248962; }
.user-auth-footnote { margin: 16px 0 0; padding-top: 13px; border-top: 1px solid #edf0f7; color: #96a1b4; font-size: 10px; line-height: 1.6; text-align: center; }
.user-auth-panel button:disabled { opacity: .65; cursor: wait; transform: none; }

/* A page-like About section with balanced whitespace */
body[data-active-page="about"] #about { min-height: min(68vh, 700px); align-content: center; padding-top: 70px; padding-bottom: 70px; }
body[data-active-page="library"] #library { min-height: 60vh; }

@media (max-width: 800px) {
  .account-button { padding: 6px; min-height: 38px; }
  .account-button-label { display: none; }
  .account-caret { display: none; }
  .account-avatar { width: 28px; height: 28px; }
  .user-auth-panel { padding: 21px 18px; }
}


/* Live online and total registered account counters */
.member-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 28px;
  align-items: center;
  margin-top: -72px;
  margin-bottom: 92px;
  padding: 24px 28px 18px;
  border: 1px solid #e9edf8;
  border-radius: 20px;
  background: linear-gradient(120deg, #ffffff, #f8faff 65%, #fbf9ff);
  box-shadow: 0 12px 45px rgba(40,56,108,.045);
}
.member-stats-heading .eyebrow { margin-bottom: 7px; }
.member-stats-heading h2 {
  margin: 0 0 5px;
  color: #263552;
  font: 800 22px/1.25 Manrope, sans-serif;
  letter-spacing: -.7px;
}
.member-stats-heading p {
  max-width: 430px;
  margin: 0;
  color: #8793aa;
  font-size: 11px;
  line-height: 1.7;
}
.member-stats-counters { display: flex; align-items: stretch; gap: 12px; }
.member-stat-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 168px;
  padding: 15px 16px;
  border: 1px solid #edf0f8;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
}
.member-stat-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  font-size: 14px;
}
.member-stat-online { color: #259a72; background: #eaf9f2; box-shadow: inset 0 0 0 1px #d9f2e7; }
.member-stat-registered { color: #626fe3; background: #eef0ff; box-shadow: inset 0 0 0 1px #e2e5ff; }
.member-stat-copy { display: flex; flex-direction: column; gap: 2px; }
.member-stat-copy strong { color: #273653; font: 800 23px/1.2 Manrope, sans-serif; letter-spacing: -.7px; }
.member-stat-copy small { color: #8c98ae; font-size: 10px; white-space: nowrap; }
.member-stats-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid #edf0f7;
  color: #8a96ad;
  font-size: 10px;
}
@media (max-width: 1050px) {
  .member-stats { grid-template-columns: 1fr; gap: 15px; margin-top: -57px; padding: 22px; }
  .member-stats-counters { flex-wrap: wrap; }
  .member-stat-card { flex: 1 1 190px; }
  .member-stats-note { grid-column: 1; }
}
@media (max-width: 800px) {
  .member-stats { margin-top: -50px; margin-bottom: 75px; }
}
@media (max-width: 560px) {
  .member-stats { margin-top: -43px; margin-bottom: 61px; padding: 18px 14px 14px; border-radius: 15px; }
  .member-stats-heading h2 { font-size: 19px; }
  .member-stats-heading p { font-size: 10px; }
  .member-stats-counters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .member-stat-card { min-width: 0; padding: 11px 9px; gap: 7px; border-radius: 11px; }
  .member-stat-icon { width: 29px; height: 29px; flex-basis: 29px; border-radius: 9px; }
  .member-stat-copy strong { font-size: 19px; }
  .member-stat-copy small { font-size: 8px; white-space: normal; line-height: 1.4; }
  .member-stats-note { font-size: 9px; line-height: 1.5; }
}

/* Keep the user's requested small offset on only the THE COLLECTION eyebrow */
#library .section-eyebrow {
  position: relative;
  top: 10px;
}
@media (max-width: 560px) {
  #library .section-eyebrow { top: 8px; }
}

/* About page: professional mission, free access, rights notice, and A/L guidance */
.about-page {
  display: grid;
  gap: 22px;
  padding-top: 42px;
  padding-bottom: 26px;
}
.about-intro-card,
.about-free-card,
.about-al-guide {
  border: 1px solid #e9edf7;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 38px rgba(38,54,107,.045);
}
.about-intro-card {
  padding: clamp(24px, 4vw, 42px);
  background: radial-gradient(circle at 92% 12%, rgba(126,111,240,.12), transparent 36%), linear-gradient(135deg,#fff 0%,#f8faff 100%);
}
.about-intro-card h2 {
  max-width: 800px;
  margin: 14px 0 13px;
  font: 800 clamp(27px, 3.7vw, 42px)/1.18 Manrope, sans-serif;
  letter-spacing: -1.6px;
  color: #1b2947;
}
.about-intro-card p,
.about-free-card p,
.about-rights-notice p,
.about-al-guide p {
  margin: 0;
  color: #687791;
  font-size: 14px;
  line-height: 1.9;
}
.about-intro-card p { max-width: 820px; }
.about-free-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(22px, 3.5vw, 32px);
}
.about-section-icon {
  flex: 0 0 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #edf2ff;
  color: #5b72e7;
  font-size: 24px;
}
.about-card-kicker {
  display: block;
  margin-bottom: 7px;
  color: #8b98b1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.7px;
}
.about-free-card h3,
.about-rights-notice h3,
.about-al-guide h3 {
  margin: 0 0 10px;
  color: #263552;
  font: 800 clamp(19px, 2.4vw, 25px)/1.35 Manrope, sans-serif;
  letter-spacing: -.6px;
}
.about-rights-notice {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  padding: clamp(22px, 3.5vw, 32px);
  border: 1px solid #f2b9b9;
  border-left: 5px solid #d52f3e;
  border-radius: 18px;
  background: #fff7f7;
  box-shadow: 0 10px 30px rgba(172,36,53,.055);
}
.about-rights-symbol {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #ffe7e8;
  color: #c52b3b;
  font-size: 24px;
  font-weight: 800;
}
.about-rights-notice .about-card-kicker,
.about-rights-notice h3 { color: #a51e2d; }
.about-rights-notice p + p { margin-top: 10px; }
.about-rights-emphasis { color: #b42332 !important; font-weight: 700; }
.about-al-guide { padding: clamp(22px, 3.5vw, 34px); }
.about-al-heading { max-width: 790px; }
.about-al-heading .eyebrow { margin-bottom: 10px; }
.about-al-heading h3 { max-width: 720px; }
.about-al-steps {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 13px;
  margin-top: 24px;
}
.about-al-steps article {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px;
  border: 1px solid #edf0f8;
  border-radius: 15px;
  background: #fbfcff;
}
.about-al-steps article > span {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #edf1ff;
  color: #526fe5;
  font-size: 10px;
  font-weight: 800;
}
.about-al-steps strong {
  display: block;
  margin: 1px 0 5px;
  color: #2b3957;
  font-size: 13px;
  font-weight: 800;
}
.about-al-steps p { font-size: 12px; line-height: 1.75; }
.about-al-closing {
  margin-top: 19px !important;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f4f2ff;
  color: #6859b8 !important;
  font-weight: 600;
}
.about-page > .about-section {
  width: 100%;
  margin: 0;
  padding-top: 28px;
  padding-bottom: 50px;
  border-top: 1px solid #edf0f7;
}
@media (max-width: 680px) {
  .about-page { gap: 15px; padding-top: 24px; padding-bottom: 12px; }
  .about-intro-card { border-radius: 17px; }
  .about-intro-card h2 { letter-spacing: -.9px; }
  .about-intro-card p,
  .about-free-card p,
  .about-rights-notice p,
  .about-al-guide p { font-size: 12px; line-height: 1.8; }
  .about-free-card,
  .about-rights-notice { gap: 12px; padding: 18px; border-radius: 15px; }
  .about-section-icon,
  .about-rights-symbol { flex-basis: 37px; width: 37px; height: 37px; border-radius: 12px; font-size: 19px; }
  .about-al-steps { grid-template-columns: 1fr; gap: 9px; margin-top: 17px; }
  .about-al-steps article { padding: 13px; }
  .about-page > .about-section { padding-top: 15px; padding-bottom: 34px; }
}


/* Make the creator name more prominent in the About section */
#about .creator-card strong {
  font-size: 20px !important;
  line-height: 1.3;
}

@media (max-width: 560px) {
  #about .creator-card strong {
    font-size: 18px !important;
  }
}
/* GNS Hero text animations */
.hero-copy .eyebrow {
  opacity: 0;
  animation: gnsEyebrowEnter 1.1s ease-out 0.15s forwards;
}

.hero-copy #hero-title {
  opacity: 0;
  animation: gnsTitleEnter 1.4s cubic-bezier(.2, .75, .25, 1) 0.3s forwards;
}

.hero-copy .eyebrow-dot {
  animation: gnsDotPulse 3s ease-in-out 1s infinite;
}

.hero-copy #hero-title span {
  background-size: 200% auto;
  animation: gnsGradientFlow 6s ease-in-out 1.4s infinite alternate;
}

@keyframes gnsEyebrowEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gnsTitleEnter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gnsDotPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px #edeaff;
  }
  50% {
    box-shadow: 0 0 0 7px rgba(117, 91, 232, 0.12);
  }
}

@keyframes gnsGradientFlow {
  from {
    background-position: 0% center;
  }
  to {
    background-position: 100% center;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-copy .eyebrow,
  .hero-copy #hero-title,
  .hero-copy .eyebrow-dot,
  .hero-copy #hero-title span {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* Subtle GNS hero animation */
@keyframes gnsSoftRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gnsGentleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.hero-copy .eyebrow {
  opacity: 0;
  animation:
    gnsSoftRise 1s ease-out 0.1s forwards,
    gnsGentleFloat 2.8s ease-in-out 1.4s infinite;
}

.hero-copy #hero-title .hero-title-line-first {
  opacity: 0;
  animation:
    gnsSoftRise 1s ease-out 0.35s forwards,
    gnsGentleFloat 5s ease-in-out 1.65s infinite;
}

.hero-copy #hero-title .hero-title-line-second {
  opacity: 0;
  animation:
    gnsSoftRise 1s ease-out 0.7s forwards,
    gnsGentleFloat 5s ease-in-out 2s infinite;
}

.hero-copy .hero-subtitle {
  opacity: 0;
  animation:
    gnsSoftRise 1s ease-out 0.95s forwards,
    gnsGentleFloat 5s ease-in-out 2.25s infinite;
}

.hero-copy .hero-actions,
.hero-copy .hero-proof {
  opacity: 0;
  animation:
    gnsSoftRise 1s ease-out 1.2s forwards,
    gnsGentleFloat 5s ease-in-out 2.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy .eyebrow,
  .hero-copy #hero-title .hero-title-line-first,
  .hero-copy #hero-title .hero-title-line-second,
  .hero-copy .hero-subtitle,
  .hero-copy .hero-actions,
  .hero-copy .hero-proof {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* GNS: Smooth animation throughout the home page */

@keyframes gnsWholePageRise {
  from {
    opacity: 0;
    translate: 0 9px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.gns-home-reveal:not(.is-revealed) {
  opacity: 0 !important;
  animation: none !important;
}

.gns-home-reveal.is-revealed {
  opacity: 1;
  animation:
    gnsWholePageRise 0.95s
    cubic-bezier(.2, .7, .2, 1)
    var(--gns-reveal-delay, 0ms) both !important;
}

@media (prefers-reduced-motion: reduce) {
  .gns-home-reveal {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }
}
/* Laptop/desktop: reduce scroll animation wobble */
@keyframes gnsDesktopSoftRise {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 769px) {
  .gns-home-reveal {
    will-change: auto !important;
  }

  .gns-home-reveal.is-revealed {
    animation: gnsDesktopSoftRise
      0.25s ease-out
      var(--gns-reveal-delay, 0ms)
      both !important;
  }
}
/* Prevent the page from shifting when scrolling */
html {
  scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}
/* Fix double scrollbar and sudden page shift on laptops */
@media (min-width: 769px) {
  html {
    overflow-x: clip !important;
    overflow-y: scroll !important;
    scrollbar-gutter: stable;
  }

  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100%;
  }
}
/* Keep scroll-reveal animation on Home only */
body[data-active-page="library"] .gns-home-reveal,
body[data-active-page="about"] .gns-home-reveal {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  translate: none !important;
  will-change: auto !important;
}
/* Password Show / Hide button */
.password-input-wrap {
  position: relative;
  width: 100%;
}

.password-input-wrap .form-control {
  padding-right: 76px;
}

.password-toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #5269e8;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}

.password-toggle-btn:hover {
  background: #f0efff;
}

.password-toggle-btn:focus-visible {
  outline: 2px solid #5269e8;
  outline-offset: 2px;
}