:root{color-scheme:dark;--bg:#0b1523;--aside:#0f1b2c;--panel:#142237;--line:#31455e;--text:#ebf5ff;--muted:#94a8bd;--mint:#6be9c8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.6 system-ui,-apple-system,"Segoe UI",Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}.gg-demo-strip{font-size:10px;text-align:center;letter-spacing:.08em;color:#bcf8e6;background:#183c34;padding:8px;font-weight:950;border-bottom:1px solid #2a6658}.studio{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100dvh - 32px)}.studio-side{background:var(--aside);border-right:1px solid #29405a;position:sticky;top:0;height:calc(100dvh - 32px);padding:22px 13px 18px;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;z-index:60}.studio-logo{display:flex;align-items:center;gap:12px;padding:6px 10px 22px;border-bottom:1px solid #283f56}.studio-logo>span{width:42px;height:42px;display:grid;place-items:center;font-size:23px;letter-spacing:-.12em;padding-right:4px;color:var(--mint);background:linear-gradient(135deg,#2a5662,#243854);border:1px solid #548b8a;border-radius:12px;font-weight:1000}.studio-logo b{font-size:13px;letter-spacing:-.03em}.studio-logo b>span{color:var(--mint)}.studio-logo small{display:block;font-size:9px;letter-spacing:.13em;color:#8bacc9}.workspace-pill{display:flex;align-items:center;gap:8px;color:#b7f2da;font-size:10px;font-weight:950;background:#183d37;border:1px solid #3a7264;border-radius:9px;padding:11px;margin:18px 4px}.workspace-pill span{color:var(--mint);font-size:15px}.side-group-label{font-size:10px;color:#859cb8;letter-spacing:.11em;font-weight:950;padding:10px 13px}.studio-side nav{display:grid;gap:3px}.studio-side nav button{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:11px 12px;border-radius:9px;background:transparent;color:#b9c8de;border:1px solid transparent;font-weight:780;font-size:11px}.studio-side nav button span{font-size:17px;color:#90b0c7;display:grid;place-items:center;width:20px}.studio-side nav button.active,.studio-side nav button:hover{background:#1e3a46;color:#edfff8;border-color:#396d6c}.studio-side nav button.active span{color:var(--mint)}.side-bottom{margin-top:auto;border-top:1px solid #2b4058;padding:18px 11px 0}.side-bottom strong,.side-bottom b{font-size:12px}.side-bottom p{font-size:10px;color:#95adc2}.side-bottom a{font-weight:900;color:#86e7cf;font-size:11px}
.studio-main{min-width:0;display:flex;flex-direction:column}.studio-header{min-height:68px;display:flex;justify-content:space-between;align-items:center;padding:12px 28px;gap:16px;background:#102036;border-bottom:1px solid var(--line)}.header-left,.header-right{display:flex;align-items:center;gap:12px}.header-left{font-size:11px;font-weight:870;color:#8eb1ca;letter-spacing:.08em}.header-left strong{color:#eef8fc}.crumb{color:#7189a9}.dirty{font-size:10px;font-weight:850;background:#423624;border:1px solid #847149;color:#f9d69a;border-radius:7px;padding:6px 9px}.dirty.saved{background:#194032;border-color:#438968;color:#befbe5}.header-link{font-size:11px;color:var(--mint);border:1px solid #3e7468;border-radius:8px;padding:7px 10px}.mobile-menu{display:none;background:#223e55;border:1px solid #456b85;border-radius:8px;color:#fff;padding:6px 10px;font-size:17px}
.studio-work{width:100%;max-width:1870px;margin:auto;padding:29px 29px 65px}.work-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:17px}.work-heading h1{font-size:31px;letter-spacing:-.05em;margin:7px 0}.work-heading p:not(.eyebrow){font-size:12px;color:var(--muted);margin:0}.eyebrow{font-size:10px;color:var(--mint);font-weight:950;letter-spacing:.15em;margin:0}.heading-buttons{display:flex;gap:8px;flex-wrap:wrap}.button{display:inline-flex;justify-content:center;align-items:center;gap:6px;padding:10px 15px;color:#dff4ff;background:#213b51;border:1px solid #446681;border-radius:9px;font-weight:850;font-size:11px}.button:hover{filter:brightness(1.11)}.button.primary{background:var(--mint);color:#092821;border-color:var(--mint)}.button.danger{background:#502f3e;color:#ffdce6;border-color:#855268}.button.quiet{background:#182c41}.button.sm{padding:7px 11px;font-size:10px}.warning{border-radius:12px;padding:12px 16px;border:1px solid #547269;background:#21352f;color:#c1e8d8;font-size:11px;margin-bottom:18px}.warning strong{color:#e4fff5}
.work-grid{display:grid;grid-template-columns:minmax(310px,1fr) minmax(300px,1fr);gap:16px;align-items:start}.editor-area{min-width:0}.editor-section{display:grid;gap:15px}.section-card{background:linear-gradient(140deg,#15243a,#111e2f);border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0}.section-card>h2{font-size:16px;letter-spacing:-.03em;margin:0 0 5px}.section-card>p{font-size:11px;line-height:1.7;color:#9fb3c8;margin:0 0 15px}.section-card .subhead{font-size:12px;font-weight:900;color:#b0e9da;margin:13px 0 6px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field.full{grid-column:1/-1}.field label{font-size:11px;color:#c5d7e6;font-weight:820}.field small{font-size:10px;color:#91a5bd}.field input,.field select,.field textarea{min-height:39px;width:100%;border:1px solid #415a73;border-radius:8px;color:#eaf6ff;background:#0d1c2e;padding:9px 11px}.field textarea{min-height:85px;resize:vertical}.field input[type=color]{padding:4px;height:42px;min-height:42px}.field input[type=range]{accent-color:var(--mint);padding:8px 2px;border:0;background:none}.field input[type=checkbox]{width:17px;min-height:17px;height:17px;accent-color:var(--mint)}.check-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #2c4359}.check-row label{font-size:12px;font-weight:800;flex:1}.check-row p{font-size:10px;color:var(--muted);margin:0;line-height:1.5}.check-row input{accent-color:var(--mint);width:18px;height:18px}
.entry{border:1px solid #395670;border-radius:12px;background:#182a41;margin-bottom:14px;padding:15px}.entry-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #365067;padding-bottom:11px;margin-bottom:14px}.entry-head strong{font-size:12px}.entry-head span{font-size:10px;color:#a2bacf}.entry-actions{display:flex;gap:5px;flex-wrap:wrap}.entry-actions button{background:#243e53;border:1px solid #4a6a7f;color:white;border-radius:7px;padding:4px 8px;min-height:28px;font-size:11px}.entry-actions button:hover{background:#32596b}.entry-actions button.remove{background:#52303b;border-color:#885365;color:#ffdbe2}
.entry-img{margin:11px 0;background:#0c1929;border-radius:9px;border:1px solid #3e5d78;overflow:hidden;position:relative;min-height:105px}.entry-img img{display:block;width:100%;height:155px;object-fit:cover}.entry-img small{position:absolute;bottom:8px;left:8px;background:#0b1934bb;padding:4px 7px;color:#e1eaff;font-size:9px;border-radius:5px}.upload-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:9px}.upload-row label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:8px 11px;border:1px solid #5c807b;border-radius:7px;background:#21483d;color:#d3ffee;font-size:11px;font-weight:820}.upload-row input{display:none}.upload-row .hint{font-size:10px;color:#9dafc5}.subitem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;margin:8px 0}.subitem input,.subitem select{width:100%;background:#112237;border:1px solid #4a657e;color:#dfeffd;border-radius:7px;padding:8px;font-size:11px}.subitem button{border-radius:7px;background:#482e3d;border:1px solid #825165;color:#ffdee3;padding:5px 11px}
.notice{background:#183b3a;border:1px solid #34786d;color:#b9eade;border-radius:9px;padding:12px;font-size:11px;line-height:1.7}.notice.warn{background:#3b3427;border-color:#846841;color:#f1d7b3}.sample{border:1px solid #39576c;background:#14283c;border-radius:12px;padding:15px}.sample-title{font-size:24px;font-weight:900;letter-spacing:-.04em}.sample p{font-size:11px;color:#aac4d1}.swatches{display:flex;gap:7px;margin:10px 0}.swatches span{width:29px;height:29px;border-radius:8px;border:1px solid #ffffff3a}.tile-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.tile-stat{background:#1b3045;border:1px solid #3b526c;border-radius:11px;padding:14px}.tile-stat b{display:block;font-size:28px;color:#9ff4db}.tile-stat small{display:block;color:#9aaec2;font-size:10px}.instruction{display:grid;gap:12px}.instruction-step{display:flex;gap:12px;align-items:start;padding:12px;border:1px solid #38566a;border-radius:9px}.instruction-step>span{display:grid;place-items:center;height:30px;width:30px;flex:0 0 30px;background:#2a574d;color:#bcfcea;font-weight:900;border-radius:8px}.instruction-step b{font-size:12px}.instruction-step p{font-size:11px;color:#9fb3c5;margin:4px 0 0}.instruction code{color:#bcf7e0;background:#123b31;padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}
.preview-area{position:sticky;top:12px;border:1px solid #3a526c;background:#101c2c;border-radius:15px;min-width:0;overflow:hidden;box-shadow:0 18px 55px #0006}.preview-head{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:13px 15px;border-bottom:1px solid #324c61}.preview-head strong{display:block;font-size:12px}.preview-head small{display:block;font-size:10px;color:#8ca7be}.preview-actions{display:flex;gap:6px}.preview-actions button{background:#243d53;color:#b4c8d5;border:1px solid #42627b;border-radius:7px;padding:7px 10px}.preview-actions button.active{color:#00251a;background:var(--mint)}.preview-frame-shell{display:flex;justify-content:center;align-items:stretch;background:#08101b;padding:10px;min-height:560px;max-height:74vh;overflow:auto}.preview-frame-shell iframe{display:block;width:100%;height:70vh;min-height:540px;background:#0c1626;border:1px solid #3b5676;border-radius:6px}.preview-frame-shell.mobile{padding:10px 2px}.preview-frame-shell.mobile iframe{width:390px;max-width:100%;min-height:660px;height:660px;border:7px solid #294058;border-radius:24px}.preview-footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid #284255;font-size:10px;color:#8ca4ba}.preview-footer a{font-weight:850;color:var(--mint)}
.studio-footer{padding:18px 28px;border-top:1px solid #253b52;display:flex;justify-content:space-between;flex-wrap:wrap;gap:9px;color:#7e9aad;font-size:10px}.notification{position:fixed;bottom:19px;right:19px;z-index:90;background:#215b4d;color:#e6fff5;padding:14px 18px;border-radius:10px;box-shadow:0 12px 35px #000a;border:1px solid #83d4bb;max-width:360px}.side-dimmer{position:fixed;inset:0;background:#0009;z-index:50}
@media(max-width:1360px){.studio{grid-template-columns:215px minmax(0,1fr)}.work-grid{grid-template-columns:1fr 1fr}.studio-work{padding:24px 18px}.section-card{padding:16px}}
@media(max-width:1050px){.work-grid{grid-template-columns:1fr}.preview-area{position:static}.preview-frame-shell{max-height:670px}.studio{grid-template-columns:215px 1fr}}
@media(max-width:780px){.studio{grid-template-columns:1fr}.studio-side{position:fixed;top:0;bottom:0;width:255px;transform:translateX(-110%);height:100dvh;transition:transform .2s;box-shadow:16px 0 30px #0008}.studio-side.open{transform:translateX(0)}.mobile-menu{display:block}.studio-header{min-height:60px;padding:9px 13px}.studio-work{padding:17px 11px 34px}.work-heading{align-items:start;flex-direction:column}.work-heading h1{font-size:26px}.field-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.tile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-frame-shell iframe{height:570px;min-height:500px}.preview-frame-shell.mobile iframe{height:600px;min-height:600px}.studio-footer{padding:13px}.entry{padding:12px}}
@media(max-width:440px){.header-left{font-size:9px;gap:6px}.header-right{gap:4px}.header-link{font-size:9px}.dirty{font-size:9px}.warning{font-size:10px}.preview-head{flex-direction:column;align-items:start}.preview-actions{align-self:end}.subitem{grid-template-columns:1fr 1fr auto}.subitem button{padding:4px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}