:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;background:#eef5f5;font-family:Inter,ui-rounded,SF Pro Rounded,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{overscroll-behavior:none;background:radial-gradient(circle at 12% 8%,#ffd66673,#0000 28%),radial-gradient(circle at 88% 20%,#2ac9bf40,#0000 26%),#eef5f5;min-width:320px}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{width:min(78rem,100%);min-height:100dvh;margin:0 auto;padding:clamp(1rem,3vw,2.5rem)}.app-header{justify-content:space-between;align-items:end;gap:2rem;margin-bottom:clamp(1.25rem,3vw,2rem);display:flex}.eyebrow,.step-label{color:#007b73;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .45rem;font-size:.78rem;font-weight:900}h1,h2,p{margin-top:0}h1{color:#172033;letter-spacing:-.055em;max-width:11ch;margin-bottom:0;font-size:clamp(2rem,5vw,4.25rem);line-height:.98}.intro{color:#50606d;max-width:32rem;margin-bottom:.15rem;font-size:clamp(1rem,2vw,1.15rem);line-height:1.55}.header-actions{justify-items:end;gap:.8rem;display:grid}.gallery-button{color:#172033;cursor:pointer;background:#fff;border:2px solid #172033;border-radius:999px;align-items:center;gap:.7rem;min-height:3.25rem;padding:.65rem .75rem .65rem 1rem;font-weight:850;display:inline-flex}.gallery-button span{color:#fff;background:#172033;border-radius:999px;place-items:center;min-width:2rem;min-height:2rem;display:grid}.drawing-card{-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background:#ffffffb8;border:1px solid #1720331a;border-radius:clamp(1.25rem,3vw,2rem);padding:clamp(.85rem,2vw,1.25rem);box-shadow:0 1.5rem 4rem #26484f24}.canvas-heading{justify-content:space-between;align-items:center;gap:1rem;padding:.35rem .35rem 1rem;display:flex}.canvas-heading h2{color:#172033;margin-bottom:0;font-size:clamp(1.3rem,3vw,2rem)}.workspace{grid-template-columns:minmax(12rem,15rem) minmax(0,1fr);gap:clamp(.85rem,2vw,1.25rem);display:grid}.toolbox{background:#e5eeee;border-radius:1.25rem;flex-direction:column;gap:.8rem;padding:.9rem;display:flex}.control-group{border:0;min-width:0;margin:0;padding:0}.control-group legend{color:#4c5d68;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.55rem;font-size:.76rem;font-weight:900}.segmented-control,.size-picker{gap:.45rem;display:grid}.tool-button,.color-button,.size-button{color:#172033;cursor:pointer;border:2px solid #0000;min-width:3rem;min-height:3rem;font-weight:850}.tool-button{background:#fff;border-radius:.8rem;align-items:center;gap:.6rem;padding:.65rem .8rem;display:flex}.tool-button span{text-align:center;width:1.4rem;font-size:1.25rem}.tool-button[aria-pressed=true],.size-button[aria-pressed=true]{background:#ffd666;border-color:#172033;transform:translateY(-.15rem);box-shadow:0 .25rem #172033}.color-grid{grid-template-columns:repeat(3,minmax(3rem,1fr));gap:.45rem;display:grid}.color-button{background:#fff;border-radius:.8rem;place-items:center;padding:.25rem;display:grid}.color-swatch{border:1px solid #1720332e;border-radius:50%;width:2rem;height:2rem}.color-button[aria-pressed=true]{border-color:#172033;box-shadow:inset 0 0 0 2px #fff}.size-button{text-align:left;background:#fff;border-radius:.8rem;grid-template-columns:1.75rem 1fr;align-items:center;gap:.45rem;padding:.55rem .75rem;display:grid}.size-dot{background:#172033;border-radius:50%;justify-self:center;display:block}.canvas-area{min-width:0}.canvas-toolbar{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.55rem;display:flex}.active-tool{color:#4c5d68;align-items:center;gap:.5rem;min-height:2.4rem;margin-left:.25rem;font-size:.9rem;font-weight:800;display:inline-flex}.history-actions{flex-wrap:wrap;justify-content:end;gap:.4rem;display:flex}.history-actions button{color:#172033;cursor:pointer;background:#fff;border:2px solid #172033;border-radius:.75rem;align-items:center;gap:.4rem;min-height:3rem;padding:.55rem .75rem;font-size:.86rem;font-weight:850;display:inline-flex}.history-actions button span{font-size:1.2rem;line-height:1}.history-actions .clear-button{color:#a11e30;border-color:#b52638}.history-actions button:disabled{color:#7b898f;cursor:not-allowed;opacity:.72;background:#edf1f2;border-color:#aab4bb}.active-tool-swatch{border:2px solid #172033;border-radius:50%;width:1.15rem;height:1.15rem}.canvas-frame{background:#fff;border:clamp(.4rem,1vw,.75rem) solid #172033;border-radius:clamp(1rem,2.5vw,1.6rem);overflow:hidden;box-shadow:inset 0 0 0 1px #17203314}.drawing-canvas{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:min(60dvh,46rem);min-height:22rem;display:block}.drawing-hint{color:#62717c;text-align:center;margin:0;padding:.85rem .45rem .15rem;font-size:.95rem}.download-panel{border-top:2px solid #1720331f;gap:.65rem;margin-top:auto;padding-top:1rem;display:grid}.download-panel>button{width:100%}.flow-card{text-align:center;background:#fff;border:1px solid #1720331f;border-radius:clamp(1.25rem,3vw,2rem);padding:clamp(1.25rem,4vw,2.5rem);box-shadow:0 1.5rem 4rem #1720331f}.flow-card h2{margin:.25rem 0 0}.flow-intro{color:#53646f;max-width:48rem;margin:.85rem auto 1.35rem;line-height:1.55}.preview-image-frame{background:#fff;border:.55rem solid #172033;border-radius:1.4rem;max-width:34rem;margin:0 auto;overflow:hidden}.preview-image-frame img,.result-comparison img{aspect-ratio:1;object-fit:cover;width:100%;display:block}.flow-actions{flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:1.4rem;display:flex}.style-picker{text-align:left;border:0;width:100%;max-width:54rem;margin:.4rem auto;padding:0}.style-picker legend{color:#172033;text-align:center;width:100%;margin-bottom:.75rem;font-weight:850}.style-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;display:grid}.style-option{cursor:pointer;background:#fff;border:2px solid #aab4bb;border-radius:.9rem;align-items:center;gap:.7rem;min-height:5rem;padding:.75rem;display:flex}.style-option:has(input:checked){background:#edf4ff;border-color:#1769e0;box-shadow:inset 0 0 0 1px #1769e0}.style-option input{accent-color:#1769e0;flex:none;width:1.4rem;height:1.4rem}.style-option span,.style-option small{display:block}.style-option small{color:#53646f;margin-top:.2rem;line-height:1.3}.build-button,.secondary-action{min-height:3.5rem;font:inherit;cursor:pointer;border-radius:.9rem;justify-content:center;align-items:center;gap:.65rem;padding:.8rem 1.5rem;font-weight:800;display:inline-flex}.build-button{color:#fff;background:#e66b19;border:2px solid #a94308}.secondary-action{color:#172033;background:#fff;border:2px solid #172033}.build-button:disabled,.secondary-action:disabled{color:#68777d;cursor:not-allowed;background:#dce3e5;border-color:#aab4bb}.workshop-progress{color:#74310b;background:#fff3df;border-radius:1rem;max-width:38rem;margin:1rem auto 0;padding:1rem;font-weight:700}.workshop-progress p{margin:.3rem 0}.workshop-progress .secondary-action{min-height:3rem;margin-top:.65rem;padding-block:.55rem}.elapsed-time{font-variant-numeric:tabular-nums;font-weight:600}.generation-error{color:#8d1b2a;background:#fff1f3;border:2px solid #b52638;border-radius:1rem;max-width:42rem;margin:1rem auto 0;padding:1rem}.generation-error p{margin-top:0;font-weight:750}.progress-gears{margin-right:.45rem;font-size:1.4rem;animation:1.2s linear infinite gear-turn;display:inline-block}.simulation-label{color:#74310b;background:#fff3df;border-radius:999px;margin:.8rem 0 1.4rem;padding:.45rem .8rem;font-weight:800;display:inline-block}.result-comparison{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.85rem,2vw,1.5rem);display:grid}.result-comparison figure{background:#172033;border:.35rem solid #172033;border-radius:1.2rem;margin:0;overflow:hidden}.result-comparison figcaption{color:#fff;padding:.75rem;font-weight:800}.result-share-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;max-width:42rem;margin:1.4rem auto 0;display:grid}.gallery-saved-status{color:#17663a;text-align:center;max-width:48rem;margin:0 auto 1rem;font-weight:700}.gallery-view{background:#fff;border:1px solid #1720331f;border-radius:clamp(1.25rem,3vw,2rem);padding:clamp(1.25rem,4vw,2.5rem);box-shadow:0 1.5rem 4rem #1720331f}.gallery-heading,.gallery-card-footer{justify-content:space-between;align-items:center;gap:1rem;display:flex}.gallery-heading h2{margin-bottom:0}.gallery-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.2rem;margin-top:1.5rem;display:grid}.gallery-card{background:#f5f9f9;border:2px solid #172033;border-radius:1.1rem;overflow:hidden}.gallery-images{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.gallery-images figure{background:#172033;margin:0}.gallery-images img{aspect-ratio:1;object-fit:cover;width:100%;display:block}.gallery-image-loading{aspect-ratio:1;color:#53646f;text-align:center;background:#eef5f5;place-items:center;width:100%;padding:1rem;display:grid}.gallery-images figcaption{color:#fff;text-align:center;padding:.5rem;font-size:.85rem;font-weight:800}.gallery-card-footer{padding:.8rem}.gallery-card-footer time{color:#53646f;font-size:.9rem}.delete-gallery-button{color:#a11e30;cursor:pointer;background:#fff;border:2px solid #b52638;border-radius:.75rem;min-height:3rem;padding:.55rem .8rem;font-weight:800}.gallery-empty{color:#53646f;text-align:center;padding:clamp(2rem,8vw,5rem) 1rem}.gallery-empty span{color:#007b73;font-size:3.5rem}.gallery-empty h3{color:#172033;margin-bottom:.5rem}.result-share-actions>button{width:100%}@keyframes gear-turn{to{transform:rotate(360deg)}}.download-button{color:#fff;min-height:3.5rem;font:inherit;cursor:pointer;background:#007b73;border:2px solid #075e58;border-radius:.9rem;justify-content:center;align-items:center;gap:.65rem;padding:.8rem 1.5rem;font-weight:800;display:inline-flex}.share-button{color:#fff;min-height:3.5rem;font:inherit;cursor:pointer;background:#1769e0;border:2px solid #124ca6;border-radius:.9rem;justify-content:center;align-items:center;gap:.65rem;padding:.8rem 1.5rem;font-weight:800;display:inline-flex}.share-button:disabled{color:#68777d;cursor:not-allowed;background:#dce3e5;border-color:#aab4bb}.download-button span{font-size:1.45rem;line-height:1}.download-button:disabled{color:#68777d;cursor:not-allowed;background:#dce3e5;border-color:#aab4bb}.download-status{color:#075e58;text-align:center;margin:0;font-weight:700}.download-error{color:#a11e30}@media (width<=700px){.app-header{display:block}.intro{margin-top:1rem}.workspace{grid-template-columns:1fr}.canvas-toolbar{flex-direction:column;align-items:start}.history-actions{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid}.history-actions button{justify-content:center;padding-inline:.45rem}.toolbox{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.download-panel{grid-column:1/-1}.segmented-control{grid-template-columns:repeat(2,minmax(0,1fr))}.size-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.size-button{justify-content:center;min-width:3.2rem;padding:.45rem;display:flex}.size-button>span:last-child{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.drawing-canvas{height:52dvh;min-height:20rem}}@media (width<=520px){.toolbox{grid-template-columns:1fr}.color-grid{grid-template-columns:repeat(6,minmax(3rem,1fr));padding:.15rem 0 .3rem;overflow-x:auto}}@media (orientation:landscape) and (height<=700px){.app-header{align-items:center;margin-bottom:1rem}h1{font-size:clamp(1.8rem,4vw,3rem)}.intro{font-size:.95rem}.workspace{grid-template-columns:minmax(11rem,13rem) minmax(0,1fr)}.toolbox{display:flex}.drawing-canvas{height:54dvh;min-height:16rem}}@media (hover:hover){.tool-button:hover,.color-button:hover,.size-button:hover{border-color:#007b73}}.tool-button:focus-visible,.color-button:focus-visible,.size-button:focus-visible,.history-actions button:focus-visible{outline-offset:2px;outline:3px solid #1769e0}.download-button:focus-visible,.share-button:focus-visible,.gallery-button:focus-visible,.delete-gallery-button:focus-visible,.build-button:focus-visible,.secondary-action:focus-visible{outline-offset:3px;outline:3px solid #1769e0}@media (width<=620px){.result-comparison{grid-template-columns:1fr}.flow-actions>button{width:100%}.result-share-actions,.style-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation:none!important}}