:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:#f3f2f8;color:#16142a;overscroll-behavior:none}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.studio{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;height:100dvh;max-height:100dvh;overflow:hidden;position:relative}.studio-top{z-index:30;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:max(10px,var(--safe-t)) max(12px,var(--safe-r)) 10px max(12px,var(--safe-l));background:#fbfbfdf0;border-bottom:1px solid #ecebf3;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.studio-brand{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.eyebrow{margin:0;font-size:10px;letter-spacing:.16em;color:#7c5cff;font-weight:700}.studio-top h1{margin:0;font-size:18px;line-height:1.1}.save-pip{font-size:11px;color:#7a7890;font-weight:600}.studio-actions{display:flex;flex-wrap:wrap;gap:6px}.studio-actions button,.tools button,.studio-lib button,.insp-form button,.chip{min-height:44px;min-width:44px;border-radius:12px;border:1px solid #ecebf3;background:#fff;padding:8px 12px;font-weight:600;font-size:13px;color:#16142a}.chip{background:#f3f2f8}.studio-lib,.studio-insp{position:fixed;z-index:40;top:0;bottom:0;width:min(300px,86vw);padding:max(14px,var(--safe-t)) 14px max(14px,var(--safe-b));background:#fbfbfd;overflow:auto;transform:translate(-105%);transition:transform .2s ease;box-shadow:0 0 40px #16142a2e}.studio-lib{left:0}.studio-insp{left:auto;right:0;transform:translate(105%)}.studio-lib.open,.studio-insp.open{transform:translate(0)}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:35;border:none;background:#16142a47;padding:0}.aside-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.aside-head h2{margin:0;font-size:16px}.icon-close{min-width:44px;min-height:44px;border:none;background:transparent;font-size:22px}.studio-lib ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}.studio-lib button{width:100%;display:flex;align-items:center;gap:8px;text-align:left}.studio-lib button.selected,.tools button.selected,.obj.selected{box-shadow:inset 0 0 0 2px #7c5cff}.swatch{width:18px;height:18px;border-radius:6px;border:1px solid #ddd;flex-shrink:0}.studio-lib small{margin-left:auto;color:#7a7890;font-weight:500}.studio-canvas{grid-row:2;min-height:0;overflow:auto;padding:10px max(10px,var(--safe-r)) max(12px,var(--safe-b)) max(10px,var(--safe-l));display:flex;flex-direction:column;gap:8px}.tools{display:flex;flex-wrap:wrap;gap:6px;position:sticky;top:0;z-index:5;background:#f3f2f8ee;padding:4px 0}.grid-wrap{overflow:auto;-webkit-overflow-scrolling:touch;flex:1;touch-action:none;border-radius:12px;background:#fff;border:1px solid #d8d6e4}.grid{position:relative;display:grid;touch-action:none}.cell{width:28px;height:28px;pointer-events:none}.obj{position:absolute;border-radius:8px;border:2px solid #fff;padding:0;margin:0;touch-action:none;z-index:2}.insp-form{display:grid;gap:8px}.insp-form label{display:grid;gap:4px;font-size:12px;color:#5a5870}.insp-form input{min-height:44px;border-radius:10px;border:1px solid #ecebf3;padding:8px;font-size:16px}.danger{background:#fff0f0!important;color:#b00020!important;border-color:#f0c0c8!important}.muted{color:#7a7890;font-size:13px}.hint{margin:0;font-size:12px;color:#7a7890}@media(min-width:1100px){.studio{grid-template-columns:220px 1fr 240px;grid-template-rows:auto 1fr}.studio-top{grid-column:1 / -1}.studio-lib,.studio-insp{position:static;transform:none;width:auto;height:auto;box-shadow:none;z-index:1;border-right:1px solid #ecebf3}.studio-insp{border-right:none;border-left:1px solid #ecebf3}.studio-lib .icon-close,.studio-insp .icon-close,.sheet-backdrop,.studio-actions .chip{display:none}.studio-canvas{grid-column:2;grid-row:2}.studio-lib{grid-column:1;grid-row:2}.studio-insp{grid-column:3;grid-row:2}.studio-lib.open,.studio-insp.open{transform:none}}@media(orientation:landscape)and (max-height:500px){.studio-top{padding-top:max(6px,var(--safe-t));padding-bottom:6px}.studio-top h1{font-size:15px}.studio-actions button,.tools button{min-height:40px;padding:6px 10px}.hint{display:none}}
