.cookie-builder{--cookie-paper:#f6f1e6;--cookie-teal:var(--teal-deep,#166876);padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--line,#d5ded7);scroll-margin-top:24px}
.cookie-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:32px}
.cookie-heading h2,.cookie-page-heading h1{font-size:clamp(40px,4.3vw,60px);max-width:650px;color:var(--cookie-teal,#166876)}
.cookie-heading>p,.cookie-page-heading p{max-width:420px;color:var(--muted,#53676a);font-size:16px;line-height:1.65}
.cookie-page-heading{padding-block:48px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.cookie-box-page .cookie-builder{border-top:0;padding-top:24px}.cookie-box-page .cookie-heading{display:none}
.cookie-layout{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.6fr);gap:32px;align-items:start}
.cookie-picker{display:grid;gap:18px}.cookie-visual{min-width:0}
.cookie-picker h3,.cookie-grid-title h3{font:400 24px/1.25 var(--display,'DM Serif Display',Georgia,serif);letter-spacing:-.015em}
.cookie-styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.cookie-style{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;justify-items:start;gap:3px 10px;min-height:86px;padding:12px 0;border:0;border-bottom:1px solid #dbd2c4;border-radius:0;background:transparent;color:var(--ink,#28383b);transition:background-color .18s}
.cookie-style:hover:not(:disabled){background:#f1f3ec}.cookie-style:active:not(:disabled){background:#e5efea}
.cookie-style strong{align-self:end;font-size:14px;font-weight:500;line-height:1.4}.cookie-style>small{grid-column:2;align-self:start;font-size:11px;line-height:1.5;color:#53676a}
.cookie-style .cookie-swatch{grid-row:1/3;width:52px;height:52px}.cookie-style:disabled{opacity:1;cursor:not-allowed}.cookie-style:disabled .cookie-swatch{opacity:.85}
.cookie-swatch{position:relative;display:block;width:48px;height:48px;border-radius:48%;background:#e5b87e;border:2px solid #c78a48;box-shadow:inset 0 -2px 0 #b67a40}
.cookie-swatch::after{content:'';position:absolute;inset:4px;border-radius:48%;background:radial-gradient(circle at 28% 25%,#5a3523 0 3px,transparent 4px),radial-gradient(circle at 70% 50%,#5a3523 0 3px,transparent 4px),radial-gradient(circle at 35% 75%,#5a3523 0 3px,transparent 4px)}
.cookie-swatch-pink::after{background:#e8a9bd}.cookie-swatch-teal::after{background:#8ec6c5}.cookie-swatch-sprinkle::after{background:radial-gradient(circle at 25% 25%,#e187a2 0 2px,transparent 3px),radial-gradient(circle at 70% 45%,#438d94 0 2px,transparent 3px),radial-gradient(circle at 35% 75%,#d49b45 0 2px,transparent 3px),#fff1d6}
.cookie-stage{position:relative;isolation:isolate;width:100%;height:clamp(440px,39vw,570px);background:#f3efe7;border:1px solid #d8d0c3;border-bottom:0;border-radius:4px 4px 0 0;overflow:hidden}
.cookie-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}.cookie-stage canvas:focus-visible{outline:3px solid var(--cookie-teal);outline-offset:-5px}
.cookie-view-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:10px 12px 18px;background:#f3efe7;border:1px solid #d8d0c3;border-top:0;border-radius:0 0 4px 4px}
.cookie-tools{display:flex;flex-wrap:wrap;gap:8px}
.cookie-tools button,.cookie-view-controls button{min-height:44px;background:#fffaf2;color:var(--cookie-teal);border:1px solid #c6c8be;border-radius:3px;padding:10px 14px;font-size:13px;line-height:1.3}
.cookie-tools button:hover:not(:disabled),.cookie-view-controls button:hover:not(:disabled){background:#eaf5f5;border-color:var(--cookie-teal)}
.cookie-view-controls [aria-pressed="true"]{background:var(--cookie-teal);color:#fffaf2;border-color:var(--cookie-teal)}
.cookie-view-controls button[aria-pressed="true"]:is(:hover,:focus-visible){background:#115b67;color:#fffaf2;border-color:#115b67}
.cookie-tools button:disabled,.cookie-view-controls button:disabled{opacity:.5;cursor:not-allowed}.cookie-remove-tools [data-cookie-undo]{min-width:76px}
.cookie-style:focus-visible,.cookie-tools button:focus-visible,.cookie-view-controls button:focus-visible{outline:3px solid var(--cookie-teal);outline-offset:3px}
.cookie-help{font-size:13px;color:var(--muted,#53676a);line-height:1.65}
.cookie-grid-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 12px}.cookie-grid-title output{font-size:14px;color:var(--cookie-teal);font-weight:600;font-variant-numeric:tabular-nums}
.cookie-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}.cookie-slots li{min-width:0}
.cookie-slot-button{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:62px;width:100%;padding:8px;border:1px solid #ddd5c9;border-radius:3px;background:#fbf8f1;color:var(--ink,#28383b);font-size:11px;line-height:1.3;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.cookie-slot-button[data-filled="false"]{border-style:dashed;background:transparent;color:var(--muted,#53676a)}.cookie-slot-button[data-filled="true"]{cursor:grab}
.cookie-slot-button[aria-pressed="true"]{border:2px solid var(--cookie-teal);background:#edf5f2}.cookie-slot-button:focus-visible{outline:3px solid var(--cookie-teal);outline-offset:3px}
.cookie-slot-number{font-size:10px;color:#687774;align-self:flex-start;min-width:10px}.cookie-slot-name{min-width:0;line-height:1.25}
.cookie-slot-art{display:block;width:33px;height:33px;flex:none;background:#e5b87e;border:1px solid #ca8e48;border-radius:48%}.cookie-slot-button[data-filled="false"] .cookie-slot-art{display:none}
.is-cookie-art.cookie-swatch,.cookie-slot-button[data-cookie-type] .cookie-slot-art.is-cookie-art{border:0;border-radius:0;box-shadow:none;background-color:transparent;background-size:contain;background-repeat:no-repeat;background-position:center;transform:none}.is-cookie-art.cookie-swatch::after{display:none}
.cookie-slots .is-drag-source{opacity:.55;border-style:dashed}.cookie-slots .is-drop-target{outline:3px solid var(--cookie-teal);outline-offset:1px;background:#e2efe8}.is-cookie-dragging .cookie-slot-button,.cookie-stage canvas.is-cookie-dragging{cursor:grabbing}
.cookie-drag-hint{margin:0 0 12px;color:var(--cookie-teal);font-size:13px;line-height:1.6}
.cookie-stage-feedback{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:9px 16px;border:1px solid #a3b7ab;border-radius:4px;background:#fffaf2;color:var(--cookie-teal);font:500 13px/1.4 var(--body,Jost,sans-serif);white-space:nowrap;pointer-events:none}
/* The drag preview is the only layer above the page; dialogs retain native top-layer ownership. */
.cookie-drag-preview{position:fixed;top:0;left:0;z-index:20;display:grid;grid-template-columns:38px auto;gap:2px 10px;width:max-content;max-width:210px;padding:10px 14px;border:1px solid #a2bbb2;border-radius:4px;background:#fffaf2;color:#28383b;box-shadow:0 5px 16px #28383b1f;font:500 13px/1.3 var(--body,Jost,sans-serif);pointer-events:none;will-change:transform}
.cookie-drag-preview .cookie-slot-art{grid-row:1/3;width:38px;height:38px}.cookie-drag-preview::after{content:attr(data-destination);grid-column:2;color:var(--cookie-teal);font-size:11px;white-space:nowrap}
.cookie-status{min-height:2.7em;font-size:14px;color:var(--cookie-teal);margin:14px 0 8px;line-height:1.5}
.cookie-disclaimer{font-size:12px;line-height:1.7;color:var(--muted,#53676a);max-width:580px}.cookie-entry-link{margin-top:12px;font-size:14px;text-decoration:underline;text-underline-offset:4px;display:inline-block;color:var(--cookie-teal)}
.cookie-storage-notice{font-size:12px;color:#805234;line-height:1.6}
.cookie-fallback{height:100%;display:grid;align-content:center;justify-items:center;gap:16px;padding:24px;text-align:center}.cookie-fallback>img{display:none}.cookie-fallback p{max-width:340px;font-size:14px;line-height:1.6}
.cookie-fallback-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:min(90%,480px);padding:20px;background:#ead7b6;border:7px solid #c9ad83;box-shadow:0 8px 18px #8a714229}
.cookie-fallback-position{display:grid;place-items:center;aspect-ratio:1;background:#fff7e5;color:#7c725e;font-size:12px}.cookie-fallback-position img{width:100%;height:100%;object-fit:contain}
.cookie-stage[data-cookie-renderer="3d"] .cookie-fallback,[data-cookie-box] [hidden]{display:none!important}
.cookie-shop-invite h2{font-size:30px;margin-bottom:12px}.cookie-shop-invite .button{flex-shrink:0}
@media(max-width:1100px){.cookie-layout{grid-template-columns:minmax(255px,.85fr) minmax(0,1.6fr);gap:24px}.cookie-heading{align-items:flex-start}.cookie-styles{gap:0 12px}.cookie-style{grid-template-columns:42px minmax(0,1fr);gap:3px 8px}.cookie-style .cookie-swatch{width:42px;height:42px}.cookie-style strong{font-size:12px}.cookie-slots button{flex-direction:column;align-items:center;min-height:75px;padding:6px}.cookie-slot-number{position:absolute;top:4px;left:5px}.cookie-stage{height:490px}}
@media(max-width:700px){.cookie-heading,.cookie-page-heading{display:block}.cookie-page-heading{padding-top:32px}.cookie-page-heading h1{font-size:42px}.cookie-heading h2{font-size:38px}.cookie-heading>p,.cookie-page-heading p{margin-top:14px;max-width:520px}.cookie-heading{margin-bottom:24px}.cookie-layout{grid-template-columns:1fr;gap:12px;grid-template-areas:'stage' 'view' 'pickheading' 'styles' 'mix' 'layoutheading' 'draghint' 'slots' 'status' 'help' 'remove' 'storage' 'disclaimer' 'entry'}.cookie-picker,.cookie-visual{display:contents}.cookie-stage{grid-area:stage;height:390px}.cookie-view-controls{grid-area:view;margin-top:-12px;padding:6px 8px 14px;gap:6px}.cookie-view-controls button{font-size:12px;padding:10px 12px}.cookie-picker>h3{grid-area:pickheading;margin-top:16px}.cookie-styles{grid-area:styles;gap:0 18px}.cookie-style{grid-template-columns:50px minmax(0,1fr);min-height:82px;gap:3px 10px;padding:12px 0}.cookie-style .cookie-swatch{width:50px;height:50px}.cookie-style strong{font-size:14px}.cookie-mix-tools{grid-area:mix}.cookie-tools button{flex-grow:1}.cookie-grid-title{grid-area:layoutheading;margin-top:16px}.cookie-grid-title h3,.cookie-picker h3{font-size:23px}.cookie-drag-hint{grid-area:draghint;margin:0}.cookie-slots{grid-area:slots}.cookie-slots button{min-height:76px}.cookie-slot-name{font-size:10px}.cookie-slots .cookie-slot-art{width:34px;height:34px}.cookie-status{grid-area:status}.cookie-picker>.cookie-help{grid-area:help;margin:4px 0}.cookie-remove-tools{grid-area:remove}.cookie-storage-notice{grid-area:storage}.cookie-disclaimer{grid-area:disclaimer}.cookie-entry-link{grid-area:entry}.cookie-fallback-slots{gap:8px;padding:12px}}
@media(max-width:360px){.cookie-stage{height:345px}.cookie-styles{gap:0 12px}.cookie-style{grid-template-columns:38px minmax(0,1fr);column-gap:7px}.cookie-style .cookie-swatch{width:38px;height:38px}.cookie-style strong{font-size:12px}.cookie-style>small{font-size:10px}.cookie-view-controls button{padding:10px;font-size:11px}.cookie-slot-name{font-size:9px}.cookie-slots{gap:6px}.cookie-page-heading h1{font-size:38px}}
@media(prefers-reduced-motion:reduce){.cookie-style,.cookie-style:hover{transition:none;transform:none}.cookie-drag-preview{box-shadow:none}}