@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-main: #0a0a0c;--bg-panel: rgba(22, 22, 26, .8);--bg-card: #1c1c21;--accent: #6366f1;--accent-hover: #4f46e5;--text-main: #f3f4f6;--text-muted: #9ca3af;--border: rgba(255, 255, 255, .1);--shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, .3), 0 8px 10px -6px rgba(0, 0, 0, .3);--glass: blur(12px)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--bg-main);color:var(--text-main);min-height:100vh;display:flex;flex-direction:column;overflow:hidden;background-image:radial-gradient(circle at 50% 50%,#1a1a2e,#0a0a0c)}.container{width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;padding:0 16px;background-color:var(--bg-panel);border-bottom:1px solid var(--border);height:56px;flex-shrink:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-left h1{margin:0;font-size:1.2rem;font-weight:700;color:var(--text-main);letter-spacing:-.5px}.canvas-actions-overlay{position:absolute;top:20px;right:20px;display:flex;gap:8px;z-index:10}.icon-action-btn{width:40px;height:40px;border-radius:8px;background-color:var(--bg-card);border:1px solid var(--border);background-position:center;background-repeat:no-repeat;background-size:20px;cursor:pointer;transition:all .2s ease;padding:0}.icon-action-btn:hover{background-color:var(--bg-panel);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.icon-action-btn:active{transform:translateY(0)}#undoBtn{background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.80802%209.612L7.16002%208.689C7.26746%208.61549%207.38846%208.56412%207.51597%208.53789C7.64347%208.51166%207.77493%208.5111%207.90265%208.53624C8.03038%208.56137%208.15182%208.6117%208.25988%208.68429C8.36794%208.75688%208.46045%208.85026%208.53202%208.959C8.67803%209.17918%208.73195%209.4478%208.68222%209.70727C8.6325%209.96674%208.48309%2010.1964%208.26602%2010.347L4.98902%2012.584C4.88159%2012.6575%204.76059%2012.7089%204.63308%2012.7351C4.50557%2012.7613%204.37412%2012.7619%204.24639%2012.7368C4.11867%2012.7116%203.99723%2012.6613%203.88917%2012.5887C3.78111%2012.5161%203.68859%2012.4227%203.61702%2012.314L1.40702%208.998C1.25993%208.77797%201.20538%208.50889%201.25516%208.24895C1.30494%207.98901%201.45505%207.75912%201.67302%207.609C1.78046%207.53549%201.90146%207.48412%202.02897%207.45789C2.15647%207.43166%202.28793%207.4311%202.41565%207.45624C2.54338%207.48137%202.66482%207.5317%202.77288%207.60429C2.88094%207.67688%202.97345%207.77026%203.04502%207.879L3.88402%209.138C5.10002%205.01%208.88002%202%2013.355%202C18.813%202%2023.237%206.477%2023.237%2012C23.237%2017.523%2018.813%2022%2013.355%2022C13.2245%2021.9992%2013.0954%2021.9727%2012.9751%2021.922C12.8548%2021.8714%2012.7457%2021.7975%2012.6539%2021.7046C12.5622%2021.6118%2012.4896%2021.5017%2012.4404%2021.3808C12.3912%2021.2599%2012.3662%2021.1305%2012.367%2021C12.367%2020.448%2012.81%2020%2013.355%2020C17.721%2020%2021.261%2016.418%2021.261%2012C21.261%207.582%2017.721%204%2013.355%204C9.81102%204%206.81202%206.36%205.80802%209.612Z'%20fill='white'/%3e%3c/svg%3e")}#redoBtn{background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M18.192%209.612L16.84%208.689C16.7325%208.61549%2016.6115%208.56412%2016.484%208.53789C16.3565%208.51166%2016.2251%208.5111%2016.0973%208.53624C15.9696%208.56137%2015.8482%208.6117%2015.7401%208.68429C15.6321%208.75688%2015.5395%208.85026%2015.468%208.959C15.322%209.17918%2015.2681%209.4478%2015.3178%209.70727C15.3675%209.96674%2015.5169%2010.1964%2015.734%2010.347L19.011%2012.584C19.1184%2012.6575%2019.2394%2012.7089%2019.3669%2012.7351C19.4944%2012.7613%2019.6259%2012.7619%2019.7536%2012.7368C19.8813%2012.7116%2020.0028%2012.6613%2020.1108%2012.5887C20.2189%2012.5161%2020.3114%2012.4227%2020.383%2012.314L22.593%208.998C22.7401%208.77797%2022.7946%208.50889%2022.7448%208.24895C22.6951%207.98901%2022.5449%207.75912%2022.327%207.609C22.2195%207.53549%2022.0985%207.48412%2021.971%207.45789C21.8435%207.43166%2021.7121%207.4311%2021.5843%207.45624C21.4566%207.48137%2021.3352%207.5317%2021.2271%207.60429C21.1191%207.67688%2021.0265%207.77026%2020.955%207.879L20.116%209.138C18.9%205.01%2015.12%202%2010.645%202C5.18698%202%200.762978%206.477%200.762978%2012C0.762978%2017.523%205.18698%2022%2010.645%2022C10.7755%2021.9992%2010.9046%2021.9727%2011.0249%2021.922C11.1452%2021.8714%2011.2543%2021.7975%2011.3461%2021.7046C11.4378%2021.6118%2011.5104%2021.5017%2011.5596%2021.3808C11.6088%2021.2599%2011.6338%2021.1305%2011.633%2021C11.633%2020.448%2011.19%2020%2010.645%2020C6.27898%2020%202.73898%2016.418%202.73898%2012C2.73898%207.582%206.27898%204%2010.645%204C14.189%204%2017.188%206.36%2018.192%209.612Z'%20fill='white'/%3e%3c/svg%3e")}.setting-row{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.sub-label{font-size:.75rem;color:var(--text-muted)}.size-controls-group{display:flex;gap:8px}.size-controls-group select{flex:1;width:100%}.custom-size-inputs.inline{display:flex;gap:4px}.custom-size-inputs.inline input{width:50px;padding:4px;text-align:center}#appInterface{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;flex:1}.main-layout{display:grid;grid-template-columns:260px minmax(0,1fr) 280px;grid-template-rows:1fr;width:100%;flex:1;min-height:0;overflow:hidden;gap:12px;padding:0 8px 8px;z-index:10}.timeline{display:none}.app-header select,.app-header input[type=number]{background:transparent;border:none;color:var(--text-main);font-family:inherit;font-size:.9rem;padding:4px}.app-header select:focus,.app-header input:focus{outline:none;color:var(--accent)}.app-header input[type=number]{width:50px;text-align:center;border-bottom:1px solid transparent}.app-header input[type=number]:focus{border-bottom-color:var(--accent)}.app-header button{padding:8px 16px;background:#ffffff0d;border:1px solid var(--border);color:var(--text-main);border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease}.app-header button:hover{background:var(--bg-card);border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}#gridOpacitySlider{width:100px;height:4px;background:#ffffff1a;border-radius:2px;appearance:none}#gridOpacitySlider::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:var(--accent);border-radius:50%;cursor:pointer;transition:transform .2s}#gridOpacitySlider::-webkit-slider-thumb:hover{transform:scale(1.2)}.panel.sidebar{grid-column:1 / 2;grid-row:1 / 2;border-right:1px solid var(--border);background:var(--bg-panel);min-width:0}main{grid-column:2 / 3;grid-row:1;flex:1;display:flex;flex-direction:column;background-color:#2c2c2c;overflow:auto;position:relative}.canvas-container{display:flex;flex-direction:column;align-items:center;gap:10px}.zoom-controls{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--bg-main);padding:8px;border-radius:8px;color:#fff;margin-top:5px;width:100%}.zoom-controls .action-btn{flex:1;display:flex;justify-content:center;align-items:center}#zoomLevelDisplay{min-width:40px;text-align:center;font-size:.9rem;color:var(--accent)}.zoom-controls span{min-width:50px;text-align:center;font-family:monospace}.canvas-wrapper{position:relative;display:flex;justify-content:center;align-items:center;box-shadow:0 0 40px #00000080;background:#fff;transition:transform .05s linear;transform-origin:center center}#dotCanvas{position:relative;z-index:1;background-color:#fff!important;image-rendering:pixelated;cursor:crosshair;display:block;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}#gridCanvas{position:absolute;top:0;left:0;pointer-events:none;z-index:2;background-color:transparent!important;image-rendering:pixelated}#selectionCanvas{position:absolute;top:0;left:0;pointer-events:none;z-index:3}.panel.right-sidebar{grid-column:3 / 4;grid-row:1 / 2;border-left:1px solid var(--border);background:var(--bg-panel);display:flex;flex-direction:column;gap:20px;overflow-y:auto;min-width:0}.right-sidebar{display:none}.full-width{width:100%}.import-controls{display:flex;gap:8px}.action-btn.icon-btn{width:100%;justify-content:center;background:var(--bg-card);border:1px dashed var(--border);color:var(--text-muted)}.action-btn.icon-btn:hover{background:var(--border);color:var(--text-main);border-style:solid}main{flex-direction:column;justify-content:flex-start}.canvas-container{flex:1;width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.frames-timeline-panel{position:absolute;bottom:12px;left:50%;transform:translate(-50%);width:calc(100% - 24px);max-width:1000px;height:172px;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;padding:12px;box-shadow:0 4px 16px #0006;z-index:90;box-sizing:border-box}.frames-section.horizontal{display:flex;flex-direction:column;height:100%;gap:8px}.frames-section.horizontal .frame-header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;padding:0 4px;height:24px}.frame-list.horizontal{display:flex;flex-direction:row;gap:12px;overflow-x:auto;overflow-y:hidden;flex:1;padding:4px 4px 12px;align-items:center;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.frame-item{position:relative;width:80px;height:80px;aspect-ratio:1 / 1!important;flex-shrink:0;background:#1a1a1a;border:1px solid rgba(255,255,255,.1);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:all .2s ease;box-sizing:border-box}.frame-item.active{border:2px solid var(--accent)!important;background:#222;box-shadow:0 0 10px #6366f14d}.frame-thumbnail{max-width:65%!important;max-height:65%!important;width:auto!important;height:auto!important;object-fit:contain!important;image-rendering:pixelated;pointer-events:none}.frame-number{position:absolute;top:6px;left:6px;font-size:10px;background:#000000b3;color:#fff;padding:1px 5px;border-radius:3px;z-index:5}.frame-checkbox-new{position:absolute;top:6px;right:6px;width:16px;height:16px;z-index:10;cursor:pointer;accent-color:var(--accent)}.frame-item-actions{position:absolute;bottom:6px;right:6px;opacity:0;transition:opacity .2s;z-index:20}.frame-item:hover .frame-item-actions{opacity:1}.frame-action-btn{background:#0009;border:1px solid rgba(255,255,255,.2);border-radius:4px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}.frame-action-btn:hover{background:var(--accent)}.frame-header{display:flex;align-items:center;justify-content:space-between}.frame-actions-mini{display:flex;gap:4px}.frame-actions-mini button{padding:2px 6px;font-size:.85rem;line-height:1;height:24px;display:flex;align-items:center}.frame-list.horizontal::-webkit-scrollbar{display:none}.export-controls.vertical{display:flex;flex-direction:column;gap:8px}.export-controls.vertical button{width:100%}.primary{background:var(--accent);color:#fff;border:none}.primary:hover{background:var(--accent-hover);box-shadow:0 0 15px #6366f180}@media(max-width:1024px){.main-layout{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:12px;overflow-y:auto;display:flex;flex-direction:column}.panel.sidebar,.panel.right-sidebar,main{grid-column:auto!important;width:100%;height:auto;overflow:visible}}h1{grid-area:header;font-size:1.5rem;font-weight:700;letter-spacing:-.025em;background:linear-gradient(to right,#6366f1,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:8px;border-bottom:1px solid var(--border)}.panel{background:var(--bg-panel);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);border:1px solid var(--border);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-lg)}.sidebar{grid-area:sidebar;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.sidebar::-webkit-scrollbar{display:none}canvas.pen-cursor,canvas.line-cursor,canvas.rect-cursor,canvas.circle-cursor,canvas.dither-cursor,canvas.paintAll-cursor{cursor:crosshair}canvas.bucket-cursor{cursor:cell}canvas.lighten-cursor{cursor:n-resize}canvas.eraser-cursor{cursor:cell}canvas.eyedropper-cursor{cursor:copy}.timeline{grid-area:timeline;flex-direction:row;align-items:center;justify-content:space-between;padding:12px 24px}.color-preview-dot{width:14px;height:14px;border-radius:50%;background-color:#000;border:1.5px solid rgba(255,255,255,.2);box-shadow:0 0 4px #0000004d}button{background:var(--bg-card);color:var(--text-main);border:1px solid var(--border);padding:10px 16px;border-radius:10px;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-size:.875rem}button:hover:not(:disabled){background:var(--border);transform:translateY(-1px)}button.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 15px #6366f166}button:disabled{opacity:.5;cursor:not-allowed}.tool-section{display:flex;flex-direction:column;gap:6px}.tool-row.threaded-layout{display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;margin-bottom:2px}.tool-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background-color:var(--bg-main);background-size:24px 24px;background-position:center;background-repeat:no-repeat;cursor:pointer;padding:0;flex-shrink:0;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.tool-btn.active{background-color:var(--accent);border-color:var(--accent);box-shadow:0 0 10px #6366f166}.tool-btn[data-tooltip]{position:relative}.tool-btn[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;top:-30px;left:50%;transform:translate(-50%);background:#000000d9;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:500;white-space:nowrap;pointer-events:none;z-index:1000;opacity:0;animation:tooltipFadeIn .2s .2s forwards;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 6px #0000004d}@keyframes tooltipFadeIn{to{opacity:1}}#penTool{background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12.593%2023.258L12.582%2023.26L12.511%2023.295L12.491%2023.299L12.477%2023.295L12.406%2023.26C12.3954%2023.2567%2012.3874%2023.2583%2012.382%2023.265L12.378%2023.275L12.361%2023.703L12.366%2023.723L12.376%2023.736L12.48%2023.81L12.495%2023.814L12.507%2023.81L12.611%2023.736L12.623%2023.72L12.627%2023.703L12.61%2023.276C12.6074%2023.2653%2012.6017%2023.2593%2012.593%2023.258ZM12.858%2023.145L12.845%2023.147L12.66%2023.24L12.65%2023.25L12.647%2023.261L12.665%2023.691L12.67%2023.703L12.678%2023.71L12.879%2023.803C12.8917%2023.8063%2012.9014%2023.8037%2012.908%2023.795L12.912%2023.781L12.878%2023.167C12.8747%2023.155%2012.868%2023.1477%2012.858%2023.145ZM12.143%2023.147C12.1386%2023.1443%2012.1333%2023.1435%2012.1283%2023.1446C12.1233%2023.1457%2012.1189%2023.1487%2012.116%2023.153L12.11%2023.167L12.076%2023.781C12.0767%2023.793%2012.0824%2023.801%2012.093%2023.805L12.108%2023.803L12.309%2023.71L12.319%2023.702L12.323%2023.691L12.34%2023.261L12.337%2023.249L12.327%2023.239L12.143%2023.147Z'%20fill='white'/%3e%3cpath%20d='M14.295%204.98L19.019%209.705C19.2958%209.98174%2019.4853%2010.3336%2019.5641%2010.717C19.6428%2011.1005%2019.6073%2011.4986%2019.462%2011.862L17.097%2017.775C16.9643%2018.106%2016.7455%2018.3955%2016.4633%2018.6135C16.1811%2018.8316%2015.8458%2018.9702%2015.492%2019.015L10.413%2019.65C10.2823%2019.6653%2010.1457%2019.684%2010.003%2019.706L9.559%2019.778L9.327%2019.82L8.604%2019.96L8.109%2020.065L7.364%2020.233L6.409%2020.461L4.857%2020.857L4.211%2021.031C4.04798%2021.0758%203.87631%2021.079%203.71174%2021.0403C3.54716%2021.0015%203.39495%2020.9221%203.26905%2020.8092C3.14316%2020.6963%203.04761%2020.5537%202.99117%2020.3943C2.93472%2020.2349%202.9192%2020.0639%202.946%2019.897L2.98%2019.751L3.275%2018.639L3.539%2017.591L3.767%2016.636L3.934%2015.891L4.039%2015.395L4.18%2014.673L4.26%2014.216L4.324%2013.788L4.984%208.508C5.02892%208.1541%205.16768%207.81867%205.38589%207.53646C5.60409%207.25425%205.89381%207.03554%206.225%206.903L12.138%204.538C12.5014%204.39266%2012.8995%204.35717%2013.283%204.43591C13.6664%204.51466%2014.0183%204.70318%2014.295%204.98ZM10.585%2010.585C10.3324%2010.8378%2010.1521%2011.1537%2010.0629%2011.4998C9.97375%2011.8459%209.97896%2012.2096%2010.078%2012.553C10.0051%2012.5957%209.9379%2012.6474%209.87801%2012.707L5.82%2016.765C5.79341%2016.792%205.77503%2016.826%205.767%2016.863L5.678%2017.248L5.5%2017.991L5.414%2018.342C5.4052%2018.3757%205.40538%2018.4112%205.41452%2018.4449C5.42366%2018.4785%205.44144%2018.5092%205.46611%2018.5339C5.49077%2018.5586%205.52146%2018.5763%205.55512%2018.5855C5.58878%2018.5946%205.62425%2018.5948%205.658%2018.586L6.375%2018.411L7.138%2018.233C7.17479%2018.2245%207.20842%2018.2058%207.235%2018.179L11.293%2014.121C11.3525%2014.0614%2011.4043%2013.9945%2011.447%2013.922C11.7859%2014.0194%2012.1444%2014.0255%2012.4864%2013.9397C12.8284%2013.8539%2013.1416%2013.6792%2013.3943%2013.4333C13.647%2013.1875%2013.8302%2012.8792%2013.9254%2012.5397C14.0205%2012.2002%2014.0242%2011.8416%2013.9362%2011.5002C13.8481%2011.1588%2013.6713%2010.8467%2013.4238%2010.5957C13.1762%2010.3446%2012.8667%2010.1634%2012.5266%2010.0705C12.1865%209.97763%2011.8279%209.97628%2011.4871%2010.0666C11.1463%2010.157%2010.8354%2010.3358%2010.586%2010.585H10.585ZM15.243%203.101C15.4151%202.92867%2015.6441%202.82506%2015.8871%202.80959C16.1302%202.79413%2016.3705%202.86787%2016.563%203.017L16.657%203.101L20.9%207.343C21.0813%207.52254%2021.187%207.76457%2021.1957%208.01954C21.2043%208.27452%2021.1152%208.52316%2020.9465%208.71458C20.7779%208.90599%2020.5424%209.0257%2020.2884%209.0492C20.0343%209.0727%2019.7809%208.99822%2019.58%208.841L19.485%208.757L15.243%204.515C15.0555%204.32747%2014.9502%204.07316%2014.9502%203.808C14.9502%203.54283%2015.0555%203.28852%2015.243%203.101Z'%20fill='white'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:24px}#eraserTool{background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1_6)'%3e%3cpath%20d='M12.15%2021L21.75%2010.2C22.65%209.15%2022.65%207.5%2021.6%206.45L17.55%202.4C17.1%201.8%2016.35%201.5%2015.6%201.5H12.9C12.15%201.5%2011.4%201.8%2010.8%202.4L0.750015%2013.8C-0.149985%2014.85%20-0.149985%2016.65%200.900015%2017.55L4.95001%2021.6C5.40001%2022.2%206.15001%2022.5%206.90001%2022.5H24V21H12.15ZM10.2%2020.85L6.15001%2016.8C5.55001%2016.2%205.55001%2015.45%206.15001%2014.85L11.25%209H9.75001L5.25001%2013.95C4.35001%2015%204.35001%2016.5%205.40001%2017.55L8.85001%2021H6.90001C6.60001%2021%206.30001%2020.85%206.00001%2020.7L1.80001%2016.5C1.35001%2016.05%201.35001%2015.3%201.80001%2014.85L7.05001%209H9.75001L15%203H16.5L11.25%209L15.9%2014.55L10.65%2020.55C10.5%2020.7%2010.35%2020.7%2010.2%2020.85Z'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1_6'%3e%3crect%20width='24'%20height='24'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:24px}#eyedropperTool{background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.9924%2012.3866L17.2736%2012.0754C17.7656%2011.5633%2017.7857%2010.9603%2017.2633%2010.4383L16.962%2010.1469C18.4989%208.77071%2020.2063%208.58%2021.261%207.50514C22.7576%205.99828%2022.2656%203.88886%2021.2211%202.83414C20.1763%201.76957%2018.087%201.31743%2016.5501%202.79386C15.4654%203.83871%2015.2846%205.55643%2013.9084%207.09328L13.617%206.792C13.095%206.26914%2012.492%206.28971%2011.9799%206.78171L11.6687%207.06286C11.0559%207.65557%2011.1664%208.178%2011.6987%208.71028L12.1204%209.13243L4.53686%2016.7259C1.43315%2019.83%202.92972%2019.3479%201.24243%2021.7286L2.136%2022.683C4.44643%2021.0056%204.13529%2022.653%207.27886%2019.5086L14.913%2011.925L15.345%2012.357C15.8773%2012.8893%2016.3993%2012.9999%2016.992%2012.387M11.9897%2012.1059C11.6177%2011.7043%2011.6983%2011.3426%2012.09%2010.9307L12.9943%2010.0067L14.0786%2011.091L13.1443%2012.0154C12.7929%2012.3669%2012.3309%2012.4774%2011.9897%2012.1059Z'%20fill='white'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:24px}.thickness-options.inline{display:flex;gap:4px;margin-left:auto}.thickness-options.import-controls input[type=file]{display:none}.btn-icon{font-size:1.2rem;line-height:1}.action-btn.small{padding:4px 8px;font-size:.8rem;min-width:auto}.tool-btn.active{background-color:var(--accent);color:#fff;border-color:var(--accent)}.selection-overlay{pointer-events:none;border:1px dashed white;background-color:#fff3;position:absolute}.thickness-options.inline input[type=radio]{display:none}.thickness-options.inline .size-label{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;background:var(--bg-main);border:1px solid var(--border);color:var(--text-muted);font-size:10px;cursor:pointer;transition:all .2s ease}.thickness-options.inline input[type=radio]:checked+.size-label{background:var(--accent);color:#fff;border-color:var(--accent)}.color-preview-dot.standalone{width:14px;height:14px;border-radius:50%;background-color:#000;border:1.5px solid rgba(255,255,255,.2);margin-left:8px;box-shadow:0 0 4px #0000004d}.color-selection{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--border);padding-top:16px}.color-mode-toggle{display:flex;align-items:center;justify-content:space-between;background:#0003;padding:8px 12px;border-radius:12px;font-size:.75rem;color:var(--text-muted)}.recent-colors{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.recent-colors-grid{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:200px}.recent-color{width:20px;height:20px;border-radius:4px;cursor:pointer;border:1px solid var(--border);transition:transform .2s}.recent-color:hover{transform:scale(1.1)}.clipboard-section{flex:1;border-top:1px solid var(--border-color);padding-top:10px;display:flex;flex-direction:column;min-height:0}.clipboard-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:5px}.clipboard-item{border:2px solid var(--border);border-radius:8px;background-color:#333;background-image:linear-gradient(45deg,#444 25%,transparent 25%,transparent 75%,#444 75%,#444 100%),linear-gradient(45deg,#444 25%,transparent 25%,transparent 75%,#444 75%,#444 100%);background-size:16px 16px;background-position:0 0,8px 8px;cursor:pointer;height:48px;display:flex;justify-content:center;align-items:center;transition:all .2s;position:relative;overflow:hidden}.clipboard-item.active{border-color:var(--accent);box-shadow:0 0 12px #6366f166}.clipboard-item canvas,.clipboard-item img{max-width:90%;max-height:90%;object-fit:contain;image-rendering:pixelated}.empty-message{text-align:center;color:#666;font-size:.8rem;margin-top:20px}.frame-list::-webkit-scrollbar,.clipboard-list::-webkit-scrollbar{width:6px}.frame-list::-webkit-scrollbar-thumb,.clipboard-list::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.color-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}.palette-color{aspect-ratio:1;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:all .2s;user-select:none;-webkit-user-select:none;touch-action:none}.color-variant-popup{position:fixed;display:none;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:8px;gap:4px;grid-template-columns:repeat(3,1fr);box-shadow:0 10px 30px #00000080;z-index:9999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.color-variant-popup.active{display:grid;animation:fadeIn .2s ease-out}.variant-color-item{width:32px;height:32px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:transform .1s,border-color .1s}.variant-color-item:hover,.variant-color-item.highlight{transform:scale(1.1);border-color:#fff;z-index:10;box-shadow:0 0 8px #fff6}.palette-color.active{border-color:#fff;box-shadow:0 0 10px #ffffff4d}.switch{position:relative;display:inline-block;width:36px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--bg-card);transition:.4s;border-radius:20px;border:1px solid var(--border)}.slider:before{position:absolute;content:"";height:14px;width:14px;left:2px;bottom:2px;background-color:var(--text-muted);transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--accent)}input:checked+.slider:before{transform:translate(16px);background-color:#fff}.color-picker-container{display:none;flex-direction:column;gap:8px}.color-selection[data-mode=custom] .color-picker-container{display:flex}.color-selection[data-mode=custom] .color-palette{display:none}input[type=color]{-webkit-appearance:none;appearance:none;border:none;width:100%;height:40px;border-radius:8px;background:none;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:2px solid var(--border);border-radius:8px}.canvas-size-controls{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--border);padding-top:16px}.canvas-size-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-size-header select{flex:1;max-width:none;padding:8px 12px;font-size:.875rem}.custom-size-inputs{display:flex;gap:8px}.custom-size-inputs input{flex:1}select,input[type=number]{background:var(--bg-card);color:var(--text-main);border:1px solid var(--border);padding:8px 12px;border-radius:8px;font-size:.875rem;outline:none}.sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--border);padding-top:16px}#selectAllFrames{width:20px;height:20px;cursor:pointer;accent-color:var(--accent)}.history-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.frame-controls{display:flex;align-items:center;gap:16px}#frameIndicator{font-variant-numeric:tabular-nums;font-weight:600;min-width:60px;text-align:center}#exportGif{background:linear-gradient(135deg,#6366f1,#a855f7);border:none}#exportGif:hover{box-shadow:0 0 20px #6366f166}.gif-preview-overlay{position:fixed;inset:0;background:#0a0a0cf2;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:none;justify-content:center;align-items:center;z-index:3000;padding:24px}.gif-preview-overlay.active{display:flex!important;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.preview-card{background:linear-gradient(145deg,#1e1b4b,#5b21b6);border:1px solid rgba(139,92,246,.4);padding:24px;border-radius:20px;width:90%;max-width:400px;box-shadow:0 20px 60px #000000b3,0 0 40px #8b5cf633;display:flex;flex-direction:column;gap:20px;position:relative;animation:slideUp .3s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.preview-header{display:flex;justify-content:space-between;align-items:center}.preview-header h3{margin:0;font-size:18px;color:#fff;font-weight:600;text-shadow:0 0 10px rgba(139,92,246,.5)}#closePreviewBtn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:var(--text-muted);font-size:20px;cursor:pointer;border-radius:8px;transition:all .2s;display:flex;align-items:center;justify-content:center;width:32px;height:32px}#closePreviewBtn:hover{color:#fff;background:#ef4444;border-color:#ef4444}.preview-content{display:flex;flex-direction:column;gap:20px}.preview-stage{width:100%;aspect-ratio:1;background-color:#000;background-image:linear-gradient(45deg,#111 25%,transparent 25%,transparent 75%,#111 75%,#111 100%),linear-gradient(45deg,#111 25%,transparent 25%,transparent 75%,#111 75%,#111 100%);background-size:20px 20px;background-position:0 0,10px 10px;border-radius:12px;border:2px solid rgba(255,255,255,.1);overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative;box-shadow:inset 0 0 40px #00000080}#previewImg{max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated}.playback-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#0000004d;opacity:0;transition:opacity .2s;pointer-events:none}.speed-control{display:flex;flex-direction:column;gap:8px;background:transparent;padding:0}.speed-control label{display:flex;justify-content:space-between;align-items:center;color:#ccc;font-size:14px;font-weight:500}.speed-control label .unit{font-size:14px;color:#8b5cf6;margin-left:2px}.speed-control label span:nth-child(2){color:#8b5cf6;font-family:monospace;font-size:16px;font-weight:700}#speedSlider{-webkit-appearance:none;width:100%;height:6px;background:#374151;border-radius:3px;outline:none;margin-top:4px;cursor:pointer}#speedSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#8b5cf6;cursor:pointer;border:none;transition:transform .1s;margin-top:-6px}#speedSlider::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:#8b5cf6;cursor:pointer;transition:transform .1s}#speedSlider::-webkit-slider-thumb:hover{transform:scale(1.1)}#speedSlider::-moz-range-thumb:hover{transform:scale(1.1)}.tool-setting{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}@media(max-width:1024px){.container{grid-template-areas:"header" "main" "sidebar" "timeline";grid-template-columns:1fr;grid-template-rows:auto auto auto auto;height:auto;overflow-y:auto;width:100vw}body{overflow-y:auto;align-items:flex-start}.sidebar{max-height:none}canvas{max-width:90vw}.timeline{flex-direction:column;gap:16px}}.icon-pen{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E")}.icon-eraser{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20H7L3 16C2 15 2 13 3 12L13 2L22 11L20 20Z'%3E%3C/path%3E%3Cpath d='M17 17L7 7'%3E%3C/path%3E%3C/svg%3E")}.icon-eyedropper{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 21a4 4 0 0 1-4-4c0-1.5.8-2.5 1.7-4L2 15l8 4 1-1.3c1.5-.9 2.5-1.7 4-1.7'%3E%3C/path%3E%3Cpath d='M12 11l-8 8'%3E%3C/path%3E%3Cpath d='M19 3a2.828 2.828 0 0 1 2.8 2.8l-8.5 8.5-2.8-2.8L19 3z'%3E%3C/path%3E%3C/svg%3E")}.pen-cursor{cursor:crosshair}.eraser-cursor{cursor:cell}.eyedropper-cursor{cursor:copy}#onionSkinCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:15;pointer-events:none;image-rendering:pixelated;opacity:.3;display:none}#dotCanvas{z-index:10}#gridCanvas{z-index:20}.auth-container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,#1a1a2e,#0a0a0c);position:relative;overflow:hidden;z-index:100}.auth-hero{text-align:center;padding:40px;background:#ffffff0d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:32px;box-shadow:0 50px 100px -20px #00000080;max-width:600px;width:90%;animation:heroFadeIn 1s cubic-bezier(.16,1,.3,1) forwards}@keyframes heroFadeIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.hero-title{font-size:3.5rem;font-weight:800;margin-bottom:16px;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-2px}.hero-subtitle{font-size:1.25rem;color:var(--text-muted);margin-bottom:32px;font-weight:400}.hero-features{display:flex;gap:16px;justify-content:center;margin-bottom:40px;font-size:.95rem;color:#e0e7ff}.hero-features span{padding:6px 16px;background:#ffffff14;border-radius:20px;border:1px solid rgba(255,255,255,.05)}.auth-buttons{display:flex;flex-direction:column;gap:12px;align-items:center}.large-btn{width:100%;max-width:320px;padding:16px;font-size:1.1rem;border-radius:12px;cursor:pointer;font-weight:600;transition:all .2s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}.large-btn.primary{background:var(--accent);color:#fff;border:none;box-shadow:0 10px 25px -5px #6366f166}.large-btn.primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 15px 35px -5px #6366f180}.large-btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff}.large-btn.secondary:hover{background:#ffffff0d;border-color:#fff}.login-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:2000;animation:fadeIn .3s ease-out}.login-card{background:#1e1e24;padding:40px;border-radius:24px;border:1px solid rgba(255,255,255,.1);width:90%;max-width:400px;text-align:center;box-shadow:0 25px 50px -12px #00000080;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}.login-card h2{font-size:1.8rem;margin-bottom:8px;color:#fff}.login-card p{color:var(--text-muted);margin-bottom:32px}.social-login-group{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.social-btn{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#fff;transition:all .2s}.social-btn:hover{background:#ffffff1a;transform:translateY(-1px)}.social-btn svg{min-width:20px}.text-btn{background:none;border:none;color:var(--text-muted);font-size:.9rem;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;transition:all .2s}.text-btn:hover{color:#fff;text-decoration-color:#fff}.header-right{margin-left:auto}.auth-form{width:100%;max-width:320px;display:flex;flex-direction:column!important;gap:12px;margin-bottom:12px}.auth-input{width:100%;padding:14px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#fff;font-size:1rem;outline:none;transition:all .2s}.auth-input:focus{border-color:var(--accent);background:#ffffff14;box-shadow:0 0 0 2px #6366f133}.auth-input::placeholder{color:#6b7280}.auth-divider{display:flex;align-items:center;color:var(--text-muted);font-size:.85rem;margin:16px 0;width:100%;max-width:320px}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:#ffffff1a}.auth-divider span{padding:0 12px}.guest-option{margin-top:24px;width:100%;max-width:320px;text-align:center}.error-message{color:#ef4444;font-size:.9rem;margin-top:-8px;margin-bottom:8px;display:none;text-align:left;width:100%;max-width:320px}.validation-message{font-size:.85rem;margin-top:6px;margin-bottom:12px;text-align:left;line-height:1.4;color:var(--text-muted);width:100%;max-width:320px;padding-left:4px}.validation-message.error{color:#ff4b4b;font-weight:500}.validation-message.warning{color:#f59e0b}.validation-message.success{color:#10b981}.app-header{display:flex;justify-content:space-between;align-items:center;padding:0 24px;background-color:#131313;border-bottom:1px solid rgba(255,255,255,.05);height:64px;flex-shrink:0;z-index:50}.header-left,.header-right{display:flex;align-items:center;gap:16px}.header-left h1{margin:0;font-size:1.1rem;font-weight:600;color:#fff;letter-spacing:-.01em}.dashboard-container{display:flex;flex-direction:row;width:100vw;height:100vh;background-color:#09090b;color:#fff;overflow:hidden;z-index:50}.dash-sidebar{width:260px;min-width:260px;background-color:#111113;border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;padding:24px;z-index:10}.dash-logo{font-size:1.25rem;font-weight:700;margin-bottom:40px;display:flex;align-items:center;gap:10px;color:#fff}.dash-nav{display:flex;flex-direction:column;gap:8px}.dash-nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:#a1a1aa;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none}.dash-nav-item:hover,.dash-nav-item.active{background-color:#ffffff0d;color:#fff}.dash-nav-item.active{background-color:#6366f11a;color:#818cf8}.dash-user-section{margin-top:auto;border-top:1px solid rgba(255,255,255,.05);padding-top:20px}.dash-main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:#09090b}.dash-header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid rgba(255,255,255,.03);flex-shrink:0}.dash-header h2{font-size:1.5rem;font-weight:600;margin:0}.dash-content{flex:1;overflow-y:auto;padding:40px}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}.project-card{background:#18181b;border:1px solid rgba(255,255,255,.05);border-radius:12px;overflow:hidden;height:220px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;position:relative}.project-card:hover{transform:translateY(-4px);border-color:#ffffff1a;box-shadow:0 12px 24px #0006}.project-preview{flex:1;background-color:#0d0d0d;background-image:linear-gradient(45deg,#161616 25%,transparent 25%),linear-gradient(-45deg,#161616 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#161616 75%),linear-gradient(-45deg,transparent 75%,#161616 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;display:flex;align-items:center;justify-content:center;padding:20px;border-bottom:1px solid rgba(255,255,255,.03)}.project-preview img{max-width:80%;max-height:80%;image-rendering:pixelated;box-shadow:0 8px 16px #00000080}.project-info{padding:16px;background:#18181b}.project-info h3{font-size:.95rem;font-weight:500;color:#e4e4e7;margin:0 0 4px}.project-meta{font-size:.75rem;color:#71717a}.create-new-card{border:2px dashed rgba(255,255,255,.1);background:transparent;align-items:center;justify-content:center;color:#71717a;flex-direction:column;gap:12px;transition:all .2s ease}.create-new-card:hover{border-color:#6366f1;color:#6366f1;background:#6366f108}.create-icon{width:48px;height:48px;border-radius:50%;background:#ffffff0d;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .2s ease}.create-new-card:hover .create-icon{background:#6366f1;color:#fff}.delete-project-btn{opacity:0;background:#0009;border:none;width:28px;height:28px;border-radius:6px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;position:absolute;top:10px;right:10px;padding:0}.delete-project-btn img{display:block}.project-card:hover .delete-project-btn{opacity:1}.delete-project-btn:hover{background:#ef4444}