@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
:root{
  color-scheme:light dark;
  --bg:#eef2ef; --tray:#e1e9e3; --surface:#ffffff; --surface-2:#f6f8f7;
  --ink:#1c1717; --ink-2:#4c4a49; --ink-3:#6b6866; --line:#dfe3e0; --line-2:#c9d0cb;
  --shell:#1c1717; --shell-ink:#f3eeec; --shell-2:#2c2524;
  --ver:#c2311b; --ver-hover:#a52816; --ver-soft:#fbe4df; --on-ver:#fff;
  --focus:rgba(210,58,34,.25);
  --shadow-sm:0 1px 2px rgba(28,23,23,.06);
  --shadow:0 1px 2px rgba(28,23,23,.05),0 10px 26px -12px rgba(28,23,23,.22);
  --shadow-lg:0 2px 6px rgba(28,23,23,.05),0 30px 70px -28px rgba(28,23,23,.4);
  --r:12px; --r-lg:18px; --ease:cubic-bezier(.16,1,.3,1);
  font-family:"Bricolage Grotesque",system-ui,sans-serif; color:var(--ink); background:var(--bg);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1211; --tray:#141a17; --surface:#191d1b; --surface-2:#1f2421; --ink:#eef1ef; --ink-2:#b5bcb8; --ink-3:#97a09b; --line:#272e2a; --line-2:#36403a;
  --shell:#0a0b0b; --shell-2:#1e2321; --ver:#ff6a4d; --ver-hover:#ff8669; --ver-soft:#3b201a; --on-ver:#1e0904; --focus:rgba(255,106,77,.32);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 10px 28px -12px rgba(0,0,0,.7); --shadow-lg:0 30px 70px -28px rgba(0,0,0,.85);
}}
*{box-sizing:border-box}
html{scrollbar-color:var(--line-2) var(--bg)}
html{background-color:var(--bg)}
body{margin:0;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;background-color:var(--bg)}
::selection{background:var(--ver-soft);color:var(--ink)}
a{color:var(--ver);text-underline-offset:3px}
a:hover{color:var(--ver-hover)}
:focus-visible{outline:2px solid var(--ver);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:30;border-radius:8px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg{width:18px;height:18px;flex:none}
kbd{font:inherit;font-size:11.5px;padding:1px 6px;border-radius:5px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 1px 0 var(--line-2)}

.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;height:64px;padding:0 20px;background:var(--shell);color:var(--shell-ink)}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.02em}
.brand:hover{color:#fff}
.brand svg{width:28px;height:28px}
.bar-nav{display:flex;gap:4px}
.bar-nav a{color:#cfc6c3;text-decoration:none;font-size:14px;padding:7px 12px;border-radius:999px;transition:background-color .2s,color .2s}
.bar-nav a:hover{background:var(--shell-2);color:#fff}
.bar-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.btn-group{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--shell-2)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;border:1px solid transparent;font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s,box-shadow .25s var(--ease),transform .25s var(--ease),opacity .2s}
.btn-primary{background:var(--ver);color:var(--on-ver);box-shadow:0 8px 18px -8px rgba(0,0,0,.35)}
.btn-primary:hover{background:var(--ver-hover);color:var(--on-ver);transform:translateY(-1px)}
.btn-quiet{background:transparent;color:var(--shell-ink);border-color:#463b39}
.btn-quiet:hover,.btn-quiet[aria-pressed=true]{border-color:#a99a96;color:#fff}
.btn-quiet[aria-pressed=true]{background:var(--shell-2)}
.btn-icon{width:34px;height:34px;padding:0;background:transparent;color:var(--shell-ink)}
.btn-icon:hover:not(:disabled){background:#3a312f}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-line{background:var(--surface);color:var(--ink);border-color:var(--line-2);height:36px}
.btn-line:hover{border-color:var(--ink-3)}
.btn-block{width:100%}
.btn-danger{color:var(--ver)}

/* App frame */
.app{display:grid;grid-template-columns:260px minmax(0,1fr) 320px;min-height:calc(100vh - 64px)}
.rail{background:var(--surface);padding:22px 18px;border-right:1px solid var(--line);position:sticky;top:64px;max-height:calc(100vh - 64px);overflow:auto}
.props{border-right:0;border-left:1px solid var(--line)}
.rail-title{font-size:16px;margin:0 0 4px;letter-spacing:-.01em;font-weight:700}
.rail-sub{font-size:14px;margin:0 0 10px;font-weight:700}
.rail-hint{font-size:13px;color:var(--ink-2);margin:0 0 14px}
.palette-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:6px}
.pal{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);font:inherit;text-align:left;cursor:grab;transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease),background-color .2s}
.pal:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-1px);background:var(--surface)}
.pal:active{cursor:grabbing}
.pal-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--ver-soft);color:var(--ver);flex:none}
.pal-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pal-txt strong{font-size:14px;font-weight:600}
.pal-txt small{font-size:12px;color:var(--ink-3)}
.page-settings{border-top:1px solid var(--line);padding-top:18px}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;min-width:0}
.field>span{font-size:12.5px;font-weight:500;color:var(--ink-2)}
input,select,textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:8px 11px;width:100%;min-width:0;caret-color:var(--ver);transition:border-color .2s,box-shadow .2s,background-color .2s}
textarea{resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ver);background:var(--surface);box-shadow:0 0 0 4px var(--focus)}
input[type=color]{height:38px;padding:3px;cursor:pointer}
input[type=range]{padding:0;accent-color:var(--ver);background:none;border:0;box-shadow:none}
input[type=file]{font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.aligns{display:flex;gap:4px;padding:3px;background:var(--bg);border-radius:10px}
.aligns label{flex:1;position:relative}
.aligns input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.aligns span{display:grid;place-items:center;height:32px;border-radius:8px;color:var(--ink-2);transition:background-color .2s,color .2s}
.aligns input:checked+span{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.aligns input:focus-visible+span{outline:2px solid var(--ver)}
.props-type{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.props-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.warn{font-size:12.5px;color:var(--ver);margin:-4px 0 10px}

/* Tray and page */
.tray{background:var(--tray);padding:20px 32px 48px;min-width:0}
.tray-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 auto 14px;max-width:980px;font-size:12.5px;color:var(--ink-2)}
.tray-head p{margin:0}
.tray-status::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#2f9e6a;margin-right:7px;vertical-align:1px}
.page{max-width:980px;margin:0 auto;min-height:540px;border-radius:16px;box-shadow:var(--shadow-lg);padding:28px 22px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.page:empty::before{content:"Drag blocks here to start your page";display:grid;place-items:center;min-height:420px;border:2px dashed var(--line-2);border-radius:14px;color:var(--ink-3);font-size:15px}
.blk{position:relative;border-radius:12px;padding:10px 12px;outline:1px solid transparent;transition:outline-color .2s,background-color .2s;cursor:pointer}
.blk:hover{outline-color:color-mix(in srgb,var(--ver) 35%,transparent)}
.blk[aria-selected=true]{outline:2px solid var(--ver);background:color-mix(in srgb,var(--ver) 4%,transparent)}
.blk:focus-visible{outline:2px solid var(--ver);outline-offset:2px}
.blk.dragging{opacity:.4}
.blk-bar{position:absolute;top:-14px;right:10px;display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--shell);box-shadow:var(--shadow);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .25s var(--ease);pointer-events:none;z-index:2}
.blk:hover .blk-bar,.blk[aria-selected=true] .blk-bar,.blk:focus-within .blk-bar{opacity:1;transform:none;pointer-events:auto}
.blk-bar button{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:999px;background:none;color:#f3eeec;cursor:pointer}
.blk-bar button:hover{background:#3a312f}
.blk-bar svg{width:15px;height:15px}
.blk-tag{position:absolute;top:-11px;left:12px;font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--ver);color:var(--on-ver);opacity:0;transition:opacity .2s}
.blk[aria-selected=true] .blk-tag{opacity:1}
.seam{height:0;margin:0 12px;border-radius:999px;background:var(--ver);box-shadow:0 0 0 4px var(--ver-soft);transition:height .15s var(--ease)}
.seam.on{height:4px;margin-top:4px;margin-bottom:4px}
.blk .lp-form input,.blk .lp-form textarea,.blk .lp-btn{pointer-events:none}

/* Preview mode */
body.previewing .palette,body.previewing .props,body.previewing .tray-head,body.previewing .blk-bar,body.previewing .blk-tag{display:none}
body.previewing .app{grid-template-columns:1fr}
body.previewing .blk{outline:0!important;background:none!important;cursor:default}
body.previewing .blk .lp-form input,body.previewing .blk .lp-form textarea,body.previewing .blk .lp-btn{pointer-events:auto}

.below{padding:72px 28px;max-width:1280px;margin:0 auto}
.below-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.below-grid>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.below-grid>div:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.below h2{font-size:20px;margin:0 0 8px;letter-spacing:-.02em}
.below p{margin:0;color:var(--ink-2);max-width:60ch}
.links{margin:0;padding-left:18px}
.ad-slot{margin:32px auto 0;max-width:980px}
.foot{padding:28px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line);text-align:center}
.foot p{margin:4px 0}
.small{font-size:12px;color:var(--ink-3)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg)}
.toast[data-kind=error]{background:var(--ver);color:var(--on-ver)}

.doc{max-width:720px;margin:0 auto;padding:56px 28px 80px}
.doc h1{font-size:clamp(32px,5vw,48px);line-height:1.06;letter-spacing:-.035em;margin:0 0 16px;text-wrap:balance}
.doc h2{font-size:23px;margin:48px 0 10px;letter-spacing:-.02em}
.doc p,.doc li{font-size:16.5px;line-height:1.7;max-width:62ch}
.doc .lede{font-size:19px;color:var(--ink-2)}
.doc .cta{margin-top:28px}

@media (max-width:1180px){.app{grid-template-columns:240px minmax(0,1fr)}.props{grid-column:1/-1;position:static;max-height:none;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:760px){
  .bar{gap:8px;padding:0 10px}.bar-nav,#btn-preview span{display:none}#btn-preview{width:40px;padding:0}
  .btn-primary{padding:0 14px}
  .app{grid-template-columns:1fr}.rail{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line)}
  .palette-list{grid-template-columns:1fr 1fr}.pal-txt small{display:none}
  .tray{padding:16px 10px 32px}.page{padding:20px 10px}.tray-keys{display:none}
  .below-grid{grid-template-columns:1fr}.below{padding:48px 12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:430px){.brand span{display:none}}
p{text-wrap:pretty}