:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#20211e;font-synthesis:none;--paper:#f8f5ed;--paper-deep:#eee8da;--ink:#20211e;--muted:#77766e;--line:#d9d3c6;--accent:#f25a38;--accent-dark:#d94828;--green:#648d55;--shadow:0 18px 45px #342b1f17;background:#f3efe5;font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,system-ui,sans-serif}[hidden]{display:none!important}*{box-sizing:border-box}html{overscroll-behavior-y:none;background:#f3efe5;min-width:320px;min-height:100%;overflow-x:hidden}body{background:radial-gradient(circle at 50% -20%,#ffffffd9,#0000 42%),#f3efe5;min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button,input,select,textarea{font:inherit}button,select,input[type=range],input[type=checkbox]{cursor:pointer}button:disabled,input:disabled{cursor:not-allowed;opacity:.48}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.grain{z-index:100;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");position:fixed;inset:0}.topbar{z-index:5;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#f8f5eddb;justify-content:space-between;align-items:center;min-height:74px;padding:12px clamp(18px,2.4vw,38px);display:flex;position:relative}.brand{color:inherit;align-items:center;gap:12px;text-decoration:none;display:flex}.brand-mark{width:30px;height:34px;box-shadow:3px 3px 0 var(--accent);border:1px solid #22231f;border-radius:4px;grid-template-columns:repeat(3,5px);align-items:end;gap:3px;padding:6px;display:grid}.brand-mark i{background:#22231f;height:100%;display:block}.brand-mark i:nth-child(2){height:65%}.brand-mark i:nth-child(3){height:35%}.brand strong{letter-spacing:-.02em;font-size:17px;display:block}.brand small{color:var(--muted);letter-spacing:.12em;margin-top:1px;font-family:DM Mono,ui-monospace,monospace;font-size:9px;display:block}.connection-cluster,.connection-state,.inline-actions,.send-actions{align-items:center;display:flex}.connection-cluster{gap:14px}.github-link{color:var(--muted);border-radius:6px;align-items:center;gap:6px;padding:6px 8px;font-family:DM Mono,ui-monospace,monospace;font-size:9px;text-decoration:none;transition:color .14s,background .14s;display:inline-flex}.github-link:hover{color:var(--ink);background:#20211e0f}.github-link svg{fill:currentColor;width:16px;height:16px}.connection-state{color:var(--muted);gap:8px;font-size:12px}.status-dot{background:#a9a69f;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #a9a69f24}.connection-state.connected .status-dot{background:var(--green);box-shadow:0 0 0 4px #648d5524}.connection-state.connected{color:#3e6334}.button,.icon-button,.text-button{border:0;transition:transform .14s,box-shadow .14s,background .14s}.button:active:not(:disabled),.icon-button:active:not(:disabled),.text-button:active:not(:disabled){transform:translateY(1px)}.button{border:1px solid #0000;border-radius:7px;min-height:38px;padding:8px 13px;font-size:12px;font-weight:600}.button-primary,.button-send{color:#fff;background:var(--ink);box-shadow:0 5px 14px #20211e2e}.button-primary:hover:not(:disabled),.button-send:hover:not(:disabled){background:#090a09;box-shadow:0 7px 18px #20211e40}.usb-icon{color:#ff7558;margin-right:5px;font-size:17px;line-height:0;display:inline-block}.studio-layout{grid-template-columns:minmax(270px,300px) minmax(500px,1fr) minmax(280px,318px);min-height:calc(100vh - 74px);display:grid}.panel{z-index:2;background:#f8f5edb8}.controls-panel{border-right:1px solid var(--line)}.inspector-panel{border-left:1px solid var(--line)}.panel-section{border-bottom:1px solid var(--line);padding:22px clamp(16px,1.6vw,24px)}.section-heading,.workspace-toolbar{justify-content:space-between;align-items:flex-start;display:flex}.section-heading{margin-bottom:16px}.eyebrow{color:#99958c;letter-spacing:.15em;margin-bottom:4px;font-family:DM Mono,ui-monospace,monospace;font-size:8px;font-weight:500;display:block}h1,h2,h3,p{margin:0}h1,h2{letter-spacing:-.02em;font-size:15px;line-height:1.25}h1{font-size:18px}.icon-button{border:1px solid var(--line);width:32px;height:32px;color:var(--ink);background:#f8f5ed;border-radius:6px;place-items:center;padding:0;display:inline-grid}.icon-button:hover:not(:disabled){background:#fff;border-color:#bbb5a9}.text-button{color:var(--muted);background:0 0;padding:3px 0;font-size:10px}.text-button:hover{color:var(--accent-dark)}.device-message{color:var(--muted);font-size:11px;line-height:1.65}.device-details{gap:7px;margin:0;display:grid}.device-details div{justify-content:space-between;gap:10px;font-size:10px;display:flex}.device-details dt{color:var(--muted)}.device-details dd{text-overflow:ellipsis;white-space:nowrap;margin:0;font-family:DM Mono,ui-monospace,monospace;overflow:hidden}.section-note{color:var(--muted);margin:-5px 0 13px;font-size:9px;line-height:1.6}.device-config-form{gap:13px;display:grid}.refresh-fields{grid-template-columns:1fr 1fr;gap:9px;display:grid}.refresh-fields .field{position:relative}.refresh-fields .field input{padding-right:31px;font-family:DM Mono,ui-monospace,monospace;font-size:10px}.refresh-fields .field em{color:var(--muted);pointer-events:none;font-size:8px;font-style:normal;position:absolute;bottom:10px;right:9px}.device-config-form .button{margin-top:2px}.firmware-source{border:1px solid var(--line);background:#ffffff52;border-radius:7px;padding:10px}.firmware-source strong,.firmware-source small{display:block}.firmware-source strong{text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.45;overflow:hidden}.firmware-source small{color:var(--muted);margin-top:3px;font-family:DM Mono,ui-monospace,monospace;font-size:8px}.firmware-source-actions{justify-content:space-between;align-items:center;gap:8px;margin-top:7px;display:flex}.firmware-source-actions .button{min-height:31px;padding:5px 9px;font-size:9px}.firmware-buttons{grid-template-columns:1fr 1fr;gap:7px;margin-top:12px;display:grid}.firmware-buttons .button{min-height:35px;padding-inline:8px;font-size:9px}.backup-download-link{color:#3e6334;grid-column:1/-1;place-items:center;text-decoration:none;display:inline-grid}.flash-progress-wrap{margin-top:11px}.flash-progress-wrap progress{width:100%;height:6px;accent-color:var(--accent);border:0;border-radius:4px;display:block}.flash-progress-wrap small{color:var(--muted);margin-top:6px;font-size:8px;line-height:1.45;display:block}.dropzone{min-height:76px;color:var(--muted);cursor:pointer;background:#ffffff47;border:1px dashed #bcb6aa;border-radius:8px;align-items:center;gap:12px;padding:13px;transition:border .14s,background .14s,transform .14s;display:flex}.dropzone:hover,.dropzone.dragging{border-color:var(--accent);background:#f25a380d}.dropzone.dragging{transform:scale(1.01)}.drop-icon{width:39px;height:39px;color:var(--accent-dark);background:#ede7d9;border-radius:50%;flex:none;place-items:center;font-size:20px;display:grid}.dropzone strong,.dropzone span{display:block}.dropzone strong{color:var(--ink);margin-bottom:3px;font-size:11px}.dropzone span{font-size:9px}.image-actions{gap:7px;margin-top:9px}.button-quiet{border-color:var(--line);color:var(--ink);background:#ffffff6b}.button-quiet:hover:not(:disabled){background:#fff;border-color:#bdb6a9}.image-actions .button{flex:1;min-height:31px;padding:5px 9px;font-size:10px}.danger-text{color:#b43e2a!important}.control-grid{grid-template-columns:repeat(2,1fr);gap:12px 10px;margin-top:17px;display:grid}.full-field{grid-column:1/-1}.field,.range-field,.toggle-field{min-width:0}.field>span,.range-field>span,.toggle-field>span{color:#65645e;justify-content:space-between;margin-bottom:6px;font-size:9px;display:flex}.range-field>span b,.toggle-field>span b{color:#65645e;font-weight:500}.range-field output{color:var(--ink);font-family:DM Mono,ui-monospace,monospace}.field input,.field select,.field textarea,.canvas-meta select{border:1px solid var(--line);width:100%;min-height:34px;color:var(--ink);background:#ffffff8a;border-radius:5px;padding:7px 9px;font-size:11px}.field textarea{resize:vertical;line-height:1.5}.field input:focus,.field select:focus,.field textarea:focus{background:#fff;border-color:#9c968b}input[type=range]{appearance:none;background:#d5cfc2;border-radius:2px;width:100%;height:3px;margin:4px 0}input[type=range]::-webkit-slider-thumb{border:2px solid var(--paper);appearance:none;background:var(--ink);border-radius:50%;width:13px;height:13px;box-shadow:0 0 0 1px #222}.toggle-field{justify-content:space-between;align-items:center;display:flex}.toggle-field>span{margin:0;display:block}.toggle-field small{color:#9a968e;margin-top:2px;font-size:8px;display:block}.toggle-field input{opacity:0;position:absolute}.toggle-field i{background:#cbc5ba;border-radius:12px;width:32px;height:18px;transition:background .14s;display:block;position:relative}.toggle-field i:after{content:"";background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .14s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}.toggle-field input:checked+i{background:var(--accent)}.toggle-field input:checked+i:after{transform:translate(14px)}.toggle-field input:disabled+i{cursor:not-allowed;opacity:.48}.count-badge,.type-badge,.live-badge{border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:3px 7px;font-family:DM Mono,ui-monospace,monospace;font-size:8px}.add-layer-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.button-add{border-color:var(--line);background:0 0}.button-add:hover{border-color:var(--accent);color:var(--accent-dark);background:#f25a380a}.button-add span{background:#e9e3d6;border-radius:4px;place-items:center;width:17px;height:17px;margin-right:5px;font-family:Georgia,serif;font-size:10px;display:inline-grid}.layer-list{gap:5px;margin-top:12px;display:grid}.empty-list{color:#9a968e;text-align:center;padding:13px 8px;font-size:9px}.layer-item{width:100%;color:inherit;text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:9px;padding:8px;display:flex}.layer-item:hover{background:#ffffff73}.layer-item.selected{background:#fffdf8;border-color:#cbc4b7;box-shadow:0 3px 10px #342b1f0f}.layer-item-icon{background:#f1ecdf;border:1px solid #d9d2c5;border-radius:5px;flex:none;place-items:center;width:26px;height:26px;font-family:Georgia,serif;font-size:11px;display:grid}.layer-item-copy{min-width:0}.layer-item-copy strong,.layer-item-copy small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.layer-item-copy strong{max-width:180px;font-size:10px;font-weight:600}.layer-item-copy small{color:var(--muted);margin-top:2px;font-family:DM Mono,ui-monospace,monospace;font-size:7px}.workspace{background-color:#eee9de;background-image:linear-gradient(#3d3a3308 1px,#0000 1px),linear-gradient(90deg,#3d3a3308 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;flex-direction:column;min-width:0;padding:27px clamp(24px,3vw,48px) 25px;display:flex;position:relative;overflow:hidden}.workspace:before{pointer-events:none;content:"";background:radial-gradient(circle at 50% 42%,#ffffffb8,#0000 55%);position:absolute;inset:0}.workspace-toolbar,.device-stage,.send-dock{z-index:1;position:relative}.workspace-toolbar{align-items:flex-end}.canvas-meta{color:var(--muted);align-items:center;gap:13px;font-family:DM Mono,ui-monospace,monospace;font-size:8px;display:flex}.canvas-meta>span{align-items:center;gap:5px;display:flex}.meta-dot{background:var(--green);border-radius:50%;width:5px;height:5px}.canvas-meta label{align-items:center;gap:5px;display:flex}.canvas-meta select{width:auto;min-height:27px;padding:3px 22px 3px 7px;font-size:8px}.device-stage{flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:440px;padding:30px 0 24px;display:flex}.ambient-shadow{filter:blur(25px);background:#3c332829;border-radius:50%;width:min(70%,560px);height:55px;position:absolute;bottom:58px}.epaper-device{background:linear-gradient(145deg,#e9e4d9,#d9d2c5);border:1px solid #bab4a8;border-radius:15px;width:min(100%,750px);padding:clamp(14px,2vw,24px);position:relative;box-shadow:inset 0 2px #fff,inset 0 -2px 3px #5e534326,0 26px 45px #4035282b}.device-label,.device-footer{color:#888378;letter-spacing:.09em;justify-content:space-between;font-family:DM Mono,ui-monospace,monospace;font-size:7px;display:flex}.device-label{margin:-5px 4px 10px}.screen-bezel{background:#242522;border:1px solid #9f998e;border-radius:6px;padding:clamp(9px,1.3vw,15px);box-shadow:inset 0 2px 4px #00000059,0 1px #fff6}.canvas-stack{aspect-ratio:296/152;touch-action:none;background:#fff;width:100%;position:relative;overflow:hidden;box-shadow:0 0 15px #dfd8be24}.canvas-stack canvas{width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0}#overlayCanvas{cursor:move}.device-footer{justify-content:flex-start;align-items:center;gap:6px;margin:10px 4px -5px}.device-footer span{color:var(--accent);font-size:8px}.device-footer b{margin-left:auto;font-weight:500}.canvas-help{color:#858078;margin-top:22px;font-size:9px;position:relative}.send-dock{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#faf8f2d1;border:1px solid #d0c9bc;border-radius:10px;justify-content:space-between;align-items:center;gap:18px;width:min(100%,750px);margin:0 auto;padding:12px 13px 12px 16px;display:flex;box-shadow:0 8px 20px #46392b12}.send-status{align-items:center;gap:10px;display:flex}.send-indicator{background:#aaa69e;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #aaa69e21}.send-indicator.ready{background:var(--green);box-shadow:0 0 0 4px #648d5521}.send-indicator.busy{background:var(--accent);animation:1s infinite pulse}@keyframes pulse{50%{opacity:.35}}.send-status strong,.send-status small{display:block}.send-status strong{font-size:10px}.send-status small{color:var(--muted);margin-top:2px;font-size:8px}.send-actions{gap:7px}.send-actions .button{min-height:36px;font-size:10px}.button-send{background:var(--accent);min-width:140px;box-shadow:0 5px 14px #f25a3838}.button-send:hover:not(:disabled){background:var(--accent-dark);box-shadow:0 7px 17px #f25a384a}.button-send span{margin-left:8px}.inspector-empty{color:var(--muted);text-align:center;flex-direction:column;align-items:center;padding:34px 15px 28px;display:flex}.crosshair-icon{color:#8e887f;border:1px dashed #bdb7ab;border-radius:50%;place-items:center;width:44px;height:44px;margin-bottom:13px;font-size:22px;display:grid}.inspector-empty strong{color:var(--ink);font-size:11px}.inspector-empty span{max-width:190px;margin-top:5px;font-size:9px;line-height:1.6}.inspector-form{gap:14px;display:grid}.sensor-fields{gap:11px;display:grid}.two-column,.three-column{gap:8px;display:grid}.two-column{grid-template-columns:1fr 1fr}.three-column{grid-template-columns:repeat(3,1fr)}.property-group{border-top:1px solid var(--line);gap:10px;padding-top:13px;display:grid}.property-group h3{color:#8a867e;letter-spacing:.09em;text-transform:uppercase;font-family:DM Mono,ui-monospace,monospace;font-size:8px;font-weight:500}.field.compact>span{font-family:DM Mono,ui-monospace,monospace}.align-end{align-items:end}.check-field{color:#65645e;align-items:center;gap:7px;min-height:34px;font-size:9px;display:flex}.check-field input{accent-color:var(--accent)}.layer-actions{border-top:1px solid var(--line);gap:6px;padding-top:13px;display:flex}.layer-actions .button{min-width:34px;min-height:32px;padding:5px 8px;font-size:9px}.layer-actions .grow{flex:1}.type-badge{color:var(--accent-dark);background:#f25a380d;border-color:#f25a3859}.live-badge{color:#567b49;border-color:#648d554d;align-items:center;gap:5px;display:flex}.live-badge i{background:var(--green);border-radius:50%;width:5px;height:5px}.sensor-list{gap:5px;display:grid}.sensor-row{background:#ffffff57;border-radius:5px;justify-content:space-between;align-items:center;gap:10px;padding:7px 8px;font-size:9px;display:flex}.sensor-row span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sensor-row b{flex:none;font-family:DM Mono,ui-monospace,monospace;font-size:9px;font-weight:500}.sensor-row button{color:#b43e2a;background:0 0;border:0;width:18px;height:18px;margin-left:2px;padding:0;font-size:11px}.custom-sensor-form{border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) 72px 32px;align-items:end;gap:6px;margin-top:12px;padding-top:12px;display:grid}.add-data-button{color:#fff;border-color:var(--ink);background:var(--ink)}.project-buttons{grid-template-columns:1fr 1fr;gap:7px;display:grid}.project-buttons .button{min-height:34px;font-size:9px}.full-button{grid-column:1/-1}.toast-region{z-index:200;pointer-events:none;gap:8px;width:min(330px,100vw - 40px);display:grid;position:fixed;bottom:20px;right:20px}.toast{border:1px solid #d2cabe;border-left:3px solid var(--green);color:var(--ink);box-shadow:var(--shadow);background:#fffdf8f5;border-radius:7px;padding:11px 13px;font-size:10px;line-height:1.5;animation:.18s both toast-in}.toast.error{border-left-color:var(--accent)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}@media (width>=1201px){html,body{height:100%;overflow:hidden}body{width:100%;position:fixed;inset:0}.topbar{height:74px}.studio-layout{height:calc(100dvh - 74px);min-height:0}.controls-panel,.inspector-panel{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c8c1b5 transparent;height:100%;min-height:0;overflow-y:auto}.workspace{overscroll-behavior:contain;height:100%;min-height:0;overflow-y:auto}}@media (width<=1200px){.studio-layout{grid-template-columns:280px minmax(480px,1fr)}.inspector-panel{border-top:1px solid var(--line);border-left:0;grid-column:1/-1;grid-template-columns:1.15fr 1fr .85fr;display:grid}.inspector-panel .panel-section{border-right:1px solid var(--line);border-bottom:0}}@media (width<=800px){.topbar{min-height:66px}.connection-state{display:none}.studio-layout{flex-direction:column;display:flex}.workspace{order:-1;min-height:620px}.controls-panel,.inspector-panel{border:0;border-top:1px solid var(--line)}.controls-panel{grid-template-columns:1fr 1fr;display:grid}.controls-panel .panel-section:first-child,.controls-panel .layers-section{grid-column:1/-1}.inspector-panel{grid-template-columns:1fr 1fr;display:grid}.project-section{grid-column:1/-1}}@media (width<=580px){.topbar{padding-inline:14px}.brand small{display:none}.button-primary{min-height:36px;padding:7px 10px;font-size:10px}.workspace{min-height:520px;padding:22px 14px 18px}.canvas-meta>span{display:none}.device-stage{min-height:335px;padding-block:24px 14px}.epaper-device{border-radius:10px;padding:13px}.screen-bezel{padding:7px}.canvas-help{font-size:8px}.send-dock{flex-direction:column;align-items:stretch}.send-actions .button{flex:1}.controls-panel,.inspector-panel{display:block}.inspector-panel .panel-section{border-right:0;border-bottom:1px solid var(--line)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}