*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #0d9488;--primary-hover: #0f766e;--primary-light: rgba(13, 148, 136, .06);--primary-ring: rgba(13, 148, 136, .18);--background: #f8fafb;--surface: #ffffff;--border: #dfe5ea;--text-primary: #1e293b;--text-secondary: #64748b;--error: #f43f5e;--success: #10b981;--shadow: 0 1px 3px rgba(0, 0, 0, .06);--shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, .07);--radius: 10px;--touch-target: 44px;--safe-bottom: env(safe-area-inset-bottom, 0px)}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--background);color:var(--text-primary);line-height:1.5;min-height:100vh;min-height:100dvh;overflow-x:hidden}.app-container{max-width:1400px;margin:0 auto;padding:20px}.app-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.header-title-row{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}.app-header h1{font-size:1.5rem;font-weight:800;color:var(--primary-color);letter-spacing:-.025em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.subtitle{color:var(--text-secondary);font-size:.8125rem;font-weight:500;padding:4px 12px;background:var(--surface);border-radius:20px;box-shadow:var(--shadow);white-space:nowrap}.language-selector{margin-left:auto;display:flex;align-items:center}.language-selector select{padding:8px 12px;font-size:.8125rem;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-primary);cursor:pointer;min-height:var(--touch-target)}.controls-section-title{font-size:.875rem;font-weight:600;color:var(--text-primary);margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}.preview-section{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;min-width:0}.preview-container{position:relative;height:clamp(400px,calc(100vh - 260px),960px);height:clamp(400px,calc(100dvh - 260px),960px);background-color:#e8ecf0;background-image:linear-gradient(45deg,#d4dbe2 25%,transparent 25%),linear-gradient(-45deg,#d4dbe2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d4dbe2 75%),linear-gradient(-45deg,transparent 75%,#d4dbe2 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-overflow-scrolling:touch;transition:box-shadow .15s ease}.preview-container.dragover{box-shadow:0 0 0 3px var(--primary-ring)}.placeholder-message{display:none;flex-direction:column;align-items:center;gap:8px;color:var(--text-secondary);padding:16px;text-align:center;pointer-events:none}.placeholder-message.visible{display:flex}.placeholder-hint{font-size:.75rem!important;opacity:.8}.preview-icon{width:48px;height:48px}.placeholder-message p{font-size:.875rem}#previewCanvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:pointer}#previewCanvas:focus-visible{box-shadow:inset 0 0 0 2px var(--primary-color)}.transform-area{display:none;flex-direction:column;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}.transform-area.visible{display:flex}.transform-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.transform-row label{font-size:.8125rem;font-weight:600;color:var(--text-primary);white-space:nowrap}.transform-row input[type=range]{flex:1 1 140px;min-width:120px;accent-color:var(--primary-color)}.transform-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--touch-target);height:var(--touch-target);color:var(--text-primary);background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.transform-btn:hover:not(:disabled){color:var(--primary-color);border-color:var(--primary-color);background:var(--primary-light)}.transform-btn:disabled{opacity:.45;cursor:not-allowed}.transform-btn-text{width:auto;padding:0 14px;font-size:.8125rem;font-weight:600}.transform-btn-danger:hover:not(:disabled){color:var(--error);border-color:var(--error);background:#f43f5e14}.transform-status{display:flex;flex-wrap:wrap;gap:8px}.status-chip{display:inline-flex;align-items:center;gap:2px;padding:5px 12px;font-size:.75rem;color:var(--text-secondary);background:var(--background);border:1px solid var(--border);border-radius:999px}.status-chip b{color:var(--text-primary);font-variant-numeric:tabular-nums}.canvas-tips{font-size:.75rem;line-height:1.7;color:var(--text-secondary)}.canvas-tips kbd{padding:1px 5px;font-family:inherit;font-size:.6875rem;background:var(--surface);border:1px solid var(--border);border-bottom-width:2px;border-radius:4px}.controls-area{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;min-width:0;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto}.controls-area[disabled]{opacity:.55;pointer-events:none}.controls-area .controls-grid{grid-template-columns:1fr}.controls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;align-items:end}.control-group{display:flex;flex-direction:column;gap:6px}.control-group label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.025em}.control-group input[type=text],.control-group select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:.875rem;transition:border-color .2s;min-height:var(--touch-target)}.control-group input[type=text]:focus,.control-group select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-ring)}.control-group input[type=range]{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:3px;outline:none;margin:10px 0}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:var(--primary-color);border-radius:50%;cursor:pointer;transition:background .2s,box-shadow .2s;box-shadow:0 1px 4px #0003}.control-group input[type=range]::-webkit-slider-thumb:hover{background:var(--primary-hover);box-shadow:0 1px 6px #0000004d}.control-group input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--primary-color);border-radius:50%;cursor:pointer;border:none;box-shadow:0 1px 4px #0003}.control-group input[type=range]::-moz-range-thumb:hover{background:var(--primary-hover)}.range-value{font-size:.8125rem;font-weight:500;color:var(--text-primary)}.color-picker-wrapper{display:flex;gap:6px;align-items:center}.color-picker-wrapper input[type=color]{width:44px;height:44px;padding:4px;border:1px solid var(--border);border-radius:6px;cursor:pointer;flex-shrink:0}.color-picker-wrapper input[type=text]{flex:1;min-width:0}.output-actions{display:flex;align-items:end;gap:12px}.output-actions .control-group{flex:0 0 auto}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font-size:.9375rem;font-weight:500;border-radius:8px;border:none;cursor:pointer;transition:all .2s;white-space:nowrap;height:fit-content;min-height:var(--touch-target);-webkit-user-select:none;user-select:none}.btn-primary{background-color:var(--primary-color);color:#fff;width:100%}.btn-primary:hover:not(:disabled){background-color:var(--primary-hover)}.btn-primary:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.controls-section{padding-top:16px;border-top:1px solid var(--border);margin-top:16px}.controls-section:disabled{opacity:.5;pointer-events:none}.error-message{margin-top:8px;padding:8px 12px;background-color:#ef44441a;border-radius:var(--radius);color:var(--error);font-size:.8125rem;display:none}.error-message.visible{display:block}.loading-indicator{display:none;flex-direction:column;align-items:center;gap:8px;padding:24px;color:var(--text-secondary)}.loading-indicator.visible{display:flex}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.help-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:50%;background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:all .2s;box-shadow:var(--shadow);flex-shrink:0;-webkit-user-select:none;user-select:none}.help-btn:hover{color:var(--primary-color);background:var(--primary-light)}.help-btn:active{transform:scale(.92)}.help-btn svg{width:16px;height:16px}.modal-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:1000;align-items:center;justify-content:center;padding:20px;-webkit-overflow-scrolling:touch}.modal-overlay.visible{display:flex}.modal-content{background:var(--surface);border-radius:12px;box-shadow:0 20px 60px #00000026;max-width:480px;width:100%;animation:modalIn .25s ease-out;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch}@keyframes modalIn{0%{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}.modal-header h3{font-size:1.125rem;font-weight:700;color:var(--text-primary);margin-right:8px}.modal-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--text-secondary);font-size:1.25rem;cursor:pointer;border-radius:6px;transition:all .2s;flex-shrink:0;-webkit-user-select:none;user-select:none}.modal-close:hover{background:var(--background);color:var(--text-primary)}.modal-close:active{background:var(--border)}.modal-body{padding:20px 24px;display:flex;flex-direction:column;gap:20px}.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 24px;border-top:1px solid var(--border);background:var(--background);border-radius:0 0 12px 12px}.modal-checkbox{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;min-height:var(--touch-target)}.modal-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary-color);cursor:pointer;flex-shrink:0}.modal-checkbox:hover{color:var(--text-primary)}.modal-footer .btn{width:auto;margin-left:auto;padding:10px 22px;font-size:.875rem}.help-item{display:flex;gap:16px;align-items:flex-start}.help-icon{flex-shrink:0;width:44px;height:44px;border-radius:10px;background:#0d948814;display:flex;align-items:center;justify-content:center;color:var(--primary-color)}.help-icon svg{width:22px;height:22px}.help-text h4{font-size:.9375rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.help-text p{font-size:.8125rem;color:var(--text-secondary);line-height:1.6}.app-footer{margin-top:32px;padding-top:16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;font-size:.8125rem;color:var(--text-secondary)}.app-footer .footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}.app-footer .footer-copy{line-height:2.2}.app-footer a{color:var(--text-secondary);text-decoration:none;transition:color .2s}.app-footer a:hover{color:var(--primary-color)}.app-footer .source-link{display:inline-flex;align-items:center;gap:6px;margin:0 2px;padding:2px 10px 2px 8px;vertical-align:-4px;border:1px solid var(--border);border-radius:999px;background:var(--surface);transition:border-color .2s,color .2s,box-shadow .2s}.app-footer .source-link:hover{border-color:var(--primary-color);color:var(--primary-color);box-shadow:0 1px 4px var(--primary-ring)}.app-footer .source-logo{width:16px;height:16px;flex:0 0 auto}.app-footer .source-path{font-weight:600;white-space:nowrap;color:inherit}@media(max-width:480px){.app-container{padding:12px}.app-header{gap:8px;margin-bottom:16px}.header-title-row{width:100%}.app-header h1{font-size:1.25rem}.subtitle{font-size:.6875rem;padding:3px 8px}.language-selector{margin-left:0;width:100%}.language-selector select{width:100%}.workspace{grid-template-columns:1fr;gap:16px}.controls-area{position:static;max-height:none;overflow-y:visible}.preview-section{padding:10px;margin-bottom:16px;border-radius:6px}.preview-container{height:clamp(320px,calc(100vh - 300px),560px);height:clamp(320px,calc(100dvh - 300px),560px);border-radius:6px}.transform-row input[type=range]{flex:1 1 100%;order:5}.placeholder-message p{font-size:.8125rem}.preview-icon{width:36px;height:36px}.controls-area{padding:14px;border-radius:6px}.controls-grid{grid-template-columns:1fr;gap:14px}.control-group label{font-size:.6875rem}.control-group input[type=text],.control-group select{font-size:.9375rem;padding:10px 12px}.control-group input[type=range]{margin:8px 0}.btn{padding:14px 20px;font-size:1rem;border-radius:8px}.controls-section-title{font-size:.75rem;margin-bottom:12px}.modal-overlay{padding:12px;align-items:flex-end}.modal-content{border-radius:16px 16px 0 0;max-height:85vh}.modal-header{padding:16px 16px 0}.modal-header h3{font-size:1rem}.modal-body{padding:16px;gap:16px}.help-item{gap:12px}.help-icon{width:38px;height:38px;border-radius:8px}.help-icon svg{width:18px;height:18px}.help-text h4{font-size:.875rem}.help-text p{font-size:.75rem}.app-footer{flex-direction:column;gap:6px;text-align:center;margin-top:24px;padding-bottom:calc(16px + var(--safe-bottom))}.app-footer .footer-links{justify-content:center}}@media(min-width:481px)and (max-width:768px){.app-container{padding:16px}.app-header{flex-wrap:wrap;gap:8px}.app-header h1{font-size:1.375rem}.language-selector{margin-left:0}.workspace{grid-template-columns:1fr;gap:16px}.controls-area{position:static;max-height:none;overflow-y:visible}.controls-grid,.controls-area .controls-grid{grid-template-columns:repeat(2,1fr)}.output-actions{flex-wrap:wrap}.preview-container{height:clamp(360px,calc(100vh - 300px),660px);height:clamp(360px,calc(100dvh - 300px),660px)}.modal-overlay{padding:16px;align-items:center}.modal-content{border-radius:12px}.app-footer{flex-direction:column;gap:8px;text-align:center}.app-footer .footer-links{justify-content:center}}@media(min-width:769px)and (max-width:1024px){.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:16px}.btn-primary{width:auto}}@media(max-height:500px)and (orientation:landscape){.preview-container{height:clamp(260px,calc(100vh - 180px),420px)}.app-header{margin-bottom:12px}.controls-area{padding:14px}}@media(hover:none)and (pointer:coarse){.help-btn:active{color:var(--primary-color);background:var(--primary-light)}.modal-close:active{background:var(--border)}.control-group input[type=range]::-webkit-slider-thumb{width:26px;height:26px;box-shadow:0 2px 8px #0003}.control-group input[type=range]::-moz-range-thumb{width:26px;height:26px;box-shadow:0 2px 8px #0003}.control-group input[type=range]{height:8px}.color-picker-wrapper input[type=color]{width:48px;height:48px}.btn,select,input[type=text]{min-height:48px}}@media(prefers-color-scheme:dark){:root{--background: #0f172a;--surface: #1e293b;--border: #334155;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--primary-color: #2dd4bf;--primary-hover: #14b8a6;--primary-light: rgba(45, 212, 191, .1);--primary-ring: rgba(45, 212, 191, .2);--shadow: 0 1px 3px rgba(0, 0, 0, .3);--shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, .4)}.preview-container{background-color:#374151;background-image:linear-gradient(45deg,#4b5563 25%,transparent 25%),linear-gradient(-45deg,#4b5563 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#4b5563 75%),linear-gradient(-45deg,transparent 75%,#4b5563 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.language-selector select{background:var(--surface)}.modal-close:hover{background:var(--background)}.help-icon{background:#2dd4bf1f}}@media print{.app-header,.controls-area,.transform-area,.help-btn,.modal-overlay{display:none!important}.workspace{display:block}.preview-section{box-shadow:none;padding:0}.app-footer{border-top:none}}