:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{min-width:320px;min-height:100vh;margin:0;display:block}:root{--primary:#6366f1;--bg:#0b0f1a;--card:#161b2c;--text:#f8fafc;--border:#2d3748}body{background-color:var(--bg);color:var(--text);margin:0;font-family:Inter,system-ui,sans-serif}.demo-container{box-sizing:border-box;width:95%;max-width:1400px;margin:0 auto;padding:3rem 1rem}header{text-align:center;margin-bottom:4rem}.back-link{color:#c7d2fe;background:#1e293b8c;border:1px solid #818cf859;border-radius:.75rem;justify-content:center;align-items:center;width:fit-content;margin:0 auto 1.25rem;padding:.7rem 1rem;font-size:.85rem;font-weight:600;text-decoration:none;transition:transform .2s,border-color .2s,background .2s;display:inline-flex}.back-link:before{content:"<";margin-right:.5rem;font-weight:700}.back-link:hover{background:#334155d9;border-color:#c4b5fd8c;transform:translateY(-2px)}header h1{background:linear-gradient(135deg,#818cf8 0%,#c084fc 100%);-webkit-text-fill-color:transparent;letter-spacing:-1px;-webkit-background-clip:text;margin:0;font-size:3.5rem}.header-actions{justify-items:anchor-center;justify-content:center;align-items:center;gap:10px;padding:10px;display:flex}.header-actions a{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#e2e8f0;cursor:pointer;text-transform:capitalize;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border:1px solid #ffffff1a;border-radius:.75rem;padding:.75rem 1rem;font-size:.85rem;font-weight:500;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.header-actions a:hover{background:#334155cc;border-color:#fff3;transform:translateY(-2px);box-shadow:0 10px 15px -3px #0003}header p{color:#94a3b8;margin-top:.5rem;font-size:1.2rem}.demo-grid{grid-template-columns:1fr 380px;align-items:start;gap:2.5rem;display:grid}.card{background:var(--card);border:1px solid var(--border);border-radius:1.25rem;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}.card-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.card-header h3{margin:0;font-size:1.1rem;font-weight:600}.preview-actions{gap:8px;display:flex}.display-area{background:#000;justify-content:center;align-items:center;min-height:500px;display:flex}.main-canvas{max-width:100%;max-height:70vh;display:block}.ascii-box{color:#10b981;white-space:pre;background:#000;margin:0;padding:1rem;font-family:Courier New,monospace;font-size:8px;line-height:1;overflow:auto}.controls-card{background:var(--card);border:1px solid var(--border);border-radius:1.25rem;flex-direction:column;gap:1.5rem;padding:2rem;display:flex}.controls-card h3{text-transform:uppercase;letter-spacing:1px;color:#94a3b8;margin:0;font-size:.9rem}.control-group{flex-direction:column;gap:.75rem;display:flex}.label-row{justify-content:space-between;font-size:.9rem;display:flex}input[type=range]{width:100%;accent-color:var(--primary);appearance:none;background:#334155;border-radius:3px;height:6px}.filter-grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}.filter-grid button,.demo-switch-button,.toggle-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#e2e8f0;cursor:pointer;text-transform:capitalize;background:#1e293b80;border:1px solid #ffffff1a;border-radius:.75rem;padding:.75rem 1rem;font-size:.85rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.filter-grid button:hover,.toggle-btn:hover,.demo-switch-button:hover{background:#334155cc;border-color:#fff3;transform:translateY(-2px);box-shadow:0 10px 15px -3px #0003}.filter-grid button.active,.demo-switch-button.active{color:#fff;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border-color:#0000;box-shadow:0 10px 20px -5px #6366f166}.toggle-btn{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);border:none;padding:.5rem 1.25rem;font-size:.8rem;font-weight:600}.toggle-btn:active{transform:scale(.95)}.checkbox-row{align-items:center;gap:.75rem;font-size:.9rem;display:flex}.transformation-inputs,.transformation-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:.5rem;display:grid}.input-field{color:#94a3b8;align-items:center;gap:.5rem;font-size:.8rem;display:flex}.input-field input,.control-group input[type=text],.full-width-select{border:1px solid var(--border);color:#fff;background:#0f172a;border-radius:.3rem;width:100%;padding:.4rem}.full-width-select{cursor:pointer;appearance:none}.mt-2{margin-top:.5rem}.resize-inputs span{color:#475569}.thumbnail-card{text-align:center;flex-direction:column;align-items:center;margin-top:2rem;display:flex}.thumbnail-card img{border:2px solid var(--primary);border-radius:.75rem;max-width:200px}hr{border:0;border-top:1px solid var(--border);margin:1.5rem 0}.cropper-demo-card{padding:20px}.cropper-demo-text{color:#cbd5e1;margin-top:.25rem;margin-bottom:1rem}.mt-20{margin-top:20px}.cropper-shell{background:#020617cc;border:1px solid #94a3b833}.cropper-stage{border-color:#3b82f68c;border-radius:10px}.cropper-controls{gap:10px}.cropper-btn{border-radius:8px;min-width:120px;font-weight:600}.cropper-btn-primary{color:#fff;background:linear-gradient(135deg,#2563eb 0%,#4f46e5 100%);border:none;width:max-content}.cropper-btn-secondary{color:#e2e8f0;background:#0f172ad1;border:1px solid #94a3b859}.cropper-selection{background:#3b82f614}.cropper-handle{background:#eff6ff!important;border-color:#3b82f6!important}.cropper-controls-anchor{filter:drop-shadow(0 4px 12px #0f172a73)}.cropper-processing{color:#fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0f172aa6}.cropper-error{background:#7f1d1d40;border:1px solid #f87171a6;border-radius:8px;margin-top:12px;padding:10px 12px}.cropper-error-text{color:#fecaca;margin:0;font-size:13px}.code-panel{border-top:1px solid var(--border);background:#020617b8}.code-panel-summary{cursor:pointer;color:#cbd5e1;padding:.9rem 1.2rem;font-size:.85rem;font-weight:600;list-style:none}.code-panel-summary::-webkit-details-marker{display:none}.code-panel-summary:before{content:"▸";color:#93c5fd;margin-right:.55rem}.code-panel[open] .code-panel-summary:before{content:"▾"}.code-panel-body{padding:0 1.2rem 1.1rem}.code-panel-toolbar{justify-content:flex-end;margin-bottom:.55rem;display:flex}.code-copy-btn{color:#e2e8f0;cursor:pointer;background:#0f172ad6;border:1px solid #94a3b873;border-radius:.55rem;padding:.4rem .7rem;font-size:.75rem;font-weight:600}.code-copy-btn:hover{border-color:#6366f1bf}.code-block{background:#020617;border:1px solid #94a3b838;border-radius:.65rem;margin:0;overflow:hidden}.code-editor .cm-editor{border-radius:.65rem;font-size:12px}.code-editor .cm-scroller{font-family:JetBrains Mono,Fira Code,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}