[data-dragging-within] *,[data-dragging-within] *:after,[data-dragging-within] *:before{-webkit-user-select:none;-webkit-user-drag:none;-webkit-app-region:no-drag;user-select:none}[data-resizable]:not([data-resizable-draggable=false]){position:absolute;cursor:move}[data-handle]{position:absolute;z-index:1}[data-dragging-within]{cursor:grabbing}[data-dragging]{z-index:1}[data-dragging=true]>[data-handle]{display:none}[data-handle*=top]{top:0}:where([data-handle*=top]){left:50%;cursor:n-resize}[data-handle*=left]{left:0}:where([data-handle*=left]){top:50%;cursor:w-resize}[data-handle*=bottom]{top:100%}:where([data-handle*=bottom]){left:50%;cursor:s-resize}[data-handle*=right]{left:100%}:where([data-handle*=right]){top:50%;cursor:e-resize}[data-handle*=top][data-handle*=left]{cursor:nw-resize}[data-handle*=top][data-handle*=right]{cursor:ne-resize}[data-handle*=bottom][data-handle*=right]{cursor:se-resize}[data-handle*=bottom][data-handle*=left]{cursor:sw-resize}.wireframe-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.wireframe-layer-item{position:absolute;pointer-events:auto}[data-resizable]:not([data-resizable-draggable=false]){--box-drag-border-color: var(--link-color, hsl(204, 100%, 50%))}[data-handle]{--handle-size: 14px;color:var(--accent-color, hsl(214, 100%, 50%));width:var(--handle-size);height:var(--handle-size);border-radius:50%;background:var(--card-bg, white);margin:calc(var(--handle-size) / -2);box-sizing:border-box;border:2px solid var(--accent-color, hsl(214, 100%, 50%));box-shadow:0 1px 3px #00000040;transition:transform .1s ease,box-shadow .1s ease}[data-handle]:hover{transform:scale(1.15);box-shadow:0 2px 6px #0000004d;background:var(--accent-color, hsl(214, 100%, 50%));border-color:var(--card-bg, white)}[data-dragging]{box-shadow:0 4px 15px var(--card-shadow, rgba(0,0,0,.1)),0 0 0 2px var(--box-drag-border-color)}:root{--bg-color: #f8f9fa;--text-color: #333;--text-muted-color: #666;--border-color: #e0e0e0;--accent-color: #3498db;--stage-bg: #f9f9f9;--stage-border: #e0e0e0;--box-border-color-1: #9b59b6;--box-bg-color-1: hsla(283, 39%, 65%, .2);--box-border-color-2: #e67e22;--box-bg-color-2: hsla(28, 80%, 52%, .2);--box-border-color-3: #2ecc71;--box-bg-color-3: hsla(145, 63%, 49%, .2);--box-border-color-4: var(--accent-color);--box-bg-color-4: hsla(207, 69%, 57%, .2);--box-border-color-5: #e83e8c;--box-bg-color-5: hsla(332, 81%, 58%, .2);--box-border-color-6: #17a2b8;--box-bg-color-6: hsla(188, 78%, 40%, .2);--footer-text: var(--text-muted-color);--footer-border: var(--border-color);--link-color: var(--accent-color);--card-bg: #ffffff;--card-shadow: rgba(0, 0, 0, .06)}@media (prefers-color-scheme: dark){:root{--bg-color: #2c2c2c;--text-color: #f0f0f0;--text-muted-color: #aaa;--border-color: #444;--accent-color: #3498db;--stage-bg: #333;--stage-border: #444;--box-border-color-1: #be90d4;--box-bg-color-1: hsla(283, 39%, 67%, .25);--box-border-color-2: #f39c12;--box-bg-color-2: hsla(37, 90%, 51%, .25);--box-border-color-3: #2ecc71;--box-bg-color-3: hsla(145, 63%, 49%, .25);--box-border-color-4: var(--accent-color);--box-bg-color-4: hsla(207, 69%, 57%, .25);--box-border-color-5: #f06292;--box-bg-color-5: hsla(332, 81%, 66%, .25);--box-border-color-6: #26c6da;--box-bg-color-6: hsla(188, 78%, 50%, .25);--footer-text: var(--text-muted-color);--footer-border: var(--border-color);--link-color: #5dade2;--card-bg: #3a3a3a;--card-shadow: rgba(0, 0, 0, .25)}}body,html{height:100%;min-height:100%;color-scheme:light dark;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;padding:2em;margin:0;display:flex;flex-direction:column;align-items:center;min-height:100vh;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease}h1{text-align:center;margin-bottom:.5em;font-weight:600;font-size:2.5rem;color:var(--text-color)}h1+p{text-align:center;margin-bottom:2.5em;color:var(--text-muted-color);max-width:600px;margin-left:auto;margin-right:auto;font-size:1rem}.demo-container{position:relative;flex-grow:1;margin-bottom:3rem;width:100%;max-width:1400px}footer{margin-top:auto;padding:1.5em 0;border-top:1px solid var(--footer-border);font-size:.9em;color:var(--footer-text);text-align:center}footer a{color:var(--link-color);text-decoration:none}footer a:hover{text-decoration:underline}.stage,.non-staged-area{min-width:350px;position:relative;min-height:550px;border-radius:12px;padding:1.5rem;box-sizing:border-box}.stage{background-color:var(--stage-bg);border:1px solid var(--stage-border);box-shadow:0 4px 12px var(--card-shadow);width:100%;max-width:700px;margin:0 auto 2rem;min-height:500px}.stage>p{text-align:center;font-weight:600;margin-top:0;margin-bottom:1.5rem;color:var(--text-muted-color);opacity:1;font-size:1.1rem}.non-staged-area{position:relative}.comp,.wireframe-layer-item{transition:box-shadow .15s ease-out,filter .15s ease-out;border-radius:8px;border:1px solid transparent}.comp{position:absolute;box-sizing:border-box;width:180px;height:140px;background-color:var(--card-bg);box-shadow:0 4px 8px var(--card-shadow);color:var(--text-color)}.comp[data-dragging=true],.wireframe-layer-item[data-dragging=true]{filter:brightness(110%)}.comp p.content{padding:1em;margin:0;font-size:1rem;line-height:1.4;text-align:center;-webkit-user-select:none;user-select:none;color:var(--text-color);height:100%;box-sizing:border-box}#box1{top:80px;left:40px;border-color:var(--box-border-color-1)}#box2{top:80px;left:260px;border-color:var(--box-border-color-2)}#box3{top:80px;left:480px;border-color:var(--box-border-color-3)}#box4{top:260px;left:40px;border-color:var(--box-border-color-4)}#box5{top:260px;left:260px;border-color:var(--box-border-color-5)}#box6{top:260px;left:480px;border-color:var(--box-border-color-6)}#wire-box1{border-color:var(--box-border-color-1)}#wire-box2{border-color:var(--box-border-color-2)}#wire-box4{border-color:var(--box-border-color-4)}#wire-box5{border-color:var(--box-border-color-5)}#wire-box6{border-color:var(--box-border-color-6)}