.app{background:var(--clr-bg);height:100svh;min-height:0;overflow:hidden}.builder{grid-template-rows:auto minmax(0,1fr);width:min(100%,1440px);height:100%;min-height:0;margin:0 auto;display:grid}.builder__workspace{min-height:0;padding:0 var(--space-16) var(--space-16);overflow:hidden}.tool-panel{gap:var(--space-12);grid-template-columns:minmax(0,1fr) 360px;height:100%;min-height:0;display:grid;overflow:hidden}.compose-panel,.frame-rail{border:1px solid var(--clr-border);border-radius:var(--space-8);background:var(--clr-surface);min-width:0;min-height:0}.compose-panel{grid-template-rows:minmax(0,1fr);display:grid;overflow:hidden}.search-block{grid-template-rows:minmax(0,3fr) minmax(0,2fr);min-height:0;display:grid;overflow:hidden}.frame-rail{grid-template-rows:minmax(0,3fr) minmax(0,2fr);gap:0;display:grid;overflow:visible}.panel-heading{gap:var(--space-12);min-height:var(--space-32);justify-content:space-between;align-items:center;display:flex;position:relative}.panel-heading h2{color:var(--clr-text);font:var(--font-ui-heading);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.panel-title-row{gap:var(--space-8);align-items:baseline;min-width:0;display:inline-flex}.panel-meta{color:var(--clr-text-muted);font:var(--font-ui-heading);letter-spacing:0;text-overflow:ellipsis;text-transform:none;white-space:nowrap;overflow:hidden}.panel-menu{justify-items:end;display:grid;position:relative}.panel-menu__button{width:var(--space-32);height:var(--space-32);min-height:var(--space-32)}.empty-state{min-height:calc(var(--space-48) * 3);padding:var(--space-16);color:var(--clr-text-muted);font:var(--font-ui-caption);text-align:center;background:0 0;border:0;place-items:center;display:grid}.field input:not([type=color]):not([type=range]){width:100%;min-width:0;min-height:var(--space-40);padding:0 var(--space-12);border:1px solid var(--clr-border);border-radius:var(--space-4);background:var(--clr-surface-raised);color:var(--clr-text)}.field{gap:var(--space-8);min-width:0;display:grid}.button,.icon-button{gap:var(--space-8);min-height:calc(var(--space-40) + var(--space-4));border:1px solid var(--clr-border);border-radius:var(--space-8);background:var(--clr-surface);color:var(--clr-text);cursor:pointer;font:var(--font-ui-caption);justify-content:center;align-items:center;display:inline-flex}.button{padding:0 var(--space-12)}.button--primary{border-color:var(--clr-accent);background:var(--clr-accent);color:var(--clr-text-on-primary)}.button--secondary{background:var(--clr-surface-raised)}.button:disabled,.icon-button:disabled{cursor:not-allowed;opacity:.48}.icon-button{width:calc(var(--space-40) + var(--space-4));height:calc(var(--space-40) + var(--space-4));color:var(--clr-text);background:0 0;border:0}.icon-button svg{width:var(--space-24);height:var(--space-24)}.icon-button.panel-menu__button{width:var(--space-32);height:var(--space-32);min-height:var(--space-32);border:1px solid var(--clr-border);border-radius:var(--space-4);background:var(--clr-surface-raised)}.icon-button.panel-menu__button svg{width:var(--space-16);height:var(--space-16);color:var(--clr-text-muted)}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:0;padding:0;position:absolute;overflow:hidden}@media (max-width:1120px){.builder__workspace{padding:var(--space-16);overflow:auto}.tool-panel{grid-template-columns:1fr;height:auto;min-height:100%;overflow:visible}.compose-panel,.frame-rail{grid-template-rows:auto auto;overflow:visible}.search-block{grid-template-rows:auto auto}}
.field>span:not(.advanced-text-input){color:var(--clr-text);font:var(--font-ui-label);letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.advanced-panel{z-index:1;min-width:0;min-height:0;padding:var(--space-16);border-top:1px solid var(--clr-border);background:var(--clr-surface);display:grid;position:relative;overflow:hidden}.advanced-logo-preview{width:var(--space-48);height:var(--space-48);border:1px solid var(--clr-border);border-radius:var(--space-8);background:var(--clr-card);color:var(--clr-text-muted);cursor:pointer;font:var(--font-ui-label);place-items:center;display:grid}.advanced-logo-preview img{width:var(--space-32);height:var(--space-32);object-fit:contain}.logo-placeholder{width:var(--space-32);height:var(--space-32);border:1px solid var(--clr-border);border-radius:var(--space-4);background:linear-gradient(to bottom right, transparent calc(50% - 1px), var(--clr-text-muted) 50%, transparent calc(50% + 1px)) center / 100% 100%, linear-gradient(to top right, transparent calc(50% - 1px), var(--clr-text-muted) 50%, transparent calc(50% + 1px)) center / 100% 100%;opacity:.72}.advanced-text-field{gap:var(--space-4)}.advanced-controls{gap:var(--space-12);border-radius:var(--space-8);background:0 0;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;padding:0;display:grid}.advanced-controls__body{gap:calc(var(--space-16) + var(--space-12));grid-template-columns:minmax(320px,1.15fr) minmax(240px,1fr);min-width:0;min-height:0;display:grid}.advanced-controls__header{gap:var(--space-12);justify-content:space-between;align-items:center;min-width:0;display:flex}.advanced-controls__title{color:var(--clr-text);font:var(--font-ui-heading)}.advanced-controls__smart-recolor{gap:var(--space-8);min-width:max-content;color:var(--clr-text-muted);cursor:pointer;font:var(--font-ui-label);align-items:center;display:inline-flex}.advanced-controls__smart-recolor input{width:var(--space-16);height:var(--space-16);accent-color:var(--clr-accent);margin:0}.advanced-controls__left{gap:var(--space-12);grid-template-rows:auto minmax(0,1fr);align-content:stretch;min-height:0;display:grid}.advanced-top-row{grid-template-columns:calc(var(--space-48) + var(--space-8)) minmax(0, 1fr);gap:var(--space-8);min-width:0;min-height:var(--space-48);align-items:stretch;display:grid}.advanced-text-input{min-width:0;min-height:var(--space-48);grid-template-columns:minmax(0,1fr);display:grid}.advanced-text-input input{min-height:var(--space-48)}.advanced-asset-row{grid-template-columns:calc(var(--space-48) + var(--space-8)) minmax(var(--space-48), 1fr);gap:var(--space-8);align-items:stretch;min-width:0;min-height:0;display:grid}.advanced-asset-row .field{gap:var(--space-4);align-content:start}.advanced-color-field{min-height:0}.advanced-preview-stack{gap:var(--space-12);grid-template-rows:1fr auto;min-width:0;min-height:0;display:grid}.color-control{grid-template-columns:minmax(calc(var(--space-48) * 3), calc(var(--space-48) * 4)) minmax(calc(var(--space-48) * 4), 1.2fr);gap:var(--space-16);align-items:stretch;min-width:0;min-height:0;display:grid}.color-control__visuals{align-items:start;min-width:0;min-height:0;display:grid}.color-control__pad{aspect-ratio:1;width:100%;min-height:calc(var(--space-48) * 2);border:1px solid var(--clr-border);border-radius:var(--space-8);background:linear-gradient(to top, var(--clr-picker-dark), transparent), linear-gradient(to right, var(--clr-picker-light), transparent), var(--color-control-hue);box-shadow:inset 0 0 0 1px var(--clr-edge-shadow);cursor:crosshair;position:relative}.color-control__dot{left:var(--color-control-saturation);top:var(--color-control-value);width:var(--space-16);height:var(--space-16);border:2px solid var(--clr-text-on-primary);box-shadow:0 0 0 1px var(--clr-edge-shadow);border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.color-control__hue{appearance:none;width:100%;min-width:0;height:var(--space-20);border-radius:var(--space-8);accent-color:var(--clr-accent);cursor:pointer;background:0 0}.color-control__hue::-webkit-slider-runnable-track{height:var(--space-8);border-radius:var(--space-8);background:linear-gradient(90deg, var(--clr-hue-red), var(--clr-hue-yellow), var(--clr-hue-green), var(--clr-hue-cyan), var(--clr-hue-blue), var(--clr-hue-magenta), var(--clr-hue-red))}.color-control__hue::-webkit-slider-thumb{appearance:none;width:var(--space-16);height:var(--space-16);margin-top:calc(var(--space-4) * -1);border:2px solid var(--clr-text-on-primary);background:var(--color-control-hue);box-shadow:0 0 0 1px var(--clr-edge-shadow);border-radius:50%}.color-control__hue::-moz-range-track{height:var(--space-8);border-radius:var(--space-8);background:linear-gradient(90deg, var(--clr-hue-red), var(--clr-hue-yellow), var(--clr-hue-green), var(--clr-hue-cyan), var(--clr-hue-blue), var(--clr-hue-magenta), var(--clr-hue-red))}.color-control__hue::-moz-range-thumb{width:var(--space-16);height:var(--space-16);border:2px solid var(--clr-text-on-primary);background:var(--color-control-hue);box-shadow:0 0 0 1px var(--clr-edge-shadow);border-radius:50%}.color-control__inputs{gap:var(--space-12);align-content:space-between;min-width:0;min-height:100%;display:grid}.color-control__value-group{grid-template-rows:repeat(2, var(--space-48));gap:var(--space-8);min-width:0;display:grid}.color-control__rgb-row,.color-control__hex-row,.color-control__hue-row{gap:var(--space-8);grid-template-columns:var(--space-32) minmax(0, 1fr);align-items:center;min-width:0;display:grid}.color-control__hue-row{grid-template-columns:var(--space-32) minmax(0, 1fr) var(--space-40)}.color-control__hex-row input{height:var(--space-48);min-height:var(--space-48)}.color-control__rgb-group{min-width:0;height:var(--space-48);min-height:var(--space-48);padding:0 var(--space-8);border:1px solid var(--clr-border);border-radius:var(--space-4);background:var(--clr-surface-raised);grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr) max-content minmax(0,1fr);align-items:center;gap:0;display:grid}.color-control__hue-row{min-height:var(--space-48);padding:var(--space-8) 0}.color-control__eyedropper{width:var(--space-40);height:var(--space-40);min-height:var(--space-40);border:1px solid var(--clr-border);border-radius:var(--space-4);background:var(--clr-surface-raised)}.color-control__eyedropper svg{width:var(--space-16);height:var(--space-16);color:var(--clr-text-muted)}.color-control__rgb-row>span,.color-control__hex-row>span,.color-control__hue-row>span,.color-control__rgb-separator{color:var(--clr-text-muted);font:var(--font-ui-label);white-space:nowrap}.color-control__rgb-slot{justify-content:center;align-items:center;min-width:0;display:grid}.color-control__rgb-separator{width:var(--space-12);place-items:center;display:grid}.field .color-control__rgb-group input:not([type=color]):not([type=range]){width:calc(var(--space-48) - var(--space-16));min-width:0;min-height:calc(var(--space-32) + var(--space-4));color:var(--clr-text);text-align:right;background:0 0;border:0;padding:0}.field .color-control__rgb-group input:not([type=color]):not([type=range]):focus-visible{outline:0}.variant-options{gap:var(--space-8);grid-template-columns:repeat(2,minmax(0,1fr));place-items:stretch stretch;min-width:0;min-height:0;display:grid}.advanced-preview-empty{grid-area:1/1/-1/-1;width:100%;min-height:100%}.variant-card{gap:var(--space-8);width:100%;min-width:0;height:100%;min-height:calc(var(--space-48) + var(--space-24));padding:var(--space-8);border:1px solid var(--clr-border);border-radius:var(--space-8);background:var(--clr-card);color:var(--clr-text);cursor:pointer;font:var(--font-ui-label);grid-template-rows:auto minmax(0,1fr);justify-items:center;display:grid}.variant-card[aria-pressed=true]{border-color:var(--clr-border-strong);background:var(--clr-accent-soft)}.variant-card img{width:100%;max-height:var(--space-48);object-fit:contain;grid-row:2;align-self:center}.variant-card span{text-overflow:ellipsis;white-space:nowrap;grid-row:1;overflow:hidden}.add-frame{width:100%}@media (max-width:1120px){.advanced-controls__body{grid-template-columns:1fr}}@media (max-width:640px){.advanced-controls,.advanced-controls__body,.color-control{grid-template-columns:1fr}}
.search-panel{gap:var(--space-8);min-width:0;min-height:0;padding:var(--space-16) var(--space-16) 0;grid-template-rows:auto minmax(0,1fr);display:grid}.search-shell{gap:var(--space-12);min-height:var(--space-48);padding:0 var(--space-12);border:1px solid var(--clr-border);border-radius:var(--space-8);background:var(--clr-surface-raised);color:var(--clr-text-muted);grid-template-columns:minmax(0,1fr) max-content;align-items:center;display:grid}.search-shell:focus-within{outline:2px solid var(--clr-accent)}.search-field__input{grid-template-columns:var(--space-24) minmax(0, 1fr);gap:var(--space-12);align-items:center;min-width:0;display:grid}.search-shell input{min-width:0;min-height:var(--space-40);color:var(--clr-text);font:var(--font-ui-control);background:0 0;border:0}.search-shell input::placeholder{color:var(--clr-text);opacity:.56}.search-shell input:focus-visible{outline:0}.search-actions{gap:var(--space-8);justify-content:flex-end;align-items:center;min-width:0;display:inline-flex}.powered-by{font:var(--font-ui-control);color:var(--clr-text-muted);white-space:nowrap;text-decoration:none}.powered-by span{text-decoration:underline}.brand-results{scrollbar-width:none;height:100%;min-height:0;box-shadow:inset 0 var(--space-8) var(--space-8) calc(var(--space-8) * -1) var(--clr-surface), inset 0 calc(var(--space-8) * -1) var(--space-8) calc(var(--space-8) * -1) var(--clr-surface);overflow:auto}.brand-results::-webkit-scrollbar{display:none}.brand-results__canvas{gap:var(--space-8);min-height:100%;padding-bottom:var(--space-16);grid-template-columns:repeat(auto-fill,minmax(128px,1fr));align-content:start;display:grid}.brand-result{border:1px solid var(--clr-border);border-radius:var(--space-8);background:var(--clr-card);min-height:128px;color:var(--clr-text);cursor:pointer;text-align:center;grid-template-rows:2fr 1fr;place-items:center;padding:0;display:grid}.brand-result[aria-current=true]{border-color:var(--clr-border-strong);background:var(--clr-accent-soft)}.brand-result img{width:var(--space-48);height:var(--space-48);object-fit:contain;grid-row:1}.brand-result span,.brand-result small{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.brand-result span{font:var(--font-ui-caption);grid-row:2;align-self:stretch;place-items:center;display:grid}.brand-result small{color:var(--clr-text-muted);font:var(--font-ui-label)}.search-empty{grid-column:1/-1;min-height:100%}@media (max-width:1120px){.brand-results{max-height:calc(var(--space-48) * 8)}}@media (max-width:640px){.brand-results{grid-template-columns:1fr}.search-shell{gap:var(--space-8);padding:0 var(--space-8);grid-template-columns:minmax(0,1fr) max-content}.search-actions{justify-content:end}}
.topbar{gap:var(--space-8);min-height:var(--space-48);padding:var(--space-8) var(--space-8) var(--space-8) var(--space-16);grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;display:grid}.brand-cluster{gap:var(--space-12);justify-self:start;align-items:center;min-width:0;display:inline-flex}.brand-badge{gap:var(--space-12);min-height:var(--space-32);color:var(--clr-text);font:var(--font-ui-heading);justify-self:start;align-items:center;display:inline-flex}.brand-badge__word{min-height:var(--space-36);font-family:var(--ff-logo);font-size:var(--fs-wordmark);font-weight:var(--fw-bold);align-items:center;line-height:1;display:inline-flex}.brand-badge__icon,.brand-badge__icon img{width:var(--space-36);height:var(--space-36)}.brand-badge__icon{color:var(--clr-brand);place-items:center;display:grid}.brand-badge__icon img{margin-top:calc(var(--space-4) * -1)}.topbar-actions{gap:var(--space-8);justify-content:end;align-items:center;min-width:0;display:inline-flex}.topbar-start-button{min-height:var(--space-36);justify-self:center}.preference-menu{min-width:calc(var(--space-48) * 2 + var(--space-40));position:relative}.preference-trigger{grid-template-columns:var(--space-16) max-content var(--space-16);gap:var(--space-8);width:100%;min-height:var(--space-32);padding:0 var(--space-12);border:1px solid var(--clr-border);border-radius:var(--space-4);background:var(--clr-surface-raised);color:var(--clr-text);cursor:pointer;font:var(--font-ui-label);justify-content:space-between;align-items:center;display:grid}.preference-trigger svg{color:var(--clr-text-muted)}.preference-trigger span{text-align:center;white-space:nowrap}.preference-options{top:calc(100% + var(--space-8));z-index:5;gap:var(--space-4);width:100%;padding:var(--space-4);border:1px solid var(--clr-border);border-radius:var(--space-8);background:var(--clr-surface);box-shadow:0 var(--space-8) var(--space-24) var(--clr-edge-shadow);display:grid;position:absolute;right:0}.preference-option{min-height:var(--space-32);padding:0 var(--space-12);border-radius:var(--space-4);color:var(--clr-text);cursor:pointer;font:var(--font-ui-label);text-align:left;white-space:nowrap;background:0 0}.preference-option:hover,.preference-option:focus-visible,.preference-option[aria-checked=true]{background:var(--clr-accent-soft)}.github-link{gap:var(--space-8);width:auto;min-width:0;min-height:var(--space-32);padding:0 var(--space-8);position:relative;overflow:visible}.github-star-bubble{gap:var(--space-4);min-width:var(--space-48);height:var(--space-32);padding:0 var(--space-8);border:1px solid var(--clr-border);border-radius:var(--space-4);background:var(--clr-surface-raised);color:var(--clr-text);font:var(--font-ui-label);white-space:nowrap;grid-template-columns:auto auto;justify-content:center;align-items:center;line-height:1;display:inline-grid;position:relative}.github-star-bubble:after{top:50%;left:calc(var(--space-4) * -1);width:var(--space-8);height:var(--space-8);border-bottom:1px solid var(--clr-border);border-left:1px solid var(--clr-border);background:var(--clr-surface-raised);content:"";position:absolute;transform:translateY(-50%)rotate(45deg)}.github-link .github-star-bubble svg{width:var(--space-16);height:var(--space-16);color:var(--clr-accent-strong)}@media (max-width:640px){.topbar{gap:var(--space-8);min-height:0;padding:var(--space-8) var(--space-16);grid-template-columns:1fr}.brand-cluster,.topbar-start-button,.topbar-actions{width:100%}.brand-cluster{justify-content:space-between}.topbar-actions{justify-content:stretch}.topbar-start-button{justify-self:stretch}.preference-menu{flex:1 1 0;min-width:0}}
.confirm-backdrop{z-index:10;padding:var(--space-16);background:var(--clr-backdrop);place-items:center;display:grid;position:fixed;inset:0}.confirm-dialog{gap:var(--space-16);width:min(100%,360px);padding:var(--space-16);border:1px solid var(--clr-border);border-radius:var(--space-8);background:var(--clr-surface);display:grid}.source-dialog{width:min(100%, calc(var(--space-48) * 14))}.dialog-close-button{width:var(--space-32);height:var(--space-32);min-height:var(--space-32);justify-self:end}.source-dialog__field textarea{width:100%;padding:var(--space-12);border:1px solid var(--clr-border);border-radius:var(--space-4);background:var(--clr-surface-raised);color:var(--clr-text);font:var(--font-ui-code);min-height:calc(var(--space-48) * 7)}.source-dialog__upload{cursor:pointer}.confirm-dialog p{color:var(--clr-text);font:var(--font-ui-caption)}.confirm-dialog__actions{gap:var(--space-8);grid-template-columns:1fr 1fr;display:grid}
.frames{gap:var(--space-12);min-width:0;min-height:0;padding:var(--space-16);border:0;border-radius:0;grid-template-rows:auto minmax(0,1fr);align-content:stretch;display:grid;overflow:hidden}.frame-list{gap:var(--space-12);scrollbar-color:var(--clr-scrollbar-thumb) var(--clr-scrollbar-track);scrollbar-width:thin;min-height:0;box-shadow:inset 0 var(--space-4) var(--space-4) calc(var(--space-4) * -1) var(--clr-edge-shadow-light), inset 0 calc(var(--space-4) * -1) var(--space-4) calc(var(--space-4) * -1) var(--clr-edge-shadow-light);align-content:start;display:grid;overflow:auto}.frame-list::-webkit-scrollbar{width:var(--space-8);height:var(--space-8)}.frame-list::-webkit-scrollbar-track{background:var(--clr-scrollbar-track)}.frame-list::-webkit-scrollbar-thumb{border-radius:var(--space-8);background-color:var(--clr-scrollbar-thumb);background-clip:content-box;border:2px solid #0000}.frame-list::-webkit-scrollbar-thumb:hover{background-color:var(--clr-scrollbar-thumb-hover)}.frame-list--empty{align-content:stretch}.frame-list__empty{min-height:100%}.frame-card{grid-template-columns:var(--space-24) minmax(0, 1fr) var(--space-32);gap:var(--space-8);min-height:var(--space-48);padding:var(--space-4) var(--space-8);border-radius:var(--space-8);border:1px solid #0000;align-items:center;transition:opacity .12s,transform .12s,box-shadow .12s;animation:.18s both slide-frame;display:grid;position:relative}.frame-card[aria-current=true]{border-color:var(--clr-border-strong);background:var(--clr-accent-soft)}.frame-card__drag-handle{width:var(--space-24);height:var(--space-32);border-radius:var(--space-4);color:var(--clr-text-muted);cursor:grab;background:0 0;place-items:center;display:grid}.frame-card[data-dragging=true] .frame-card__drag-handle{cursor:grabbing}.frame-card[data-dragging=true]{border-color:var(--clr-border-strong);background:var(--clr-surface-raised);box-shadow:0 var(--space-8) var(--space-24) var(--clr-edge-shadow);opacity:.72;transform:scale(.98)}.frame-card[data-insert-position]:before{right:var(--space-8);left:var(--space-8);height:var(--space-4);border-radius:var(--space-4);background:var(--clr-accent);content:"";position:absolute}.frame-card[data-insert-position=before]:before{top:calc((var(--space-8) + var(--space-4)) * -1)}.frame-card[data-insert-position=after]:before{bottom:calc((var(--space-8) + var(--space-4)) * -1)}.frame-card__edit{min-width:0;min-height:var(--space-32);cursor:pointer;background:0 0;padding:0;display:grid}.frame-card__edit img{object-fit:contain;justify-self:start;max-width:100%;height:28px}.frame-card__actions{grid-template-columns:var(--space-32);justify-self:end;display:grid}.frame-card__button{width:var(--space-32);height:var(--space-32);border-radius:var(--space-8);color:var(--clr-text);cursor:pointer;background:0 0;place-items:center;display:grid}@keyframes slide-frame{0%{opacity:0;transform:translateX(var(--space-16))}to{opacity:1;transform:translate(0)}}@media (max-width:1120px){.frame-list{max-height:calc(var(--space-48) * 8)}}@media (max-width:640px){.frames{min-height:calc(var(--space-48) * 5)}}
.output{gap:var(--space-12);min-width:0;min-height:0;padding:var(--space-16);border:0;border-top:1px solid var(--clr-border);border-radius:0;grid-template-rows:auto minmax(0,1fr);align-content:stretch;display:grid;overflow:visible}.output__showcase{gap:var(--space-12);grid-template-rows:minmax(0,1fr) auto;width:100%;height:100%;min-height:0;display:grid}.preview{border-radius:var(--space-4);background:0 0;place-items:center;min-height:0;display:grid}.preview img{width:min(100%, calc(var(--space-48) * 4));object-fit:contain;max-width:100%;max-height:100%}.output-heading-actions{gap:var(--space-8);justify-content:end;align-items:center;min-width:0;display:inline-flex}.output-animation-menu{min-width:calc(var(--space-48) * 2 + var(--space-24))}.settings-popover{bottom:calc(100% + var(--space-8));z-index:4;gap:var(--space-12);width:min(calc(100vw - var(--space-32)), calc(var(--space-48) * 6));padding:var(--space-12);border:1px solid var(--clr-border);border-radius:var(--space-8);background:var(--clr-surface);box-shadow:0 var(--space-8) var(--space-24) var(--clr-edge-shadow);display:grid;position:absolute;right:0}.settings-value-row{gap:var(--space-8);grid-template-columns:minmax(0,1fr) max-content;align-items:center;display:grid}.settings-value-row input{width:100%;min-width:0;min-height:var(--space-40);padding:0 var(--space-12);border:1px solid var(--clr-border);border-radius:var(--space-4);background:var(--clr-surface-raised);color:var(--clr-text);font:var(--font-ui-control)}.settings-value-row span{color:var(--clr-text-muted);font:var(--font-ui-label);white-space:nowrap}.settings-value-field{gap:var(--space-8);min-width:0;display:grid}.settings-value-field>span:first-child{color:var(--clr-text);font:var(--font-ui-label);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview span{width:min(220px,100%);color:var(--clr-text-muted);font:var(--font-ui-caption);text-align:center;text-wrap:balance}.output__actions{gap:var(--space-8);grid-template-columns:1fr;display:grid}@media (max-width:640px){.output{min-height:calc(var(--space-48) * 5)}}