:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#292924;background:#eeedea;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}.studio{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr);gap:10px;padding:10px}.sidebar{background:#f8f7f5;border-radius:15px;display:flex;flex-direction:column;padding:30px 20px;min-height:calc(100vh - 20px);position:sticky;top:10px;height:calc(100vh - 20px)}.brand{font-size:25px;font-weight:700;letter-spacing:-1.5px;padding:0 12px 42px}.brand span{font-size:10px;font-weight:600;letter-spacing:2px;margin-left:3px}.nav-link{display:flex;align-items:center;gap:13px;text-decoration:none;color:#4b4a46;padding:14px 13px;border-radius:8px;font-size:14px}.nav-link.active,.nav-link:hover{background:#eae7e2;color:#222}.nav-icon{width:18px;text-align:center}.side-bottom{margin-top:auto}.side-note{font-size:11px;color:#8a8781;padding:10px}.account{width:100%;display:flex;justify-content:space-between;padding:15px 12px;border:1px solid #e4e1dc;border-radius:9px;background:#fff;font-size:12px}.main{background:#fff;border-radius:15px;min-width:0}.topbar{height:77px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(22px,4vw,70px);border-bottom:1px solid #f0eeea}.crumbs{display:flex;gap:14px;align-items:center;font-size:12px;color:#8b8883}.crumbs strong{color:#35342f;font-weight:600}.lang-control{display:flex;align-items:center;gap:9px;font-size:12px;color:#777}.lang-control select,.selector-row select{background:#fff;border:1px solid #e5e2dd;border-radius:8px;padding:9px 12px;color:#333}.content{max-width:1300px;margin:0 auto;padding:38px clamp(22px,4vw,70px) 50px}.heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2px;color:#9a9185;font-weight:700}.heading h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,3vw,43px);letter-spacing:-1.2px;margin:10px 0}.heading p{font-size:13px;color:#89857f;margin:0}.preview-label,.mode-badge{font-size:11px;background:#f3f0eb;color:#777066;border-radius:100px;padding:8px 12px;white-space:nowrap}.share{border:1px solid #e9e6e1;border-radius:12px;padding:18px 20px}.share label,.selector-row label,.settings-card label{font-size:12px;font-weight:600}.share-row{display:flex;gap:9px;margin-top:10px}.share input{flex:1;min-width:0;background:#fafaf9;border:1px solid #e8e5df;border-radius:7px;padding:12px;font-size:12px;color:#98928a}.share button{border:0;background:#c9c1b7;color:#fff;border-radius:7px;padding:0 22px;font-size:12px}.share button:disabled{cursor:not-allowed}.selector-row{display:flex;align-items:center;gap:12px;margin:24px 0 17px}.mode-badge{margin-left:auto}.workspace{display:grid;gap:24px;align-items:start}.widget-workspace{grid-template-columns:minmax(0,1fr) minmax(280px,.8fr)}.page-workspace{grid-template-columns:minmax(0,1fr)}.section-label{font-size:12px;font-weight:700;margin-bottom:12px}.preview{background:#f5f3f0;border:1px solid #eae7e2;border-radius:12px;display:flex;align-items:center;justify-content:center;min-width:0}.widget-preview{min-height:440px}.demo-widget{text-align:center;padding:28px;color:#5b554e}.demo-mark{font-size:90px;font-family:Georgia,serif;line-height:1.4}.demo-widget small{display:block;color:#a09a93;font-size:11px;margin-top:14px}.settings-column{min-width:0}.settings-card{border:1px solid #eae7e2;border-radius:12px;padding:21px;margin-bottom:12px}.settings-card input{display:block;width:100%;margin-top:10px;padding:12px;border:1px solid #e5e2dd;border-radius:7px}.settings-card p{color:#a09a93;font-size:11px;line-height:1.6}.sample-color{display:flex;justify-content:space-between;align-items:center;font-size:12px}.swatches{display:flex;gap:6px}.swatches i{height:24px;width:24px;border-radius:50%;background:#6b746a}.swatches i:nth-child(2){background:#b8a18e}.swatches i:nth-child(3){background:#e6ddd1}.page-preview{min-height:650px;padding:35px 20px}.page-mock{background:#fff;box-shadow:0 8px 40px #4b3b2a12;width:min(100%,450px);min-height:550px;padding:65px 30px;text-align:center}.page-mock h2{font:normal 36px Georgia,serif}.page-mock p{font-size:13px;color:#8b8278}.page-mock .line{height:1px;background:#ddd5cc;margin:45px 0}.footer{margin-top:70px;padding-top:30px;border-top:1px solid #eeece8}.footer-top{display:flex;justify-content:space-between;gap:20px;align-items:start}.footer-top strong{font-size:15px}.footer-top p,.footer-top span{font-size:12px;color:#8d8983}.footer-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}.footer-cards article{border:1px solid #e8e5e0;border-radius:12px;padding:25px;min-height:155px}.card-kicker{font-size:10px;letter-spacing:1.3px;color:#9c9286;margin-bottom:16px}.footer-cards strong{font:normal 22px Georgia,serif}.footer-cards p{font-size:12px;color:#8d8983}.menu-toggle{display:none;background:none;border:0;font-size:22px}.backdrop{display:none}@media(max-width:1050px){.studio{grid-template-columns:minmax(0,1fr)}.sidebar{position:fixed;z-index:20;left:0;top:0;bottom:0;height:100vh;min-height:0;width:270px;border-radius:0;transform:translateX(-100%);transition:transform .2s;box-shadow:5px 0 30px #0001}.sidebar.open{transform:translateX(0)}.menu-toggle{display:block}.backdrop:not([hidden]){display:block;position:fixed;inset:0;background:#0005;z-index:10}.main{min-height:calc(100vh - 20px)}}@media(max-width:740px){.studio{padding:0}.main{border-radius:0}.topbar{height:65px;padding:0 18px}.crumbs{gap:7px;font-size:11px}.crumbs span:nth-child(1),.crumbs span:nth-child(2){display:none}.lang-control label{display:none}.content{padding:25px 18px}.heading{align-items:start;flex-direction:column}.widget-workspace{grid-template-columns:minmax(0,1fr)}.widget-preview{min-height:330px}.page-preview{min-height:500px}.footer-cards{grid-template-columns:1fr}.footer-top{flex-direction:column}.share-row button{padding:0 12px}.mode-badge{font-size:10px}}

/* App-style shell: the chrome stays in place; only panel interiors scroll. */
html,body{height:100%;overflow:hidden}
.studio{height:100dvh;min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr)}
.sidebar{position:relative;top:auto;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.main{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.topbar{flex:0 0 77px;position:relative;z-index:1;background:#fff}
.content{width:100%;max-width:1300px;min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
@media(max-width:1050px){
 .studio{grid-template-columns:minmax(0,1fr)}
 .sidebar{position:fixed;top:0;bottom:0;left:0;width:270px;height:100dvh;min-height:0;overflow-y:auto}
 .main{min-height:0;height:100%}
}
@media(max-width:740px){
 .studio{height:100dvh}
 .topbar{flex-basis:65px}
 .content{min-height:0}
}

/* Tablet workspace: protect the preview's usable size by stacking settings below. */
@media (min-width:741px) and (max-width:1180px){
 .widget-workspace{grid-template-columns:minmax(0,1fr)}
 .widget-preview{width:100%;min-width:0;min-height:440px}
 .settings-column{width:100%;min-width:0}
}

/* Subtle shared scrollbars: preserve scroll affordance without visual weight. */
.sidebar,.content{
 scrollbar-width:thin;
 scrollbar-color:#d5d0ca transparent;
}
.sidebar::-webkit-scrollbar,.content::-webkit-scrollbar{width:5px;height:5px}
.sidebar::-webkit-scrollbar-track,.content::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb,.content::-webkit-scrollbar-thumb{
 background-color:#d5d0ca;
 border-radius:999px;
}
.sidebar::-webkit-scrollbar-thumb:hover,.content::-webkit-scrollbar-thumb:hover{
 background-color:#b8b1a9;
}

/* Simplified widget panels and brand-colored link action. */
.workspace .section-label{display:none}
#copy-link{background:#5a4038;color:#fff}
#copy-link:disabled{background:#5a4038;opacity:.42;cursor:not-allowed}

/* Lighter preview surface and balanced contextual heading. */
.preview{background:#fafaf9}
.content{padding-top:22px}
.heading{align-items:center;margin-bottom:25px}
.heading h1{margin:0 0 9px}
.heading p{margin:0;font-size:13px;line-height:1.5;color:#89857f}

/* Desktop: give settings adequate room without shrinking the widget excessively. */
@media (min-width:1181px){
 .widget-workspace{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:22px}
}

/* Navigation: slim, separated hover and active surfaces. */
#main-nav{display:flex;flex-direction:column;gap:7px}
#main-nav .nav-link{padding:11px 13px;border-radius:10px;min-height:42px}
#main-nav .nav-link.active,#main-nav .nav-link:hover{background:#eae7e2}
#main-nav .nav-link:focus-visible{outline:2px solid #5a4038;outline-offset:2px}

/* Native select keeps its value but should not keep a mouse-click focus ring. */
.selector-row select:focus:not(:focus-visible),
.lang-control select:focus:not(:focus-visible){outline:none;box-shadow:none}
.selector-row select:focus-visible,
.lang-control select:focus-visible{outline:2px solid #5a4038;outline-offset:2px}

/* Editor-first desktop composition: prioritize the actual work area. */
@media (min-width:1181px){
 .content{padding-top:17px}
 .heading{margin-bottom:14px;align-items:center}
 .heading h1{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:clamp(23px,2vw,29px);letter-spacing:-.65px;margin:0 0 4px}
 .heading p{font-size:12px}
 .share{padding:11px 15px}
 .share-row{margin-top:6px}
 .share input{padding:9px 12px}
 .share button{min-height:38px}
 .workspace{gap:20px}
}
/* Project type is immutable: no editor-level tool switcher in the final flow. */
.selector-row{display:none}
@media (max-width:1180px){
 .heading{margin-bottom:16px}
 .share{padding:12px 14px}
 .share-row{margin-top:7px}
}

/* Distinct breathing room between link controls and the editing workspace. */
.share{margin-bottom:28px}
@media(max-width:740px){.share{margin-bottom:22px}}

/* Sharing controls: balanced interior breathing room and comfortable targets. */
.share{padding-bottom:19px}
.share input{min-height:46px;padding:12px 14px}
.share button{min-height:46px;padding-inline:23px}
@media(min-width:1181px){.share{padding-bottom:19px}.share input{min-height:46px;padding:12px 14px}.share button{min-height:46px}}
@media(max-width:740px){.share{padding-bottom:17px}.share input,.share button{min-height:44px}}

/* Link panel reference: quiet label, airy card, no separate link-type selector. */
.share label{font-weight:400;color:#858585;font-size:13px}
.share{padding:17px 19px 20px}
.share-row{margin-top:10px;gap:10px}
.share input{background:#fafaf9;color:#777;border-color:#dedbd7;min-height:48px;font-size:13px}
.share button{min-height:48px;border-radius:9px}
@media(min-width:1181px){.share{padding:17px 19px 20px}.share-row{margin-top:10px}.share input{min-height:48px;padding:12px 14px}.share button{min-height:48px}}
@media(max-width:740px){.share{padding:15px 14px 18px}.share input,.share button{min-height:46px}}

/* Refine embed controls: between the original 46px and the heavier 48px version. */
.share input,.share button{min-height:45px}
@media(min-width:1181px){.share input,.share button{min-height:45px}}
@media(max-width:740px){.share input,.share button{min-height:44px}}

/* Compact top inset and understated embed heading; preserve bottom padding. */
.share{padding-top:11px}
.share label{font-family:Montserrat,Arial,sans-serif;font-size:11px;font-weight:400}
@media(min-width:1181px){.share{padding-top:11px}}
@media(max-width:740px){.share{padding-top:10px}}

/* Bring the embed caption slightly closer to its link field. */
.share-row{margin-top:7px}
@media(min-width:1181px){.share-row{margin-top:7px}}

/* Slightly slimmer embed link field and copy action across breakpoints. */
.share input,.share button{min-height:42px}
@media(min-width:1181px){.share input,.share button{min-height:42px}}
@media(max-width:740px){.share input,.share button{min-height:42px}}

/* Scrollbar thumb stays invisible at rest; scrolling reveals it briefly. */
.sidebar,.content{scrollbar-color:transparent transparent}
.sidebar.is-scrolling,.content.is-scrolling{scrollbar-color:#d5d0ca transparent}
.sidebar::-webkit-scrollbar-thumb,.content::-webkit-scrollbar-thumb{background-color:transparent}
.sidebar.is-scrolling::-webkit-scrollbar-thumb,.content.is-scrolling::-webkit-scrollbar-thumb{background-color:#d5d0ca}
.sidebar:not(.is-scrolling)::-webkit-scrollbar-thumb:hover,.content:not(.is-scrolling)::-webkit-scrollbar-thumb:hover{background-color:transparent}

/* Preserve the former heading footprint after removing the subtitle.
   Center the title within that space so the embed bar and editor stay at their prior vertical positions. */
.heading{min-height:68px;align-items:center}
.heading h1{margin:0}
@media(min-width:1181px){.heading{min-height:53px;align-items:center}.heading h1{margin:0}}