.sd{grid-template-rows:56px 1fr;height:100svh;display:grid;overflow:hidden}.sd-top{border-bottom:1px solid var(--line);background:var(--bg);align-items:center;gap:16px;padding:0 16px;display:flex}.sd-top .mk-logo img{border-radius:7px;display:block}.sd-title{min-width:0;line-height:1.25;display:grid}.sd-title b{color:var(--fg-1);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:590;overflow:hidden}.sd-title span{color:var(--fg-3);font-size:12px}.sd-tools{align-items:center;gap:4px;margin-left:auto;display:flex}.sd-tools button{width:34px;height:34px;color:var(--fg-3);cursor:pointer;transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);background:0 0;border:0;border-radius:8px;place-items:center;display:grid}.sd-tools button:hover:not(:disabled),.sd-tools button[aria-pressed=true]{background:var(--fill);color:var(--fg-1)}.sd-tools button:disabled{opacity:.35;cursor:default}.sd-sep{background:var(--line-2);width:1px;height:20px;margin:0 6px}.sd-body{grid-template-columns:1fr 400px;min-height:0;display:grid}.sd-stage{background:radial-gradient(60% 60% at 50% 40%, #15171a, var(--bg));place-items:center;min-height:0;padding:20px;display:grid;position:relative;overflow:hidden}.sd-device{width:100%;height:100%;box-shadow:0 0 0 1px var(--line-2), 0 40px 100px -40px #000;transition:width .35s var(--ease-drawer), height .35s var(--ease-drawer), border-radius .35s;background:#fff;border-radius:12px;position:relative;overflow:hidden}.sd-device[data-device=phone]{width:390px;height:min(844px,100%);box-shadow:0 0 0 10px #1b1c1f, 0 0 0 11px var(--line-2), 0 40px 100px -40px #000;border-radius:36px}.sd-device iframe{background:#fff;border:0;width:100%;height:100%;display:block}.sd-loading{background:var(--bg-1);color:var(--fg-3);grid-auto-flow:column;place-content:center;align-items:center;gap:10px;font-size:14px;display:grid;position:absolute;inset:0}.sd-panel{border-left:1px solid var(--line);background:var(--bg-1);grid-template-rows:auto 1fr auto;min-height:0;display:grid}.sd-tabs{border-bottom:1px solid var(--line);gap:4px;padding:10px;display:flex}.sd-tabs button{height:34px;color:var(--fg-3);font:510 13.5px/1 var(--font);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:6px;display:inline-flex}.sd-tabs button[aria-selected=true]{background:var(--fill);color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--line)}.sd-msgs{flex-direction:column;gap:12px;padding:16px;display:flex;overflow-y:auto}.sd-intro{gap:10px;padding:8px 4px;display:grid}.sd-chips{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.sd-chips button{font:400 13px/1.2 var(--font);text-align:left;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg-2);cursor:pointer;transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);border:0;border-radius:999px;padding:8px 12px}.sd-chips button:hover:not(:disabled){color:var(--fg-1);background:#beff001a;box-shadow:inset 0 0 0 1px #beff0059}.sd-msg{gap:6px;max-width:92%;display:grid}.sd-msg p{white-space:pre-wrap;margin:0;font-size:14px;line-height:1.55}.sd-user{align-self:flex-end}.sd-user p{background:var(--fg-1);color:var(--bg);border-radius:14px 14px 4px;padding:9px 13px}.sd-assistant p{color:var(--fg-2)}.sd-act{color:#fca5a5;background:var(--fill);border-radius:8px;align-items:center;gap:6px;width:fit-content;padding:4px 9px;font-size:12px;display:inline-flex}.sd-act[data-ok]{color:var(--fg-2)}.sd-act[data-ok] svg{color:var(--ok)}.sd-working{color:var(--lime);align-items:center;gap:8px;font-size:13px;display:inline-flex}.sd-input{border-top:1px solid var(--line);align-items:flex-end;gap:8px;padding:12px;display:flex}.sd-input textarea{resize:none;border:1px solid var(--line-2);background:var(--bg-2);min-height:44px;max-height:140px;color:var(--fg-1);font:400 14px/1.45 var(--font);border-radius:12px;outline:0;flex:1;padding:11px 13px}.sd-input textarea:focus{border-color:#beff008c}.sd-input .mk-btn{width:44px;padding:0}.sd-design{align-content:start;gap:22px;padding:16px;display:grid;overflow-y:auto}.sd-design h3{margin:0 0 10px;font-size:11px}.sd-designs{grid-template-columns:1fr 1fr;gap:8px;display:grid}.sd-designs button{cursor:pointer;text-align:left;color:var(--fg-2);font:400 12px/1.2 var(--font);background:0 0;border:0;gap:6px;padding:0;display:grid}.sd-designs img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;box-shadow:inset 0 0 0 1px var(--line);border-radius:8px;display:block}.sd-designs button[aria-pressed=true] img{box-shadow:0 0 0 2px var(--lime)}.sd-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.sd-row label{color:var(--fg-2);align-items:center;gap:8px;font-size:13px;display:flex}.sd-row input[type=color]{cursor:pointer;background:0 0;border:0;border-radius:8px;width:34px;height:34px;padding:0}.sd-seg{background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;margin-left:auto;padding:3px;display:inline-flex}.sd-seg button{color:var(--fg-3);height:28px;font:510 12.5px/1 var(--font);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:0 12px}.sd-seg button[aria-pressed=true]{background:var(--fg-1);color:var(--bg)}.sd-fonts{flex-wrap:wrap;gap:6px;display:flex}.sd-fonts button{background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg-2);font:400 13px/1 var(--font);cursor:pointer;border:0;border-radius:8px;padding:7px 11px}.sd-fonts button[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--lime);color:var(--fg-1)}.sd-sections{margin:0;padding:0;list-style:none;display:grid}.sd-sections li{border-bottom:1px solid var(--line);color:var(--fg-2);justify-content:space-between;align-items:center;padding:9px 0;font-size:13.5px;display:flex}.sd-sections .vg-toggle{cursor:pointer;border:0}@media (max-width:900px){.sd{grid-template-rows:56px auto;height:auto;min-height:100svh;overflow:visible}.sd-body{grid-template-columns:1fr}.sd-stage{height:62svh;padding:10px}.sd-panel{border-left:0;border-top:1px solid var(--line);min-height:60svh}.sd-top .mk-btn{display:none}}.sd-save{color:var(--fg-3);text-align:right;min-width:70px;font-size:12px}.sd-fix{color:var(--fg-2);background:#fca5a514;border-radius:10px;align-items:center;gap:10px;margin:0 14px 8px;padding:10px 12px;font-size:12.5px;display:flex;box-shadow:inset 0 0 0 1px #fca5a54d}.sd-fix span{overflow-wrap:anywhere;flex:1;min-width:0}
