:root{--bg: #0b0d1a;--surface: #111327;--card: #161929;--card-hover: #1c2038;--border: #242843;--border-light: #2e3459;--accent-flex: #7c6aff;--accent-flex2: #9f91ff;--accent-grid: #0fdb8c;--accent-grid2: #3ef5a8;--accent-warn: #ff6b9d;--accent-info: #3ecfff;--text: #e4e9ff;--text-dim: #9aa0c0;--code-bg: #080a14;--code-text: #e4e9ff;--keyword: #c084fc;--property: #38bdf8;--value: #34d399;--string: #fbbf24;--comment: #4b5563;--c1: #7c6aff;--c2: #3ecfff;--c3: #ff6b9d;--c4: #ffb347;--c5: #56e0a0;--c6: #f472b6;--radius: 12px;--radius-lg: 18px;--shadow: 0 4px 24px rgba(0,0,0,.4)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:Inter,system-ui,sans-serif;background:var(--bg);background-image:radial-gradient(circle at 15% 50%,rgba(124,106,255,.05),transparent 30%),radial-gradient(circle at 85% 30%,rgba(15,219,140,.04),transparent 30%);background-attachment:fixed;color:var(--text);line-height:1.6;min-height:100vh}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:4px}.hero{background:radial-gradient(ellipse 100% 80% at 50% -10%,rgba(124,106,255,.2) 0%,transparent 60%),linear-gradient(180deg,#0f1229 0%,var(--bg) 100%);padding:80px 24px 60px;text-align:center;border-bottom:1px solid var(--border);position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237c6aff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:.5}.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;background:#7c6aff1f;border:1px solid rgba(124,106,255,.35);color:var(--accent-flex2);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px;position:relative}.hero h1{font-size:clamp(2.2rem,6vw,4.5rem);font-weight:900;letter-spacing:-.02em;line-height:1.1;position:relative}.hero h1 .flex-word{background:linear-gradient(90deg,#7c6aff,#9f91ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero h1 .grid-word{background:linear-gradient(90deg,#0fdb8c,#3ef5a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero p{margin:16px auto 0;color:var(--text-dim);font-size:1.05rem;max-width:520px;position:relative}.hero-stats{display:flex;gap:24px;justify-content:center;margin-top:32px;flex-wrap:wrap;position:relative}.hero-stat{background:#ffffff0a;border:1px solid var(--border);padding:12px 22px;border-radius:var(--radius);text-align:center}.hero-stat .num{font-size:1.6rem;font-weight:800;background:linear-gradient(90deg,var(--accent-flex),var(--accent-info));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-stat .lbl{font-size:.72rem;color:var(--text-dim);margin-top:2px}.global-nav{position:sticky;top:0;z-index:200;background:#0b0d1aa6;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 8px 32px #0000004d;display:flex;align-items:center;padding:0 24px;gap:8px}.nav-tab{display:flex;align-items:center;gap:8px;padding:16px 20px;font-size:.9rem;font-weight:600;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;background:none;border-top:none;border-left:none;border-right:none;font-family:Inter,sans-serif}.nav-tab:hover{color:var(--text)}.nav-tab.active-flex{color:var(--accent-flex2);border-bottom-color:var(--accent-flex)}.nav-tab.active-grid{color:var(--accent-grid2);border-bottom-color:var(--accent-grid)}.nav-dot{width:8px;height:8px;border-radius:50%}.nav-dot-flex{background:var(--accent-flex)}.nav-dot-grid{background:var(--accent-grid)}.level-bar{display:flex;gap:6px;padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap}.level-btn{padding:6px 18px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:Inter,sans-serif}.level-btn:hover{border-color:var(--border-light);color:var(--text)}.level-btn.active{background:var(--accent-flex);border-color:var(--accent-flex);color:#fff}.level-btn.active.grid-mode{background:var(--accent-grid);border-color:var(--accent-grid);color:#000}.app-body{max-width:1200px;margin:0 auto;padding:32px 24px 80px}.section-group{margin-bottom:48px}.section-header{display:flex;align-items:flex-end;gap:14px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}.level-pill{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:999px}.pill-beginner{background:#38bdf826;color:#38bdf8;border:1px solid rgba(56,189,248,.3)}.pill-intermediate{background:#fbbf241f;color:#fbbf24;border:1px solid rgba(251,191,36,.3)}.pill-advanced{background:#ef44441f;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.section-header h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(90deg,var(--text) 60%,var(--text-dim));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.prop-card{background:#161929a6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-lg);margin-bottom:24px;overflow:hidden;transition:all .35s cubic-bezier(.25,.8,.25,1);position:relative;box-shadow:0 8px 32px #00000026}.prop-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent-flex),var(--accent-info),var(--accent-grid));opacity:0;transition:opacity .4s ease}.prop-card:hover{border-color:#ffffff1f;box-shadow:0 16px 48px #00000080,0 0 0 1px #7c6aff33;transform:translateY(-3px)}.prop-card:hover:before{opacity:1}.prop-card-header{padding:22px 24px 20px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.prop-name{font-family:Fira Code,monospace;font-size:1.15rem;font-weight:700;background:linear-gradient(90deg,var(--accent-info),var(--accent-flex2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.01em}.prop-applies{font-size:.7rem;padding:3px 10px;border-radius:999px;font-weight:600;flex-shrink:0}.applies-container{background:#7c6aff26;color:var(--accent-flex2);border:1px solid rgba(124,106,255,.3)}.applies-item{background:#ff6b9d1f;color:#ff6b9d;border:1px solid rgba(255,107,157,.3)}.applies-any{background:#3ecfff1a;color:var(--accent-info);border:1px solid rgba(62,207,255,.25)}.desc-block-wrap{display:flex;flex-direction:column;gap:10px;flex:1 1 100%}.desc-block--lead{padding:13px 16px;background:#ffffff06;border-left:3px solid var(--accent-flex);border-radius:0 8px 8px 0}.desc-block--section{background:#ffffff05;border:1px solid var(--border);border-radius:8px;overflow:hidden}.desc-section-title{font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-flex2);background:#7c6aff14;border-bottom:1px solid rgba(124,106,255,.15);padding:7px 14px;display:flex;align-items:center;gap:6px}.desc-section-title:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-flex);flex-shrink:0}.desc-accent--grid .desc-section-title{color:var(--accent-grid2);background:#0fdb8c12;border-bottom-color:#0fdb8c2e}.desc-accent--grid .desc-section-title:before{background:var(--accent-grid)}.desc-accent--grid.desc-block--lead{border-left-color:var(--accent-grid)}.desc-accent--unit .desc-section-title{color:var(--accent-info);background:#3ecfff0f;border-bottom-color:#3ecfff2e}.desc-accent--unit .desc-section-title:before{background:var(--accent-info)}.desc-accent--unit.desc-block--lead{border-left-color:var(--accent-info)}.desc-block-body{padding:2px 0}.desc-para{color:var(--text);font-size:.94rem;line-height:1.8;padding:7px 14px;margin:0}.desc-block--lead .desc-para{padding:0;font-size:.97rem;line-height:1.8}.desc-para strong{color:#fff;font-weight:700}.desc-code{font-family:Fira Code,monospace;color:var(--accent-info);background:#3ecfff1f;padding:2px 7px;border-radius:5px;font-size:.87em;letter-spacing:-.01em;word-break:break-word}.split-panel{display:grid;grid-template-columns:1fr 1fr;min-height:300px}@media (max-width: 720px){.split-panel{grid-template-columns:1fr}}.panel-code{border-right:1px solid var(--border);display:flex;flex-direction:column}.panel-demo{display:flex;flex-direction:column}.panel-label{padding:10px 16px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);background:#ffffff05;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}.panel-label span{width:6px;height:6px;border-radius:50%;display:inline-block}.code-display{flex:1;padding:20px;background:#04050a80;box-shadow:inset 0 2px 24px #0006;font-family:Fira Code,monospace;font-size:.82rem;line-height:1.8;overflow-x:auto;white-space:pre}.tok-selector{color:var(--accent-flex2)}.tok-brace{color:var(--text-dim)}.tok-prop{color:var(--property)}.tok-colon{color:var(--text-dim)}.tok-val{color:var(--value);font-weight:600}.tok-semi{color:var(--text-dim)}.tok-comment{color:var(--comment);font-style:italic}.demo-controls{padding:14px 16px;background:#ffffff05;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:6px}.val-btn{padding:5px 14px;border-radius:8px;border:1px solid var(--border-light);background:#ffffff05;color:var(--text-dim);font-size:.78rem;font-weight:500;cursor:pointer;transition:all .25s cubic-bezier(.25,.8,.25,1);font-family:Fira Code,monospace}.val-btn:hover{color:var(--text);border-color:#ffffff4d;transform:translateY(-1px);background:#ffffff0d;box-shadow:0 4px 12px #0000004d}.val-btn.active{background:#7c6aff26;color:#fff;border-color:var(--accent-flex);box-shadow:0 0 16px #7c6aff4d}.val-btn.active.grid-btn{background:var(--accent-grid);border-color:var(--accent-grid);color:#000}.demo-stage{flex:1;padding:20px;display:flex;align-items:flex-start;min-height:180px}.demo-container{background:#ffffff08;border:2px dashed var(--border-light);border-radius:10px;padding:12px;width:100%;min-height:140px;transition:all .35s cubic-bezier(.4,0,.2,1)}.fi{border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#ffffffe6;transition:all .35s cubic-bezier(.4,0,.2,1);min-width:40px;min-height:40px;padding:8px;font-family:Fira Code,monospace}.fi-1{background:linear-gradient(135deg,#7c6aff,#5a49d6)}.fi-2{background:linear-gradient(135deg,#3ecfff,#1aa8d4)}.fi-3{background:linear-gradient(135deg,#ff6b9d,#cc4470)}.fi-4{background:linear-gradient(135deg,#ffb347,#cc8810)}.fi-5{background:linear-gradient(135deg,#56e0a0,#2ca870)}.fi-6{background:linear-gradient(135deg,#f472b6,#c2408d)}.gi{border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#000c;transition:all .35s ease;min-height:40px;padding:8px;font-family:Fira Code,monospace}.gi-1{background:linear-gradient(135deg,#0fdb8c,#0aba74)}.gi-2{background:linear-gradient(135deg,#3ef5a8,#25e090)}.gi-3{background:linear-gradient(135deg,#56e0a0,#30c878)}.gi-4{background:linear-gradient(135deg,#80ffcc,#50e8a8)}.gi-5{background:linear-gradient(135deg,#a3ffda,#70f0b8)}.gi-6{background:linear-gradient(135deg,#c0ffec,#90f8d0)}.gi-7{background:linear-gradient(135deg,#0fdb8c,#0aba74)}.gi-8{background:linear-gradient(135deg,#3ef5a8,#25e090)}.gi-9{background:linear-gradient(135deg,#56e0a0,#30c878)}.slider-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.slider-wrap label{font-size:.78rem;color:var(--text-dim);min-width:80px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--border-light);border-radius:4px;outline:none;width:150px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-flex);cursor:pointer;border:2px solid var(--card)}.slider-val{font-family:Fira Code,monospace;font-size:.8rem;color:var(--accent-info);min-width:40px}.practice-box{margin:0 20px 20px;background:#7c6aff0f;border:1px solid rgba(124,106,255,.2);border-radius:var(--radius);padding:16px 20px}.practice-box.grid-practice{background:#0fdb8c0d;border-color:#0fdb8c33}.practice-title{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-flex2);margin-bottom:8px;display:flex;align-items:center;gap:6px}.practice-title.grid-t{color:var(--accent-grid2)}.practice-box p{font-size:.84rem;color:var(--text-dim)}.practice-box code{font-family:Fira Code,monospace;color:var(--accent-info);background:#3ecfff1a;padding:1px 6px;border-radius:4px;font-size:.8rem}.value-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 24px;border-top:1px solid var(--border)}.chip{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:.78rem}.chip-key{font-family:Fira Code,monospace;color:var(--property)}.chip-sep{color:var(--text-dim);margin:0 4px}.chip-meaning{color:var(--text-dim)}.copy-btn{padding:4px 12px;border-radius:6px;border:1px solid var(--border-light);background:transparent;color:var(--text-dim);font-size:.72rem;cursor:pointer;transition:all .15s;font-family:Inter,sans-serif;margin-left:auto}.copy-btn:hover{background:var(--border);color:var(--text)}.copy-btn.copied{background:#38bdf826;color:var(--accent-info);border-color:var(--accent-info)}.intro-card{background:linear-gradient(135deg,#7c6aff1f,#3ecfff0d);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(124,106,255,.3);box-shadow:0 8px 32px #0003,inset 0 1px #ffffff1a;border-radius:var(--radius-lg);padding:32px;margin-bottom:32px}.intro-card.grid-intro{background:linear-gradient(135deg,#0fdb8c1a,#3ef5a80a);border-color:#0fdb8c4d}.intro-card h3{font-size:1.3rem;font-weight:800;margin-bottom:12px;letter-spacing:-.01em}.intro-card p{color:var(--text);font-size:.95rem;line-height:1.8;opacity:.9}.axis-visual-row{display:flex;gap:16px;margin-top:20px;flex-wrap:wrap}.axis-box{flex:1;min-width:160px;background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:16px;text-align:center}.axis-box .axis-lbl{font-size:.72rem;color:var(--text-dim);font-weight:600;margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em}.pattern-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:24px}.pattern-title{padding:14px 20px;font-weight:700;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:.95rem}.pattern-body{display:grid;grid-template-columns:1fr 1fr}@media (max-width: 620px){.pattern-body{grid-template-columns:1fr}}.pattern-code{padding:20px;background:var(--code-bg);border-right:1px solid var(--border);font-family:Fira Code,monospace;font-size:.78rem;line-height:1.8;overflow-x:auto;white-space:pre}.pattern-preview{padding:20px;display:flex;flex-direction:column;justify-content:center}.app-two-col{display:grid;grid-template-columns:220px 1fr;max-width:1300px;margin:0 auto;align-items:start;gap:0}@media (max-width: 900px){.app-two-col{grid-template-columns:1fr}}.app-main{padding:32px 28px 80px;min-width:0}.prop-sidebar{position:sticky;top:65px;height:calc(100vh - 65px);overflow-y:auto;border-right:1px solid rgba(255,255,255,.04);padding:32px 0;background:transparent;scrollbar-width:thin}@media (max-width: 900px){.prop-sidebar{display:none}}.sidebar-title{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);padding:0 16px 8px}.sidebar-group{margin-bottom:16px}.sidebar-level{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-flex2);padding:6px 16px 4px}.sidebar-link{display:flex;align-items:center;gap:8px;padding:5px 16px;font-size:.78rem;color:var(--text-dim);text-decoration:none;transition:all .15s;border-left:2px solid transparent;font-family:Fira Code,monospace}.sidebar-link:hover{color:var(--text);background:#7c6aff0f;border-left-color:var(--accent-flex)}.sidebar-link.grid-link:hover{border-left-color:var(--accent-grid);background:#0fdb8c0d}.sidebar-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}.dot-container{background:var(--accent-flex2)}.dot-item{background:var(--accent-warn)}.search-bar-row{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 24px}.search-wrap{max-width:520px;position:relative;display:flex;align-items:center;gap:8px}.search-icon{font-size:.9rem;color:var(--text-dim)}.search-input{flex:1;background:var(--card);border:1px solid var(--border-light);border-radius:8px;padding:8px 36px 8px 12px;color:var(--text);font-size:.85rem;font-family:Inter,sans-serif;outline:none;transition:border-color .2s}.search-input:focus{border-color:var(--accent-flex)}.search-input::placeholder{color:var(--text-dim)}.search-clear{position:absolute;right:10px;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.8rem;padding:2px 4px;transition:color .15s}.search-clear:hover{color:var(--text)}.vs-section{padding:32px 0 80px}.vs-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:24px}.vs-header-row{display:grid;grid-template-columns:120px 1fr 1fr;background:var(--surface);border-bottom:1px solid var(--border)}.vs-col-label{padding:14px 20px;font-weight:700;font-size:.85rem;display:flex;align-items:center}.vs-col-label.flex-col{color:var(--accent-flex2)}.vs-col-label.grid-col{color:var(--accent-grid2)}.vs-row{display:grid;grid-template-columns:120px 1fr 1fr;border-bottom:1px solid var(--border)}.vs-row:last-child{border-bottom:none}.vs-row-alt{background:#ffffff04}.vs-aspect{padding:14px 20px;font-size:.8rem;font-weight:700;color:var(--text-dim);background:#ffffff05;border-right:1px solid var(--border)}.vs-flex{padding:14px 20px;font-size:.83rem;color:var(--text-dim);border-right:1px solid var(--border)}.vs-grid{padding:14px 20px;font-size:.83rem;color:var(--text-dim)}.vs-tip-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}@media (max-width: 600px){.vs-tip-row{grid-template-columns:1fr}}.vs-tip{padding:20px 22px;border-radius:var(--radius-lg);border:1px solid}.flex-tip{background:#7c6aff0f;border-color:#7c6aff40}.grid-tip{background:#0fdb8c0d;border-color:#0fdb8c33}.vs-tip-title{font-weight:700;font-size:.9rem;margin-bottom:10px}.flex-tip .vs-tip-title{color:var(--accent-flex2)}.grid-tip .vs-tip-title{color:var(--accent-grid2)}.vs-tip ul{list-style:none;padding:0}.vs-tip li{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;color:var(--text-dim);padding:3px 0}.curriculum-sidebar{top:72px;height:calc(100vh - 72px);padding:24px 0}.active-sidebar-link:before,.active-sidebar-grid-link:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px}.sidebar-link{position:relative;padding:8px 16px 8px 18px}.active-sidebar-link{color:var(--text);background:#7c6aff14}.active-sidebar-link:before{background:var(--accent-flex)}.active-sidebar-link .sidebar-dot{box-shadow:0 0 8px #7c6affcc}.active-sidebar-grid-link{color:var(--text);background:#0fdb8c14}.active-sidebar-grid-link:before{background:var(--accent-grid)}.active-sidebar-grid-link .sidebar-dot{box-shadow:0 0 8px #0fdb8ccc}.course-btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:700;font-size:1.05rem;text-decoration:none;transition:transform .2s,box-shadow .2s}.course-btn:hover{transform:translateY(-2px)}.flex-course-btn{background:var(--accent-flex);color:#fff;box-shadow:0 8px 24px #7c6aff40}.grid-course-btn{background:var(--surface);border:1px solid var(--accent-grid);color:var(--accent-grid2)}.fade-in{animation:fadeIn .4s ease forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.nav-breadcrumb:hover{background:var(--surface)!important;border-color:var(--border-light)!important}