.config-section{--config-accent:#d8bd7a;--config-ink:#191c14;--config-soft:rgba(216,189,122,.12)}
.config-section[data-config-theme="silver"]{--config-accent:#c8d4de;--config-ink:#131b21;--config-soft:rgba(200,212,222,.1)}
.config-mode{display:flex;gap:6px;padding:7px;background:var(--config-soft);border:1px solid color-mix(in srgb,var(--config-accent) 35%,transparent);border-radius:99px;max-width:400px;margin:0 auto 14px}
.config-mode button{flex:1;border:0;background:transparent;color:#eee;border-radius:99px;padding:15px 28px;font:inherit;font-size:19px;cursor:pointer}
.config-mode button[aria-pressed="true"]{background:var(--config-accent);color:var(--config-ink);font-weight:700}
.config-mode-intro{text-align:center;margin:0 auto 40px;max-width:650px;color:#bdc0b5;font-size:18px}
.piercing-controls[hidden],#piercing-canvas[hidden],.config-section[data-config-mode="piercing"] #tattoo-canvas,.config-section[data-config-mode="piercing"] .canvas-toolbar,.config-section[data-config-mode="piercing"] .canvas-tag,.config-section[data-config-mode="piercing"] .canvas-hint,.config-section[data-config-mode="piercing"] .config-controls>.control-step{display:none!important}
#piercing-canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;cursor:grab;border-radius:18px;outline-offset:3px}
#piercing-canvas:active{cursor:grabbing}
.piercing-canvas-caption{display:none;position:absolute;top:19px;left:14px;right:14px;text-align:center;color:#414839;font-size:13px;letter-spacing:.12em;font-weight:600;pointer-events:none}
.config-section[data-config-mode="piercing"] .piercing-canvas-caption{display:block}
.config-section[data-config-mode="piercing"] .canvas-viewport{inset:48px 18px 64px}
.piercing-controls .control-step h3{text-align:center;font-size:25px;margin-bottom:20px;line-height:1.25}
.piercing-controls .control-step>div{min-width:0;width:100%}
.piercing-choice{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.piercing-choice button{flex:1;min-width:90px;padding:13px 10px;border:1px solid #74796970;background:transparent;color:#dadbd4;border-radius:15px;font:inherit;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px}
.piercing-choice button[aria-pressed="true"]{border-color:var(--config-accent);background:var(--config-accent);color:var(--config-ink);font-weight:600}
.piercing-label{display:block;margin:22px 0 9px;color:#e4e6df;font-size:18px}
.piercing-controls select{width:100%;min-height:53px;padding:10px 16px;background:#161b17;color:#eee;border:1px solid #757d6f88;border-radius:14px;font:inherit;font-size:18px}
.piercing-small{font-size:15px!important;line-height:1.65;color:#b3b8ab;margin:15px 0!important}
.piercing-upload{margin-top:20px!important}
.piercing-controls .slider-label{font-size:18px}
.piercing-choice.materials i{width:17px;height:17px;display:inline-block;border-radius:50%;border:1px solid #777;box-shadow:inset -2px -2px 3px #0004}
.metal-silver{background:linear-gradient(130deg,#fff,#8b99a6)}.metal-gold{background:linear-gradient(130deg,#fff3bd,#ae7618)}.metal-black{background:linear-gradient(130deg,#73777c,#0a0b10)}
.jewelry-shapes button{flex-direction:column;min-width:80px;padding:15px 8px;font-size:14px}
.jewelry-symbol{display:block;position:relative;height:25px;width:25px;color:inherit}
.jewelry-symbol.stud{background:radial-gradient(circle at 30% 25%,#fff,#a1adb5 65%,#56616c);border:1px solid #73818a;width:15px;height:15px;margin:5px;border-radius:50%}
.jewelry-symbol.hoop{border:3px solid currentColor;border-radius:50%}.jewelry-symbol.horseshoe{border:3px solid currentColor;border-bottom-color:transparent;border-radius:50%}
.jewelry-symbol.barbell:before{content:"";position:absolute;left:11px;top:4px;width:3px;height:19px;background:currentColor;transform:rotate(35deg)}
.jewelry-symbol.barbell:after{content:"●";position:absolute;left:10px;top:-7px;text-shadow:-11px 18px currentColor;font-size:18px}
.piercing-piece-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;margin-top:20px}
.piercing-piece-actions button{font:inherit;font-size:15px;cursor:pointer;background:none;border:0;border-bottom:1px solid currentColor;color:var(--config-accent);padding:0 0 5px}
.piercing-piece-actions button:disabled{opacity:.35;cursor:default}
#piercing-pieces button{flex:0 1 auto;min-width:42px;padding:8px 12px}
.piercing-consult{display:block;text-align:center;color:var(--config-accent);font-size:17px;margin-top:30px;text-decoration:underline;text-underline-offset:5px}
.config-mode button:focus-visible,.piercing-controls button:focus-visible,#preview-download-dialog button:focus-visible{outline:3px solid #fff;outline-offset:3px}
#preview-download-dialog{box-sizing:border-box;background:#151b1f;color:#edf0f2;border:1px solid #78848a;border-radius:26px;padding:40px;width:min(620px,calc(100vw - 28px));max-height:calc(100dvh - 30px);overflow-y:auto;box-shadow:0 30px 100px #0009}
#preview-download-dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}
#preview-download-dialog .eyebrow{font-size:12px;text-align:center;letter-spacing:.16em;color:#c7d1d5;margin:5px 0 16px}
#preview-download-dialog h2{text-align:center;font-size:clamp(30px,4vw,42px);line-height:1.1;margin:0 15px 18px;color:#f1f3f3;letter-spacing:0}
#preview-download-copy{text-align:center;font-size:16px;line-height:1.6;color:#c9ced1;margin:0 0 20px}
.preview-dialog-close{position:absolute;right:13px;top:8px;border:0;background:none;color:#eee;font-size:30px;line-height:1;padding:7px;cursor:pointer}
.preview-local-note{border-radius:14px;background:#c1cfdb12;border:1px solid #77838a55;padding:14px 17px;margin:18px 0 23px}
.preview-local-note strong{font-size:14px;color:#e6ebee}.preview-local-note p{font-size:13px;line-height:1.55;color:#b8c2c8;margin:7px 0 0}
#preview-download-form>label,.preview-form-row label{display:block;font-size:15px;color:#dbe0e3;margin:0 0 17px}
.preview-form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
#preview-download-form input:not([type="checkbox"]){display:block;width:100%;box-sizing:border-box;border:1px solid #66737b;background:#202930;color:white;border-radius:11px;padding:12px 13px;margin-top:8px;font:inherit;font-size:17px;min-height:47px}
#preview-download-form small{font-size:12px;color:#aeb9c1;padding-left:4px}
#preview-download-form .preview-consent{display:flex;align-items:start;gap:12px;margin:8px 0 22px;font-size:13px;line-height:1.6}
.preview-consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:#c5d1db}
.preview-consent a{color:#dbe4e9;text-decoration:underline;text-underline-offset:3px}
#preview-download-form .preview-download-submit{display:block;width:100%;border:0;border-radius:99px;background:var(--download-accent,#c8d4de);color:#141a1e;padding:17px 20px;font:inherit;font-size:16px;font-weight:700;cursor:pointer;white-space:normal}
#preview-download-form .piercing-small{font-size:12px!important;text-align:center;margin:14px 0 0!important}
#preview-download-error{font-size:14px;color:#f6c5bd}
@media(max-width:720px){.config-mode-intro{font-size:15px;margin-bottom:24px}.config-mode{max-width:320px}.config-mode button{font-size:17px;padding:12px 20px}.config-section[data-config-mode="piercing"] .canvas-viewport{inset:32px 8px 32px}.piercing-canvas-caption{top:10px;font-size:10px}.piercing-controls .control-step h3{font-size:23px}.piercing-choice button{font-size:15px}.piercing-small{font-size:14px!important}.jewelry-shapes button{min-width:62px;font-size:12px}.piercing-controls .control-step{padding:23px 0}.piercing-controls .control-step>b{font-size:13px}#preview-download-dialog{padding:35px 22px 24px}#preview-download-dialog h2{font-size:32px}.preview-form-row{gap:10px}#preview-download-form label{font-size:14px}}

.config-section .canvas-viewport>canvas{position:absolute;inset:0;min-width:0;min-height:0}