.pins-page-content{margin-top:var(--layout-section-gap);padding-bottom:28px}.enamel-pins{--enamel-stage-height:clamp(240px, 40svh, 360px);--enamel-toolbar-height:60px;font-family:var(--font-body);color:var(--text-primary)}.enamel-preview{top:calc(-1 * var(--layout-hero-inset-top));z-index:1;background:var(--surface-page);min-width:0;position:sticky}.enamel-stage{height:var(--enamel-stage-height);isolation:isolate;position:relative}.enamel-canvas{touch-action:pan-y;cursor:grab;border-radius:4px;position:absolute;inset:0}.enamel-canvas[data-dragging=true]{cursor:grabbing}.enamel-canvas[data-mode=light]{cursor:crosshair}.enamel-canvas canvas{opacity:0;width:100%;height:100%;transition:opacity .18s;display:block}.enamel-stage[data-ready=true] canvas{opacity:1}.enamel-fallback{object-fit:contain;opacity:.4;width:58%;height:78%;margin:auto;position:absolute;inset:0}.enamel-stage[data-ready=true] .enamel-fallback{opacity:0}.enamel-toolbar{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 0;display:grid}.enamel-artwork-controls,.enamel-actions{align-items:center;gap:4px;display:flex}.enamel-artwork-controls{justify-self:start}.enamel-actions{justify-self:end}.enamel-pins button{color:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;min-height:40px;padding:8px 12px;font-family:inherit;font-size:12px;font-weight:400;transition:background .14s,border-color .14s}.enamel-toolbar button{flex-shrink:0;place-items:center;width:44px;height:44px;padding:0;display:grid}.enamel-toolbar svg{width:20px;height:20px}.enamel-pins button:hover:not(:disabled){background:color-mix(in srgb, var(--text-primary) 6%, transparent)}.enamel-pins button[aria-pressed=true]{border-color:color-mix(in srgb, var(--text-primary) 35%, transparent)}.enamel-pins .enamel-toolbar button[aria-pressed=true]{background:color-mix(in srgb, var(--text-primary) 8%, transparent);border-color:#0000}.enamel-pins button:disabled{opacity:.35;cursor:default}.enamel-pins :is(button,summary,input):focus-visible{outline:2px solid var(--text-primary);outline-offset:4px}.enamel-canvas:focus{outline:none}.enamel-editor{gap:32px;min-width:0;margin-top:32px;display:grid}.enamel-editor :is(input,button,summary){scroll-margin-top:calc(var(--enamel-stage-height) + var(--enamel-toolbar-height) + 28px)}.enamel-editor>section+section{border-top:1px solid color-mix(in srgb, var(--text-primary) 16%, transparent);padding-top:20px}.enamel-help{color:var(--text-secondary);margin:10px 0 0;font-size:12px;line-height:1.6}.enamel-pins .enamel-download{justify-content:space-between;align-items:center;width:100%;min-height:46px;padding-inline:14px;font-size:13px;display:flex}.enamel-preview[data-dragging=true]{outline:2px dashed var(--text-primary);outline-offset:8px}.enamel-samples{gap:4px;display:flex}.enamel-samples button{width:40px;height:40px;padding:5px}.enamel-samples img{width:100%;height:100%;display:block}.enamel-finishes{border:0;justify-self:center;gap:4px;min-width:0;margin:0;padding:0;display:flex}.enamel-finishes i{background:linear-gradient(135deg,#6f777e,#e3e7e3 45%,#929d9e);border:1px solid #797c78;border-radius:50%;flex-shrink:0;width:18px;height:18px}.enamel-finishes i[data-metal=gold]{background:linear-gradient(135deg,#a67c36,#f0d68e 45%,#b58a48);border-color:#ab8547}.enamel-finishes i[data-metal=black]{background:linear-gradient(135deg,#252b31,#818b8c 45%,#31373d)}.enamel-sliders{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;display:grid}.enamel-sliders label{grid-template-rows:1fr 20px;gap:8px;min-width:0;font-size:12px;display:grid}.enamel-sliders label>span{justify-content:space-between;align-items:center;gap:8px;display:flex}.enamel-sliders output{white-space:nowrap;color:var(--text-secondary);font-variant-numeric:tabular-nums;flex-shrink:0}.enamel-sliders input{width:100%;min-width:0;height:20px;accent-color:var(--text-primary);cursor:pointer;margin:0}.enamel-mask{margin-top:20px}.enamel-mask summary{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;font-size:12px;list-style:none;display:flex}.enamel-mask summary::-webkit-details-marker{display:none}.enamel-mask summary>span{font-size:18px;line-height:1}.enamel-mask[open] summary>span{transform:rotate(45deg)}.enamel-mask-actions,.enamel-design-actions{flex-wrap:wrap;gap:4px;margin:12px -12px 0;display:flex}.enamel-design-actions{justify-content:space-between}.enamel-design-actions button{text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb, var(--text-primary) 30%, transparent);text-decoration-color:color-mix(in srgb, var(--text-primary) 30%, transparent);text-underline-offset:4px}.enamel-pins .enamel-download{background:var(--text-primary);color:var(--surface-page)}.enamel-pins .enamel-download:hover:not(:disabled){background:color-mix(in srgb, var(--text-primary) 85%, var(--surface-page))}.enamel-file{display:none}.enamel-error{overflow-wrap:anywhere;border-left:2px solid;margin:0;padding-left:12px;font-size:12px;line-height:1.6}@media (max-width:747px){.enamel-pins{--enamel-toolbar-height:112px}.enamel-toolbar{grid-template-columns:1fr 1fr}.enamel-artwork-controls{grid-column:1/-1}.enamel-finishes{justify-self:start}}@media (max-width:640px){.pins-page-content{padding-bottom:max(24px, env(safe-area-inset-bottom))}.enamel-pins{--enamel-stage-height:clamp(220px, 34svh, 300px)}.enamel-preview{position:relative;top:auto}.enamel-toolbar{gap:12px 8px}.enamel-artwork-controls{gap:12px;width:100%;min-width:0}.enamel-samples{overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;flex:1;gap:8px;min-width:0;margin:-4px;padding:4px;overflow-x:auto}.enamel-samples::-webkit-scrollbar{display:none}.enamel-toolbar .enamel-samples button{scroll-snap-align:start;width:44px;height:44px;padding:5px}.enamel-samples button:focus-visible{outline-offset:-2px}.enamel-editor{gap:24px;margin-top:24px}.enamel-editor :is(input,button,summary){scroll-margin-top:24px}.enamel-pins button,.enamel-mask summary{min-height:44px}.enamel-editor button,.enamel-mask summary,.enamel-help,.enamel-error{font-size:16px}.enamel-help,.enamel-error{line-height:1.5}.enamel-sliders label{grid-template-rows:1fr 44px;gap:4px;font-size:16px}.enamel-sliders input{height:44px}.enamel-sliders label>span{flex-direction:column;align-items:flex-start;gap:4px}.enamel-design-actions{grid-template-columns:1fr;justify-items:start;gap:4px;display:grid}.enamel-pins .enamel-download{min-height:48px;font-size:16px}}@media (max-width:480px){.enamel-sliders{grid-template-columns:1fr;gap:12px}.enamel-sliders label>span{flex-direction:row;justify-content:space-between;align-items:center}}@media (max-height:600px){.enamel-preview{position:relative;top:auto}.enamel-editor :is(input,button,summary){scroll-margin-top:24px}}@media (max-width:960px) and (max-height:600px) and (orientation:landscape){.enamel-pins{--enamel-stage-height:clamp(160px, 48svh, 220px)}}@media (prefers-reduced-motion:reduce){.enamel-pins *,.enamel-pins :before,.enamel-pins :after{transition:none!important}}
