@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
/* THEME */
:root{--color-primary:#166534;--color-primary-hover:#14532D;--color-primary-soft:#EAF5ED;--color-background:#F6F8F6;--color-surface:#FFFFFF;--color-text:#202124;--color-text-secondary:#555B65;--color-border:#DDE4DE;--color-on-primary:#FFFFFF;--color-error:#9F241D;--color-error-soft:#FDECEB;--color-error-border:#E7AAA5;--color-success:#166534;--color-success-soft:#EAF5ED;--color-disabled-text:#555B65;--color-disabled-background:#E7ECE8;--color-focus-soft:rgba(22,101,52,.2);--color-backdrop:rgba(32,33,36,.45);--shadow-soft:0 3px 12px rgba(32,33,36,.08);--shadow-popup:0 8px 35px rgba(32,33,36,.18);--shadow-dialog:0 20px 100px rgba(32,33,36,.25);--font-size-body:16px;--font-size-control:15px;--font-size-small:13px;--font-size-section-heading:20px;--font-size-page-heading:30px;}

/* APPLICATION */
body:has(dialog[open]){overflow:hidden;}
*{box-sizing:border-box;}
body{margin:0px;background:var(--color-background);font-family:'DM Sans',sans-serif;font-size:var(--font-size-body);color:var(--color-text);line-height:1.5;}
button{font:inherit;outline-offset:4px;cursor:pointer;border:0px;background:none;color:inherit;-webkit-tap-highlight-color:transparent;font-size:var(--font-size-control);}
input{font:inherit;outline-offset:4px;font-size:var(--font-size-body);color:var(--color-text);}
textarea{font:inherit;outline-offset:4px;font-size:var(--font-size-body);color:var(--color-text);}
a{outline-offset:4px;text-decoration:none;-webkit-tap-highlight-color:transparent;color:var(--color-primary);}
button:disabled{opacity:1;color:var(--color-disabled-text);background:var(--color-disabled-background);cursor:not-allowed;box-shadow:none;}
.app{display:flex;min-height:100vh;}
.sidebar{width:238px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;padding:31px 18px 16px;position:fixed;inset:0 auto 0 0;z-index:10;overflow-y:auto;}
.brand{font-family:Manrope,sans-serif;font-weight:800;font-size:var(--font-size-page-heading);display:flex;align-items:center;gap:7px;letter-spacing:-.4px;padding:0 5px;color:var(--color-text);white-space:nowrap;}
.brand-icon{display:grid;place-items:center;background:var(--color-primary);color:var(--color-on-primary);border-radius:10px 10px 10px 3px;width:27px;height:31px;flex-shrink:0;font-size:var(--font-size-section-heading);}
.brand-dot{color:var(--color-primary);margin-left:-8px;}
.workspace{display:flex;align-items:center;gap:10px;margin:36px 0 32px;padding:12px 9px;border:1px solid var(--color-border);border-radius:9px;font-weight:650;font-size:var(--font-size-body);}
.workspace>svg{margin-left:auto;color:var(--color-text-secondary);}
small{display:block;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.workspace small{font-weight:400;margin-top:4px;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.profile small{font-weight:400;margin-top:4px;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.avatar{width:34px;height:34px;background:var(--color-primary-soft);color:var(--color-text-secondary);border-radius:50%;display:grid;place-items:center;font-size:var(--font-size-small);font-weight:700;flex-shrink:0;}
.avatar.dark{background:var(--color-primary-soft);color:var(--color-text-secondary);border-radius:8px;}
.avatar.small{width:29px;height:29px;font-size:var(--font-size-small);}
.nav-label{letter-spacing:1.5px;font-weight:600;padding:0 13px;margin-bottom:12px;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.nav{width:100%;display:flex;align-items:center;padding:12px 14px;color:var(--color-text-secondary);margin:3px 0;border-radius:7px;text-align:left;font-size:var(--font-size-control);padding-left:10px;padding-right:10px;gap:8px;}
.nav span{margin-left:auto;font-size:var(--font-size-small);background:var(--color-primary-soft);padding:2px 6px;border-radius:4px;}
.nav.chosen{font-weight:600;background:var(--color-primary-soft);color:var(--color-primary);}
.sidebar-note{margin:auto 9px 27px;padding:20px 17px;background:var(--color-primary-soft);border-radius:11px;position:relative;}
.mini-spark{font-size:var(--font-size-section-heading);color:var(--color-text-secondary);display:block;margin-bottom:14px;}
.sidebar-note strong{font-family:Manrope;line-height:1.45;letter-spacing:-.5px;font-size:var(--font-size-body);color:var(--color-text);}
.sidebar-note p{color:var(--color-text-secondary);line-height:1.8;margin:9px 0 15px;font-size:var(--font-size-small);}
.sidebar-note button{display:flex;gap:18px;font-weight:600;align-items:center;padding:0;font-size:var(--font-size-control);color:var(--color-primary);}
.profile{border-top:1px solid var(--color-border);display:flex;align-items:center;gap:10px;padding:19px 8px 0;font-weight:600;font-size:var(--font-size-body);}
.online{margin-left:auto;width:6px;height:6px;background:var(--color-primary);border-radius:50%;}
.dashboard{margin-left:238px;width:calc(100% - 238px);}
.editor-main{margin-left:238px;width:calc(100% - 238px);display:flex;flex-direction:column;height:100dvh;overflow:hidden;}
.topbar{height:77px;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 35px;gap:15px;min-width:0;}
.breadcrumb{display:flex;align-items:center;gap:15px;min-width:0;flex:1;white-space:nowrap;overflow:hidden;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.breadcrumb strong{font-weight:500;color:var(--color-text);}
.breadcrumb span{color:var(--color-text-secondary);}
.breadcrumb button{padding:0;font-size:var(--font-size-control);}
.top-right{display:flex;align-items:center;gap:24px;flex-shrink:0;white-space:nowrap;min-width:0;}
.private{display:flex;align-items:center;gap:6px;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.private span{width:5px;height:5px;border-radius:50%;background:var(--color-primary);}
.dashboard-content{padding:42px 38px;max-width:1600px;margin:auto;}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.eyebrow{letter-spacing:1.6px;font-weight:600;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.page-heading h1{font-family:Manrope;font-weight:750;letter-spacing:-1.1px;margin:11px 0;font-size:var(--font-size-page-heading);color:var(--color-text);line-height:1.3;}
.page-heading h1 span{color:var(--color-text-secondary);}
.page-heading p{margin:0;color:var(--color-text-secondary);font-size:var(--font-size-body);}
.primary{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;padding:12px 17px;font-weight:550;box-shadow:var(--shadow-soft);gap:8px;background:var(--color-primary);color:var(--color-on-primary);font-size:var(--font-size-control);}
.primary:hover{background:var(--color-primary-hover);color:var(--color-on-primary);}
.summary{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr;border:1px solid var(--color-border);background:var(--color-surface);border-radius:10px;margin:31px 0 36px;padding:23px 0;}
.summary>div{display:flex;align-items:center;gap:12px;padding:0 24px;border-right:1px solid var(--color-border);min-width:0;}
.summary>div:last-child{border:0;}
.stat-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:var(--font-size-section-heading);}
.lavender{background:var(--color-primary-soft);color:var(--color-text-secondary);}
.peach{background:var(--color-primary-soft);color:var(--color-text-secondary);}
.sage{background:var(--color-primary-soft);color:var(--color-text-secondary);}
.summary strong{font-family:Manrope;font-size:var(--font-size-section-heading);font-weight:700;}
.summary small{margin-top:3px;font-size:var(--font-size-small);color:var(--color-text-secondary);line-height:1.4;}
.summary .summary-message{display:block;color:var(--color-text-secondary);padding-top:5px;font-size:var(--font-size-body);}
.summary-message span{display:block;margin-top:8px;font-size:var(--font-size-small);color:var(--color-text-secondary);line-height:1.5;}
.project-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-border);margin-bottom:25px;}
.tabs{display:flex;gap:25px;}
.tabs button{padding:0 0 17px;color:var(--color-text-secondary);position:relative;font-size:var(--font-size-control);}
.tabs button.active{font-weight:600;color:var(--color-primary);}
.tabs button.active:after{content:'';height:2px;position:absolute;bottom:-1px;left:0;right:0;background:var(--color-primary);}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);padding:8px 11px;margin-bottom:11px;color:var(--color-text-secondary);}
.search input{border:0;background:none;width:143px;outline:none;font-size:var(--font-size-body);color:var(--color-text);}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.project-card{text-align:left;padding:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:11px;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.project-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);}
.project-preview{height:180px;position:relative;background:var(--color-primary-soft);display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;color:var(--color-text-secondary);overflow:hidden;}
.project-preview.website>span:not(.project-type){font-size:var(--font-size-small);color:var(--color-text-secondary);}
.project-preview img{width:100%;height:100%;object-fit:cover;}
.project-type{position:absolute;bottom:12px;left:12px;padding:5px 8px;border-radius:5px;background:var(--color-surface);display:flex;align-items:center;gap:5px;font-family:'DM Sans',sans-serif;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.preview-lines{display:flex;gap:7px;}
.preview-lines i{width:37px;height:20px;border-radius:4px;background:var(--color-primary-soft);}
.card-info{padding:17px 18px;}
.card-info h3{font-weight:600;margin:0 0 7px;display:flex;justify-content:space-between;gap:5px;font-size:var(--font-size-section-heading);color:var(--color-text);line-height:1.4;}
.card-info h3 svg{color:var(--color-text-secondary);}
.card-info p{margin:0 0 19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.card-info>div{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.card-info>div span:first-child{display:flex;align-items:center;gap:5px;}
.new-card{border:1px dashed var(--color-border);background:var(--color-background);min-height:287px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-text-secondary);}
.new-card>span{background:var(--color-primary-soft);color:var(--color-text-secondary);border-radius:12px;width:47px;height:47px;display:grid;place-items:center;margin-bottom:19px;font-size:var(--font-size-section-heading);}
.new-card strong{font-weight:500;font-size:var(--font-size-body);color:var(--color-text);}
.new-card p{color:var(--color-text-secondary);font-size:var(--font-size-body);}
.demo-banner{background:var(--color-primary-soft);border:1px solid var(--color-border);border-radius:12px;margin-top:30px;padding:27px 24px;display:flex;align-items:center;gap:22px;}
.demo-art{width:65px;height:65px;border-radius:18px;color:var(--color-text-secondary);background:var(--color-primary-soft);display:grid;place-items:center;transform:rotate(-8deg);flex-shrink:0;}
.demo-banner .eyebrow{font-size:var(--font-size-small);color:var(--color-text-secondary);}
.demo-banner h2{font-family:Manrope;letter-spacing:-.4px;font-weight:650;margin:7px 0;font-size:var(--font-size-section-heading);color:var(--color-text);line-height:1.4;}
.demo-banner p{color:var(--color-text-secondary);margin:0;font-size:var(--font-size-body);}
.demo-banner>button{margin-left:auto;display:flex;align-items:center;gap:9px;white-space:nowrap;font-weight:500;font-size:var(--font-size-control);color:var(--color-primary);}
footer{display:flex;justify-content:space-between;margin-top:40px;font-size:var(--font-size-small);color:var(--color-text-secondary);}
footer span{letter-spacing:2px;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.empty{display:flex;gap:12px;align-items:center;justify-content:center;padding:60px;color:var(--color-text-secondary);}
.error{padding:12px;background:var(--color-error-soft);border:1px solid var(--color-error-border);border-radius:7px;margin:10px 0;display:flex;justify-content:space-between;gap:10px;color:var(--color-error);font-size:var(--font-size-body);}
.error button{padding:0;}
.editor-main .topbar{flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);height:auto;min-height:76px;gap:16px;padding:12px 20px;}
.editor-heading{display:flex;align-items:center;justify-content:space-between;padding:19px 24px;background:var(--color-surface);border-bottom:1px solid var(--color-border);gap:15px;}
.editor-heading>div{display:flex;align-items:center;gap:12px;}
.editor-heading h2{font-family:Manrope;margin:0 0 6px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:var(--font-size-section-heading);color:var(--color-text);line-height:1.4;}
.editor-heading small{font-size:var(--font-size-small);color:var(--color-text-secondary);max-width:550px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.save-status{color:var(--color-text-secondary);}
.back{padding:5px;border:1px solid var(--color-border);border-radius:6px;gap:8px;}
.outline{display:flex;align-items:center;border:1px solid var(--color-border);border-radius:6px;padding:8px 11px;color:var(--color-text-secondary);font-size:var(--font-size-control);gap:8px;}
.icon-button{padding:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--color-text-secondary);}
.editor-body{display:flex;flex:1;min-height:0;}
.canvas-area{display:flex;flex-direction:column;flex:1;min-width:0;background:var(--color-background);min-height:0;}
.canvas-toolbar{align-items:center;justify-content:space-between;padding:13px 20px;flex-shrink:0;flex-wrap:wrap;gap:8px;display:none;}
.tool-group{display:flex;align-items:center;gap:3px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:4px;max-width:100%;flex-wrap:wrap;}
.tool-group button{width:31px;height:30px;display:grid;place-items:center;color:var(--color-text-secondary);border-radius:5px;min-width:32px;min-height:32px;flex-shrink:0;}
.tool-group button.selected{background:var(--color-primary-soft);color:var(--color-primary);}
.tool-group input[type=color]{width:24px;height:25px;border:0px;background:none;padding:2px;cursor:pointer;}
.divider{height:18px;border-left:1px solid var(--color-border);margin:0 4px;}
.canvas-scroll{overflow:auto;flex:1;padding:5px 22px 24px;}
.surface{position:relative;min-height:200px;background:var(--color-surface);width:100%;box-shadow:var(--shadow-soft);touch-action:auto;}
.surface.annotating{cursor:crosshair;}
.surface iframe{display:block;border:0;width:100%;height:850px;}
.surface.annotating iframe{pointer-events:none;}
.surface.browsing{touch-action:auto;}
.review-image{display:block;width:100%;height:auto;user-select:none;pointer-events:none;}
.mark-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;}
.pin{position:absolute;transform:translate(-50%,-50%);z-index:3;width:25px;height:25px;background:var(--color-primary);color:var(--color-on-primary);font-size:var(--font-size-small);font-weight:600;border:2px solid var(--color-border);border-radius:50% 50% 50% 3px;box-shadow:var(--shadow-soft);display:grid;place-items:center;padding:0;cursor:pointer;font-family:inherit;}
.pin.focused{box-shadow:0 0 0 5px var(--color-focus-soft);}
.pin.resolved{background:var(--color-success);color:var(--color-on-primary);}
.pin.pending{background:var(--color-primary);pointer-events:none;}
.mobile-canvas .surface{width:375px;margin:auto;}
.canvas-bottom{padding:12px 20px;display:flex;justify-content:space-between;background:var(--color-background);border-top:1px solid var(--color-border);gap:10px;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.canvas-bottom>span:first-child{display:flex;gap:6px;align-items:center;}
.live-dot{width:5px;height:5px;background:var(--color-primary);border-radius:50%;}
.comments-panel{flex-shrink:0;background:var(--color-surface);border-left:1px solid var(--color-border);display:flex;flex-direction:column;width:350px;}
.comments-title{display:flex;justify-content:space-between;align-items:center;padding:22px 20px 16px;color:var(--color-text-secondary);}
.comments-title h3{margin:0;font-weight:600;font-size:var(--font-size-section-heading);color:var(--color-text);line-height:1.4;}
.comments-title h3 span{font-size:var(--font-size-small);background:var(--color-primary-soft);color:var(--color-text-secondary);padding:3px 6px;border-radius:4px;margin-left:5px;}
.comment-tabs{display:flex;padding:0 20px;gap:19px;border-bottom:1px solid var(--color-border);}
.comment-tabs button{color:var(--color-text-secondary);padding:0 0 13px;position:relative;font-size:var(--font-size-control);}
.comment-tabs button.active{color:var(--color-primary);}
.comment-tabs button.active:after{content:'';height:2px;background:var(--color-primary);position:absolute;bottom:0;left:0;right:0;}
.comment-tabs span{font-size:var(--font-size-small);margin-left:3px;}
.thread-scroll{flex:1;overflow:auto;padding:15px 12px;}
.comment{border:1px solid var(--color-border);border-radius:8px;padding:14px;margin-bottom:12px;cursor:pointer;}
.comment.focused{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary);}
.comment-meta{display:flex;align-items:center;gap:8px;}
.comment-number{font-size:var(--font-size-small);width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:var(--color-primary-soft);color:var(--color-primary);}
.comment-meta strong{font-weight:600;font-size:var(--font-size-body);color:var(--color-text);}
.resolve{margin-left:auto;width:24px;height:24px;border:1px solid var(--color-border);border-radius:50%;color:var(--color-text-secondary);place-items:center;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
.resolve:hover{background:var(--color-success-soft);border-color:var(--color-success);color:var(--color-success);}
.resolve.is-resolved{background:var(--color-success-soft);border-color:var(--color-success);color:var(--color-success);}
.comment>small{margin:7px 0 11px 29px;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.comment p{line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--font-size-body);color:var(--color-text);}
.reply-link{color:var(--color-primary);padding:2px 0;font-size:var(--font-size-control);}
.reply{border-left:2px solid var(--color-border);padding-left:10px;margin:14px 0;}
.reply strong{font-size:var(--font-size-body);color:var(--color-text);}
.reply p{margin:5px 0;font-size:var(--font-size-body);color:var(--color-text);}
.reply-form{display:flex;border:1px solid var(--color-border);border-radius:5px;margin-top:13px;}
.reply-form input{width:100%;min-width:0;border:0;padding:8px;background:transparent;outline:none;font-size:var(--font-size-body);color:var(--color-text);}
.reply-form button{padding:7px;color:var(--color-text-secondary);gap:8px;}
.comment-identity{border-top:1px solid var(--color-border);padding:15px 18px;display:flex;align-items:center;gap:10px;}
.comment-identity small{font-size:var(--font-size-small);color:var(--color-text-secondary);}
.comment-identity input{border:0;background:none;padding:4px 0;font-size:var(--font-size-body);color:var(--color-text);width:100%;}
.empty-comments{text-align:center;margin:60px 15px;color:var(--color-text-secondary);}
.empty-comments>span{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--color-primary-soft);font-size:var(--font-size-page-heading);}
.empty-comments h3{font-weight:500;font-size:var(--font-size-section-heading);color:var(--color-text);line-height:1.4;}
.empty-comments p{line-height:1.8;color:var(--color-text-secondary);font-size:var(--font-size-body);}
.composer{border:1px solid var(--color-border);padding:13px;border-radius:9px;margin-bottom:14px;}
.composer>div{display:flex;align-items:center;gap:7px;}
.composer strong{font-size:var(--font-size-body);color:var(--color-text);}
.composer .icon-button{margin-left:auto;}
.composer textarea{border:0;resize:vertical;width:100%;min-height:100px;padding:15px 0;font-size:var(--font-size-small);line-height:1.6;outline:none;}
.composer>.primary{width:100%;padding:9px;font-size:var(--font-size-small);}
.demo-page{background:#f7f5ef;color:#555B65;pointer-events:none;}
.demo-page nav{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e6e7de;gap:12px;}
.demo-page nav strong{font-family:Georgia;font-size:22px;letter-spacing:-1px;white-space:nowrap;}
.demo-page nav strong span{font-size:13px;vertical-align:top;margin:4px;}
.demo-page nav div{font-size:13px;color:#555B65;}
.demo-page nav>span{font-size:13px;white-space:nowrap;}
.demo-hero{display:grid;grid-template-columns:1.1fr 1fr;padding:51px 35px 33px;min-height:510px;overflow:hidden;}
.demo-hero small{font-size:13px;letter-spacing:1.8px;color:#555B65;}
.demo-hero h1{font-family:Georgia;font-weight:400;font-size:57px;letter-spacing:-2px;line-height:1.02;margin:24px 0 20px;}
.demo-hero h1 em{font-weight:400;color:#555B65;}
.demo-hero p{font-size:13px;line-height:1.9;color:#555B65;}
.demo-hero button{display:block;background:#395340;color:#fff;font-size:13px;padding:12px 17px;margin:23px 0 29px;border-radius:2px;}
.demo-caption{font-size:13px;letter-spacing:1.3px;color:#555B65;}
.plant-art{position:relative;min-height:370px;align-self:stretch;}
.plant-circle{position:absolute;width:280px;height:350px;background:#e7e8db;border-radius:150px 150px 3px 3px;left:-2px;top:3px;pointer-events:none;}
.pot{position:absolute;bottom:12px;width:127px;height:131px;background:linear-gradient(100deg,#c58e6a,#dba885 45%,#b57d5c);left:76px;clip-path:polygon(0 0,100% 0,84% 100%,15% 100%);border-radius:5px 5px 20px 20px;pointer-events:none;}
.stem{position:absolute;left:139px;top:55px;width:4px;height:240px;background:#55694a;transform:rotate(-3deg);pointer-events:none;}
.leaf{position:absolute;width:97px;height:49px;background:linear-gradient(15deg,#425e40,#8a9d6e);border-radius:100% 0 100% 0;left:48px;top:85px;transform:rotate(24deg);box-shadow:inset 0 -1px #78916c;pointer-events:none;}
.leaf-1{left:140px;top:123px;transform:rotate(-12deg) scale(1.05);}
.leaf-2{top:170px;left:38px;transform:rotate(24deg) scale(1.12);}
.leaf-3{top:212px;left:140px;transform:rotate(-15deg) scale(.95);}
.leaf-4{top:23px;left:93px;transform:rotate(-68deg) scale(.8);}
.leaf-5{top:68px;left:146px;transform:rotate(-23deg) scale(.8);}
.plant-tag{position:absolute;bottom:35px;right:-3px;font-size:13px;background:#f7f5ee;padding:13px;line-height:1.6;transform:rotate(7deg);color:#555B65;box-shadow:0 3px 12px #4c5b4210;pointer-events:none;}
.demo-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e3e5d9;padding:22px 34px;font-size:13px;letter-spacing:1px;color:#555B65;}
.demo-bottom span{font-family:Georgia;font-size:13px;color:#555B65;letter-spacing:0;}
.modal-backdrop{position:fixed;inset:0;background:var(--color-backdrop);backdrop-filter:blur(5px);z-index:30;display:grid;place-items:center;padding:20px;}
.modal{width:460px;max-width:100%;background:var(--color-surface);border-radius:16px;padding:28px;box-shadow:var(--shadow-dialog);max-height:95vh;overflow:auto;}
.modal-heading{display:flex;justify-content:space-between;align-items:flex-start;}
.modal-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--color-primary-soft);color:var(--color-text-secondary);}
.modal h2{font-family:Manrope;letter-spacing:-.5px;margin:20px 0 8px;font-size:var(--font-size-section-heading);color:var(--color-text);line-height:1.4;}
.modal>p{color:var(--color-text-secondary);margin:0 0 22px;font-size:var(--font-size-body);}
.kind-switch{display:flex;background:var(--color-primary-soft);border:1px solid var(--color-border);border-radius:8px;padding:4px;margin-bottom:23px;gap:4px;}
.kind-switch button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:9px;color:var(--color-text-secondary);border-radius:5px;font-size:var(--font-size-control);}
.kind-switch button.active{box-shadow:var(--shadow-soft);background:var(--color-primary-soft);color:var(--color-primary);}
.modal label{display:block;font-weight:500;margin-bottom:19px;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.modal input:not([type=file]){display:block;width:100%;border:1px solid var(--color-border);border-radius:6px;padding:11px 12px;margin-top:8px;font-size:var(--font-size-body);color:var(--color-text);}
.modal input::placeholder{color:var(--color-text-secondary);opacity:1;}
.modal label small{margin-top:8px;line-height:1.7;font-weight:400;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.create{width:100%;margin-top:6px;}
.upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;border:1px dashed var(--color-border);background:var(--color-primary-soft);border-radius:8px;min-height:155px;padding:20px;gap:12px;color:var(--color-text-secondary);margin:0 0 20px;}
.upload-area strong{font-weight:500;overflow-wrap:anywhere;font-size:var(--font-size-body);color:var(--color-text);}
.upload-area small{font-size:var(--font-size-small);color:var(--color-text-secondary);}
.spin{animation:spin 1s linear infinite;}
[hidden]{display:none!important;}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;grid-template-columns:minmax(0,1fr);}
.login-page .modal{margin:0;width:100%;max-width:460px;min-width:0;}
.login-page .brand{padding:0;color:var(--color-text);font-size:var(--font-size-section-heading);white-space:nowrap;letter-spacing:-.5px;}
.logout{margin-left:auto;font-size:var(--font-size-section-heading);color:var(--color-text-secondary);gap:8px;}
.nav .nav-icon{margin:0;background:none;padding:0;font-size:var(--font-size-section-heading);width:19px;display:inline-flex;align-items:center;justify-content:center;}
.nav #project-count{margin-left:auto;}
dialog.modal{border:0;color:inherit;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);}
dialog::backdrop{background:var(--color-backdrop);backdrop-filter:blur(5px);}
#editor{display:flex;flex:1;flex-direction:column;min-height:0;}
#pins{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;}
#pins .pin{pointer-events:auto;}
#surface.browsing #pins{visibility:hidden;}
#surface.browsing #marks{visibility:hidden;}
#canvas-content .demo-page{pointer-events:none;}
#surface{overflow:hidden;}
#upload-field{cursor:pointer;}
#project-file{width:100%;margin-top:6px;font-size:var(--font-size-body);color:var(--color-text);}
.thread-scroll .error{position:sticky;top:0;z-index:4;}
.source-note{margin-top:5px;font-size:var(--font-size-small);color:var(--color-text-secondary);}
.demo-preview{font-family:Georgia;font-size:var(--font-size-page-heading);background:var(--color-primary-soft);color:var(--color-text-secondary);}
#editor .surface{user-select:none;}
#canvas-content{width:100%;}
.project-preview.image img{object-fit:contain;}
.modal label.remember{display:flex;align-items:center;gap:8px;}
.modal label.remember input[type=checkbox]{width:auto;margin:0;padding:0;}
.brand-name{font-family:Manrope,sans-serif;font-size:var(--font-size-control);line-height:1.2;font-weight:800;white-space:nowrap;}
.breadcrumb #active-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.profile>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.editor-heading>div:first-child{min-width:0;flex:1;}
.editor-heading>div:first-child>div{min-width:0;}
.editor-heading>div:last-child{flex-shrink:0;}
.review-brand{display:flex;align-items:center;gap:12px;white-space:nowrap;flex-shrink:0;}
.review-brand img{max-height:38px;max-width:180px;object-fit:contain;}
.review-brand strong{font-size:var(--font-size-small);overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.dialog-actions{display:flex;gap:9px;flex-wrap:wrap;}
#brand-preview{max-width:220px;max-height:95px;margin-bottom:20px;}
#brand-message{line-height:1.7;color:var(--color-text-secondary);min-height:38px;overflow-wrap:anywhere;font-size:var(--font-size-body);}
#share-message{line-height:1.7;color:var(--color-text-secondary);min-height:38px;overflow-wrap:anywhere;font-size:var(--font-size-body);}
#brand-file{font-size:var(--font-size-body);color:var(--color-text);}
.tool-group button[data-tool=comment]{width:auto;padding:0 9px;gap:5px;display:flex;font-size:var(--font-size-control);min-height:36px;}
.tool-group button[data-tool=browse]{width:auto;padding:0 9px;gap:5px;display:flex;font-size:var(--font-size-control);min-height:36px;}
.tool-group button span{color:var(--color-text-secondary);font-size:var(--font-size-control);}
.editor-main #editor{min-height:0;}
.canvas-area.website-canvas .canvas-scroll{overflow:hidden;min-height:0;padding-bottom:10px;display:flex;}
.website-canvas .surface{height:100%;min-height:0;overflow:hidden;}
.website-canvas #canvas-content{height:100%;width:100%;}
.website-canvas .surface iframe{height:100%;width:100%;pointer-events:auto;}
.surface #interaction-layer{position:absolute;inset:0;z-index:2;touch-action:none;cursor:inherit;}
.website-canvas #interaction-layer{right:18px;}
.surface.browsing #interaction-layer{pointer-events:none;}
.shared-review .sidebar{display:none!important;}
.shared-review .admin-control{display:none!important;}
.shared-review [data-action=home]{display:none!important;}
.shared-review [data-group]{display:none!important;}
.shared-review .sidebar-note{display:none!important;}
.shared-review #main{margin-left:0;width:100%;}
.shared-review .topbar .breadcrumb{display:none;}
.shared-review .topbar .top-right{margin-left:0;}
.shared-review #dashboard{display:none!important;}
.shared-review .topbar{min-height:76px;}
.shared-review #review-brand{display:flex;}
.shared-review #review-brand[hidden]{display:none;}
.shared-review .editor-heading small{max-width:none;}
.account-nav-label{margin-top:24px;margin-bottom:8px;}
.mobile-account-branding{display:none;font-size:var(--font-size-control);}
.shared-review .account-nav-label{display:none;}
.account-branding{white-space:normal;}
select{font-size:var(--font-size-body);color:var(--color-text);}
input::placeholder{color:var(--color-text-secondary);opacity:1;}
textarea::placeholder{color:var(--color-text-secondary);opacity:1;}
label{font-size:var(--font-size-small);color:var(--color-text-secondary);}
h2{font-size:var(--font-size-section-heading);color:var(--color-text);line-height:1.4;}
.login-page .modal h2{font-size:var(--font-size-page-heading);color:var(--color-text);line-height:1.3;}
.comment-identity>div{min-width:0;}
.branding-page #dashboard{display:none!important;}
.branding-page #editor{display:none!important;}
.branding-content{max-width:900px;margin:0 auto;}
.branding-content>p{color:var(--color-text-secondary);margin-bottom:28px;}
.branding-form{max-width:650px;padding:28px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;}
.branding-form label{display:block;font-size:var(--font-size-small);color:var(--color-text-secondary);margin-bottom:22px;}
.branding-form input:not([type=checkbox]){display:block;width:100%;padding:12px;border:1px solid var(--color-border);border-radius:7px;margin-top:8px;}
.branding-form .remember{display:flex;align-items:center;gap:8px;}
.branding-form #brand-preview{display:block;}
.branding-form #brand-preview[hidden]{display:none;}
#brand-message.success{background:var(--color-success-soft);color:var(--color-success);border-radius:7px;padding:14px 16px;}
#brand-message:empty{display:none;}
.share-link-field{display:flex;gap:8px;align-items:stretch;margin:8px 0 24px;}
.modal .share-link-field input{min-width:0;flex:1;width:0;margin:0;}
.share-link-field .primary{flex-shrink:0;}
.modal label[for=share-url]{margin-bottom:0;}
.modal label.share-toggle{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:var(--font-size-control);color:var(--color-text);cursor:pointer;}
.share-toggle>span:first-child{margin-right:auto;}
.modal .share-toggle input[type=checkbox]{appearance:none;position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;}
.toggle-track{position:relative;display:block;width:46px;height:26px;border-radius:20px;background:var(--color-text-secondary);flex-shrink:0;transition:background .15s;}
.toggle-track:after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;background:var(--color-surface);border-radius:50%;transition:transform .15s;}
.share-toggle input:checked+.toggle-track{background:var(--color-primary);}
.share-toggle input:checked+.toggle-track:after{transform:translateX(20px);}
.share-toggle input:focus-visible+.toggle-track{outline:2px solid var(--color-primary);outline-offset:3px;}
.share-toggle input:disabled+.toggle-track{opacity:1;background:var(--color-disabled-text);cursor:not-allowed;}
.fa-light{flex-shrink:0;}
.svg-inline--fa{flex-shrink:0;}
.brand-icon .svg-inline--fa{width:20px;height:20px;}
.tool-group .svg-inline--fa{width:16px;height:16px;}
.website-globe{font-size:var(--font-size-page-heading);}
.preview-lines i:not(.fa-light){display:block;}
.pin .svg-inline--fa{width:12px;height:12px;}
.project-card .project-type .svg-inline--fa{width:13px;height:13px;}
.new-card>span .svg-inline--fa{width:24px;height:24px;}
.panel-toggle{display:none;}
.editor-main .canvas-toolbar{display:flex;padding:0;justify-content:center;gap:14px;margin:0;min-width:0;max-width:100%;}
.editor-main .panel-toggle{display:inline-flex;}
.editor-main .topbar .top-right{justify-self:end;}
.editor-main .topbar .breadcrumb{min-width:0;}
.editor-main .topbar .review-brand{min-width:0;}
.comments-panel .editor-heading{display:block;padding:20px;border-bottom:1px solid var(--color-border);}
.comments-panel .editor-heading>div:first-child{align-items:flex-start;}
.comments-panel .editor-heading>div:last-child{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;}
.comments-panel .editor-heading h2{font-size:var(--font-size-section-heading);white-space:normal;overflow-wrap:anywhere;}
.comments-panel .editor-heading small{font-size:var(--font-size-small);white-space:normal;overflow-wrap:anywhere;max-width:none;}
.comments-panel .save-status{display:inline;}
.panel-hidden .comments-panel{display:none;}
.resolve .svg-inline--fa{width:12px;height:12px;margin:0;}
.delete-comment{padding:4px;width:24px;height:24px;flex-shrink:0;color:var(--color-text-secondary);}
.delete-comment:hover{background:var(--color-error-soft);color:var(--color-error);}
.surface #composer{position:fixed;width:320px;max-width:calc(100vw - 24px);z-index:25;background:var(--color-surface);box-shadow:var(--shadow-soft);border:1px solid var(--color-border);cursor:auto;user-select:text;color:var(--color-text);}
.surface #composer textarea{font-size:var(--font-size-body);}
.surface #composer .primary{font-size:var(--font-size-control);}
.surface.annotating.pin-active{cursor:var(--pin-cursor,crosshair);}
.editor-main:not(.panel-hidden) .topbar .panel-toggle{display:none;}
.panel-collapse{margin-left:auto;}
a:hover{color:var(--color-primary-hover);}
.brand:hover{color:var(--color-text);}
.nav:hover{background:var(--color-primary-soft);color:var(--color-primary);}
.tool-group button:hover{background:var(--color-primary-soft);color:var(--color-primary-hover);}
.outline:hover{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-hover);}
.icon-button:hover{background:var(--color-primary-soft);color:var(--color-primary-hover);}
.primary:disabled:hover{background:var(--color-disabled-background);color:var(--color-disabled-text);}
input:disabled{color:var(--color-disabled-text);background:var(--color-disabled-background);opacity:1;}
button:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;}
a:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;}
input:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;}
textarea:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;}
summary:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;}
/* @keyframes spin */
@keyframes spin{
to{transform:rotate(360deg);}
}
/* @media(min-width:1600px) */
@media(min-width:1600px){
.demo-hero h1{font-size:75px;}
.demo-hero{min-height:620px;}
.plant-art{transform:scale(1.25);transform-origin:center;}
.project-preview{height:220px;}
}
/* @media(max-width:1200px) */
@media(max-width:1200px){
.sidebar{padding-left:12px;padding-right:12px;width:238px;}
.dashboard{margin-left:238px;width:calc(100% - 238px);}
.editor-main{margin-left:238px;width:calc(100% - 238px);}
.dashboard-content{padding:30px 25px;}
.summary>div{padding:0 16px;}
.summary .summary-message{display:none;}
.summary{grid-template-columns:repeat(3,1fr);}
.summary>div:nth-child(3){border:0;}
.comments-panel{width:320px;}
.demo-banner{flex-wrap:wrap;}
.demo-banner>button{margin-left:87px;}
.demo-page nav div{display:none;}
.demo-hero{padding:35px 25px;}
.demo-hero h1{font-size:45px;}
.plant-art{transform:scale(.8);transform-origin:20% 50%;}
.canvas-toolbar{padding:12px;}
.canvas-scroll{padding:5px 13px 20px;}
.save-status{display:none;}
.brand-name{font-size:var(--font-size-control);}
.editor-heading{gap:8px;}
.editor-heading>div:last-child{gap:6px;}
.outline{padding:8px;}
}
/* @media(max-width:950px) */
@media(max-width:950px){
.sidebar{padding:24px 10px;width:72px;}
.brand{font-size:0;gap:0;padding:0 8px;}
.brand-dot{display:none;}
.workspace{display:none;}
.nav-label{display:none;}
.sidebar-note{display:none;}
.profile{display:none;}
.nav{justify-content:center;padding:14px;gap:0;margin-top:16px;font-size:0;}
.nav span{display:none;}
.dashboard{margin-left:72px;width:calc(100% - 72px);}
.editor-main{margin-left:72px;width:calc(100% - 72px);}
.page-heading h1{font-size:var(--font-size-page-heading);}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.topbar{padding:0 23px;}
.demo-hero{display:block;}
.plant-art{display:none;}
.demo-page nav{padding:0 24px;}
.demo-hero h1{font-size:50px;}
.demo-bottom span{display:none;}
.canvas-bottom>span:last-child{display:none;}
.tool-group button{width:27px;}
.canvas-toolbar{gap:10px;flex-wrap:wrap;}
.editor-heading small{max-width:220px;}
.nav .nav-icon{font-size:var(--font-size-section-heading);}
.nav #project-count{display:none;}
.sidebar .brand-name{display:none;}
.account-nav-label{display:none;}
.account-branding .nav-icon{display:block;}
.editor-main .topbar{grid-template-columns:minmax(0,1fr) auto;}
.editor-main .canvas-toolbar{grid-column:1/-1;grid-row:2;}
.editor-main .topbar .breadcrumb{flex-basis:auto;}
.comments-panel{width:320px;}
}
/* @media(max-width:650px) */
@media(max-width:650px){
.sidebar{display:none;}
.dashboard{margin-left:0;width:100%;}
.editor-main{min-height:100vh;height:100dvh;overflow:auto;margin-left:0;width:100%;}
.topbar{padding:0 14px;height:auto;min-height:65px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;}
.private{display:none;}
.dashboard-content{padding:27px 18px;}
.page-heading{align-items:flex-start;flex-wrap:wrap;}
.page-heading h1{line-height:1.3;font-size:var(--font-size-page-heading);}
.page-heading p{font-size:var(--font-size-small);line-height:1.8;}
.summary{margin:24px 0;grid-template-columns:1fr;gap:16px;}
.summary>div{padding:0 10px;gap:8px;border:0;}
.stat-icon{width:28px;height:33px;}
.stat-icon svg{width:16px;}
.summary strong{font-size:var(--font-size-section-heading);}
.summary small{font-size:var(--font-size-small);}
.project-heading{align-items:flex-start;flex-wrap:wrap;gap:12px;}
.search{width:100%;}
.search input{width:100%;}
.tabs{gap:18px;}
.tabs button{padding-bottom:10px;}
.project-grid{grid-template-columns:1fr;}
.project-preview{height:210px;}
.new-card{min-height:220px;}
.demo-banner{padding:20px;gap:15px;}
.demo-art{width:42px;height:42px;}
.demo-banner h2{font-size:var(--font-size-control);}
.demo-banner p{line-height:1.8;}
.demo-banner>button{margin-left:0;white-space:normal;}
footer{line-height:1.8;gap:20px;flex-wrap:wrap;}
.editor-body{flex-direction:column;flex:none;min-height:0;}
.canvas-area{min-height:650px;flex:none;}
.canvas-scroll{max-height:700px;min-height:450px;}
.comments-panel{border-top:1px solid var(--color-border);min-height:300px;width:100%;}
.thread-scroll{max-height:500px;}
.editor-heading{padding:15px 12px;gap:5px;flex-wrap:wrap;}
.editor-heading h2{font-size:var(--font-size-small);overflow-wrap:anywhere;max-width:100%;}
.editor-heading small{font-size:var(--font-size-small);max-width:280px;}
.editor-heading .outline{gap:0;font-size:var(--font-size-control);}
.breadcrumb{gap:8px;font-size:var(--font-size-small);flex-basis:100%;}
.breadcrumb strong{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.demo-hero{display:grid;grid-template-columns:1fr 1fr;padding:30px 24px;}
.plant-art{display:block;transform:scale(.65);transform-origin:0% 50%;}
.demo-hero h1{font-size:44px;}
.demo-page nav strong{font-size:19px;}
.modal{padding:24px;}
.modal h2{font-size:var(--font-size-section-heading);}
#editor{min-height:100vh;}
.editor-heading>div{gap:7px;}
.canvas-area.website-canvas{height:70dvh;min-height:450px;}
.website-canvas .canvas-scroll{height:auto;max-height:none;}
.editor-heading>div:first-child{flex-basis:100%;}
.editor-heading>div:last-child{margin-left:31px;flex-wrap:wrap;}
.review-brand img{max-width:125px;}
.review-brand strong{max-width:130px;font-size:var(--font-size-small);}
.shared-review .topbar .top-right .avatar{display:none;}
.canvas-area:not(.website-canvas) .surface #interaction-layer{touch-action:pan-y;}
.mobile-account-branding{display:flex;padding:7px;font-size:var(--font-size-control);}
.top-right{gap:10px;}
.shared-review .topbar .top-right{margin-left:0;}
.branding-form{padding:20px;}
.share-link-field{gap:6px;}
.share-link-field .primary{padding:10px;}
.editor-main .canvas-toolbar{justify-content:center;gap:10px;}
.comments-panel .editor-heading>div:last-child{margin-left:0;}
.editor-main .topbar{padding:10px 12px;}
.editor-main .topbar .top-right{gap:8px;}
.panel-hidden .canvas-area.website-canvas{height:calc(100dvh - 145px);}
.canvas-area:not(.website-canvas){min-height:0;}
.canvas-area:not(.website-canvas) .canvas-scroll{min-height:0;max-height:none;flex:none;}
}
@media(max-height:850px){
.sidebar-note{display:none;}
}

/* PROJECT FOLDERS AND ACCOUNT SETTINGS */
.folder-heading{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:24px;}
.folder-preview{background:var(--color-primary-soft);color:var(--color-primary);font-size:var(--font-size-page-heading);}
.profile-account{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:var(--color-text);}
.profile-account>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-account:hover{color:var(--color-primary);}
.top-right>a.avatar{color:var(--color-primary);}
.settings-page #dashboard,.settings-page #editor{display:none!important;}
.settings-content{max-width:900px;margin:0 auto;}
.settings-content>p{color:var(--color-text-secondary);margin-bottom:28px;}
.settings-content small{font-size:var(--font-size-small);color:var(--color-text-secondary);margin-top:8px;}
.settings-content .branding-form{width:100%;}
#account-message{font-size:var(--font-size-body);line-height:1.6;margin-bottom:0;overflow-wrap:anywhere;}
#account-message:empty{display:none;}
#account-message.success{background:var(--color-success-soft);color:var(--color-success);padding:14px 16px;border-radius:7px;}
.markup-folder-field{display:block;font-size:var(--font-size-small);color:var(--color-text-secondary);margin:16px 0;}
.markup-folder-field select{display:block;width:100%;max-width:100%;margin-top:6px;padding:8px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--font-size-control);}
.comments-title .panel-collapse{width:auto;gap:6px;font-size:var(--font-size-control);}
.panel-toggle-label{white-space:nowrap;}
.comment:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;}
.project-card .card-info h3{overflow-wrap:anywhere;}
.folder-heading .outline{font-size:var(--font-size-control);}