:root{color-scheme:light;--bg:#eef4ec;--panel:#fffefa;--ink:#142920;--accent:#21694d;--muted:#4c6458;--line:#d0ded3;--soft:#e3eee3;--lime:#ddff78;--lime-ink:#192820;--shadow:0 15px 45px #14392b18;font-family:"DM Sans","Segoe UI",system-ui,sans-serif}
:root[data-theme=dark]{color-scheme:dark;--bg:#111e18;--panel:#182a22;--ink:#f1faf1;--accent:#a1e3bc;--muted:#b0c5b7;--line:#3b5143;--soft:#233b2e;--shadow:0 15px 45px #0005}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--bg:#111e18;--panel:#182a22;--ink:#f1faf1;--accent:#a1e3bc;--muted:#b0c5b7;--line:#3b5143;--soft:#233b2e;--shadow:0 15px 45px #0005}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink)}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.52}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.13;letter-spacing:-.045em}
p{line-height:1.65;color:var(--muted)}
img{display:block}
.wrap{width:min(1200px,calc(100% - 32px));margin-inline:auto}
.skip{position:fixed;top:10px;left:10px;z-index:10;background:var(--panel);padding:10px;transform:translateY(-165%)}
.skip:focus{transform:none}
.top{background:var(--panel);border-bottom:1px solid var(--line)}
.nav-row,.top nav,.brand,.actions{display:flex;align-items:center}
.nav-row{min-height:68px;justify-content:space-between;gap:9px}
.top nav{gap:clamp(8px,2.3vw,22px);font-weight:700;font-size:.88rem}
.top nav a:hover:not(.button),.footer nav a:hover,.crumb a:hover{color:var(--accent)}
.brand{gap:8px;font-weight:850;font-size:1.2rem;white-space:nowrap;letter-spacing:-.055em;width:max-content}
.brand b{color:var(--accent)}
.button,.theme{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border:1px solid transparent;border-radius:8px;padding:9px 13px;font-size:.87rem;font-weight:750;line-height:1.2;white-space:nowrap}
.button.primary{background:var(--lime);color:var(--lime-ink);border-color:#99b84c}
.button.plain,.theme{background:var(--panel);color:var(--ink);border-color:var(--line)}
.button:hover:not(:disabled){filter:brightness(.94)}
.button.plain[aria-pressed=true]{background:var(--soft);border-color:var(--accent)}
.button.small{min-height:36px;padding:6px 8px;font-size:.8rem}
.theme{width:40px;padding:0;font-size:1.1rem}
.hero{display:grid;gap:24px;align-items:center;padding-block:clamp(34px,7vw,94px)}
.eyebrow{display:flex;align-items:center;gap:7px;color:var(--accent);margin-bottom:10px;font-weight:850;font-size:.68rem;letter-spacing:.14em}
.eyebrow span{width:7px;height:7px;border-radius:50%;background:currentColor}
.hero h1{font-size:clamp(3.65rem,9vw,7.9rem);line-height:.9;letter-spacing:-.083em;font-weight:860}
.hero h1 em{color:var(--accent);font-style:normal}
.lead{font-size:clamp(1rem,2vw,1.18rem);max-width:59ch;margin-top:16px}
.actions{flex-wrap:wrap;gap:8px}
.hero .actions,.content>.actions{margin-top:19px;gap:14px}
.under,.link-grid a{font-weight:750;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:.88rem}
.quiet{font-size:.83rem;margin-top:10px}
.art{overflow:hidden;background:#15332a;border:1px solid #426454;border-radius:17px;padding:15px 16px 22px;box-shadow:var(--shadow);background-image:linear-gradient(90deg,#e1f7df15 1px,transparent 1px),linear-gradient(#e1f7df15 1px,transparent 1px);background-size:22px 22px}
.art-head{display:flex;justify-content:space-between;gap:8px;color:#d4e9da;font-weight:700;letter-spacing:.1em;font-size:.64rem;margin-bottom:18px}
.art-head b{color:#ddff78}
.art-card{width:min(230px,69%);margin:0 auto 15px;padding:9px;background:#fbfff2;border-radius:13px;box-shadow:11px 12px 22px #001d14a0;transform:rotate(-6deg);animation:reveal .55s ease-out both}
.art-card img{width:100%;height:auto}
.art>p{color:#c2dccb;text-align:center;font-size:.67rem;letter-spacing:.1em}
@keyframes reveal{from{opacity:.75;transform:translateY(10px) rotate(-3deg)}to{opacity:1;transform:translateY(0) rotate(-6deg)}}
.stripe{background:var(--panel);border-block:1px solid var(--line);padding-block:15px}
.three,.extras{display:grid;gap:10px}
.steps h2{font-size:1.05rem}
.steps p{font-size:.87rem}
.content,.workspace{padding-block:clamp(20px,4vw,47px) 29px}
.content.compact{padding-bottom:5px}
.content h1{font-size:clamp(2.45rem,6vw,5rem)}
.content>h2{font-size:clamp(1.65rem,4vw,2.65rem);margin-bottom:12px}
.content .three,.content .link-grid,.reading,.faq{margin-top:18px}
.panel,.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.template-card{overflow:hidden;transition:transform .18s,border-color .18s}
.template-card:hover,.guide:hover{border-color:var(--accent);transform:translateY(-3px)}
.template-card>div:last-child{padding:11px}
.template-card h3,.guide h3{font-size:1.09rem}
.template-card p,.guide p{font-size:.86rem;margin-top:4px}
.tile{background:#dceadd;display:grid;place-items:center;min-height:143px}
.tile.studio{background:#d9edf4}
.tile.counter{background:#d9ebbe}
.tile img{width:112px;height:125px;object-fit:contain}
.guide{padding:14px;transition:transform .18s,border-color .18s}
.guide b{display:block;color:var(--accent);font-size:.83rem;margin-top:9px}
.link-grid{display:flex;flex-wrap:wrap;gap:10px 18px}
.cta{padding:clamp(14px,3vw,25px);margin-block:22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.cta h2{font-size:1.65rem}
.reading{max-width:70ch}
.reading section{margin-bottom:19px}
.reading h2{font-size:1.35rem;margin-bottom:5px}
.faq{max-width:820px;display:grid;gap:8px}
.faq details{padding:12px}
.faq p{margin-top:7px}
summary{font-weight:750;cursor:pointer}
.footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-block:15px;margin-top:16px}
.footer p{font-size:.81rem;margin-top:5px}
.footer nav{display:flex;flex-wrap:wrap;gap:9px 14px;font-size:.81rem;font-weight:700}
.crumb{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;color:var(--muted);font-size:.78rem}
.editor-top,.preview-head{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:10px}
.editor-top h1{font-size:clamp(2rem,5vw,4rem)}
.status{font-size:.82rem;min-height:1.35em;color:var(--accent);margin:6px 0}
.status:empty{display:none}
.work-grid{display:grid;gap:12px;align-items:start;margin-top:12px}
.controls,.preview{padding:clamp(12px,2.4vw,23px);min-width:0}
.controls h2,.preview h2{font-size:1.3rem}
.controls>p{font-size:.86rem;margin-top:7px}
label{display:grid;gap:4px;font-weight:750;font-size:.83rem;min-width:0}
.controls>label,.controls>.button{margin-top:10px}
input,textarea,select{width:100%;min-width:0;min-height:42px;padding:8px 9px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:6px;font-size:.93rem}
input[type=color]{cursor:pointer;padding:5px}
input[type=file]{font-size:.8rem}
textarea{resize:vertical}
.fields{display:grid;gap:8px;margin-top:8px}
.fields label.check{display:flex;align-items:center;gap:5px}
.check input{width:17px;min-height:26px}
.settings{grid-template-columns:repeat(2,minmax(0,1fr))}
.settings .wide{grid-column:1/-1}
.controls details{border-top:1px solid var(--line);margin-top:13px;padding-top:9px}
.preview-head .eyebrow{margin-bottom:5px}
.phone{margin:11px auto 7px;padding:8px 11px 13px;background:#132c23;border-radius:23px;width:min(100%,280px);box-shadow:var(--shadow)}
.phone-bar{background:#416554;width:46px;height:5px;border-radius:10px;margin:1px auto 8px}
.phone-screen{background:#f7faf6;border-radius:13px;aspect-ratio:.91;display:grid;place-items:center;padding:10px}
.phone-screen img{max-width:100%;max-height:100%;object-fit:contain}
.phone-screen p{color:#425d50;text-align:center;font-size:.86rem}
.exports{margin-top:9px}
.extras{margin-top:12px}
.record{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding:8px 0;overflow-wrap:anywhere}
.record>div:first-child{min-width:0}
.record p{font-size:.82rem}
#records{margin-top:9px}
@media(max-width:575px){.top nav>a:not(.button){display:none}.nav-row{min-height:59px}.top .button{padding-inline:8px}.theme{width:36px}}
@media(min-width:650px){.three{grid-template-columns:repeat(3,minmax(0,1fr))}.extras{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:820px){.wrap{width:min(1200px,calc(100% - 64px))}.hero{grid-template-columns:1.1fr .9fr}.art{padding:22px 25px 26px}.art-card{width:250px}.work-grid{grid-template-columns:1.12fr .88fr}.preview{position:sticky;top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}