@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#080d19;--panel:#10182a;--panel2:#131f35;--text:#f4f7ff;--muted:#a0acc2;--line:rgba(181,198,232,.14);--blue:#6b8cff;--cyan:#52e1dc;--purple:#a18aff;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 80% -10%,rgba(81,111,255,.14),transparent 40%),var(--bg);color:var(--text);font-family:Manrope,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(1120px,calc(100% - 44px));margin-inline:auto}.site-header{height:78px;padding:0 max(22px,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(8,13,25,.78);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.06em;font-size:13px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#07101d;font-weight:900;letter-spacing:-.04em;font-size:15px}.muted{color:var(--muted)}.nav{display:flex;align-items:center;gap:8px}.nav a{font-size:12px;color:var(--muted);padding:10px 13px;border-radius:10px;transition:.2s}.nav a:hover,.nav a.active{background:rgba(111,143,255,.12);color:#fff}.menu-toggle{display:none;background:var(--panel);border:1px solid var(--line);color:white;border-radius:10px;padding:7px 11px}.hero{min-height:570px;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:35px;padding-top:55px;padding-bottom:55px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.18em;color:#8da7ff;margin:0 0 17px}.pulse{display:inline-block;width:7px;height:7px;background:var(--cyan);border-radius:50%;margin-right:9px;box-shadow:0 0 14px var(--cyan)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(39px,5.4vw,67px);line-height:1.08;letter-spacing:-.055em;margin-bottom:24px}h2{font-size:clamp(25px,3.5vw,37px);line-height:1.2;letter-spacing:-.04em;margin-bottom:0}h3{font-size:19px;line-height:1.3;margin-bottom:10px}.gradient-text{background:linear-gradient(100deg,#8ca4ff 5%,#69d9e5 55%,#b3a0ff);-webkit-background-clip:text;background-clip:text;color:transparent}.music-gradient{background-image:linear-gradient(100deg,#ff8dcb,#b5a0ff,#75baff)}.lead{font-size:15px;color:var(--muted);max-width:560px;line-height:1.9}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:12px 17px;border-radius:12px;font-size:12px;font-weight:800;border:1px solid transparent;transition:transform .2s,background .2s;cursor:pointer}.button:hover{transform:translateY(-2px)}.primary{background:linear-gradient(115deg,#8297ff,#5dd5d7);color:#08101c;box-shadow:0 9px 30px rgba(93,157,255,.16)}.secondary{border-color:var(--line);background:rgba(255,255,255,.025);color:var(--text)}.secondary:hover{background:rgba(255,255,255,.07)}.mini-stats{display:flex;gap:26px;margin-top:43px}.mini-stats div{display:flex;flex-direction:column;gap:2px}.mini-stats strong{font-size:15px}.mini-stats span{font-size:10px;color:var(--muted)}.hero-art{height:370px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid rgba(126,154,255,.22);border-radius:50%;transform:rotate(-22deg)}.orbit-one{width:310px;height:250px}.orbit-two{width:245px;height:340px;transform:rotate(45deg);border-color:rgba(82,225,220,.2)}.core{width:174px;height:174px;border-radius:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(104,134,255,.27),rgba(48,214,218,.12));border:1px solid rgba(171,192,255,.32);box-shadow:0 0 90px rgba(88,118,255,.2),inset 0 0 30px rgba(255,255,255,.035);transform:rotate(-8deg)}.core span{font-size:53px;font-weight:800;letter-spacing:-.1em}.core small{font-size:8px;letter-spacing:.19em;color:var(--muted);margin-top:6px}.float-card{position:absolute;background:rgba(18,27,46,.92);border:1px solid var(--line);padding:11px 14px;border-radius:12px;font-size:12px;font-weight:800;box-shadow:0 14px 35px rgba(0,0,0,.22)}.card-code{top:50px;left:0}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px}.dot-green{background:#6fe5b3}.card-music{right:0;top:120px;color:#ff9ad4}.card-music span{color:var(--muted);font-size:10px;margin-left:6px}.card-web{bottom:42px;right:26px;color:#79e5e0;line-height:1.25}.card-web small{font-size:8px;letter-spacing:.16em;color:var(--muted)}.section{padding-top:42px;padding-bottom:42px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:25px}.section-heading .eyebrow{margin-bottom:10px}.section-heading>p{max-width:330px;color:var(--muted);font-size:12px;margin-bottom:3px}.feature-grid,.steps-grid,.project-grid,.download-grid,.tips-grid,.language-grid{display:grid;gap:16px}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-card{position:relative;display:block;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,rgba(18,29,50,.9),rgba(13,19,33,.8));overflow:hidden;transition:.25s}.feature-card:hover,.project-card:hover{transform:translateY(-4px);border-color:rgba(129,156,255,.45)}.feature-card:after{content:"";position:absolute;width:180px;height:180px;right:-70px;top:-70px;border-radius:50%;filter:blur(4px);background:rgba(107,140,255,.1)}.music-card:after{background:rgba(255,105,185,.1)}.feature-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:rgba(111,143,255,.13);color:#aabaff;font-size:22px;margin-bottom:24px}.music-card .feature-icon{color:#ff9ad4;background:rgba(255,105,185,.1)}.feature-card .eyebrow{margin-bottom:8px}.feature-card h3{font-size:25px}.feature-card>p:not(.eyebrow){color:var(--muted);font-size:13px;max-width:440px;min-height:50px}.text-link{display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:800;color:#b5c3ff;margin-top:10px}.text-link b{font-size:17px}.community-band{margin-top:36px;margin-bottom:65px;border:1px solid var(--line);border-radius:var(--radius);padding:27px 30px;background:linear-gradient(110deg,rgba(92,117,219,.13),rgba(47,195,200,.07));display:flex;align-items:center;justify-content:space-between;gap:20px}.community-band .eyebrow{margin-bottom:8px}.community-band h2{font-size:25px;margin-bottom:8px}.community-band p:not(.eyebrow){font-size:12px;color:var(--muted);margin-bottom:0}.footer{width:min(1120px,calc(100% - 44px));margin:0 auto;border-top:1px solid var(--line);padding:22px 0 28px;display:flex;justify-content:space-between;gap:15px;color:#71809b;font-size:10px}.page-hero{padding-top:100px;padding-bottom:56px;min-height:360px}.page-hero h1{max-width:850px}.page-hero .lead{max-width:690px}.steps-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.info-card,.tip-card,.download-card{border:1px solid var(--line);background:rgba(16,24,42,.78);border-radius:18px;padding:23px}.number{display:inline-block;font-size:11px;letter-spacing:.12em;color:var(--cyan);font-weight:800;margin-bottom:24px}.info-card p,.tip-card p,.download-card p{font-size:12px;color:var(--muted);margin-bottom:0}.callout{display:flex;align-items:center;gap:20px;padding:26px;border:1px solid var(--line);border-radius:20px;background:var(--panel);margin-top:25px;margin-bottom:55px}.callout-icon{display:grid;place-items:center;flex:0 0 55px;height:55px;border-radius:16px;background:rgba(255,117,190,.12);color:#ff9ad4;font-size:27px}.callout p{color:var(--muted);font-size:12px;margin-bottom:0}.callout h2{font-size:23px;margin-bottom:8px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:rgba(16,24,42,.8);transition:.25s}.project-preview{height:210px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-number{background:radial-gradient(circle at 50% 60%,rgba(88,128,255,.3),transparent 55%),#101b32}.preview-password{background:radial-gradient(circle at 50% 60%,rgba(166,112,255,.24),transparent 55%),#11162a}.preview-label{position:absolute;top:19px;left:20px;font-size:9px;letter-spacing:.15em;color:#9baed4}.plate{background:#edf1f7;color:#172137;border:5px solid #c8d1df;border-radius:10px;padding:13px 19px;font-size:24px;font-weight:800;letter-spacing:.06em;box-shadow:0 12px 40px #05091355;transform:rotate(-3deg)}.plate small{font-size:10px;margin-left:8px}.preview-symbol{position:absolute;right:20px;bottom:15px;color:#a4b6ff;font-size:21px}.password-box{display:flex;align-items:center;gap:20px;border:1px solid rgba(167,148,255,.5);background:rgba(8,12,25,.6);padding:16px 20px;border-radius:12px;font-size:18px;letter-spacing:.15em}.password-box b{color:#76e4b2;letter-spacing:0}.project-info{padding:22px}.project-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#8fa2c4;font-size:9px;letter-spacing:.08em}.tag{padding:4px 8px;border:1px solid var(--line);border-radius:20px;letter-spacing:0}.project-info h3{font-size:21px;margin:15px 0 8px}.project-info p{color:var(--muted);font-size:12px;min-height:40px}.language-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.language-card{display:flex;gap:17px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:17px;background:rgba(16,24,42,.72)}.lang-icon{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:13px;background:#f06b4f;color:#fff;font-size:18px;font-weight:800}.css-icon{background:#3978d8}.js-icon{background:#e9ca4d;color:#20202a;font-size:14px}.py-icon{background:#3d83b7}.language-card h3{margin-bottom:5px}.language-card p{font-size:12px;color:var(--muted);margin:0}.code-panel{border:1px solid var(--line);border-radius:17px;overflow:hidden;background:#080d17}.code-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 17px;background:rgba(255,255,255,.025);border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.12em;color:#8e9fbd}.code-head i{display:inline-block;width:7px;height:7px;background:#f17c83;border-radius:50%;margin-right:5px}.code-head i:nth-child(2){background:#f4cb65}.code-head i:nth-child(3){background:#64d8a3}.copy-button{border:1px solid var(--line);background:transparent;color:#c7d3f1;border-radius:8px;padding:5px 9px;font-size:10px;cursor:pointer}.code-panel pre{padding:20px;overflow-x:auto;margin:0;color:#a9d6ff;font-size:12px;line-height:1.8}.code-note{margin:0;padding:0 20px 19px;color:#8e9fbd;font-size:11px}.steps-list{display:grid;gap:12px}.steps-list>div{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(16,24,42,.55)}.steps-list>div>b{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:9px;background:rgba(111,143,255,.14);color:#9eb0ff;font-size:12px}.steps-list p{margin:0;font-size:12px;color:var(--muted)}.steps-list strong{color:var(--text)}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#9dd9ff}.download-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.download-card{padding:19px}.file-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(255,113,82,.14);color:#ff9a7f;font-size:11px;font-weight:900;margin-bottom:20px}.css-file{background:rgba(64,133,255,.15);color:#8bb7ff}.js-file{background:rgba(240,209,75,.15);color:#f0d14b}.zip-file{background:rgba(91,222,183,.13);color:#75e6c0}.download-card h3{font-size:15px}.download-card p{min-height:56px;font-size:11px}.full-button{width:100%;padding:10px 8px;margin-top:15px;font-size:10px}.tips-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tip-card>span{display:block;font-size:24px;color:var(--cyan);margin-bottom:15px}.tip-card h3{font-size:15px}.tip-card p{font-size:11px}.tips-grid+.code-panel{margin-top:18px}
@media(max-width:850px){.nav{gap:0}.nav a{padding:9px 8px;font-size:11px}.hero{grid-template-columns:1fr .8fr;gap:10px}.hero-art{transform:scale(.85)}.download-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tips-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-stats{gap:17px}}
@media(max-width:680px){.container,.footer{width:calc(100% - 34px)}.site-header{height:68px;padding:0 17px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:67px;left:0;right:0;padding:12px 17px 17px;background:rgba(8,13,25,.98);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}.nav.open{display:flex}.nav a{font-size:13px;padding:12px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:58px;padding-bottom:30px;gap:0}.hero-copy{position:relative;z-index:1}.hero h1{font-size:clamp(38px,11vw,55px)}.lead{font-size:13px}.hero-art{height:275px;transform:scale(.8);transform-origin:center top;margin-bottom:-25px}.orbit-one{width:260px;height:210px}.orbit-two{height:280px;width:200px}.core{width:145px;height:145px}.core span{font-size:45px}.card-code{left:2%}.card-music{right:0}.page-hero{padding-top:65px;padding-bottom:25px;min-height:0}.page-hero h1{font-size:clamp(38px,10vw,54px)}.section{padding-top:30px;padding-bottom:30px}.section-heading{align-items:flex-start;flex-direction:column;gap:10px}.section-heading>p{font-size:11px}.feature-grid,.steps-grid,.project-grid,.language-grid{grid-template-columns:1fr}.feature-card{padding:23px}.feature-card>p:not(.eyebrow){min-height:0}.mini-stats{margin-top:30px;gap:20px;flex-wrap:wrap}.mini-stats strong{font-size:13px}.mini-stats span{font-size:9px}.community-band{margin-top:24px;margin-bottom:42px;padding:23px;align-items:flex-start;flex-direction:column}.community-band h2{font-size:22px}.community-band .button{width:100%}.footer{font-size:9px;flex-direction:column;gap:5px}.project-preview{height:185px}.callout{align-items:flex-start;padding:20px}.callout h2{font-size:20px}.download-grid,.tips-grid{grid-template-columns:1fr 1fr}.download-card{padding:15px}.download-card p{min-height:74px}.full-button{font-size:9px}.info-card{padding:20px}.code-panel pre{font-size:11px;padding:15px}.code-note{padding:0 15px 15px}.steps-list>div{padding:14px}.hero-actions .button{font-size:11px}.brand{font-size:11px}}
@media(max-width:390px){.download-grid,.tips-grid{grid-template-columns:1fr}.download-card p{min-height:0}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .button{width:100%}.mini-stats{gap:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}