@layer components{.pk-layout-canvas-figure{gap:var(--pk-2);min-inline-size:0;margin:0;display:grid}.pk-layout-canvas{aspect-ratio:16/9;border:1px solid var(--pk-line);border-radius:var(--pk-radius);background:var(--pk-chrome-deep);touch-action:none;user-select:none;display:grid;position:relative;overflow:hidden}.pk-layout-canvas>.pk-live-overlay__frame{pointer-events:none;grid-area:1/1;block-size:100%;inline-size:100%}.pk-layout-canvas__options{gap:var(--pk-2) var(--pk-4);flex-wrap:wrap;display:flex}.pk-layout-canvas__safe{border:1px dashed color-mix(in srgb, var(--pk-on-solid) 40%, transparent);pointer-events:none;position:absolute;inset:5%}.pk-layout-canvas__safe[data-area=action]{border-style:dotted;border-color:color-mix(in srgb, var(--pk-on-solid) 25%, transparent);inset:3.5%}.pk-layout-canvas__safe>span{padding:0 var(--pk-1);color:color-mix(in srgb, var(--pk-on-solid) 70%, transparent);font-size:var(--pk-text-2xs);line-height:1.6;position:absolute;inset-block-end:0;inset-inline-end:0}.pk-layout-canvas__safe[data-area=action]>span{inset-block:100% auto}.pk-layout-canvas__boxes{position:absolute;inset:0}.pk-layout-canvas__box{--box-x:0;--box-y:0;--box-w:0;--box-h:0;inline-size:calc(var(--box-w) * 100%);block-size:calc(var(--box-h) * 100%);box-sizing:border-box;border:1px dashed color-mix(in srgb, var(--pk-on-solid) 55%, transparent);min-inline-size:0;color:var(--pk-on-solid);font:inherit;cursor:grab;background:0 0;border-radius:0;margin:0;padding:0;position:absolute;inset-block-start:calc(var(--box-y) * 100%);inset-inline-start:calc(var(--box-x) * 100%)}.pk-layout-canvas__box:hover{background:color-mix(in srgb, var(--pk-accent) 10%, transparent);border-style:solid}.pk-layout-canvas__box:focus-visible{outline:2px solid var(--pk-focus);outline-offset:2px}.pk-layout-canvas__box[data-selected]{z-index:1;border:2px solid var(--pk-accent);background:color-mix(in srgb, var(--pk-accent) 14%, transparent)}.pk-layout-canvas__box[data-hidden]{border-color:color-mix(in srgb, var(--pk-on-solid) 30%, transparent);background:repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--pk-on-solid) 8%, transparent) 6px 12px)}.pk-layout-canvas__box[data-gesture]{cursor:grabbing;transition:none}.pk-layout-canvas__label{max-inline-size:100%;padding:0 var(--pk-1);background:var(--pk-chrome-deep);color:var(--pk-on-solid);font-size:var(--pk-text-2xs);white-space:nowrap;text-overflow:ellipsis;line-height:1.6;position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden}.pk-layout-canvas__box[data-label=bottom] .pk-layout-canvas__label{inset-block:auto 0}.pk-layout-canvas__box[data-selected] .pk-layout-canvas__label{background:var(--pk-accent);color:var(--pk-accent-on)}.pk-layout-canvas__box[data-hidden] .pk-layout-canvas__label{color:color-mix(in srgb, var(--pk-on-solid) 70%, transparent)}.pk-layout-canvas__handle{touch-action:none;block-size:1.5rem;inline-size:1.5rem;position:absolute;translate:-50% -50%}.pk-layout-canvas__handle:after{content:"";border:2px solid var(--pk-accent);border-radius:var(--pk-radius-sm);background:var(--pk-surface);position:absolute;inset:.4375rem}.pk-layout-canvas__handle[data-handle=nw]{cursor:nwse-resize;inset-block-start:0;inset-inline-start:0}.pk-layout-canvas__handle[data-handle=n]{cursor:ns-resize;inset-block-start:0;inset-inline-start:50%}.pk-layout-canvas__handle[data-handle=ne]{cursor:nesw-resize;inset-block-start:0;inset-inline-start:100%}.pk-layout-canvas__handle[data-handle=e]{cursor:ew-resize;inset-block-start:50%;inset-inline-start:100%}.pk-layout-canvas__handle[data-handle=se]{cursor:nwse-resize;inset-block-start:100%;inset-inline-start:100%}.pk-layout-canvas__handle[data-handle=s]{cursor:ns-resize;inset-block-start:100%;inset-inline-start:50%}.pk-layout-canvas__handle[data-handle=sw]{cursor:nesw-resize;inset-block-start:100%;inset-inline-start:0}.pk-layout-canvas__handle[data-handle=w]{cursor:ew-resize;inset-block-start:50%;inset-inline-start:0}.pk-layout-canvas__guide{--guide:0;background:var(--pk-accent-strong);pointer-events:none;display:none;position:absolute}.pk-layout-canvas__guide[data-active]{display:block}.pk-layout-canvas__guide[data-axis=vertical]{inline-size:1px;inset-block:0;inset-inline-start:calc(var(--guide) * 100%)}.pk-layout-canvas__guide[data-axis=horizontal]{block-size:1px;inset-block-start:calc(var(--guide) * 100%);inset-inline:0}@media (prefers-reduced-motion:no-preference){.pk-layout-canvas__box{transition:border-color var(--pk-dur-fast) var(--pk-ease), background-color var(--pk-dur-fast) var(--pk-ease)}}.pk-layout-shell{container:layout-workspace/inline-size}.pk-layout-workspace{gap:var(--pk-5);grid-template-columns:minmax(10rem,14rem) minmax(0,1fr);align-items:start;display:grid}.pk-layout-list ul{gap:var(--pk-1);margin:0;padding:0;list-style:none;display:grid}.pk-layout-list__item{min-block-size:2.75rem;inline-size:100%;padding:var(--pk-2) var(--pk-3);border-radius:var(--pk-radius);color:var(--pk-ink);font:inherit;text-align:start;cursor:pointer;background:0 0;border:1px solid #0000;gap:2px;display:grid}.pk-layout-list__item:hover{background:var(--pk-surface-sunk)}.pk-layout-list__item:focus-visible{outline:2px solid var(--pk-focus);outline-offset:2px}.pk-layout-list__item[aria-current=true]{border-color:var(--pk-line);background:var(--pk-accent-soft);color:var(--pk-accent-ink)}.pk-layout-list__name{font-weight:600}.pk-layout-list__kind{color:var(--pk-ink-muted);font-size:var(--pk-text-sm)}.pk-layout-editor{gap:var(--pk-4);min-inline-size:0;display:grid;container:layout-editor/inline-size}.pk-layout-editor__head{justify-content:space-between;align-items:start;gap:var(--pk-3);flex-wrap:wrap;display:flex}.pk-layout-editor__head>:first-child{flex:16rem;max-inline-size:28rem}.pk-layout-editor__head>.pk-cluster{padding-block-start:var(--pk-5)}.pk-layout-editor__workspace{gap:var(--pk-5);grid-template-columns:minmax(0,1fr) minmax(14rem,17rem);align-items:start;display:grid}.pk-layout-editor__main{gap:var(--pk-5);min-inline-size:0;display:grid}.pk-layout-elements{gap:var(--pk-3);display:grid}.pk-layout-elements__group{gap:0;display:grid}.pk-layout-elements__heading{margin:0 0 var(--pk-1);color:var(--pk-ink-muted);font-size:var(--pk-text-sm)}.pk-layout-elements__row{align-items:center;gap:var(--pk-2);min-block-size:2rem;padding-inline:var(--pk-2);border-radius:var(--pk-radius-sm);display:flex}.pk-layout-elements__link{border-radius:var(--pk-radius-sm);block-size:2rem;inline-size:2rem;color:var(--pk-ink-muted);place-items:center;margin-inline-start:auto;display:inline-grid}.pk-layout-elements__row[data-selected]{background:var(--pk-accent-soft)}.pk-layout-inspector__box{gap:var(--pk-3);grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));display:grid}@container layout-editor (width<46rem){.pk-layout-editor__workspace{grid-template-columns:minmax(0,1fr)}}@container layout-workspace (width<40rem){.pk-layout-workspace{grid-template-columns:minmax(0,1fr)}}}
