:root { --ink:#171716; --ink-2:#292821; --paper:#f5efe4; --canvas:#ded8ce; --gold:#c7a45a; --gold-pale:#e8dbb8; --line:rgba(23,23,22,.14); --muted:#6e6b63; --surface:rgba(255,252,246,.72); --shadow:0 28px 80px rgba(30,26,18,.16); --headline:"Playfair Display", Georgia, serif; --ui:"DM Sans", Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font-family:var(--ui); }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline:3px solid color-mix(in srgb, var(--gold) 65%, white); outline-offset:2px; }
.app-shell { max-width:1600px; min-height:100vh; margin:auto; background:linear-gradient(140deg, #f3ede3 0%, #ece7de 55%, #e1dcd1 100%); padding:0 42px 42px; overflow:hidden; }
.topbar { height:94px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:12px; }
.brand>span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--ink); color:var(--paper); font-family:var(--headline); font-weight:700; font-size:17px; }
.brand div { display:grid; gap:1px; }
.brand strong { letter-spacing:-.03em; font-size:16px; }.brand small { color:var(--muted); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.save-area { display:flex; gap:14px; align-items:center; }.save-indicator { color:var(--muted); font-size:12px; }.save-button, #readyButton { border:0; border-radius:999px; background:var(--ink); color:var(--paper); padding:12px 17px; font-weight:700; font-size:13px; box-shadow:0 9px 22px rgba(23,23,22,.14); }
.intro { display:grid; grid-template-columns:1.2fr 1fr 250px; gap:56px; align-items:end; padding:70px 4px 54px; }.eyebrow { margin:0 0 10px; color:#8d6c29; text-transform:uppercase; letter-spacing:.16em; font-size:10px; font-weight:700; }
h1,h2,h3,p { margin-top:0; }.intro h1 { margin:0; max-width:670px; font-family:var(--headline); font-size:clamp(46px,5vw,82px); line-height:.98; letter-spacing:-.055em; font-weight:600; }.intro h1 em { color:var(--gold); font-style:italic; }.intro-copy { max-width:410px; margin:0 0 5px; color:#615e56; line-height:1.7; font-size:15px; }
.phase-card { padding:18px; border:1px solid var(--line); background:rgba(255,253,247,.48); border-radius:18px; }.phase-card span { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:9px; font-weight:700; }.phase-card strong { display:block; margin:8px 0 14px; font-family:var(--headline); font-size:17px; }.phase-track { display:flex; gap:5px; }.phase-track i { flex:1; height:4px; border-radius:9px; background:#d6cfc2; }.phase-track i.active { background:var(--gold); }
.workspace { display:grid; grid-template-columns:388px minmax(0, 1fr); background:rgba(255,253,247,.57); border:1px solid rgba(23,23,22,.11); border-radius:28px; overflow:hidden; box-shadow:var(--shadow); }.controls-panel { padding:30px; background:rgba(250,247,240,.77); border-right:1px solid var(--line); min-height:735px; }.panel-heading h2 { margin:0 0 8px; font-family:var(--headline); font-size:29px; letter-spacing:-.04em; }.panel-heading>p:last-child { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.control-tabs { display:grid; grid-template-columns:repeat(4, 1fr); margin:28px 0 24px; padding:4px; background:#e8e1d6; border-radius:12px; }.control-tabs button { border:0; border-radius:9px; padding:9px 2px; background:transparent; color:var(--muted); font-size:11px; font-weight:700; }.control-tabs button.active { background:#fffdf9; color:var(--ink); box-shadow:0 2px 7px rgba(0,0,0,.08); }.control-page { display:none; }.control-page.active { display:block; animation:fade .22s ease; } @keyframes fade { from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none} }
.section-copy { display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; }.section-copy>span { display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px; border-radius:50%; background:var(--gold-pale); color:#84621e; font-family:var(--headline); font-size:12px; }.section-copy h3 { margin:0 0 4px; font-size:14px; }.section-copy p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.direction-grid,.palette-grid { display:grid; gap:10px; }.direction-card,.palette-card { width:100%; position:relative; overflow:hidden; text-align:left; border:1px solid var(--line); border-radius:14px; background:#fffdf9; padding:12px; transition:.18s ease; }.direction-card:hover,.palette-card:hover { transform:translateY(-2px); border-color:var(--gold); }.direction-card.active,.palette-card.active { border:2px solid var(--gold); padding:11px; }.direction-card strong,.palette-card strong { display:block; font-size:13px; }.direction-card small,.palette-card small { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.35; }.mini-layout { height:53px; display:grid; grid-template-columns:1.2fr .8fr; gap:4px; margin-bottom:10px; }.mini-layout i { display:block; border-radius:4px; background:#ded6c8; }.mini-layout i:first-child { background:var(--ink); }.mini-layout.two { grid-template-columns:.45fr 1fr; }.mini-layout.three { grid-template-columns:repeat(3,1fr); }.mini-layout.four { grid-template-columns:1fr; }.mini-layout.four i:nth-child(1) { height:18px; }.mini-layout.four i:nth-child(n+2) { display:none; }
.field { display:grid; gap:7px; margin-top:18px; }.field label,.color-fields label { color:var(--muted); font-size:11px; font-weight:600; }.field select { border:1px solid var(--line); border-radius:10px; background:#fffdf9; color:var(--ink); padding:11px; }.palette-grid { grid-template-columns:1fr 1fr; }.palette-card { min-height:80px; }.swatches { display:flex; gap:4px; margin-bottom:9px; }.swatches i { width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.08); }.color-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }.color-fields label { display:grid; gap:7px; }.color-fields input { width:100%; height:38px; padding:2px; border:1px solid var(--line); border-radius:10px; background:#fffdf9; }
.module-list,.notes-list { display:grid; gap:9px; }.module-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:13px; background:#fffdf9; padding:12px; }.module-row strong { display:block; font-size:13px; }.module-row small { color:var(--muted); font-size:10px; }.toggle { appearance:none; width:37px; height:22px; border:0; border-radius:99px; background:#cfc8bb; position:relative; transition:.18s; }.toggle::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:white; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:.18s; }.toggle:checked { background:var(--gold); }.toggle:checked::after { transform:translateX(15px); }.note-card { border:1px solid var(--line); border-radius:13px; background:#fffdf9; padding:12px; }.note-card label { display:block; margin-bottom:7px; font-size:12px; font-weight:700; }.note-card textarea { width:100%; resize:vertical; min-height:62px; border:0; border-top:1px solid var(--line); padding:9px 0 0; background:transparent; color:var(--ink); font-size:12px; line-height:1.45; }
.preview-stage { min-width:0; padding:25px; background:linear-gradient(130deg,rgba(223,216,204,.7),rgba(247,243,235,.3)); }.preview-toolbar,.preview-caption { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; }.preview-toolbar>div:first-child { display:flex; align-items:center; gap:8px; font-weight:700; }.live-dot { width:8px; height:8px; border-radius:50%; background:#769d7d; box-shadow:0 0 0 4px rgba(118,157,125,.14); }.device-switch { display:flex; gap:3px; padding:3px; border-radius:9px; background:rgba(255,255,255,.5); }.device-switch button { border:0; border-radius:7px; padding:6px 9px; background:transparent; color:var(--muted); font-size:10px; }.device-switch .active { background:white; color:var(--ink); }
.product-preview { min-height:620px; margin:16px 0; overflow:hidden; border:10px solid var(--ink); border-radius:19px; background:var(--paper); color:var(--ink); transition:background .25s; }.product-preview * { box-sizing:border-box; }.preview-caption { gap:14px; }.preview-caption span { flex:0 0 auto; padding:6px 8px; border-radius:999px; background:rgba(199,164,90,.17); color:#866521; text-transform:uppercase; font-size:9px; font-weight:700; letter-spacing:.1em; }.preview-caption p { margin:0 auto 0 0; }.preview-caption button { border:0; background:transparent; color:var(--ink); text-decoration:underline; font-size:11px; font-weight:700; }
/* Preview systems */
.ct-preview { min-height:600px; padding:22px; background:var(--preview-bg,var(--paper)); color:var(--preview-text,var(--ink)); }.pv-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:11px; }.pv-logo { display:flex; gap:8px; align-items:center; font-family:var(--headline); font-size:18px; font-weight:700; }.pv-logo b { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--preview-text,var(--ink)); color:var(--preview-bg,var(--paper)); font-family:var(--headline); font-size:11px; }.pv-links { display:flex; gap:16px; color:color-mix(in srgb,var(--preview-text) 60%,transparent); }.pv-action { border:0; border-radius:99px; padding:9px 12px; background:var(--preview-text); color:var(--preview-bg); font-size:10px; font-weight:700; }.hero-title { font-family:var(--headline); font-size:clamp(32px,4vw,52px); letter-spacing:-.055em; line-height:1; }.label { display:block; color:var(--gold); font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.property-photo { min-height:130px; border-radius:14px; background:linear-gradient(120deg, rgba(0,0,0,.12),transparent 55%), url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1100&q=80') center/cover; }.property-photo.coast { background-image:linear-gradient(120deg, rgba(0,0,0,.1),transparent 55%),url('https://images.unsplash.com/photo-1613977257363-707ba9348227?auto=format&fit=crop&w=900&q=80'); }.property-photo.mountain { background-image:linear-gradient(120deg, rgba(0,0,0,.1),transparent 55%),url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80'); }.property-meta { padding:10px 0 2px; }.property-meta strong { display:block; font-family:var(--headline); font-size:19px; }.property-meta small { color:color-mix(in srgb,var(--preview-text) 62%,transparent); font-size:11px; }.cards { display:grid; gap:12px; }.card { padding:11px; border:1px solid color-mix(in srgb,var(--preview-text) 14%,transparent); border-radius:14px; background:color-mix(in srgb,var(--preview-bg) 88%,white); }.assistant-mini { padding:13px; border-radius:12px; background:color-mix(in srgb,var(--gold) 16%,var(--preview-bg)); font-size:12px; }.assistant-mini b { color:var(--gold); }.module-tags { display:flex; flex-wrap:wrap; gap:6px; }.module-tags span { padding:5px 8px; border:1px solid color-mix(in srgb,var(--preview-text) 15%,transparent); border-radius:99px; font-size:9px; }
.layout-one .pv-hero { display:grid; grid-template-columns:1.18fr .82fr; gap:22px; align-items:end; margin:44px 0 20px; }.layout-one .hero-title { margin:8px 0; }.layout-one .cards { grid-template-columns:1.25fr .75fr; }.layout-one .wide-card { grid-row:span 2; }.layout-one .property-photo { min-height:290px; }.layout-one .short .property-photo { min-height:100px; }.layout-one .assistant-mini { margin:16px 0; }
.layout-two { display:grid; grid-template-columns:42% 58%; padding:0; }.layout-two .pv-sidebar { padding:22px; background:color-mix(in srgb,var(--preview-text) 96%,#000); color:var(--preview-bg); }.layout-two .pv-sidebar .pv-logo b { background:var(--preview-bg); color:var(--preview-text); }.layout-two .pv-sidebar .hero-title { margin:44px 0 14px; }.layout-two .pv-sidebar .module-tags span { border-color:rgba(255,255,255,.22); }.layout-two .map-surface { min-height:620px; position:relative; padding:22px; background:linear-gradient(45deg, transparent 47%,rgba(72,79,67,.15) 48% 50%,transparent 51%),repeating-linear-gradient(-27deg,#d9dfd7 0 23px,#c7cec6 24px 26px); }.layout-two .map-surface::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 60% 34%,rgba(199,164,90,.32),transparent 23%), linear-gradient(104deg,transparent 0 66%,rgba(85,132,137,.54) 67%); }.map-card { position:relative; z-index:1; margin-top:390px; padding:10px; border-radius:14px; background:var(--preview-bg); box-shadow:0 14px 30px rgba(0,0,0,.18); }.map-card .property-photo { min-height:90px; }.pin { position:absolute; z-index:2; display:grid; place-items:center; width:38px;height:38px;border:3px solid var(--preview-bg);border-radius:50%;background:var(--gold);color:var(--ink);font-size:9px;font-weight:700; }.pin.one{left:36%;top:27%}.pin.two{left:68%;top:46%}.pin.three{left:50%;top:63%}
.layout-three .pv-hero { margin:40px 0 20px; max-width:580px; }.layout-three .hero-title { margin:10px 0; }.category-row { display:flex; gap:8px; margin:18px 0 24px; overflow:hidden; }.category-row span { flex:0 0 auto; padding:8px 11px; border-radius:99px; background:color-mix(in srgb,var(--preview-text) 8%,transparent); font-size:10px; font-weight:700; }.category-row span:first-child { background:var(--preview-text); color:var(--preview-bg); }.layout-three .cards { grid-template-columns:repeat(3,1fr); }.layout-three .property-photo { min-height:190px; }.layout-three .property-meta strong { font-size:16px; }.layout-three .assistant-mini { margin-top:18px; display:flex; justify-content:space-between; gap:12px; }
.layout-four { padding:0; }.layout-four .pv-nav { padding:22px 24px; }.layout-four .venture-hero { min-height:300px; padding:80px 24px 24px; background:linear-gradient(90deg,rgba(17,17,15,.88),rgba(17,17,15,.22)),url('https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=1300&q=80') center/cover; color:var(--paper); }.layout-four .venture-hero .hero-title { max-width:480px; margin:9px 0 10px; }.layout-four .venture-hero p { max-width:400px; margin:0; color:rgba(255,255,255,.72); font-size:13px; line-height:1.5; }.layout-four .venture-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; padding:24px; }.layout-four .property-photo { min-height:230px; }.ventures-card { padding:18px; border-radius:14px; background:var(--preview-text); color:var(--preview-bg); }.ventures-card h3 { margin:8px 0 28px; font-family:var(--headline); font-size:25px; }.ventures-card div { display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid rgba(255,255,255,.2); font-size:11px; }.ventures-card span { color:var(--gold); }
.ready-section { display:flex; align-items:end; justify-content:space-between; gap:40px; margin:38px 4px 0; padding:36px 0 10px; border-top:1px solid var(--line); }.ready-section h2 { margin:0 0 8px; font-family:var(--headline); font-size:34px; letter-spacing:-.045em; }.ready-section p:last-child { max-width:590px; margin:0; color:var(--muted); font-size:13px; line-height:1.55; }.ready-section #readyButton { background:var(--gold); color:var(--ink); min-width:220px; }
.toast { position:fixed; left:50%; bottom:28px; z-index:10; transform:translate(-50%,100px); border-radius:999px; background:var(--ink); color:var(--paper); padding:12px 18px; font-size:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:transform .25s; }.toast.show { transform:translate(-50%,0); }
@media(max-width:1050px){ .app-shell{padding:0 22px 28px}.intro{grid-template-columns:1fr 1fr;gap:26px;padding:48px 4px}.phase-card{display:none}.workspace{grid-template-columns:330px 1fr}.controls-panel{padding:22px}.preview-stage{padding:18px}.layout-three .cards{grid-template-columns:repeat(2,1fr)}.layout-three .cards .card:last-child{display:none} }
@media(max-width:760px){ .app-shell{padding:0 14px 24px}.topbar{height:76px}.save-indicator{display:none}.save-button{padding:10px 13px}.intro{display:block;padding:38px 4px 34px}.intro h1{font-size:50px}.intro-copy{margin-top:20px}.workspace{display:block;border-radius:20px}.controls-panel{min-height:0;border-right:0;border-bottom:1px solid var(--line)}.preview-stage{padding:13px}.product-preview{border-width:6px;min-height:520px}.ct-preview{min-height:500px;padding:16px}.pv-links{display:none}.layout-one .pv-hero,.layout-four .venture-grid{grid-template-columns:1fr}.layout-one .cards{grid-template-columns:1fr 1fr}.layout-one .property-photo{min-height:160px}.layout-one .wide-card{grid-row:auto}.layout-one .wide-card .property-photo{min-height:160px}.layout-two{grid-template-columns:1fr}.layout-two .pv-sidebar{padding:16px;min-height:235px}.layout-two .pv-sidebar .hero-title{margin:25px 0 10px}.layout-two .map-surface{min-height:330px}.layout-two .map-card{margin-top:140px}.layout-three .cards{grid-template-columns:1fr 1fr}.layout-three .property-photo{min-height:130px}.layout-four .venture-hero{padding:72px 16px 20px}.layout-four .venture-grid{padding:16px}.ready-section{display:block;margin-top:25px;padding-top:25px}.ready-section h2{font-size:29px}.ready-section #readyButton{margin-top:18px;width:100%}.preview-caption p{display:none}.preview-caption{justify-content:space-between}.palette-grid{grid-template-columns:1fr 1fr} }