: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:#f3f4f1;--surface-tertiary:#ecefea;--text-primary:#1f2926;--text-secondary:#56615d;--text-tertiary:#77817d;--text-disabled:#a1aaa6;--border-default:#d9deda;--border-strong:#bbc4bf;--border-subtle:#e8ebe8;--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:var(--surface-primary)}.app-header__inner,.page-frame{width:100%;max-width:1600px;padding-inline:var(--space-4);margin-inline:auto}.app-header__inner{gap:var(--space-2) var(--space-4);min-height:72px;padding-block:var(--space-3);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.app-header__identity{gap:var(--space-3);align-items:baseline;display:flex}.app-header__wordmark{color:var(--brand-800);letter-spacing:-.02em;font-size:1.25rem;font-weight:800}.app-header__product{color:var(--text-secondary);font-weight:700}.app-header__privacy{color:var(--text-secondary);margin:0;font-size:.875rem}.page-frame{padding-block:var(--space-4) var(--space-8)}.workspace-shell{gap:var(--space-4);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}.panel{min-width:0;padding:var(--space-5);border:1px solid var(--border-default);border-radius:var(--radius-large);background:var(--surface-primary);box-shadow:var(--shadow-small)}.panel--canvas{min-height:420px}.panel__eyebrow{margin:0 0 var(--space-2);color:var(--brand-700);letter-spacing:.1em;text-transform:uppercase;font-size:.75rem;font-weight:800}.panel__title{margin:0;font-size:1.125rem;line-height:1.3}.panel__body{margin-top:var(--space-4);color:var(--text-secondary)}.panel__body>:first-child{margin-top:0}.panel__body>:last-child{margin-bottom:0}.empty-state{min-height:240px;padding:var(--space-6);border:1px dashed var(--border-strong);border-radius:var(--radius-medium);background:var(--surface-secondary);text-align:center;place-content:center;display:grid}.pattern-canvas{gap:var(--space-3);display:grid}.canvas-toolbar{gap:var(--space-2);flex-wrap:wrap;align-items:center;max-width:100%;display:flex}.canvas-toolbar .button{flex:none}.canvas-toolbar__views{gap:var(--space-2);flex:100%;display:flex}.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__hint{color:var(--text-tertiary);flex-basis:100%;font-size:.875rem}.pattern-canvas__viewport{border:1px solid var(--border-default);border-radius:var(--radius-medium);background:var(--surface-secondary);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:clamp(280px,52vh,720px);min-height:280px;position:relative;overflow:hidden}.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-6);padding-top:var(--space-5);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-5);display:grid}.result-section+.result-section{padding-top:var(--space-5);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{gap:var(--space-2);margin:var(--space-3) 0 0;display:grid}.pattern-summary-list div{gap:var(--space-3);justify-content:space-between;display:flex}.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{gap:var(--space-2);margin:var(--space-3) 0 0;max-height:min(52vh,720px);padding:0;list-style:none;display:grid;overflow-y:auto}.color-row{gap:var(--space-3);grid-template-columns:32px minmax(0,1fr) auto;align-items:center;min-width:0;display:grid}.color-row__swatch{border:1px solid var(--border-strong);border-radius:var(--radius-small);width:32px;height:32px}.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__count{white-space:nowrap;font-size:.875rem}.color-list__toggle{width:100%;margin-top:var(--space-3)}.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-3);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);display:grid}.pattern-action{gap:var(--space-2);min-width:0;display:grid}.pattern-action__button{width:100%;min-height:48px}.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)}.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-6);display:grid}.image-upload{gap:var(--space-4);padding:var(--space-6) var(--space-4);border:1px dashed var(--border-strong);border-radius:var(--radius-large);background:var(--surface-secondary);text-align:center;transition:border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard);justify-items:center;display:grid}.image-upload--drag-over{border-color:var(--brand-600);background:var(--brand-50)}.image-upload__instructions{margin:0}.image-upload__button,.image-preview__actions label{cursor:pointer}.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:260px;display:grid;overflow:hidden}.image-preview__frame img{object-fit:contain;width:100%;height:100%;display:block}.image-preview__name{margin:var(--space-3) 0 0;overflow-wrap:anywhere;color:var(--text-primary);font-weight:700}.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-4);display:grid}.pattern-settings{padding-top:var(--space-5);border-top:1px solid var(--border-subtle)}.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-4);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-small);color:var(--text-primary);background:var(--surface-primary)}.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-2) 0 0;color:var(--text-tertiary);font-size:.875rem}.generation-status{gap:var(--space-2);margin-top:var(--space-4);display:grid}.generation-status p{margin:0}.background-setting{gap:var(--space-2);margin:0 0 var(--space-4);border:0;padding:0;display:grid}.background-setting label{min-height:var(--minimum-touch-target);gap:var(--space-2);color:var(--text-primary);align-items:center;display:flex}.background-setting input{width:20px;height:20px;margin:0}.generate-placeholder{width:100%}@container poparooz-app (width>=768px){.app-header__inner,.page-frame{padding-inline:var(--space-6)}.workspace-shell{gap:var(--space-5)}.button{min-height:var(--control-height-desktop)}.pattern-actions__buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.form-field input,.form-field select{min-height:var(--control-height-desktop)}}@container poparooz-app (width>=900px) and (width<=1099px){.settings-region-content,.pattern-results{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-region-content>.form-error,.result-retention-status,.pattern-summary{grid-column:1/-1}}@container poparooz-app (width>=1100px){.workspace-shell{grid-template-columns:280px minmax(0,1fr) 300px;grid-template-areas:"settings canvas results";gap:16px}.pattern-results,.pattern-actions__buttons{grid-template-columns:minmax(0,1fr)}.result-retention-status,.pattern-summary{grid-column:auto}}@container poparooz-app (width<=767px){.color-row{grid-template-columns:32px minmax(0,1fr)}.color-row__count{grid-column:2;justify-self:start}}@container poparooz-app (width>=1440px){.workspace-shell{grid-template-columns:320px minmax(560px,1fr) 340px;gap:20px}}@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)}}@media (width>=900px) and (width<=1099px){.settings-region-content,.pattern-results{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-region-content>.form-error,.result-retention-status,.pattern-summary{grid-column:1/-1}}@media (width>=1100px){.workspace-shell{grid-template-columns:280px minmax(0,1fr) 300px;grid-template-areas:"settings canvas results";gap:16px}.pattern-results,.pattern-actions__buttons{grid-template-columns:minmax(0,1fr)}.result-retention-status,.pattern-summary{grid-column:auto}}@media (width<=767px){.color-row{grid-template-columns:32px minmax(0,1fr)}.color-row__count{grid-column:2;justify-self:start}}@media (width>=1440px){.workspace-shell{grid-template-columns:320px minmax(560px,1fr) 340px;gap:20px}}}.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-5);display:grid}.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(4,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}