*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{height:100%}body{color:#fff;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:#0a1628;width:100%;min-height:100%;font-family:Fredoka,sans-serif}.hidden{display:none!important}#landing{background:linear-gradient(135deg,#0a1628 0%,#1a1a2e 50%,#16132b 100%);padding:0 20px 1px}.landing-header{text-align:center;max-width:700px;margin:0 auto;padding:60px 20px 40px}.logo{background:linear-gradient(135deg,#ffd93d,#ff6b6b,#4ecdc4,#45b7d1) 0 0/300% 300%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(48px,10vw,80px);font-weight:700;animation:4s infinite gradientShift}@keyframes gradientShift{0%,to{background-position:0%}50%{background-position:100%}}.tagline{color:#ffd93d;margin-top:8px;font-size:clamp(18px,4vw,28px);font-weight:600}.subtitle{color:#fff9;margin-top:16px;font-size:clamp(14px,3vw,20px);line-height:1.5}.start-btn{color:#0a1628;cursor:pointer;background:linear-gradient(135deg,#ffd93d,#ff6b6b);border:none;border-radius:50px;margin-top:32px;padding:18px 48px;font-family:Fredoka,sans-serif;font-size:clamp(20px,4vw,28px);font-weight:700;transition:transform .2s,box-shadow .2s;display:inline-block;box-shadow:0 4px 20px #ffd93d66}.start-btn:hover{transform:scale(1.05);box-shadow:0 6px 30px #ffd93d99}.start-btn:active{transform:scale(.98)}.features,.how-it-works,.trust,.faq{max-width:900px;margin:0 auto;padding:40px 0}.features h2,.how-it-works h2,.trust h2,.faq h2{text-align:center;color:#ffd93d;margin-bottom:24px;font-size:clamp(24px,5vw,36px)}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;display:grid}.feature-card{text-align:center;background:#ffffff0d;border:1px solid #ffffff14;border-radius:16px;padding:24px;transition:transform .2s}.feature-card:hover{transform:translateY(-4px)}.feature-icon{justify-content:center;align-items:center;margin-bottom:12px;display:flex}.feature-icon svg{stroke:#ffd93d;stroke-width:1.5px;width:40px;height:40px}.feature-card h3{color:#4ecdc4;margin-bottom:8px;font-size:20px}.feature-card p{color:#fff9;font-size:14px;line-height:1.4}.feature-card-parent{background:#ffd73d14;border:1px dashed #ffd73d4d}.feature-card-parent h3{color:#ffd93d}.feature-card-parent p{color:#fffb}.feature-card-parent strong{color:#ffd93d}.steps{flex-wrap:nowrap;justify-content:center;gap:16px;display:flex}.step{text-align:center;flex:1 1 0;min-width:0}.step-num{color:#0a1628;background:#4ecdc4;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:8px;font-size:20px;font-weight:700;display:inline-flex}.step p{color:#fffc;font-size:13px;line-height:1.3}.trust-grid{text-align:center;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.trust-item{background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:16px 8px;font-size:15px;display:flex}.trust-item svg{stroke:#4ecdc4;stroke-width:2px;flex-shrink:0;width:20px;height:20px}details{background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;margin-bottom:12px;overflow:hidden}summary{cursor:pointer;color:#4ecdc4;padding:16px 20px;font-size:16px;font-weight:600;list-style:none}summary::-webkit-details-marker{display:none}summary:before{content:"+ ";color:#ffd93d}details[open] summary:before{content:"- "}details p{color:#fff9;padding:0 20px 16px;font-size:14px;line-height:1.6}.info-split{max-width:1100px;margin:0 auto;padding:40px 0}@media (width>=768px){.info-split{grid-template-columns:1fr 1fr;align-items:start;gap:40px;display:grid}}.info-left .how-it-works,.info-left .trust,.info-right .faq{max-width:none;padding:0 0 32px}.landing-footer{text-align:center;color:#fff4;padding:40px 0;font-size:14px}#playground{background:#0a1628;width:100%;height:100%;position:fixed;inset:0}#canvas{width:100%;height:100%;display:block}#display-layer{pointer-events:none;position:absolute;inset:0}#parent-panel{z-index:1000;background:#000000b3;justify-content:flex-start;align-items:flex-start;display:flex;position:fixed;inset:0}#parent-panel.hidden{display:none!important}.panel-content{background:#1a1a2e;border-right:2px solid #ffffff1a;flex-direction:column;width:320px;max-width:90vw;height:100vh;display:flex;position:relative}.panel-header{z-index:2;background:#1a1a2e;border-bottom:1px solid #ffffff1a;flex-shrink:0;justify-content:space-between;align-items:center;padding:20px 24px 16px;display:flex;position:sticky;top:0}.panel-header h2{color:#ffd93d;margin:0;font-size:24px}.panel-body{flex:1;padding:20px 24px;overflow-y:auto}.panel-footer{z-index:2;background:#1a1a2e;border-top:1px solid #ffffff1a;flex-shrink:0;padding:16px 24px;position:sticky;bottom:0}.panel-close{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:28px;display:flex}.panel-close:hover{background:#ffffff1a}.panel-btn-close{color:#0a1628;background:#4ecdc4;border-color:#4ecdc4;font-weight:600}.panel-btn-close:hover{background:#3dbdb5}.setting-group{border-bottom:1px solid #ffffff14;margin-bottom:20px;padding-bottom:16px}.setting-group h3{color:#4ecdc4;margin-bottom:12px;font-size:16px}.setting-group label{color:#fffc;cursor:pointer;margin-bottom:10px;font-size:14px;display:block}.setting-group input[type=checkbox]{accent-color:#4ecdc4;margin-right:8px}.setting-group select{color:#fff;background:#0a1628;border:1px solid #fff3;border-radius:6px;margin-left:8px;padding:4px 8px;font-family:Fredoka,sans-serif;font-size:13px}.mode-selector{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.mode-group-label{color:#fff6;text-transform:uppercase;letter-spacing:1px;width:100%;margin-top:4px;font-size:11px}.mode-btn{color:#fffc;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff26;border-radius:8px;padding:8px 14px;font-family:Fredoka,sans-serif;font-size:14px;transition:all .15s}.mode-btn:hover{background:#ffffff1a}.mode-btn.active{color:#0a1628;background:#4ecdc4;border-color:#4ecdc4;font-weight:600}.panel-btn{color:#fffc;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:8px;width:100%;margin-top:8px;padding:10px;font-family:Fredoka,sans-serif;font-size:14px;transition:background .15s;display:block}.panel-btn:hover{background:#ffffff26}body.night-mode #playground{filter:brightness(.7)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}