@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--background: 0 0% 100%;--foreground: 240 10% 3.9%;--card: 0 0% 100%;--card-foreground: 240 10% 3.9%;--popover: 0 0% 100%;--popover-foreground: 240 10% 3.9%;--primary: 240 5.9% 10%;--primary-foreground: 0 0% 98%;--secondary: 240 4.8% 95.9%;--secondary-foreground: 240 5.9% 10%;--muted: 240 4.8% 95.9%;--muted-foreground: 240 3.8% 46.1%;--accent: 240 4.8% 95.9%;--accent-foreground: 240 5.9% 10%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 240 5.9% 90%;--input: 240 5.9% 90%;--ring: 240 5.9% 10%;--radius: .5rem;--sidebar-width: 340px;--topbar-height: 56px;--font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif}.dark{--background: 240 10% 3.9%;--foreground: 0 0% 98%;--card: 240 10% 3.9%;--card-foreground: 0 0% 98%;--popover: 240 10% 3.9%;--popover-foreground: 0 0% 98%;--primary: 0 0% 98%;--primary-foreground: 240 5.9% 10%;--secondary: 240 3.7% 15.9%;--secondary-foreground: 0 0% 98%;--muted: 240 3.7% 15.9%;--muted-foreground: 240 5% 64.9%;--accent: 240 3.7% 15.9%;--accent-foreground: 0 0% 98%;--destructive: 0 62.8% 30.6%;--destructive-foreground: 0 0% 98%;--border: 240 3.7% 15.9%;--input: 240 3.7% 15.9%;--ring: 240 4.9% 83.9%}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background-color:hsl(var(--background));color:hsl(var(--foreground));font-size:14px;line-height:1.5;height:100vh;height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;height:100vh;height:100dvh}#workspace{flex:1;display:flex;overflow:hidden;position:relative;background-color:hsl(var(--muted) / .4)}#topbar{height:var(--topbar-height);background-color:hsl(var(--background));border-bottom:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:100}.topbar-left{display:flex;align-items:center}.logo-container{display:flex;align-items:center;gap:8px;margin-right:12px}.logo-emoji{font-size:18px}.logo-text{font-weight:600;font-size:14px;letter-spacing:-.02em}.topbar-divider{color:hsl(var(--muted-foreground));margin-right:12px;font-size:14px}.project-info{display:flex;align-items:baseline;gap:8px}.project-title{font-weight:500;font-size:14px}.topbar-right{display:flex;align-items:center;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border-radius:var(--radius);font-size:14px;font-weight:500;font-family:var(--font);cursor:pointer;transition:colors .15s ease;white-space:nowrap;border:1px solid transparent}.btn:focus-visible{outline:none;box-shadow:0 0 0 2px hsl(var(--background)),0 0 0 4px hsl(var(--ring))}.btn-primary{background-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.btn-primary:hover{background-color:hsl(var(--primary) / .9)}.btn-outline{background-color:transparent;border-color:hsl(var(--border));color:hsl(var(--foreground))}.btn-outline:hover{background-color:hsl(var(--accent));color:hsl(var(--accent-foreground))}.btn-ghost{background-color:transparent;color:hsl(var(--foreground))}.btn-ghost:hover{background-color:hsl(var(--accent));color:hsl(var(--accent-foreground))}.btn-icon{padding:8px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px}.btn-icon svg{width:16px;height:16px}.btn-full{width:100%}.btn-small{padding:6px 12px;font-size:12px}#canvas-area{flex:1;position:relative;overflow:hidden;outline:none;background-color:hsl(var(--background))}.viewport-view{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.viewport-view.active{opacity:1;pointer-events:auto}#preview-canvas-2d{width:100%;height:100%;display:block}.viewport-controls{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:8px;z-index:10}#canvas-info{position:absolute;bottom:16px;left:16px;background-color:hsl(var(--card));border:1px solid hsl(var(--border));color:hsl(var(--card-foreground));padding:6px 12px;border-radius:var(--radius);font-size:12px;font-weight:500;box-shadow:0 1px 2px #0000000d}#sidebar{width:var(--sidebar-width);background-color:hsl(var(--background));border-right:1px solid hsl(var(--border));display:flex;flex-direction:column;z-index:20;overflow-x:hidden}.sidebar-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:24px}.sidebar-scroll::-webkit-scrollbar{width:6px}.sidebar-scroll::-webkit-scrollbar-track{background:transparent}.sidebar-scroll::-webkit-scrollbar-thumb{background-color:hsl(var(--muted-foreground) / .3);border-radius:10px}.sidebar-header{padding:16px;border-bottom:1px solid hsl(var(--border))}.sidebar-header h3{font-size:14px;font-weight:600;color:hsl(var(--foreground))}.parameter-group{padding:16px;border-bottom:1px solid hsl(var(--border))}.parameter-folder{border-bottom:1px solid hsl(var(--border))}.folder-title{padding:12px 16px;font-weight:500;font-size:14px;color:hsl(var(--foreground));cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .15s}.folder-title:hover{background-color:hsl(var(--muted) / .5)}.folder-content{padding:8px 16px 16px;display:flex;flex-direction:column;gap:16px}.param-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}.param-row>label{flex:0 0 90px;font-size:13px;font-weight:500;color:hsl(var(--foreground));text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.param-row>input,.param-row>select,.param-row>.slider-with-value,.param-row>.font-input-wrapper{flex:1;width:100%;min-width:0}.font-input-wrapper{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}.font-input-wrapper select{flex:1;min-width:0}.btn-upload-font{flex-shrink:0}.input-lg,.input-select{width:100%;padding:8px 12px;font-size:14px;font-family:var(--font);border:1px solid hsl(var(--input));border-radius:var(--radius);outline:none;background-color:hsl(var(--background));color:hsl(var(--foreground));transition:border-color .15s,box-shadow .15s;min-width:0}.input-lg:focus,.input-select:focus{border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}.labeled-slider label{display:block}.slider-with-value{display:flex;align-items:center;gap:8px;min-width:0}.slider-with-value input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background-color:hsl(var(--secondary));border-radius:3px;outline:none;min-width:0}.slider-with-value input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:hsl(var(--primary));cursor:pointer;transition:transform .1s}.slider-with-value input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.slider-value-input{width:52px;padding:4px 8px;font-size:13px;text-align:right;font-variant-numeric:tabular-nums;border:1px solid hsl(var(--input));border-radius:var(--radius);background-color:hsl(var(--background));color:hsl(var(--foreground));outline:none;transition:border-color .15s,box-shadow .15s}.slider-value-input:focus{border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}.slider-value-input::-webkit-inner-spin-button,.slider-value-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.slider-value-input{-moz-appearance:textfield}.unit{font-size:12px;color:hsl(var(--muted-foreground))}.btn-reset-param{background:transparent;border:none;color:hsl(var(--muted-foreground));cursor:pointer;font-size:12px;width:24px;height:24px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s}.btn-reset-param:hover{background-color:hsl(var(--accent));color:hsl(var(--accent-foreground))}.checkbox-label{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;font-weight:500;color:hsl(var(--foreground))}.checkbox-label input{width:16px;height:16px;accent-color:hsl(var(--primary));border-radius:4px}.color-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.color-row label{flex:0 0 100px;font-size:13px;font-weight:500;color:hsl(var(--foreground))}.color-row input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid hsl(var(--border));border-radius:var(--radius);width:32px;height:32px;cursor:pointer;padding:2px;background-color:hsl(var(--background));flex:0 0 auto}.layer-row{display:flex;align-items:center;gap:12px;width:100%}.layer-row label{font-size:13px;font-weight:500;color:hsl(var(--foreground));flex:0 0 60px}.layer-swatch{width:16px;height:16px;border-radius:4px;border:1px solid hsl(var(--border));flex-shrink:0}.compact{flex:1}.toggle-group{display:flex;background-color:hsl(var(--muted));padding:4px;border-radius:var(--radius)}.toggle-btn{padding:6px 16px;border:none;background:transparent;font-size:13px;font-family:var(--font);font-weight:500;border-radius:calc(var(--radius) - 2px);color:hsl(var(--muted-foreground));cursor:pointer;transition:all .15s}.toggle-btn.active{background-color:hsl(var(--background));color:hsl(var(--foreground));box-shadow:0 1px 2px #0000000d}.download-card{margin:16px;padding:16px;background-color:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 2px #0000000d}.download-card h4{font-size:14px;font-weight:600;color:hsl(var(--card-foreground))}.download-card p{font-size:13px;color:hsl(var(--muted-foreground))}.download-buttons{display:flex;flex-direction:column;gap:8px;margin-top:8px}.licensing-text{font-size:12px;color:hsl(var(--muted-foreground));text-align:center;margin-top:8px}.licensing-text a{color:hsl(var(--primary));text-decoration:underline;text-underline-offset:4px}#loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:hsl(var(--background) / .8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}#loading-overlay.hidden{display:none}.spinner{width:48px;height:48px;border:3px solid hsl(var(--border));border-top-color:hsl(var(--primary));border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){#workspace{flex-direction:column}#sidebar{width:100%;border-right:none;border-bottom:1px solid hsl(var(--border));max-height:50vh}}