@font-face{font-family:"Inter";font-weight:400;src:url(public/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;src:url(public/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;src:url(public/fonts/inter-600.woff2) format("woff2")}

:root{
  --bg:#FCFCFC; --nav:#F7F7F6; --card:#F8F8F8; --white:#fff;
  --ink:#151515; --mute:#777976; --line:#EDEEEB;
  --black:#101110; --online:#609B86; --switch:#7CAF9B; --status:#E7E8E0;
  --font:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none;cursor:pointer}
figure{margin:0}
img{display:block}

.stage{min-width:1536px;overflow:auto}
.app{
  position:relative;width:1536px;height:1024px;
  display:grid;
  grid-template-columns:64px 247px 1fr 1fr 0;   /* nav | community | A | B | (tools drawer) */
  grid-template-rows:72px 878px 74px;
  background:var(--bg);overflow:hidden;
}
.t{position:absolute;white-space:nowrap;line-height:1}
.ic{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* nav */
.nav{grid-column:1;grid-row:1/4;position:relative;background:var(--nav);border-right:1px solid var(--line)}
.logo-dots i{position:absolute;width:5px;height:5px;border-radius:50%;background:#111}
.logo-dots i:nth-child(1){left:24px;top:30px}
.logo-dots i:nth-child(2){left:32px;top:30px}
.logo-dots i:nth-child(3){left:28px;top:36px}
.nav-btn{position:absolute;left:17px;width:24px;height:24px;display:grid;place-items:center;color:#4a4a48}
.nav-btn .ic{width:15px;height:15px;stroke-width:1.2}
.nav-avatar{position:absolute;left:17px;top:962px;width:26px;height:26px;border-radius:50%;overflow:hidden}
.nav-avatar img{width:26px;height:26px;object-fit:cover}

/* brand + header */
.brand{grid-column:2;grid-row:1;position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-text{position:absolute;left:22px;top:21px;font-size:16px;line-height:14px;font-weight:400;letter-spacing:-.2px;display:flex;flex-direction:column}
.head{grid-column:3/6;grid-row:1;position:relative;border-bottom:1px solid var(--line);border-left:0}
.head-title{position:absolute;left:26px;top:18px;font-size:13.3px;line-height:16px;font-weight:500;letter-spacing:-.1px}
.head-sub{position:absolute;left:26px;top:39px;font-size:9.6px;line-height:12px;color:var(--mute)}
.btn-share{position:absolute;left:962px;top:17px;width:104px;height:35px;background:#fff;border:1px solid #E6E7E4;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:9.5px;font-weight:500}
.btn-more{position:absolute;left:1080px;top:17px;width:33px;height:35px;background:var(--black);border-radius:5px;display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.btn-more .dots{width:16px;height:16px;fill:#fff}

/* community */
.community{grid-column:2;grid-row:2;position:relative;border-right:1px solid var(--line)}
.h-comm{font-size:11.1px;font-weight:500}
.pill-online{position:absolute;left:22px;top:52px;width:61px;height:18px;border-radius:9px;background:#F1F2EF;border:1px solid #ECEDEA;display:flex;align-items:center;gap:5px;padding-left:7px;font-size:8.1px;font-weight:500}
.pill-online i{width:5px;height:5px;border-radius:50%;background:var(--online)}
.prompt{position:absolute;left:21px;top:84px;width:205px;height:135px;background:var(--card);border:1px solid #EBECE9;border-radius:5px}
.prompt-title{left:12px;top:15px;font-size:9.4px;font-weight:500}
.prompt-desc{left:13px;top:35px;font-size:9px;line-height:15px;color:var(--mute)}
.btn-add{position:absolute;left:12px;top:94px;width:180px;height:26px;background:var(--black);color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:8.5px;font-weight:500;box-shadow:0 1px 1px rgba(0,0,0,.25)}
.btn-add .ic{width:9px;height:9px;stroke-width:1.8}
.filter{position:absolute;left:0;top:236px;width:246px;height:20px}
.filter-all{position:absolute;left:21px;top:3px;display:flex;align-items:center;gap:6px;font-size:9.1px}
.filter-all .ic{width:11px;height:11px}
.filter-icon{position:absolute;left:213px;top:3px;width:14px;height:14px;display:grid;place-items:center}
.filter-icon .ic{width:12px;height:12px;stroke-width:1.2}

#comments{position:absolute;left:0;top:269px;width:247px;height:581px;padding:14px 19px 12px;box-sizing:border-box;overflow-y:auto;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:#D9DAD6 transparent}
.cm{width:208px;flex:none}
.cm-person{display:flex;align-items:center;gap:8px}
.cm-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;background:#F0EBE3;border:1px solid rgba(0,0,0,.08);box-sizing:border-box;display:grid;place-items:center;font-size:13px;font-weight:600}
.cm-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cm-identity{display:flex;flex-direction:column;min-width:0}
.cm-name{font-size:9.6px;font-weight:600;line-height:13px;overflow-wrap:anywhere}
.cm-time{font-size:8.2px;color:var(--mute);line-height:11px}
.cm-bubble{position:relative;margin-top:12px;padding:10px 12px;border-radius:16px;background:#101110;color:#fff}
.cm-bubble::before{content:"";position:absolute;left:10px;top:-10px;width:12px;height:11px;background:#101110;clip-path:polygon(0 100%,25% 0,100% 100%)}
.cm-body{margin:0;font-size:11px;line-height:16px;overflow-wrap:anywhere}
.cm-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.cm-tag{height:17px;padding:0 6px;border-radius:5px;background:#F0F0EE;font-size:8.2px;display:flex;align-items:center;color:#333;margin-right:auto}
.cm-like{display:flex;align-items:center;gap:4px;font-size:8.7px;color:#333}
.cm-like .ic{width:13px;height:13px;stroke-width:1.2}
.cm-like.liked .ic{fill:#d9534f;stroke:#d9534f}
.cm-reply{font-size:9.1px;color:#333}
.cm-like:focus-visible,.cm-reply:focus-visible{outline:2px solid #101110;outline-offset:2px;border-radius:4px}
.load-more{position:absolute;left:23px;top:860px;font-size:8.8px;color:var(--mute)}
.load-more-circle{position:absolute;left:132px;top:857px;width:13px;height:13px;border-radius:50%;border:1px solid #D9DAD6;display:grid;place-items:center;color:#555}
.load-more-circle .ic{width:8px;height:8px}

/* versions */
.ver{position:relative}
.ver-a{grid-column:3;grid-row:2;border-left:1px solid var(--line);border-right:1px solid #E4E4E4}
.ver-b{grid-column:4;grid-row:2}
.ver-name{font-size:9.6px;font-weight:500;letter-spacing:.1px}
.ver-date{font-size:9.5px;color:var(--mute)}
.ver-more{position:absolute;top:24px;width:16px;height:16px;display:grid;place-items:center}
.ver-more svg{width:14px;height:14px;fill:#222}
.render{position:absolute;top:78px;height:435px;border-radius:6px;object-fit:fill}
.viewer{position:absolute;top:559px;width:176px;height:37px;background:#fff;border:1px solid #E7E8E5;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:16.3px;padding:0}
.viewer button{width:28px;height:28px;display:grid;place-items:center;border-radius:5px}
.viewer .ic{width:17px;height:17px;stroke-width:1.5;color:#222}
.thumb{position:absolute;top:635px;width:137px}
.thumb img{width:137px;height:128px;object-fit:fill}
.thumb figcaption{position:absolute;left:0;top:136px;font-size:8.4px;color:#666;white-space:nowrap;line-height:10px}
.handle{position:absolute;left:772px;top:430px;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;gap:0;z-index:3}
.handle .ic{width:14px;height:14px;stroke-width:1.5}

/* tools */
.tools{position:absolute;right:0;top:72px;width:242px;height:878px;background:var(--bg);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.08);transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s;z-index:5}
.tools.open{transform:none;visibility:visible;transition:transform .25s ease}
.tools-tab{position:absolute;right:0;top:420px;width:26px;height:132px;background:var(--black);color:#fff;border-radius:6px 0 0 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:9px;font-weight:500;opacity:.35;transition:opacity .2s,right .25s ease;z-index:6}
.tools-tab:hover,.tools-tab:focus-visible,.tools-tab[aria-expanded="true"]{opacity:1}
.tools-tab span{writing-mode:vertical-rl;letter-spacing:.3px}
.tools-tab[aria-expanded="true"]{right:242px}
.tools-tab .ic{width:12px;height:12px}
@media (prefers-reduced-motion:reduce){.tools,.tools-tab{transition:none}}
.h-tools{font-size:11.4px;font-weight:500}
.card{position:absolute;left:16px;width:201px;background:var(--card);border-radius:5px}
.c-title{font-size:9.4px;font-weight:600}
.c-desc{font-size:8.7px;line-height:13px;color:var(--mute)}
.c-links{top:47px;height:332px}
.c-updates{top:389px;height:214px}
.c-compare{top:613px;height:144px}
.c-help{top:767px;height:110px}
.ql{position:absolute;left:13px;width:177px;height:31px;background:#fff;border:1px solid #EEEFEC;border-radius:4px;display:flex;align-items:center;gap:7px;padding-left:9px;font-size:8.3px}
.ql .ic{width:11px;height:11px;stroke-width:1.4;color:#333}
.upd{position:absolute;left:12px;height:30px}
.upd i{position:absolute;left:0;top:0;width:1px;height:30px;background:#D3D6CF}
.upd i.g1{background:#7DA894}
.upd b{position:absolute;left:10px;top:1px;font-size:8.3px;font-weight:400;line-height:10px;color:#444;white-space:nowrap}
.upd span{position:absolute;left:10px;top:16px;font-size:8.1px;line-height:10px;color:var(--mute);white-space:nowrap}
.show-label{font-size:8.4px}
.switch{position:absolute;left:83px;top:69px;width:24px;height:13px;border-radius:7px;background:#C9CCC6;transition:background .15s}
.switch i{position:absolute;left:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on{background:var(--switch)}
.switch.on i{left:13px}
.lg{position:absolute;display:flex;align-items:center;gap:8.5px;font-size:8.5px;line-height:10px;height:10px}
.lg i{width:8px;height:8px;border-radius:50%}
.btn-guide{position:absolute;left:7px;top:71px;width:83px;height:27px;background:#fff;border:1px solid #E4E5E1;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:8.4px}
.btn-guide .ic{width:10px;height:10px;stroke-width:1.3}

/* status */
.status{grid-column:2/6;grid-row:3;position:relative;margin:16px 26px 18px 20px;background:var(--status);border-radius:5px;color:var(--mute)}
.st-text{font-size:9.6px}
.st-more{position:absolute;right:16px;top:15px;display:flex;align-items:center;gap:6px;font-size:9.6px;line-height:11px}
.st-more .ic{width:10px;height:10px}
.cm-body[contenteditable]{cursor:text;outline:none;border-radius:4px}
.cm-body[contenteditable]:hover{background:rgba(255,255,255,.08)}
.cm-body[contenteditable]:focus{background:rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.cm-edit:empty::before{content:attr(data-placeholder);opacity:.5;pointer-events:none}
.cm-name.cm-edit{cursor:text;outline:none;min-width:90px;border-bottom:1px dashed #bbb}
.cm-name.cm-edit:focus{border-bottom-color:#101110}
.cm-draft .cm-body{min-height:48px}
.cm-post{margin-left:auto;height:22px;padding:0 10px;border-radius:4px;background:#101110;color:#fff;font-size:8.7px;font-weight:500}
.cm-draft .cm-actions{justify-content:flex-start}

/* single image frames + panels */
.frame{position:absolute;width:449px;height:449px;border-radius:6px;overflow:hidden;background:#E9E9E9}
.frame img{width:100%;height:100%;object-fit:cover}
.mk{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.mk.drawing{cursor:crosshair}
.mk.hidden .mk-item{display:none}
.panel{position:absolute;width:449px;display:flex;flex-direction:column;gap:8px}
.panel-title{font-size:9.6px;font-weight:500}
.panel-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.panel textarea{width:100%;resize:none;border:1px solid #E6E7E4;border-radius:5px;background:#fff;padding:7px 8px;font:inherit;font-size:10px;line-height:14px;color:var(--ink)}
.panel textarea:focus,.panel input:focus{outline:2px solid var(--black);outline-offset:1px}
.pbtn{height:24px;padding:0 9px;border:1px solid #E6E7E4;border-radius:4px;background:#fff;font-size:9px;font-weight:500;display:inline-flex;align-items:center;gap:5px}
.pbtn.dark{background:var(--black);color:#fff;border-color:var(--black)}
.pbtn.on{border-color:var(--black);box-shadow:inset 0 0 0 1px var(--black)}
.pbtn:disabled{opacity:.5;cursor:default}
.pbtn:focus-visible{outline:2px solid var(--black);outline-offset:2px}
.pbtn i{width:8px;height:8px;border-radius:50%}
.sep{width:1px;height:16px;background:var(--line);margin:0 2px}
.ai-status{font-size:8.8px;color:var(--mute);min-width:0;flex:1 1 100%;line-height:12px}
.revs{display:flex;gap:6px;flex-wrap:wrap}
.revs .pbtn{height:20px;font-size:8.5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mk-list{list-style:none;display:flex;flex-direction:column;gap:5px;max-height:104px;overflow-y:auto;scrollbar-width:thin}
.mk-list li{display:flex;align-items:center;gap:6px;font-size:9px}
.mk-list .dot{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:600;flex:none}
.mk-list input{flex:1;min-width:0;height:22px;border:1px solid #E6E7E4;border-radius:4px;padding:0 6px;font:inherit;font-size:9.5px;background:#fff;color:var(--ink)}
.mk-list .del{width:18px;height:18px;border-radius:4px;font-size:12px;line-height:1;color:var(--mute)}
.mk-empty{font-size:9px;color:var(--mute)}
.ai-status:empty{display:none}

/* two equal version panels, content centered */
.ver .frame,.ver .panel{left:calc(50% - 224.5px)!important}
.ver .viewer{left:calc(50% - 88px)!important}
.ver .ver-more{left:auto!important;right:24px}
.ver .ver-name,.ver .ver-date{left:calc(50% - 224.5px)!important}
.handle{left:calc(311px + (100% - 311px) / 2 - 26px)}
.head-title[contenteditable]{cursor:text;outline:none;border-radius:4px;padding:2px 4px;margin:-2px -4px;min-width:120px}
.head-title[contenteditable]:hover{background:rgba(0,0,0,.04)}
.head-title[contenteditable]:focus{background:rgba(0,0,0,.05);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.head-title:empty::before{content:"Name your project";color:var(--mute)}
.cm-status{font-size:8.4px;line-height:11px;color:var(--mute);margin-top:6px}
.cm-status.warn{color:#9A6B00}
.cm-gen{font-size:9.1px;color:#333;text-decoration:underline}
.cm-flag{height:17px;padding:0 6px;border-radius:5px;background:#F3D36D;font-size:8.2px;display:flex;align-items:center;color:#4a3a00}
.mk-item circle{cursor:grab}
.mk-list .tg{font-size:8px;color:var(--mute);flex:none}
.mk-list .unp{font-size:8px;color:#9A6B00;flex:none}