@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#f8f4e9;background:#14231a;font-synthesis:none}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 82% 5%,#304b31 0,#14231a 35%,#102017 100%)}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}.hidden{display:none!important}
.app-shell{max-width:1440px;min-height:100vh;margin:auto;padding:0 5.2vw;display:flex;flex-direction:column}.site-header{min-height:99px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff20}.brand{display:flex;align-items:center;gap:13px;font:700 16px/1 'Space Grotesk',Arial,sans-serif;letter-spacing:.065em}.brand small{display:block;margin-top:5px;font-size:11px;letter-spacing:.23em;color:#b7c9aa}.brand-cube{height:35px;width:35px;background:linear-gradient(#a5cc69 0 38%,#609341 38% 100%);border:4px solid #d3e3aa;box-shadow:4px 4px 0 #090e0a;image-rendering:pixelated}.event-tag{font:700 11px/1 'Space Grotesk',Arial,sans-serif;color:#b9cda4;letter-spacing:.18em;border:1px solid #64765b;padding:11px 13px;background:#203427}.site-footer{display:flex;justify-content:space-between;gap:20px;padding:26px 0 32px;font:700 10px/1.3 'Space Grotesk',Arial,sans-serif;letter-spacing:.16em;color:#9bab91}
main{flex:1;display:flex}.panel{width:100%;min-height:600px}.intro{display:grid;grid-template-columns:minmax(380px,.96fr) minmax(420px,1.04fr);align-items:center;gap:4%;padding:30px 0 45px}.intro-copy{position:relative;z-index:2;padding:40px 0 30px}.eyebrow,.aside-label,.editor-label{font:700 11px/1.4 'Space Grotesk',Arial,sans-serif;letter-spacing:.2em;color:#afcf91;margin:0 0 22px}.status-dot{display:inline-block;width:9px;height:9px;background:#b4e071;box-shadow:0 0 0 4px #b4e07120;margin-right:9px}.intro h1,.section-top h1{font-family:'Space Grotesk',Arial,sans-serif;letter-spacing:-.065em}.intro h1{font-size:clamp(60px,7.8vw,112px);line-height:.91;margin:0 0 27px;max-width:720px}.period{color:#b0d867}.lead{max-width:490px;color:#d3dec8;font-size:17px;line-height:1.55;margin:0 0 31px}.mode-list{display:grid;gap:10px;max-width:510px;margin-bottom:18px}.mode-card{width:100%;min-height:78px;display:flex;align-items:center;text-align:left;gap:16px;color:#fff;background:#1d3223;border:1px solid #66845d;padding:14px 16px;transition:transform .15s,background .15s,box-shadow .15s}.mode-card:hover,.mode-card:focus-visible{transform:translateY(-2px);background:#29452e}.mode-card.selected{background:#304f31;border-color:#b6db88;box-shadow:inset 4px 0 #c2eb7e}.mode-card strong,.mode-card small{display:block}.mode-card strong{font:700 17px/1.2 'Space Grotesk',Arial,sans-serif}.mode-card small{font-size:12px;margin-top:4px;color:#bfcdb4}.mode-icon{flex:none;width:42px;height:42px;background:#a9d373;box-shadow:inset 0 0 0 5px #365a33;position:relative}.single-icon:after{content:"";position:absolute;inset:13px;background:#27412f}.strip-icon:after{content:"";position:absolute;inset:8px 13px;background:repeating-linear-gradient(to bottom,#27412f 0 5px,transparent 5px 9px)}.mode-arrow{margin-left:auto;color:#c4df9b;font-size:24px}.button{border:0;min-height:51px;padding:13px 19px;display:inline-flex;justify-content:center;align-items:center;gap:20px;font:700 14px/1.2 'Space Grotesk',Arial,sans-serif;text-decoration:none;transition:transform .14s,filter .14s}.button:hover,.button:focus-visible{transform:translateY(-2px);filter:brightness(1.08)}.button.primary{color:#17231a;background:#c9ed87;box-shadow:4px 4px 0 #080e0a}.button.secondary{color:#f8f4e9;background:#2e4935;border:1px solid #8baa7c}.start-button{width:min(100%,510px);justify-content:space-between;font-size:17px;padding:20px 22px}.privacy-line{font-size:12px;color:#aabb9e;margin:20px 0 0}.privacy-line span{font-size:10px;color:#afd17d;margin-right:6px}
.intro-art{height:min(660px,48vw);min-height:490px;position:relative;overflow:hidden;background:linear-gradient(#afdbdb 0 56%,#8bbb8e 56% 63%,#5d904a 63%);border:8px solid #e5e6bf;box-shadow:14px 14px 0 #0b150d;isolation:isolate}.intro-art:before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 39px,#14301b10 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#14301b10 39px 40px)}.sun{position:absolute;top:8%;right:15%;width:86px;height:86px;background:#fff0ab;box-shadow:0 0 0 15px #fff0ab50}.cloud{position:absolute;width:115px;height:29px;background:#eff7e1;box-shadow:30px -22px 0 #eff7e1,67px -13px 0 #eff7e1}.cloud-a{top:14%;left:12%}.cloud-b{top:35%;right:5%;transform:scale(.7)}.mountain{position:absolute;bottom:25%;width:70%;height:38%;background:#709e72;clip-path:polygon(0 100%,45% 0,100% 100%)}.mountain-back{left:-20%;opacity:.65}.mountain-front{right:-15%;height:42%;background:#4d7956}.ground{position:absolute;bottom:0;width:100%;height:28%;background:linear-gradient(#91ba54 0 20%,#6c9344 20% 28%,#785238 28%);box-shadow:inset 0 18px #b2d274}.ground:before{content:"";position:absolute;inset:35% 0 0;background:repeating-linear-gradient(90deg,#5d3f2d 0 52px,#704b34 52px 96px,#90603d 96px 120px);opacity:.4}.art-card{position:absolute;z-index:5;background:#f8f0dd;box-shadow:10px 11px 0 #1c3d2840}.art-card-back{height:54%;width:45%;left:10%;top:22%;transform:rotate(-12deg);background:#b0d4a4;border:15px solid #f8f0dd;display:grid;place-items:center}.art-face{font:700 80px/1 'Space Grotesk',Arial,sans-serif;color:#426747;transform:rotate(90deg)}.art-card-front{height:67%;width:52%;right:11%;top:20%;padding:15px;transform:rotate(9deg);display:flex;flex-direction:column}.art-scene{flex:1;position:relative;background:linear-gradient(#81b4bf 0 50%,#7fa954 50% 60%,#6a4932 60%);overflow:hidden}.art-scene:after{content:"";position:absolute;bottom:25%;left:0;width:100%;height:9%;background:#aad16f}.art-star{position:absolute;right:13%;top:12%;width:38px;height:38px;background:#fee69a;box-shadow:0 0 0 8px #fee69a44}.art-character{position:absolute;z-index:1;left:27%;bottom:14%;height:66%;width:47%;background:#e8b488;box-shadow:inset 14px 0 #d59a72}.art-character .hair{position:absolute;left:0;top:0;height:29%;width:100%;background:#5c3829;box-shadow:inset 18px 0 #6c4430}.art-character .eyes{position:absolute;top:42%;left:20%;width:16px;height:17px;background:#273a2e;box-shadow:57px 0 #273a2e}.art-character .body{position:absolute;bottom:-10%;height:37%;width:120%;left:-10%;background:#5d9062;box-shadow:inset 18px 0 #477e50}.art-card-caption{font:700 26px/.85 'Space Grotesk',Arial,sans-serif;color:#36532e;letter-spacing:-.08em;padding-top:10px}.art-card-caption small{font-size:9px;letter-spacing:.17em}
.capture,.result{padding:41px 0 50px}.section-top{display:flex;align-items:center;gap:18px;margin-bottom:28px}.section-top .eyebrow{margin:0 0 2px}.section-top h1{font-size:clamp(38px,4.5vw,62px);line-height:1.05;margin:0}.back-button{flex:none;width:49px;height:49px;background:#2f4934;border:1px solid #78936b;color:#fff;font-size:24px}.shot-count{margin-left:auto;padding:9px 12px;border:1px solid #78936b;background:#243d2a;color:#d1e2bc;font:700 12px 'Space Grotesk',Arial,sans-serif}.camera-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:27px;align-items:start}.camera-column{min-width:0}.camera-frame{width:100%;aspect-ratio:4/3;max-height:620px;position:relative;background:#223328;border:8px solid #dce6bd;box-shadow:9px 9px 0 #07130b;overflow:hidden}.camera-frame video{width:100%;height:100%;object-fit:cover;display:block}.camera-frame.mirrored video{transform:scaleX(-1)}.camera-empty{position:absolute;inset:0;background:#273c2d;display:none;align-items:center;justify-content:center;flex-direction:column;gap:7px;text-align:center;color:#d4dec7;padding:20px}.camera-frame.no-camera .camera-empty{display:flex}.camera-frame.no-camera video{visibility:hidden}.camera-glyph{font-size:55px;color:#adcc81}.camera-empty strong{font:700 22px 'Space Grotesk',Arial,sans-serif}.viewfinder{position:absolute;inset:20px;pointer-events:none}.viewfinder span{position:absolute;width:28px;height:28px;border-color:#f9f6e7;border-style:solid}.viewfinder span:nth-child(1){top:0;left:0;border-width:3px 0 0 3px}.viewfinder span:nth-child(2){top:0;right:0;border-width:3px 3px 0 0}.viewfinder span:nth-child(3){bottom:0;left:0;border-width:0 0 3px 3px}.viewfinder span:nth-child(4){bottom:0;right:0;border-width:0 3px 3px 0}.countdown{position:absolute;inset:0;display:grid;place-items:center;background:#08150aaa;color:#f4f6dc;font:700 clamp(90px,20vw,210px)/1 'Space Grotesk',Arial,sans-serif;text-shadow:8px 8px #253b2a}.camera-status{text-align:center;color:#c2d0b8;font-size:13px;min-height:20px;margin:18px 0 14px}.camera-actions{display:flex;align-items:center;justify-content:center;gap:20px}.camera-actions .button{min-width:135px}.shutter{flex:none;width:82px;height:82px;padding:7px;background:#eaf0d6;border:4px solid #95b47f;border-radius:50%;box-shadow:0 5px 0 #061109}.shutter span{display:block;width:100%;height:100%;border-radius:50%;background:#c7ec7a;box-shadow:inset 0 0 0 3px #375b39}.shutter:hover{transform:translateY(-2px)}.capture-aside{padding:19px;background:#1b3022;border:1px solid #6d8d63}.aside-label{margin:0 0 15px}.shot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.shot-slot{aspect-ratio:1.28;display:grid;place-items:center;background:#2e4833;border:1px dashed #88a47a;color:#a9c195;font:700 15px 'Space Grotesk',Arial,sans-serif;overflow:hidden}.shot-slot img{width:100%;height:100%;object-fit:cover}.capture-aside .text-button{margin-top:16px}.aside-tip{font-size:12px;line-height:1.5;color:#b1c2a6;margin:18px 0 0}.text-button{padding:0;background:none;border:0;color:#d3edaa;text-decoration:underline;text-underline-offset:4px;font-weight:700}
.result-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(285px,370px);align-items:start;gap:44px}.output-wrap{max-width:620px;margin:0 auto;padding:12px;background:#263a29;border:1px solid #77946e;box-shadow:11px 11px 0 #07140b}.output-wrap canvas{display:block;width:100%;height:auto;background:#24452e}.editor{padding:13px 0}.editor-block{margin-bottom:27px}.editor-label{margin:0 0 11px;color:#d8e8bf}.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.swatch{background:#244029;border:1px solid #658159;padding:8px 4px 10px;color:#dbe4d3;font-size:11px;font-weight:700;display:grid;justify-items:center;gap:7px}.swatch.active,.stamp.active{border-color:#d4ee9e;background:#365938;box-shadow:inset 0 -3px #d4ee9e}.swatch-preview{width:100%;height:40px;border:4px solid #f6f1df;background:#adc5a9}.swatch-preview.grass{background:linear-gradient(#a0c76c 0 25%,#76583d 25%)}.swatch-preview.cave{background:linear-gradient(135deg,#1d3544,#795d87)}.swatch-preview.sky{background:linear-gradient(#72bfd0 0 65%,#e5e7b3 65%)}.stamp-row{display:flex;flex-wrap:wrap;gap:8px}.stamp{min-height:39px;padding:7px 11px;background:#244029;border:1px solid #658159;color:#edf2e4;font-size:12px;font-weight:700}.stamp span{color:#d7e785;margin-right:3px;font-size:16px}.more-options{border-top:1px solid #526b4b;border-bottom:1px solid #526b4b;padding:13px 0;margin-bottom:28px;color:#d5e7c5}.more-options summary{cursor:pointer;font:700 14px 'Space Grotesk',Arial,sans-serif;list-style:none;display:flex;justify-content:space-between}.more-options summary::-webkit-details-marker{display:none}.more-options[open] summary span{transform:rotate(45deg)}.more-options label{display:block;margin:17px 0 7px;font-size:12px;font-weight:700}.more-options input{width:100%;padding:10px 12px;border:1px solid #a3ba94;background:#eaf1e2;color:#17281b;border-radius:0}.more-options p{font-size:11px;color:#adc1a5;margin:7px 0 1px}.save-actions{display:grid;gap:10px}.save-actions .button{width:100%;justify-content:space-between}.save-actions .text-button{justify-self:center;margin:8px}.save-hint{color:#abbda5;font-size:12px;line-height:1.5;margin:16px 0}
button:focus-visible,summary:focus-visible,input:focus-visible,label.upload-button:focus-within{outline:3px solid #f8de81;outline-offset:3px}@media(max-width:900px){.intro{grid-template-columns:1fr 42%;gap:20px}.intro h1{font-size:clamp(52px,7vw,78px)}.intro-art{height:520px;min-height:0}.art-card-front{width:66%;right:6%}.art-card-back{width:55%;left:4%}.camera-layout{grid-template-columns:1fr}.capture-aside{display:grid;grid-template-columns:1fr auto;align-items:start;gap:0 20px}.capture-aside .aside-label{grid-column:1/-1}.shot-grid{grid-column:1}.capture-aside .text-button{grid-column:2;grid-row:2}.capture-aside .aside-tip{grid-column:1/-1;margin:10px 0 0}.result-layout{gap:25px}}
@media(max-width:650px){.app-shell{padding:0 18px}.site-header{min-height:73px}.brand{font-size:13px}.brand-cube{width:28px;height:28px;border-width:3px}.brand small{font-size:9px}.event-tag{font-size:9px;padding:8px;max-width:126px;text-align:center;line-height:1.3}.intro{display:flex;flex-direction:column-reverse;align-items:stretch;gap:0;padding:18px 0 25px}.intro-art{height:215px;min-height:0;width:100%;border-width:5px;box-shadow:7px 7px 0 #0b150d}.sun{width:40px;height:40px}.cloud{transform:scale(.5);transform-origin:left top}.cloud-b{transform:scale(.4)}.art-card-front{height:83%;width:36%;top:12%;right:22%;padding:6px}.art-card-back{height:70%;width:32%;top:18%;left:19%;border-width:7px}.art-card-caption{font-size:11px;padding-top:4px}.art-card-caption small{font-size:5px}.art-face{font-size:36px}.art-character .eyes{width:7px;height:7px;box-shadow:20px 0 #273a2e}.intro-copy{padding:31px 0 0}.eyebrow{margin-bottom:14px}.intro h1{font-size:clamp(49px,14vw,76px);margin-bottom:16px}.lead{font-size:15px;margin-bottom:21px}.mode-card{min-height:69px}.start-button{min-height:57px}.privacy-line{margin-top:16px}.site-footer{font-size:8px;padding:18px 0 25px}.capture,.result{padding:24px 0 35px}.section-top{gap:12px;margin-bottom:18px}.section-top h1{font-size:39px}.back-button{width:40px;height:40px}.camera-frame{border-width:5px;box-shadow:5px 5px 0 #07130b}.camera-actions{gap:8px;justify-content:space-between}.camera-actions .button{min-width:0;padding:9px;font-size:11px;min-height:46px}.shutter{width:68px;height:68px}.result-layout{display:block}.output-wrap{max-width:420px;margin:0 auto 26px}.editor{padding:0}.swatch-preview{height:32px}}
@media(max-width:380px){.event-tag{display:none}.brand{font-size:14px}.intro h1{font-size:51px}.camera-actions .button{font-size:10px}.section-top h1{font-size:34px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}