:root {
  --ink: #201d19;
  --paper: #f6f0e6;
  --cream: #fffaf2;
  --red: #bb3f35;
  --muted: #716b63;
  --line: #d9d0c3;
  --serif: "Noto Serif SC", "Songti SC", serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height:100dvh; color: var(--ink); background: var(--paper); font-family: var(--serif); overflow-x: hidden; -webkit-tap-highlight-color:transparent; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button, a, input, textarea { touch-action:manipulation; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .14; z-index: 99; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }

.site-header { height: 78px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(32,29,25,.12); position: relative; z-index: 5; }
.brand { color: inherit; text-decoration: none; font-size: 19px; font-weight: 700; letter-spacing: .5px; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; color: white; background: var(--red); border-radius: 50% 50% 50% 8px; font-size: 14px; transform: rotate(-8deg); }
nav { display: flex; gap: 32px; align-items: center; }
nav a { color: var(--ink); text-decoration: none; font-size: 13px; }
.nav-cta { border: 1px solid var(--ink); background: transparent; border-radius: 99px; padding: 10px 17px; }
.nav-cta span { margin-left: 14px; }

.hero { min-height: 640px; padding: 72px 7vw 90px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; max-width: 1500px; margin: auto; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: 9px; }
.eyebrow span { width: 27px; height: 1px; background: currentColor; display: inline-block; }
.hero h1 { font-size: clamp(48px, 6vw, 80px); line-height: 1.24; font-weight: 500; letter-spacing: -4px; margin: 24px 0 28px; }
.circled { color: var(--red); position: relative; white-space: nowrap; }
.circled::after { content: ""; position: absolute; inset: -2px -14px -6px -11px; border: 2px solid var(--red); border-radius: 50%; transform: rotate(-4deg); }
.hero-desc { color: var(--muted); line-height: 2; max-width: 530px; font-size: 15px; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 38px; }
.primary-btn { border: none; color: white; background: var(--ink); padding: 15px 20px 15px 25px; border-radius: 3px; box-shadow: 5px 5px 0 var(--red); min-width: 152px; display: flex; justify-content: space-between; transition: .2s; }
.primary-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--red); }
.price-note { display: flex; align-items: center; gap: 12px; }
.price-note strong { font-family: var(--mono); font-size: 25px; }
.price-note span { font-size: 11px; color: var(--muted); max-width: 75px; line-height: 1.4; }
.hero-art { height: 470px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(187,63,53,.25); border-radius: 50%; transform: rotate(-14deg); }
.orbit-one { width: 440px; height: 340px; }
.orbit-two { width: 330px; height: 450px; transform: rotate(52deg); border-style: dashed; }
.spark { color: var(--red); position: absolute; font-size: 25px; }
.spark-a { top: 48px; left: 14%; }.spark-b { right: 9%; bottom: 75px; }
.envelope { width: 370px; height: 250px; position: relative; transform: rotate(4deg); filter: drop-shadow(0 22px 24px rgba(50,35,25,.16)); }
.envelope-back { position: absolute; inset: 32px 0 0; background: #d9c5a7; border-radius: 3px; }
.letter-sheet { position: absolute; z-index: 1; width: 82%; height: 225px; left: 9%; top: -35px; background: #fffdf8; padding: 35px 32px; transform: rotate(-4deg); transition: transform .4s; }
.envelope:hover .letter-sheet { transform: translateY(-18px) rotate(-5deg); }
.letter-sheet span,.letter-sheet b { font-size: 13px; font-style: italic; color: #6e5a4d; }
.letter-sheet i { display: block; height: 1px; background: #d8cec1; margin: 20px 0; }
.letter-sheet b { float: right; font-weight: 400; }
.envelope-front { position: absolute; z-index: 2; inset: 32px 0 0; overflow: hidden; background: linear-gradient(145deg, transparent 49.5%, #e7d7bd 50%) 0 0/50% 100%, linear-gradient(215deg, transparent 49.5%, #dfcaaa 50%) 100% 0/50% 100%; background-repeat: no-repeat; }
.envelope-front::after { content: ""; position: absolute; left: 52px; bottom: -106px; width: 265px; height: 210px; background: #eadac1; transform: rotate(45deg); }
.wax { position: absolute; z-index: 3; left: 156px; bottom: 57px; width: 62px; height: 62px; border-radius: 48% 52% 43% 57%; color: #e9c1aa; background: var(--red); display: grid; place-items: center; font: italic 27px Georgia; border: 5px double #d37365; box-shadow: 0 3px 8px #7d302b55; }
.float-note { position: absolute; right: 0; top: 62px; font-size: 13px; line-height: 1.8; transform: rotate(6deg); }
.marquee { overflow: hidden; background: var(--red); color: white; transform: rotate(-1deg) scale(1.02); }
.marquee div { width: max-content; display: flex; gap: 40px; padding: 13px 0; animation: scroll 25s linear infinite; font-size: 12px; letter-spacing: 2px; }
.marquee b { color: #e9a59a; }
@keyframes scroll { to { transform: translateX(-50%); } }

.editor-section { padding: 120px 5vw; max-width: 1450px; margin: auto; }
.section-heading { text-align: center; margin-bottom: 55px; }
.section-heading .eyebrow { justify-content: center; }
.section-heading h2 { font-size: clamp(32px,4vw,49px); font-weight: 500; margin: 17px 0 14px; letter-spacing: -2px; }
.section-heading > p:last-child { color: var(--muted); font-size: 14px; }
.studio { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: #fbf7ef; box-shadow: 0 28px 60px rgba(57,43,31,.08); }
.editor-panel { padding: 43px 50px; border-right: 1px solid var(--line); }
.step-title { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.step-title span { font: 11px var(--mono); color: var(--red); border: 1px solid #d9aaa5; border-radius: 50%; width: 29px; height: 29px; display: grid; place-items: center; }
.step-title h3 { font-size: 17px; margin: 0; }
.field-label, .field-row label { display: block; font-size: 12px; margin: 0 0 8px; color: #4d4841; }
.url-field { display: flex; background: white; border: 1px solid #cfc5b8; border-radius: 2px; align-items: center; }
.url-field:focus-within { border-color: var(--red); box-shadow: 0 0 0 2px rgba(187,63,53,.08); }
.url-field input { border: none; outline: none; width: 100%; padding: 13px 14px; font: 14px var(--mono); background: transparent; }
.url-field span { border-left: 1px solid #ddd4c8; padding: 13px 14px; color: #716b63; font: 13px var(--mono); white-space: nowrap; }
.field-hint { font-size: 11px; color: #57815c; display: flex; align-items: center; gap: 6px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #63a36a; }
.field-hint.error { color: var(--red); }.field-hint.error .status-dot { background: var(--red); }
.divider { border-top: 1px dashed var(--line); margin: 31px 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row input, textarea { margin-top: 8px; width: 100%; border: 1px solid #cfc5b8; padding: 12px 13px; background: white; outline: none; border-radius: 2px; }
textarea { resize: vertical; line-height: 1.9; min-height: 190px; margin-top:0; border-top:0; }
.field-row input:focus, textarea:focus { border-color: var(--red); }
.markdown-toolbar { height:37px; border:1px solid #cfc5b8; background:#f5efe6; display:flex; align-items:center; padding:0 7px; margin-top:8px; }
.markdown-toolbar button { width:29px; height:27px; border:0; background:transparent; color:#655f57; font:12px var(--mono); border-radius:2px; }
.markdown-toolbar button:hover { background:#e6ddd1; color:var(--red); }
.markdown-toolbar > span { margin-left:auto; padding-right:5px; color:#9b9389; font:8px var(--mono); letter-spacing:1px; text-transform:uppercase; }
.text-meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 10px var(--mono); margin-top: 5px; }
.text-meta button { border: 0; background: transparent; padding: 2px; font-size: 10px; color: var(--muted); }
.text-meta b { color: var(--ink); }
.image-uploader { display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:12px 13px;border:1px dashed #c8bcad;background:#f7f0e6 }
.image-uploader > div { display:flex;flex-direction:column;gap:3px }.image-uploader b{font-size:11px}.image-uploader small{font-size:8px;color:var(--muted)}
.image-pick{border:1px solid var(--line);background:white;padding:8px 11px;font-size:9px;cursor:pointer}.image-pick input{display:none}
.image-upload-status{min-height:16px;color:var(--muted);font-size:9px;margin-top:5px}
.image-grid-editor{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.image-item{aspect-ratio:1;position:relative;overflow:hidden;background:#ddd}.image-item img{width:100%;height:100%;object-fit:cover}.image-item button{position:absolute;right:3px;top:3px;width:22px;height:22px;border:0;border-radius:50%;background:#201d19cc;color:white;padding:0;font-size:13px}
.mini-themes { display: grid; grid-template-columns: repeat(6,1fr); gap: 9px; }
.mini-theme { aspect-ratio: 1; border: 1px solid #cfc5b8; padding: 0; background: var(--swatch); border-radius: 2px; position: relative; }
.mini-theme::after { content: ""; width: 30%; height: 1px; background: var(--accent); position: absolute; left: 35%; top: 50%; box-shadow: 0 -5px var(--accent), 0 5px var(--accent); opacity: .7; }
.mini-theme.selected { outline: 2px solid var(--red); outline-offset: 2px; }
.letter-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px; }
.letter-options label { display:flex; align-items:flex-start; gap:9px; border:1px solid var(--line); padding:11px; background:#fffdf9; cursor:pointer; }
.letter-options input { width:auto; margin:2px 0 0; accent-color:var(--red); }
.letter-options span { display:flex; flex-direction:column; gap:3px; }
.letter-options b { font-size:10px; }.letter-options small { color:var(--muted); font-size:8px; line-height:1.5; }
.purchase-btn { border: none; background: var(--red); color: white; width: 100%; margin-top: 28px; padding: 15px 20px; display: flex; justify-content: space-between; text-align: left; align-items: center; }
.purchase-btn span { display: flex; flex-direction: column; gap: 3px; }
.purchase-btn small { font-size: 9px; opacity: .7; font-weight: 400; }
.purchase-btn strong { font: 20px var(--mono); }.purchase-btn i { font-style: normal; margin-left: 9px; }
.secure-note { text-align: center; font-size: 9px; color: var(--muted); }
.preview-wrap { background: #ded6c9; padding: 28px 6%; display: flex; flex-direction: column; min-width: 0; }
.preview-toolbar { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 14px; font-family: var(--mono); color: #655f57; }
.preview-toolbar i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #64a76d; margin-right: 6px; }
.preview-toolbar button { border: 0; background: transparent; }
.letter-preview { --preview-ink:#583f43; position: relative; flex: 1; min-height: 600px; padding: 12% 12% 10%; color: var(--preview-ink); background-color: #fff8f2; box-shadow: 0 12px 30px rgba(42,32,25,.14); overflow: hidden; transition: background .25s; }
.preview-decoration { position: absolute; inset: 0; pointer-events: none; }
.theme-rose { background: linear-gradient(135deg,#fff9f4,#f7e8e5); --preview-ink:#70484a; }
.theme-rose .preview-decoration::before { content:"❀"; position:absolute; right:7%; top:5%; font-size:70px; color:#c87c78; opacity:.35; transform:rotate(15deg); }
.theme-night { background: radial-gradient(circle at 80% 20%,#35466d,#121827 60%); --preview-ink:#eee8d7; }
.theme-night .preview-decoration::before { content:"✦  ·  ✧  ·  ✦"; position:absolute; top:8%; left:10%; color:#e8d58e; letter-spacing:13px; }
.theme-ocean { background: linear-gradient(160deg,#f4fbf9 20%,#b9dfe1); --preview-ink:#25565b; }
.theme-ocean .preview-decoration::after { content:"～～～～～～～～"; position:absolute; bottom:4%; left:0; font-size:40px; color:#fff; opacity:.6; letter-spacing:-9px; }
.theme-vintage { background:#e6d3af; --preview-ink:#513e29; box-shadow:inset 0 0 60px #886d4940; }
.theme-vintage .preview-decoration { border:9px double #79604455; inset:16px; }
.theme-forest { background:linear-gradient(135deg,#eef0df,#cbd3b0); --preview-ink:#34472f; }
.theme-forest .preview-decoration::before { content:"☘"; position:absolute; right:5%; bottom:1%; font-size:120px; opacity:.18; }
.theme-sakura { background:linear-gradient(#fff8fa,#f6dce5); --preview-ink:#754551; }
.theme-sakura .preview-decoration::before { content:"✿　·　✿"; position:absolute; top:5%; right:5%; font-size:34px; color:#cf8fa5; }
.theme-minimal { background:#fff; --preview-ink:#1d1d1d; border-top:8px solid #1d1d1d; }
.theme-sun { background:linear-gradient(150deg,#fffbe9,#f3cc75); --preview-ink:#6e4a1f; }
.theme-sun .preview-decoration::before { content:"☀"; position:absolute; right:6%; top:2%; font-size:95px; opacity:.2; }
.theme-lavender { background:linear-gradient(140deg,#fbf8ff,#dcd2ec); --preview-ink:#514267; }
.theme-lavender .preview-decoration::before { content:"❋"; position:absolute; left:4%; bottom:3%; font-size:90px; opacity:.18; }
.theme-candy { background:linear-gradient(135deg,#fff2f4 25%,#e7f6f4 25% 50%,#fff9dc 50% 75%,#eee8ff 75%); background-size:36px 36px; --preview-ink:#694d5c; }
.theme-candy::before { content:""; position:absolute; inset:20px; background:#fffdfadf; }
.theme-candy > * { position:relative; }
.theme-ink { background:#eee9df; --preview-ink:#211f1b; }
.theme-ink .preview-decoration::before { content:"山"; position:absolute; right:-1%; bottom:-12%; font-size:250px; font-weight:700; opacity:.055; }
.theme-space { background:radial-gradient(circle at 20% 15%,#784e8f,#241f46 55%,#121329); --preview-ink:#f1e9fa; }
.theme-space .preview-decoration { background-image:radial-gradient(#fff 1px,transparent 1px); background-size:28px 28px; opacity:.25; }
.theme-custom { background:linear-gradient(var(--custom-angle,145deg),var(--custom-start),var(--custom-end)); --preview-ink:var(--custom-ink); }
.theme-custom .preview-decoration::before { content:var(--custom-decoration); position:absolute; right:7%; top:4%; color:var(--custom-accent); font-size:82px; opacity:.22; transform:rotate(8deg); }
.theme-custom[data-decoration-position="top-left"] .preview-decoration::before { left:7%;right:auto }
.theme-custom[data-decoration-position="bottom-left"] .preview-decoration::before { left:7%;right:auto;top:auto;bottom:3% }
.theme-custom[data-decoration-position="bottom-right"] .preview-decoration::before { top:auto;bottom:3% }
.theme-custom[data-pattern="dots"] { background-image:radial-gradient(var(--custom-accent) 1px,transparent 1px),linear-gradient(var(--custom-angle),var(--custom-start),var(--custom-end));background-size:20px 20px,auto }
.theme-custom[data-pattern="grid"] { background-image:linear-gradient(#fff3 1px,transparent 1px),linear-gradient(90deg,#fff3 1px,transparent 1px),linear-gradient(var(--custom-angle),var(--custom-start),var(--custom-end));background-size:28px 28px,28px 28px,auto }
.theme-custom[data-pattern="stars"] { background-image:radial-gradient(#fff 1px,transparent 2px),linear-gradient(var(--custom-angle),var(--custom-start),var(--custom-end));background-size:31px 31px,auto }
.theme-custom[data-pattern="paper"] { background-image:repeating-linear-gradient(0deg,#00000008 0 1px,transparent 1px 5px),linear-gradient(var(--custom-angle),var(--custom-start),var(--custom-end)) }
.theme-custom[data-font="modern"] { font-family:Arial,"Microsoft YaHei",sans-serif }.theme-custom[data-font="handwriting"] { font-family:cursive }
.theme-custom[data-border="single"] { box-shadow:inset 0 0 0 9px var(--custom-accent),0 12px 30px rgba(42,32,25,.14) }
.theme-custom[data-border="double"] { box-shadow:inset 0 0 0 5px var(--custom-accent),inset 0 0 0 10px #ffffff99,inset 0 0 0 13px var(--custom-accent),0 12px 30px rgba(42,32,25,.14) }
.theme-custom { border-radius:var(--custom-radius,0); }
.theme-custom::after { content:"";position:absolute;inset:0;background-image:var(--custom-background);background-size:cover;background-position:center;opacity:var(--custom-background-opacity,0);pointer-events:none;z-index:0 }
.theme-custom > * { position:relative;z-index:1 }.theme-custom .preview-content { text-align:var(--custom-text-align,left);line-height:var(--custom-line-height,2.25) }
.theme-custom .preview-decoration::before { font-size:var(--custom-decoration-size,82px);opacity:var(--custom-decoration-opacity,.22) }
.preview-date { font: 10px var(--mono); letter-spacing: 1px; opacity: .7; margin-bottom: 50px; }
.preview-to { font-size: 14px; margin-bottom: 35px; }
.preview-content { line-height: 2.25; font-size: 14px; min-height: 260px; position: relative; overflow-wrap:anywhere; }
.preview-content p { margin:0 0 1em; }
.preview-content h2,.preview-content h3 { font-size:1.15em; margin:1.5em 0 .6em; font-weight:600; }
.preview-content blockquote { margin:1.3em 0; padding:.2em 0 .2em 1.2em; border-left:2px solid currentColor; opacity:.78; }
.preview-content ul { margin:1em 0; padding-left:1.5em; }
.preview-content a { color:inherit; text-underline-offset:3px; }
.preview-content hr { border:0; border-top:1px solid currentColor; opacity:.25; margin:1.8em 25%; }
.preview-image-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:22px 0}.preview-image-gallery:empty{display:none}.preview-image-gallery img{width:100%;aspect-ratio:1;object-fit:cover}
.preview-from { text-align: right; font-size: 13px; margin-top: 35px; }
.preview-stamp { position: absolute; bottom: 6%; left: 8%; width: 58px; height: 58px; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center; text-align:center; font:8px var(--mono); opacity:.35; transform:rotate(-10deg); }
.preview-stamp b { font-size: 11px; }
.preview-url { display: flex; align-items: center; gap: 8px; background: #cfc6b8; padding: 10px 14px; margin-top: 12px; font: 10px var(--mono); color: #625c54; }
.preview-url b { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.preview-url button { border:0; background:transparent; font-size:10px; }

.styles-section { background: #24211d; padding: 110px 6vw 125px; color: #f7f0e6; }
.section-heading.light > p:last-child { color: #9d958a; }
.style-grid { display:grid; grid-template-columns:repeat(4,1fr); gap: 18px; max-width:1300px; margin:auto; }
.style-card { border:1px solid #514b43; padding:13px; cursor:pointer; transition:.25s; background:#2a2722; }
.style-card:hover { transform:translateY(-6px); border-color:#8d8375; }
.style-paper { height:185px; background:var(--card-bg); position:relative; overflow:hidden; color:var(--card-ink); display:flex; align-items:center; justify-content:center; }
.style-paper::before { content:"Dear you,"; font:italic 13px Georgia; z-index:1; }
.style-paper::after { content:""; position:absolute; width:43%; height:1px; background:currentColor; box-shadow:0 10px currentColor,0 20px currentColor; opacity:.3; top:55%; left:29%; }
.style-info { display:flex; justify-content:space-between; align-items:center; padding:14px 3px 2px; }
.style-info h3 { margin:0 0 4px; font-size:14px; font-weight:500; }.style-info p { margin:0; font:9px var(--mono); color:#8f887e; }
.style-info span { font:10px var(--mono); color:#70695f; }
.how-section { padding: 115px 7vw; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); max-width:1100px; margin:auto; border-top:1px solid var(--line); }
.steps article { padding:45px 8%; position:relative; border-right:1px solid var(--line); }
.steps article:last-child { border-right:0; }
.steps article > span { font:10px var(--mono); color:var(--red); position:absolute; right:8%; top:20px; }
.step-icon { font-size:32px; color:var(--red); height:55px; }
.steps h3 { font-size:18px; }.steps p { font-size:12px; line-height:1.8; color:var(--muted); }
footer { background:#ece4d8; border-top:1px solid var(--line); padding:35px 6vw; display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--muted); }
footer .brand { font-size:16px; color:var(--ink); }

dialog { border:0; padding:40px; width:min(440px,calc(100% - 32px)); max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); overflow:auto; background:#fffaf2; color:var(--ink); box-shadow:0 30px 100px #0006; text-align:center; }
dialog::backdrop { background:#1d1914c9; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.dialog-close { position:absolute; right:15px; top:12px; border:0; background:none; font-size:24px; color:#777; }
.pay-icon { margin:auto; width:47px; height:47px; border-radius:50%; display:grid; place-items:center; color:white; background:var(--red); }
dialog .eyebrow { justify-content:center; margin-top:18px; }
dialog h2 { margin:8px 0; font-size:25px; }.dialog-desc, #success-dialog > p { font-size:12px; color:var(--muted); }
.order-card { margin:24px 0 14px; background:#f1e8dc; padding:15px; display:grid; grid-template-columns:1fr auto; text-align:left; font-size:12px; gap:8px; }
.order-card small { grid-column:1/-1; font:10px var(--mono); color:var(--muted); }
.pay-methods { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pay-methods button { background:white; border:1px solid var(--line); padding:12px; font-size:11px; }.pay-methods button.selected { border-color:var(--red); color:var(--red); }
.confirm-pay { width:100%; background:var(--red); color:white; border:0; padding:14px; margin-top:16px; }
.payment-disclaimer { font-size:9px; color:#999; }
.success-check { margin:auto; width:55px; height:55px; display:grid; place-items:center; border-radius:50%; background:#dceada; color:#4b8c51; font-size:26px; }
.success-link { display:flex; border:1px solid var(--line); padding:11px; margin:25px 0 8px; font:10px var(--mono); }.success-link span { flex:1; text-align:left; }.success-link button { border:0;background:none;color:var(--red);font-size:10px; }
.manage-link { display:block; border:1px solid var(--red); color:var(--red); text-decoration:none; padding:12px; margin-top:10px; font-size:11px; }
.preview-wrap.fullscreen { position:fixed; z-index:101; inset:0; padding:30px max(20px,20vw); }

@media (max-width: 900px) {
  nav a { display:none; }
  .hero { grid-template-columns:1fr; padding-top:55px; }
  .hero-art { height:410px; }
  .studio { grid-template-columns:1fr; }.editor-panel { border-right:0; border-bottom:1px solid var(--line); }
  .style-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 580px) {
  .site-header { padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right)); }.hero { padding:45px max(24px,env(safe-area-inset-right)) 75px max(24px,env(safe-area-inset-left)); }.hero h1 { letter-spacing:-2px;font-size:44px; }
  .hero-actions { align-items:flex-start; }.hero-art { transform:scale(.78); margin:0 -50px; }
  .editor-section { padding:85px 15px; }.editor-panel { padding:32px 22px; }.preview-wrap { padding:18px 15px; }
  .letter-preview { min-height:540px; }.mini-themes { grid-template-columns:repeat(6,1fr); gap:5px; }
  .letter-options { grid-template-columns:1fr; }
  .style-grid { grid-template-columns:1fr; }.style-paper { height:220px; }
  .steps { grid-template-columns:1fr; }.steps article { border-right:0;border-bottom:1px solid var(--line); }
  footer { flex-direction:column; gap:15px;text-align:center; }.float-note { display:none; }
  input, textarea { font-size:16px!important; }
  dialog { padding:32px 22px max(25px,env(safe-area-inset-bottom)); }
}