:root{--bg:#07070b;--bg-elev:#0e0e16;--fg:#e6e6f0;--muted:#8a8aa3;--accent:#ff2bd6;--accent-2:#2bf0ff;--border:#1d1d2b}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;min-height:100vh}a{color:inherit;text-decoration:none}.site-header{justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--border);background:rgba(7,7,11,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:-webkit-sticky;position:sticky;top:0;z-index:10}.header-left,.site-header{display:flex;align-items:center}.header-left{gap:24px}.header-right{gap:12px}.header-nav,.header-right{display:flex;align-items:center}.header-nav{gap:18px}.header-nav a{color:var(--muted)}.header-nav a:hover{color:var(--accent-2)}.auth-status{color:var(--muted);font-size:12px}.auth-button{font-family:inherit;font-size:12px;letter-spacing:.3px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--bg-elev);color:var(--fg);cursor:pointer;transition:border-color .12s ease,color .12s ease}.auth-button:hover{border-color:var(--accent-2);color:var(--accent-2)}.auth-user{display:inline-flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;border:1px solid var(--border);border-radius:999px;background:var(--bg-elev)}.auth-user .auth-button{padding:4px 10px;border:none;background:transparent;color:var(--muted)}.auth-user .auth-button:hover{color:var(--accent-2)}.auth-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;display:block;background:var(--bg)}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px;font-size:18px}.brand-logo{display:block;width:28px;height:28px;object-fit:contain}.brand-glitch{position:relative;display:inline-block;color:var(--fg)}.brand-glitch:after,.brand-glitch:before{content:attr(data-text);position:absolute;top:0;left:0;width:100%;overflow:hidden;pointer-events:none}.brand-glitch:before{color:var(--accent);transform:translate(1px);mix-blend-mode:screen;-webkit-clip-path:inset(0 0 60% 0);clip-path:inset(0 0 60% 0)}.brand-glitch:after{color:var(--accent-2);transform:translate(-1px);mix-blend-mode:screen;-webkit-clip-path:inset(60% 0 0 0);clip-path:inset(60% 0 0 0)}main{min-height:calc(100vh - 110px)}.site-footer{padding:16px 24px;border-top:1px solid var(--border);color:var(--muted);font-size:12px}.hero{display:grid;grid-template-columns:1fr 1fr;grid-gap:32px;gap:32px;padding:64px 24px;align-items:center;max-width:1200px;margin:0 auto}.hero h1{font-size:48px;line-height:1.05;margin:0 0 16px}.hero p{color:var(--muted);font-size:16px;line-height:1.6}.hero .cta{margin-top:24px;display:flex;gap:12px}.btn{display:inline-block;padding:10px 16px;border:1px solid var(--border);border-radius:6px;background:var(--bg-elev);color:var(--fg);cursor:pointer;font-family:inherit}.btn:hover{border-color:var(--accent-2);color:var(--accent-2)}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#000;border-color:transparent;font-weight:700}.preview-frame{aspect-ratio:1/1;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#000}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-gap:16px;gap:16px;padding:24px;max-width:1200px;margin:0 auto}.card{border:1px solid var(--border);border-radius:10px;background:var(--bg-elev);overflow:hidden;display:flex;flex-direction:column}.card .thumb{aspect-ratio:16/10;background:#000}.card .meta{padding:12px}.card h3{margin:0 0 4px;font-size:14px}.card .by{color:var(--muted);font-size:12px}.playground{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:calc(100vh - 110px);overflow:hidden}.playground .editor{border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0;overflow:hidden}.playground .editor .tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--border);background:var(--bg-elev)}.tab{padding:6px 12px;font-size:12px;background:transparent;color:var(--muted);border:1px solid transparent;border-radius:4px;cursor:pointer;font-family:inherit}.tab.active{color:var(--fg);border-color:var(--border);background:var(--bg)}.editor-host{flex:1 1;min-height:0}.buffer-row{display:flex;align-items:center;gap:12px;padding:6px 10px;border-bottom:1px solid var(--border);background:var(--bg-elev);font-size:12px}.buffer-row,.buffer-row-label{color:var(--muted)}.buffer-toggle{display:inline-flex;align-items:center;gap:4px;color:var(--fg);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.buffer-toggle input{accent-color:var(--accent-2)}.channels-row{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:8px;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);background:var(--bg)}.channel-slot{display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid var(--border);border-radius:6px;background:var(--bg-elev);font-size:11px}.channel-label{color:var(--muted);font-family:inherit}.channel-mini,.channel-select{background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:3px 4px;font-family:inherit;font-size:11px;width:100%}.channel-row{display:flex;gap:4px}.channel-row .channel-mini{width:50%}.preview{position:relative;min-width:0;overflow:hidden}.preview canvas{display:block;max-width:100%;max-height:100%}.fps-overlay{left:8px;background:rgba(7,7,11,.7);border:1px solid var(--border);color:var(--accent-2);padding:3px 8px;border-radius:4px;font-family:ui-monospace,Menlo,Monaco,monospace;font-size:11px;pointer-events:none}.fps-overlay,.preview .toolbar{position:absolute;top:8px;z-index:2}.preview .toolbar{right:8px;display:flex;gap:6px}.preview .err{position:absolute;left:12px;right:12px;top:12px;background:rgba(20,4,10,.92);border:1px solid #ff2b64;border-left-width:3px;border-radius:6px;color:#ffd0db;padding:10px 36px 10px 12px;font-size:12px;line-height:1.45;white-space:pre-wrap;max-height:50%;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:3;font-family:ui-monospace,Menlo,Monaco,monospace}.preview .err-title{display:block;color:#ff5b87;font-weight:700;margin-bottom:4px;letter-spacing:.3px}.preview .err-close{position:absolute;top:6px;right:8px;background:transparent;border:none;cursor:pointer;color:#ffd0db;font-size:16px;line-height:1;padding:2px 6px;border-radius:4px;font-family:inherit}.preview .err-close:hover{background:rgba(255,43,100,.2);color:#fff}.converter{display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - 110px)}.converter-pane{display:flex;flex-direction:column;border-right:1px solid var(--border);min-width:0}.converter-pane:last-child{border-right:none}.converter-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg-elev);font-size:12px;color:var(--muted)}.converter-actions{display:flex;gap:6px}.converter-editor{flex:1 1;min-height:0}.converter-warnings{border-top:1px solid var(--border);background:rgba(255,200,80,.06);color:#ffd790;padding:10px 12px;font-size:12px;max-height:30%;overflow:auto}.converter-warnings-title{font-weight:700;margin-bottom:6px;color:#ffc05c}.converter-warnings ul{margin:0;padding-left:18px}.converter-warnings li{margin:2px 0}@media (max-width:900px){.converter{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.converter-pane{border-right:none;border-bottom:1px solid var(--border)}.hero,.playground{grid-template-columns:1fr}.playground{grid-template-rows:1fr 1fr}.playground .editor{border-right:none;border-bottom:1px solid var(--border)}}