@font-face{font-family:Studio;src:url('../../splatworks/layoutsplat/fonts/LiberationSans-Regular.ttf')}*{box-sizing:border-box}body{margin:0;background:#f6f4fb;color:#32214f;font:15px/1.5 Studio,Arial,sans-serif}button,input,textarea,select{font:inherit}button,.file-button{border:1px solid #d9cfea;border-radius:9px;background:white;color:#44216f;padding:9px 14px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px}button:hover,.file-button:hover{background:#f2eaff;border-color:#9771d2}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #2f9d9e;outline-offset:3px}button:disabled{opacity:.55;cursor:wait}button.primary{color:white;background:#7434d5;border-color:#7434d5}button.primary:hover{background:#5924b1}header{display:flex;align-items:center;gap:24px;padding:18px 28px;background:white;border-bottom:1px solid #e2d9ef}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#3c1e62}.brand strong{font-size:28px;letter-spacing:-1px}.brand small{display:block;color:#79658e;font-size:12px}.brand sup{font-size:11px}header>a:last-child{margin-left:auto;color:#633c8f;font-size:13px}.local-badge{background:#e8f5ee;color:#20765b;padding:5px 10px;border-radius:20px;font-size:12px}main{max-width:1700px;margin:0 auto;display:grid;grid-template-columns:310px minmax(0,1fr)}aside{padding:25px 23px;background:#fff;border-right:1px solid #e2d9ef}h1{font-size:29px;line-height:1.2;margin:9px 0}h2{font-size:23px;line-height:1.25;margin:5px 0 10px}.eyebrow{color:#8552b7;font-size:10px;font-weight:bold;letter-spacing:1.8px}.section-title p,.glitch-panel p{font-size:13px;color:#756585}.section-title{margin-bottom:25px}label{display:grid;gap:6px;margin:13px 0;font-size:12px;font-weight:600;min-width:0}textarea,select,input:not([type=checkbox],[type=range],[type=color],[type=file]){border:1px solid #d9cfea;border-radius:7px;padding:9px;background:#fff;color:#32214f;min-width:0;width:100%}textarea{resize:vertical;line-height:1.5}input[type=range]{accent-color:#7c3aed;width:100%;min-width:0}input[type=color]{height:33px;width:100%;border:1px solid #d9cfea;border-radius:6px;padding:3px;background:white}input[type=file]{font-size:11px;max-width:100%}output{color:#8a73a4;font-size:11px;line-height:1}.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.row label{margin:8px 0}.colors{grid-template-columns:1fr 1fr 1fr}.check{display:flex;align-items:center;gap:8px;cursor:pointer}.check input{accent-color:#7c3aed}details{border-top:1px solid #eee7f6;margin-top:16px;padding-top:14px}summary{cursor:pointer;font-weight:bold;font-size:13px}.hint{font-size:11px;color:#7b6a8c;line-height:1.5}.studio{padding:28px;min-width:0}.studio-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:16px 0 21px}.preset{min-width:0;display:flex;flex-direction:column;gap:5px;padding:11px 6px;background:#fff;height:82px}.preset span{font-size:10px;font-weight:400;color:#79658e}.preset img{width:100%;height:38px;object-fit:contain;pointer-events:none}.preset[aria-pressed=true]{border:2px solid #823add;box-shadow:0 0 0 2px #eee3fc;padding:10px 5px}.preview{position:relative;display:grid;place-items:center;min-height:315px;border:1px solid #e0d6ef;border-radius:13px;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#ede9f5 25%,transparent 25%),linear-gradient(-45deg,#ede9f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ede9f5 75%),linear-gradient(-45deg,transparent 75%,#ede9f5 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.preview img{width:100%;max-height:420px;object-fit:contain}.preview-label{position:absolute;bottom:10px;right:12px;border-radius:6px;background:#ffffffdc;padding:3px 7px;color:#7b6a8c;font-size:10px}.export-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}.export-bar label{display:flex;align-items:center;gap:7px;margin:0 0 0 auto}.export-bar select{width:auto}#status{min-height:22px;color:#675279;font-size:12px}.glitch-panel{margin-top:30px;background:white;border:1px solid #e0d6ef;border-radius:13px;padding:22px}.glitch-panel h2{font-size:21px}.glitch-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}#glitchOutput{width:100%;font-size:23px;min-height:100px;padding:22px 15px;line-height:1.8}.glitch-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.glitch-actions label{font-size:11px}.glitch-actions button{font-size:12px}.glitch-panel .hint{font-size:11px}footer{padding:20px;text-align:center;color:#7c698c;font-size:11px;border-top:1px solid #e2d9ef}a{color:#713bb4}[hidden]{display:none!important}body.embedded header,body.embedded footer{display:none}body.embedded main{max-width:none}body.embedded .studio{padding:20px}body.embedded aside{padding:20px}body.embedded .section-title{display:none}@media(min-width:1400px){.presets{grid-template-columns:repeat(8,minmax(0,1fr))}}@media(max-width:850px){main{grid-template-columns:255px minmax(0,1fr)}aside,.studio{padding:18px}.presets{grid-template-columns:repeat(3,minmax(0,1fr))}.glitch-actions{align-items:stretch}.export-bar label{margin:0}.local-badge{display:none}.glitch-controls{gap:7px}}@media(max-width:620px){header{padding:12px 16px}.brand strong{font-size:23px}header>a:last-child{font-size:11px}main{display:flex;flex-direction:column}aside{border:0;border-bottom:1px solid #e2d9ef;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.section-title,aside>label,aside>.colors,aside>details{grid-column:1/-1}.section-title{margin:0}.section-title h1{font-size:25px}.section-title p{display:none}aside>details:not([open]){margin-top:6px;padding-top:8px}.presets{grid-template-columns:repeat(4,minmax(0,1fr))}.preset{height:73px}.preset img{height:29px}.preview{min-height:210px}.studio{padding:18px 12px}.glitch-panel{padding:16px}.export-bar button{flex:1}.glitch-controls label{font-size:11px}body.embedded aside{padding:14px}.studio-heading h2{font-size:22px}}

.shape-presets{display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0}.shape-presets button{min-height:40px}.shape-presets button[aria-pressed=true]{background:#7c3aed;color:white}.image-add{display:inline-block;cursor:pointer;padding:.7rem 1.2rem;background:#7c3aed;color:white;border-radius:8px}#imageTools{margin-top:1rem}#artwork{touch-action:none}.drag-over{outline:4px dashed #7c3aed}#motionPreview{padding:1rem;background:#f2edff;border-radius:12px}#motionPreview img,#motionPreview video{display:block;max-width:100%;max-height:400px;margin:1rem auto}#motionPreview [hidden]{display:none}#motionDownload{display:inline-block;padding:.7rem 1rem;background:#7c3aed;color:white;border-radius:8px}

.shape-presets button{display:flex;flex-direction:column;gap:3px;font-size:11px;padding:6px 8px}.shape-presets img{width:54px;height:30px;object-fit:contain;pointer-events:none}

.selection-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}.selection-toolbar label{display:flex;align-items:center;gap:8px;margin:0}.selection-toolbar select{max-width:220px}#selectionOverlay{position:absolute;inset:0;pointer-events:none;z-index:2}.fs-layer-hit{position:absolute;pointer-events:auto;opacity:0;border:0;padding:0;background:transparent;cursor:move;min-height:0!important}.fs-layer-hit:focus-visible{opacity:1;background:transparent;outline:2px dashed #7c3aed}.fs-selection{position:absolute;border:1.5px dashed #7c3aed;pointer-events:none}.fs-selection button{position:absolute;pointer-events:auto;padding:0;min-height:0!important;width:20px;height:20px;background:white;border:2px solid #7c3aed;border-radius:3px;touch-action:none}.fs-resize.nw{left:-10px;top:-10px;cursor:nwse-resize}.fs-resize.ne{right:-10px;top:-10px;cursor:nesw-resize}.fs-resize.sw{left:-10px;bottom:-10px;cursor:nesw-resize}.fs-resize.se{right:-10px;bottom:-10px;cursor:nwse-resize}.fs-selection .fs-rotate{left:calc(50% - 10px);top:-36px;border-radius:50%;background:#ede7ff;cursor:grab}.preview-label{z-index:3;pointer-events:none}#preview{touch-action:none}

/* Selection hit areas must never paint over the artwork, including hover. */
.fs-layer-hit,.fs-layer-hit:hover,.fs-layer-hit:focus-visible{background:transparent;border:0;box-shadow:none}.fs-layer-hit:focus-visible{outline:2px dashed #7c3aed}

/* Keep related controls together and the artwork visible while editing. */
main{grid-template-columns:350px minmax(0,1fr);align-items:start}
aside{position:sticky;top:12px;max-height:calc(100dvh - 24px);overflow-y:auto;scrollbar-gutter:stable;padding:22px 18px;scroll-behavior:smooth}
.section-title{margin-bottom:16px}.section-title h1{font-size:26px}
.control-jumps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}.control-jumps a{font-size:12px;font-weight:600;text-decoration:none;padding:6px 11px;border-radius:20px;background:#f2ecfc;color:#60339b}
.control-jumps a:hover{background:#e6d8fa}.control-group{border:1px solid #e4dbee;border-radius:12px;padding:14px;margin:0 0 12px;background:#fff;scroll-margin-top:10px}
.control-group>h2{display:flex;align-items:center;gap:9px;font-size:14px;margin:0 0 12px}.control-group>summary{display:flex;align-items:center;gap:9px;font-size:14px;list-style:none;min-height:28px}.control-group>summary::-webkit-details-marker{display:none}.control-group>summary::after{content:'＋';margin-left:auto;color:#8552b7;font-size:17px}.control-group[open]>summary::after{content:'−'}.control-group[open]>summary{margin-bottom:12px}
.control-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:8px;background:#f1e9fc;color:#7434d5;font-size:16px;font-weight:700}
.control-subtitle{font-size:12px;color:#70568c;margin:16px 0 6px}.control-group label{font-size:12px}.control-group .row{gap:8px}.control-group details{margin-top:12px;padding-top:12px}.control-group details summary{font-size:12px;line-height:1.5}.control-group details .control-icon{width:23px;height:23px;margin-right:4px}
.text-size-control{background:#f7f3fc;border:1px solid #e6dcf3;border-radius:9px;padding:10px;margin:12px 0}.text-size-control>label{display:flex;justify-content:space-between;margin:0 0 9px}.size-actions{display:flex;align-items:center;gap:7px;margin-bottom:8px}.size-actions button{min-width:42px;min-height:42px;padding:6px;font-size:16px}.size-actions input{flex:1;text-align:center;font-weight:700;font-size:16px!important}.size-actions .hint{margin-right:2px}.text-size-control .hint{margin:3px 0 0}.text-size-control output{font-size:12px}
@media(max-width:1050px) and (min-width:621px){main{grid-template-columns:310px minmax(0,1fr)}.studio{padding:20px 16px}}
@media(max-width:620px){main{display:flex}aside{position:static;display:block;max-height:none;overflow:visible;width:100%;padding:16px}.control-group{margin-bottom:10px}.control-jumps{position:sticky;top:0;background:#fff;padding:8px 0;z-index:4}.section-title p{display:block}.studio{width:100%}}
@media(prefers-reduced-motion:reduce){aside{scroll-behavior:auto}}