:root{--bg: #0b0d12;--panel: #121621;--muted: #a9b1c3;--text: #e6e9f2;--accent: #4f8cff;--border: #232839;--radius: 12px;--radius-sm: 8px;--focus-ring: rgba(79, 140, 255, .65);--input-bg: #0e121b;--input-fg: var(--text);--input-border: var(--border);--input-hover-border: #2a3150;--input-focus-shadow: rgba(79, 140, 255, .35)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji"}.container{max-width:1200px;margin:0 auto;padding:24px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-block-end:16px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:16px}.row{display:flex;gap:8px;align-items:center}label{color:var(--muted);font-size:12px}input,select,textarea{width:100%;background:var(--input-bg);color:var(--input-fg);border:1px solid var(--input-border);border-radius:var(--radius-sm);padding:10px 12px;outline:none}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:36px;position:relative;background-image:linear-gradient(transparent,transparent),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23c9d5ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');background-repeat:no-repeat,no-repeat;background-position:right 10px center,right 10px center;background-size:16px 16px,16px 16px}.row-8 select.input{border-width:1px}textarea{min-height:120px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;resize:none;outline:none;transition:border-color .16s ease,box-shadow .16s ease}button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 14px;cursor:pointer;width:100%}button:disabled{opacity:.5;cursor:not-allowed}.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left}.code{background:#0e121b;border:1px solid var(--border);border-radius:8px;padding:12px}.code pre{margin:0;white-space:pre-wrap;word-break:break-word}.code-block{position:relative}.code-block.capped{max-height:min(500px,30vh);overflow:hidden}.code-block.expanded{max-height:none;overflow:visible}.code-block.clickable:hover{box-shadow:0 0 0 1px #4f8cff66 inset,0 8px 24px #00000040}.code-block.clickable:hover .gradient-fade{opacity:.85}.code-hint{position:absolute;right:10px;bottom:8px;padding:4px 8px;font-size:12px;color:#c9d5ff;background:#161b28d9;border:1px solid #2a3150;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .16s ease,transform .16s ease}.code-block.capped .code-hint,.code-block.expanded .code-hint{opacity:1}.code-block .gradient-fade{height:72px;transition:opacity .16s ease}.code-block .area-toggle{position:absolute;inset-inline:0;bottom:0;background:#161b28;border:1px solid #2a3150;color:#cfd8ff;border-radius:8px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,filter .16s ease;z-index:2}.code-block.capped .area-toggle{border-top-left-radius:0;border-top-right-radius:0}.code-block.expanded .area-toggle{position:sticky;inset-inline:auto;border-top-left-radius:8px;border-top-right-radius:8px}.area-block{position:relative}.area-block.capped{max-height:min(500px,30vh);overflow:hidden}.area-block.expanded{max-height:none;overflow:visible}.area-toggle{position:absolute;inset-inline:0;bottom:0;background:#161b28;border:1px solid #2a3150;color:#cfd8ff;border-radius:8px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,filter .16s ease;z-index:2}.area-block.capped .area-toggle{border-top-left-radius:0;border-top-right-radius:0}.area-block.expanded .area-toggle{position:sticky;inset-inline:auto;border-top-left-radius:8px;border-top-right-radius:8px}.area-toggle:hover{background:#1c2234f2;border-color:#33406b}.area-toggle:active{transform:translateY(1px)}.area-block.clickable:hover textarea{border-color:var(--input-hover-border)}.area-block:focus-within textarea,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--input-focus-shadow) inset}textarea:active{border-color:var(--accent)}.area-block .gradient-fade{height:72px;transition:opacity .16s ease}.collapsible{position:relative;overflow:hidden;max-height:var(--collapse-height, 240px);transition:max-height .22s ease}.collapsible.is-collapsed{max-height:0;padding-top:0;padding-bottom:0;border-width:0}.collapsible.is-open{max-height:1000px}.gradient-fade{position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(to bottom,#0e121b00,#0e121b);pointer-events:none}.btn-ghost{background:transparent;border:1px solid var(--border)}.btn-ghost:hover{background:#2a315059}.chevron{display:inline-flex;align-items:center;justify-content:center;margin-right:6px;transform:rotate(-90deg);transition:transform .16s ease}.chevron.open{transform:rotate(0)}.actions{display:flex;gap:8px}.muted{color:var(--muted)}.actions button,.actions .btn{width:auto}.panel{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.panel:hover{border-color:#2a3150;box-shadow:0 6px 20px #00000040}.btn{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 14px;cursor:pointer;width:100%;transition:background-color .16s ease,box-shadow .16s ease,transform 80ms ease,opacity .16s ease,filter .16s ease}.btn-primary{background:var(--accent);color:#fff}.btn-secondary{background:#1a2133;color:#e6e9f2}.btn-danger{background:#d44949;color:#fff}.btn-success{background:#2e7d32;color:#fff}.btn:hover,button:hover{filter:brightness(1.05)}.btn-secondary:hover{background:#202947}.btn-danger:hover{background:#be3f3f}.btn-success:hover{background:#2a6f2d}.btn:active,button:active{transform:translateY(1px)}input:focus-visible,select:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.table tbody tr:hover{background:#20263959}@media (prefers-reduced-motion: reduce){.panel,.btn,button{transition:none}}.tabs{display:flex;gap:8px;margin:12px 0 16px}.tab{background:#1a2133;color:#e6e9f2;border:1px solid var(--border);border-radius:8px;padding:8px 12px;cursor:pointer;width:auto}.tab.active{background:var(--accent);color:#fff;border-color:transparent}.md-preview{background:#0e121b;border:1px solid var(--border);border-radius:8px;padding:16px}.md-preview hr{border:0;border-top:1px solid #2a3150;margin:16px 0}.md-preview pre{background:#0b0f18;border:1px solid #1f2740;padding:12px;border-radius:6px;overflow:auto}.md-preview code{background:#0b0f18;padding:2px 6px;border-radius:4px}.md-preview h1,.md-preview h2,.md-preview h3,.md-preview h4,.md-preview h5,.md-preview h6{margin:1em 0 .5em}.md-preview p{margin:.5em 0}.md-preview ul,.md-preview ol{padding-left:1.25rem}.md-preview blockquote{margin:.75em 0;padding-left:1em;border-left:3px solid #2a3150;color:#b8c0d9}.md-preview table{width:100%;border-collapse:collapse;margin:12px 0}.md-preview table th,.md-preview table td{border:1px solid var(--border);padding:8px 10px}.md-preview img{max-width:100%;height:auto;border-radius:6px;display:block;margin:8px 0}.mixin-settings{padding:12px;width:100%}.mixin-settings legend{font-weight:600;padding:0 6px}.mixin-controls{display:flex;flex-direction:column;gap:12px;align-items:flex-start}.checkbox{display:flex;align-items:center;gap:6px}.checkbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.checkbox span{color:var(--text);font-size:14px}.row-8{display:flex;align-items:center;gap:8px}.input-compact{width:120px;padding:6px 8px}.field{display:flex;align-items:center;justify-content:space-between;gap:8px}.label{color:var(--muted);font-size:12px}.input{background:var(--input-bg);color:var(--input-fg);border:1px solid var(--input-border);border-radius:var(--radius-sm);padding:10px 12px}.input:hover{border-color:var(--input-hover-border)}.input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--input-focus-shadow) inset}.mt-16{margin-top:16px}.justify-between{justify-content:space-between}.stack,.panel-gen{display:flex;flex-direction:column;gap:16px}