*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{color:#1a1a1e;-webkit-font-smoothing:antialiased;background:#fcfcfd;font-family:IBM Plex Sans,ui-sans-serif,system-ui,sans-serif}:root{--accent:#0969da}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}::selection{background:color-mix(in srgb, var(--accent) 22%, transparent)}textarea:focus,select:focus,button:focus{outline:none}.studio{background:#fcfcfd;flex-direction:column;width:100%;height:100vh;display:flex;overflow:hidden}.header{z-index:20;background:#fff;border-bottom:1px solid #eaeaef;flex-shrink:0;align-items:center;gap:14px;height:56px;padding:0 16px;display:flex}.brand{align-items:center;gap:10px;display:flex}.logo{background:var(--accent);border-radius:7px;justify-content:center;align-items:center;width:26px;height:26px;display:flex;box-shadow:0 1px 2px #0969da59}.brand-text{align-items:baseline;gap:9px;display:flex}.brand-title{letter-spacing:-.015em;font-size:15px;font-weight:600}.brand-badge{color:#8a8a94;letter-spacing:.02em;background:#f4f4f7;border:1px solid #eaeaef;border-radius:5px;padding:2px 6px;font-family:IBM Plex Mono,monospace;font-size:10.5px}.spacer{flex:1}.select{height:34px;font:inherit;color:#3a3a42;cursor:pointer;background:#fff;border:1px solid #e2e2e8;border-radius:8px;padding:0 30px 0 12px;font-size:13px}.select-wide{min-width:150px}.theme-picker{align-items:center;gap:7px;display:flex}.theme-label{color:#9a9aa4;letter-spacing:.02em;font-size:11px}.mode-toggle{border:1px solid #e2e2e8;border-radius:8px;display:flex;overflow:hidden}.mode-btn{height:34px;font:inherit;cursor:pointer;color:#4a4a52;background:#fff;border:none;border-right:1px solid #e2e2e8;padding:0 15px;font-size:12.5px;font-weight:500}.mode-btn:last-child{border-right:none}.mode-btn.active{background:var(--accent);color:#fff}.btn{height:34px;font:inherit;color:#3a3a42;cursor:pointer;background:#fff;border:1px solid #e2e2e8;border-radius:8px;align-items:center;gap:7px;padding:0 13px;font-size:13px;font-weight:500;display:flex}.btn:hover{background:#f6f6f9}.btn-primary{background:var(--accent);color:#fff;border:none;box-shadow:0 1px 2px #0969da4d}.btn-primary:hover{filter:brightness(1.06);background:var(--accent)}.body{flex:1;min-height:0;display:flex}.sidebar{background:#fff;border-right:1px solid #eaeaef;flex-direction:column;flex-shrink:0;transition:width .26s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.sidebar-inner{flex-direction:column;width:420px;height:100%;display:flex}.sidebar-header{border-bottom:1px solid #f0f0f3;flex-shrink:0;justify-content:space-between;align-items:center;height:42px;padding:0 16px;display:flex}.sidebar-title{letter-spacing:.07em;color:#9a9aa4;font-size:11px;font-weight:600}.icon-btn{color:#9a9aa4;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:26px;height:26px;display:flex}.icon-btn:hover{color:#3a3a42;background:#f4f4f7}.code-editor{resize:none;color:#1f2937;tab-size:2;background:#fff;border:none;flex:1;width:100%;padding:18px 16px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:13px;line-height:1.65}.code-editor::-webkit-scrollbar{width:10px;height:10px}.code-editor::-webkit-scrollbar-thumb{background:#d6d6de padding-box padding-box;border:2px solid #0000;border-radius:8px}.status-bar{background:#fcfcfd;border-top:1px solid #f0f0f3;flex-shrink:0;align-items:center;gap:10px;min-height:38px;padding:9px 16px;display:flex}.status-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px;display:inline-flex}.status-dot-error{background:#e5484d}.status-dot-ok{background:#2fa84f}.status-error{color:#c0393d;text-overflow:ellipsis;white-space:nowrap;font-family:IBM Plex Mono,monospace;font-size:11.5px;overflow:hidden}.status-info{color:#8a8a94;font-size:11.5px}.canvas{touch-action:none;flex:1;min-width:0;position:relative;overflow:hidden}.canvas-overlay{pointer-events:none;background-position:50%;position:absolute;inset:0}.canvas-wrapper{transform-origin:0 0;will-change:transform;position:absolute;top:0;left:0}.ascii-output{white-space:pre;margin:0;padding:28px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:13px;line-height:1.35}.show-source-btn{height:34px;font:inherit;color:#3a3a42;cursor:pointer;z-index:10;background:#fff;border:1px solid #eaeaef;border-radius:8px;align-items:center;gap:7px;padding:0 13px;font-size:12.5px;font-weight:500;display:flex;position:absolute;top:14px;left:14px;box-shadow:0 2px 8px #14141e0f}.show-source-btn:hover{background:#f6f6f9}.loading-overlay{z-index:15;color:#8a8a94;background:#fcfcfdb3;flex-direction:column;justify-content:center;align-items:center;gap:14px;font-size:12.5px;display:flex;position:absolute;inset:0}.spinner{border:2.5px solid #e2e2e8;border-top-color:var(--accent);border-radius:50%;width:26px;height:26px;animation:.7s linear infinite bmspin}@keyframes bmspin{to{transform:rotate(360deg)}}.zoom-controls{z-index:10;background:#fff;border:1px solid #eaeaef;border-radius:10px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:16px;right:16px;box-shadow:0 2px 10px #14141e12}.zoom-btn{color:#3a3a42;cursor:pointer;background:0 0;border:none;border-radius:7px;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.zoom-btn:hover{background:#f4f4f7}.zoom-pct{min-width:52px;height:30px;font:inherit;font-variant-numeric:tabular-nums;color:#3a3a42;cursor:pointer;background:0 0;border:none;border-radius:7px;font-size:12px;font-weight:500}.zoom-pct:hover{background:#f4f4f7}.zoom-divider{background:#eaeaef;width:1px;height:18px;margin:0 3px}.setup{flex-direction:column;min-height:100%;display:flex}.setup-header{border-bottom:1px solid #e7e7ea;align-items:center;gap:16px;padding:14px 24px;display:flex}.setup-back{font-size:13px;font-weight:500}.setup-header .brand-title{color:#1a1a1e;font-size:14px;font-weight:600}.setup-content{width:100%;max-width:720px;margin:0 auto;padding:48px 24px 96px}.setup-content h1{margin:0 0 8px;font-size:26px}.setup-lede{color:#444;margin:0 0 40px;font-size:15px}.setup-content section{margin-bottom:32px}.setup-content h2{margin:0 0 8px;font-size:16px}.setup-content p{color:#333;margin:0 0 10px;font-size:14px;line-height:1.55}.setup-content code{background:#f1f1f4;border-radius:4px;padding:1px 5px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.9em}.setup-code{color:#e6e6ea;background:#16161a;border-radius:8px;margin:0 0 10px;padding:14px 16px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:13px;line-height:1.6;overflow-x:auto}