:root{color:#263238;background:#fffaf2;font-family:Microsoft YaHei,PingFang SC,Noto Sans CJK SC,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;background:linear-gradient(180deg,#fff8e5e6,#f4fcf2f2),#fffaf2}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{min-height:100vh}.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(18px,4vw,54px);border-bottom:1px solid rgba(38,50,56,.08);background:#fffaf2eb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brand{display:inline-flex;align-items:center;gap:12px;min-width:0;border:0;background:transparent;color:#263238;font-weight:800}.brand img{width:116px;height:auto;flex:0 0 auto}.brand span{white-space:nowrap}.top-nav{display:inline-flex;gap:8px;padding:6px;border:1px solid rgba(38,50,56,.1);border-radius:8px;background:#ffffffc7}.top-nav button,.ghost-button,.resume-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:0;border-radius:8px;background:transparent;color:#526064}.top-nav button{padding:0 14px}.top-nav button.active{background:#ffdd3d;color:#263238;box-shadow:0 8px 18px #f7ae1f38}main{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:34px 0 56px}.home-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,420px);gap:clamp(28px,5vw,64px);align-items:center}.home-copy{padding:clamp(16px,2vw,28px) 0}.eyebrow{margin:0 0 14px;color:#147c67;font-size:15px;font-weight:800}h1,h2,h3,p{margin-top:0}h1{margin-bottom:16px;color:#1f2f34;font-size:clamp(36px,6vw,68px);line-height:1.06;letter-spacing:0}.lead{max-width:680px;margin-bottom:26px;color:#53686c;font-size:19px;line-height:1.8}.friendly-lead{display:grid;gap:4px}.friendly-lead strong{color:#24353a;font-size:1.1em}.friendly-lead span{display:block}.home-actions,.player-actions{display:flex;flex-wrap:wrap;gap:12px}.primary-action,.secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:8px;text-decoration:none;font-weight:800}.primary-action{border:0;background:#0fa37f;color:#fff;box-shadow:0 12px 28px #0fa37f38}.secondary-action{border:1px solid rgba(38,50,56,.14);background:#fff;color:#263238}.compact{min-height:42px;padding:0 16px}.resume-link,.ghost-button{margin-top:16px;padding:0 10px}.home-visual{overflow:hidden;border:1px solid rgba(38,50,56,.08);border-radius:8px;background:#fff;box-shadow:0 22px 50px #3e585324}.home-visual img{display:block;width:100%;aspect-ratio:3 / 2;object-fit:cover}.tutorial-panel,.course-entry-band,.player-view{grid-column:1 / -1;margin-top:clamp(26px,5vw,56px)}.courses-view{margin-top:clamp(12px,3vw,28px)}.tutorial-panel,.course-entry-band,.state-panel{padding:clamp(18px,4vw,34px);border:1px solid rgba(38,50,56,.08);border-radius:8px;background:#ffffffdb;box-shadow:0 18px 40px #3e585317}.featured-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 22px;align-items:center;background:linear-gradient(135deg,#ffdd3d4d,#ffffffeb)}.featured-entry .section-title,.featured-entry p{margin-bottom:0}.featured-entry .primary-action{grid-row:span 2}.section-title{display:flex;align-items:center;gap:12px;margin-bottom:22px}.section-title span{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;background:#ffdd3d;font-weight:900}.section-title h2{margin:0;font-size:clamp(24px,3vw,34px)}.intro-layout{display:grid;grid-template-columns:minmax(220px,310px) minmax(0,1fr);gap:clamp(20px,4vw,42px);align-items:center}.phone-video-frame{width:min(100%,310px);margin:0 auto;padding:10px;border-radius:8px;background:#1f2f34;box-shadow:inset 0 0 0 1px #ffffff29}.phone-video-frame video{display:block;width:100%;aspect-ratio:9 / 16;border-radius:6px;background:#111}.tutorial-side h3{margin-bottom:10px;font-size:clamp(25px,3vw,38px);line-height:1.2}.tutorial-side p,.course-entry-band p{color:#53686c;font-size:18px;line-height:1.7}.video-error{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 0;color:#a33b2c;font-size:15px}.video-error p{margin:0}.video-error button{min-height:38px;padding:0 14px;border:1px solid rgba(163,59,44,.22);border-radius:8px;background:#fff;color:#a33b2c;font-weight:800}.page-heading{margin-bottom:24px}.page-heading h1{margin-bottom:8px;font-size:clamp(34px,5vw,54px)}.page-heading p{color:#53686c}.course-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}.filters{position:sticky;top:88px;display:grid;gap:18px}.filter-group{display:grid;gap:8px;padding:16px;border:1px solid rgba(38,50,56,.08);border-radius:8px;background:#ffffffd9}.filter-group h2{margin-bottom:4px;color:#53686c;font-size:15px}.filter-group button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 14px;border:1px solid rgba(38,50,56,.12);border-radius:8px;background:#fff;color:#263238;text-align:left}.filter-group button.active{border-color:#0fa37f;background:#e9fbf5;color:#0b7159;font-weight:900}.filter-group small{color:#6f7e81}.tone-green.active{border-color:#24a65a;background:#eaf9ee}.tone-blue.active{border-color:#1689d9;background:#ebf6ff}.tone-yellow.active{border-color:#e0a600;background:#fff7d6}.tone-orange.active{border-color:#f47735;background:#fff0e7}.level-toggle{grid-template-columns:1fr 1fr}.level-toggle h2{grid-column:1 / -1}.course-list{display:grid;gap:18px}.book-summary{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center;padding:18px;border:1px solid rgba(38,50,56,.08);border-radius:8px;background:#ffffffe0}.book-summary img,.player-heading img{display:block;width:100%;border-radius:6px;background:#fff;object-fit:contain}.book-summary img{aspect-ratio:16 / 7}.book-summary p,.player-heading p{margin-bottom:6px;color:#688184}.book-summary h2{margin:0;font-size:clamp(24px,3vw,36px)}.book-summary small{display:block;margin-top:8px;color:#688184}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.game-grid button{display:grid;min-height:116px;align-content:center;justify-items:start;gap:6px;padding:14px 10px;border:1px solid rgba(38,50,56,.1);border-radius:8px;background:#fff;color:#263238;text-align:left;box-shadow:0 10px 24px #3e585312}.game-grid button:hover{transform:translateY(-2px)}.game-grid span{width:100%;font-size:19px;font-weight:900;line-height:1.35}.game-grid small{color:#688184}.game-grid .page-range{color:#0b7159;font-weight:900}.game-grid button.watched{border-color:#0fa37f;background:#eefbf5}.player-heading{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:22px;align-items:center;margin:18px 0 22px}.player-heading h1{margin:0;font-size:clamp(30px,4vw,50px)}.player-heading img{aspect-ratio:16 / 7}.video-stage{overflow:hidden;padding:clamp(10px,2vw,18px);border-radius:8px;background:#1f2f34;box-shadow:0 22px 50px #1f2f3433}.video-stage video{display:block;width:100%;max-height:72vh;border-radius:6px;background:#111}.player-actions{justify-content:space-between;margin:18px 0}.quick-games{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:8px}.quick-games button{min-height:42px;border:1px solid rgba(38,50,56,.12);border-radius:8px;background:#fff;color:#263238;font-weight:800}.quick-games button.active{border-color:#0fa37f;background:#0fa37f;color:#fff}.state-panel{margin-top:42px;text-align:center;color:#53686c}.state-panel.error{color:#a33b2c}@media(max-width:900px){.site-header{align-items:stretch;flex-direction:column;gap:10px}.top-nav{width:100%}.top-nav button{flex:1}.home-view,.intro-layout,.course-layout,.player-heading{grid-template-columns:1fr}.home-visual{order:-1}.filters{position:static}.filter-group{grid-template-columns:repeat(3,minmax(0,1fr))}.filter-group h2{grid-column:1 / -1}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-games{grid-template-columns:repeat(5,minmax(0,1fr))}.player-heading img{max-width:320px}.featured-entry{grid-template-columns:1fr}.featured-entry .primary-action{grid-row:auto;width:100%}}@media(max-width:560px){.site-header{padding:10px 18px}main{width:min(100% - 24px,1180px);padding-top:16px}.brand img{width:92px}.brand span{font-size:15px}h1{font-size:35px}.lead,.tutorial-side p,.course-entry-band p{font-size:16px}.filter-group,.book-summary,.game-grid{grid-template-columns:1fr}.game-grid button{min-height:88px;padding:14px 16px}.home-view{gap:22px}.home-copy{padding-top:6px}.home-actions .primary-action,.home-actions .secondary-action{flex:1 1 150px}.player-heading{gap:12px;margin-bottom:14px}.player-heading img{display:none}.player-heading h1{font-size:32px}}