:root{
  --red:#9b2030;--red2:#761722;--gold:#c49a52;--cream:#fbf5e9;
  --ink:#382d29;--muted:#756963;--card:#fffdfa;--line:#e7d8c1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:radial-gradient(circle at 50% -10%,#fff 0,#f7f2e8 45%,#edf2ef 100%);min-height:100vh}
button,input,textarea{font:inherit}
button{cursor:pointer}
.shell{width:min(1120px,calc(100% - 24px));margin:auto;padding:18px 0 48px}
.hero{text-align:center;padding:20px 10px 10px}
.hero .mark{font-size:54px;line-height:1}
.hero h1{font-family:Georgia,serif;color:var(--red);font-size:clamp(40px,7vw,72px);margin:8px 0 4px}
.hero p{font-size:clamp(16px,2.2vw,20px);margin:6px auto;color:var(--muted)}
.nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0 24px}
.nav button,.btn{border:0;border-radius:999px;padding:12px 18px;font-weight:800}
.nav button{background:#fff;box-shadow:0 3px 15px #00000010;color:var(--ink)}
.nav button.active,.btn.primary{background:var(--red);color:#fff}
.btn.secondary{background:#eee5d8;color:var(--ink)}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.panel{display:none}
.panel.active{display:block}
.card{background:#ffffffed;border:1px solid var(--line);border-radius:24px;padding:clamp(14px,3vw,24px);box-shadow:0 14px 40px #0000000d}
.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.big-choice{border:1px solid var(--line);background:#fff;border-radius:20px;padding:28px 16px;font-size:18px;font-weight:800;color:var(--ink)}
.big-choice span{display:block;font-size:42px;margin-bottom:8px}
.note{font-size:13px;line-height:1.5;color:var(--muted)}
.center{text-align:center}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 24px}
.thumb{border:3px solid transparent;background:#fff;border-radius:16px;padding:6px;box-shadow:0 4px 16px #0000000b}
.thumb.selected{border-color:var(--red)}
.thumb img{width:100%;aspect-ratio:1/1.05;object-fit:cover;display:block;border-radius:10px}
.toolbar{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:12px 0}
.swatch{width:38px;height:38px;padding:0;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #aaa}
.range-wrap{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:13px}
.canvas-wrap{max-width:820px;margin:auto;background:#fff;border-radius:18px;border:1px solid var(--line);padding:8px}
#paintCanvas{width:100%;height:auto;display:block;border-radius:12px;background:#fff;touch-action:none}
.actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.letter{max-width:800px;margin:auto;background:linear-gradient(90deg,#f1dfb9,#fffaf0 6%,#fffaf0 94%,#f1dfb9);
border:1px solid #dbc69e;border-radius:10px;padding:56px clamp(22px,6vw,58px) 36px;box-shadow:0 16px 45px #0002;position:relative}
.letter:before{content:"ÉSZAKI-SARKI POSTA";position:absolute;top:20px;right:24px;letter-spacing:2px;font-size:11px;color:#8c6b50}
.letter h2{font-family:"Segoe Print","Bradley Hand",cursive;color:#76242b;font-size:clamp(30px,5vw,42px);margin:0 0 12px}
.letter textarea{width:100%;min-height:330px;border:0;outline:0;resize:vertical;background:transparent;color:#3e332e;
font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;font-size:clamp(22px,3.5vw,30px);line-height:1.55}
.upload{margin-top:18px;border:2px dashed #cfb98f;border-radius:16px;padding:16px;text-align:center;background:#fffaf2}
#photoPreview{display:none;max-width:210px;max-height:210px;margin:14px auto 0;border:7px solid #fff;box-shadow:0 5px 18px #0002}
.attach-status{display:none;text-align:center;font-weight:800;margin:14px 0;color:#44603c}
.send-stage{text-align:center;min-height:110px}
.envelope{display:none;margin:22px auto;width:220px;height:140px;position:relative}
.envelope::before{content:"✉️";font-size:105px;position:absolute;inset:0}
.envelope.fly{display:block;animation:fly 2.1s ease-in forwards}
.success{display:none;padding:26px;text-align:center;font-family:Georgia,serif;font-size:clamp(22px,4vw,30px);color:var(--red)}
@keyframes fly{0%{transform:translate(0,0) scale(1);opacity:1}55%{transform:translate(40px,-35px) rotate(5deg)}100%{transform:translate(360px,-230px) scale(.25) rotate(16deg);opacity:0}}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}.home-grid{grid-template-columns:1fr}.shell{width:min(100% - 14px,1120px)}}

.tool-label{width:100%;text-align:center;font-weight:800;margin-bottom:5px}
.swatch.chosen{box-shadow:0 0 0 4px var(--gold);transform:scale(1.08)}
.swatch.white{border:1px solid #aaa}
#paintCanvas{cursor:crosshair}