*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#1a1a1a;--surface:#242424;--surface-2:#2e2e2e;--border:#3a3a3a;--text:#e8e8e8;--text-muted:#888;--accent:#c8a96e;--accent-hover:#d9bc88;--radius:.429rem;--controls-width:22.857rem}html{height:100%;font-size:clamp(14px,22.4px - .583vw,14px)}body{background:var(--bg);height:100%;color:var(--text);font-family:system-ui,-apple-system,sans-serif}#app{height:100vh;display:flex;overflow:hidden}#preview-panel{background:var(--bg);flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}#axis-info{pointer-events:none;z-index:1;white-space:nowrap;flex-direction:column;align-items:flex-start;gap:.143rem;font-size:.857rem;font-weight:500;display:flex;position:absolute;bottom:calc(100% + .429rem);left:0}#axis-info:empty,#axis-info:not(.visible){display:none}#axis-info-x{color:#e06060}#axis-info-y{color:#6bbfde}#axis-info-hint{color:#6ec86e}#canvas-wrap{display:inline-flex;position:relative}#preview-canvas{max-width:100%;max-height:100%;image-rendering:pixelated;display:block}#drop-hint{color:var(--text-muted);pointer-events:auto;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:1.5rem 2rem;font-size:1rem;display:flex;position:absolute;inset:0;overflow-y:auto}.intro-wrap{flex-direction:row;align-items:flex-start;gap:1.5rem;width:100%;max-width:52rem;display:flex}.intro-gifs{flex-direction:column;flex:0 0 19%;align-self:stretch;gap:.571rem;min-width:11rem;margin-top:.5rem;margin-bottom:.4rem;display:flex}.intro-gif-slot{background:var(--surface2,#2a2a2a);border:1px dashed var(--border);border-radius:.571rem;flex:1;min-height:0;position:relative;overflow:hidden}.intro-gif-slot:has(img):after{display:none}.intro-gif-slot:not(:has(img)):after{content:"GIF";letter-spacing:.1em;color:var(--border);justify-content:center;align-items:center;font-size:.786rem;font-weight:600;display:flex;position:absolute;inset:0}.intro-gif-copyright{color:#fffffff2;opacity:0;pointer-events:none;background:linear-gradient(#000000bf 70%,#0000);border-radius:.571rem .571rem 0 0;padding:.286rem .714rem 1.429rem;font-size:.786rem;font-weight:500;transition:opacity .15s;position:absolute;top:0;left:0;right:0}.intro-gif-slot:hover .intro-gif-copyright{opacity:1}.intro-gif-copyright a{color:#fffffff2;text-underline-offset:.143rem;pointer-events:auto;text-decoration:underline}.intro-gif-copyright a:hover{color:#fff}.intro-apply-btn{white-space:nowrap;color:#1a1a1a;background:var(--accent);cursor:pointer;opacity:0;border:none;border-radius:.429rem;padding:.429rem .857rem;font-family:inherit;font-size:.786rem;font-weight:600;transition:opacity .15s,transform .15s;position:absolute;bottom:.714rem;left:50%;transform:translate(-50%)translateY(.286rem)}.intro-gif-slot:hover .intro-apply-btn{opacity:1;transform:translate(-50%)translateY(0)}.intro-apply-btn:hover{background:#66d9ff}.intro-gif-slot img{object-fit:cover;image-rendering:auto;border-radius:.571rem;width:100%;height:100%;display:block}.intro{flex:1;min-width:0;line-height:1.55}.intro-title{letter-spacing:.5em;color:#fff;margin:0 0 .6rem;font-family:Black Han Sans,sans-serif;font-size:2.286rem;font-weight:400}.intro-lead{color:var(--text);margin:0 0 1.2rem;font-size:1rem}.intro h2{text-transform:uppercase;letter-spacing:.06em;color:var(--text);margin:1rem 0 .4rem;font-size:.857rem;font-weight:600}.intro p{margin:0 0 .4rem}.intro ul,.intro ol{margin:0 0 .4rem;padding-left:1.3rem}.intro li{margin-bottom:.2rem}.intro strong{color:var(--text)}.intro-privacy{border:1px solid var(--border);color:var(--text);text-align:center;border-radius:.429rem;margin-top:1rem;padding:.6rem .857rem;font-size:.857rem;line-height:1.45}.intro-footer{color:var(--text-muted);text-align:center;margin:.6rem 0 0;font-size:.786rem}.intro-footer a{color:var(--text-muted);text-decoration:none}.intro-footer a:hover{color:var(--text)}.intro-cta-btn{color:#1a1a1a;background:var(--accent);cursor:pointer;border:none;border-radius:.571rem;margin:0;padding:.714rem 2rem;font-family:inherit;font-size:1rem;font-weight:600;transition:background .15s,transform .1s;display:block}.intro-cta-btn:hover{background:#66d9ff;transform:translateY(-1px)}.intro-cta-btn:active{transform:translateY(0)}#preview-panel.has-image #drop-hint{display:none}#resize-handle{cursor:col-resize;z-index:2;background:0 0;flex-shrink:0;width:.286rem;transition:background .15s;position:relative}#resize-handle:hover,#resize-handle.dragging{background:var(--accent)}#controls-panel{width:calc(var(--controls-width) + .714rem);background:linear-gradient(var(--border), var(--border)) no-repeat .643rem 0 / 1px 100%, linear-gradient(var(--surface), var(--surface)) no-repeat .714rem 0 / calc(100% - .714rem) 100%;z-index:1;border-left:none;flex-direction:column;flex-shrink:0;gap:1rem;min-width:18.571rem;max-width:42.857rem;margin-left:-.714rem;padding:1rem 1.143rem 1rem 1.857rem;display:flex;overflow-y:auto}#app-title{text-align:center;letter-spacing:.5em;color:#fff;font-family:Black Han Sans,sans-serif;font-size:1.857rem;font-weight:400}#button-row{gap:.571rem;display:flex}.btn{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);color:var(--text);cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;flex:1;justify-content:center;align-items:center;padding:.571rem .857rem;font-size:.929rem;font-weight:500;line-height:1;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover:not(:disabled){background:var(--border);border-color:#555}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#1a1a1a;font-weight:600}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}#file-input,#import-input{display:none}.export-dropdown-wrap{flex:1;position:relative}.export-main-btn:disabled{opacity:.4;cursor:not-allowed}.export-main-btn{justify-content:center;align-items:center;gap:.429rem;width:100%;display:flex}.dropdown-chevron{opacity:.7;flex-shrink:0;width:.571rem;height:.357rem;transition:transform .15s}.export-dropdown-wrap:has(.export-dropdown-menu:not(.hidden)) .dropdown-chevron{transform:rotate(180deg)}.export-dropdown-menu{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);z-index:100;min-width:10rem;position:absolute;top:calc(100% + .286rem);left:0;right:0;overflow:hidden;box-shadow:0 .286rem .857rem #0006}.export-dropdown-menu.hidden{display:none}.export-dropdown-item{width:100%;color:var(--text);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:.571rem;padding:.643rem .857rem;font-size:.929rem;font-weight:500;display:flex}.export-dropdown-item svg{width:1.071rem;height:1.071rem;color:var(--text-muted);flex-shrink:0}.export-dropdown-item:hover:not(:disabled){background:var(--border)}.export-dropdown-item:disabled{opacity:.4;cursor:not-allowed}.export-dropdown-item+.export-dropdown-item{border-top:1px solid var(--border)}#aa-row{justify-content:space-between;align-items:center;display:flex}.aa-label{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-size:.857rem;font-weight:600}#anim-mode-row{justify-content:space-between;align-items:center;display:flex}.anim-mode-label{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-size:.857rem;font-weight:600}.segmented-btn{border:1px solid var(--border);border-radius:.429rem;display:inline-flex;overflow:hidden}.seg-opt{border:none;border-left:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;flex:none;padding:.286rem .857rem;font-family:inherit;font-size:.857rem;line-height:1.4;transition:background .12s,color .12s}.seg-opt:first-child{border-left:none}.seg-opt:hover:not(.active){background:var(--surface2);color:var(--text)}.seg-opt.active{background:var(--accent);color:#1a1a1a;font-weight:600}.hidden-control{display:none}.center-track-layout{align-items:stretch;gap:.714rem;display:flex}.center-sliders{flex-direction:column;flex:1;gap:1.143rem;min-width:0;display:flex}.center-track-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;width:2.571rem;color:var(--text-muted);flex-shrink:0;justify-content:center;align-self:stretch;align-items:center;transition:background .15s,border-color .15s,color .15s;display:flex}.center-track-btn svg{width:1.286rem;height:1.286rem}.center-track-btn:hover{background:var(--border);color:var(--text);border-color:#555}.center-track-btn.active{background:var(--accent);border-color:var(--accent);color:#1a1a1a}#preview-panel.center-tracking #preview-canvas{cursor:crosshair}#pattern-list{flex-direction:column;gap:.714rem;margin-left:-1.857rem;display:flex}#add-pattern-btn{flex:none}.pattern-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.857rem;padding:.857rem .857rem .857rem 2.286rem;display:flex;position:relative}.pattern-card.pattern-card-add{max-height:0;animation:.4s ease-out forwards pattern-card-grow;overflow:hidden}.pattern-card.pattern-card-remove{pointer-events:none;animation:.5s ease-in forwards pattern-card-shrink;overflow:hidden}@keyframes pattern-card-grow{0%{opacity:.6;max-height:0}to{opacity:1;max-height:500px}}@keyframes pattern-card-shrink{0%{max-height:500px}to{max-height:0}}.pattern-card-header{justify-content:space-between;align-items:center;display:flex}.pattern-card-header-right{align-items:center;gap:.429rem;display:flex}.visibility-btn{border-radius:var(--radius);width:1.571rem;height:1.571rem;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:color .12s,border-color .12s,background .12s;display:flex}.visibility-btn svg{width:1rem;height:1rem}.visibility-btn .eye-slash{display:none}.visibility-btn.layer-hidden .eye-slash{display:block}.visibility-btn:hover{color:var(--text);background:var(--border);border-color:#555}.visibility-btn.layer-hidden{color:var(--text-muted);opacity:.5}.visibility-btn:disabled{opacity:.25;cursor:not-allowed}.pattern-card.layer-hidden .pattern-blend-row,.pattern-card.layer-hidden .pattern-linear-fields,.pattern-card.layer-hidden .pattern-center-fields,.pattern-card.layer-hidden .pattern-spiral-fields,.pattern-card.layer-hidden .pattern-ngon-fields{opacity:.3}.pattern-type-select{appearance:none;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right .571rem center;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;outline:none;padding:.286rem 1.857rem .286rem .643rem;font-size:.857rem;font-weight:500;transition:border-color .15s}.pattern-type-select:hover,.pattern-type-select:focus{border-color:#555}.pattern-remove-btn{border-radius:var(--radius);border:1px solid var(--border);width:1.571rem;height:1.571rem;color:var(--text-muted);cursor:pointer;background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.929rem;line-height:1;transition:background .12s,color .12s,border-color .12s;display:flex}.pattern-remove-btn:hover:not(:disabled){background:var(--border);color:var(--text);border-color:#555}.pattern-remove-btn:disabled{opacity:.25;cursor:not-allowed}.pattern-blend-row{justify-content:space-between;align-items:center;display:flex}.blend-label{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-size:.857rem;font-weight:600}.pattern-blend-select{appearance:none;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right .571rem center;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;outline:none;padding:.286rem 1.857rem .286rem .643rem;font-size:.857rem;font-weight:500;transition:border-color .15s}.pattern-blend-select:hover,.pattern-blend-select:focus{border-color:#555}.sides-pip-row{gap:.429rem;display:flex}.sides-pip{border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);cursor:pointer;background:0 0;flex:1;padding:.357rem 0;font-size:.857rem;font-weight:600;line-height:1;transition:background .12s,color .12s,border-color .12s}.sides-pip:hover{background:var(--border);color:var(--text);border-color:#555}.sides-pip.active{background:var(--accent);border-color:var(--accent);color:#1a1a1a}#sliders{flex-direction:column;gap:1.286rem;display:flex}.control-section{flex-direction:column;gap:0;display:flex}.control-section-header{color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;-webkit-user-select:none;user-select:none;border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:.429rem 0;font-size:.786rem;font-weight:600;display:flex}.control-section-random-btn{flex:none;padding:.286rem .714rem;font-size:.857rem}.control-section-body{flex-direction:column;gap:1rem;padding:.857rem 0;display:flex}.slider-group{flex-direction:column;gap:.571rem;display:flex}.slider-header{justify-content:space-between;align-items:center;display:flex}.slider-header label{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-size:.857rem;font-weight:600}.slider-header-right{align-items:center;gap:.571rem;display:flex}.slider-value{font-variant-numeric:tabular-nums;color:var(--text);text-align:right;min-width:3.714rem;font-size:.857rem}.axis-btn{border:1px solid var(--border);width:1.286rem;height:1.286rem;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:.214rem;flex-shrink:0;padding:0;font-size:.714rem;font-weight:700;line-height:1;transition:background .12s,color .12s,border-color .12s}.axis-btn:hover{color:var(--text);border-color:#666}.axis-btn.active-x{background:var(--accent);border-color:var(--accent);color:#1a1a1a}.axis-btn.active-y{color:#1a1a1a;background:#6bbfde;border-color:#6bbfde}.axis-btn:disabled{opacity:.25;cursor:not-allowed}#preview-panel.xy-active #preview-canvas{cursor:crosshair}.lock-btn{cursor:pointer;background-color:var(--text-muted);opacity:.35;border:none;flex-shrink:0;width:1rem;height:1rem;padding:0;transition:opacity .15s,background-color .15s;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='12' height='7' rx='1.5'/%3E%3Cpath d='M5 8V5.5a3 3 0 0 1 5.5-1.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='12' height='7' rx='1.5'/%3E%3Cpath d='M5 8V5.5a3 3 0 0 1 5.5-1.5'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.lock-btn:hover{opacity:.7}.lock-btn.locked{background-color:var(--accent);opacity:1;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='12' height='7' rx='1.5'/%3E%3Cpath d='M5 8V5.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='12' height='7' rx='1.5'/%3E%3Cpath d='M5 8V5.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E")}.toggle{cursor:pointer;flex-shrink:0;align-items:center;display:inline-flex}.toggle input[type=checkbox]{display:none}.toggle-track{background:var(--border);border-radius:.571rem;flex-shrink:0;width:2rem;height:1.143rem;transition:background .2s;position:relative}.toggle-track:after{content:"";background:var(--text-muted);border-radius:50%;width:.857rem;height:.857rem;transition:transform .2s,background .2s;position:absolute;top:.143rem;left:.143rem}.toggle input:checked+.toggle-track{background:var(--accent)}.toggle input:checked+.toggle-track:after{background:#1a1a1a;transform:translate(.857rem)}.sub-control{background:var(--bg);border-radius:var(--radius);border:1px solid var(--border);border-width:0;flex-direction:column;gap:.429rem;max-height:0;margin-top:.571rem;padding:0 .714rem;transition:max-height .2s,padding .2s,border-width .2s;display:flex;overflow:hidden}.sub-control.visible{border-width:1px;max-height:10rem;padding-top:.571rem;padding-bottom:.571rem}.sub-control-row{justify-content:space-between;align-items:center;margin-top:.286rem;display:flex}.sub-control-label{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-size:.857rem;font-weight:600}input[type=range]{appearance:none;background:var(--border);cursor:pointer;border-radius:.143rem;outline:none;width:100%;height:.286rem}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:1rem;height:1rem;transition:background .15s,transform .1s}input[type=range]::-webkit-slider-thumb:hover{background:var(--accent-hover);transform:scale(1.2)}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:1rem;height:1rem}.modal{z-index:100;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal.hidden{display:none}.modal-backdrop{background:#000000b3;position:absolute;inset:0}.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;width:min(90vw,64.286rem);max-height:90vh;display:flex;position:relative;overflow:hidden}.modal-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:1rem 1.286rem;display:flex}.modal-header h2{font-size:1.071rem;font-weight:600}.modal-close{color:var(--text-muted);cursor:pointer;border-radius:var(--radius);background:0 0;border:none;padding:.143rem .429rem;font-size:1.286rem;line-height:1;transition:color .15s}.modal-close:hover{color:var(--text)}.modal-body{flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:.857rem;padding:1.143rem;display:flex;overflow:auto}#modal-canvas-wrap{display:inline-flex}#modal-canvas-wrap.checkered{background-color:#888;background-image:linear-gradient(45deg,#666 25%,#0000 25%),linear-gradient(-45deg,#666 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#666 75%),linear-gradient(-45deg,#0000 75%,#666 75%);background-position:0 0,0 .571rem,.571rem -.571rem,-.571rem 0;background-size:1.143rem 1.143rem}#save-canvas{max-width:100%;display:block}.modal-footer{border-top:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:.571rem;padding:1rem 1.286rem;display:flex}.modal-footer .btn{flex:none;min-width:6.429rem}.export-scale-row{align-items:center;gap:.429rem;display:flex}.export-scale-label{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-right:.143rem;font-size:.857rem;font-weight:600}.export-scale-btn{min-width:unset;padding:.357rem 1rem;font-size:.857rem}.export-scale-btn.active{background:var(--accent);border-color:var(--accent);color:#1a1a1a;font-weight:600}.export-dims{color:var(--text-muted);font-variant-numeric:tabular-nums;margin-left:.286rem;font-size:.857rem}.export-actions{gap:.571rem;display:flex}.export-footer{flex-direction:column;align-items:stretch;gap:.857rem}.export-aa-row{align-items:center;gap:.571rem;display:flex}.export-aa-label{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-size:.857rem;font-weight:600}.export-footer-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.857rem;display:flex}.export-transparency-row{align-items:center;gap:.571rem;display:flex}.export-transparency-label{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-size:.857rem;font-weight:600}.export-transparency-btn{min-width:unset;padding:.357rem 1rem;font-size:.857rem}.export-transparency-btn.active{background:var(--accent);border-color:var(--accent);color:#1a1a1a;font-weight:600}.export-footer-bottom{justify-content:space-between;align-items:center;gap:.857rem;display:flex}.gif-export-footer{flex-direction:column;align-items:stretch;gap:.857rem}.gif-export-footer>.export-actions{justify-content:flex-end}.export-filename-row{flex:1;align-items:center;gap:0;min-width:0;display:flex}.export-filename-input{border:1px solid var(--border);border-radius:var(--radius) 0 0 var(--radius);background:var(--bg);min-width:0;color:var(--text);outline:none;flex:1;padding:.357rem .571rem;font-family:inherit;font-size:.929rem;transition:border-color .15s}.export-filename-input:focus{border-color:var(--accent)}.export-filename-ext{border:1px solid var(--border);border-radius:0 var(--radius) var(--radius) 0;background:var(--surface-2);color:var(--text-muted);white-space:nowrap;border-left:none;padding:.357rem .571rem;font-size:.929rem;font-weight:500}.gif-modal-box{width:min(90vw,27.143rem)}.gif-modal-body{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:1.286rem}.export-meta-note{color:var(--text-muted);text-align:center;margin:0;font-size:.857rem;line-height:1.5}.gif-options{flex-direction:column;gap:1rem;display:flex}.gif-option-row{justify-content:space-between;align-items:center;display:flex}.gif-transparency-row{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;display:flex}.gif-transparency-top{justify-content:space-between;align-items:center;width:100%;display:flex}.gif-option-label{color:var(--text-muted);font-size:.929rem}.gif-info{color:var(--text);font-variant-numeric:tabular-nums;font-size:.929rem}.fps-toggle{gap:.286rem;display:flex}.fps-btn{min-width:unset;flex:none;padding:.357rem 1rem;font-size:.857rem}.fps-btn.active{background:var(--accent);border-color:var(--accent);color:#1a1a1a;font-weight:600}.gif-scale-toggle{gap:.286rem;display:flex}.gif-scale-btn{min-width:unset;flex:none;padding:.357rem 1rem;font-size:.857rem}.gif-scale-btn.active{background:var(--accent);border-color:var(--accent);color:#1a1a1a;font-weight:600}.gif-dims{font-variant-numeric:tabular-nums;margin-left:.286rem}.gif-transparency-btn{min-width:unset;flex:none;padding:.357rem 1rem;font-size:.857rem}.gif-transparency-btn.active{background:var(--accent);border-color:var(--accent);color:#1a1a1a;font-weight:600}.gif-transparency-note{color:var(--text-muted);text-align:center;flex-basis:100%;margin:1.5rem 0 0;font-size:.786rem;line-height:1.4;display:none}.gif-transparency-note.visible{display:block}.gif-progress-wrap{flex-direction:column;gap:.5rem;display:none}.gif-progress-wrap.visible{display:flex}.gif-progress-label{color:var(--text-muted);justify-content:space-between;font-size:.857rem;display:flex}progress#gif-progress{appearance:none;background:var(--border);border:none;border-radius:.214rem;width:100%;height:.429rem;overflow:hidden}progress#gif-progress::-webkit-progress-bar{background:var(--border);border-radius:.214rem}progress#gif-progress::-webkit-progress-value{background:var(--accent);border-radius:.214rem;transition:width .1s linear}progress#gif-progress::-moz-progress-bar{background:var(--accent);border-radius:.214rem}.pat-freq-link-btn{border-radius:var(--radius);width:1.571rem;height:1.571rem;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.pat-freq-link-btn svg{width:.929rem;height:.929rem}.pat-freq-link-btn:hover{color:var(--text);background:var(--border);border-color:#555}.pat-freq-link-btn.linked{color:var(--accent)}input[type=range]:disabled{opacity:.35;cursor:not-allowed}.drag-handle{border-radius:var(--radius) 0 0 var(--radius);width:2rem;color:var(--text-muted);cursor:grab;background:0 0;border:none;border-right:1px solid #0000;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:0;bottom:0;left:0}.drag-handle svg{width:2rem;height:2rem}.drag-handle:hover{color:var(--text);background:var(--surface-2);border-right-color:var(--border)}.drag-handle:active{cursor:grabbing}.pattern-card.dragging{opacity:.4}.pattern-card.drop-above{box-shadow:0 -2px 0 var(--accent)}.pattern-card.drop-below{box-shadow:0 2px 0 var(--accent)}