:root{color-scheme:light;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#263127;background:#f7f3e9}
*{box-sizing:border-box}body{margin:0;line-height:1.45}a{color:#246147}
.site-header{max-width:1180px;margin:auto;padding:18px 22px;border-bottom:1px solid #dedac9;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-size:1.22rem;font-weight:850;text-decoration:none;color:#243426}
.site-header nav{display:flex;gap:18px;flex-wrap:wrap}.site-header nav a{text-decoration:none;font-weight:650}
main{max-width:1180px;margin:0 auto;padding:30px 22px 52px}.eyebrow{margin:0;color:#826832;font-weight:850;font-size:.76rem;letter-spacing:.12em}
h1{margin:4px 0 8px;font-size:clamp(2rem,5vw,3.5rem);line-height:1.12;letter-spacing:-.04em}h2{font-size:1.25rem}
.intro>p:last-child{max-width:670px;color:#586357;margin:0 0 25px}.layout{display:grid;grid-template-columns:minmax(290px,.95fr) minmax(300px,1.05fr);gap:26px;align-items:start}
.panel,.preview{border:1px solid #dfdccf;border-radius:18px;background:#fffdf7;padding:24px;min-width:0}
fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}legend,.field-title{display:block;margin-bottom:10px;font-weight:800}
.format-options{display:flex;gap:8px;flex-wrap:wrap}.format-options label{display:inline-flex;align-items:center;gap:7px;border:1px solid #cbd2c5;border-radius:9px;padding:10px 12px;cursor:pointer}
.group{margin-bottom:18px}.group label{display:block;font-weight:750;margin:0 0 7px}.group textarea{width:100%;min-height:74px;padding:12px;resize:vertical;border:1px solid #b9c4b8;border-radius:9px;background:white;color:#273326;font:inherit}
.group input[type=file]{max-width:100%;font:inherit;color:inherit}.picture-actions,.actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
button{font:inherit;cursor:pointer;border-radius:9px;padding:11px 15px;border:1px solid #b9c4b8;background:#fff;color:#263127;min-height:44px}
button.primary{background:#276b49;color:#fff;border-color:#276b49;font-weight:800}button:disabled{cursor:wait;opacity:.55}
:is(a,button,textarea,input):focus-visible{outline:3px solid #245ff0;outline-offset:3px}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}
.gallery-item{min-width:0;padding:6px;display:flex;flex-direction:column;gap:5px;text-align:left}
.gallery-item img{display:block;aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:5px}.gallery-item span{font-size:.68rem;line-height:1.3;overflow-wrap:anywhere}
#meme-status{min-height:24px;font-size:.9rem;color:#42654d}.preview{text-align:center;position:sticky;top:12px}
.preview h2{margin:0 0 14px}.preview canvas{display:block;margin:auto;max-width:100%;max-height:74vh;height:auto;width:auto;border-radius:10px;background:#293a2f;box-shadow:0 5px 22px #0002}
.hint{color:#6a7167;font-size:.83rem;margin-bottom:0}
@media(max-width:820px){.layout{grid-template-columns:1fr}.preview{position:static;grid-row:1}.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:490px){.site-header{padding:14px 16px}.site-header nav{gap:10px;font-size:.84rem}main{padding:22px 14px}.panel,.preview{padding:16px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.preview canvas{max-height:62vh}}

/* Surprise mode and original mascot selection */
.surprise-panel{background:linear-gradient(135deg,#fff5db,#e7f7e9);border:1px solid #d2e3c9;border-radius:15px;padding:15px;margin:0 0 22px}
.surprise-button{background:#214d3b;color:#fff;border-color:#214d3b;font-weight:850;min-width:190px}
.surprise-button:hover{background:#15392d}
.surprise-hint{margin:9px 0 0;color:#526856;font-size:.84rem}
.mascot-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-height:440px;overflow:auto;margin:12px 0 16px;padding:4px}
.mascot-gallery[hidden]{display:none}
.mascot-option{min-width:0;min-height:unset;display:flex;flex-direction:column;align-items:center;gap:6px;padding:7px;background:#f9fdf5;border:2px solid #d3dccd;border-radius:12px;text-align:center}
.mascot-option:hover,.mascot-option[aria-pressed="true"]{border-color:#245b42;background:#eaf4e6}
.mascot-option img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:8px;background:#fff}
.mascot-option span{font-size:.71rem;font-weight:750;line-height:1.2;overflow-wrap:anywhere}
@media(max-width:490px){.mascot-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mascot-option{padding:5px}.mascot-option span{font-size:.66rem}.surprise-button{width:100%}}