*,*:before,*:after{box-sizing:border-box;margin:0}body{background:var(--bg-base);color:var(--ink);font-family:var(--font-ui);min-height:100vh;overflow-x:hidden}.preset-card,.howto,.save-preset-form,.my-presets-section{--ink-muted: var(--muted-on-card);--casing-red: var(--casing-red-on-card)}.hero{position:relative;padding:clamp(2rem,6vw,3.5rem) clamp(1rem,3vw,1.5rem) clamp(1.5rem,4vw,2.5rem);border-bottom:3px solid var(--casing-red);background:var(--bg-paper);color:var(--ink-on-paper);text-align:center;overflow:hidden}.hero__title{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.8rem);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-on-paper);line-height:var(--lh-tight)}.hero__subtitle{font-family:var(--font-prose);font-style:italic;font-size:clamp(.9rem,1.8vw,1.15rem);color:var(--ink-muted);max-width:52ch;margin:.65rem auto 0;line-height:1.45}.preset-grid-wrap{max-width:1200px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,1.5rem)}.preset-grid-label{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem}.preset-grid-label h2{font-family:var(--font-display);font-size:clamp(1rem,2.5vw,1.4rem);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}.preset-grid-label .count-badge{font-family:var(--font-stamp);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--casing-red);border:1.5px solid var(--casing-red);padding:.15rem .5rem}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}.preset-card{position:relative;background:var(--bg-card);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);text-decoration:none;color:var(--ink-on-card);display:flex;flex-direction:column;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.preset-card:nth-child(odd){transform:rotate(-.6deg)}.preset-card:nth-child(2n){transform:rotate(.5deg)}.preset-card:nth-child(3n){transform:rotate(.8deg)}.preset-card:hover{transform:rotate(0) translate(-2px,-3px)!important;box-shadow:7px 7px 0 var(--ink)}.preset-card:active{transform:rotate(0) translate(0)!important;box-shadow:3px 3px 0 var(--ink)}.preset-card__preview{position:relative;width:100%;aspect-ratio:16 / 10;background:var(--bg-base);border-bottom:2px solid var(--ink);overflow:hidden}.preset-card__preview canvas{display:block;width:100%;height:100%}.preset-card__stripe{position:absolute;bottom:0;left:0;right:0;height:4px}.preset-card__body{padding:1rem 1.2rem 1.2rem;flex:1;display:flex;flex-direction:column}.preset-card__sku{font-family:var(--font-stamp);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--casing-red);margin-bottom:.3rem}.preset-card__title{font-family:var(--font-display);font-size:clamp(1.05rem,2.2vw,1.3rem);text-transform:uppercase;letter-spacing:.02em;line-height:1.15;margin-bottom:.5rem}.preset-card__desc{font-family:var(--font-prose);font-size:.88rem;line-height:1.5;color:var(--ink-muted);margin-bottom:.7rem;flex:1}.preset-card__tags{display:flex;flex-wrap:wrap;gap:.35rem}.preset-card__tag{font-family:var(--font-stamp);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:.15rem .45rem;border:1.5px solid currentColor;line-height:1}.preset-card__tag--warp{color:var(--casing-red)}.preset-card__tag--motion{color:var(--butcher-twine)}.preset-card__tag--cap{color:#c14040}[data-shift=night]:not([data-brood=on]) .preset-card__tag--motion,:root[data-shift=auto]:not([data-brood=on]) .preset-card__tag--motion{color:#d7b06a}@media(prefers-color-scheme:dark){:root:not([data-shift]):not([data-brood=on]) .preset-card__tag--motion{color:#d7b06a}}[data-shift=night]:not([data-brood=on]) .preset-card__tag--cap,:root[data-shift=auto]:not([data-brood=on]) .preset-card__tag--cap{color:#ee5a47}@media(prefers-color-scheme:dark){:root:not([data-shift]):not([data-brood=on]) .preset-card__tag--cap{color:#ee5a47}}:root[data-brood=on] .preset-card__tag--motion,:root[data-brood=on] .preset-card__tag--cap{color:var(--brood-text)}.preset-card__tag--quote{color:var(--ink-muted)}.preset-card__badge{position:absolute;top:-.6rem;right:1rem;background:var(--brood-red);color:#fff;font-family:var(--font-stamp);font-size:.6rem;letter-spacing:.1em;padding:.2rem .6rem;border:2px solid var(--ink);text-transform:uppercase;z-index:2}:root[data-brood=on] .preset-card__badge{color:var(--brood-ridge)}.my-presets-section{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,3vw,1.5rem) clamp(1.5rem,4vw,3rem)}.my-presets-section .preset-grid-label{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem}.my-presets-section .preset-grid-label h2{font-family:var(--font-display);font-size:clamp(1rem,2.5vw,1.4rem);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}.save-preset-form{display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;flex-wrap:wrap}.save-preset-form input[type=text]{font-family:var(--font-prose);font-size:1rem;padding:.45rem .7rem;border:2px solid var(--ink);background:var(--bg-card);color:var(--ink-on-card);width:220px;outline:none;transition:border-color .15s}.save-preset-form input[type=text]:focus{border-color:var(--casing-red)}.save-preset-form input[type=text]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.save-preset-form input[type=text]::placeholder{color:var(--ink-muted);opacity:.6}.save-preset-form .save-btn,.save-preset-form .warp-select,.save-preset-form .motion-select,.save-preset-form .cap-select,.save-preset-form .quote-select{font-family:var(--font-stamp);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .65rem;border:2px solid var(--ink);background:var(--bg-card);color:var(--ink-on-card);cursor:pointer;transition:background .12s,color .12s}.save-preset-form .save-btn{background:var(--casing-red);color:var(--ink-on-accent);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}.save-preset-form .save-btn:hover{background:var(--brood-red)}.save-preset-form .save-btn:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.save-preset-form select{font-family:var(--font-stamp);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .45rem;border:2px solid var(--ink);background:var(--bg-card);color:var(--ink-on-card);cursor:pointer}.my-presets-empty{font-family:var(--font-prose);font-style:italic;font-size:.88rem;color:var(--ink-muted);padding:1.5rem 0;text-align:center}.preset-card__delete{position:absolute;top:.5rem;left:.6rem;width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);background:var(--bg-card);color:var(--casing-red);font-size:.75rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:2px 2px 0 var(--ink);transition:background .12s,transform .12s}.preset-card__delete:hover{background:var(--casing-red);color:#fff;transform:scale(1.12)}.preset-card__badge--custom{background:var(--butcher-twine)}.preset-card__share{position:absolute;top:.5rem;right:.6rem;width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);background:var(--bg-card);color:var(--ink-on-card);font-size:.65rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:2px 2px 0 var(--ink);transition:background .12s,transform .12s,color .12s}.preset-card__share:hover{background:var(--ink);color:var(--bg-base);transform:scale(1.12)}.preset-card__share:active{box-shadow:0 0 0 var(--ink);transform:translate(1px,1px)}.preset-card__share svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.share-toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%) translateY(100px);background:var(--ink);color:var(--bg-base);font-family:var(--font-stamp);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1.2rem;border:2px solid var(--casing-red);box-shadow:4px 4px #0003;z-index:100;opacity:0;transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s;pointer-events:none}.share-toast.visible{transform:translate(-50%) translateY(0);opacity:1}.howto{max-width:800px;margin:0 auto;padding:0 clamp(1rem,3vw,1.5rem) clamp(1.5rem,3vw,2.5rem);text-align:center}.howto__title{font-family:var(--font-display);font-size:clamp(.9rem,2vw,1.1rem);text-transform:uppercase;letter-spacing:.02em;margin-bottom:.6rem}.howto__text{font-family:var(--font-prose);font-size:.88rem;line-height:1.55;color:var(--ink-muted)}.howto__text code{font-family:SF Mono,Fira Code,monospace;font-size:.8rem;background:var(--bg-elevated);padding:.1rem .35rem;border:1px solid color-mix(in oklch,var(--ink) 15%,transparent)}@media(max-width:700px){.preset-grid{grid-template-columns:1fr}.preset-card:nth-child(n){transform:rotate(0)}}