*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-start:#0f0c29;--bg-mid:#302b63;--bg-end:#24243e;--panel-bg:#ffffff12;--panel-border:#ffffff26;--text-primary:#f0f0f0;--text-muted:#a0a0b8;--accent:#7c6bff;--accent-hover:#9a8dff;--slider-track:#ffffff26;--slider-thumb:#7c6bff;--code-bg:#00000059;--radius-panel:20px;--radius-card:16px;--transition:.18s ease}html{scroll-behavior:smooth;overflow-x:clip}body{background:linear-gradient(135deg, var(--bg-start), var(--bg-mid), var(--bg-end));min-height:100vh;color:var(--text-primary);font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.6}.site-nav{z-index:100;-webkit-backdrop-filter:blur(16px);background:#0f0c29d9;border-bottom:1px solid #ffffff14;position:sticky;top:0}.nav-inner{justify-content:space-between;align-items:center;max-width:1200px;height:52px;margin:0 auto;padding:0 24px;display:flex}.nav-brand{letter-spacing:.5px;color:var(--accent);font-size:.9rem;font-weight:800}.nav-links{gap:6px;display:flex}.nav-link{color:var(--text-muted);transition:color var(--transition), background var(--transition), border-color var(--transition);border:1px solid #0000;border-radius:99px;padding:6px 14px;font-size:.8rem;font-weight:600;text-decoration:none}.nav-link:hover{color:var(--text-primary);background:#ffffff12}.nav-link.active{color:var(--text-primary);background:#7c6bff33;border-color:#7c6bff4d}.hero{text-align:center;max-width:800px;margin:0 auto;padding:72px 24px 60px}.hero-title{letter-spacing:-1px;background:linear-gradient(135deg, #fff 30%, var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:16px;font-size:clamp(2rem,5vw,3.2rem);font-weight:900}.hero-sub{color:var(--text-muted);margin-bottom:8px;font-size:1.1rem}.hero-hint{color:#a0a0b8b3;margin-bottom:32px;font-size:.85rem}.hero-btns{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.btn-primary{background:var(--accent);color:#fff;transition:background var(--transition), transform .1s;border-radius:99px;padding:12px 28px;font-size:.9rem;font-weight:700;text-decoration:none}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-secondary{color:var(--text-primary);transition:background var(--transition), transform .1s;background:#ffffff14;border:1px solid #ffffff26;border-radius:99px;padding:12px 28px;font-size:.9rem;font-weight:700;text-decoration:none}.btn-secondary:hover{background:#ffffff21;transform:translateY(-1px)}.app-shell{grid-template-columns:260px 1fr 260px;gap:20px;max-width:1340px;margin:0 auto;padding:28px 24px 48px;display:grid}.glass-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-panel);-webkit-backdrop-filter:blur(12px);padding:20px}.panel-title{letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-size:.7rem;font-weight:700}.controls-col{flex-direction:column;gap:16px;display:flex}.controls-stack{flex-direction:column;gap:14px;display:flex}.control-group{flex-direction:column;gap:6px;display:flex}.control-label{color:var(--text-muted);justify-content:space-between;align-items:center;font-size:.78rem;display:flex}.control-value{color:var(--text-primary);font-size:.82rem;font-weight:700}.control-value small{opacity:.7;margin-left:1px;font-size:.7em}input[type=range]{appearance:none;background:var(--slider-track);cursor:pointer;border-radius:99px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--slider-thumb);cursor:pointer;width:16px;height:16px;transition:box-shadow var(--transition);border-radius:50%;box-shadow:0 0 0 3px #7c6bff40}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px #7c6bff59}.ctrl-btn{color:var(--text-muted);cursor:pointer;transition:background var(--transition), color var(--transition), border-color var(--transition);background:#ffffff12;border:1px solid #ffffff1f;border-radius:10px;align-items:center;gap:6px;padding:7px 13px;font-size:.76rem;font-weight:600;display:inline-flex}.ctrl-btn:hover{color:var(--text-primary);background:#ffffff21}.ctrl-btn:disabled{opacity:.4;cursor:not-allowed}.ctrl-btn.danger{color:#ff7070;border-color:#ff64644d}.ctrl-btn.danger:hover{color:#ff9090;background:#ff505026;border-color:#ff505080}.grid-actions{border-top:1px solid #ffffff12;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:14px;display:flex}.inspector-pos-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.inspector-pos-cell{flex-direction:column;gap:5px;display:flex}.ins-input{width:100%;color:var(--text-primary);transition:border-color var(--transition);background:#ffffff12;border:1px solid #ffffff1f;border-radius:8px;outline:none;padding:7px 10px;font-size:.82rem}.ins-input:focus{border-color:var(--accent)}.ins-num{text-align:center}.ins-color-picker{cursor:pointer;background:0 0;border:1px solid #ffffff1f;border-radius:8px;width:100%;height:36px;padding:2px}.inspector-empty{text-align:center;color:var(--text-muted);opacity:.6;flex-direction:column;align-items:center;gap:10px;padding:20px;font-size:.82rem;display:flex}.inspector-empty small{font-size:.75rem}.editor-col{flex-direction:column;gap:12px;display:flex}.canvas-wrap{background:#ffffff08;border:1px solid #ffffff14;border-radius:16px;padding:16px;overflow:auto}.grid-canvas{cursor:crosshair;-webkit-user-select:none;user-select:none;width:100%;min-height:200px;position:relative}.grid-cell{cursor:crosshair;box-sizing:border-box;background:#ffffff08;border:1px dashed #ffffff14;border-radius:6px;transition:background .1s,border-color .1s;position:absolute}.grid-cell:hover{background:#7c6bff14;border-color:#7c6bff4d}.grid-item{cursor:move;-webkit-user-select:none;user-select:none;z-index:2;border:2px solid #fff3;border-radius:10px;transition:border-color .15s,box-shadow .15s;position:absolute;overflow:visible}.grid-item:hover{border-color:#ffffff59}.grid-item.selected{border-color:var(--accent);box-shadow:0 0 0 2px #7c6bff4d,0 4px 20px #0000004d}.item-inner{border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:3px;width:100%;height:100%;padding:8px;display:flex;overflow:hidden}.item-label{color:#ffffffe6;text-align:center;word-break:break-word;pointer-events:none;font-size:.8rem;font-weight:700}.item-coords{color:#fff6;pointer-events:none;font-family:Cascadia Code,Fira Code,monospace;font-size:.62rem}.item-delete{color:#fff9;cursor:pointer;opacity:0;z-index:4;background:#0000004d;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;padding:0;font-size:14px;font-weight:400;line-height:1;transition:opacity .15s,background .15s;display:flex;position:absolute;top:4px;right:4px}.grid-item:hover .item-delete,.grid-item.selected .item-delete{opacity:1}.item-delete:hover{color:#fff;background:#dc3c3c99}.resize-handle{z-index:3;position:absolute}.rh-e{cursor:ew-resize;width:10px;height:40%;min-height:24px;top:50%;right:-5px;transform:translateY(-50%)}.rh-w{cursor:ew-resize;width:10px;height:40%;min-height:24px;top:50%;left:-5px;transform:translateY(-50%)}.rh-s{cursor:ns-resize;width:40%;min-width:24px;height:10px;bottom:-5px;left:50%;transform:translate(-50%)}.rh-n{cursor:ns-resize;width:40%;min-width:24px;height:10px;top:-5px;left:50%;transform:translate(-50%)}.rh-se{cursor:se-resize;width:14px;height:14px;bottom:-6px;right:-6px}.rh-sw{cursor:sw-resize;width:14px;height:14px;bottom:-6px;left:-6px}.rh-ne{cursor:ne-resize;width:14px;height:14px;top:-6px;right:-6px}.rh-nw{cursor:nw-resize;width:14px;height:14px;top:-6px;left:-6px}.rh-se:after,.rh-sw:after,.rh-ne:after,.rh-nw:after{content:"";background:var(--accent);opacity:0;border-radius:2px;transition:opacity .15s;position:absolute;inset:3px}.grid-item.selected .rh-se:after,.grid-item.selected .rh-sw:after,.grid-item.selected .rh-ne:after,.grid-item.selected .rh-nw:after{opacity:1}.rh-e:after,.rh-w:after{content:"";background:var(--accent);opacity:0;border-radius:3px;width:3px;transition:opacity .15s;position:absolute;inset:0 0 0 50%;transform:translate(-50%)}.rh-s:after,.rh-n:after{content:"";background:var(--accent);opacity:0;border-radius:3px;height:3px;transition:opacity .15s;position:absolute;inset:50% 0 0;transform:translateY(-50%)}.grid-item.selected .rh-e:after,.grid-item.selected .rh-w:after,.grid-item.selected .rh-s:after,.grid-item.selected .rh-n:after{opacity:.7}.add-ghost{pointer-events:none;z-index:1;background:#7c6bff1a;border:2px dashed #7c6bffb3;border-radius:8px;position:absolute}.editor-hint{color:var(--text-muted);opacity:.7;text-align:center;font-size:.78rem}.editor-hint kbd{background:#ffffff1a;border-radius:4px;padding:1px 5px;font-family:inherit;font-size:.75em}.output-col{flex-direction:column;gap:16px;display:flex}.output-header{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.output-tab-group{gap:4px;display:flex}.output-tab{color:var(--text-muted);cursor:pointer;transition:all var(--transition);background:0 0;border:1px solid #ffffff1a;border-radius:8px;padding:5px 13px;font-size:.75rem;font-weight:600}.output-tab.active{color:var(--text-primary);background:#7c6bff33;border-color:#7c6bff66}.copy-btn{color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:all var(--transition);background:#ffffff12;border:1px solid #ffffff1f;border-radius:10px;align-items:center;gap:6px;margin-left:auto;padding:6px 13px;font-size:.75rem;font-weight:600;display:inline-flex}.copy-btn:hover{color:var(--text-primary);background:#ffffff21}#grid-css-output{background:var(--code-bg);color:#c9d1d9;white-space:pre;border-radius:10px;max-height:280px;padding:14px;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.74rem;line-height:1.75;overflow:auto}.save-btn{color:var(--accent);cursor:pointer;transition:all var(--transition);background:#7c6bff1f;border:1px solid #7c6bff4d;border-radius:12px;align-items:center;gap:6px;padding:10px 18px;font-size:.82rem;font-weight:700;display:inline-flex}.save-btn:hover{background:#7c6bff40;border-color:#7c6bff80}.io-actions{flex-wrap:wrap;gap:8px;display:flex}.compat-list{flex-direction:column;gap:8px;display:flex}.compat-item{color:var(--text-muted);align-items:center;gap:8px;font-size:.8rem;display:flex}.compat-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.compat-dot.green{background:#4ade80;box-shadow:0 0 6px #4ade8080}.presets-section{padding:64px 24px 80px}.presets-inner{max-width:1200px;margin:0 auto}.section-header{text-align:center;margin-bottom:40px}.section-title{background:linear-gradient(135deg, #fff 30%, var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:2rem;font-weight:800}.section-sub{color:var(--text-muted);font-size:.95rem}.presets-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;display:grid}.preset-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-card);cursor:pointer;padding:16px;transition:transform .2s,border-color .2s,box-shadow .2s}.preset-card:hover{border-color:#7c6bff66;transform:translateY(-3px);box-shadow:0 8px 24px #00000040}.preset-preview{background:#0003;border-radius:8px;margin-bottom:10px;overflow:hidden}.preset-preview svg{width:100%;height:auto;display:block}.preset-name{color:var(--text-primary);text-align:center;font-size:.82rem;font-weight:700}.faq-section{border-top:1px solid #ffffff0f;padding:64px 24px 80px}.faq-inner{max-width:900px;margin:0 auto}.faq-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}.faq-item{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;padding:24px}.faq-q{color:var(--text-primary);margin-bottom:10px;font-size:.92rem;font-weight:700;line-height:1.4}.faq-a{color:var(--text-muted);font-size:.83rem;line-height:1.75}.faq-a code{color:var(--accent-hover);background:#ffffff1a;border-radius:4px;padding:1px 6px;font-family:Cascadia Code,Fira Code,monospace;font-size:.8em}@media (width<=640px){.faq-grid{grid-template-columns:1fr}}footer{text-align:center;color:var(--text-muted);opacity:.7;border-top:1px solid #ffffff0f;padding:32px 24px;font-size:.78rem}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}@media (width<=1000px){.app-shell{display:block}.controls-col,.editor-col,.output-col{margin-bottom:20px}}@media (width<=600px){.hero{padding:48px 16px 40px}.app-shell{padding:16px}.presets-grid{grid-template-columns:repeat(2,1fr)}.output-col{padding-top:0}}.tok-prop{color:#79c0ff}.tok-colon{color:#c9d1d9}.tok-val{color:#a5d6ff}.tok-rgba{color:#ffa657}.tok-num{color:#d2a8ff}.tok-semi{color:#c9d1d9}.tok-unit{color:#7ee787}.tok-comment{color:#8b949e;font-style:italic}.tok-brace{color:#e2e8f0}