.app{display:flex;height:100vh}.app .sidebar{width:240px;flex-shrink:0;background:#1b1b1b;border-right:1px solid #2a2a2a;padding:16px 10px;overflow-y:auto}.app .sidebar h2{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#fcb400;margin:0 8px 12px}.app .sidebar button{display:block;width:100%;text-align:left;padding:8px 10px;margin-bottom:2px;background:transparent;border:0;border-radius:6px;color:#cfcfcf;font:inherit;cursor:pointer}.app .sidebar button:hover{background:#242424}.app .sidebar button.active{background:#fcb40024;color:#fff}.app .page{flex:1;display:flex;flex-direction:column;min-width:0}.app .page header{padding:18px 24px 10px;border-bottom:1px solid #2a2a2a}.app .page header h1{font-size:18px;margin:0 0 4px}.app .page header p{margin:0;color:#9a9a9a;font-size:13px;max-width:70ch}.app .demo-interactive{flex:1;display:flex;flex-direction:column;min-height:0}.app .stage{flex:1;display:flex;min-height:0}.app .editor-wrap{flex:1;position:relative;min-width:0}.app .xeno{width:100%;height:100%}.app .panel{width:300px;flex-shrink:0;border-left:1px solid #2a2a2a;background:#181818;padding:14px;overflow-y:auto;font-size:13px}.app .panel.wide{width:440px}.app .panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#8a8a8a;margin:0 0 8px}.app .json-panel{display:flex;flex-direction:column;height:100%}.app .graph-json{flex:1;min-height:200px;margin:8px 0;background:#0c0c0c;border:1px solid #2a2a2a;border-radius:6px;color:#9ec3d6;font-family:ui-monospace,monospace;font-size:11px;line-height:1.5;padding:8px;resize:none;white-space:pre}.app .graph-json.err{border-color:#c0392b}.app .apply{padding:8px 12px;border-radius:6px;border:1px solid #FCB400;background:#fcb40029;color:#fff;font:inherit;font-size:12px;cursor:pointer}.app .apply:hover{background:#fcb40042}.app .panel .row{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid #232323}.app .panel .muted{color:#777}.app .field{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #232323}.app .field>span{color:#b8b8b8}.app .field input[type=range]{grid-column:1 / -1;width:100%;accent-color:#FCB400}.app .field input[type=text],.app .field select{grid-column:1 / -1;background:#111;border:1px solid #333;color:#eee;border-radius:5px;padding:5px 8px;font:inherit;font-size:12px}.app .field em{grid-column:1 / -1;color:#777;font-size:11px;font-style:normal}.app .field input[type=number]{grid-column:1 / -1;background:#111;border:1px solid #333;color:#eee;border-radius:5px;padding:5px 8px;font:inherit;font-size:12px}.app .field .json{grid-column:1 / -1;color:#7d8aa0;font-family:ui-monospace,monospace;font-size:11px;word-break:break-all;max-height:60px;overflow:auto}.app .field .json-edit{grid-column:1 / -1;background:#0c0c0c;border:1px solid #333;color:#9ec3d6;border-radius:5px;padding:6px 8px;font-family:ui-monospace,monospace;font-size:11px;resize:vertical}.app .field .json-edit.err{border-color:#c0392b}.app .field input[type=color]{justify-self:start;width:48px;height:26px;padding:0;background:#111;border:1px solid #333;border-radius:5px;cursor:pointer}.app .field input[type=checkbox]{justify-self:start;accent-color:#FCB400}.app .panel .toggle{padding:6px 12px;border-radius:6px;border:1px solid #333;background:#222;color:#eee;font:inherit;font-size:12px;cursor:pointer}.app .panel .toggle.on{background:#fcb40029;border-color:#fcb400;color:#fff}.app .minimap-grid{display:grid;grid-template-columns:repeat(3,40px);gap:6px}.app .minimap-grid button{height:34px;border-radius:6px;border:1px solid #333;background:#1d1d1d;color:#cfcfcf;font-size:15px;cursor:pointer}.app .minimap-grid button:hover:not(:disabled){background:#2a2a2a}.app .minimap-grid button.on{background:#fcb4002e;border-color:#fcb400;color:#fff}.app .minimap-grid button:disabled{opacity:.35;cursor:default}.app .minimap-grid .grid-center{color:#888}.app .log{font-family:ui-monospace,monospace;font-size:11px;line-height:1.5}.app .log .ev{color:#fcb400}.app .toolbar{display:flex;gap:8px;padding:8px 24px;border-bottom:1px solid #2a2a2a;background:#161616}.app .toolbar button{padding:6px 12px;border-radius:6px;border:1px solid #333;background:#222;color:#eee;font:inherit;font-size:12px;cursor:pointer}.app .toolbar button:hover{background:#2c2c2c}.app .toolbar button.on{background:#fcb40029;border-color:#fcb400;color:#fff}.app .w-async,.app .w-drop,.app .w-code,.app .w-spark{width:100%;height:100%;font-family:Inter,system-ui,sans-serif}.app .w-async{position:relative}.app .w-async input{width:100%;height:100%;box-sizing:border-box;padding:0 var(--xeno-padding-x, 8px);background:var(--xeno-bg);color:var(--xeno-text);border:1px solid var(--xeno-border);border-radius:var(--xeno-radius, 5px);font:inherit;font-size:12px;outline:none}.app .w-async input:focus{border-color:var(--xeno-border-focused)}.app .w-async-menu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:50;background:var(--xeno-bg-focused, #1c1c1c);border:1px solid var(--xeno-border);border-radius:var(--xeno-radius, 5px);overflow:hidden;box-shadow:0 6px 18px #0006}.app .w-async-item{padding:6px 10px;font-size:12px;color:var(--xeno-text);cursor:pointer}.app .w-async-item:hover{background:var(--xeno-bg-hover);color:#fff}.app .w-async-item.muted{color:var(--xeno-placeholder);cursor:default}.app .w-drop{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px dashed var(--xeno-border);border-radius:var(--xeno-radius, 5px);background:var(--xeno-bg);overflow:hidden}.app .w-drop-empty{color:var(--xeno-placeholder);font-size:12px;cursor:pointer;text-align:center}.app .w-drop-empty span{color:var(--xeno-accent);text-decoration:underline}.app .w-drop-img{max-width:100%;max-height:100%;object-fit:contain}.app .w-code{border:1px solid var(--xeno-border);border-radius:var(--xeno-radius, 5px);overflow:hidden;background:#0d0f14}.app .w-code>div{height:100%}.app .w-code .cm-editor,.app .w-code .cm-scroller{height:100%;font-size:12px}.app .w-spark{display:flex;flex-direction:column;gap:6px}.app .w-spark-svg{flex:1;width:100%;background:var(--xeno-bg);border:1px solid var(--xeno-border);border-radius:var(--xeno-radius, 5px)}.app .w-spark button{flex-shrink:0;padding:5px 8px;font-size:11px;border-radius:var(--xeno-radius, 5px);border:1px solid var(--xeno-border);background:var(--xeno-bg-hover);color:var(--xeno-text);cursor:pointer}.app .codeblock{border-top:1px solid #2a2a2a;background:#0d1117}.app .codeblock-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;border-bottom:1px solid #1c2330;background:#11161f}.app .codeblock-lang{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6b7684}.app .codeblock-actions{display:flex;gap:10px;align-items:center}.app .codeblock-actions button{background:transparent;border:1px solid #2a3340;color:#aeb9c6;font:inherit;font-size:11px;padding:3px 9px;border-radius:5px;cursor:pointer}.app .codeblock-actions button:hover{background:#1a2230}.app .codeblock-actions a{font-size:11px;color:#58a6ff;text-decoration:none}.app .codeblock-actions a:hover{text-decoration:underline}.app .codeblock-body{max-height:240px;overflow:auto}.app .codeblock-body pre.shiki{margin:0;padding:14px 20px;font-size:12px;line-height:1.6}.app .codeblock-body pre.shiki code{font-family:ui-monospace,SF Mono,monospace}