* { box-sizing: border-box; }
.golden-cursor-active,.golden-cursor-active * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M3 2L23 19L14 20L10 28Z' fill='%23ffb52e' stroke='%236d3517' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M6 7L18 17L12 18' fill='none' stroke='%23ffe29a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 3 2, auto; }
.golden-cursor-layer { position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; overflow: hidden; opacity: 0; }
.golden-cursor-layer.is-visible { opacity: 1; }
.golden-cursor-layer span { position: absolute; top: 0; left: 0; pointer-events: none; }
.golden-cursor-glow { width: 126px; height: 126px; margin: -63px; border-radius: 50%; background: radial-gradient(circle,#fffbea 0%,#fff0b6eb 6%,#ffdb78b3 15%,#ffb53780 28%,#ff962e40 46%,#f47c181a 62%,transparent 75%); filter: drop-shadow(0 0 16px #ffc13b99); }
.golden-cursor-echo { width: 28px; height: 28px; margin: -14px; border: 1px solid #ffe4a5c7; border-radius: 50%; background: radial-gradient(circle,#ffe5a640,#ffb12b18 55%,transparent 72%); box-shadow: 0 0 10px #ffe18bb3,0 0 24px #ffb63299,0 0 42px #ff8d2b4d,inset 0 0 10px #fff0b866; }
.golden-spark { width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff7d6; box-shadow: 0 0 5px #fff3c9,0 0 14px #ffcf57,0 0 28px #ffa127cc; opacity: 0; }
.golden-spark-star { width: 16px; height: 16px; margin: -8px; border-radius: 0; background: radial-gradient(circle,#fffef5 14%,#ffe495 48%,#ffbe3e); clip-path: polygon(50% 0,60% 36%,100% 50%,60% 60%,50% 100%,36% 60%,0 50%,36% 36%); }
.golden-butterfly { width: 24px; height: 22px; opacity: 0; filter: drop-shadow(0 0 4px #fff0a5) drop-shadow(0 0 10px #f5a62f99); }
.golden-butterfly::before,.golden-butterfly::after { content: ''; position: absolute; top: 1px; width: 12px; height: 19px; border: 1px solid #b76b24; background: radial-gradient(ellipse at 35% 30%,#fff6bf 0 12%,#ffce59 25%,#efa137 55%,#d77524 80%); }
.golden-butterfly::before { left: 0; border-radius: 75% 75% 25% 70%; transform-origin: right center; transform: rotate(-22deg) scaleX(var(--wing-spread,1)); }
.golden-butterfly::after { right: 0; border-radius: 75% 75% 70% 25%; transform-origin: left center; transform: rotate(22deg) scaleX(var(--wing-spread,1)); }
.golden-butterfly-body { position: absolute; z-index: 1; left: 11px; top: 5px; width: 2px; height: 14px; border-radius: 50%; background: #96521f; box-shadow: 0 0 3px #ffe8a2; }
.golden-butterfly-body::before,.golden-butterfly-body::after { content: ''; position: absolute; top: -4px; width: 1px; height: 6px; background: #985521; transform-origin: bottom; }
.golden-butterfly-body::before { transform: rotate(-30deg); }
.golden-butterfly-body::after { transform: rotate(30deg); }
@media(prefers-reduced-motion:reduce),(forced-colors:active) { .golden-cursor-layer { display: none; } .golden-cursor-active,.golden-cursor-active * { cursor: auto; } }
body { margin: 0; background: #d7a36e; color: #3e251b; font-family: system-ui, sans-serif; }
body > .container { max-width: none; padding: 0; }
.navbar { margin-bottom: 0 !important; }
a { color: #793413; }
.autumn-nav { background: linear-gradient(110deg,#e3b975,#d69a50 55%,#c88b53); border-color: #a96839 !important; }
.autumn-nav .navbar-brand { font-family: Georgia,serif; font-weight: 700; color: #4b2819; }
.autumn-nav .nav-link:hover { color: #873607 !important; }
.hero-page { position: relative; min-height: calc(100dvh - 130px); display: flex; flex-direction: column; justify-content: space-between; padding: 24px 0 0; gap: 180px; isolation: isolate; overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: -1; background: url('/images/hero-med-katt.png') center top / 100% 100% no-repeat; clip-path: inset(0 0 24% 0); }
.hero-copy { align-self: center; width: min(88%,460px); padding: 14px 22px; text-align: center; border-radius: 18px; background: rgba(247,215,165,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid #efb754b3; box-shadow: 0 6px 24px #60311425,inset 0 1px 0 #ffe0a580; color: #321b12; text-shadow: none; }
.hero-copy h1 { font-family: Georgia,serif; font-size: clamp(28px,3.2vw,42px); line-height: 1.1; font-weight: 700; }
.hero-copy em { color: #943b0b; text-decoration: underline; text-decoration-color: #dc9b28; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.hero-copy p { font-size: 15px; font-weight: 600; margin-bottom: 0; }
.hero-copy .welcome-label,.eyebrow { font-size: 12px; letter-spacing: 2px; font-weight: 700; margin-bottom: 12px; }
.destination-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding: 26px clamp(16px,3vw,48px); background: linear-gradient(120deg,#dcb16d,#d39752 50%,#bc7d48); min-height: 24%; border-top: 2px solid #dca244; }
.destination-grid a { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 125px; padding: 22px 14px; border-radius: 22px 8px 22px 8px; background: linear-gradient(145deg,#9b512c,#69351f); border: 1px solid #e8b87e; text-decoration: none; box-shadow: 0 7px 0 #69371e55,0 12px 22px #5b2c1930,inset 0 1px 0 #f5c88b55; color: #fff0d6; transition: transform .2s ease,box-shadow .2s ease; }
.destination-grid a::before { content: ''; position: absolute; width: 72px; height: 72px; background: #efa52b26; border: 1px solid #f8c45b80; border-radius: 50%; right: -22px; top: -28px; box-shadow: 0 0 0 12px #ee9b2818; pointer-events: none; }
.destination-grid a:nth-child(2) { background: linear-gradient(145deg,#bc6024,#80381e); border-color: #eea844; }
.destination-grid a:nth-child(3) { background: linear-gradient(145deg,#a7671e,#703b1c); border-color: #e9b746; }
.destination-grid a:nth-child(4) { background: linear-gradient(145deg,#89603a,#594025); }
.destination-grid a:nth-child(5) { background: linear-gradient(145deg,#96503a,#632e25); }
.destination-grid a:hover { color: #fff0d6; transform: translateY(-4px); box-shadow: 0 10px 0 #69371e44,0 16px 26px #5b2c1940,inset 0 1px 0 #f5c88b55; }
.destination-grid strong { font-family: Georgia,serif; font-size: 23px; margin-bottom: 8px; }
.destination-grid span { font-size: 14px; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline: 3px solid #673314; outline-offset: 4px; box-shadow: 0 0 0 7px #f5ba4d; }
.workspace { max-width: 900px; margin: 40px auto; padding: 32px; background: #e5b883; border: 1px solid #b77843; border-radius: 20px; box-shadow: 0 8px 28px #6b351d25; }
.workspace h1 { font-family: Georgia,serif; font-size: clamp(32px,5vw,46px); }
.workspace h2 { font-size: 24px; margin-top: 28px; }
label { display: block; font-weight: 600; margin-top: 18px; }
input,textarea,select { display: block; width: 100%; padding: 12px; background: #f0cca0; color: #3e251b; border: 1px solid #a86c3b; border-radius: 8px; margin: 8px 0 18px; font: inherit; }
textarea { min-height: 120px; }
button:disabled { cursor: wait; opacity: .65; }
.generation-status:not(:empty) { margin: 12px 0; padding: 14px 16px; border-left: 4px solid #a65a16; border-radius: 8px; background: #f4ce8d; color: #321b12; font-weight: 600; }
.generation-result { scroll-margin-top: 24px; margin-bottom: 28px; }
.creation-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cover-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 20px 0; }
.cover-card { min-width: 0; padding: 18px; border: 1px solid #ba7b37; border-radius: 18px; background: linear-gradient(145deg,#f1c884,#dca05d); box-shadow: 0 6px 16px #68351418; }
.cover-card h3 { font-family: Georgia,serif; font-size: 24px; }
.cover-card img { display: block; width: 100%; height: 260px; object-fit: contain; border-radius: 8px; }
.cover-card-spine img { width: 50px; margin: 0 auto; object-fit: cover; }
.cover-card select { max-width: 100%; }
@media(max-width:700px) { .cover-grid { grid-template-columns: 1fr; } .cover-card img { height: 280px; } }
.creation-modes button[aria-pressed="true"] { background: #89431d; color: #fff0d6; box-shadow: inset 0 -3px 0 #e7a52e; }
.source-image-panel { padding: 16px; border: 1px dashed #a6632c; border-radius: 12px; background: #edbf7d; }
.source-preview { display: block; max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; }
.source-preview[hidden] { display: none; }
.generation-loader { margin-top: 16px; padding: 20px; background: linear-gradient(125deg,#f6d39b,#e8af5f); border: 1px solid #c9832e; border-radius: 16px; color: #3e251b; }
.loader-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#generation-elapsed { margin-left: auto; font-variant-numeric: tabular-nums; }
.generation-spinner { width: 24px; height: 24px; border: 3px solid #a15c2540; border-top-color: #8b401a; border-radius: 50%; animation: loader-spin 1s linear infinite; }
.generation-steps { margin: 18px 0 0; padding-left: 24px; line-height: 1.9; }
.generation-steps li { color: #715131; }
.generation-steps .is-active { color: #54250e; font-weight: 750; }
.generation-steps .is-complete { color: #40552a; }
.generation-steps .is-complete::after { content: ' ✓'; }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .generation-spinner { animation: none; } }
.generation-result .image-card { padding: clamp(16px,3vw,28px); background: #efc68c; border: 2px solid #d39430; }
.generation-result .image-card h2 { margin-top: 0; }
.generation-result .image-card img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: contain; border-radius: 8px; }
button,.action { display: inline-block; background: #8d431f; color: #fff0d6; border: 0; padding: 12px 20px; border-radius: 10px; font: inherit; text-decoration: none; cursor: pointer; margin: 6px 4px 6px 0; }
button:hover,.action:hover { background: #643019; color: #fff0d6; }
.secondary { background: #c58b52; color: #3e251b; }
.hint { color: #64402b; font-size: 14px; line-height: 1.6; }
.back-link { display: block; margin-top: 24px; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 20px; margin: 20px 0; }
.image-card { background: #dca66c; border: 1px solid #ae7140; padding: 12px; border-radius: 12px; overflow-wrap: anywhere; box-shadow: 0 4px 12px #63351c18; }
.image-card img { width: 100%; height: 160px; object-fit: contain; }
#status { font-weight: 600; margin-top: 18px; }
.footer { position: static !important; line-height: 1.6 !important; padding: 20px; background: #bb7f4e; color: #3e251b !important; border-color: #9b6035 !important; }
@media(min-width:1001px) { .hero-page { height: calc(100dvh - 130px); min-height: 620px; } .destination-grid { flex-shrink: 0; } }
@media(max-width:1000px) { .destination-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .destination-grid { position: relative; } }
@media(max-width:600px) { .hero-page { padding: 18px 0 0; gap: 130px; } .hero-copy { padding: 12px 16px; } .destination-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; } .destination-grid a { padding: 16px; min-height: 115px; } .destination-grid a:last-child { grid-column: 1 / -1; } .destination-grid strong { font-size: 19px; } .workspace { margin: 16px; padding: 24px 18px; } }
/* Sweeping amber ribbons keep the autumn palette lively. */
.autumn-nav { background: linear-gradient(115deg,#eebd62,#eda139 42%,#d69043 76%,#c88b53); }
.hero-copy,.destination-grid { position: relative; z-index: 1; }
.hero-page::before,.hero-page::after { content: ''; position: absolute; z-index: 0; pointer-events: none; width: 65%; height: 160px; border-radius: 50%; transform: rotate(-14deg); animation: amber-drift 12s ease-in-out infinite alternate; }
.hero-page::before { left: -23%; top: 43%; border-top: 14px solid #f6a619b3; box-shadow: 0 -9px 0 #ffd36966,0 -24px 0 #e887222e; }
.hero-page::after { right: -26%; top: 25%; border-bottom: 10px solid #f3a52aa6; box-shadow: 0 10px 0 #ffcd5866,0 24px 0 #e8872233; animation-delay: -6s; }
.hero-copy { border-color: #ecaa35; box-shadow: 0 6px 24px #60311425,inset 0 3px 0 #f6b53f; }
.destination-grid { isolation: isolate; overflow: hidden; background: linear-gradient(115deg,#e9b54f,#dc963e 46%,#bc7d48); border-top-color: #f8c457; }
.destination-grid::before { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 110%; height: 160px; left: -5%; top: 38%; border-radius: 50%; border-top: 22px solid #ffd05c70; box-shadow: 0 -12px 0 #f49c304d,0 -26px 0 #ffc44b33; transform: rotate(-7deg); animation: amber-drift 14s ease-in-out infinite alternate-reverse; }
.destination-grid a { border-color: #f1b643; }
.destination-grid a::before { background: #ffb72e59; border-color: #ffd16ba6; box-shadow: 0 0 0 12px #fca92d26; }
.destination-grid a::after { content: ''; position: absolute; pointer-events: none; width: 85px; height: 30px; left: -24px; bottom: -10px; border-radius: 50%; border-top: 4px solid #efa62b99; transform: rotate(24deg); }
.destination-grid a:nth-child(3) { background: linear-gradient(145deg,#b5781f,#754018); border-color: #ffc34c; }
.workspace { border-top: 3px solid #eca62c; background: radial-gradient(ellipse at top right,#f4c36670,transparent 60%),#e5b883; }
.footer { background: linear-gradient(110deg,#c58b4b,#d69a3e 55%,#bb7f4e); }
@keyframes amber-drift { from { transform: translate3d(-8px,0,0) rotate(-10deg); } to { transform: translate3d(12px,-10px,0) rotate(-6deg); } }
@media(max-width:600px) { .hero-page::before,.hero-page::after { width: 85%; height: 100px; } .hero-page::before { left: -50%; top: 42%; } .hero-page::after { right: -55%; top: 30%; } }
@media(prefers-reduced-motion:reduce) { .destination-grid a { transition: none; } .destination-grid a:hover { transform: none; } .hero-page::before,.hero-page::after,.destination-grid::before { animation: none; } }