:root,[data-theme=dark]{--color-bg-page:#000;--color-bg-glass:#161616e0;--color-bg-header:#141414f2;--color-bg-input:#111;--color-bg-input-focus:#1a1a1a;--color-bg-hover-subtle:#ffffff08;--color-bg-hover:#ffffff0f;--color-bg-active:#ffffff1f;--color-bg-canvas:#161616e0;--color-bg-upload:#ffffff05;--color-bg-upload-hover:#ffffff0d;--color-bg-preload-dim:#000000a6;--color-text-primary:#e0e0e0;--color-text-secondary:#ccc;--color-text-tertiary:#bbb;--color-text-muted:#aaa;--color-text-footer:#777;--color-text-bright:#ddd;--color-text-brightest:#eee;--color-text-link-hover:#ccc;--color-border-glass:#ffffff1a;--color-border-subtle:#ffffff0f;--color-border-input:#333;--color-border-focus:#888;--color-border-hover:#999;--color-border-toast-error:#ff50504d;--color-border-toast-success:#50ff5033;--color-border-inline:#555;--color-shadow-card:#0009;--color-shadow-toast:#00000080;--color-error-text:#ff6b6b;--color-error-border:#ff646433;--color-error-bg:#ff323214;--color-toast-bg:#1e1e1ef2;--color-toast-error-bg:#281414f2;--color-toast-success-bg:#142814f2;--color-toast-text:#eee;--color-slider-track-fill:#555;--color-slider-track-bg:#1a1a1a;--color-slider-thumb:#555;--color-slider-thumb-hover:#888;--color-slider-thumb-active:#aaa;--color-accent:#888;--color-accent-checkbox:#888;--color-placeholder:#555}[data-theme=light]{--color-bg-page:#f2eee9;--color-bg-glass:#fcf9f4e6;--color-bg-header:#f5f2ecf2;--color-bg-input:#efe9e1;--color-bg-input-focus:#f5f0e8;--color-bg-hover-subtle:#645a4b0d;--color-bg-hover:#645a4b14;--color-bg-active:#645a4b29;--color-bg-canvas:#e5e0d8e6;--color-bg-upload:#645a4b0a;--color-bg-upload-hover:#645a4b14;--color-bg-preload-dim:#e6dcd2a6;--color-text-primary:#4a3f35;--color-text-secondary:#6b5d4f;--color-text-tertiary:#706558;--color-text-muted:#8c8070;--color-text-footer:#9e8e7e;--color-text-bright:#5c4e3e;--color-text-brightest:#3d3028;--color-text-link-hover:#4a3f35;--color-border-glass:#b4aa9b40;--color-border-subtle:#b4aa9b1f;--color-border-input:#c5bdb0;--color-border-focus:#9e8e7e;--color-border-hover:#9e8e7e;--color-border-toast-error:#c2675e4d;--color-border-toast-success:#64a06433;--color-border-inline:#c5bdb0;--color-shadow-card:#00000014;--color-shadow-toast:#0000001f;--color-error-text:#c2675e;--color-error-border:#c2675e33;--color-error-bg:#c2675e14;--color-toast-bg:#f5f2ecf2;--color-toast-error-bg:#ffebe6f2;--color-toast-success-bg:#e6f5e6f2;--color-toast-text:#4a3f35;--color-slider-track-fill:#c5bdb0;--color-slider-track-bg:#e0d8cd;--color-slider-thumb:#9e8e7e;--color-slider-thumb-hover:#706558;--color-slider-thumb-active:#5c4e3e;--color-accent:#9e8e7e;--color-accent-checkbox:#9e8e7e;--color-placeholder:#b0a595}:root{--fs-title:1.6rem;--fs-display:1.2rem;--fs-body:1rem;--fs-label:.9rem;--fs-minor:.8rem}@font-face{font-family:Inconsolata LGC;src:url(/static/fonts/Inconsolata-LGC.otf)format("opentype");font-weight:400;font-style:normal}@font-face{font-family:Inconsolata LGC;src:url(/static/fonts/Inconsolata-LGC-Bold.otf)format("opentype");font-weight:700;font-style:normal}@font-face{font-family:Consolas;src:url(/static/fonts/consolab.ttf)format("truetype");font-weight:700;font-style:normal;font-display:block}*{box-sizing:border-box;margin:0;padding:0}.glass-card{background:var(--color-bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--color-border-glass);border-radius:12px;transition:background-color .4s,border-color .4s;animation:.5s fadeIn}.center-flex{justify-content:center;align-items:center;display:flex}html{height:100%}body{background:var(--color-bg-page);min-height:100vh;color:var(--color-text-primary);padding:20px;font-family:Inconsolata LGC,Consolas,monospace;transition:background-color .4s,color .4s;overflow-x:hidden}html,.guide-modal{scrollbar-width:thin;scrollbar-color:var(--color-border-glass) transparent}html::-webkit-scrollbar{width:6px}.guide-modal::-webkit-scrollbar{width:6px}html::-webkit-scrollbar-track{background:0 0}.guide-modal::-webkit-scrollbar-track{background:0 0}html::-webkit-scrollbar-thumb{background:var(--color-border-glass);border-radius:3px}.guide-modal::-webkit-scrollbar-thumb{background:var(--color-border-glass);border-radius:3px}html::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}.guide-modal::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}#symbolBg{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0}.page-wrap{z-index:1;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex;position:relative}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.landscape-lock{z-index:9999;background:var(--color-bg-page);text-align:center;opacity:0;visibility:hidden;pointer-events:none;flex-direction:column;gap:16px;transition:opacity .4s,visibility .4s;position:fixed;inset:0}.landscape-lock-card{flex-direction:column;align-items:center;gap:20px;padding:32px 40px;transition:transform .4s;display:flex;transform:scale(.95)}.landscape-lock-phone{border:2px solid var(--color-text-muted);border-radius:6px;width:28px;height:48px;animation:2.5s ease-in-out infinite lockPhonePulse;position:relative}.landscape-lock-phone:before{content:"";border:2px solid var(--color-text-muted);border-radius:50%;width:10px;height:10px;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.landscape-lock-text{color:var(--color-text-muted);font-size:var(--fs-label);letter-spacing:.5px;font-weight:300}@keyframes lockPhonePulse{0%,to{opacity:.7}50%{opacity:1}}@media (orientation:landscape) and (height<=600px){.landscape-lock{opacity:1;visibility:visible;pointer-events:auto}.landscape-lock-card{transform:scale(1)}}.container{z-index:1;max-width:1600px;height:calc(100vh - 40px);margin:0 auto;position:relative}.toast-container{z-index:1000;pointer-events:none;flex-direction:column-reverse;gap:8px;display:flex;position:fixed;bottom:20px;right:20px}.toast{font-size:var(--fs-label);color:var(--color-toast-text);background:var(--color-toast-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-border-glass);box-shadow:0 8px 24px var(--color-shadow-toast);pointer-events:auto;border-radius:8px;max-width:340px;padding:12px 20px;animation:.3s toastIn}.toast-error{border-color:var(--color-border-toast-error);background:var(--color-toast-error-bg)}.toast-success{border-color:var(--color-border-toast-success);background:var(--color-toast-success-bg)}@keyframes toastIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.toast.out{animation:.3s forwards toastOut}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}.theme-toggle-btn{border:1px solid var(--color-border-glass);background:var(--color-bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:32px;height:32px;color:var(--color-text-muted);cursor:pointer;font-size:var(--fs-body);-webkit-user-select:none;user-select:none;border-radius:6px;justify-content:center;align-items:center;padding:0;line-height:1;transition:all .3s;display:inline-flex}.theme-toggle-btn:hover{background:var(--color-bg-canvas);color:var(--color-text-primary);border-color:var(--color-border-hover)}.editable-val,.inline-input{min-width:28px;font-size:inherit;color:var(--color-text-brightest);text-align:center;vertical-align:middle;box-sizing:border-box;background:0 0;border:1px solid #0000;border-radius:3px;outline:none;padding:0 3px;font-family:inherit;line-height:normal;display:inline-block}.inline-input{border-color:var(--color-border-inline);background:var(--color-bg-input-focus);appearance:textfield}.inline-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.inline-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.inline-input:focus{border-color:var(--color-border-focus)}.btn{border:1px solid var(--color-border-glass);font-size:var(--fs-label);cursor:pointer;background:var(--color-bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--color-text-secondary);letter-spacing:.5px;border-radius:6px;padding:10px 24px;font-weight:400;transition:all .3s}.btn:hover{background:var(--color-bg-canvas);border-color:var(--color-border-hover);color:var(--color-text-primary)}.btn:active{transform:scale(.98)}.btn-primary{color:var(--color-text-bright)}.btn-primary:hover{color:var(--color-text-primary)}.btn-primary:disabled{opacity:.3;cursor:not-allowed;box-shadow:none;transform:none}.btn-secondary{color:var(--color-text-muted)}.btn-small{font-size:var(--fs-minor);padding:5px 8px}.control-label-row{font-size:var(--fs-minor);color:var(--color-text-muted);white-space:nowrap;align-items:center;font-weight:400;display:inline-flex}.control-label-row label{display:inline}.control-group input[type=range]{background:linear-gradient(to right, var(--color-slider-track-fill) 0%, var(--color-slider-track-fill) var(--track-fill,0%), var(--color-slider-track-bg) var(--track-fill,0%), var(--color-slider-track-bg) 100%);appearance:none;cursor:pointer;border-radius:999px;outline:none;width:100%;height:3px;transition:background .3s}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-slider-thumb);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:all .15s;box-shadow:0 0 8px #ffffff26}.control-group input[type=range]::-webkit-slider-thumb:hover{background:var(--color-slider-thumb-hover);transform:scale(1.15);box-shadow:0 0 12px #ffffff40}.control-group input[type=range]::-webkit-slider-thumb:active{background:var(--color-slider-thumb-active)}.control-group input[type=range]::-moz-range-thumb{background:var(--color-slider-thumb);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;transition:all .15s;box-shadow:0 0 8px #ffffff26}.control-group input[type=range]::-moz-range-thumb:hover{background:var(--color-slider-thumb-hover);transform:scale(1.15);box-shadow:0 0 12px #ffffff40}.control-group input[type=range]::-moz-range-thumb:active{background:var(--color-slider-thumb-active)}.checkbox-group{flex-wrap:wrap;gap:16px;display:flex}.checkbox-group label{font-size:var(--fs-minor);color:var(--color-text-muted);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;display:inline-flex}.checkbox-group label:hover{color:var(--color-text-primary)}.checkbox-group input[type=checkbox]{accent-color:var(--color-slider-track-fill);cursor:pointer}.bg-color-row{align-items:center;gap:8px;margin-top:4px;display:flex}.bg-color-label{font-size:var(--fs-minor);color:var(--color-text-muted);white-space:nowrap;font-weight:400}.bg-color-row input[type=color]{appearance:none;border:1px solid var(--color-border-input);cursor:pointer;background:0 0;border-radius:4px;width:32px;height:24px;padding:0}.bg-color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}.bg-color-row input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.bg-color-picker{cursor:pointer;align-items:center;display:flex;position:relative}.bg-color-swatch{border:1px solid var(--color-border-input);cursor:pointer;border-radius:4px;width:100%;min-width:0;height:24px;padding:0;transition:border-color .2s}.bg-color-swatch:hover{border-color:var(--color-border-hover)}.bg-color-picker input[type=color]{opacity:0;pointer-events:none;border:0;width:1px;height:1px;padding:0;position:absolute;bottom:100%;left:-390px}[data-theme=dark] .bg-color-picker input[type=color]{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}[data-theme=light] .bg-color-picker input[type=color]{--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}.export-bg-toggle{font-size:var(--fs-minor);color:var(--color-text-muted);cursor:pointer;white-space:nowrap;grid-column:1/-1;align-items:center;gap:6px;display:flex}.export-bg-toggle:hover{color:var(--color-text-primary)}.export-bg-toggle input[type=checkbox]{accent-color:var(--color-slider-track-fill);cursor:pointer}@media (width<=600px){body{touch-action:manipulation;padding:4px}input[type=text],input[type=password],input[type=email],input[type=number],.inline-input,.auth-card input{font-size:16px}.btn{padding:10px 16px}.toast{max-width:calc(100vw - 32px)}.bg-color-swatch{height:40px}.bg-color-picker input[type=color]{left:auto;right:0}.demo-ascii-bg-picker input[type=color]{width:100%;height:36px}.control-group input[type=range]{height:3px}.control-group input[type=range]::-webkit-slider-thumb{width:23px;height:23px}.control-group input[type=range]::-moz-range-thumb{width:23px;height:23px}}
