:root{--bg: #f5f3ee;--surface: #ffffff;--surface-2: #efece3;--border: #e3dfd3;--ink: #17161c;--muted: #6b675c;--accent: #cc3b1a;--accent-soft: #ff5a36;--accent-ink: #fff2ee;--accent-hover: #a92f14;--danger: #b3261e;--danger-bg: #fdecea;--radius-sm: 8px;--radius: 14px;--radius-lg: 20px;--shadow: 0 12px 32px rgba(23, 22, 28, .08);--shadow-sm: 0 2px 8px rgba(23, 22, 28, .06);--font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;--font-hand: "Caveat", cursive}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-ui);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button,input,select,textarea{font-family:inherit;font-size:14px}h1,h2,h3{font-family:var(--font-ui);letter-spacing:-.01em}button{cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);padding:9px 15px;display:inline-flex;align-items:center;gap:6px;transition:background .15s ease,border-color .15s ease,transform .1s ease}button:hover{background:var(--surface-2)}button:active{transform:translateY(1px)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}button.primary:hover{background:var(--accent-hover)}button.ghost{background:transparent;border-color:transparent}button.ghost:hover{background:var(--surface-2)}button.danger{background:var(--danger-bg);border-color:#f4c3bd;color:var(--danger)}button.small{padding:5px 10px;font-size:12px}button.icon-only{padding:10px;min-width:40px;min-height:40px;justify-content:center}button:disabled{opacity:.35;cursor:not-allowed}input,select{background:var(--surface);border:1px solid var(--border);color:var(--ink);border-radius:var(--radius-sm);padding:9px 11px}input[type=color]{padding:3px;width:42px;height:36px}input[type=range]{padding:0}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}.muted{color:var(--muted)}.badge{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;background:var(--accent-ink);border:1px solid #ffd8cc;font-size:12px;font-weight:700;color:var(--accent-hover)}.logo{display:flex;align-items:center;gap:12px;color:var(--ink);min-width:0}.logo-mark{flex:0 0 auto;overflow:visible;color:var(--ink)}.logo-stroke{stroke-dasharray:1;stroke-dashoffset:1;animation:logo-draw 1.5s cubic-bezier(.65,0,.35,1) forwards}.logo-pen{opacity:0;color:var(--accent);animation:logo-pen-fade 1.5s steps(1) forwards}@keyframes logo-draw{to{stroke-dashoffset:0}}@keyframes logo-pen-fade{0%{opacity:1}90%{opacity:1}to{opacity:0}}.logo-word{display:flex;flex-direction:column;overflow:hidden;justify-content:center;min-width:0}.logo-word-text{font-family:var(--font-hand);font-weight:700;font-size:calc(var(--logo-size, 44px) * .72);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;clip-path:inset(0 100% 0 0);animation:logo-reveal .6s ease 1.2s forwards}.logo-caption{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;animation:logo-caption-in .5s ease 1.8s forwards}@keyframes logo-reveal{to{clip-path:inset(0 0 0 0)}}@keyframes logo-caption-in{to{opacity:1}}.login-screen{min-height:100dvh;display:grid;place-items:center;padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));background:radial-gradient(1200px 600px at 10% -10%,#fff,transparent),var(--bg)}.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 34px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}.login-sub{margin:-4px 0 6px;font-size:13px}.error{color:var(--danger);font-size:13px}.dashboard{max-width:1180px;margin:0 auto;padding:calc(28px + env(safe-area-inset-top)) 24px 60px}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;gap:8px}.dashboard-header .logo{flex:1 1 auto;min-width:0}.dashboard-header button{flex:0 0 auto}.hero-panel{margin-bottom:40px}.hero-panel h1{font-size:26px;margin:0 0 4px}.create-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.create-choice{flex-direction:column;align-items:flex-start;text-align:left;gap:8px;padding:20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}.create-choice:hover{border-color:var(--accent)}.create-choice strong{font-size:15px}.create-icon{width:34px;height:34px;border-radius:9px;display:block}.create-icon-visual{background:linear-gradient(135deg,var(--accent-soft),var(--accent))}.create-icon-page{background:linear-gradient(135deg,#34d1c5,#0f766e)}.create-icon-document{background:linear-gradient(135deg,#9c8bff,#5b3df0)}.library-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.library-header h2{font-size:18px;margin:0}.library-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.filter-tabs{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:999px}.filter-tabs button{border:none;background:transparent;padding:6px 13px;border-radius:999px;font-size:13px}.filter-tabs button.active{background:var(--surface);box-shadow:var(--shadow-sm);font-weight:700}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.project-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}.project-card:hover{border-color:var(--accent);transform:translateY(-2px)}.project-thumb{height:140px;background:var(--surface-2);display:grid;place-items:center}.project-thumb img{width:100%;height:100%;object-fit:cover}.project-meta{padding:12px 14px;display:flex;flex-direction:column;gap:3px}.project-card button.danger{margin:0 14px 14px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#17161c73;display:grid;place-items:center;z-index:100;padding:16px}.modal{background:var(--surface);border-radius:var(--radius-lg);padding:26px;width:380px;max-width:100%;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}.modal h2{margin:0 0 4px;font-size:18px}.modal label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}.type-choice{display:flex;gap:8px;flex-wrap:wrap}.type-btn{flex:1 1 auto;justify-content:center}.type-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.editor{display:flex;flex-direction:column;height:100vh;background:var(--bg)}.editor-header{display:flex;align-items:center;gap:14px;padding:calc(10px + env(safe-area-inset-top)) 18px 10px;border-bottom:1px solid var(--border);background:var(--surface);min-width:0}.editor-header .logo{flex:0 1 auto;min-width:0}.project-name-input{background:transparent;border:1px solid transparent;font-size:15px;font-weight:700;width:200px;min-width:0;flex:1 1 120px;text-overflow:ellipsis}.project-name-input:hover,.project-name-input:focus{border-color:var(--border);outline:none}.editor-header-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}.history-controls{display:flex;gap:2px;border-right:1px solid var(--border);padding-right:10px;margin-right:2px}.save-status{font-size:12px;white-space:nowrap}.editor-loading{display:grid;place-items:center;height:100vh;color:var(--muted)}.page-nav{display:flex;gap:8px;padding:8px 18px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap}.page-pill{border-radius:999px;padding:6px 14px;font-size:13px}.page-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}.editor-body{flex:1;display:flex;min-height:0}.rail{width:92px;flex:0 0 auto;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:12px 8px;overflow-y:auto}.rail-btn{flex-direction:column;gap:5px;border:none;background:transparent;padding:12px 4px;border-radius:var(--radius-sm);font-size:11px;color:var(--ink)}.rail-btn:hover{background:var(--accent-ink);color:var(--accent-hover)}.rail-file{position:relative}.editor-main{flex:1;overflow:auto;background:#eae7de;position:relative;min-width:0}.zoom-control{position:sticky;top:12px;left:12px;z-index:10;display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 6px;box-shadow:var(--shadow-sm);margin:12px}.zoom-control button{padding:6px;border-radius:999px}.zoom-control span{font-size:12px;min-width:40px;text-align:center}.zoom-control .context-sep{height:18px;margin:0 2px}.zoom-control .bg-swatch{width:24px;height:24px}.canvas-scroll{min-height:calc(100% - 64px);display:grid;place-items:center;padding:40px}.artboard-frame{position:relative;overflow:hidden;box-shadow:var(--shadow);flex:0 0 auto}.artboard{position:absolute;top:0;left:0;transform-origin:top left}.resize-handle{position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;background:var(--accent);border:2px solid #fff;border-radius:4px;cursor:nwse-resize;touch-action:none;box-shadow:var(--shadow-sm)}.resize-handle:after{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px}@media(pointer:coarse){.resize-handle{width:26px;height:26px;right:-13px;bottom:-13px;border-width:3px}}.page-scroll{min-height:100%;display:flex;justify-content:center;padding:24px}.page-canvas{width:100%;max-width:900px;background:#fff;color:#17161c;min-height:100%;box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden}.block{position:relative}.block-selected{outline:2px dashed var(--accent);outline-offset:-2px}.block-toolbar{position:absolute;top:8px;right:8px;display:none;gap:4px;z-index:5}.block:hover .block-toolbar,.block-selected .block-toolbar{display:flex}.block-toolbar button{padding:3px 9px;font-size:11px}.block-hero{padding:88px 40px}.block-hero h2{font-size:38px;margin:0 0 10px;outline:none}.block-hero p{font-size:16px;opacity:.85;margin:0;outline:none}.block-text{padding:52px 40px;max-width:760px;margin:0 auto}.block-text h3{margin:0 0 8px;outline:none}.block-text p{color:#4b4941;line-height:1.65;outline:none}.block-image img{width:100%;display:block}.upload-placeholder{display:grid;place-items:center;height:220px;background:var(--surface-2);color:var(--muted);cursor:pointer}.block-columns{padding:52px 40px;max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:28px}.block-columns div{outline:none;padding:10px;border-radius:var(--radius-sm)}.block-columns div:hover{background:var(--surface-2)}.block-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px}.gallery-item{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm)}.gallery-item img{width:100%;height:100%;object-fit:cover}.gallery-remove{position:absolute;top:4px;right:4px;padding:2px 7px;font-size:11px}.gallery-add{aspect-ratio:1;height:auto;border-radius:var(--radius-sm)}.block-button{padding:40px}.cta{display:inline-block;padding:13px 28px;border-radius:999px;color:#fff;font-weight:700;outline:none}.block-quote{padding:60px;max-width:700px;margin:0 auto;text-align:center}.block-quote p{font-size:24px;font-style:italic;margin:0 0 14px;outline:none}.block-quote span{color:var(--muted);font-size:14px;outline:none}.block-spacer{height:60px}.block-w-full{width:100%;margin:0}.block-w-contained{max-width:900px;margin:0 auto}.block-w-narrow{max-width:620px;margin:0 auto}.text-size-sm{font-size:18px}.text-size-md{font-size:24px}.text-size-lg{font-size:32px}.text-size-xl{font-size:42px}.format-bar{position:sticky;top:6px;z-index:6;display:inline-flex;gap:2px;margin-bottom:10px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px;box-shadow:var(--shadow-sm)}.format-bar button.icon-only{min-width:30px;min-height:30px;padding:6px}.block-navbar{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;flex-wrap:wrap;gap:10px}.block-navbar span[contenteditable]{outline:none}.navbar-brand{font-weight:800}.navbar-links{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}.cta-hero{margin-top:22px;background:var(--accent)}.block-features{padding:60px 40px;max-width:1000px;margin:0 auto}.features-title{text-align:center;margin:0 0 32px;outline:none}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}.feature-card{padding:22px;border:1px solid var(--border);border-radius:var(--radius)}.feature-card .feature-dot{display:block;width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent-soft),var(--accent));margin-bottom:12px}.feature-card strong{display:block;margin-bottom:5px;outline:none}.feature-card span[contenteditable]{color:var(--muted);font-size:14px;outline:none}.block-testimonial{padding:56px 40px;max-width:680px;margin:24px auto;text-align:center;border-radius:var(--radius-lg)}.block-testimonial p{font-size:21px;font-style:italic;margin:0 0 16px;outline:none}.testimonial-author{display:flex;flex-direction:column;gap:2px}.testimonial-author strong{outline:none}.testimonial-author span{color:var(--muted);font-size:13px;outline:none}.block-video{padding:24px 40px}.block-video>iframe,.block-video>video{display:block;width:100%;max-width:900px;aspect-ratio:16/9;margin:0 auto;border:0;border-radius:var(--radius-sm);background:#000}.block-video .upload-placeholder{height:auto;padding:30px;background:var(--surface-2)}.block-video .upload-placeholder input{width:100%;max-width:420px;text-align:center}.block-divider{padding:0 40px}.block-divider hr{border:none;margin:0}.block-footer{padding:40px;text-align:center;display:flex;flex-direction:column;gap:6px}.block-footer span[contenteditable]{outline:none}.block-footer span:last-child{font-size:13px;opacity:.7}.block-html-preview{padding:4px;min-height:40px}.block-html-preview img{max-width:100%}.image-caption{display:block;text-align:center;font-size:13px;color:var(--muted);padding:8px 12px;outline:none}.code-panel{border-top:1px solid var(--border);background:var(--surface-2);flex:0 0 auto}.code-panel-header{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;font-weight:700;color:var(--muted)}.code-panel-header span{flex:1}button.ghost.icon-only.active{background:var(--accent-ink);color:var(--accent-hover)}.context-bar{display:none}.context-swatch{width:34px;height:34px;border-radius:999px;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);flex:0 0 auto;cursor:pointer;display:grid;place-items:center;color:#fff;overflow:hidden}.context-swatch input{position:absolute;opacity:0;width:1px;height:1px}.context-sep{width:1px;height:22px;background:var(--border);flex:0 0 auto}.panel-dock{display:none}.panel{width:260px;flex:0 0 auto;background:var(--surface);border-left:1px solid var(--border);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.panel-section{display:flex;flex-direction:column;gap:8px}.panel-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.panel-row{display:flex;gap:6px;flex-wrap:wrap}.panel-row button,.panel-row select,.panel-row input:not([type=range]){flex:1 1 0;min-width:0;padding:8px;justify-content:center}.panel-inline{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}.panel-inline input[type=range]{flex:1}.panel-delete{justify-content:center;margin-top:auto}.panel-close{display:none}@media(min-width:901px){.panel-dock{display:block}}@media(max-width:900px){.dashboard{padding:calc(20px + env(safe-area-inset-top)) 16px 40px}.create-choices{grid-template-columns:1fr}.library-header{flex-direction:column;align-items:stretch}.library-controls{justify-content:space-between}.editor{height:100dvh}.editor-header{padding:calc(8px + env(safe-area-inset-top)) 10px 8px;gap:8px}.editor-header .logo-word{display:none}.project-name-input{width:100px;font-size:13px}.save-status,.editor-header .badge,.hide-compact{display:none}.editor-header-actions{gap:6px}.editor-body{flex-direction:column;min-height:0}.rail{width:100%;flex-direction:row;border-right:none;border-top:1px solid var(--border);order:3;overflow-x:auto;padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:2px}.rail-btn{flex-direction:row;font-size:12px;padding:10px 12px;white-space:nowrap;min-height:40px}.editor-main{order:2}.canvas-scroll{padding:20px}.panel-dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--border);border-radius:18px 18px 0 0;box-shadow:0 -8px 24px #0000001f;max-height:45vh;overflow-y:auto;transform:translateY(100%);transition:transform .2s ease;padding-bottom:env(safe-area-inset-bottom)}.panel-dock.open{transform:translateY(0)}.panel{width:100%;border-left:none;padding-top:6px}.panel-close{display:block;position:sticky;top:0;margin-left:auto;background:var(--surface-2);border-radius:999px;padding:6px 12px;min-height:36px}.page-canvas{border-radius:0}.context-bar{display:flex;align-items:center;gap:6px;position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px;box-shadow:var(--shadow);z-index:20}}@media(max-width:520px){.dashboard-header{flex-wrap:wrap}.modal{padding:20px}}