:root{--brand-50:#f1f8f6;--brand-100:#e1f0ec;--brand-200:#c5e1da;--brand-300:#9bcbc0;--brand-400:#68aa9c;--brand-500:#43877a;--brand-600:#2f6f64;--brand-700:#245a52;--brand-800:#204942;--brand-900:#1d3d38;--page-background:#f7f6f2;--surface-primary:#fff;--surface-secondary:#faf8f2;--surface-tertiary:#f1eee5;--text-primary:#1f2926;--text-secondary:#56615d;--text-tertiary:#77817d;--text-disabled:#a1aaa6;--border-default:#ded9ce;--border-strong:#c8c0b1;--border-subtle:#ece8df;--success:#247451;--success-background:#e9f6ef;--warning:#9a6700;--warning-background:#fff4d6;--danger:#b42318;--danger-background:#fdecea;--info:#3567a8;--info-background:#ebf3fc;--accent:#e9785c;--accent-soft:#fcece7;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-small:8px;--radius-medium:12px;--radius-large:16px;--radius-extra-large:20px;--radius-pill:999px;--shadow-small:0 1px 2px #1f29260f;--shadow-medium:0 6px 20px #1f292614;--shadow-large:0 18px 50px #1f29261f;--duration-fast:.12s;--duration-standard:.18s;--duration-panel:.24s;--ease-standard:cubic-bezier(.2, 0, 0, 1);--control-height-desktop:44px;--control-height-mobile:48px;--minimum-touch-target:44px}*{box-sizing:border-box}html{background:var(--page-background);min-width:320px}body{min-width:320px;min-height:100vh;color:var(--text-primary);background:var(--page-background);font-synthesis:none;text-rendering:optimizelegibility;margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5}button,input,select,textarea{font:inherit}input,select,textarea{font-size:16px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brand-600);outline-offset:2px}.numeric-summary{font-variant-numeric:tabular-nums}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app-root{min-height:100vh;container:poparooz-app/inline-size}.app-header{border-bottom:1px solid var(--border-subtle);background:#ffffffc2}.app-header__inner,.page-frame{width:100%;max-width:1680px;padding-inline:var(--space-4);margin-inline:auto}.app-header__inner{gap:var(--space-1) var(--space-4);min-height:68px;padding-block:var(--space-2);grid-template-areas:"identity""progress""privacy";display:grid}.app-header__identity{grid-area:identity;align-items:center;min-width:0;display:flex}.app-header__logo{object-fit:contain;width:auto;max-width:100%;height:50px;display:block}.app-header__privacy{color:var(--text-tertiary);grid-area:privacy;margin:0;font-size:.8125rem}.app-progress{gap:var(--space-1) var(--space-2);min-width:0;color:var(--text-secondary);letter-spacing:.02em;flex-wrap:wrap;grid-area:progress;align-items:center;margin:0;padding:0;font-size:.75rem;font-weight:700;list-style:none;display:flex}.app-progress li+li:before{margin-right:var(--space-2);color:var(--border-strong);content:"→"}.page-frame{padding-block:var(--space-3) var(--space-6)}.workspace-shell{gap:var(--space-5);grid-template-areas:"lifecycle""settings""canvas""results";align-items:start;display:grid}.workspace-shell__settings{grid-area:settings}.workspace-shell__canvas{grid-area:canvas;min-width:0}.workspace-shell__results{grid-area:results}.workspace-shell__results>.panel__body{gap:var(--space-2);display:grid}.panel{min-width:0;padding:var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-medium);box-shadow:var(--shadow-small);background:#fffefa}.panel--canvas{border-color:var(--border-strong);min-height:420px;box-shadow:var(--shadow-small)}.panel__eyebrow{margin:0 0 var(--space-1);color:var(--brand-700);letter-spacing:.1em;text-transform:uppercase;font-size:.75rem;font-weight:800}.panel__title{color:var(--brand-900);letter-spacing:-.01em;margin:0;font-size:1.25rem;line-height:1.3}.panel__body{margin-top:var(--space-3);color:var(--text-secondary)}.panel__body>:first-child{margin-top:0}.panel__body>:last-child{margin-bottom:0}.empty-state{height:100%;min-height:200px;padding:var(--space-4);border:1px dashed var(--border-strong);border-radius:var(--radius-medium);background:linear-gradient(145deg, #fffdf8, var(--surface-secondary));text-align:center;place-content:center;display:grid}.empty-state h3,.results-empty-state h3{color:var(--text-primary);margin:0;font-size:1rem}.empty-state__icon,.results-empty-state__icon,.image-upload__icon{color:var(--text-disabled);font-size:1.75rem;line-height:1}.empty-state__icon,.results-empty-state__icon{margin-bottom:var(--space-3)}.empty-state p,.results-empty-state p{margin:var(--space-2) 0 0}.results-empty-state{gap:var(--space-4);text-align:center;grid-template-rows:minmax(0,1fr) auto;height:100%;min-height:280px;padding:0;display:grid}.results-empty-state__message{padding:var(--space-6) var(--space-3);align-content:center;justify-items:center;display:grid}.results-empty-state__message p{max-width:28ch}.results-empty-state__action{white-space:nowrap;width:100%;min-height:44px}.pattern-canvas{gap:var(--space-2);min-height:0;display:grid}.pattern-canvas__topbar{gap:var(--space-2);display:grid}.pattern-canvas__meta{color:var(--text-tertiary);font-variant-numeric:tabular-nums;margin:0;font-size:.8125rem}.canvas-toolbar{gap:var(--space-1) var(--space-2);max-width:100%;display:grid}.canvas-toolbar .button{flex:none}.canvas-toolbar__primary,.canvas-toolbar__secondary,.canvas-toolbar__views{gap:var(--space-2);flex-wrap:wrap;align-items:center;min-width:0;display:flex}.canvas-toolbar__primary{width:100%}.canvas-toolbar__views{flex:auto}.canvas-toolbar__views .button[aria-pressed=true]{color:#fff;border-color:var(--brand-600);background:var(--brand-600)}.canvas-toolbar__zoom{min-width:64px;color:var(--text-primary);font-variant-numeric:tabular-nums;text-align:center;font-weight:700}.canvas-toolbar__more{justify-self:start}.canvas-toolbar__secondary{padding:var(--space-2);border:1px solid var(--border-default);border-radius:var(--radius-medium);background:#f7f4ec}.pattern-canvas__viewport{border:1px solid var(--border-default);border-radius:var(--radius-medium);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#f6f3eb;width:100%;height:clamp(280px,52vh,720px);min-height:280px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #fff9}.pattern-canvas__viewport--code{aspect-ratio:1;justify-self:center;width:min(100%,720px);height:auto;min-height:0}.pattern-canvas__viewport:active{cursor:grabbing}.pattern-canvas__viewport canvas{width:100%;height:100%;display:block}.pattern-canvas__help{color:var(--text-tertiary);margin:0;font-size:.875rem}.canvas-view-error{min-height:280px;padding:var(--space-6);border:1px solid var(--border-default);border-radius:var(--radius-medium);color:var(--danger);background:var(--surface-secondary);text-align:center;place-content:center;display:grid}.summary-section+.summary-section{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}.summary-section h3{margin:0 0 var(--space-2);color:var(--text-primary);letter-spacing:.04em;font-size:.875rem}.summary-section p{margin:0}.pattern-results{gap:var(--space-2);display:grid}.result-recommendation{padding:var(--space-2) var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-small);background:#fffdf8;box-shadow:0 2px 10px #3f35240d}.result-recommendation h3{margin:var(--space-1) 0 0;color:var(--text-primary);letter-spacing:.04em;font-size:.875rem}.result-recommendation__badge{padding:.125rem var(--space-2);color:var(--brand-900);background:var(--warning-background);letter-spacing:.03em;border-radius:999px;font-size:.75rem;font-weight:700;display:inline-flex}.result-recommendation__value{margin:var(--space-2) 0 0;color:var(--brand-900);font-size:1.125rem;font-weight:800}.result-recommendation__support,.result-recommendation__unavailable{margin:var(--space-1) 0 0;color:var(--text-secondary);font-size:.8125rem;line-height:1.35}.result-recommendation__alternative{margin:var(--space-2) 0 0;padding-top:var(--space-2);border-top:1px solid var(--border-subtle);color:var(--text-secondary);gap:2px;font-size:.8125rem;line-height:1.3;display:grid}.result-section+.result-section{padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}.result-section h3,.result-section__heading h3{color:var(--text-primary);letter-spacing:.04em;margin:0;font-size:.875rem}.result-section__heading{gap:var(--space-3);justify-content:space-between;align-items:baseline;display:flex}.result-section__heading span,.result-secondary{color:var(--text-tertiary);font-size:.875rem}.pattern-summary-list{margin:var(--space-2) 0 0;gap:0;display:grid}.pattern-summary-list div{gap:var(--space-3);padding-block:var(--space-1);border-bottom:1px solid var(--border-subtle);justify-content:space-between;display:flex}.pattern-summary-list div:last-child{border-bottom:0}.pattern-summary-list dt{color:var(--text-secondary)}.pattern-summary-list dd,.color-row__count,.board-layout__count{color:var(--text-primary);font-variant-numeric:tabular-nums;margin:0;font-weight:700}.result-secondary{margin:var(--space-2) 0 0}.color-list{margin:var(--space-1) 0 0;gap:0;max-height:min(52vh,720px);padding:0;list-style:none;display:grid;overflow-y:auto}.color-list__header{gap:var(--space-2);margin-top:var(--space-2);padding-inline:var(--space-1);color:var(--text-tertiary);letter-spacing:.03em;grid-template-columns:24px minmax(0,1fr) auto;align-items:end;font-size:.6875rem;font-weight:700;display:grid}.color-list__header span:last-child{text-align:right}.color-highlight-status{gap:var(--space-2) var(--space-3);min-width:0;margin-top:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--brand-500);border-radius:var(--radius-medium);background:var(--brand-50);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.color-highlight-status .button{min-height:var(--minimum-touch-target)}.color-row{gap:var(--space-2);width:100%;min-height:var(--minimum-touch-target);min-width:0;padding:5px var(--space-1);border:0;border-bottom:1px solid var(--border-subtle);color:inherit;text-align:left;background:#fffdf9;border-radius:0;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;display:grid}.color-row[aria-pressed=true]{box-shadow:inset 3px 0 0 var(--brand-500);background:var(--brand-50)}@media (hover:hover){.color-row:hover{border-color:var(--border-default);background:var(--surface-secondary)}.button--primary:not(:disabled):hover{background:var(--brand-700)}.button--secondary:not(:disabled):hover{border-color:var(--brand-400);background:var(--brand-100)}}.color-row__swatch{border:1px solid var(--border-strong);border-radius:var(--radius-small);width:20px;height:20px}.color-row__identity{min-width:0;color:var(--text-secondary);font-size:.875rem;display:grid}.color-row__identity strong{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.color-row__identity span{overflow-wrap:anywhere}.color-row__identity .color-row__selected{color:var(--brand-800);font-weight:700}.color-row__count{white-space:nowrap;font-size:.875rem}.color-list__toggle{width:100%;margin-top:var(--space-1)}.board-layout__count{margin-top:var(--space-3)}.board-layout-preview{width:100%;max-height:240px;margin:var(--space-3) 0 0;border:1px solid var(--border-strong);border-radius:var(--radius-medium);background-color:var(--surface-secondary);overflow:hidden}.board-layout-preview--tiles{grid-template-columns:repeat(var(--board-preview-columns), minmax(3px, 1fr));aspect-ratio:var(--board-preview-columns) / var(--board-preview-rows);padding:var(--space-1);gap:2px;list-style:none;display:grid}.board-layout-preview--tiles li{border:1px solid var(--brand-300);background:var(--brand-50);border-radius:2px;min-width:0;min-height:3px}.board-layout-preview--compressed{aspect-ratio:var(--board-preview-columns) / var(--board-preview-rows);min-height:120px;padding:var(--space-4);background-image:linear-gradient(to right, var(--border-subtle) 1px, transparent 1px), linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);background-size:calc(100% / var(--board-preview-columns)) calc(100% / var(--board-preview-rows));place-items:center;display:grid}.board-layout-preview--compressed span{padding:var(--space-2) var(--space-3);border-radius:var(--radius-small);color:var(--text-secondary);background:var(--surface-primary);text-align:center;font-size:.875rem}.result-retention-status,.result-view-error{padding:var(--space-3);border-radius:var(--radius-small);background:var(--surface-secondary);margin:0;font-size:.875rem}.result-view-error{color:var(--danger)}.pattern-actions{gap:var(--space-2);display:grid}.pattern-actions__availability,.pattern-actions__scope,.pattern-actions__download-status{color:var(--text-secondary);font-size:.875rem}.pattern-actions__scope{padding:var(--space-3);border-radius:var(--radius-small);background:var(--surface-secondary)}.pattern-actions__buttons{gap:var(--space-3);grid-template-columns:minmax(0,1fr);display:grid}.pattern-action{gap:var(--space-1);min-width:0;display:grid}.pattern-action__button{white-space:nowrap;width:100%;min-height:44px}.pattern-action__button.button--primary:disabled{border-color:var(--border-strong);background:var(--surface-secondary)}.pattern-action__note{color:var(--text-tertiary);text-align:center;margin:0;font-size:.875rem}.pattern-actions__download-status{text-align:center;margin:0}.button{min-width:var(--minimum-touch-target);min-height:var(--control-height-mobile);padding:var(--space-2) var(--space-4);border-radius:var(--radius-medium);transition:background-color var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard);border:1px solid #0000;justify-content:center;align-items:center;font-weight:700;display:inline-flex}.button--primary{color:#fff;background:var(--brand-600);box-shadow:0 2px 6px #1d3d3829}.button--secondary{color:var(--brand-800);border-color:var(--brand-300);background:var(--brand-50)}.button--tertiary{color:var(--brand-700);background:0 0}.button:disabled{color:var(--text-disabled);border-color:var(--border-default);background:var(--surface-tertiary);cursor:not-allowed}.settings-region-content{gap:var(--space-3);display:grid}.image-upload{gap:var(--space-2);padding:var(--space-4) var(--space-3);border:1px dashed var(--border-strong);border-radius:var(--radius-large);text-align:center;transition:border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard);background:#fffdf8;justify-items:center;display:grid}.image-upload--drag-over{border-color:var(--brand-600);background:var(--brand-50)}.image-upload__instructions{gap:2px;margin:0;display:grid}.image-upload__instructions strong{color:var(--text-primary)}.image-upload__instructions small{color:var(--text-tertiary)}.image-upload__button,.image-preview__actions label{cursor:pointer}.image-upload__button{width:100%}.image-upload input:focus-visible+.image-upload__button,.image-preview__actions input:focus-visible+label{outline:3px solid var(--brand-600);outline-offset:2px}.image-preview h3,.pattern-settings h3{margin:0 0 var(--space-3);color:var(--text-primary);font-size:1rem}.image-preview__frame{aspect-ratio:4/3;border:1px solid var(--border-default);border-radius:var(--radius-medium);background:var(--surface-secondary);place-items:center;width:100%;max-height:140px;display:grid;overflow:hidden}.image-preview__frame img{object-fit:contain;width:100%;height:100%;display:block}.image-preview__name{margin:var(--space-2) 0 0;overflow-wrap:anywhere;color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.image-preview__metadata{margin:var(--space-1) 0 0;color:var(--text-tertiary);font-size:.875rem}.image-preview__actions{gap:var(--space-2);margin-top:var(--space-2);display:grid}.pattern-settings{padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}.pattern-size-setting{margin:0 0 var(--space-2);border:0;padding:0}.pattern-size-setting legend{margin-bottom:var(--space-2);color:var(--text-primary);font-weight:700}.pattern-size-selector{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.pattern-size-selector__option{min-width:0;min-height:var(--control-height-desktop);padding:var(--space-2) 2px;border:1px solid var(--border-default);border-radius:var(--radius-small);color:var(--text-secondary);background:#fffdf8;font-size:.75rem;font-weight:700}.pattern-size-selector__option[aria-pressed=true]{color:#fff;border-color:var(--brand-700);background:var(--brand-700)}.pattern-size-selector__option:focus-visible{outline:3px solid var(--brand-600);outline-offset:2px}.settings-grid{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.form-field{gap:var(--space-2);margin-bottom:var(--space-2);display:grid}.form-field label,.background-setting legend{color:var(--text-primary);font-weight:700}.form-field input,.form-field select{width:100%;min-width:0;min-height:var(--control-height-mobile);padding:var(--space-2) var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-medium);color:var(--text-primary);background:var(--surface-primary);box-shadow:inset 0 1px 1px #1f292608}.form-field input[aria-invalid=true],.form-field select[aria-invalid=true]{border-color:var(--danger)}.form-error{color:var(--danger);margin:0;font-size:.875rem}.form-help{margin:var(--space-1) 0 0;color:var(--text-tertiary);font-size:.875rem}.generation-status{gap:var(--space-2);margin-top:var(--space-2);display:grid}.generation-status .button{width:100%}.generation-status p{margin:0}.pattern-settings>.generation-status{gap:var(--space-1);margin-top:var(--space-1)}.pattern-settings>.generation-status .button,.pattern-settings>.generate-placeholder{min-height:44px;box-shadow:none;border-radius:9px}.bead-size-spec{gap:var(--space-3);margin:0 0 var(--space-2);padding:7px var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-small);color:var(--text-secondary);background:#fffdf8;justify-content:space-between;align-items:baseline;font-size:.875rem;display:flex}.bead-size-spec strong{color:var(--text-primary);font-variant-numeric:tabular-nums}.background-setting{gap:var(--space-1);margin:0 0 var(--space-2);border:0;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;display:grid}.background-setting legend{grid-column:1/-1}.background-setting label{border:1px solid var(--border-default);border-radius:var(--radius-small);min-width:0;min-height:52px;color:var(--text-primary);cursor:pointer;background:#fffdf8;align-items:center;padding:6px 8px;display:grid;position:relative}.background-setting input{clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.background-setting label:has(input:checked){border-color:var(--brand-700);background:var(--brand-50);box-shadow:inset 0 0 0 1px var(--brand-700)}.background-setting label:has(input:focus-visible){outline:3px solid var(--brand-600);outline-offset:2px}.background-setting__copy{gap:var(--space-1);display:grid}.background-setting__copy span{color:var(--text-tertiary);font-size:.875rem;font-weight:400}.generate-placeholder{width:100%}@container poparooz-app (width>=768px){.app-header__inner,.page-frame{padding-inline:var(--space-6)}.button,.form-field input,.form-field select{min-height:var(--control-height-desktop)}.app-header__inner{grid-template-columns:auto minmax(0,1fr) minmax(220px,auto);grid-template-areas:"identity progress privacy";align-items:center}.app-progress{justify-content:center}.app-header__privacy{text-align:right;justify-self:end}.image-preview__actions{grid-template-columns:repeat(2,minmax(0,1fr))}}@container poparooz-app (width>=900px) and (width<=1384px){.workspace-shell{grid-template-columns:320px minmax(0,1fr);grid-template-areas:"lifecycle lifecycle""settings canvas"}.workspace-shell--has-results{grid-template-areas:"lifecycle lifecycle""settings canvas""settings results"}.workspace-shell .pattern-canvas__viewport{aspect-ratio:1;height:auto;min-height:0}.pattern-results,.pattern-actions__buttons{grid-template-columns:minmax(0,1fr)}.result-retention-status,.pattern-summary{grid-column:auto}}@container poparooz-app (width<=767px){.app-header__logo{height:38px}.page-frame{padding-block:var(--space-4) var(--space-8)}.workspace-shell{gap:var(--space-4)}.panel{padding:var(--space-4)}.panel__body{margin-top:var(--space-3)}.pattern-canvas__viewport{height:clamp(300px,62vh,560px)}.result-recommendation{padding:var(--space-3)}.color-list__header{display:none}.color-row{grid-template-columns:32px minmax(0,1fr)}.color-row__count{grid-column:2;justify-self:start}}@container poparooz-app (width>=1385px){.workspace-shell{--desktop-workspace-height:clamp(720px, calc(100dvh - 104px), 820px);grid-template-columns:336px minmax(0,1fr) 336px;grid-template-areas:"lifecycle lifecycle lifecycle""settings canvas results";grid-template-rows:auto minmax(var(--desktop-workspace-height), auto);align-items:stretch;gap:16px}.workspace-shell--has-results{grid-template-areas:"lifecycle lifecycle lifecycle""settings canvas results"}.workspace-shell>.panel{min-height:0;padding:var(--space-4);grid-template-rows:auto auto auto;align-content:start;height:100%;display:grid}.workspace-shell:not(.workspace-shell--has-results) .workspace-shell__canvas{grid-template-rows:minmax(0,1fr)}.workspace-shell:not(.workspace-shell--has-results) .workspace-shell__results{grid-template-rows:auto minmax(0,1fr)}.workspace-shell:not(.workspace-shell--has-results) .workspace-shell__canvas>.panel__title{display:none}.workspace-shell__canvas,.workspace-shell__results{overflow:hidden}.workspace-shell>.panel>.panel__body{margin-top:var(--space-2);align-self:start;min-height:0}.workspace-shell:not(.workspace-shell--has-results) .workspace-shell__canvas>.panel__body,.workspace-shell:not(.workspace-shell--has-results) .workspace-shell__results>.panel__body{align-self:stretch;height:100%}.workspace-shell:not(.workspace-shell--has-results) .empty-state{min-height:0}.workspace-shell__settings .image-upload__instructions{font-size:.8125rem;line-height:1.35}.workspace-shell__settings .image-preview h3,.workspace-shell__settings .pattern-settings h3{margin-bottom:var(--space-2)}.workspace-shell__settings .image-preview__frame{max-height:96px}.workspace-shell__settings .image-preview__name,.workspace-shell__settings .image-preview__metadata,.workspace-shell__settings .form-help,.workspace-shell__settings .background-setting__copy span{font-size:.75rem;line-height:1.3}.workspace-shell__settings .form-field{gap:var(--space-1);margin-bottom:6px}.workspace-shell__settings .background-setting{gap:var(--space-1);grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-shell__settings .background-setting legend{grid-column:1/-1}.workspace-shell__settings .background-setting label{grid-template-columns:minmax(0,1fr)}.workspace-shell__settings .background-setting label:has(input:checked){border-color:var(--brand-700);background:var(--brand-50);box-shadow:inset 0 0 0 1px var(--brand-700)}.workspace-shell__settings .background-setting__copy{gap:1px}.workspace-shell__settings .background-setting__copy strong{white-space:nowrap;font-size:.6875rem;line-height:1.15}.workspace-shell__settings .background-setting__copy span{font-size:.6875rem}.workspace-shell .workspace-shell__canvas>.panel__body{width:100%}.workspace-shell .pattern-canvas{grid-template-rows:auto auto auto;align-content:start}.workspace-shell .canvas-toolbar{gap:var(--space-2);align-items:center;display:flex}.workspace-shell .canvas-toolbar__primary{flex-wrap:nowrap;flex:auto;min-width:0}.workspace-shell .canvas-toolbar__views{flex-wrap:nowrap}.workspace-shell .canvas-toolbar__more{flex:none}.workspace-shell .pattern-canvas__viewport{aspect-ratio:1;justify-self:center;width:min(100%,760px);height:auto;min-height:0}.workspace-shell--has-results .workspace-shell__results>.panel__body{grid-template-rows:auto auto;align-content:start}.workspace-shell--has-results .pattern-results{gap:var(--space-2);align-content:start;display:grid}.workspace-shell--has-results .pattern-summary-list div{padding-block:2px}.workspace-shell--has-results .result-recommendation{padding:6px var(--space-2)}.workspace-shell--has-results .result-recommendation__value{margin-top:var(--space-1)}.workspace-shell--has-results .result-recommendation__alternative{margin-top:var(--space-1);padding-top:var(--space-1)}.workspace-shell--has-results .color-list-section{grid-template-rows:auto auto auto auto auto;align-content:start;min-height:0;display:grid}.workspace-shell--has-results .color-list{overscroll-behavior:contain;min-height:0;max-height:168px;overflow-y:auto}.workspace-shell--has-results .pattern-actions{gap:var(--space-1)}.workspace-shell--has-results .pattern-actions__availability,.workspace-shell--has-results .pattern-action__note{display:none}}@supports not (container-type:inline-size){@media (width>=768px){.app-header__inner,.page-frame{padding-inline:var(--space-6)}.button{min-height:var(--control-height-desktop)}.app-header__inner{grid-template-columns:auto minmax(0,1fr) minmax(220px,auto);grid-template-areas:"identity progress privacy";align-items:center}.app-progress{justify-content:center}.app-header__privacy{text-align:right;justify-self:end}.image-preview__actions{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=900px) and (width<=1384px){.workspace-shell{grid-template-columns:320px minmax(0,1fr);grid-template-areas:"lifecycle lifecycle""settings canvas"}.workspace-shell--has-results{grid-template-areas:"lifecycle lifecycle""settings canvas""settings results"}.workspace-shell .pattern-canvas__viewport{aspect-ratio:1;height:auto;min-height:0}.pattern-results,.pattern-actions__buttons{grid-template-columns:minmax(0,1fr)}.result-retention-status,.pattern-summary{grid-column:auto}}@media (width<=767px){.app-header__logo{height:38px}.color-list__header{display:none}.color-row{grid-template-columns:32px minmax(0,1fr)}.color-row__count{grid-column:2;justify-self:start}}@media (width>=1385px){.workspace-shell{--desktop-workspace-height:clamp(720px, calc(100dvh - 104px), 820px);grid-template-columns:336px minmax(0,1fr) 336px;grid-template-areas:"lifecycle lifecycle lifecycle""settings canvas results";grid-template-rows:auto minmax(var(--desktop-workspace-height), auto);align-items:stretch;gap:16px}.workspace-shell--has-results{grid-template-areas:"lifecycle lifecycle lifecycle""settings canvas results"}.workspace-shell>.panel{min-height:0;padding:var(--space-4);grid-template-rows:auto auto auto;align-content:start;height:100%;display:grid}.workspace-shell:not(.workspace-shell--has-results) .workspace-shell__canvas{grid-template-rows:minmax(0,1fr)}.workspace-shell:not(.workspace-shell--has-results) .workspace-shell__results{grid-template-rows:auto minmax(0,1fr)}.workspace-shell:not(.workspace-shell--has-results) .workspace-shell__canvas>.panel__title{display:none}.workspace-shell__canvas,.workspace-shell__results{overflow:hidden}.workspace-shell>.panel>.panel__body{margin-top:var(--space-2);align-self:start;min-height:0}.workspace-shell:not(.workspace-shell--has-results) .workspace-shell__canvas>.panel__body,.workspace-shell:not(.workspace-shell--has-results) .workspace-shell__results>.panel__body{align-self:stretch;height:100%}.workspace-shell:not(.workspace-shell--has-results) .empty-state{min-height:0}.workspace-shell__settings .image-upload__instructions{font-size:.8125rem;line-height:1.35}.workspace-shell__settings .image-preview h3,.workspace-shell__settings .pattern-settings h3{margin-bottom:var(--space-2)}.workspace-shell__settings .image-preview__frame{max-height:96px}.workspace-shell__settings .image-preview__name,.workspace-shell__settings .image-preview__metadata,.workspace-shell__settings .form-help,.workspace-shell__settings .background-setting__copy span{font-size:.75rem;line-height:1.3}.workspace-shell__settings .form-field{gap:var(--space-1);margin-bottom:6px}.workspace-shell__settings .background-setting{gap:var(--space-1);grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-shell__settings .background-setting legend{grid-column:1/-1}.workspace-shell__settings .background-setting label{grid-template-columns:minmax(0,1fr)}.workspace-shell__settings .background-setting label:has(input:checked){border-color:var(--brand-700);background:var(--brand-50);box-shadow:inset 0 0 0 1px var(--brand-700)}.workspace-shell__settings .background-setting__copy{gap:1px}.workspace-shell__settings .background-setting__copy strong{white-space:nowrap;font-size:.6875rem;line-height:1.15}.workspace-shell__settings .background-setting__copy span{font-size:.6875rem}.workspace-shell .workspace-shell__canvas>.panel__body{width:100%}.workspace-shell .pattern-canvas{grid-template-rows:auto auto auto;align-content:start}.workspace-shell .canvas-toolbar{gap:var(--space-2);align-items:center;display:flex}.workspace-shell .canvas-toolbar__primary{flex-wrap:nowrap;flex:auto;min-width:0}.workspace-shell .canvas-toolbar__views{flex-wrap:nowrap}.workspace-shell .canvas-toolbar__more{flex:none}.workspace-shell .pattern-canvas__viewport{aspect-ratio:1;justify-self:center;width:min(100%,760px);height:auto;min-height:0}.workspace-shell--has-results .workspace-shell__results>.panel__body{grid-template-rows:auto auto;align-content:start}.workspace-shell--has-results .pattern-results{gap:var(--space-2);align-content:start;display:grid}.workspace-shell--has-results .pattern-summary-list div{padding-block:2px}.workspace-shell--has-results .result-recommendation{padding:6px var(--space-2)}.workspace-shell--has-results .result-recommendation__value{margin-top:var(--space-1)}.workspace-shell--has-results .result-recommendation__alternative{margin-top:var(--space-1);padding-top:var(--space-1)}.workspace-shell--has-results .color-list-section{grid-template-rows:auto auto auto auto auto;align-content:start;min-height:0;display:grid}.workspace-shell--has-results .color-list{overscroll-behavior:contain;min-height:0;max-height:168px;overflow-y:auto}.workspace-shell--has-results .pattern-actions{gap:var(--space-1)}.workspace-shell--has-results .pattern-actions__availability,.workspace-shell--has-results .pattern-action__note{display:none}}}.workspace-shell__lifecycle{grid-area:lifecycle}.mobile-panel-launchers{gap:var(--space-2);display:grid}.mobile-panel-launcher{width:100%;min-height:48px;padding:var(--space-3) var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-medium);color:var(--text-primary);background:var(--surface-primary);justify-content:space-between;align-items:center;font-weight:700;display:flex}.compact-result-content{gap:var(--space-4);display:grid}.compact-result-content .color-list{max-height:none;overflow:visible}.bottom-sheet-backdrop{z-index:1000;background:#16231f8c;align-items:end;display:grid;position:fixed;inset:0;overflow:hidden}.bottom-sheet-dialog{width:100%;max-width:100vw}.bottom-sheet{--sheet-translate-y:0px;max-height:85dvh;transform:translateY(var(--sheet-translate-y));background:var(--surface-primary);box-shadow:var(--shadow-large);animation:bottom-sheet-enter .24s var(--ease-standard);transition:transform .24s var(--ease-standard);border-radius:20px 20px 0 0;display:grid;overflow:hidden}.bottom-sheet__drag-handle{touch-action:none;place-items:center;min-height:28px;display:grid}.bottom-sheet__drag-handle:before{background:var(--border-strong);content:"";border-radius:999px;width:48px;height:5px}.bottom-sheet__header{gap:var(--space-4);padding:0 var(--space-4) var(--space-3);justify-content:space-between;align-items:center;display:flex}.bottom-sheet__header h2{margin:0;font-size:1.125rem}.bottom-sheet-tabs{padding-inline:var(--space-2);border-block:1px solid var(--border-subtle);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;overflow-x:auto}.bottom-sheet-tabs [role=tab]{min-width:72px;min-height:48px;padding:var(--space-2);color:var(--text-secondary);background:0 0;border:0;border-bottom:3px solid #0000;font-weight:700}.bottom-sheet-tabs [role=tab][aria-selected=true]{border-bottom-color:var(--brand-600);color:var(--brand-800)}.bottom-sheet__content{overscroll-behavior:contain;min-height:0;padding:var(--space-5) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));overflow:auto}.bottom-sheet__content>:first-child{margin-top:0}@keyframes bottom-sheet-enter{0%{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.bottom-sheet{transition-duration:1ms;animation-duration:1ms}}.error-shell{width:min(42rem,100% - 2rem);margin:0 auto;padding:clamp(4rem,14vh,8rem) 0}