.settings{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.settings-input-wrapper{position:relative;flex:1 1 0;min-width:0}.settings-input-content{border:1px solid;border-color:#0000001a;border-radius:20px;padding:.75rem .5rem .5rem;height:72px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color .2s;gap:.58rem}.settings-input-wrapper:focus-within .settings-input-content{border-color:currentColor}@media (prefers-color-scheme: dark){.settings-input-content{border-color:#ffffff1a}}.settings-input,.settings-select{width:100%;border:none;background:transparent;color:inherit;text-align:center;font-size:1.25rem;font-weight:300;padding:0;margin:0;outline:none}.settings-input::-webkit-inner-spin-button,.settings-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.settings-input[type=number]{-moz-appearance:textfield;text-align:center}.settings-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:10px;padding-right:1.5rem;padding-left:1.5rem;text-align:center;text-align-last:center;direction:ltr}.settings-input-label{font-size:.625rem;font-weight:400;text-transform:uppercase;letter-spacing:.05em;opacity:.6;text-align:center;width:100%;margin:0}.settings-range{width:100%;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none;margin:0;padding:0}.settings-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#333;cursor:pointer}.settings-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#333;cursor:pointer;border:none}@media (prefers-color-scheme: dark){.settings-range{background:#ffffff1a}.settings-range::-webkit-slider-thumb{background:#fff}.settings-range::-moz-range-thumb{background:#fff}}.font-selector{display:flex;flex-direction:column;gap:1rem}.font-source-tabs{display:flex;gap:.5rem;border-bottom:1px solid;border-color:#0000001a}@media (prefers-color-scheme: dark){.font-source-tabs{border-color:#ffffff1a}}.font-source-tabs button{padding:.5rem .75rem;border:none;background:transparent;cursor:pointer;font-size:.875rem;color:inherit;opacity:.6;border-bottom:1px solid transparent;margin-bottom:-1px;transition:all .2s;font-weight:300}.font-source-tabs button:hover{opacity:1}.font-source-tabs button.active{opacity:1;border-bottom-color:currentColor;font-weight:400}.font-select-wrapper{position:relative;flex:1;min-width:0;display:flex;align-items:center;border:1px solid;border-color:#0000001a;border-radius:20px;height:40px;padding-left:1rem;padding-right:.25rem;gap:0}.font-select-wrapper>.font-select{margin-right:0;padding-right:0;flex:0 0 auto}.font-select-wrapper>.dropdown-arrow{margin-left:.5rem;margin-right:0;flex-shrink:0;width:16px;height:16px}.font-select-wrapper>.font-upload-label{margin-left:auto;margin-right:0;flex-shrink:0}@media (prefers-color-scheme: dark){.font-select-wrapper{border-color:#ffffff1a}}.font-select{width:auto;padding:.5rem 0;padding-right:0;height:100%;border:none;font-size:.875rem;background:transparent;color:inherit;cursor:pointer;transition:border-color .2s;font-weight:300;-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:0 0 auto;min-width:0;margin-right:0}@media (prefers-color-scheme: dark){.font-select{border-color:#ffffff1a}}.font-select:focus{outline:none}.font-select-wrapper:focus-within{border-color:currentColor}.font-select:disabled{opacity:.4;cursor:not-allowed}.dropdown-arrow{pointer-events:none;opacity:.6;flex-shrink:0;margin-left:.5rem;margin-right:0;width:16px;height:16px}.sync-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0003;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}.sync-modal-overlay.closing{animation:fadeOut .3s ease-out}.sync-modal{background:#fff;border-radius:16px;padding:2rem 3rem;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;align-items:center;gap:1rem;animation:slideUpFadeIn .3s ease-out;transform:translateY(0);color:#000;min-width:200px;position:relative;z-index:1001}.sync-modal-overlay.closing .sync-modal{animation:slideUpFadeOut .3s ease-out}@media (prefers-color-scheme: dark){.sync-modal{background:#1a1a1a;color:#fff}}.sync-modal-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.sync-modal-content .loading-spinner{width:32px;height:32px;border:2px solid;border-color:currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;margin:0;opacity:1;flex-shrink:0}.sync-modal-text{margin:0;font-size:.875rem;font-weight:300;opacity:.8;color:inherit;text-align:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUpFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.loading-spinner{width:12px;height:12px;border:1px solid;border-color:currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;opacity:.6;flex-shrink:0;margin-left:.5rem;margin-right:0}@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}.font-upload-wrapper{display:flex;flex-direction:column;gap:.5rem}.font-upload-label{display:block;cursor:pointer}.font-upload-label{display:flex;align-items:center;flex-shrink:0;margin-left:auto;margin-right:0}.font-upload-input{display:none}.font-upload-button{width:28px;height:28px;padding:0;background:#000;color:#fff;border:1px solid black;border-radius:999px;transition:all .2s;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}@media (prefers-color-scheme: dark){.font-upload-button{background:#fff;color:#000;border-color:#fff}}.font-upload-button:hover:not(:disabled){opacity:.8}.font-upload-button:disabled{opacity:.3;cursor:not-allowed}.font-upload-button svg{width:20px;height:20px}.settings-toggle{width:28px;height:28px;padding:0;background:#fff;color:#000;border:1px solid white;border-radius:999px;transition:all .2s;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto}@media (prefers-color-scheme: dark){.settings-toggle{background:#000;color:#fff;border-color:#000}}.settings-toggle:hover:not(:disabled) svg{opacity:1}.settings-toggle.active svg{opacity:1}.settings-toggle svg{width:20px;height:20px;stroke-width:1.5;opacity:.6}.font-name-display{padding:.5rem;border:1px solid;border-color:#0000001a;border-radius:999px;font-size:.875rem;color:inherit;text-align:center;opacity:.6;font-weight:300}@media (prefers-color-scheme: dark){.font-name-display{border-color:#ffffff1a}}.font-error{margin-top:.5rem;padding:.75rem;border:1px solid;border-color:currentColor;border-radius:999px;font-size:.75rem;color:inherit;line-height:1.4;opacity:.6;font-weight:300}.font-calligraphy-info{margin-bottom:.5rem}.font-calligraphy-description{font-size:.75rem;color:inherit;font-style:normal;margin:0;padding:.5rem;border:1px solid;border-color:#0000001a;border-radius:999px;opacity:.5;font-weight:300}@media (prefers-color-scheme: dark){.font-calligraphy-description{border-color:#ffffff1a}}.canvas-viewer{width:100%;flex:1;display:flex;align-items:center;justify-content:center;position:relative;cursor:text;min-height:400px}.canvas-viewer.empty{color:inherit;font-size:.875rem;text-align:center;opacity:.8;font-weight:300;min-height:200px}.canvas-viewer-input{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:none;background:transparent;color:inherit;font-size:1.5rem;font-weight:300;text-align:center;outline:none;width:80%;max-width:600px;padding:1rem 2rem;z-index:10;font-family:inherit}.canvas-viewer-input:focus{outline:none}.canvas-viewer-input::placeholder{opacity:.4}.canvas-svg{width:100%;height:100%;max-width:800px;max-height:600px;pointer-events:none}.controls{display:flex;flex-direction:column;gap:1.5rem}.controls-playback{display:flex;gap:1rem;justify-content:center;align-items:center}.play-button{width:72px;height:72px;padding:0;border:none;border-radius:50%;font-size:1.5rem;font-weight:300;cursor:pointer;transition:all .2s;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;line-height:1}@media (prefers-color-scheme: dark){.play-button{background:#fff;color:#000}}.loop-button{width:72px;height:72px;padding:0;border:1px solid;border-color:#0000001a;border-radius:50%;font-size:1.5rem;font-weight:300;cursor:pointer;transition:all .2s;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;line-height:1}.loop-button.active{background:currentColor;color:#fff;border-color:currentColor}@media (prefers-color-scheme: dark){.loop-button{border-color:#ffffff1a}.loop-button.active{background:#fff;color:#000;border-color:#fff}}.play-button:hover:not(:disabled){opacity:.8}.loop-button:hover:not(:disabled):not(.active),.speed-button:hover:not(:disabled){border-color:currentColor;background:currentColor;color:#fff}@media (prefers-color-scheme: dark){.loop-button:hover:not(:disabled):not(.active),.speed-button:hover:not(:disabled){border-color:#fff;background:#fff;color:#000}}.play-button:disabled,.loop-button:disabled,.speed-button:disabled{opacity:.3;cursor:not-allowed}.speed-control{display:flex;align-items:center}.speed-button{width:72px;height:72px;padding:0;border:1px solid;border-color:#0000001a;border-radius:50%;font-size:1rem;font-weight:400;cursor:pointer;transition:all .2s;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;line-height:1}@media (prefers-color-scheme: dark){.speed-button{border-color:#ffffff1a}}.speed-button:hover:not(:disabled){opacity:.8}.speed-button:disabled{opacity:.3;cursor:not-allowed}.controls-export{display:flex;justify-content:center}.export-buttons{display:flex;gap:.5rem}.export-button{height:40px;padding:0 1rem;border:1px solid;border-color:#0000001a;background:transparent;color:inherit;border-radius:999px;font-size:.75rem;font-weight:300;cursor:pointer;transition:all .2s;opacity:.6;display:flex;align-items:center;justify-content:center}@media (prefers-color-scheme: dark){.export-button{border-color:#ffffff1a}}.export-button:hover:not(:disabled){opacity:1;border-color:currentColor;background:currentColor;color:#fff}@media (prefers-color-scheme: dark){.export-button:hover:not(:disabled){border-color:#fff;background:#fff;color:#000}}.export-button:disabled{opacity:.3;cursor:not-allowed}.app{min-height:100vh;padding:1rem;background:#fff!important;color:#000!important}.app-container{display:flex;flex-direction:column;gap:1.5rem;max-width:1200px;margin:0 auto}@media (prefers-color-scheme: dark){.app-controls{border-color:#ffffff1a}}.app-main{background:transparent;border:none;padding:2rem;min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center}.app-controls{background:transparent;border:1px solid;border-color:#0000001a;border-radius:24px;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}@media (min-width: 768px) and (max-width: 1024px){.app-controls{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}}@media (max-width: 767px){.app{padding:.75rem}.app-controls{display:flex;flex-direction:column}}*{margin:0;padding:0;box-sizing:border-box}:root{color-scheme:light dark}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff!important;color:#000!important;min-height:100vh;transition:background-color .2s,color .2s}@media (prefers-color-scheme: dark){body{background:#fff!important;color:#000!important}}#root{min-height:100vh}