.piksi-page-intro{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(210px,290px);align-items:center;gap:15px;margin:22px 0 0;padding:14px 18px;border:1px solid #c4dce0;border-radius:15px;background:linear-gradient(110deg,#eef8f7,#fffaf1 72%);box-shadow:0 8px 28px #2643500c}
.piksi-page-intro>img{width:83px;height:98px;object-fit:contain;filter:drop-shadow(0 5px 8px #286d8340)}
.piksi-page-intro-copy small{font:800 9px Arial,sans-serif;letter-spacing:.15em;color:#27778a}
.piksi-page-intro-copy p{margin:7px 0 0;max-width:680px;color:#26383e;font:14px/1.55 Georgia,serif}
.piksi-page-intro .piksi-tour-trigger{min-height:66px;width:100%;background:#fffdf9}
.studio-head{padding-top:28px}
.orientation{grid-template-columns:repeat(4,minmax(0,1fr))}
.orientation button:disabled{opacity:.53;cursor:not-allowed;border-style:dashed;background:#eeeae2}
.orientation .panorama{width:28px;height:11px}
.bp-subject-field{margin-top:17px}.bp-subject-field>label{display:flex;align-items:center;gap:7px}.bp-subject-field>label .bp-filter-icon{width:22px;height:22px}.bp-subject-field>small{font-size:10px;color:#716b61}
.bp-filter-primary,.bp-filter-advanced{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.bp-filter-field{min-width:0;padding:10px 12px;border:1px solid #d9d4c9;border-radius:11px;background:#fffdf8;box-shadow:0 3px 12px #443a2910}.bp-filter-label{display:flex;align-items:center;gap:8px;color:#33434a;font:800 11px Arial,sans-serif;letter-spacing:.02em}.bp-filter-icon{display:block;flex:none;width:27px;height:27px}
.workspace.create-premium:has(.bp-filter-picker[open]){position:relative;z-index:5}
.bp-filter-picker{min-width:0;background:transparent}
.bp-filter-field:has(.bp-filter-picker[open]){position:relative;z-index:20;border-color:#4c9ca7;box-shadow:0 0 0 2px #52c2c82e,0 8px 24px #23495217}
.bp-filter-picker>summary{display:flex;align-items:center;gap:9px;min-height:34px;padding:4px 0 0;cursor:pointer;list-style:none}
.bp-filter-picker>summary::-webkit-details-marker{display:none}.bp-filter-picker>summary:focus-visible,.bp-filter-option:focus-visible{outline:2px solid #147d91;outline-offset:2px}
.bp-filter-chosen,.bp-filter-option-copy{display:grid;min-width:0;gap:3px}.bp-filter-chosen b,.bp-filter-option-copy b{font:700 11px/1.25 Arial,sans-serif;color:#253741}.bp-filter-chosen small,.bp-filter-option-copy small{font:10px/1.32 Arial,sans-serif;color:#6d6b65}
.bp-filter-chevron{margin-left:auto;font:22px Arial,sans-serif;color:#327b88}.bp-filter-picker[open] .bp-filter-chevron{transform:rotate(180deg)}
.bp-filter-options{position:absolute;top:calc(100% + 3px);left:0;z-index:21;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:calc(200% + 14px);max-width:calc(100vw - 32px);max-height:260px;overflow:auto;padding:9px;border:1px solid #9abfc1;border-radius:10px;background:#fffdf9;box-shadow:0 15px 35px #1e3b4340;overscroll-behavior:contain}
.bp-filter-field:nth-child(even) .bp-filter-options{left:auto;right:0}
.bp-filter-option{display:flex;align-items:center;gap:8px;min-width:0;min-height:59px;padding:6px;text-align:left;border:1px solid #e3ded4;border-radius:8px;background:#fffdf9;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.bp-filter-option:hover{border-color:#83b5bc;background:#f2faf9}.bp-filter-option[aria-pressed="true"]{border-color:#18899a;background:#eaf7f6;box-shadow:inset 0 0 0 1px #18899a}
.bp-filter-option:disabled{opacity:.45;cursor:not-allowed;background:#f0eee8}
.bp-custom-palette{display:grid;gap:6px;margin-top:8px}.bp-custom-palette[hidden]{display:none}.bp-custom-palette label{font:700 10px Arial,sans-serif;color:#35474d}.bp-custom-palette input{min-height:39px;padding:8px 10px;border:1px solid #b9c9c7;border-radius:7px;background:#fffdf9;color:#20333a;font:12px Arial,sans-serif}
.bp-custom-palette input:focus-visible{outline:2px solid #16889a;outline-offset:1px}
@media(max-width:980px){.piksi-page-intro{grid-template-columns:70px minmax(0,1fr)}.piksi-page-intro>img{width:68px;height:80px}.piksi-page-intro .piksi-tour-trigger{grid-column:2;max-width:350px}}
@media(max-width:650px){.piksi-page-intro{grid-template-columns:58px minmax(0,1fr);gap:8px;margin:12px 0 0;padding:11px}.piksi-page-intro>img{width:56px;height:70px}.piksi-page-intro-copy p{font-size:12px}.piksi-page-intro .piksi-tour-trigger{grid-column:1/-1;min-height:54px;max-width:none}.studio-head{padding-top:18px}.bp-filter-primary,.bp-filter-advanced{grid-template-columns:1fr;gap:12px}.bp-filter-options,.bp-filter-field:nth-child(even) .bp-filter-options{left:0;right:auto;width:100%;grid-template-columns:1fr;max-height:280px}.orientation{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Keep the preview independent from the height of the expanding filter panel. */
.workspace.create-premium{grid-template-columns:minmax(320px,42%) minmax(0,1fr)!important;grid-template-rows:auto!important;align-items:start!important;gap:16px!important}
.workspace.create-premium>.controls{grid-column:1!important;grid-row:1!important;height:auto!important;align-self:start!important}
.workspace.create-premium>.create-right-stack{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:16px;min-width:0;align-self:start}
.create-right-stack>.create-side{grid-column:auto!important;grid-row:auto!important;width:auto;height:auto!important;min-height:0!important;align-self:auto!important;flex:none}
.create-right-stack>.preview{grid-column:auto!important;grid-row:auto!important;width:auto;height:clamp(460px,55vw,620px)!important;min-height:0!important;align-self:auto!important;flex:none;grid-template-rows:34px minmax(0,1fr) 108px!important}
.create-right-stack>.preview .stage{min-height:0!important}
.workspace.create-premium .controls,.workspace.create-premium .create-side,.workspace.create-premium .preview{scroll-margin-top:105px}
@media(max-width:980px){.workspace.create-premium{grid-template-columns:minmax(0,1fr)!important}.workspace.create-premium>.controls{grid-column:1!important;grid-row:1!important}.workspace.create-premium>.create-right-stack{grid-column:1;grid-row:2}.create-right-stack>.preview{height:clamp(420px,75vw,560px)!important}}
@media(max-width:720px){.workspace.create-premium[data-state="result"] .create-right-stack>.preview{height:clamp(620px,160vw,720px)!important}}