.xp{--studio-rail:300px;--xp-editor-height:clamp(500px, calc(100svh - 150px), 720px)}.xp__import{padding:26px var(--studio-pad);border-bottom:1px solid var(--border);background:linear-gradient(110deg, var(--surface) 45%, var(--accent-soft));gap:12px;display:grid}.xp__import-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.xp__import-heading label{font:600 clamp(1.125rem, 1rem + .5cqi, 1.375rem)/1.3 var(--font-display);letter-spacing:-.02em}.xp__network{color:var(--text-muted);font:500 .625rem var(--font-mono);letter-spacing:.04em}.xp__url-entry{border:1px solid var(--border-input);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-sm);align-items:center;gap:14px;padding:8px;display:flex}.xp__url-entry:focus-within{outline:2px solid var(--accent);outline-offset:3px}.xp__url-icon{color:var(--text-muted);flex:0 0 22px;margin-left:10px}.xp__url-entry textarea{resize:none;width:100%;min-width:0;min-height:46px;max-height:180px;color:var(--text);font:.875rem/1.5 var(--font-mono);box-shadow:none;background:0 0;border:0;border-radius:0;flex:1;margin:0;padding:12px 0}.xp__url-entry textarea:focus{box-shadow:none;outline:0}.xp__url-entry .btn{border-radius:var(--r-sm);flex-shrink:0;align-self:stretch;gap:22px;min-height:46px}.xp__import[data-batch=true] .xp__url-entry{align-items:flex-start}.xp__import[data-batch=true] .xp__url-entry .btn{align-self:flex-end}.xp__import[data-batch=true] .xp__url-icon{margin-top:12px}.xp__import-tools{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;display:flex}.xp__import-tools p{color:var(--text-muted);margin:0;font-size:.75rem}.xp__import-tools>div{flex-wrap:wrap;align-items:center;gap:8px 18px;display:flex}.xp__link{color:var(--text);text-underline-offset:4px;cursor:pointer;background:0 0;border:0;padding:2px 0;font-size:.75rem;text-decoration:underline}.xp__link:disabled{opacity:.5;cursor:wait}.xp__privacy,.xp__status{color:var(--text-muted);margin:0;font-size:.6875rem;line-height:1.6}.xp__status{color:var(--text);font-size:.75rem;font-weight:500}.xp__status[data-error=true],.xp__readability[data-warning=true]{color:var(--warning-text,var(--text))}.xp>.studio-split{height:var(--xp-editor-height)}.xp__stage-head{flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:16px;display:flex}.xp__badge{font:500 .5625rem/1.4 var(--font-mono);letter-spacing:.06em;color:var(--text-muted)}.xp__work{background:var(--surface);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:auto}.xp__rail{overscroll-behavior-y:contain;scrollbar-gutter:stable;min-height:0;overflow-y:auto}.xp__stage{border:1px solid var(--border);border-radius:var(--r-md);background-color:var(--bg-subtle);background-image:radial-gradient(var(--border) .7px, transparent .7px);background-size:12px 12px;flex:1;place-items:center;min-height:180px;padding:24px;display:grid;position:relative;overflow:auto}.xp__stage canvas{width:auto;max-width:100%;height:auto;max-height:max(180px, calc(var(--xp-editor-height) - 225px));box-shadow:var(--shadow-sm);border-radius:3px;display:block}.xp__stage-head,.xp__collection,.xp__preview-meta,.xp__readability,.xp__source{flex-shrink:0}.xp__preview-meta{color:var(--text-muted);flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:14px;font-size:.6875rem;display:flex}.xp__preview-meta strong{color:var(--text);font:500 .6875rem/1.5 var(--font-mono)}.xp__readability{color:var(--text-muted);margin:12px 0;font-size:.75rem;line-height:1.6}.xp__loading{background:color-mix(in srgb, var(--surface) 94%, transparent);color:var(--text);justify-content:center;align-items:center;gap:12px;font-size:.875rem;display:flex;position:absolute;inset:0}.xp__loading[hidden]{display:none}.xp__spinner{border:2px solid var(--border);border-top-color:var(--text);border-radius:50%;width:20px;height:20px;animation:1s linear infinite xp-spin}@keyframes xp-spin{to{transform:rotate(360deg)}}.xp__rail .studio-section__head h3{font-size:.9375rem}.xp__rail label:not(.xp__checks label){justify-content:space-between;align-items:center;gap:8px;margin:14px 0 7px;font-size:.75rem;font-weight:500;display:flex}.xp__rail label output{color:var(--text-muted);font:.6875rem var(--font-mono)}.xp__rail .input{width:100%;font-size:.8125rem}.xp__rail input[type=range]{width:100%;accent-color:var(--accent)}.xp__pair{grid-template-columns:1fr 1fr;gap:14px;display:grid}.xp__pair>*{min-width:0}.xp__themes{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;display:grid}.xp__themes button,.xp__backgrounds button{border:1px solid var(--border-input);border-radius:var(--r-sm);background:var(--surface);min-width:0;color:var(--text-muted);cursor:pointer;flex-direction:column;align-items:stretch;gap:7px;padding:6px;font-size:.5625rem;display:flex}.xp__themes button[aria-pressed=true],.xp__backgrounds button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px;color:var(--text)}.xp__theme-art{text-align:left;font:600 18px/1 var(--font-display);background:var(--bg-subtle);color:var(--text);border:1px solid var(--border);border-radius:3px;padding:10px 7px}.xp__theme-art i{opacity:.4;background:currentColor;width:90%;height:2px;margin-top:5px;display:block}.xp__theme-art i:last-child{width:65%}.xp__theme-art--midnight{background:var(--accent);color:var(--accent-ink,var(--surface))}.xp__theme-art--editorial{font-family:Georgia,serif;font-style:italic}.xp__theme-art--outline{border:2px solid var(--text-muted)}.xp__backgrounds{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;display:grid}.xp__backgrounds button{gap:5px;padding:4px;font-size:.5rem}.xp__backgrounds button span{border:1px solid var(--border);border-radius:3px;min-height:26px}.xp__backgrounds [data-swatch=transparent]{background:repeating-conic-gradient(var(--bg-subtle) 0 25%, var(--surface) 0 50%) 50% / 8px 8px}.xp__checks{flex-direction:column;gap:12px;display:flex}.xp__checks label{align-items:center;gap:10px;font-size:.8125rem;display:flex}.xp__checks input{accent-color:var(--accent);flex:0 0 16px;width:16px;height:16px}.xp__hint{color:var(--text-muted);margin-top:14px;font-size:.6875rem;line-height:1.6}.xp__source{border:1px solid var(--border-input);border-radius:var(--r-md);margin-top:20px;font-size:.8125rem}.xp__source summary{cursor:pointer;padding:14px 16px;font-weight:600}.xp__source-body{max-height:220px;padding:0 16px 16px;overflow:auto}.xp__source-body a{overflow-wrap:anywhere}.xp__source-body p,.xp__source-body li{color:var(--text-muted);font-size:.75rem;line-height:1.7}.xp__source-body ul{padding-left:18px}.xp__source-body label{margin:12px 0 8px;font-size:.75rem;font-weight:600;display:block}.xp__source-body textarea{resize:vertical;width:100%;font-size:.75rem}.xp__source-body .btn{margin-top:10px}.xp__collection{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.xp__collection[hidden]{display:none}.xp__chip{border:1px solid var(--border-input);border-radius:var(--r-sm);display:inline-flex;overflow:hidden}.xp__chip button{background:var(--surface);min-height:34px;color:var(--text-muted);cursor:pointer;border:0;padding:6px 10px;font-size:.6875rem}.xp__chip button[aria-pressed=true]{background:var(--accent-soft);color:var(--text);text-underline-offset:4px;text-decoration:underline}.xp__chip button+button{border-left:1px solid var(--border-input)}.xp__host>.xp{height:100%;overflow:auto}.xp__host>.xp:focus-within{box-shadow:none}@container studio (width<=820px){.xp>.studio-split{height:max(480px, calc(100svh - var(--header-h) - 78px));grid-template-rows:auto minmax(160px,1fr);grid-template-columns:minmax(0,1fr)}.xp__work{border-bottom:1px solid var(--border);padding-block:14px}.xp__stage{flex:none;height:clamp(150px,27svh,260px);min-height:0;padding:10px}.xp__stage canvas{max-height:clamp(130px,27svh - 22px,238px)}.xp__stage-head{margin-bottom:10px}.xp__preview-meta{margin-top:8px}.xp__preview-meta>span{display:none}.xp__readability{margin:6px 0;font-size:.6875rem}.xp__source{margin-top:6px}.xp__source summary{padding:10px 12px;font-size:.75rem}.xp__source-body{max-height:130px}.xp__rail{max-height:none}.workspace .xp>.studio-split,:root[data-embed=desk] .xp>.studio-split{height:max(480px,100svh - 78px)}}@container studio (width<=620px){.xp__import{padding-block:18px}.xp__url-entry{flex-wrap:wrap;gap:4px 8px}.xp__url-icon{flex-basis:18px;width:18px;margin-left:6px}.xp__url-entry textarea{flex-basis:calc(100% - 44px);min-height:46px;font-size:.75rem}.xp__url-entry .btn{flex-basis:100%;justify-content:space-between}.xp__import-tools{align-items:flex-start}.xp__import-tools>div{gap:14px}.xp__badge{font-size:.5rem}}.tm--xpost .xp-motion-url{animation:6s ease-in-out infinite backwards xp-url}.tm--xpost .xp-motion-card{transform-origin:230px 130px;animation:6s ease-in-out infinite backwards xp-card}.tm--xpost .xp-motion-saved{animation:6s ease-in-out infinite backwards xp-saved}@keyframes xp-url{0%,20%{opacity:1}36%,82%{opacity:.5}to{opacity:1}}@keyframes xp-card{0%,20%{opacity:.15;transform:translateY(10px)scale(.96)}45%,88%{opacity:1;transform:translateY(0)scale(1)}to{opacity:.15;transform:translateY(10px)scale(.96)}}@keyframes xp-saved{0%,54%{opacity:0}65%,90%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.tm--xpost .xp-motion-url,.tm--xpost .xp-motion-card,.tm--xpost .xp-motion-saved,.xp__spinner{animation:none}}
