/* Trusted, composable visual styles. Theme ZIPs only select these named options. */
:root{--highlight:#edd38d;--on-highlight:#233c31}
.skip-link{position:fixed;left:16px;top:-100px;z-index:100;background:var(--surface);color:var(--ink);padding:14px;border:2px solid currentColor;border-radius:8px}
.skip-link:focus{top:16px}
#content{scroll-margin-top:145px;outline:none}
#hero h1{overflow-wrap:anywhere}
header{position:relative;z-index:10}
header nav button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
header nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
header nav button[aria-current=page]{background:var(--green);color:var(--on-primary)}
.brand-flower,.hero-emblem,.hero-sparks{display:none}
button{touch-action:manipulation}
textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* Buttons: soft pop bubbles, perforated tickets, and little gift boxes. */
body:not([data-button-style=classic]) :where(.hero-links,#app,#modal) button:not(#close){min-height:44px;font-weight:700;position:relative}
[data-button-style=bubble] :where(.hero-links,#app,#modal) button:not(#close){border-radius:32px 32px 26px 26px;border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink);padding-inline:22px}
[data-button-style=ticket] :where(.hero-links,#app,#modal) button:not(#close){border-radius:4px 16px 4px 16px;border:2px solid currentColor;box-shadow:5px 5px 0 var(--accent);padding-inline:24px}
[data-button-style=ticket] :where(.hero-links,#app,#modal) button:not(#close)::after{content:'';position:absolute;inset:7px;pointer-events:none;border-inline:1px dashed currentColor;opacity:.55}
[data-button-style=jewel] :where(.hero-links,#app,#modal) button:not(#close){border-radius:8px 22px 8px 22px;border:1px solid currentColor;box-shadow:inset 0 0 0 3px var(--green),inset 0 0 0 4px currentColor,0 4px 0 var(--ink);padding:15px 24px}
body:not([data-button-style=classic]) .hero-links{gap:16px;margin-top:30px}
body:not([data-button-style=classic]) .hero-links button{font-size:14px;padding:15px 22px}
body:not([data-button-style=classic]) .hero-links .secondary{background:var(--highlight);color:var(--on-highlight);border-color:var(--on-highlight)}
body:not([data-button-style=classic]) :where(.hero-links,#app,#modal) button:active:not(:disabled,#close){translate:0 3px;box-shadow:none}

/* Navigation remains in normal reading order, with clear active and keyboard states. */
[data-navigation-style=capsules] header nav{gap:12px;flex-wrap:wrap}
[data-navigation-style=capsules] header nav button{border:2px solid var(--ink);border-radius:50px;padding:12px 20px;background:var(--surface);box-shadow:3px 3px 0 var(--ink);font-weight:700}
[data-navigation-style=capsules] header nav button:nth-child(2){rotate:-3deg}
[data-navigation-style=capsules] header nav button[aria-current=page]{background:var(--highlight);color:var(--on-highlight)}
[data-navigation-style=floating] header{position:sticky;top:12px;margin:18px auto 28px;width:calc(100% - 8%);max-width:1440px;min-height:86px;padding:16px 26px;border:1px solid var(--accent);border-radius:25px;background:var(--surface);box-shadow:0 0 0 5px var(--paper),0 12px 0 -5px var(--accent)}
[data-navigation-style=floating] header nav{gap:8px;padding:6px;border-radius:18px;border:1px solid var(--line);background:var(--paper)}
[data-navigation-style=floating] header nav button{border:0;border-radius:12px;padding:12px 18px;font-weight:700}
[data-navigation-style=floating] header nav button[aria-current=page]{background:var(--highlight);color:var(--on-highlight);box-shadow:0 0 18px color-mix(in srgb,var(--highlight) 25%,transparent)}
[data-navigation-style=ribbon] header{flex-wrap:wrap;justify-content:center;padding-bottom:12px;border-bottom:0;gap:22px}
[data-navigation-style=ribbon] header .brand{margin-right:auto}
[data-navigation-style=ribbon] header nav{position:relative;gap:8px;padding:8px 18px;background:var(--green);color:var(--on-primary);border-radius:8px;border:1px solid var(--green);outline:1px dashed var(--on-primary);outline-offset:-5px;box-shadow:6px 6px 0 var(--highlight)}
[data-navigation-style=ribbon] header nav::before,[data-navigation-style=ribbon] header nav::after{content:'';position:absolute;top:13px;bottom:-13px;width:22px;background:var(--green);z-index:-1;pointer-events:none}
[data-navigation-style=ribbon] header nav::before{left:-13px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,30% 50%)}
[data-navigation-style=ribbon] header nav::after{right:-13px;clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%)}
[data-navigation-style=ribbon] header nav button{color:var(--on-primary);border:0;border-radius:5px;padding:12px 18px;font-weight:650}
[data-navigation-style=ribbon] header nav button[aria-current=page]{background:var(--highlight);color:var(--on-highlight)}

/* Large organic cutouts and frames give the illustrations a different silhouette. */
body:not([data-shape-style=classic]) .brand-flower{display:grid;place-items:center;width:42px;height:42px;background:var(--highlight);color:var(--on-highlight);border-radius:50%;font-size:36px;font-weight:400;line-height:1;rotate:-12deg;flex:none}
body:not([data-shape-style=classic]) #hero{border:2px solid var(--ink);box-shadow:8px 10px 0 var(--soft)}
body:not([data-shape-style=classic]) .hero-copy{padding-block:48px 78px}
body:not([data-shape-style=classic]) #hero .eyebrow{display:inline-block;justify-self:start;padding:8px 13px;border:1px solid currentColor;border-radius:40px;font-weight:750;letter-spacing:1.5px;rotate:-2deg;background:var(--highlight);color:var(--on-highlight)}
body:not([data-shape-style=classic]) .hero-caption{padding-block:16px;font-size:11px;border-top:2px solid var(--ink);font-weight:650}
[data-shape-style=organic] #hero{border-radius:50px 90px 36px 75px;background:var(--hero-from)}
[data-shape-style=organic] .hero-image{inset:25px 2% 70px 47%;width:51%;height:calc(100% - 95px);border-radius:46% 48% 36% 50% / 38% 34% 55% 50%;border:5px solid var(--ink);rotate:3deg}
[data-shape-style=organic] .hero-copy{background:transparent;margin-right:-12px}
[data-shape-style=organic] .hero-visual{display:none}
[data-shape-style=angular] #hero{border-radius:8px 70px 8px 50px}
[data-shape-style=angular] .hero-copy{border:2px solid var(--accent);border-radius:5px 48px 5px 32px;box-shadow:9px 9px 0 var(--accent);background:var(--surface)}
[data-shape-style=angular] .hero-image{clip-path:polygon(0 0,100% 0,100% 88%,88% 100%,0 100%)}
[data-shape-style=arched] #hero{border-radius:28px 28px 120px 28px;background:var(--hero-from)}
[data-shape-style=arched] .hero-image{inset:22px 3% 65px 51%;width:46%;height:calc(100% - 87px);border:7px double var(--highlight);border-radius:48% 48% 12px 12px;box-shadow:0 0 0 2px var(--ink)}
[data-shape-style=arched] .hero-copy{background:transparent;margin-right:0}
[data-shape-style=arched] .hero-visual{display:none}
[data-shape-style=arched] .hero-caption{background:var(--green);color:var(--on-primary);padding-right:100px}
.hero-caption span:last-child{max-width:65%;text-align:right;overflow-wrap:anywhere}
/* Preserve each selected composition when pairing it with a shape. */
[data-layout=editorial]:is([data-shape-style=organic],[data-shape-style=arched]) .hero-image{position:relative;inset:auto;align-self:center;width:90%;height:320px;margin:10px auto 30px;border-radius:100px 100px 20px 20px;rotate:0}
[data-layout=editorial][data-shape-style=angular] .hero-copy{margin:25px}
[data-layout=cover]:is([data-shape-style=organic],[data-shape-style=arched]) .hero-copy{background:var(--surface);border-radius:35px}

/* Bold titles, offset highlights and decorative typography. */
[data-heading-style=poster] #hero h1{font-family:var(--heading-font);font-weight:900;font-size:clamp(38px,4.9vw,74px);line-height:1.04;letter-spacing:-2.8px}
[data-heading-style=poster] #hero h1 em{font-style:normal;text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:7px;text-decoration-color:var(--highlight)}
[data-heading-style=poster] .content h2{font-weight:850;letter-spacing:-1.5px}
[data-heading-style=storybook] #hero h1{font-size:clamp(42px,5vw,76px);line-height:1.05;font-weight:600;letter-spacing:-2px}
[data-heading-style=storybook] #hero h1 em{display:inline-block;font-weight:400;letter-spacing:-3px;rotate:-3deg}
[data-heading-style=storybook] .content h2{font-style:italic}
body:not([data-heading-style=classic]) #hero-intro{max-width:40ch}

/* Decorative patterns use CSS and trusted embedded SVG: no external requests or scripts. */
:where(body):not([data-pattern=none]) main::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16}
[data-pattern=confetti] main::after{background-image:radial-gradient(circle at 12px 20px,var(--accent) 3px,transparent 4px),radial-gradient(ellipse at 60px 85px,var(--green) 2px,transparent 3px),linear-gradient(40deg,transparent 48%,var(--highlight) 49% 51%,transparent 52%);background-size:110px 125px,150px 140px,260px 260px}
[data-pattern=stars] main::after{background-image:radial-gradient(circle at 17px 25px,var(--highlight) 1.5px,transparent 2.5px),radial-gradient(circle at 100px 80px,var(--accent) 2px,transparent 3px);background-size:170px 140px,230px 190px;opacity:.4}
[data-pattern=sparkles] main::after{background-image:radial-gradient(ellipse 2px 7px at 25px 35px,var(--accent) 75%,transparent 90%),radial-gradient(ellipse 7px 2px at 25px 35px,var(--accent) 75%,transparent 90%);background-size:150px 140px;opacity:.22}
:where(body):not([data-pattern=none]) .hero-emblem{display:grid;place-items:center;position:absolute;right:5%;top:40px;width:112px;height:112px;z-index:3;pointer-events:none;background:var(--highlight);color:var(--on-highlight);clip-path:polygon(50% 0,60% 20%,80% 7%,79% 31%,100% 35%,83% 50%,100% 65%,78% 69%,80% 93%,60% 80%,50% 100%,40% 80%,20% 93%,21% 69%,0 65%,17% 50%,0 35%,22% 31%,20% 7%,40% 20%);rotate:12deg}
.hero-emblem span{font-size:70px;line-height:1}
[data-pattern=stars] .hero-emblem{top:auto;bottom:76px;right:5%;width:90px;height:90px;rotate:-12deg}
[data-pattern=sparkles] .hero-emblem{width:95px;height:95px;top:38px;right:41%;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%)}
[data-pattern=sparkles] .hero-emblem span{display:none}
:where(body):not([data-pattern=none]) .hero-sparks{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-sparks i{position:absolute;width:24px;height:24px;right:35%;top:10%;background:var(--highlight);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.hero-sparks i:nth-child(2){right:6%;top:55%;width:38px;height:38px;rotate:15deg}
.hero-sparks i:nth-child(3){right:32%;top:80%;width:18px;height:18px;rotate:-12deg}
[data-pattern=confetti] .hero-sparks i:nth-child(2){border-radius:50%;clip-path:none;background:var(--accent)}

/* BEGIN GHOST PATTERNS — generated by scripts/build-ghost-patterns.py */
:is(body[data-pattern=ghosts-cute] main,.theme-pattern-preview[data-pattern=ghosts-cute])::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22420%22%20height%3D%22340%22%20viewBox%3D%220%200%20420%20340%22%3E%3Cdefs%3E%3Cg%20id%3D%22little-ghost%22%20stroke%3D%22%23776095%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20fill%3D%22%23fffafc%22%20d%3D%22M25%2088C17%2094%205%2092%205%2083C5%2075%2019%2069%2023%2060V43C23%2018%2039%205%2059%205S96%2019%2096%2043V58C100%2065%20113%2068%20115%2077C117%2089%20108%2093%2097%2089L101%20116Q91%20110%2082%20119Q72%20128%2062%20118Q53%20110%2043%20121Q33%20130%2025%20118Z%22%2F%3E%3Cpath%20fill%3D%22%23e7ddf7%22%20stroke%3D%22none%22%20d%3D%22M31%2090Q38%20110%2048%20109Q56%20106%2062%20114Q74%20122%2083%20114Q89%20109%2096%20111L94%20119Q86%20115%2081%20123Q70%20130%2061%20121Q51%20114%2044%20123Q34%20129%2029%20118Z%22%2F%3E%3Cellipse%20cx%3D%2243%22%20cy%3D%2255%22%20rx%3D%225%22%20ry%3D%227%22%20fill%3D%22%23514066%22%20stroke%3D%22none%22%2F%3E%3Cellipse%20cx%3D%2276%22%20cy%3D%2255%22%20rx%3D%225%22%20ry%3D%227%22%20fill%3D%22%23514066%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2253%22%20r%3D%221.8%22%20fill%3D%22%23fff%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2277%22%20cy%3D%2253%22%20r%3D%221.8%22%20fill%3D%22%23fff%22%20stroke%3D%22none%22%2F%3E%3Cellipse%20cx%3D%2234%22%20cy%3D%2269%22%20rx%3D%229%22%20ry%3D%225%22%20fill%3D%22%23f5a4bb%22%20stroke%3D%22none%22%2F%3E%3Cellipse%20cx%3D%2286%22%20cy%3D%2269%22%20rx%3D%229%22%20ry%3D%225%22%20fill%3D%22%23f5a4bb%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M51%2070Q60%2082%2069%2070%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M43%2024Q50%2018%2058%2018%22%20stroke%3D%22%23fff%22%20stroke-width%3D%225%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Cpath%20id%3D%22twinkle%22%20d%3D%22M0-7%202-2%207%200%202%202%200%207-2%202-7%200-2-2Z%22%2F%3E%3Cpath%20id%3D%22heart%22%20d%3D%22M0%203C-13-5-7-14%200-8C7-14%2013-5%200%203Z%22%2F%3E%3C%2Fdefs%3E%3Cuse%20href%3D%22%23little-ghost%22%20transform%3D%22translate%2833%2024%29%20rotate%28-12%2060%2065%29%20scale%28.86%29%22%2F%3E%3Cuse%20href%3D%22%23little-ghost%22%20transform%3D%22translate%28249%20169%29%20rotate%2813%2060%2065%29%20scale%28.78%29%22%2F%3E%3Cg%20transform%3D%22translate%28300%2029%29%20rotate%288%2035%2040%29%22%20stroke%3D%22%23776095%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M8%2066V30C8%202%2058%200%2062%2030L66%2075Q56%2066%2048%2076Q39%2082%2032%2073Q22%2080%2015%2073Q8%2078%208%2066Z%22%20fill%3D%22%23fffafc%22%2F%3E%3Cpath%20d%3D%22M20%2036Q25%2030%2030%2036M42%2036Q47%2030%2052%2036M30%2049Q36%2055%2042%2049%22%20fill%3D%22none%22%2F%3E%3Cellipse%20cx%3D%2219%22%20cy%3D%2246%22%20rx%3D%226%22%20ry%3D%223.5%22%20fill%3D%22%23f5a4bb%22%20stroke%3D%22none%22%2F%3E%3Cellipse%20cx%3D%2253%22%20cy%3D%2246%22%20rx%3D%226%22%20ry%3D%223.5%22%20fill%3D%22%23f5a4bb%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23baa0dc%22%3E%3Cuse%20href%3D%22%23twinkle%22%20x%3D%22189%22%20y%3D%2239%22%2F%3E%3Cuse%20href%3D%22%23twinkle%22%20x%3D%22151%22%20y%3D%22172%22%2F%3E%3Cuse%20href%3D%22%23twinkle%22%20x%3D%2263%22%20y%3D%22264%22%2F%3E%3Cuse%20href%3D%22%23twinkle%22%20x%3D%22379%22%20y%3D%22206%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23e7a2b9%22%3E%3Cuse%20href%3D%22%23heart%22%20x%3D%22186%22%20y%3D%22274%22%2F%3E%3Cuse%20href%3D%22%23heart%22%20x%3D%22387%22%20y%3D%22119%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23b3cba6%22%3E%3Ccircle%20cx%3D%22223%22%20cy%3D%22116%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%22188%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22359%22%20cy%3D%22317%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:420px 340px;opacity:.28}
:is(body[data-pattern=ghosts-scary] main,.theme-pattern-preview[data-pattern=ghosts-scary])::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22420%22%20height%3D%22340%22%20viewBox%3D%220%200%20420%20340%22%3E%3Cdefs%3E%3Cg%20id%3D%22spectre%22%20stroke%3D%22%23716480%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20fill%3D%22%23ded7e8%22%20d%3D%22M24%2065%208%2060%203%2073%206%2046%2025%2048C24%2024%2038%2010%2059%201C71%2016%2096%2018%2097%2049L115%2040%20124%2064%20114%2058%20100%2070%20108%20107%2093%20100%20104%20138%2076%20119%2071%20147%2059%20125%2040%20143%2043%20116%2017%20131%2026%20101%2013%20105Z%22%2F%3E%3Cpath%20fill%3D%22%23b0a2bf%22%20stroke%3D%22none%22%20d%3D%22M59%204C39%2027%2044%2045%2035%2062L41%2092%2033%20115%2049%20102%2047%20130%2060%20114%2068%20130%2073%20102%2090%20118%2083%2089%2096%20105%2091%2070C98%2039%2078%2021%2059%204Z%22%2F%3E%3Cpath%20fill%3D%22%2334283e%22%20d%3D%22M31%2049%2053%2058%2049%2069%2034%2065ZM86%2049%2065%2058%2068%2069%2084%2065Z%22%20stroke%3D%22none%22%2F%3E%3Cpath%20fill%3D%22%23ed485c%22%20d%3D%22M35%2054%2050%2060%2045%2064%2036%2061ZM82%2054%2068%2060%2072%2064%2081%2061Z%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M38%2082%2048%2086%2058%2082%2069%2086%2081%2080%2074%20104%2061%20111%2046%20102Z%22%20fill%3D%22%2334283e%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M44%2086%2051%2089%2048%2098ZM59%2085%2065%2088%2061%2098ZM73%2086%2079%2082%2075%2095ZM54%20105%2060%20108%2059%20100ZM66%20108%2072%20103%2067%2098Z%22%20fill%3D%22%23fff5ef%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M33%2039%2050%2045M86%2039%2069%2045%22%20fill%3D%22none%22%20stroke%3D%22%23716480%22%20stroke-width%3D%223%22%2F%3E%3C%2Fg%3E%3Cpath%20id%3D%22rift%22%20d%3D%22M0%200%208%2011%203%2017%2014%2028%209%2013%2014%209Z%22%2F%3E%3C%2Fdefs%3E%3Cuse%20href%3D%22%23spectre%22%20transform%3D%22translate%2827%2017%29%20rotate%28-14%2062%2074%29%20scale%28.9%29%22%2F%3E%3Cuse%20href%3D%22%23spectre%22%20transform%3D%22translate%28242%20169%29%20rotate%2814%2062%2074%29%20scale%28.85%29%22%2F%3E%3Cg%20transform%3D%22translate%28303%2022%29%20rotate%2812%2034%2043%29%22%20stroke%3D%22%23716480%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2051C-1%2024%2019%2011%2034%200C51%2017%2070%2012%2062%2048L72%2078%2053%2069%2056%2092%2034%2076%2018%2091%2019%2070%200%2078Z%22%20fill%3D%22%23ded7e8%22%2F%3E%3Cpath%20d%3D%22M14%2036%2031%2043%2026%2051%2016%2047ZM55%2036%2038%2043%2043%2051%2053%2047Z%22%20fill%3D%22%2334283e%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M18%2040%2027%2044%2024%2046ZM51%2040%2042%2044%2045%2046Z%22%20fill%3D%22%23ed485c%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M25%2061%2034%2055%2044%2061%2037%2072%2030%2070Z%22%20fill%3D%22%2334283e%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%239d7ba6%22%20opacity%3D%22.8%22%3E%3Cuse%20href%3D%22%23rift%22%20x%3D%22177%22%20y%3D%2231%22%2F%3E%3Cuse%20href%3D%22%23rift%22%20x%3D%2251%22%20y%3D%22248%22%2F%3E%3Cuse%20href%3D%22%23rift%22%20x%3D%22374%22%20y%3D%22159%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%239988ac%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M162%20192Q189%20175%20210%20188M170%20200Q187%20189%20199%20195M132%20291Q158%20278%20175%20286%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23b96580%22%3E%3Ccircle%20cx%3D%22223%22%20cy%3D%22108%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%22183%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22378%22%20cy%3D%22306%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:420px 340px;opacity:.28}
.theme-pattern-label{margin:18px 0 8px;font-size:13px;font-weight:650}
.theme-pattern-preview{position:relative;isolation:isolate;overflow:hidden;height:240px;border:1px solid var(--line);border-radius:12px}
.theme-pattern-preview>svg{position:absolute;inset:0;z-index:-2;display:block}
.theme-pattern-preview::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.theme-pattern-preview[data-pattern]::after{opacity:.7}
@media(max-width:620px){:is(body[data-pattern=ghosts-cute] main,body[data-pattern=ghosts-scary] main,.theme-pattern-preview)::after{background-size:336px 272px}}
/* END GHOST PATTERNS */

/* Playful content cards and chips, with stable rectangular form controls. */
[data-card-style=sticker] #results{gap:30px;padding:8px 6px}
[data-card-style=sticker] #results .card{border:2px solid var(--ink);border-radius:28px 8px 28px 8px;box-shadow:6px 7px 0 var(--highlight)}
[data-card-style=sticker] #results .card:nth-child(3n+1){rotate:-1deg}
[data-card-style=sticker] #results .card:nth-child(3n+2){rotate:1deg;border-radius:8px 28px 8px 28px}
body:not([data-shape-style=classic]) .tag{border:1px solid var(--on-highlight);background:var(--highlight);color:var(--on-highlight);border-radius:20px;font-weight:750}
body:not([data-shape-style=classic]) .empty{position:relative;border:2px dashed var(--ink);border-radius:30px;background:var(--surface);padding:52px 28px;font-size:18px}
body:not([data-shape-style=classic]) .content>.row,body:not([data-shape-style=classic]) #app>.row{padding:12px 0}
body:not([data-shape-style=classic]) .tools input[type=search]{border:2px solid var(--ink);border-radius:40px;background:var(--surface);padding:15px 24px}
body:not([data-shape-style=classic]) .tabs button[aria-pressed=true]{background:var(--highlight);color:var(--on-highlight)}
body:not([data-shape-style=classic]) footer{border-top:2px solid var(--ink);background:var(--green);color:var(--on-primary);margin-top:20px;padding-block:32px}

/* Compact library previews share the same style vocabulary. */
.theme-preview[data-preview-shape=organic]{border-radius:28px 45px 0 0}
.theme-preview[data-preview-shape=organic] .theme-preview-hero{border-radius:30px 12px 36px 12px;border:2px solid var(--preview-ink)}
.theme-preview[data-preview-shape=angular] .theme-preview-hero{border:2px solid var(--preview-accent);border-radius:0 28px 0 20px;box-shadow:5px 5px 0 var(--preview-accent)}
.theme-preview[data-preview-shape=arched]>img{border-radius:80px 80px 0 0}
.theme-preview[data-preview-heading=poster] .theme-preview-title{font-weight:900;font-family:var(--preview-heading-font)}
.theme-preview[data-preview-button=bubble] .theme-preview-button{border-radius:30px;border:1px solid var(--preview-ink);box-shadow:0 3px 0 var(--preview-ink)}
.theme-preview[data-preview-button=ticket] .theme-preview-button{border-radius:0 10px 0 10px;border:1px dashed currentColor;box-shadow:3px 3px 0 var(--preview-accent)}
.theme-preview[data-preview-button=jewel] .theme-preview-button{border:3px double currentColor;border-radius:4px 12px 4px 12px}
.theme-style-note{line-height:1.7;padding:16px;border:1px dashed var(--line);border-radius:10px}

/* Animation is optional; all controls also work with touch and without motion. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 [data-motion=on] :where(header nav,.hero-links,#app) button{transition:translate .18s,rotate .18s,box-shadow .18s}
 [data-motion=on] :where(header nav,.hero-links,#app) button:hover:not(:disabled){translate:0 -3px;rotate:-1deg}
}
@keyframes emblem-wiggle{0%,100%{rotate:8deg}50%{rotate:18deg}}
[data-motion=on] .hero-emblem{animation:emblem-wiggle 7s ease-in-out infinite}
[data-motion=off] .card{transition:none}[data-motion=off] .card:hover{transform:none}
@media(prefers-reduced-motion:reduce){.hero-emblem{animation:none!important}button{transition:none!important}}
@media(max-width:1000px){
 header{gap:16px;flex-wrap:wrap;justify-content:center}
 header .brand{margin-right:auto}
 header nav{gap:8px}
 [data-navigation-style=capsules] header nav button{padding-inline:14px}
 [data-navigation-style=floating] header{position:relative;top:auto}
 :where(body):not([data-pattern=none]) .hero-emblem{width:76px;height:76px}
 .hero-emblem span{font-size:50px}
 [data-heading-style=poster] #hero h1{font-size:48px}
}
@media(max-width:700px){
 header{padding:20px 5%;gap:20px}
 header .brand{margin:auto}
 header nav{width:100%;justify-content:center;flex-wrap:nowrap}
 header nav button{flex:1;min-width:0;padding:10px;font-size:12px}
 [data-navigation-style=capsules] header nav{gap:9px}
 [data-navigation-style=capsules] header nav button{padding:11px 7px}
 [data-navigation-style=floating] header{position:relative;top:auto;padding:18px 14px;width:92%}
 [data-navigation-style=floating] header nav button{padding:10px 6px}
 [data-navigation-style=ribbon] header .brand{margin:auto}
 [data-navigation-style=ribbon] header nav{padding:8px;gap:2px}
 [data-navigation-style=ribbon] header nav button{padding:10px 5px}
 #content{scroll-margin-top:24px}
}
@media(max-width:620px){
 body:not([data-shape-style=classic]) #hero{border-radius:30px 45px 24px 30px;box-shadow:4px 6px 0 var(--soft);margin-inline:5%}
 :is([data-shape-style=organic],[data-shape-style=arched]) .hero-image{position:relative;inset:auto;width:88%;height:260px;margin:20px auto 10px;align-self:center;rotate:0;border-width:4px}
 [data-shape-style=organic] .hero-image{border-radius:45% 48% 30% 45%}
 [data-shape-style=arched] .hero-image{border-radius:48% 48% 12px 12px}
 body:not([data-shape-style=classic]) .hero-copy{margin:0;padding:28px 22px 32px;background:var(--hero-from);border:0;box-shadow:none;border-radius:0}
 [data-shape-style=angular] .hero-copy{margin:-22px 12px 18px;padding:26px 20px;border:2px solid var(--accent);border-radius:5px 30px 5px 22px;box-shadow:4px 4px 0 var(--accent);background:var(--surface)}
 [data-shape-style=angular] .hero-image{clip-path:none;height:260px}
 body:not([data-shape-style=classic]) #hero .eyebrow{font-size:9px;max-width:100%;overflow-wrap:anywhere}
 :is([data-heading-style=poster],[data-heading-style=storybook]) #hero h1{font-size:42px;letter-spacing:-1.8px;overflow-wrap:anywhere}
 body:not([data-button-style=classic]) .hero-links{gap:12px;flex-direction:column}
 body:not([data-button-style=classic]) .hero-links button{font-size:13px;width:100%;padding:14px 16px}
 :where(body):not([data-pattern=none]) .hero-emblem{top:28px;bottom:auto;right:7%;width:66px;height:66px}
 [data-pattern=sparkles] .hero-emblem{right:10%;top:35px}
 .hero-emblem span{font-size:44px}
 .hero-sparks i:nth-child(3){display:none}
 .hero-caption{border-radius:0}
 [data-shape-style=arched] .hero-caption{padding-right:20px}
 [data-card-style=sticker] #results .card{rotate:0}
 footer{gap:18px;flex-wrap:wrap}
 .theme-fields{grid-template-columns:1fr}
 .theme-fields .full{grid-column:auto}
}
@media(max-width:360px){header nav svg{display:none}.brand{font-size:22px}.brand-flower{width:34px!important;height:34px!important;font-size:28px!important}}

/* Viewport spectres stay below every content surface and never intercept input. */
body[data-specters=mixed]{isolation:isolate}
.theme-specter-layer{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.theme-specter-track{position:absolute;inset:0;pointer-events:none;--specter-path:specter-cross-a;animation:var(--specter-path) var(--specter-duration,100s) ease-in-out infinite;animation-delay:-23s;animation-play-state:paused;transform:translate(5%,22%)}
.theme-specter-sprite{display:block;position:absolute;left:0;top:0;width:clamp(130px,18vw,280px);aspect-ratio:2/3;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:var(--specter-opacity,.16);animation:specter-drift 9s ease-in-out infinite;animation-play-state:paused;pointer-events:none}
.theme-specter-track:nth-child(2){--specter-path:specter-cross-b;animation-duration:calc(var(--specter-duration,100s)*1.23);animation-delay:-51s;transform:translate(68%,12%)}
.theme-specter-track:nth-child(2) .theme-specter-sprite{width:clamp(110px,16vw,245px);animation-delay:-3s}
.theme-specter-track:nth-child(3){--specter-path:specter-cross-c;animation-duration:calc(var(--specter-duration,100s)*.87);animation-delay:-37s;transform:translate(38%,58%)}
.theme-specter-track:nth-child(3) .theme-specter-sprite{width:clamp(100px,14vw,220px);animation-delay:-6s}
.theme-specter-track:nth-child(4){--specter-path:specter-cross-b;animation-duration:calc(var(--specter-duration,100s)*1.4);animation-delay:-17s;transform:translate(80%,64%)}
.theme-specter-track:nth-child(4) .theme-specter-sprite{width:clamp(90px,12vw,180px);animation-delay:-4s}
.theme-specter-track:nth-child(5){--specter-path:specter-cross-c;animation-duration:calc(var(--specter-duration,100s)*1.1);animation-delay:-75s;transform:translate(10%,70%)}
.theme-specter-track:nth-child(5) .theme-specter-sprite{width:clamp(90px,13vw,200px);animation-delay:-7s}
[data-motion=on] .theme-specter-layer :is(.theme-specter-track,.theme-specter-sprite),
.theme-specter-sample[data-animate=yes] :is(.theme-specter-track,.theme-specter-sprite){animation-play-state:running}
[data-specters-paused=yes] :is(.theme-specter-track,.theme-specter-sprite),
[data-specters-hidden=yes] :is(.theme-specter-track,.theme-specter-sprite){animation-play-state:paused!important}
.theme-specter-toggle{position:fixed;right:16px;bottom:16px;z-index:30;max-width:calc(100vw - 32px);min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink);box-shadow:0 3px 16px #0002;font-size:12px}
.theme-specter-toggle[hidden]{display:none}
.theme-specter-sample{position:relative;isolation:isolate;overflow:hidden;height:245px;background:#1b1429;border:1px solid var(--line);border-radius:12px;--specter-opacity:.44;--specter-duration:100s}
.theme-specter-sample>div{position:absolute;inset:0;pointer-events:none}
.theme-specter-sample .theme-specter-track .theme-specter-sprite{width:95px}
.theme-specter-sample[data-specter-speed=normal]{--specter-duration:70s}
.theme-specter-sample[data-specter-speed=lively]{--specter-duration:45s}
.theme-specter-sample[data-specter-visibility=medium]{--specter-opacity:.62}
.theme-specter-sample[data-specter-visibility=strong]{--specter-opacity:.8}
.theme-specter-sample-caption{position:absolute;bottom:0;inset-inline:0;padding:9px 12px;background:#1b1429;color:#eee6f7;font-size:11px;text-align:center}
[data-motion=off] .theme-specter-layer :is(.theme-specter-track,.theme-specter-sprite),
.theme-specter-sample[data-animate=no] :is(.theme-specter-track,.theme-specter-sprite){animation:none}
.theme-specter-sample .theme-specter-track:nth-child(1){transform:translate(5%,10%)}
.theme-specter-sample .theme-specter-track:nth-child(2){transform:translate(40%,15%)}
.theme-specter-sample .theme-specter-track:nth-child(3){transform:translate(72%,10%)}
@keyframes specter-cross-a{
  0%,100%{transform:translate(-18%,22%)}
  25%{transform:translate(33%,62%)}
  50%{transform:translate(92%,18%)}
  75%{transform:translate(44%,-12%)}
}
@keyframes specter-cross-b{
  0%,100%{transform:translate(88%,62%)}
  25%{transform:translate(50%,10%)}
  50%{transform:translate(-16%,45%)}
  75%{transform:translate(28%,82%)}
}
@keyframes specter-cross-c{
  0%,100%{transform:translate(34%,88%)}
  25%{transform:translate(3%,18%)}
  50%{transform:translate(58%,-18%)}
  75%{transform:translate(84%,50%)}
}
@keyframes specter-drift{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@media(max-width:620px){
  .theme-specter-layer .theme-specter-track:nth-child(n+4){display:none}
  .theme-specter-layer .theme-specter-sprite{width:clamp(100px,27vw,165px)}
  .theme-specter-toggle{right:10px;bottom:10px;max-width:calc(100vw - 20px)}
}
@media(prefers-reduced-motion:reduce){
  :is(.theme-specter-track,.theme-specter-sprite){animation:none!important}
  .theme-specter-toggle{display:none!important}
}
@media print{.theme-specter-layer,.theme-specter-toggle,.theme-specter-sample{display:none!important}}


/* BEGIN SPECTER ASSETS — generated by scripts/build-specter-assets.py */
.theme-specter-sprite[data-specter-type=hooded]{background-image:var(--specter-hooded-image)}
.theme-specter-sprite[data-specter-type=veiled]{background-image:var(--specter-veiled-image)}
.theme-specter-sprite[data-specter-type=mist]{background-image:var(--specter-mist-image)}
/* END SPECTER ASSETS */