.canvas-page{overflow-wrap:anywhere;min-height:100dvh;color:var(--foreground);background:radial-gradient(60% 45% at 50% -12%,#fffffffa,#0000 72%),radial-gradient(46% 48% at 8% 24%,#cddaffb3,#0000 74%),linear-gradient(#f2f5ff 0%,#e7edff 46%,#dbe4ff 100%);padding:12px}.canvas-frame{background:#ffffffd6;border-radius:16px;grid-template-columns:208px minmax(0,1fr);width:min(1248px,100%);height:calc(100dvh - 24px);min-height:calc(100dvh - 24px);margin-inline:auto;display:grid;overflow:hidden;box-shadow:inset 0 1px #fffffff2,0 0 0 .5px #090b0c1f,0 30px 60px -24px #101c6e47,0 10px 22px -14px #101c6e33}.canvas-sidebar{border-right:1px solid var(--hairline);background:#f8faffc7;flex-direction:column;min-width:0;padding:18px 12px;display:flex}.canvas-content{background:#ffffffbd;flex-direction:column;min-width:0;min-height:0;display:flex}.canvas-scroll{flex:auto;min-width:0;min-height:0;overflow:auto}.canvas-main-grid{grid-template-columns:minmax(0,1fr) 270px;min-width:0;display:grid}.canvas-panel{border:1px solid var(--hairline);background:#ffffffc7;border-radius:12px;min-width:0}.canvas-panel[aria-pressed=false]:hover{background:var(--subtle,#f7f7f8)}.canvas-panel[aria-pressed=true]{background:color-mix(in srgb, var(--brand-soft) 70%, white);border-color:color-mix(in srgb, var(--brand) 35%, transparent)}.canvas-panel-muted{border:1px solid var(--hairline);background:var(--subtle);border-radius:12px;min-width:0}.canvas-micro{color:var(--muted-foreground);font-size:12px;line-height:16px}.canvas-secondary{color:var(--muted-foreground);font-size:13px;line-height:20px}.canvas-control{border:1px solid var(--input);background:var(--background);min-height:40px;transition:border-color .15s var(--ease-ui), box-shadow .15s var(--ease-ui);border-radius:8px;outline:none;padding:0 11px;font-size:14px;line-height:20px}.canvas-control:focus-visible{border-color:#1f38c48c;box-shadow:0 0 0 3px #1f38c41f}.canvas-status{white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:4px 9px;font-size:12px;line-height:16px;display:inline-flex}.canvas-status-success{color:var(--success-foreground);background:var(--success-soft)}.canvas-status-warning{color:var(--warning);background:var(--warning-soft)}.canvas-status-error{color:var(--destructive);background:color-mix(in srgb, var(--destructive) 8%, white)}.canvas-status-neutral{color:var(--muted-foreground);background:var(--muted)}.canvas-notice{border-bottom:1px solid var(--hairline);align-items:flex-start;gap:8px;padding:12px 20px;font-size:13px;line-height:20px;display:flex}.canvas-notice-success{color:var(--success-foreground);background:var(--success-soft)}.canvas-notice-warning{color:var(--warning);background:var(--warning-soft)}.canvas-notice-error{color:var(--destructive);background:color-mix(in srgb, var(--destructive) 8%, white)}.canvas-notice-neutral{color:var(--muted-foreground);background:var(--subtle)}.canvas-skeleton{background:linear-gradient(90deg,#f1f1f1 25%,#fafafa 50%,#f1f1f1 75%) 0 0/200% 100%;border-radius:999px;height:12px;animation:1.2s linear infinite canvas-shimmer}@keyframes canvas-shimmer{to{background-position:-200% 0}}@media (max-width:767px){.canvas-page{padding:0}.canvas-frame{border-radius:0;height:auto;min-height:100dvh;max-height:none;display:block}.canvas-sidebar{border-right:0;border-bottom:1px solid var(--hairline);padding:12px 16px 10px;display:block}.canvas-sidebar-footer{display:none}.canvas-main-grid{display:block}.canvas-scroll{overflow:visible}}@media (min-width:768px){.canvas-notice{padding-inline:28px}}@media (prefers-reduced-motion:reduce){.canvas-skeleton{animation:none}}