*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font-sans: "Inter", system-ui, sans-serif;--panel-w: 20rem;--header-h: 4rem;--footer-size: .875rem;--app-name-size: 1.75rem;--footer-padding-y: .75rem;--accent: #3b82f6}html,body{height:100%;background:#08080c;color:#e2e8f0;overflow:hidden}#header{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:50;display:flex;align-items:center;gap:var(--header-gap, .75rem);padding:0 1.5rem;background:#08080cd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.07)}#header .brand{font-size:var(--app-name-size);font-weight:600;line-height:1;letter-spacing:.025em;color:#e2e8f0}#header .subtitle{font-size:.875rem;color:#9ca3af}#panel{position:fixed;top:var(--header-h);left:0;width:var(--panel-w);height:calc(100vh - var(--header-h));z-index:40;display:flex;flex-direction:column;background:#08080cb3;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-right:1px solid rgba(255,255,255,.07);overflow:hidden}@supports (height: 100dvh){#panel{height:calc(100dvh - var(--header-h))}}#panel-scroll{flex:1;display:flex;flex-direction:column;padding:1rem;gap:1rem;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}#canvas-wrap{position:fixed;top:var(--header-h);left:var(--panel-w);right:0;bottom:0}#canvas-wrap canvas{display:block;width:100%;height:100%}.section-label{color:var(--accent)}.ring-group{display:flex;gap:.375rem}.ring-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.65rem .25rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;color:#9ca3af;font-size:.9rem;cursor:pointer;transition:all .15s}.ring-btn i{font-size:1.2rem}.ring-btn:hover{background:#ffffff14;color:#e2e8f0}.ring-btn.active{border-color:var(--accent);color:var(--accent);background:#ffffff0f}.slider-row{display:flex;align-items:center;gap:.5rem}.slider-row i{width:1.2rem;text-align:center;color:#6b7280;font-size:1rem;flex-shrink:0}.slider-row input[type=range]{flex:1;accent-color:var(--accent);height:3px;cursor:pointer}.slider-val{font-size:.875rem;color:#9ca3af;width:2.5rem;text-align:right;flex-shrink:0}.n-spacer{display:none;visibility:hidden;pointer-events:none}.params.cm-mode #n-slider-row{display:none}.params.cm-mode .n-spacer{display:flex}.swatches-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem}.swatch{width:100%;aspect-ratio:1;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .1s;position:relative}.swatch:hover{transform:scale(1.1)}.swatch.active{border-color:var(--accent)}.swatch-custom{display:flex;align-items:center;justify-content:center;background:#ffffff0f;border:1px dashed rgba(255,255,255,.2);border-radius:50%;overflow:hidden}.swatch-custom input[type=color]{opacity:0;position:absolute;inset:0;cursor:pointer;width:100%;height:100%}.swatch-custom i{font-size:1.7rem;color:#9ca3af;pointer-events:none}.export-group{display:flex;flex-direction:column;gap:.75rem}.custom-size-group{display:flex;flex-direction:column;gap:.375rem;margin-top:.5rem}.export-btn{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;color:#9ca3af;font-size:.875rem;line-height:1.25rem;cursor:pointer;transition:all .15s;text-align:left}.export-btn:hover{background:#ffffff14;color:#e2e8f0}.export-btn-label{display:flex;align-items:center;gap:.5rem}.export-btn i{width:1rem;text-align:center;flex-shrink:0}.export-btn-meta{color:#94a3b8;font-size:.75rem;text-align:right}.field-label{font-size:.875rem;font-weight:500;color:#e2e8f0}#custom-size-row{display:flex;gap:.375rem;align-items:flex-start}.input-col{display:flex;flex-direction:column;align-items:center;gap:.2rem;flex:1;min-width:0;position:relative}.input-label{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);font-size:.75rem;color:#6b7280;pointer-events:none}#custom-size-row input[type=number]{width:100%;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;color:#e2e8f0;font-size:.875rem;padding:.5rem 3.25rem .5rem .75rem;min-width:0;-moz-appearance:textfield;appearance:textfield}#custom-size-row input[type=number]::-webkit-inner-spin-button,#custom-size-row input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#custom-size-row>span{font-size:.78rem;color:#6b7280;padding-top:.6rem}#custom-size-row button{padding:.5rem .75rem;background:var(--accent);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;cursor:pointer;opacity:.9;flex-shrink:0}#custom-size-row button:hover{opacity:1}.ring-disclaimer{font-size:.8rem;color:#94a3b8;line-height:1.4;margin-top:.4rem}.ring-disclaimer a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-style:italic;font-weight:700;transition:color .15s}.ring-disclaimer a:hover{color:#d1d5db}#panel-footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.07);padding:var(--footer-padding-y) 1rem;line-height:1.25rem;text-align:center;font-size:var(--footer-size);color:var(--footer-text-color, #4b5563)}#panel-footer a{color:inherit;text-decoration:none;transition:color .15s}#panel-footer a:hover{color:#d1d5db}#panel-footer .heart{color:#f87171;font-size:1rem;line-height:1.5rem}.divider{height:1px;background:#ffffff0f;flex-shrink:0;margin:0 -1rem}#computing{position:fixed;bottom:12px;right:12px;background:#08080cd9;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;padding:6px 12px;font-size:.82rem;color:var(--accent);display:flex;align-items:center;gap:.4rem;opacity:0;transition:opacity .2s;pointer-events:none;z-index:100}#computing.visible{opacity:1}.hidden{display:none!important}#page-loader{background:#08080c}#page-loader i{color:var(--accent)}#panel-toggle{display:none;background:none;border:none;color:#e2e8f0;font-size:var(--hamburger-icon-size, 1.25rem);cursor:pointer;padding:.25rem;margin:-.25rem}#panel-backdrop{display:none}@media(max-width:767px){#panel-toggle{display:block}#header .subtitle{display:none}#panel{transform:translate(-100%);transition:transform .2s ease}body.panel-open #panel{transform:translate(0)}#panel-backdrop{position:fixed;inset:var(--header-h) 0 0 0;z-index:39;background:#00000080}body.panel-open #panel-backdrop{display:block}#canvas-wrap{left:0}#panel{backdrop-filter:none;-webkit-backdrop-filter:none}}