*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{--font-ui: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--color-cream: #f6efe1;--color-surface: #fffbf3;--color-powder-blue: #aecbdb;--color-sage: #9db28f;--color-butter: #eccf7d;--color-coral: #e0836a;--color-ink: #3f382f;--color-ink-soft: #7a7167;--color-border: rgba(63, 56, 47, .12);--shadow-soft: 0 8px 24px rgba(63, 56, 47, .08);--radius-card: 22px;--radius-pill: 999px;--transition-soft: .32s ease}@media(prefers-color-scheme:dark){:root{--color-cream: #2a2620;--color-surface: #35302a;--color-powder-blue: #7fa3ba;--color-sage: #7f9779;--color-butter: #d9b866;--color-coral: #e3906f;--color-ink: #f2e9da;--color-ink-soft: #c7bcac;--color-border: rgba(242, 233, 218, .12);--shadow-soft: 0 8px 24px rgba(0, 0, 0, .35)}}:root{font-family:var(--font-ui);color-scheme:light dark}body{min-height:100dvh;background-color:var(--color-cream);color:var(--color-ink)}.page{max-width:80ch;margin-inline:auto;padding:2rem}.ring-designer{max-width:1240px;margin-inline:auto;padding:2.5rem 1.75rem 4rem;display:flex;flex-direction:column;gap:2.5rem}.ring-designer__header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-block:1rem}.wordmark{font-family:var(--font-ui);font-size:clamp(2.75rem,6vw,4rem);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--color-ink);position:relative}.wordmark:before{content:"";display:block;width:3.25rem;height:.5rem;margin:0 auto 1rem;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--color-powder-blue),var(--color-sage),var(--color-butter),var(--color-coral))}.wordmark__accent{padding-right:.15em;background:linear-gradient(120deg,var(--color-coral),var(--color-butter));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}.ring-designer__tagline{color:var(--color-ink-soft);font-size:1.05rem;max-width:46ch}.ring-designer__layout{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr) minmax(0,320px);gap:1.75rem;align-items:start}@media(max-width:980px){.ring-designer__layout{grid-template-columns:1fr}.ring-designer__preview{order:-1}}.panel{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);padding:1.75rem;display:flex;flex-direction:column;gap:1.25rem;transition:box-shadow var(--transition-soft)}.field{display:flex;flex-direction:column;gap:.5rem}.field label,.field__label{font-weight:600;font-size:.95rem;color:var(--color-ink)}.toggle-group{display:flex;gap:.4rem;background-color:var(--color-cream);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:.3rem}.toggle-group__option{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem .9rem;border-radius:var(--radius-pill);font-weight:600;font-size:.9rem;color:var(--color-ink-soft);cursor:pointer;transition:background-color var(--transition-soft),color var(--transition-soft),box-shadow var(--transition-soft)}.toggle-group__option input{position:absolute;opacity:0;pointer-events:none}.toggle-group__option--active{background-color:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-soft)}.toggle-group__option:has(input:focus-visible){outline:2px solid var(--color-powder-blue);outline-offset:2px}.field select,.field input[type=text]{font-family:var(--font-ui);padding:.65rem .9rem;border-radius:var(--radius-pill);border:1px solid var(--color-border);background-color:var(--color-cream);color:var(--color-ink);transition:border-color var(--transition-soft),background-color var(--transition-soft)}.field select:focus-visible,.field input:focus-visible{outline:2px solid var(--color-powder-blue);outline-offset:2px}.field input[type=range]{accent-color:var(--color-coral)}.field__hint{color:var(--color-ink-soft);font-size:.82rem;line-height:1.4}.ring-designer__preview{display:flex;flex-direction:column;gap:.75rem;align-items:center}.ring-canvas{width:100%;aspect-ratio:1 / 1;border-radius:var(--radius-card);border:1px solid var(--color-border);box-shadow:var(--shadow-soft);overflow:hidden;touch-action:none}.ring-designer__preview-hint{text-align:center}.summary-grid{display:grid;grid-template-columns:1fr;gap:.85rem}.summary-grid dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-ink-soft)}.summary-grid dd{margin:0;font-weight:600;color:var(--color-ink)}.ring-designer__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.btn{font-family:var(--font-ui);font-weight:700;font-size:.95rem;padding:.85rem 1.75rem;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:transform var(--transition-soft),box-shadow var(--transition-soft),background-color var(--transition-soft)}.btn:hover{transform:translateY(-1px)}.btn--primary{background:linear-gradient(120deg,var(--color-coral),var(--color-butter));color:var(--color-ink);box-shadow:var(--shadow-soft)}.btn--secondary{background-color:var(--color-powder-blue);color:var(--color-ink)}.btn--ghost{background-color:transparent;border-color:var(--color-border);color:var(--color-ink-soft)}
