:root{color:#1d1d1f;background:#f5f5f7;--accent: #0071e3;--accent-soft: rgba(0, 113, 227, .14);--ok: #30d158;--danger: #ff3b30;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body{margin:0;min-width:320px;width:100%;height:100%;overflow:hidden}#root{height:100%}button,input,select{font:inherit}button{cursor:pointer}.app-shell{height:100vh;padding:80px 20px 16px;overflow:hidden}.topbar{position:fixed;top:16px;left:50%;z-index:10;width:min(1500px,calc(100% - 32px));min-height:52px;transform:translate(-50%);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 12px;border:1px solid rgba(237,237,242,.92);border-radius:18px;background:#ffffffb8;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.brand,.topbar-actions,.status-pill,.panel-title,.preview-meta{display:flex;align-items:center}.brand{gap:10px;font-weight:700}.topbar-actions{gap:10px}.top-connect-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:0 14px;color:#fff;background:var(--accent);font-weight:700;white-space:nowrap}.brand-mark,.status-pill{color:var(--accent)}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e8f2ff}.status-pill{min-height:44px;gap:8px;padding:0 14px;border:1px solid #ededf2;border-radius:999px;background:#fffc;color:#424245;font-size:14px;transition:border-color .18s ease,background .18s ease,color .18s ease}.status-pill.connected{border-color:#30d15859;background:#30d1581f;color:#166534}.status-pill.disconnected{border-color:#ff3b3047;background:#ff3b3017;color:#9f1239}.status-pill.pending{border-color:#0071e342;background:#0071e31a;color:#075985}.workspace{width:min(1580px,100%);height:calc(100vh - 96px);margin:0 auto;display:grid;grid-template-columns:minmax(500px,1fr) minmax(360px,calc(100vh - 112px));gap:16px;align-items:start;overflow:hidden}.panel{border:1px solid #ededf2;border-radius:8px;background:#ffffffdb;padding:16px;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}.controls-rail{display:grid;grid-template-columns:minmax(0,1fr) 188px;gap:10px;align-content:start;min-width:0;overflow:hidden}.editor-panel,.color-panel,.install-panel{grid-column:1 / -1}.editor-panel{display:grid;gap:10px}.section-heading h1,.panel-title h2{margin:0;color:#1d1d1f;letter-spacing:0}.section-heading h1{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,sans-serif;font-size:clamp(26px,2.7vw,38px);line-height:1.02}.section-heading p{max-width:650px;margin:8px 0 0;color:#6e6e73;font-size:14px;line-height:1.42}.field{display:grid;gap:6px;color:#6e6e73;font-size:14px;font-weight:600}.field input{width:100%;min-height:38px;border:1px solid #d2d2d7;border-radius:8px;padding:0 16px;background:#fff;color:#1d1d1f;outline:none}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.form-grid{display:grid;grid-template-columns:96px minmax(140px,1fr) minmax(140px,1fr);gap:10px 16px}.form-grid .range-field:last-child{grid-column:auto}.range-field span{display:flex;align-items:center;justify-content:space-between;gap:12px}.range-field strong{color:#1d1d1f;font-size:13px;font-weight:700}.slider-shell{position:relative;height:30px;display:flex;align-items:center}.slider-shell:before{content:"";position:absolute;left:0;right:0;top:50%;height:13px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0 var(--range-value),#d2d2d7 var(--range-value) 100%);box-shadow:inset 0 0 0 1px #0071e314;transform:translateY(-50%)}.slider-shell:after{display:none}.native-slider{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.control-row{margin-top:0}.control-row.split{display:flex;justify-content:space-between;gap:12px;align-items:center}.segmented{display:flex;gap:4px;padding:4px;border:1px solid #ededf2;border-radius:999px;background:#f5f5f7;overflow-x:auto}.segmented button,.ghost-button,.primary-button,.secondary-button{min-height:38px;border:0;border-radius:999px;padding:0 16px;white-space:nowrap;transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease}.segmented button{width:46px;display:grid;place-items:center;color:#6e6e73;background:transparent}.segmented button.active{color:#fff;background:transparent}.segmented button svg{transition:transform .18s cubic-bezier(.22,1,.36,1)}.segmented.compact{width:fit-content}.direction-toggle{position:relative;overflow:hidden}.direction-toggle:before{content:"";position:absolute;top:4px;left:4px;z-index:0;width:46px;height:calc(100% - 8px);border-radius:999px;background:var(--accent);transition:transform .22s cubic-bezier(.22,1,.36,1)}.direction-toggle.is-right:before{transform:translate(50px)}.direction-toggle button{position:relative;z-index:1}.direction-toggle button.active svg{transform:translate(0)}.ghost-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #ededf2;color:#1d1d1f;background:#fff}.ghost-button:hover,.secondary-button:hover,.console-toggle:hover,.icon-button:hover{border-color:#0071e347;color:var(--accent)}.preview-stage{display:grid;justify-items:end;min-width:0;overflow:hidden}.preview-panel{display:grid;width:100%;aspect-ratio:1;min-height:0;overflow:hidden;place-items:center;padding:0;background:#0c0f17;border-color:#1d2433}canvas{width:100%;height:100%;border-radius:7px;image-rendering:pixelated}.preview-canvas{transition:image-rendering .26s ease}.preview-canvas.diffused{image-rendering:auto}.preview-meta{width:min(100%,320px);justify-content:space-between;gap:10px;color:#a1a1a6;font-size:13px}.color-panel,.action-panel{display:grid;gap:16px}.color-panel{padding:14px 16px}.color-head,.color-controls{display:grid;gap:10px}.color-head{grid-template-columns:1fr auto;align-items:center}.panel-title{gap:10px}.panel-title h2{font-size:20px}.swatches{display:flex;flex-wrap:wrap;gap:7px}.swatch,.color-input{width:32px;height:32px;border-radius:50%;border:1px solid #d2d2d7}.swatch{background:var(--swatch)}.swatch.selected{outline:3px solid rgba(0,113,227,.24);outline-offset:3px}.color-input{padding:0;border:2px solid #fff;background:conic-gradient(from 90deg,#ff2d55,#ff9500,#fc0,#34c759,#00c7be,#0071e3,#af52de,#ff2d55);box-shadow:inset 0 0 0 1px #0000001f;overflow:hidden}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:0;opacity:0}.toggle{min-height:32px;display:flex;align-items:center;gap:10px;color:#424245}.toggle input{width:20px;height:20px;accent-color:var(--accent)}.switch-toggle{min-height:32px;display:inline-flex;align-items:center;gap:9px;color:#424245;cursor:pointer;-webkit-user-select:none;user-select:none}.switch-toggle input{position:absolute;opacity:0;pointer-events:none}.switch-track{position:relative;width:42px;height:24px;flex:0 0 42px;border:1px solid #d2d2d7;border-radius:999px;background:#e5e5ea;transition:background .18s ease,border-color .18s ease}.switch-track:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #00000029;transition:transform .2s cubic-bezier(.22,1,.36,1)}.switch-toggle input:checked+.switch-track{border-color:var(--accent);background:var(--accent)}.switch-toggle input:checked+.switch-track:after{transform:translate(18px)}.diffusion-panel{display:grid;gap:10px;grid-column:1}.diffusion-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.diffusion-head strong{color:#6e6e73;font-size:13px}.diffusion-slider.disabled:before{background:linear-gradient(90deg,#a1a1a6 0 var(--range-value),#e5e5ea var(--range-value) 100%);box-shadow:inset 0 0 0 1px #8e8e931f}.diffusion-slider.disabled .native-slider{cursor:not-allowed}.letter-color{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #ededf2;border-radius:8px;padding:8px 10px}.letter-color span{min-width:0;overflow:hidden;text-overflow:ellipsis}.letter-color input{width:34px;height:34px;border:0;border-radius:50%;padding:0}.letter-brief{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.letter-chips{min-width:0;display:flex;gap:6px;overflow:hidden}.letter-chip{min-width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(0,0,0,.08);border-radius:8px;background:var(--chip);color:#fff;font-size:13px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.35)}.letter-config-button{width:36px;height:36px;display:grid;place-items:center;border:1px solid #d2d2d7;border-radius:50%;background:#fff;color:var(--accent)}.action-panel{grid-column:2;display:flex;align-items:stretch;padding:12px}.upload-button{min-height:58px;border-radius:12px}.primary-button,.secondary-button{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 10px;font-size:13px;font-weight:700;text-decoration:none;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}.primary-button{color:#fff;background:var(--accent)}.primary-button:hover{transform:translateY(-1px);background:#06c}.primary-button:disabled{opacity:.65;cursor:wait}.serial-log{min-height:132px;border:1px solid #ededf2;border-radius:8px;padding:12px;background:#fbfbfd;color:#6e6e73;font-family:SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.45;overflow:auto}.serial-log p{margin:0 0 8px;overflow-wrap:anywhere}.console-toggle{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(210,210,215,.9);border-radius:50%;background:#ffffffdb;color:var(--accent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.console-drawer{position:fixed;inset:0 auto 0 0;z-index:40;width:min(390px,calc(100vw - 28px));display:grid;grid-template-rows:auto 1fr;gap:18px;padding:24px;border-right:1px solid #ededf2;background:#fffffff0;box-shadow:24px 0 60px #00000029;transform:translate(-105%);transition:transform .26s cubic-bezier(.22,1,.36,1)}.console-drawer.open{transform:translate(0)}.console-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.console-header-actions{display:inline-flex;align-items:center;gap:8px}.drawer-download{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #ededf2;border-radius:999px;padding:0 12px;background:#fff;color:#1d1d1f;font-weight:700}.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid #ededf2;border-radius:50%;background:#fff;color:#1d1d1f}.drawer-log{min-height:0}.install-panel{display:grid;gap:8px;padding:16px;border-color:#ff3b3042;background:#ff3b3012}.install-panel p{margin:0;color:#6e6e73;font-size:14px}.toast{position:fixed;top:20px;left:50%;z-index:80;transform:translate(-50%);min-width:min(420px,calc(100vw - 32px));border:1px solid rgba(0,113,227,.38);border-radius:14px;padding:12px 16px;background:#ffffffc7;color:#1d1d1f;box-shadow:0 18px 40px #0000001f;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:toast-in .26s cubic-bezier(.22,1,.36,1) both}.toast.error{border-color:#ff3b30b8;background:#ff3b302e;color:#9f1239}.toast.hide{animation:toast-out .26s ease both}.upload-overlay,.modal-backdrop{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:#f5f5f76b;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.upload-card,.letter-modal{border:1px solid rgba(237,237,242,.95);border-radius:16px;background:#ffffffeb;box-shadow:0 28px 80px #0000002e}.upload-card{width:min(360px,calc(100vw - 40px));display:grid;justify-items:center;gap:12px;padding:28px;animation:modal-in .24s cubic-bezier(.22,1,.36,1) both}.upload-card>svg{color:var(--accent)}.upload-card>span{color:#6e6e73;font-size:14px}.upload-success-icon{color:var(--ok)!important;animation:success-pop .42s cubic-bezier(.22,1,.36,1) both}.upload-progress{width:100%;height:8px;overflow:hidden;border-radius:999px;background:#e5e5ea}.upload-progress span{height:100%;display:block;border-radius:inherit;background:var(--accent);transition:width .24s ease}.upload-overlay.success .upload-progress span{background:var(--ok)}.upload-overlay.error .upload-progress span{background:var(--danger)}.letter-modal{width:min(620px,calc(100vw - 40px));display:grid;gap:18px;padding:22px;animation:modal-in .24s cubic-bezier(.22,1,.36,1) both}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.modal-letter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-18px)}to{opacity:1;transform:translate(-50%)}}@keyframes toast-out{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-18px)}}@keyframes modal-in{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes success-pop{0%{opacity:0;transform:scale(.62)}70%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@media(max-width:900px){.app-shell{padding:88px 16px 32px}.workspace{grid-template-columns:1fr}.controls-rail{grid-template-columns:1fr;order:2}.preview-stage{order:1;justify-items:center}.panel{padding:24px}.preview-panel{width:min(100%,480px);padding:0}.action-panel{grid-column:auto}.form-grid{grid-template-columns:1fr}.control-row.split{align-items:stretch;flex-direction:column}.section-heading h1{font-size:38px}}@media(max-width:560px){.topbar{align-items:stretch;flex-direction:column;border-radius:16px}.app-shell{padding-top:134px}.preview-panel{max-width:360px;justify-self:center}.section-heading h1{font-size:32px}.section-heading p{font-size:15px}}