@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{--ink:#171715;--muted:#777770;--paper:#f5f3ef;--surface:#fffefa;--line:#e2dfd8;--orange:#ff7547;--orange-dark:#e45c31;--green:#64856e;--shadow:0 24px 70px #1d1a1610;--radius:20px;--font:Inter,system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:calc(13px * var(--nl-font-scale, 1))/1.55 var(--font);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:3px}.hidden{display:none!important}.studio-app{min-height:100vh}.studio-header{height:72px;padding:0 clamp(18px,4vw,56px);display:flex;align-items:center;border-bottom:1px solid #e5e2dc;background:#faf9f6;gap:28px;position:sticky;top:0;z-index:20}.studio-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:calc(12px * var(--nl-font-scale, 1));letter-spacing:-.04em;white-space:nowrap}.studio-brand small{font-size:calc(8px * var(--nl-font-scale, 1));display:block;letter-spacing:.2em;color:#817e77;font-weight:700}.brand-mark{width:34px;height:34px;background:#171715;color:#fff;border-radius:10px;display:inline-grid;place-items:center;font-size:calc(12px * var(--nl-font-scale, 1));font-weight:900;letter-spacing:-.08em}.brand-mark.tiny{width:26px;height:26px;border-radius:7px;font-size:calc(10px * var(--nl-font-scale, 1))}.header-center{font-size:calc(9px * var(--nl-font-scale, 1));letter-spacing:.16em;color:#72716a;display:flex;align-items:center;gap:9px}.live-dot,.canvas-live{width:6px;height:6px;background:#61a977;border-radius:50%;box-shadow:0 0 0 4px #61a9771c}.header-sep{color:#c9c5bc}.header-actions{margin-left:auto;display:flex;align-items:center;gap:21px}.header-link{font-size:calc(11px * var(--nl-font-scale, 1));color:#65645e}.header-link:hover{color:var(--orange-dark)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid transparent;border-radius:999px;padding:14px 20px;font-size:calc(11px * var(--nl-font-scale, 1));font-weight:750;transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn-accent{background:var(--orange);color:#fff;box-shadow:0 8px 22px #ff75472c}.btn-accent:hover{background:var(--orange-dark);box-shadow:0 11px 28px #ff754736}.btn-dark{background:#171715;color:#fff}.btn-dark:hover{background:#30302c}.btn-outline{background:transparent;border-color:#d4d0c8;color:#282823}.btn-outline:hover,.btn-light:hover{border-color:#b7b1a7;background:#fff}.btn-light{background:#fffdfa;color:#22211e;border-color:#dedbd4}.btn-small{padding:10px 14px;font-size:calc(10px * var(--nl-font-scale, 1))}.btn-danger{background:#fff3f0;color:#c0472b;border-color:#f0c4b7}.full-width{width:100%}.dashboard-view{max-width:1480px;padding:0 clamp(18px,4vw,56px);margin:auto}.studio-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);min-height:485px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.hero-copy{padding:clamp(56px,8vw,112px) 0 clamp(48px,7vw,90px);position:relative;z-index:1}.eyebrow{font-size:calc(9px * var(--nl-font-scale, 1));letter-spacing:.19em;text-transform:uppercase;font-weight:800;color:#4e4b44;display:flex;align-items:center;gap:9px}.eyebrow-line{height:1px;width:23px;background:var(--orange)}.muted-eyebrow{color:#89857c}.hero-copy h1{font-size:clamp(calc(48px * var(--nl-font-scale, 1)),calc(6.2vw * var(--nl-font-scale, 1)),calc(88px * var(--nl-font-scale, 1)));letter-spacing:-.09em;line-height:.96;margin:24px 0 23px;font-weight:760}.hero-copy h1 em{font-family:'Playfair Display',Georgia,serif;font-weight:500;color:#7a766e;letter-spacing:-.065em}.hero-copy>p{max-width:525px;color:#68675f;font-size:calc(14px * var(--nl-font-scale, 1));line-height:1.95;margin:0}.hero-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.hero-proof{margin-top:33px;display:flex;align-items:center;gap:12px;font-size:calc(10px * var(--nl-font-scale, 1));color:#737168;flex-wrap:wrap}.proof-icon{color:var(--orange);font-size:calc(15px * var(--nl-font-scale, 1))}.proof-divider{height:14px;width:1px;background:#d5d1c8}.hero-art{margin:34px 0 34px 18px;min-height:400px;position:relative;background:radial-gradient(ellipse at center,#fffefa 0%,#eeebe4 63%,#ebe7df 100%);border:1px solid #e4e0d8;border-radius:28px;overflow:hidden;display:grid;place-items:center}.hero-art:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#7b76690c 1px,transparent 1px),linear-gradient(90deg,#7b76690c 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(transparent,#000 24%,#000 72%,transparent)}.art-orbit{position:absolute;width:63%;height:35%;border:1px solid #fb7547a1;border-radius:50%;transform:rotate(-27deg);z-index:2}.orbit-two{width:65%;height:46%;border-color:#4c47421e;transform:rotate(56deg)}.art-sphere{width:39%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 29% 22%,#fff 0%,#e5e3de 10%,#b9b7b2 20%,#777771 34%,#242421 64%,#080808 100%);box-shadow:inset -18px -22px 33px #0008,inset 8px 7px 16px #fff9,0 35px 45px #17171540;position:relative;z-index:3;animation:sphereFloat 7s ease-in-out infinite}.sphere-glint{position:absolute;inset:12% 25% 58% 16%;border-radius:60% 40%;background:linear-gradient(130deg,#fff9,transparent);filter:blur(3px);transform:rotate(-28deg)}.sphere-cut{position:absolute;right:10%;top:16%;width:31%;height:31%;border-radius:50%;background:radial-gradient(circle at 20% 20%,#bdbdb7,#171715 70%);box-shadow:inset 3px 3px 8px #fff8,0 4px 12px #0005}.art-label{position:absolute;font-size:calc(8px * var(--nl-font-scale, 1));letter-spacing:.16em;font-weight:800;color:#6e6a61;z-index:4}.art-label span{color:var(--orange);margin-right:8px}.label-top{top:25px;left:25px}.label-bottom{bottom:25px;right:25px}.floating-arrow{font-size:calc(15px * var(--nl-font-scale, 1));color:var(--orange)}.art-floating-card{position:absolute;bottom:62px;left:28px;z-index:4;background:#fffefaed;backdrop-filter:blur(10px);padding:12px 13px;border-radius:13px;border:1px solid #dedbd4;display:flex;align-items:center;gap:10px;box-shadow:0 12px 35px #24211a15}.floating-dot{width:7px;height:7px;border-radius:50%;background:#5d9f72;box-shadow:0 0 0 4px #5d9f721a}.art-floating-card b{font-size:calc(10px * var(--nl-font-scale, 1));display:block}.art-floating-card small{display:block;color:#858177;font-size:calc(9px * var(--nl-font-scale, 1));margin-top:2px}.art-floating-card .floating-arrow{margin-left:12px}.saved-section,.templates-section{padding:74px 0 72px;border-bottom:1px solid var(--line);scroll-margin-top:82px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:27px}.section-heading h2{font-size:clamp(calc(28px * var(--nl-font-scale, 1)),calc(3vw * var(--nl-font-scale, 1)),calc(40px * var(--nl-font-scale, 1)));line-height:1.1;letter-spacing:-.075em;margin:9px 0 7px}.count-pill{display:inline-grid;place-items:center;vertical-align:middle;background:#e9e5dd;border-radius:999px;font-size:calc(10px * var(--nl-font-scale, 1));min-width:22px;height:22px;letter-spacing:0;margin-left:4px}.section-heading p{font-size:calc(11px * var(--nl-font-scale, 1));color:#7a776f;margin:0}.section-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.search-box{display:flex;align-items:center;gap:7px;background:#fffdfa;border:1px solid #e1ddd5;border-radius:999px;padding:0 14px;height:40px;min-width:210px}.search-box>span{font-size:calc(20px * var(--nl-font-scale, 1));color:#99948a;line-height:1}.search-box input{border:0;background:transparent;outline:none;min-width:0;width:100%;font-size:calc(10px * var(--nl-font-scale, 1));color:#252520}.search-box input::placeholder{color:#a19d94}.saved-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.site-card{background:#fffdfa;border:1px solid #e3dfd8;border-radius:17px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}.site-card:hover{transform:translateY(-3px);border-color:#cbc5ba;box-shadow:var(--shadow)}.site-card-preview{height:174px;position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;background:#ece9e2;padding:13px}.mini-browser{width:90%;height:190px;position:relative;border-radius:8px;background:var(--prev-bg,#f7f6f3);overflow:hidden;box-shadow:0 16px 35px #1112;transform:perspective(900px) rotateX(2deg)}.mini-browser-top{height:17px;background:#e3e0da;display:flex;align-items:center;gap:3px;padding:0 7px}.mini-browser-top i{width:4px;height:4px;background:#b9b3a8;border-radius:50%}.mini-browser-content{padding:18px 13px;color:var(--prev-ink,#181818)}.mini-browser-kicker{height:4px;width:30%;background:var(--prev-accent,#ff7547);border-radius:3px;margin-bottom:10px}.mini-browser-title{font-size:calc(22px * var(--nl-font-scale, 1));line-height:.94;font-weight:850;letter-spacing:-.07em;max-width:80%;white-space:pre-line}.mini-browser-text{height:4px;width:65%;background:color-mix(in srgb,var(--prev-ink,#171715) 23%,transparent);margin-top:12px;border-radius:3px}.mini-browser-cta{margin-top:12px;width:38%;height:17px;border-radius:20px;background:var(--prev-accent,#ff7547)}.mini-browser-art{position:absolute;right:8%;bottom:16%;width:35%;height:37%;border-radius:35% 35% 42% 42%;background:linear-gradient(140deg,var(--prev-accent,#ff7547),color-mix(in srgb,var(--prev-accent,#ff7547) 30%,#111));box-shadow:0 7px 18px #0002}.mini-browser-art.round{border-radius:50%}.mini-browser-art.image{background-size:cover;background-position:center}.mini-browser-line{height:1px;background:color-mix(in srgb,var(--prev-ink,#171715) 14%,transparent);margin-top:17px}.site-card-info{padding:15px 17px 17px;display:flex;justify-content:space-between;align-items:center;gap:13px}.site-card-info h3{font-size:calc(13px * var(--nl-font-scale, 1));margin:0 0 4px;letter-spacing:-.03em}.site-card-info p{font-size:calc(9px * var(--nl-font-scale, 1));color:#8c887e;margin:0}.site-card-actions{display:flex;gap:6px;align-items:center}.site-card-actions button,.site-card-actions a{width:31px;height:31px;display:grid;place-items:center;border:1px solid #e1ddd5;border-radius:50%;background:#fffdfa;font-size:calc(12px * var(--nl-font-scale, 1));color:#56534b}.site-card-actions .open-site{background:#191917;color:#fff;border-color:#191917}.published-label{display:inline-flex;align-items:center;gap:5px;color:#4f9362;font-size:calc(9px * var(--nl-font-scale, 1));margin-top:7px}.published-label:before{content:'';width:5px;height:5px;border-radius:50%;background:#60a775}.empty-state{grid-column:1/-1;border:1px dashed #d3cec4;border-radius:18px;padding:37px;text-align:center;background:#faf9f6}.empty-state .empty-icon{font-size:calc(27px * var(--nl-font-scale, 1));color:var(--orange)}.empty-state h3{font-size:calc(16px * var(--nl-font-scale, 1));margin:10px 0 5px;letter-spacing:-.04em}.empty-state p{font-size:calc(11px * var(--nl-font-scale, 1));color:#817d74;margin:0 0 16px}.templates-section{border-bottom:0}.template-filters{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 20px}.filter-chip{border:1px solid #dcd8cf;border-radius:999px;background:#faf9f6;padding:8px 13px;font-size:calc(9px * var(--nl-font-scale, 1));color:#6f6b63;transition:all .15s}.filter-chip:hover{border-color:#aaa398}.filter-chip.active{background:#171715;color:#fff;border-color:#171715}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.template-card{border:1px solid #e2ded6;border-radius:17px;overflow:hidden;background:#fffefa;transition:transform .22s,border-color .22s,box-shadow .22s;cursor:pointer;min-width:0}.template-card:hover{transform:translateY(-5px);border-color:#bcb5aa;box-shadow:0 20px 50px #17171513}.template-preview{height:228px;position:relative;overflow:hidden;background:var(--t-bg,#eae5dd);color:var(--t-ink,#171715);padding:13px}.template-browser{position:absolute;inset:12px 12px auto;overflow:hidden;bottom:-22px;border-radius:7px 7px 0 0;background:var(--t-bg,#f7f6f3);border:1px solid #00000011;box-shadow:0 12px 24px #0001;transition:transform .35s}.template-card:hover .template-browser{transform:translateY(-6px)}.template-browser-bar{height:20px;background:color-mix(in srgb,var(--t-bg) 82%,var(--t-ink));display:flex;align-items:center;gap:3px;padding:0 8px}.template-browser-bar i{width:4px;height:4px;border-radius:50%;background:color-mix(in srgb,var(--t-ink) 28%,transparent)}.template-browser-site{padding:17px 15px 20px;min-height:235px;position:relative;overflow:hidden}.template-browser-nav{font-weight:900;font-size:calc(7px * var(--nl-font-scale, 1));letter-spacing:-.04em;display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.template-browser-nav span:last-child{font-size:calc(5px * var(--nl-font-scale, 1));letter-spacing:.08em;border:1px solid color-mix(in srgb,var(--t-ink) 35%,transparent);padding:4px 6px;border-radius:99px}.template-browser-kicker{font-size:calc(5px * var(--nl-font-scale, 1));letter-spacing:.17em;text-transform:uppercase;color:var(--t-accent);font-weight:900;margin-bottom:8px}.template-browser-headline{font-size:clamp(calc(18px * var(--nl-font-scale, 1)),calc(2.2vw * var(--nl-font-scale, 1)),calc(29px * var(--nl-font-scale, 1)));line-height:.96;letter-spacing:-.08em;font-weight:850;max-width:80%;position:relative;z-index:2;white-space:pre-line}.template-browser-headline.serif{font-family:Georgia,serif;font-weight:500;letter-spacing:-.075em}.template-browser-copy{font-size:calc(6px * var(--nl-font-scale, 1));line-height:1.7;max-width:56%;opacity:.68;margin-top:10px}.template-browser-btn{display:inline-block;margin-top:10px;background:var(--t-accent);width:45px;height:12px;border-radius:99px}.template-browser-art{position:absolute;right:7%;bottom:14%;width:35%;height:43%;border-radius:7px;background:var(--t-image) center/cover,linear-gradient(135deg,var(--t-accent),color-mix(in srgb,var(--t-accent) 40%,var(--t-ink)));box-shadow:0 6px 15px #0002}.template-browser-art.round{width:31%;height:31%;border-radius:50%;right:10%;bottom:22%}.template-browser-art.none{display:none}.template-glaze{position:absolute;inset:0;background:linear-gradient(130deg,transparent 20%,#ffffff0a 45%,transparent 58%);pointer-events:none}.template-preview-foot{position:absolute;bottom:15px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;font-size:calc(8px * var(--nl-font-scale, 1));color:color-mix(in srgb,var(--t-ink) 70%,transparent);z-index:2}.template-preview-foot span{padding:5px 8px;background:color-mix(in srgb,var(--t-bg) 78%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--t-ink) 10%,transparent);border-radius:99px}.template-tag{font-size:calc(7px * var(--nl-font-scale, 1));letter-spacing:.12em;text-transform:uppercase;font-weight:800}.template-info{padding:15px 16px 16px}.template-info-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.template-info h3{font-size:calc(14px * var(--nl-font-scale, 1));letter-spacing:-.04em;margin:0 0 5px}.template-info p{font-size:calc(10px * var(--nl-font-scale, 1));line-height:1.65;color:#77736b;margin:0;min-height:33px}.template-arrow{height:29px;width:29px;border:1px solid #e0dcd4;background:transparent;border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:all .15s}.template-card:hover .template-arrow{background:#171715;color:#fff;border-color:#171715;transform:rotate(45deg)}.template-card-bottom{display:flex;gap:5px;flex-wrap:wrap;margin-top:13px}.template-mini-tag{font-size:calc(8px * var(--nl-font-scale, 1));color:#817d75;background:#f3f1ec;border-radius:5px;padding:4px 6px}.studio-footer{border-top:1px solid var(--line);padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#77736b;font-size:calc(10px * var(--nl-font-scale, 1))}.studio-footer .studio-brand{color:var(--ink)}.studio-footer>a:last-child{color:#5d5952}.empty-loading{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;color:#8a867d;padding:30px;font-size:calc(11px * var(--nl-font-scale, 1))}.loader{width:16px;height:16px;border:2px solid #dad5cc;border-top-color:var(--orange);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes sphereFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(5deg)}}
/* Canvas editor */
.editor-view{height:calc(100vh - 0px);min-height:640px;overflow:hidden;background:#eeece7}.editor-toolbar{height:62px;display:flex;align-items:center;gap:9px;padding:0 15px;background:#fffdfa;border-bottom:1px solid #ddd9d1;position:relative;z-index:10}.icon-button{width:34px;height:34px;border:1px solid #e1ddd5;border-radius:10px;background:#fffdfa;color:#45423c;font-size:calc(17px * var(--nl-font-scale, 1));display:grid;place-items:center;flex-shrink:0}.icon-button:hover{background:#f3f0ea}.editor-brand{display:flex;align-items:center;gap:8px;min-width:150px;max-width:245px}.editor-brand strong{font-size:calc(11px * var(--nl-font-scale, 1));max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draft-pill{font-size:calc(8px * var(--nl-font-scale, 1));border-radius:999px;padding:3px 7px;background:#f0ede7;color:#8a8378}.draft-pill.published{background:#e8f6eb;color:#438456}.toolbar-divider{height:24px;width:1px;background:#e6e2da;margin:0 3px}.page-select-wrap{display:flex;align-items:center;gap:8px;font-size:calc(9px * var(--nl-font-scale, 1));color:#817d73}.page-select-wrap select{height:33px;min-width:120px;border:1px solid #e0dcd4;border-radius:8px;background:#fffdfa;padding:0 8px;font-size:calc(10px * var(--nl-font-scale, 1));color:#2d2b27}.tool-button{height:32px;padding:0 10px;border:1px solid #e0dcd4;border-radius:8px;background:#fffdfa;color:#514e47;font-size:calc(9px * var(--nl-font-scale, 1));white-space:nowrap}.tool-button:hover{background:#f4f1eb;border-color:#c7c1b6}.toolbar-spacer{flex:1}.device-switch{display:flex;gap:2px;background:#f1eee8;padding:3px;border-radius:10px}.device-btn{border:0;border-radius:7px;background:transparent;width:29px;height:26px;color:#817c73;font-size:calc(13px * var(--nl-font-scale, 1))}.device-btn.active{background:#fffdfa;color:#171715;box-shadow:0 1px 4px #0001}.editor-layout{height:calc(100% - 62px);display:grid;grid-template-columns:var(--nl-left-panel-width,252px) minmax(0,1fr) var(--nl-right-panel-width,302px)}.editor-panel{background:#fffdfa;min-width:0;display:flex;flex-direction:column;overflow:hidden}.panel-left{border-right:1px solid #dedad2}.panel-right{border-left:1px solid #dedad2}.panel-heading{padding:21px 18px 16px;border-bottom:1px solid #eeebe4;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.panel-heading h3{font-size:calc(14px * var(--nl-font-scale, 1));letter-spacing:-.045em;margin:4px 0 0}.panel-scroll{padding:16px;overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#d4cfc4 transparent}.panel-subhead{display:flex;align-items:center;justify-content:space-between;font-size:calc(9px * var(--nl-font-scale, 1));font-weight:800;color:#44413b;text-transform:uppercase;letter-spacing:.09em;margin:2px 0 11px}.panel-subhead small{margin-left:4px;color:#9b958a;font-size:calc(8px * var(--nl-font-scale, 1))}.mini-add{height:23px;width:23px;border:1px solid #e2ded6;background:#fffdfa;border-radius:7px;color:#57534b;font-size:calc(14px * var(--nl-font-scale, 1));display:grid;place-items:center}.mini-add:hover{background:#fff1eb;border-color:#ffd2c3;color:#d95730}.panel-rule{height:1px;background:#eeebe4;margin:18px 0}.editor-pages-list,.editor-sections-list{display:grid;gap:5px}.editor-page-item,.editor-section-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 9px;border:1px solid transparent;border-radius:9px;background:transparent;text-align:left;color:#4b4842;transition:all .14s;min-width:0}.editor-page-item:hover,.editor-section-item:hover{background:#f7f5f0}.editor-section-item{cursor:grab}.editor-section-item:active{cursor:grabbing}.editor-section-item.dragging{opacity:.4}.editor-section-item.drop-target{border-color:#ff7547;background:#fff5f0;box-shadow:inset 0 2px #ff7547}.studio-footer-note{font-size:calc(10px * var(--nl-font-scale, 1));color:#9c968b}.editor-page-item.active,.editor-section-item.active{background:#fff0e9;border-color:#ffd8cb;color:#a63e20}.layer-icon{flex-shrink:0;width:27px;height:27px;border:1px solid #e6e1d9;background:#fffdfa;border-radius:7px;display:grid;place-items:center;font-size:calc(10px * var(--nl-font-scale, 1));font-weight:800}.editor-page-item.active .layer-icon,.editor-section-item.active .layer-icon{background:#ffdfd1;border-color:#ffc5b1;color:#a63e20}.item-meta{min-width:0;display:block;flex:1}.item-meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(9px * var(--nl-font-scale, 1));font-weight:750}.item-meta small{display:block;font-size:calc(8px * var(--nl-font-scale, 1));color:#979188;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-delete{border:0;background:transparent;color:#a49e93;font-size:calc(13px * var(--nl-font-scale, 1));padding:4px}.page-delete:hover{color:#c34b2d}.section-library{display:grid;grid-template-columns:1fr 1fr;gap:6px}.section-library-btn{border:1px solid #e5e1d9;border-radius:10px;background:#fffdfa;padding:12px 7px;text-align:left;color:#59554e;display:flex;flex-direction:column;gap:7px;min-height:65px;transition:all .15s}.section-library-btn:hover{border-color:#f3b6a0;background:#fff9f5;transform:translateY(-1px)}.block-symbol{width:23px;height:23px;border-radius:7px;background:#f1eee8;display:grid;place-items:center;font-size:calc(11px * var(--nl-font-scale, 1));color:#777169}.section-library-btn b{font-size:calc(9px * var(--nl-font-scale, 1))}.sidebar-tip{padding:12px;background:#f5f2ec;border-radius:12px;display:flex;gap:9px;margin-top:18px}.sidebar-tip>span{font-size:calc(16px * var(--nl-font-scale, 1));color:var(--orange)}.sidebar-tip p{font-size:calc(9px * var(--nl-font-scale, 1));line-height:1.6;color:#777268;margin:0}.sidebar-tip b{color:#3b3933}.editor-canvas-area{min-width:0;min-height:0;display:flex;flex-direction:column;background:#efede8}.canvas-label-row{height:41px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:calc(8px * var(--nl-font-scale, 1));letter-spacing:.11em;color:#78746a;flex-shrink:0}.canvas-label-row>div{display:flex;align-items:center;gap:8px}.canvas-path{letter-spacing:0;border-left:1px solid #d4d0c8;padding-left:9px;color:#a09a90}.canvas-label-row #canvas-save-hint{letter-spacing:0;color:#8e887e;font-size:calc(9px * var(--nl-font-scale, 1))}.canvas-stage{flex:1;min-height:0;overflow:auto;padding:20px;display:flex;align-items:flex-start;justify-content:center;background-image:radial-gradient(#d8d4cb 0.8px,transparent .8px);background-size:14px 14px}.canvas-frame-wrap{position:relative;width:100%;height:100%;min-height:480px;max-width:100%;background:#fffdfa;box-shadow:0 4px 24px #27231a18;border:1px solid #dedad2;transition:width .2s;overflow:hidden}.canvas-frame-wrap.tablet{width:820px;max-width:100%}.canvas-frame-wrap.mobile{width:390px;max-width:100%;height:calc(100% - 1px);border-radius:15px;box-shadow:0 12px 40px #27231a25}.canvas-frame-wrap iframe{display:block;width:100%;height:100%;min-height:480px;border:0;background:#fffdfa}.canvas-empty{margin:auto;max-width:360px;padding:32px;text-align:center}.canvas-empty>span{font-size:calc(32px * var(--nl-font-scale, 1));color:var(--orange)}.canvas-empty h3{font-size:calc(19px * var(--nl-font-scale, 1));letter-spacing:-.06em;margin:12px 0 6px}.canvas-empty p{font-size:calc(11px * var(--nl-font-scale, 1));color:#77736b;line-height:1.8;margin-bottom:18px}.canvas-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 17px;border-top:1px solid #dfdbd3;font-size:calc(8px * var(--nl-font-scale, 1));color:#8b857b;flex-shrink:0}.canvas-bottom kbd{font-size:calc(8px * var(--nl-font-scale, 1));background:#fffdfa;border:1px solid #dcd7cf;padding:3px 5px;border-radius:4px;box-shadow:0 1px #d4cfc6}.canvas-bottom i{font-style:normal;color:var(--orange);padding:0 4px}.inspector-top{display:block;padding-bottom:0}.inspector-top>div:first-child{display:flex;align-items:center;justify-content:space-between}.inspector-tabs{display:flex;gap:4px;margin-top:15px}.inspector-tab{padding:8px 10px;font-size:calc(9px * var(--nl-font-scale, 1));border:0;border-bottom:2px solid transparent;background:transparent;color:#8b857b}.inspector-tab.active{border-color:var(--orange);color:#25231f;font-weight:800}.inspector-empty{padding:38px 10px;text-align:center;color:#7b766c}.empty-target{width:50px;height:50px;border:1px dashed #d3cdc2;border-radius:16px;display:grid;place-items:center;margin:0 auto 16px;font-size:calc(23px * var(--nl-font-scale, 1));color:var(--orange);background:#faf8f3}.inspector-empty b{font-size:calc(12px * var(--nl-font-scale, 1));color:#393630}.inspector-empty p{font-size:calc(10px * var(--nl-font-scale, 1));line-height:1.8;max-width:210px;margin:7px auto 16px;color:#878177}.selected-thing{display:flex;align-items:center;gap:10px;padding:10px;background:#f5f2ec;border-radius:11px;margin-bottom:17px}.selected-icon{height:32px;width:32px;display:grid;place-items:center;border-radius:9px;background:#ffdfd1;color:#a84426;font-weight:850;font-size:calc(12px * var(--nl-font-scale, 1))}.selected-thing strong{display:block;font-size:calc(10px * var(--nl-font-scale, 1))}.selected-thing small{display:block;color:#969084;font-size:calc(7px * var(--nl-font-scale, 1));letter-spacing:.1em;margin-top:2px}.selected-pulse{width:5px;height:5px;border-radius:50%;background:#61a977;margin-left:auto}.field{display:grid;gap:6px;margin:0 0 14px;min-width:0}.field>label{font-size:calc(9px * var(--nl-font-scale, 1));color:#5c5850;font-weight:750;display:flex;align-items:center;justify-content:space-between;gap:8px}.field>label small{font-size:calc(8px * var(--nl-font-scale, 1));color:#999187;font-weight:500}.field input:not([type=color]):not([type=file]),.field textarea,.field select{width:100%;min-width:0;border:1px solid #e1ddd5;background:#fffefa;color:#282722;border-radius:8px;padding:10px 11px;font-size:calc(10px * var(--nl-font-scale, 1));outline:none;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:#f19a7c;box-shadow:0 0 0 3px #ff754712}.field textarea{line-height:1.65;min-height:64px}.field>small{font-size:calc(8px * var(--nl-font-scale, 1));line-height:1.6;color:#999287}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}.color-input{display:flex;align-items:center;gap:5px}.color-input input[type=color],.two-fields input[type=color]{width:33px;height:34px;padding:3px;border:1px solid #e0dcd4;border-radius:8px;background:#fffefa;flex-shrink:0}.color-input input[type=text]{width:100%;min-width:0;border:1px solid #e0dcd4;border-radius:8px;padding:9px 7px;font-size:calc(9px * var(--nl-font-scale, 1));background:#fffefa}.upload-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}.micro-copy{font-size:calc(8px * var(--nl-font-scale, 1));color:#9a9489}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:17px 0 9px}.action-row .btn{padding:10px 8px;font-size:calc(9px * var(--nl-font-scale, 1))}.move-row{display:flex;gap:7px}.move-row>*{flex:1}.design-intro{padding:10px 2px 19px}.design-orb{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#171715;color:var(--orange);font-size:calc(22px * var(--nl-font-scale, 1));margin-bottom:14px}.design-intro h4{font-size:calc(14px * var(--nl-font-scale, 1));letter-spacing:-.045em;margin:0 0 5px}.design-intro p{font-size:calc(10px * var(--nl-font-scale, 1));color:#817b71;line-height:1.8;margin:0;max-width:240px}.button-samples{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 18px}.sample-button{border:1px solid transparent;padding:10px 5px;font-size:calc(8px * var(--nl-font-scale, 1));font-weight:750;background:var(--nl-accent);color:#fff;border-radius:9px}.sample-button.pill{border-radius:999px}.sample-button.outline{background:transparent;border-color:#d4d0c8;color:#393630}.sample-button.gradient{background:linear-gradient(120deg,#ff7547,#7e5cff)}.sample-button.glass{background:#f4f1eb;border-color:#e0dcd4;color:#35332d}.studio-toast{position:fixed;z-index:80;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#191917;color:#fff;border-radius:999px;padding:11px 17px;box-shadow:0 12px 35px #0002;font-size:calc(10px * var(--nl-font-scale, 1));transition:opacity .2s,transform .2s;max-width:min(90vw,600px)}.studio-toast.visible{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;inset:0;background:#17171565;backdrop-filter:blur(5px);z-index:50;display:grid;place-items:center;padding:18px}.modal-card{width:min(420px,100%);background:#fffdfa;border-radius:20px;border:1px solid #e4dfd6;box-shadow:0 30px 100px #0003;padding:27px}.modal-card h2{font-size:calc(27px * var(--nl-font-scale, 1));letter-spacing:-.07em;margin:11px 0 6px}.modal-card p{font-size:calc(11px * var(--nl-font-scale, 1));line-height:1.8;color:#7f796f;margin:0 0 21px}.modal-card .field input{padding:13px 12px}.modal-two{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-two .btn{min-width:104px}
@media(max-width:1180px){.editor-layout{grid-template-columns:var(--nl-left-panel-width,220px) minmax(0,1fr) var(--nl-right-panel-width,260px)}.editor-toolbar{gap:6px;padding:0 9px}.editor-brand{min-width:120px}.toolbar-divider{margin:0}.tool-button{padding:0 8px}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.saved-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:900px){.header-center{display:none}.studio-hero{grid-template-columns:1fr}.hero-copy{padding-bottom:35px}.hero-art{min-height:350px;margin:0 0 32px}.editor-view{height:auto;min-height:100vh;overflow:visible}.editor-toolbar{height:auto;min-height:62px;flex-wrap:wrap;padding:10px;position:sticky;top:0}.editor-layout{height:auto;grid-template-columns:220px minmax(0,1fr)}.panel-right{grid-column:1/-1;border-top:1px solid #dedad2;border-left:0;min-height:350px}.editor-canvas-area{min-height:650px}.panel-left{min-height:650px}.inspector-scroll{max-height:none}.editor-toolbar .toolbar-spacer{display:none}.editor-toolbar .editor-brand{flex:1}.canvas-stage{min-height:600px}}@media(max-width:650px){.studio-header{height:62px;gap:8px;padding:0 15px}.studio-brand{font-size:calc(10px * var(--nl-font-scale, 1))}.header-actions{gap:8px}.header-link{display:none}.header-actions .btn{padding:9px 10px;font-size:calc(9px * var(--nl-font-scale, 1))}.dashboard-view{padding:0 17px}.hero-copy h1{font-size:calc(51px * var(--nl-font-scale, 1))}.hero-copy>p{font-size:calc(12px * var(--nl-font-scale, 1))}.hero-buttons .btn{width:100%}.hero-art{min-height:290px;border-radius:20px}.art-floating-card{left:13px;bottom:42px}.art-orbit{width:73%}.art-sphere{width:42%}.section-heading{align-items:flex-start;flex-direction:column}.section-tools{width:100%}.search-box{flex:1}.saved-grid,.template-grid{grid-template-columns:1fr}.template-preview{height:225px}.studio-footer{flex-wrap:wrap}.studio-footer>span{order:3;width:100%}.editor-layout{display:flex;flex-direction:column}.panel-left{min-height:auto;max-height:380px;border-right:0;border-bottom:1px solid #dedad2}.editor-canvas-area{order:2;min-height:650px}.panel-right{order:3}.panel-left .panel-scroll{max-height:300px}.editor-toolbar{gap:6px}.editor-brand{max-width:165px}.editor-brand strong{max-width:100px}.toolbar-divider{display:none}.page-select-wrap{order:3}.editor-toolbar #add-page-btn{order:4}.editor-toolbar .toolbar-spacer{display:none}.device-switch{order:5}.editor-toolbar #undo-btn,.editor-toolbar #redo-btn{order:6}.editor-toolbar #export-site-btn{order:7}.editor-toolbar #preview-site-btn{order:8}.editor-toolbar #save-site-btn{order:9}.editor-toolbar #publish-site-btn{order:10}.editor-toolbar .tool-button,.editor-toolbar .btn{padding:7px 9px;font-size:calc(8px * var(--nl-font-scale, 1))}.editor-toolbar .editor-brand{flex:1}.canvas-stage{padding:9px;min-height:600px}.canvas-frame-wrap{min-height:560px}.canvas-bottom{font-size:calc(7px * var(--nl-font-scale, 1))}.canvas-bottom span:last-child{display:none}.panel-heading{padding:15px}.panel-scroll{padding:13px}.section-library{grid-template-columns:repeat(4,1fr)}.section-library-btn{align-items:center;text-align:center;padding:9px 4px}.section-library-btn b{font-size:calc(8px * var(--nl-font-scale, 1))}.two-fields{gap:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Expanded template composition previews: each card communicates its actual layout family. */
.template-preview[data-layout="centered"] .template-browser-headline,.template-preview[data-layout="centered"] .template-browser-copy{margin-left:auto;margin-right:auto;text-align:center}.template-preview[data-layout="centered"] .template-browser-art{right:50%;transform:translateX(50%);width:55%;height:27%;bottom:9%;border-radius:999px 999px 8px 8px}
.template-preview[data-layout="fullbleed"] .template-browser-site,.template-preview[data-layout="immersive"] .template-browser-site{background:linear-gradient(0deg,color-mix(in srgb,var(--t-bg) 15%,transparent),color-mix(in srgb,var(--t-bg) 85%,transparent)),var(--t-image) center/cover}.template-preview[data-layout="fullbleed"] .template-browser-headline,.template-preview[data-layout="immersive"] .template-browser-headline{max-width:90%;font-size:clamp(calc(19px * var(--nl-font-scale, 1)),calc(2.5vw * var(--nl-font-scale, 1)),calc(34px * var(--nl-font-scale, 1)))}.template-preview[data-layout="fullbleed"] .template-browser-art,.template-preview[data-layout="immersive"] .template-browser-art{display:none}.template-preview[data-layout="immersive"] .template-browser-site{text-align:center;padding-top:31px}.template-preview[data-layout="immersive"] .template-browser-headline,.template-preview[data-layout="immersive"] .template-browser-copy{margin-left:auto;margin-right:auto}
.template-preview[data-layout="editorial"] .template-browser-headline{font-size:clamp(calc(23px * var(--nl-font-scale, 1)),calc(3.5vw * var(--nl-font-scale, 1)),calc(42px * var(--nl-font-scale, 1)));letter-spacing:-.11em;max-width:95%;line-height:.82}.template-preview[data-layout="editorial"] .template-browser-art{width:24%;height:48%;right:5%;border-radius:999px 999px 4px 4px}.template-preview[data-layout="product"] .template-browser-art{height:48%;width:43%;border:7px solid color-mix(in srgb,var(--t-bg) 70%,white);border-radius:14px;right:5%;bottom:12%;transform:rotate(-4deg)}
.template-preview[data-layout="bento"] .template-browser-art{width:43%;height:46%;right:6%;bottom:12%;border-radius:13px;transform:rotate(-3deg)}.template-preview[data-layout="bento"] .template-browser-site:after{content:"";position:absolute;right:5%;top:34%;width:27%;height:28%;border:1px solid var(--t-accent);border-radius:10px;opacity:.6;transform:rotate(8deg)}.template-preview[data-layout="storefront"] .template-browser-nav{border-bottom:1px solid color-mix(in srgb,var(--t-ink) 16%,transparent);padding-bottom:7px;margin-bottom:17px}.template-preview[data-layout="storefront"] .template-browser-headline,.template-preview[data-layout="storefront"] .template-browser-copy{text-align:center;margin-left:auto;margin-right:auto}.template-preview[data-layout="storefront"] .template-browser-art{height:27%;width:72%;right:14%;bottom:8%;border-radius:6px}
.template-preview[data-layout="3d"] .template-browser-art{width:36%;height:39%;border-radius:40% 60% 64% 36%;filter:saturate(1.3);transform:perspective(150px) rotateY(-15deg) rotateZ(-5deg);box-shadow:8px 13px 23px #0003}.template-preview[data-layout="3d"] .template-browser-site:after{content:"";position:absolute;width:44%;height:22%;right:0;bottom:22%;border:1px solid var(--t-accent);border-radius:50%;transform:rotate(-25deg)}.template-preview[data-layout="collage"] .template-browser-art{width:37%;height:44%;right:8%;bottom:15%;transform:rotate(7deg);border:4px solid var(--t-bg)}.template-preview[data-layout="collage"] .template-browser-site:after{content:"";position:absolute;width:24%;height:28%;right:36%;bottom:12%;background:color-mix(in srgb,var(--t-accent) 35%,var(--t-bg));border:1px solid var(--t-accent);transform:rotate(-11deg)}
.template-preview[data-layout="brutalist"] .template-browser{border:2px solid var(--t-ink);border-radius:0;box-shadow:5px 5px 0 var(--t-accent)}.template-preview[data-layout="brutalist"] .template-browser-headline{text-transform:uppercase;letter-spacing:-.105em;font-size:clamp(calc(19px * var(--nl-font-scale, 1)),calc(2.8vw * var(--nl-font-scale, 1)),calc(35px * var(--nl-font-scale, 1)))}.template-preview[data-layout="brutalist"] .template-browser-btn{border-radius:0}.template-preview[data-layout="terminal"] .template-browser-site{background-image:linear-gradient(color-mix(in srgb,var(--t-accent) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--t-accent) 9%,transparent) 1px,transparent 1px);background-size:12px 12px}.template-preview[data-layout="terminal"] .template-browser-headline{font-family:monospace;font-size:clamp(calc(16px * var(--nl-font-scale, 1)),calc(2.5vw * var(--nl-font-scale, 1)),calc(31px * var(--nl-font-scale, 1)))}.template-preview[data-layout="terminal"] .template-browser-art{border:1px solid var(--t-accent);border-radius:4px}.template-preview[data-layout="asymmetric"] .template-browser-headline{max-width:66%;font-size:clamp(calc(23px * var(--nl-font-scale, 1)),calc(3vw * var(--nl-font-scale, 1)),calc(38px * var(--nl-font-scale, 1)))}.template-preview[data-layout="asymmetric"] .template-browser-art{height:60%;width:27%;right:4%;bottom:5%;border-radius:0 0 0 28px}.template-preview[data-layout="vertical"] .template-browser-headline{max-width:70%;font-family:Georgia,serif;font-size:clamp(calc(23px * var(--nl-font-scale, 1)),calc(3vw * var(--nl-font-scale, 1)),calc(38px * var(--nl-font-scale, 1)));line-height:.86}.template-preview[data-layout="vertical"] .template-browser-kicker{writing-mode:vertical-rl;position:absolute;left:7px;top:45%;z-index:3}.template-preview[data-layout="vertical"] .template-browser-art{height:47%;width:29%;right:3%;bottom:9%;border-radius:80px 80px 3px 3px}
/* Motion lab / AI panel. */
.inspector-tabs{gap:2px}.inspector-tab{padding:8px 8px;font-size:calc(8px * var(--nl-font-scale, 1))}.inspector-tab.ai-tab{color:#9a583f}.inspector-tab.ai-tab.active{color:#9a3e21;border-color:#ff7547}.motion-lab{margin:14px 0 20px;padding:13px;background:#f5f2ec;border:1px solid #e4dfd6;border-radius:12px}.motion-lab-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.motion-lab-title b{font-size:calc(10px * var(--nl-font-scale, 1))}.motion-lab-title small,.motion-lab>p{font-size:calc(8px * var(--nl-font-scale, 1));color:#898378}.motion-lab>p{line-height:1.6;margin:10px 0 0}.motion-sample-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.motion-sample{min-width:0;min-height:75px;display:grid;align-content:center;justify-items:center;gap:7px;background:#fffefa;border:1px solid #e4dfd6;border-radius:8px;padding:8px;color:#4f4a42}.motion-sample b{font-size:calc(8px * var(--nl-font-scale, 1))}.motion-sample.selected{border-color:#ff7547;box-shadow:0 0 0 2px #ff754718;background:#fff8f4}.motion-demo{position:relative;display:grid;place-items:center;width:40px;height:28px;border:1px solid #d7d0c5;border-radius:7px;background:#f1eee8;color:#ff7547;font-size:calc(7px * var(--nl-font-scale, 1));font-weight:900;overflow:hidden}.demo-rise{animation:nlDemoRise 1.8s ease-in-out infinite}.demo-orbit:before{content:"";position:absolute;width:32px;height:12px;border:1px solid #ff7547;border-radius:50%;animation:nlDemoOrbit 3s linear infinite}.demo-pulse{animation:nlDemoPulse 1.3s ease-in-out infinite}.demo-shimmer{background:linear-gradient(100deg,#eee9e1 15%,#fff 45%,#f0d8cc 60%,#eee9e1 85%);background-size:200% 100%;animation:nlDemoShimmer 2s infinite}.demo-tilt{animation:nlDemoTilt 2s ease-in-out infinite}.demo-scan:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#ff7547b3,transparent);animation:nlDemoScan 1.7s ease-in-out infinite}.demo-type{animation:nlDemoType 2.2s steps(7,end) infinite;white-space:nowrap}.demo-glitch{animation:nlDemoGlitch 2s steps(1,end) infinite}.inspector-ai{padding-bottom:18px}.ai-lab-header{padding:12px 3px 18px}.ai-orb{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:#171715;color:#ff7547;font-size:calc(24px * var(--nl-font-scale, 1));box-shadow:inset 0 0 0 1px #ffffff15;margin-bottom:13px}.ai-status{display:inline-flex;align-items:center;gap:6px;font-size:calc(7px * var(--nl-font-scale, 1));letter-spacing:.11em;color:#8e887d;font-weight:850}.ai-status i{width:6px;height:6px;border-radius:50%;background:#d5a13a}.ai-lab-header h4{font-size:calc(19px * var(--nl-font-scale, 1));letter-spacing:-.06em;margin:8px 0 6px}.ai-lab-header p{font-size:calc(9px * var(--nl-font-scale, 1));line-height:1.85;color:#817b72;margin:0}.ai-provider-note{display:grid;gap:3px;padding:11px 12px;border:1px solid #edcfbe;background:#fff5ef;border-radius:10px;margin-bottom:16px}.ai-provider-note b{font-size:calc(9px * var(--nl-font-scale, 1));color:#984e31}.ai-provider-note span{font-size:calc(8px * var(--nl-font-scale, 1));color:#9c7867}.ai-context-check{display:flex;align-items:flex-start;gap:8px;padding:10px;border-radius:9px;background:#f5f2ec;color:#7d766b;font-size:calc(8px * var(--nl-font-scale, 1));line-height:1.7}.ai-context-checkmark{display:grid;place-items:center;flex-shrink:0;width:16px;height:16px;border-radius:50%;background:#e0eee0;color:#458351;font-weight:900}.ai-intent-help{font-size:calc(8px * var(--nl-font-scale, 1));line-height:1.7;color:#888174;margin:10px 0 15px}.ai-output-wrap{margin-top:15px;border:1px solid #ded8ce;border-radius:10px;overflow:hidden}.ai-output-head{display:flex;gap:8px;justify-content:space-between;align-items:center;background:#f5f2ec;padding:10px}.ai-output-head b{font-size:calc(9px * var(--nl-font-scale, 1))}.ai-output-head span{font-size:calc(7px * var(--nl-font-scale, 1));color:#91887b}.ai-output-wrap pre{max-height:300px;overflow:auto;margin:0;padding:11px;background:#20201e;color:#dfecdc;font:calc(8px * var(--nl-font-scale, 1))/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.ai-output-actions{display:flex;gap:7px;padding:9px}.ai-output-actions .btn{flex:1}.ai-contract-footer{border-top:1px solid #e3ded6;padding-top:15px;margin-top:18px}.ai-contract-footer b{font-size:calc(9px * var(--nl-font-scale, 1))}.ai-contract-footer p{font-size:calc(8px * var(--nl-font-scale, 1));line-height:1.8;color:#898277}.ai-contract-footer a{font-size:calc(8px * var(--nl-font-scale, 1));color:#9e482b;text-decoration:underline;text-underline-offset:3px}@keyframes nlBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes nlDemoRise{0%,100%{transform:translateY(4px);opacity:.75}50%{transform:translateY(-4px);opacity:1}}@keyframes nlDemoOrbit{to{transform:rotate(337deg)}}@keyframes nlDemoPulse{50%{box-shadow:0 0 0 7px #ff75472b}}@keyframes nlDemoShimmer{to{background-position:200% 0}}@keyframes nlDemoTilt{50%{transform:perspective(150px) rotateY(-20deg) rotateX(10deg)}}@keyframes nlDemoScan{50%{transform:translateY(15px)}}@keyframes nlDemoType{0%,100%{clip-path:inset(0 65% 0 0)}55%{clip-path:inset(0 0 0 0)}}@keyframes nlDemoGlitch{22%,26%{text-shadow:2px 0 #ff7547,-2px 0 #6ad9ff}}@media(prefers-reduced-motion:reduce){.motion-demo{animation:none!important}.demo-orbit:before,.demo-scan:after{animation:none!important}}

/* Template category filters stay usable even as the catalog grows to dozens of categories. */
.template-filters{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;margin:0 0 20px;padding:2px 1px 10px;scrollbar-width:thin;scrollbar-color:#c8c2b7 transparent;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 0%,#000 94%,transparent 100%)}
.filter-chip{flex:0 0 auto}
.template-filters::-webkit-scrollbar{height:5px}
.template-filters::-webkit-scrollbar-thumb{background:#c8c2b7;border-radius:99px}
@media(max-width:640px){.template-filters{margin-right:-18px;padding-right:22px}}


/* --------------------------------------------------------------------------
   NORTH LANE Studio preferences: independent workspace theme, scale and density
   -------------------------------------------------------------------------- */
.studio-app{width:100%;min-height:100vh;min-width:0}
:root[data-studio-theme="light"]{color-scheme:light;--ink:#171715;--muted:#777770;--paper:#f5f3ef;--surface:#fffefa;--line:#e2dfd8;--shadow:0 24px 70px #1d1a1610}
:root[data-studio-theme="dark"]{color-scheme:dark;--ink:#f0eee9;--muted:#aaa69e;--paper:#121211;--surface:#1d1c1a;--line:#363530;--shadow:0 24px 70px #0006}
:root[data-studio-theme="dark"] body{background:#121211;color:#f0eee9}
:root[data-studio-theme="dark"] .studio-header,:root[data-studio-theme="dark"] .editor-toolbar{background:#1b1b19;border-color:#34332e;color:#efede7}
:root[data-studio-theme="dark"] .studio-brand,:root[data-studio-theme="dark"] .studio-footer .studio-brand{color:#f0eee9}
:root[data-studio-theme="dark"] .studio-brand small,:root[data-studio-theme="dark"] .header-center,:root[data-studio-theme="dark"] .header-link,:root[data-studio-theme="dark"] .studio-footer,:root[data-studio-theme="dark"] .studio-footer-note{color:#aaa69e}
:root[data-studio-theme="dark"] .brand-mark{background:#f0eee9;color:#191918}
:root[data-studio-theme="dark"] .hero-copy h1,:root[data-studio-theme="dark"] .section-heading h2,:root[data-studio-theme="dark"] .template-info h3,:root[data-studio-theme="dark"] .site-card-info h3{color:#f0eee9}
:root[data-studio-theme="dark"] .hero-copy h1 em{color:#b8b2a8}
:root[data-studio-theme="dark"] .hero-copy>p,:root[data-studio-theme="dark"] .hero-proof,:root[data-studio-theme="dark"] .section-heading p,:root[data-studio-theme="dark"] .template-info p,:root[data-studio-theme="dark"] .site-card-info p{color:#aaa69e}
:root[data-studio-theme="dark"] .hero-art{background:radial-gradient(ellipse at center,#292824 0%,#1d1c19 63%,#171715 100%);border-color:#383630}
:root[data-studio-theme="dark"] .hero-art:before{background-image:linear-gradient(#eee8d90b 1px,transparent 1px),linear-gradient(90deg,#eee8d90b 1px,transparent 1px)}
:root[data-studio-theme="dark"] .art-floating-card{background:#22211eeb;border-color:#45433c;color:#f1eee8}
:root[data-studio-theme="dark"] .art-label{color:#bcb6aa}
:root[data-studio-theme="dark"] .saved-section,:root[data-studio-theme="dark"] .templates-section,:root[data-studio-theme="dark"] .studio-hero{border-color:#363530}
:root[data-studio-theme="dark"] .site-card,:root[data-studio-theme="dark"] .template-card{background:#1d1c1a;border-color:#383731;color:#f0eee9}
:root[data-studio-theme="dark"] .site-card:hover,:root[data-studio-theme="dark"] .template-card:hover{border-color:#615b50;box-shadow:0 20px 50px #0005}
:root[data-studio-theme="dark"] .site-card-preview{background:#242320}
:root[data-studio-theme="dark"] .search-box,:root[data-studio-theme="dark"] .filter-chip,:root[data-studio-theme="dark"] .empty-state,:root[data-studio-theme="dark"] .mini-add,:root[data-studio-theme="dark"] .icon-button,:root[data-studio-theme="dark"] .tool-button{background:#242320;color:#e8e5de;border-color:#403e38}
:root[data-studio-theme="dark"] .search-box input{color:#f0eee9}
:root[data-studio-theme="dark"] .filter-chip.active{background:#f0eee9;color:#171715;border-color:#f0eee9}
:root[data-studio-theme="dark"] .filter-chip:hover,:root[data-studio-theme="dark"] .tool-button:hover,:root[data-studio-theme="dark"] .icon-button:hover{background:#302f2b;border-color:#666055}
:root[data-studio-theme="dark"] .btn-light,:root[data-studio-theme="dark"] .btn-outline{background:#242320;color:#efede8;border-color:#46443d}
:root[data-studio-theme="dark"] .btn-outline:hover,:root[data-studio-theme="dark"] .btn-light:hover{background:#302f2b;border-color:#6a6458}
:root[data-studio-theme="dark"] .btn-dark{background:#eeeae2;color:#171715}
:root[data-studio-theme="dark"] .btn-dark:hover{background:#d7d1c6}
:root[data-studio-theme="dark"] .count-pill{background:#33312b;color:#f0eee9}
:root[data-studio-theme="dark"] .published-label{color:#88c99a}
:root[data-studio-theme="dark"] .template-mini-tag{background:#302f2b;color:#d4cfc5}
:root[data-studio-theme="dark"] .empty-state{background:#1b1b19;border-color:#393832}
:root[data-studio-theme="dark"] .editor-view{background:#131312;color:#eeece6}
:root[data-studio-theme="dark"] .editor-panel{background:#1b1b19;color:#eeece6}
:root[data-studio-theme="dark"] .panel-left,:root[data-studio-theme="dark"] .panel-right,:root[data-studio-theme="dark"] .panel-heading,:root[data-studio-theme="dark"] .panel-rule{border-color:#34332e;background-color:transparent}
:root[data-studio-theme="dark"] .panel-rule{background:#34332e}
:root[data-studio-theme="dark"] .panel-subhead,:root[data-studio-theme="dark"] .panel-heading h3{color:#e9e6df}
:root[data-studio-theme="dark"] .editor-page-item,:root[data-studio-theme="dark"] .editor-section-item{color:#c7c2b8}
:root[data-studio-theme="dark"] .editor-page-item:hover,:root[data-studio-theme="dark"] .editor-section-item:hover{background:#292824}
:root[data-studio-theme="dark"] .editor-page-item.active,:root[data-studio-theme="dark"] .editor-section-item.active{background:#39271f;border-color:#77482f;color:#ffd6c4}
:root[data-studio-theme="dark"] .layer-icon,:root[data-studio-theme="dark"] .section-library-btn{background:#242320;color:#ded9d0;border-color:#403e38}
:root[data-studio-theme="dark"] .section-library-btn:hover{background:#33251f;border-color:#90583b}
:root[data-studio-theme="dark"] .block-symbol{background:#38352f;color:#e7dfd1}
:root[data-studio-theme="dark"] .sidebar-tip{background:#25241f;color:#e5e0d7}
:root[data-studio-theme="dark"] .sidebar-tip p,:root[data-studio-theme="dark"] .item-meta small,:root[data-studio-theme="dark"] .canvas-label-row,:root[data-studio-theme="dark"] .canvas-bottom{color:#aaa59a}
:root[data-studio-theme="dark"] .editor-canvas-area{background:#171715}
:root[data-studio-theme="dark"] .canvas-label-row{background:#1c1b19}
:root[data-studio-theme="dark"] .canvas-stage{background-color:#20201d;background-image:radial-gradient(#4a4943 .8px,transparent .8px)}
:root[data-studio-theme="dark"] .canvas-frame-wrap{background:#252420;border-color:#49463e}
:root[data-studio-theme="dark"] .page-select-wrap{color:#aaa69e}
:root[data-studio-theme="dark"] .page-select-wrap select,:root[data-studio-theme="dark"] .field input:not([type="color"]),:root[data-studio-theme="dark"] .field textarea,:root[data-studio-theme="dark"] .field select,:root[data-studio-theme="dark"] .search-box input{background:#252420;color:#f0eee9;border-color:#49473f}
:root[data-studio-theme="dark"] .field label,:root[data-studio-theme="dark"] .field small,:root[data-studio-theme="dark"] .micro-copy{color:#b7b1a6}
:root[data-studio-theme="dark"] .selected-thing{background:#282621;border-color:#47443c;color:#f0eee9}
:root[data-studio-theme="dark"] .inspector-empty{color:#e4e0d8}
:root[data-studio-theme="dark"] .motion-lab,:root[data-studio-theme="dark"] .motion-sample{background:#252420;border-color:#45433b;color:#e4e0d8}
:root[data-studio-theme="dark"] .motion-demo{background:#323029;border-color:#504c42}
:root[data-studio-theme="dark"] .ai-provider-note{background:#31231e;border-color:#63412e}
:root[data-studio-theme="dark"] .ai-context-check{background:#262820;color:#ccc8bd}
:root[data-studio-theme="dark"] .ai-output-wrap{border-color:#49453c}
:root[data-studio-theme="dark"] .ai-output-head{background:#282621;color:#eee9df}
:root[data-studio-theme="dark"] .preferences-dialog,:root[data-studio-theme="dark"] .command-card{background:#1c1b19;color:#eeeae2;border-color:#3a3832}
:root[data-studio-theme="dark"] .preferences-header,:root[data-studio-theme="dark"] .preferences-footer{border-color:#3a3832}
:root[data-studio-theme="dark"] .preferences-nav{background:#181816;border-color:#36342e}
:root[data-studio-theme="dark"] .preferences-nav-item{color:#bbb6ab}
:root[data-studio-theme="dark"] .preferences-section-title h3,:root[data-studio-theme="dark"] .preferences-header h2{color:#f1eee8}
:root[data-studio-theme="dark"] .preference-field select,:root[data-studio-theme="dark"] .command-search-row input{background:#292824;color:#f1eee8;border-color:#49463e}
:root[data-studio-theme="dark"] .preference-field{border-color:#38362f}
:root[data-studio-theme="dark"] .shortcut-row,:root[data-studio-theme="dark"] .shortcut-row kbd,:root[data-studio-theme="dark"] .command-list button{border-color:#39372f}
:root[data-studio-theme="dark"] .command-list button{color:#e8e4dc}
:root[data-studio-theme="dark"] .command-list button:hover,:root[data-studio-theme="dark"] .command-list button.command-active{background:#2d2b25;border-color:#665e4d}
:root[data-studio-theme="dark"] .command-list button small{color:#aaa59a}
:root[data-studio-theme="dark"] .modal-card{background:#1d1c1a;color:#eeeae2;border-color:#3b3932}
:root[data-studio-theme="dark"] .modal-card p{color:#b3aea4}
:root[data-studio-theme="dark"] .site-card-actions button,:root[data-studio-theme="dark"] .site-card-actions a{background:#282722;color:#e9e6df;border-color:#45433b}

/* Preferences dialog and its tabs */
.preferences-backdrop,.command-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#10100ecc;backdrop-filter:blur(8px);overflow:auto}
.preferences-dialog{width:min(930px,100%);max-height:min(790px,calc(100vh - 40px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#fffefa;color:#211f1b;border:1px solid #e1ddd4;border-radius:20px;box-shadow:0 30px 100px #0003;overflow:hidden}
.preferences-header{padding:23px 25px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid #e7e2d9}
.preferences-header h2{font-size:calc(27px * var(--nl-font-scale, 1));letter-spacing:-.06em;line-height:1.1;margin:8px 0 7px}
.preferences-header p{font-size:calc(11px * var(--nl-font-scale, 1));color:#79746a;margin:0}
.preferences-layout{display:grid;grid-template-columns:205px minmax(0,1fr);min-height:0;overflow:hidden}
.preferences-nav{display:flex;flex-direction:column;gap:5px;padding:15px;background:#f5f2ec;border-right:1px solid #e2ded6;overflow:auto}
.preferences-nav-item{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid transparent;border-radius:9px;padding:11px 12px;background:transparent;color:#666157;font-size:calc(11px * var(--nl-font-scale, 1))}
.preferences-nav-item>span{font-size:calc(15px * var(--nl-font-scale, 1));width:18px;text-align:center}
.preferences-nav-item:hover{background:#ebe7de}
.preferences-nav-item.active{background:#fff9f4;color:#a6492a;border-color:#f2c4b1;font-weight:750}
.preferences-content{padding:20px 24px;overflow:auto;min-height:0}
.preferences-section-title{margin-bottom:16px}
.preferences-section-title h3{font-size:calc(19px * var(--nl-font-scale, 1));letter-spacing:-.04em;margin:0 0 5px}
.preferences-section-title p{font-size:calc(11px * var(--nl-font-scale, 1));line-height:1.7;color:#7e786e;margin:0;max-width:560px}
.preference-field{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,235px);align-items:center;gap:20px;padding:14px 0;border-bottom:1px solid #ece7de}
.preference-field>div{min-width:0}
.preference-field label{display:block;font-size:calc(11px * var(--nl-font-scale, 1));font-weight:750;color:var(--ink);margin-bottom:3px}
.preference-field small{display:block;font-size:calc(9px * var(--nl-font-scale, 1));line-height:1.6;color:#8a8479}
.preference-field select{width:100%;height:37px;border:1px solid #ded9d0;border-radius:8px;padding:0 10px;background:#fffefa;color:#282620;font-size:calc(11px * var(--nl-font-scale, 1))}
.preference-field input[type="color"]{width:48px;height:36px;border:1px solid #ded9d0;padding:3px;border-radius:8px;background:#fff}
.preference-field input[type="range"]{width:100%;accent-color:var(--orange)}
.preference-field.range-field{grid-template-columns:minmax(0,1fr) minmax(170px,235px)}
.preference-field output{float:right;color:var(--orange-dark);font-weight:800}
.switch-control{display:inline-flex!important;justify-self:end;align-items:center;position:relative;width:43px;height:25px;margin:0!important}
.switch-control input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch-control span{display:block;width:43px;height:25px;border-radius:99px;background:#d3cec3;transition:background .2s;pointer-events:none}
.switch-control span:after{content:"";display:block;width:19px;height:19px;margin:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .2s}
.switch-control input:checked+span{background:var(--orange)}
.switch-control input:checked+span:after{transform:translateX(18px)}
.switch-control input:focus-visible+span{outline:2px solid var(--orange);outline-offset:3px}
.accessibility-note{margin-top:20px;padding:14px;border:1px solid #dbe6d7;border-radius:11px;background:#f4f8f1;color:#425c41}
.accessibility-note b{font-size:calc(10px * var(--nl-font-scale, 1))}.accessibility-note p{font-size:calc(9px * var(--nl-font-scale, 1));line-height:1.7;margin:6px 0 0;color:#63745d}
.shortcut-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0;border-bottom:1px solid #e6e1d8;font-size:calc(11px * var(--nl-font-scale, 1))}
kbd{display:inline-block;font:calc(10px * var(--nl-font-scale, 1))/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;border:1px solid #d9d4ca;border-bottom-width:2px;border-radius:6px;padding:4px 7px;background:color-mix(in srgb,var(--surface) 85%,var(--line));white-space:nowrap}
.preferences-footer{display:flex;align-items:center;gap:12px;padding:15px 22px;border-top:1px solid #e7e2d9;background:color-mix(in srgb,var(--surface) 92%,var(--paper));}
.preferences-footer>span{margin-right:auto;font-size:calc(9px * var(--nl-font-scale, 1));color:var(--muted)}

/* Quick action command palette */
.command-card{width:min(620px,100%);max-height:min(720px,calc(100vh - 40px));overflow:hidden;display:flex;flex-direction:column;background:#fffefa;color:#211f1b;border:1px solid #e2ddd4;border-radius:18px;box-shadow:0 30px 100px #0004}
.command-search-row{display:flex;align-items:center;gap:12px;padding:15px 17px;border-bottom:1px solid #e6e1d8}
.command-search-row>span{font-size:calc(18px * var(--nl-font-scale, 1));color:var(--orange)}
.command-search-row input{border:0;background:transparent;outline:none;min-width:0;flex:1;font-size:calc(14px * var(--nl-font-scale, 1));color:#211f1b}
.command-search-row kbd{color:var(--muted)}
.command-label{font-size:calc(9px * var(--nl-font-scale, 1));letter-spacing:.15em;color:#8c857a;padding:15px 18px 6px;margin:0}
.command-list{padding:5px 9px 12px;overflow:auto}
.command-list button{display:flex;align-items:center;gap:12px;text-align:left;width:100%;border:1px solid transparent;border-radius:10px;background:transparent;color:#33302a;padding:11px 10px;margin:2px 0}
.command-list button:hover,.command-list button.command-active{background:#f6f1e9;border-color:#e3ded4}
.command-icon{flex:0 0 31px;height:31px;display:grid;place-items:center;background:#f0ece4;border-radius:8px;color:#8b4b31;font-size:calc(15px * var(--nl-font-scale, 1))}
.command-list button>span:nth-child(2){flex:1;min-width:0}.command-list button b{display:block;font-size:calc(11px * var(--nl-font-scale, 1))}.command-list button small{display:block;font-size:calc(9px * var(--nl-font-scale, 1));color:#8a8479;margin-top:2px}
.command-list button kbd{font-size:calc(8px * var(--nl-font-scale, 1))}.command-card footer{border-top:1px solid #e8e3da;padding:10px 17px;color:#8d877d;font-size:calc(9px * var(--nl-font-scale, 1))}

/* Comfort/compact density, canvas options and accessibility preferences. */
:root[data-ui-density="compact"] .panel-heading{padding:13px 14px 11px}
:root[data-ui-density="compact"] .panel-scroll{padding:10px}
:root[data-ui-density="compact"] .editor-page-item,:root[data-ui-density="compact"] .editor-section-item{padding:6px 7px;gap:7px}
:root[data-ui-density="compact"] .section-library-btn{min-height:52px;padding:8px 7px;gap:5px}
:root[data-ui-density="compact"] .preference-field{padding:10px 0}
:root[data-ui-density="spacious"] .panel-heading{padding:26px 22px 20px}
:root[data-ui-density="spacious"] .panel-scroll{padding:22px}
:root[data-ui-density="spacious"] .editor-page-item,:root[data-ui-density="spacious"] .editor-section-item{padding:12px 11px;gap:11px}
:root[data-ui-density="spacious"] .section-library-btn{min-height:78px;padding:15px 10px}
:root[data-canvas-background="plain"] .canvas-stage{background-image:none!important}
:root[data-canvas-background="checker"] .canvas-stage{background-image:linear-gradient(45deg,#d5d1c8 25%,transparent 25%),linear-gradient(-45deg,#d5d1c8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d5d1c8 75%),linear-gradient(-45deg,transparent 75%,#d5d1c8 75%)!important;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
:root[data-canvas-background="dark"] .canvas-stage{background-color:#292824;background-image:radial-gradient(#4e4b43 .8px,transparent .8px)!important}
:root[data-canvas-grid="off"][data-canvas-background="grid"] .canvas-stage{background-image:none!important}
:root[data-ui-contrast="high"] button,:root[data-ui-contrast="high"] input,:root[data-ui-contrast="high"] select,:root[data-ui-contrast="high"] textarea{border-width:2px!important}
:root[data-ui-contrast="high"] :focus-visible{outline-width:3px!important;outline-offset:3px!important}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.preferences-open,.theme-toggle{flex-shrink:0}
.command-trigger{flex-shrink:0}
.command-trigger kbd{margin-left:3px}
@media(max-width:920px){.preferences-layout{grid-template-columns:165px minmax(0,1fr)}.preferences-content{padding:17px}.preference-field,.preference-field.range-field{grid-template-columns:minmax(0,1fr) minmax(130px,190px);gap:12px}}
@media(max-width:620px){.preferences-backdrop,.command-backdrop{padding:8px}.preferences-dialog{max-height:calc(100vh - 16px);border-radius:13px}.preferences-header{padding:16px}.preferences-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.preferences-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;border-right:0;border-bottom:1px solid #e2ded6;padding:8px}.preferences-nav-item{padding:8px;font-size:calc(10px * var(--nl-font-scale, 1))}.preferences-content{padding:14px}.preference-field,.preference-field.range-field{grid-template-columns:1fr;gap:8px}.preferences-footer{flex-wrap:wrap;padding:10px}.preferences-footer>span{order:3;flex-basis:100%;margin:0}.command-card{max-height:calc(100vh - 16px)}.header-center{display:none}}


/* Additional contrast tuning for the Studio settings surfaces. */
:root[data-studio-theme="dark"] .preferences-header .icon-button{background:#282722;border-color:#45433c;color:#f0eee9}
:root[data-studio-theme="dark"] .accessibility-note{background:#22271f;border-color:#3f5a3b;color:#c4dfbc}
:root[data-studio-theme="dark"] .accessibility-note p{color:#a9c39f}
:root[data-studio-theme="dark"] .shortcut-row{color:#e3dfd6}
:root[data-studio-theme="dark"] .shortcut-row kbd{background:#292824;color:#e3dfd6;border-color:#4a473f}
:root[data-studio-theme="dark"] .preference-field input[type="color"]{background:#292824;border-color:#49463e}


/* v1.5: freeform builder controls, direct manipulation, clear dark-mode contrast. */
.canvas-label-actions{display:flex;align-items:center;gap:14px;min-width:0}.canvas-height-control{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--nl-muted,#777)}.canvas-height-control select{max-width:112px;border:1px solid var(--line,#ddd);background:var(--panel,#fff);color:var(--ink,#171717);border-radius:8px;padding:5px 7px;font:inherit}
.freeform-help{margin:0 0 10px}.canvas-element-library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.canvas-element-btn{display:flex;align-items:center;gap:8px;min-width:0;padding:9px 8px;border-radius:10px;border:1px solid var(--line,#e5e4e0);background:var(--panel,#fff);color:var(--ink,#171717);text-align:left;transition:background .16s,border-color .16s,transform .16s}.canvas-element-btn:hover{border-color:var(--orange,#ff7547);background:color-mix(in srgb,var(--orange,#ff7547) 8%,var(--panel,#fff));transform:translateY(-1px)}.canvas-element-btn>span{width:25px;height:25px;display:grid;place-items:center;flex:0 0 auto;border-radius:7px;background:color-mix(in srgb,var(--orange,#ff7547) 13%,var(--panel,#fff));color:var(--orange,#ff7547);font-weight:900}.canvas-element-btn b{font-size:10px;overflow:hidden;text-overflow:ellipsis}.freeform-layer-list{display:grid;gap:5px}.canvas-layer-item{display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:8px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--ink,#171717);text-align:left}.canvas-layer-item:hover{background:var(--panel,#fff);border-color:var(--line,#ddd)}.canvas-layer-item.active{background:color-mix(in srgb,var(--orange,#ff7547) 12%,var(--panel,#fff));border-color:color-mix(in srgb,var(--orange,#ff7547) 52%,var(--line,#ddd))}.canvas-layer-item .layer-icon{flex-shrink:0}.canvas-layer-item .item-meta{min-width:0}.canvas-layer-item .item-meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.canvas-layer-item .item-meta small{display:block;margin-top:2px;font-size:9px;color:var(--muted,#777)}.switch-line{display:flex;gap:9px;align-items:center;margin:8px 0 13px;color:var(--ink,#171717);font-size:11px}.switch-line input{accent-color:var(--orange,#ff7547)}#element-inspector .selected-thing{margin-bottom:14px}#element-inspector input[type=number]{width:100%}#element-inspector .action-row,#element-inspector .move-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}#element-inspector .action-row>* ,#element-inspector .move-row>*{flex:1;min-width:100px}.canvas-stage{min-width:0}.canvas-frame-wrap{overflow:hidden}.editor-canvas-area{min-width:0}.panel-left .panel-scroll{padding-bottom:36px}.canvas-element-btn:focus-visible,.canvas-layer-item:focus-visible{outline:3px solid var(--orange,#ff7547);outline-offset:2px}
:root[data-studio-theme="dark"] .canvas-height-control{color:#c3beb4}:root[data-studio-theme="dark"] .canvas-height-control select{background:#252420;color:#f5f2eb;border-color:#555147}
:root[data-studio-theme="dark"] .canvas-element-btn,:root[data-studio-theme="dark"] .canvas-layer-item{background:#242320;color:#f2efe8;border-color:#45433c}
:root[data-studio-theme="dark"] .canvas-element-btn:hover,:root[data-studio-theme="dark"] .canvas-layer-item:hover{background:#302e28;border-color:#8d644e}
:root[data-studio-theme="dark"] .canvas-layer-item.active{background:#3b2a21;border-color:#9f6849;color:#fff3eb}
:root[data-studio-theme="dark"] .canvas-element-btn>span{background:#3b2a21;color:#ffb192}
:root[data-studio-theme="dark"] .canvas-layer-item .item-meta small,:root[data-studio-theme="dark"] .freeform-help,:root[data-studio-theme="dark"] #element-inspector .micro-copy{color:#c2bdb3}
:root[data-studio-theme="dark"] #element-inspector .selected-thing{background:#292722;border-color:#4d493f;color:#f5f2eb}
:root[data-studio-theme="dark"] #element-inspector input:not([type=color]),:root[data-studio-theme="dark"] #element-inspector textarea,:root[data-studio-theme="dark"] #element-inspector select{background:#252420;color:#f7f4ed;border-color:#555146}
:root[data-studio-theme="dark"] #element-inspector input[type=color]{background:#252420;border-color:#555146}
:root[data-studio-theme="dark"] .canvas-stage{color:#f0eee8}
:root[data-studio-theme="dark"] .editor-panel button:not(.btn-accent):not(.btn-dark):not(.btn-danger),:root[data-studio-theme="dark"] .tool-button{color:#ece9e2}
:root[data-studio-theme="dark"] .editor-panel .inspector-empty p,:root[data-studio-theme="dark"] .editor-panel .micro-copy,:root[data-studio-theme="dark"] .editor-panel .field small{color:#bcb7ac}
@media(max-width:760px){.canvas-label-actions{gap:7px}.canvas-height-control{font-size:9px}.canvas-height-control select{max-width:90px}.canvas-element-library{grid-template-columns:repeat(2,minmax(0,1fr))}.canvas-stage{overflow:auto}.canvas-frame-wrap{min-width:320px}}


/* v1.6: consistency fixes for freeform interactions and dark-mode readability. */
.canvas-element-btn[draggable="true"]{cursor:grab;user-select:none;-webkit-user-drag:element}
.canvas-element-btn.is-dragging{opacity:.52;transform:scale(.98)}
.canvas-element-btn:active{cursor:grabbing}
.canvas-layer-item .item-meta small{font-variant-numeric:tabular-nums}
#element-inspector button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.nl-freeform-item{touch-action:none;-webkit-user-select:none;user-select:none}
@media (prefers-reduced-motion: reduce){.canvas-element-btn{transition:none!important}}
:root[data-studio-theme="dark"] .preferences-section-title p,
:root[data-studio-theme="dark"] .preferences-header p,
:root[data-studio-theme="dark"] .preference-field small,
:root[data-studio-theme="dark"] .preferences-footer>span,
:root[data-studio-theme="dark"] .preference-field output,
:root[data-studio-theme="dark"] .command-label{color:#c9c1b4}
:root[data-studio-theme="dark"] .preferences-nav-item:hover{background:#292824;color:#f2efe9}
:root[data-studio-theme="dark"] .preference-field label{color:#f0eee9}
:root[data-studio-theme="dark"] .preference-field input[type="range"]{accent-color:#ff9a77}
:root[data-studio-theme="dark"] .switch-control span{background:#4d4a42;border:1px solid #777064}
:root[data-studio-theme="dark"] .switch-control input:checked+span{background:#ff8c65;border-color:#ffb294}
:root[data-studio-theme="dark"] .switch-control input:focus-visible+span{outline-color:#ffb294}
:root[data-studio-theme="dark"] .canvas-element-btn:focus-visible,
:root[data-studio-theme="dark"] .canvas-layer-item:focus-visible,
:root[data-studio-theme="dark"] .editor-panel input:focus-visible,
:root[data-studio-theme="dark"] .editor-panel select:focus-visible,
:root[data-studio-theme="dark"] .editor-panel textarea:focus-visible{outline-color:#ffab8a}

/* Primary Studio controls use dark text on orange for readable contrast. */
.studio-app .btn-accent{color:#171715}
.studio-app .btn-accent:hover{color:#171715}


/* v1.7.1 — consistent section actions, visible locate controls, and reliable drag targets. */
.panel-subhead{min-height:30px;gap:10px;align-items:center}
.panel-subhead>span:first-child{min-width:0;line-height:1.35}
.panel-subhead .mini-add{appearance:none;-webkit-appearance:none;display:grid;place-items:center;box-sizing:border-box;flex:0 0 30px;width:30px;min-width:30px;height:30px;margin:0;padding:0;border:1px solid var(--line,#e2ded6);border-radius:9px;background:var(--panel,#fffdfa);color:var(--ink,#57534b);font-family:inherit;font-size:18px;font-weight:600;line-height:1;box-shadow:none;outline:none;transition:background .15s,border-color .15s,color .15s}
.panel-subhead .mini-add:hover{background:color-mix(in srgb,var(--orange,#ff7547) 9%,var(--panel,#fffdfa));border-color:color-mix(in srgb,var(--orange,#ff7547) 42%,var(--line,#e2ded6));color:var(--ink,#171715)}
.panel-subhead .mini-add:focus{outline:none}
.panel-subhead .mini-add:focus-visible{outline:2px solid var(--orange,#ff7547);outline-offset:1px;box-shadow:none}
.editor-sections-list{display:grid;gap:7px;min-width:0}
.editor-section-row{display:flex;align-items:center;gap:5px;min-width:0;width:100%}
.editor-section-row .editor-section-item{width:auto;flex:1 1 auto;min-width:0;min-height:47px;cursor:grab;box-sizing:border-box}
.editor-section-row .editor-section-item:active{cursor:grabbing}
.editor-section-row .item-meta{flex:1;min-width:0}
.section-row-grip{opacity:.38;color:currentColor;font-size:14px;line-height:1;margin-left:2px;flex:0 0 auto}
.editor-section-item:hover .section-row-grip{opacity:.9}
.section-row-actions{display:flex;align-items:center;justify-content:center;gap:3px;flex:0 0 auto}
.section-locate-btn,.section-freeform-btn{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:grid;place-items:center;position:relative;flex:0 0 29px;width:29px;min-width:29px;height:30px;margin:0;padding:0;border:1px solid var(--line,#e2ded6);border-radius:8px;background:var(--panel,#fffdfa);color:var(--muted,#777770);font-family:inherit;font-size:15px;font-weight:750;line-height:1;box-shadow:none;outline:none;transition:background .15s,border-color .15s,color .15s}
.section-locate-btn:hover,.section-freeform-btn:hover{background:color-mix(in srgb,var(--orange,#ff7547) 10%,var(--panel,#fffdfa));border-color:color-mix(in srgb,var(--orange,#ff7547) 42%,var(--line,#e2ded6));color:var(--ink,#171715)}
.section-freeform-btn{font-size:16px;color:var(--orange-dark,#b85431)}
.section-freeform-btn.is-freeform{background:color-mix(in srgb,var(--orange,#ff7547) 9%,var(--panel,#fffdfa));color:var(--orange-dark,#b85431)}
.section-locate-btn:focus,.section-freeform-btn:focus{outline:none}
.section-locate-btn:focus-visible,.section-freeform-btn:focus-visible{outline:2px solid var(--orange,#ff7547);outline-offset:1px;box-shadow:none}
.section-locate-btn::after,.section-freeform-btn::after{content:attr(title);position:absolute;right:calc(100% + 7px);top:50%;transform:translateY(-50%);z-index:100;font-size:9px;font-weight:700;letter-spacing:0;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;padding:5px 7px;border:1px solid var(--line,#dedbd4);border-radius:6px;background:var(--panel,#fffdfa);color:var(--ink,#171717);opacity:0;pointer-events:none;box-shadow:0 3px 10px #00000012;transition:opacity .12s}
.section-locate-btn:hover::after,.section-locate-btn:focus-visible::after,.section-freeform-btn:hover::after,.section-freeform-btn:focus-visible::after{opacity:1}
.editor-section-row .editor-section-item.drop-target{border-color:var(--orange,#ff7547);background:color-mix(in srgb,var(--orange,#ff7547) 10%,var(--panel,#fffdfa));box-shadow:inset 0 2px var(--orange,#ff7547)}
.editor-section-item[draggable="true"],.section-library-btn[draggable="true"],.canvas-element-btn[draggable="true"]{cursor:grab;user-select:none;-webkit-user-drag:element}
.editor-section-item[draggable="true"]:active,.section-library-btn[draggable="true"]:active,.canvas-element-btn[draggable="true"]:active{cursor:grabbing}
.section-library-btn.is-dragging,.canvas-element-btn.is-dragging{opacity:.5;transform:scale(.98)}
.canvas-empty{box-sizing:border-box;display:flex;flex:1 1 auto;align-items:center;justify-content:center;width:100%;min-width:0;min-height:680px;max-width:none;margin:0;padding:28px;border:1px dashed transparent;border-radius:16px;text-align:center;transition:background .15s,border-color .15s,box-shadow .15s}
.canvas-empty-content{width:min(100%,380px);margin:auto}
.canvas-empty.drag-over{border-color:var(--orange,#ff7547);background:color-mix(in srgb,var(--orange,#ff7547) 8%,var(--panel,#fffdfa));box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--orange,#ff7547) 8%,transparent)}
.canvas-empty>div>span{font-size:calc(32px * var(--nl-font-scale,1));color:var(--orange,#ff7547)}
.canvas-empty h3{font-size:calc(19px * var(--nl-font-scale,1));letter-spacing:-.06em;margin:12px 0 6px}
.canvas-empty p{font-size:calc(11px * var(--nl-font-scale,1));color:var(--muted,#77736b);line-height:1.8;margin-bottom:18px}
:root[data-studio-theme="dark"] .panel-subhead .mini-add{background:#292824;border-color:#48463f;color:#f5f1e9}
:root[data-studio-theme="dark"] .panel-subhead .mini-add:hover,:root[data-studio-theme="dark"] .section-locate-btn:hover,:root[data-studio-theme="dark"] .section-freeform-btn:hover{background:#3a2b23;border-color:#a06445;color:#ffd0bc}
:root[data-studio-theme="dark"] .panel-subhead .mini-add:focus-visible,:root[data-studio-theme="dark"] .section-locate-btn:focus-visible,:root[data-studio-theme="dark"] .section-freeform-btn:focus-visible{outline-color:#ffad8e}
:root[data-studio-theme="dark"] .section-locate-btn,:root[data-studio-theme="dark"] .section-freeform-btn{background:#242320;border-color:#403e38;color:#d3cdc1}
:root[data-studio-theme="dark"] .section-freeform-btn.is-freeform{background:#39271f;border-color:#77482f;color:#ffd0bc}
:root[data-studio-theme="dark"] .section-locate-btn::after,:root[data-studio-theme="dark"] .section-freeform-btn::after{background:#252420;color:#f3efe8;border-color:#555146}
:root[data-studio-theme="dark"] .editor-section-row .editor-section-item.active~.section-row-actions .section-locate-btn{background:#39271f;color:#ffd0bc;border-color:#77482f}
:root[data-studio-theme="dark"] .canvas-empty.drag-over{background:#30251f;border-color:#ff9c79}
:root[data-ui-density="compact"] .editor-section-row .editor-section-item{padding:6px 7px;min-height:42px}
:root[data-ui-density="spacious"] .editor-section-row .editor-section-item{padding:12px 11px;min-height:54px}
@media(max-width:760px){.section-locate-btn,.section-freeform-btn{flex-basis:30px;width:30px;min-width:30px}.panel-subhead .mini-add{width:30px;height:30px;flex-basis:30px}.editor-section-row{gap:4px}.section-row-actions{gap:2px}}
@media(prefers-reduced-motion:reduce){.section-locate-btn::after,.section-freeform-btn::after,.canvas-empty{transition:none}}


/* v1.8 — true insert toolbar, clear destructive actions, and stable preference scaling. */
.editor-toolbar{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:thin}
.editor-layout{min-width:0;width:100%;max-width:100%}
.editor-canvas-area{overflow:hidden}
.insert-toolbar{display:flex;align-items:center;gap:5px;min-width:0;max-width:100%;padding:8px 12px;background:var(--surface,#fffefa);border-top:1px solid var(--line,#e2dfd8);border-bottom:1px solid var(--line,#e2dfd8);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;flex:0 0 auto}
.insert-toolbar-label{font-size:9px;font-weight:850;letter-spacing:.15em;color:var(--muted,#777770);padding:0 5px 0 1px;flex:0 0 auto}.canvas-tool-status{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border:1px solid var(--line,#e2dfd8);border-radius:8px;color:var(--muted,#777770);font-size:10px;font-weight:700;white-space:nowrap;flex:0 0 auto}.canvas-tool-status[data-tool-ready="true"]{border-color:color-mix(in srgb,var(--orange,#ff7547) 55%,var(--line,#e2dfd8));color:var(--text,#23221f)}
.insert-tool{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-height:34px;padding:5px 9px;border:1px solid var(--line,#e2dfd8);border-radius:9px;background:var(--surface,#fffefa);color:var(--ink,#25241f);font-size:10px;font-weight:750;line-height:1.1;white-space:nowrap;box-shadow:none;transition:background .13s,border-color .13s,color .13s,transform .13s}
.insert-tool>span{display:grid;place-items:center;min-width:18px;height:18px;border-radius:5px;background:color-mix(in srgb,var(--orange,#ff7547) 11%,var(--surface,#fffefa));color:var(--orange-dark,#bd4e2b);font-size:12px;font-weight:900;line-height:1}
.insert-tool> b{font-weight:750}
.insert-tool:hover{border-color:color-mix(in srgb,var(--orange,#ff7547) 48%,var(--line,#e2dfd8));background:color-mix(in srgb,var(--orange,#ff7547) 6%,var(--surface,#fffefa))}
.insert-tool.active,.insert-tool.is-pending{border-color:var(--orange,#ff7547);background:color-mix(in srgb,var(--orange,#ff7547) 13%,var(--surface,#fffefa));color:var(--ink,#171715);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange,#ff7547) 18%,transparent)}
.insert-tool.active>span,.insert-tool.is-pending>span{background:var(--orange,#ff7547);color:#191715}
.insert-tool-divider{width:1px;height:22px;background:var(--line,#e2dfd8);flex:0 0 auto;margin:0 3px}
.insert-tool.danger-tool{margin-left:auto;color:#b6402a;border-color:color-mix(in srgb,#c6472d 30%,var(--line,#e2dfd8))}
.insert-tool.danger-tool>span{background:color-mix(in srgb,#c6472d 11%,var(--surface,#fffefa));color:#b6402a;font-size:18px}
.insert-tool.danger-tool:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.insert-tool:focus-visible{outline:2px solid var(--orange,#ff7547);outline-offset:2px}
.insert-tool[draggable="true"]{cursor:grab;user-select:none;-webkit-user-drag:element}
.insert-tool.is-dragging{opacity:.48;transform:scale(.97)}
.canvas-stage{min-width:0;width:100%;max-width:100%;flex:1 1 auto}
.canvas-frame-wrap{flex:0 0 auto;min-width:0}
.canvas-frame-wrap.desktop{width:100%;max-width:100%}
.editor-section-row .section-row-actions{gap:3px}
.section-delete-btn{appearance:none;-webkit-appearance:none;display:grid;place-items:center;flex:0 0 27px;width:27px;min-width:27px;height:30px;padding:0;border:1px solid var(--line,#e2dfd8);border-radius:8px;background:var(--surface,#fffefa);color:var(--muted,#777770);font-size:17px;line-height:1;box-shadow:none}
.section-delete-btn:hover,.canvas-layer-delete:hover{background:color-mix(in srgb,#c8472d 10%,var(--surface,#fffefa));border-color:color-mix(in srgb,#c8472d 44%,var(--line,#e2dfd8));color:#c13e25}
.canvas-layer-row{display:flex;align-items:center;gap:4px;min-width:0}
.canvas-layer-row .canvas-layer-item{flex:1;min-width:0}
.canvas-layer-delete{display:grid;place-items:center;flex:0 0 28px;width:28px;height:30px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted,#777770);font-size:17px;line-height:1}
.canvas-layer-delete:focus-visible,.section-delete-btn:focus-visible{outline:2px solid var(--orange,#ff7547);outline-offset:1px}
:root[data-studio-theme="dark"] .insert-toolbar{background:#1b1b19;border-color:#393832}
:root[data-studio-theme="dark"] .insert-toolbar-label{color:#c2bbae}:root[data-studio-theme="dark"] .canvas-tool-status{background:#24231f;border-color:#514b40;color:#d8d4ca}:root[data-studio-theme="dark"] .canvas-tool-status[data-tool-ready="true"]{color:#fff0e7;border-color:#a74d2c}
:root[data-studio-theme="dark"] .insert-tool{background:#242320;border-color:#48463f;color:#f3f0e9}
:root[data-studio-theme="dark"] .insert-tool>span{background:#39352f;color:#ffb294}
:root[data-studio-theme="dark"] .insert-tool:hover{background:#302b25;border-color:#93654d;color:#fff7f0}
:root[data-studio-theme="dark"] .insert-tool.active,:root[data-studio-theme="dark"] .insert-tool.is-pending{background:#3a2b23;border-color:#e7825d;color:#fff3eb}
:root[data-studio-theme="dark"] .insert-tool.active>span,:root[data-studio-theme="dark"] .insert-tool.is-pending>span{background:#ff9c79;color:#181614}
:root[data-studio-theme="dark"] .insert-tool.danger-tool{color:#ffb6a4;border-color:#71463c}
:root[data-studio-theme="dark"] .insert-tool.danger-tool>span{background:#472821;color:#ffb6a4}
:root[data-studio-theme="dark"] .section-delete-btn,:root[data-studio-theme="dark"] .canvas-layer-delete{background:#242320;border-color:#45423c;color:#e2ddd4}
:root[data-studio-theme="dark"] .section-delete-btn:hover,:root[data-studio-theme="dark"] .canvas-layer-delete:hover{background:#482922;border-color:#a65b49;color:#ffe3dc}
:root[data-ui-density="compact"] .insert-toolbar{padding-block:5px;gap:3px}
:root[data-ui-density="spacious"] .insert-toolbar{padding-block:11px;gap:7px}
@media(max-width:900px){.insert-toolbar{position:sticky;top:0;z-index:9}.insert-toolbar .insert-tool{min-height:36px}}
@media(max-width:650px){.insert-toolbar{padding-inline:8px;gap:4px}.insert-toolbar-label{display:none}.insert-tool{padding:5px 7px}.insert-tool> b{font-size:9px}.insert-tool-divider{margin:0 1px}.insert-tool.danger-tool{margin-left:0}.canvas-bottom{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.insert-tool{transition:none!important}}

/* v1.8: preference scaling adjusts panel geometry and rhythm, never browser zoom. */
.editor-toolbar{gap:var(--nl-ui-gap,9px);padding-inline:var(--nl-ui-padding,15px)}
.panel-scroll{padding:var(--nl-ui-padding,16px)}
@media(max-width:900px){.editor-layout{grid-template-columns:var(--nl-left-panel-width,220px) minmax(0,1fr)}}
@media(max-width:650px){.panel-left .panel-scroll{padding:var(--nl-ui-padding,13px);max-height:300px}}