:root{color-scheme:light dark;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#1a1a1a;background-color:#f4f4f5;--line: #d4d4d8;--surface: #ffffff;--surface-hover: #f4f4f5;--surface-sunken: #fafafa;--muted: #52525b;--ink: #18181b;--paper: #ffffff;--accent: #2563eb;--accent-hover: #1d4ed8;--accent-text: #ffffff;--check: #e4e4e7}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh}.app{max-width:720px;margin:0 auto;padding:2rem 1.25rem 3rem}header h1{margin:0 0 .25rem;font-size:1.75rem}.subtitle{margin:0;color:#52525b}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 .75rem}button{border:1px solid #d4d4d8;border-radius:.5rem;background:#fff;color:inherit;padding:.625rem 1rem;font:inherit;cursor:pointer}button:hover:not(:disabled){background:#f4f4f5}button:disabled{opacity:.55;cursor:not-allowed}.app #connect-btn{background:#18181b;border-color:#18181b;color:#fff}.app #connect-btn:hover:not(:disabled){background:#27272a}.connection-status{margin:0;font-weight:600}.device-info{margin-top:1.25rem;padding:1rem;border:1px solid #d4d4d8;border-radius:.5rem;background:#fff}.device-info h2{margin:0 0 .5rem;font-size:1rem}.device-info-label{margin:0 0 .375rem;font-size:.875rem;font-weight:600}.device-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}#device-address{font:.875rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}.device-info-hint{margin:.625rem 0 0;color:#52525b;font-size:.8125rem}.app-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}.app-nav a{border:1px solid #d4d4d8;border-radius:999px;padding:.375rem .875rem;color:inherit;font-size:.875rem;font-weight:600;text-decoration:none}.app-nav a:hover:not(.nav-disabled){background:#fff}.app-nav a[aria-current=page]{background:#18181b;border-color:#18181b;color:#fff}.app-nav .nav-disabled{opacity:.45;pointer-events:none}.composer-section{margin-top:1.5rem}.composer-section h2,.preview-section h2,.log-section h2{margin:0 0 .75rem;font-size:1rem}.field{display:grid;gap:.375rem;margin-bottom:1rem}.field label{font-size:.875rem;font-weight:600}.field input,.field textarea,.field select{width:100%;border:1px solid #d4d4d8;border-radius:.5rem;padding:.625rem .75rem;font:inherit;color:inherit;background:#fff}.field textarea{resize:vertical;min-height:4.5rem}.field-hint{margin:0;color:#52525b;font-size:.8125rem}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;margin:.625rem 0;font-size:.875rem}.checkbox-label input{width:1rem;height:1rem}.payload-type{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin:0 0 1rem;padding:0;border:0}.radio-label{display:inline-flex;align-items:center;gap:.375rem;font-size:.875rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.github-link{flex-shrink:0;border:1px solid #d4d4d8;border-radius:.5rem;padding:.5rem .875rem;color:inherit;font-size:.875rem;font-weight:600;text-decoration:none}.github-link:hover{background:#fff}.preview-section,.log-section{margin-top:1.75rem}.preview-section h2,.log-section h2{margin:0 0 .75rem;font-size:1rem}#preview{display:block;width:100%;max-width:384px;border:1px solid #d4d4d8;border-radius:.5rem;background:#fff;image-rendering:pixelated}#log{margin:0;min-height:8rem;max-height:16rem;overflow:auto;padding:.875rem;border:1px solid #d4d4d8;border-radius:.5rem;background:#fff;font:.875rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}.section-heading{margin:1.75rem 0 .75rem;font-size:1rem}.field-hint kbd{border:1px solid #d4d4d8;border-radius:.25rem;padding:0 .25rem;font:inherit;font-size:.75rem}.button-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 .25rem}.button-row button[aria-pressed=true]{background:#18181b;border-color:#18181b;color:#fff}.crop-canvas{display:block;width:100%;max-width:640px;border:1px solid #d4d4d8;border-radius:.5rem;background:#fff;touch-action:none;cursor:crosshair}.slider-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.75rem 1rem}.slider-field{display:grid;gap:.25rem;margin-bottom:.5rem}.slider-field label{display:flex;justify-content:space-between;gap:.5rem;font-size:.875rem;font-weight:600}.slider-field output{font:.8125rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;color:#52525b}.slider-field input[type=range]{width:100%;accent-color:#18181b}.stage-section{margin-top:1.5rem}.stage-wrap{display:flex;justify-content:center;padding:1rem;border:1px solid #d4d4d8;border-radius:.75rem;background:#e4e4e7;overflow:auto;max-height:70vh}.stage-canvas{width:384px;max-width:100%;height:auto;background:#fff;box-shadow:0 1px 6px #00000040;image-rendering:pixelated;touch-action:none}.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.75rem,1fr));gap:.375rem;max-height:15rem;overflow:auto}.sticker-button{display:grid;place-items:center;padding:.3125rem;aspect-ratio:1;border:1px solid var(--line);border-radius:.5rem;background:#fff;cursor:pointer}.sticker-button:hover{border-color:var(--accent)}.sticker-button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.sticker-preview{width:100%;height:auto}@media(prefers-color-scheme:dark){:root{color:#f4f4f5;background-color:#09090b}.subtitle,.device-info-hint{color:#a1a1aa}.app-nav a{border-color:#3f3f46}.app-nav a:hover:not(.nav-disabled){background:#18181b}.app-nav a[aria-current=page]{background:#fafafa;border-color:#fafafa;color:#18181b}.field input,.field textarea,.field select{background:#18181b;border-color:#3f3f46}.field-hint{color:#a1a1aa}.github-link{border-color:#3f3f46}.github-link:hover{background:#18181b}button{background:#18181b;border-color:#3f3f46}button:hover:not(:disabled){background:#27272a}.app #connect-btn{background:#fafafa;border-color:#fafafa;color:#18181b}.app #connect-btn:hover:not(:disabled){background:#e4e4e7}#preview,#log,.device-info,.crop-canvas{background:#18181b;border-color:#3f3f46}.slider-field output{color:#a1a1aa}.field-hint kbd{border-color:#3f3f46}.button-row button[aria-pressed=true]{background:#fafafa;border-color:#fafafa;color:#18181b}.slider-field input[type=range]{accent-color:#fafafa}.stage-wrap{background:#27272a;border-color:#3f3f46}}.topbar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.625rem 1rem;border-bottom:1px solid var(--line);background:var(--surface)}.brand{display:flex;align-items:baseline;gap:.5rem}.brand h1{margin:0;font-size:1.0625rem;letter-spacing:-.01em}.brand-tag{color:var(--muted);font-size:.75rem}.topbar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.status-chip{padding:.25rem .625rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.75rem;font-weight:600;white-space:nowrap}.status-chip.connected{border-color:#16a34a;color:#16a34a}.btn{display:inline-flex;align-items:center;gap:.375rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface);color:inherit;padding:.4375rem .75rem;font:inherit;font-size:.8125rem;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap}.btn:hover:not(:disabled){background:var(--surface-hover)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}.btn.primary:hover:not(:disabled){background:var(--accent-hover)}.btn.ghost{background:transparent}.btn.small{padding:.3125rem .5625rem;font-size:.75rem}.btn.icon{padding:.25rem .5rem;font-size:.875rem}.btn.tool span{font-weight:700;opacity:.7}.btn.danger:hover:not(:disabled){border-color:#dc2626;color:#dc2626}.btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:1rem;align-items:start;max-width:78rem;margin:0 auto;padding:1rem}.canvas-pane{position:sticky;top:3.75rem;display:grid;gap:.625rem;min-width:0}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}.toolbar-group{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem}.zoom-label{min-width:3rem;color:var(--muted);font-size:.75rem;text-align:center;font-variant-numeric:tabular-nums}.stage-wrap{display:flex;justify-content:center;padding:1.25rem;border:1px solid var(--line);border-radius:.75rem;background:repeating-conic-gradient(var(--check) 0% 25%,transparent 0% 50%) 50% / 16px 16px;overflow:auto;max-height:min(62vh,720px)}.stage-frame{position:relative;align-self:flex-start;line-height:0}.stage-canvas{display:block;width:384px;height:auto;background:#fff;box-shadow:0 2px 10px #0000004d;image-rendering:pixelated;touch-action:none}.stage-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;margin:0;padding:2rem;color:#71717a;font-size:.8125rem;line-height:1.5;text-align:center;pointer-events:none}.stage-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}.meta{margin:0;color:var(--muted);font-size:.75rem;line-height:1.5}.hint>summary{color:var(--muted);font-size:.75rem;cursor:pointer}.hint ul{margin:.5rem 0 0;padding-left:1.125rem;color:var(--muted);font-size:.75rem;line-height:1.7}kbd{border:1px solid var(--line);border-radius:.25rem;padding:0 .25rem;font:inherit;font-size:.6875rem}.inspector{display:grid;gap:.75rem;align-content:start;min-width:0}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;padding:.25rem;border:1px solid var(--line);border-radius:.625rem;background:var(--surface)}.tab{border:0;border-radius:.4375rem;background:transparent;color:var(--muted);padding:.375rem .5rem;font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer}.tab[aria-selected=true]{background:var(--ink);color:var(--paper)}.tab-panel{display:grid;gap:.75rem}.panel{display:grid;gap:.625rem;padding:.875rem;border:1px solid var(--line);border-radius:.75rem;background:var(--surface)}.panel-head{display:grid;gap:.1875rem}.panel-grip{display:grid;place-items:center;height:1.125rem;margin:-.5rem 0 -.25rem;padding:0;border:0;border-radius:.375rem;background:transparent;cursor:grab;touch-action:none}.panel-grip:before{content:"";width:1.75rem;height:.1875rem;border-radius:999px;background:var(--line)}.panel-grip:hover{background:var(--surface-hover)}.panel-grip:hover:before,.panel-grip:focus-visible:before{background:var(--muted)}.panel-grip:active{cursor:grabbing}.panel.is-dragging{opacity:.75;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.panel h2{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}.empty-note{margin:0;padding:.875rem;border:1px dashed var(--line);border-radius:.75rem;color:var(--muted);font-size:.8125rem;line-height:1.5}.subpanel{padding:.75rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface-sunken)}.subpanel>summary{font-size:.75rem;font-weight:600;cursor:pointer}.subpanel[open]>summary{margin-bottom:.625rem}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:.5rem}.gallery-tight{grid-template-columns:repeat(auto-fill,minmax(4.25rem,1fr))}.gallery-item{display:grid;gap:.25rem;padding:.375rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface);cursor:pointer;text-align:center}.gallery-item:hover{border-color:var(--accent)}.gallery-item[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.gallery-thumb{display:grid;place-items:center;height:3.75rem;overflow:hidden;border-radius:.25rem;background:#fff}.gallery-thumb canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.gallery-item span{color:var(--muted);font-size:.6875rem;line-height:1.25;min-height:2rem;display:flex;align-items:center;justify-content:center;text-align:center}.layer-list{display:grid;gap:.25rem;margin:0;padding:0;list-style:none;max-height:12rem;overflow:auto}.layer-item{display:flex;align-items:center;gap:.5rem;width:100%;border:1px solid transparent;border-radius:.4375rem;background:transparent;color:inherit;padding:.3125rem .4375rem;font:inherit;font-size:.8125rem;text-align:left;cursor:pointer}.layer-item:hover{background:var(--surface-hover)}.layer-item[aria-current=true]{border-color:var(--accent);background:var(--surface-hover)}.layer-kind{flex-shrink:0;width:1.375rem;color:var(--muted);font-size:.875rem;text-align:center}.layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.segmented{display:flex;gap:.25rem}.segmented .btn{flex:1;justify-content:center}#speed-group{flex-wrap:wrap}#speed-group .btn{flex:1 1 4rem}.field-label{font-size:.75rem;font-weight:600}#card-search-input{flex:1;min-width:0}.card-results{display:grid;gap:.375rem;max-height:22rem;overflow-y:auto}.card-result{display:grid;grid-template-columns:2.25rem 1fr;gap:.5rem;align-items:center;padding:.3125rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer}.card-result:hover:not(:disabled){border-color:var(--accent);background:var(--surface-hover)}.card-result:disabled{opacity:.6;cursor:default}.card-result-thumb{width:2.25rem;height:3.125rem;object-fit:cover;border-radius:.25rem;background:var(--surface-sunken)}.card-result-label{display:grid;gap:.0625rem;min-width:0}.card-result-label strong{font-size:.8125rem;overflow-wrap:anywhere}.panel #log{min-height:4rem;max-height:11rem;font-size:.75rem;background:var(--surface-sunken);border-color:var(--line)}.panel #device-address{font-size:.75rem}@media(max-width:62rem){.workspace{grid-template-columns:minmax(0,1fr);padding:.75rem}.topbar,.canvas-pane{position:static}.stage-wrap{position:sticky;top:0;z-index:5;max-height:42vh;padding:.75rem}}@media(prefers-color-scheme:dark){:root{--line: #3f3f46;--surface: #18181b;--surface-hover: #27272a;--surface-sunken: #121215;--muted: #a1a1aa;--ink: #fafafa;--paper: #18181b;--accent: #3b82f6;--accent-hover: #60a5fa;--accent-text: #0b0b0e;--check: #232327}.status-chip.connected{border-color:#4ade80;color:#4ade80}.btn.danger:hover:not(:disabled){border-color:#f87171;color:#f87171}}