@layer reset{*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body,h1,h2,p{margin:0}button,input{font:inherit}button{color:inherit}}@layer base{:root{--ink:oklch(23% .025 67);--ink-soft:oklch(43% .027 67);--ink-faint:oklch(49% .025 70);--paper:oklch(91% .025 82);--paper-light:oklch(96% .018 86);--rule:oklch(77% .025 76);--accent:oklch(48% .074 184);--accent-dark:oklch(31% .05 184);--serif:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;--sans:"Avenir Next", Avenir, "Century Gothic", "Trebuchet MS", sans-serif;--ease-out:cubic-bezier(.22, 1, .36, 1);color:var(--ink);background:var(--paper);font-family:var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}body{background:var(--paper);min-width:320px;min-height:100vh}button,input,summary{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}::selection{color:var(--paper-light);background:var(--accent-dark)}}@layer components{.app-shell{width:min(100%,1800px);min-height:100vh;padding:max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));margin-inline:auto}.skip-link{z-index:20;color:var(--paper-light);background:var(--accent-dark);transition:transform .18s var(--ease-out);padding:.75rem 1rem;position:fixed;top:1rem;left:1rem;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}.masthead{border-bottom:1px solid var(--ink);grid-template-columns:1fr auto;align-items:center;gap:1rem;min-height:6rem;padding:.4rem 0 1rem;display:grid}.brand-lockup{align-items:center;gap:.8rem;display:flex}.brand-mark{aspect-ratio:1;border:1px solid var(--ink);width:2.7rem;font-family:var(--serif);border-radius:50%;place-items:center;font-size:1.55rem;font-style:italic;display:grid}.eyebrow,.meta-label{color:var(--ink-soft);letter-spacing:.16em;text-transform:uppercase;font-size:.62rem;font-weight:600;line-height:1.2}h1{font-family:var(--serif);letter-spacing:-.055em;font-size:clamp(2rem,4vw,3.15rem);font-style:italic;font-weight:400;line-height:.82}.masthead-note{max-width:26ch;color:var(--ink-soft);font-family:var(--serif);font-size:.9rem;font-style:italic;line-height:1.35;display:none}.export-button{min-height:2.8rem;color:var(--paper-light);background:var(--accent-dark);cursor:pointer;letter-spacing:.13em;text-transform:uppercase;transition:color .18s var(--ease-out), background .18s var(--ease-out), transform .1s var(--ease-out);border:0;justify-content:center;align-items:center;gap:.65rem;padding:.7rem 1rem;font-size:.68rem;font-weight:700;display:inline-flex}.export-button svg,.icon-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;width:1rem}.export-button:active,.icon-button:active,.preset-grid button:active,.size-preset-grid button:active{transform:translateY(1px)}.export-button:disabled{cursor:not-allowed;opacity:.45}.studio{gap:2.5rem;padding-block:1.25rem 2.5rem;display:grid}.canvas-column{min-width:0;animation:reveal-canvas .7s var(--ease-out) both}.canvas-meta,.canvas-caption{justify-content:space-between;align-items:end;gap:1rem;display:flex}.canvas-meta{margin-bottom:.75rem}.canvas-meta div{gap:.22rem;min-width:0;display:grid}.canvas-meta strong{overflow-wrap:anywhere;font-family:var(--serif);font-size:1.2rem;font-style:italic;font-weight:400}.canvas-meta p,.canvas-caption span{color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;font-size:.65rem;font-weight:600}.artboard{width:min(100%, calc(var(--preview-content-max-width) + clamp(.45rem, 1vw, .8rem) + clamp(.45rem, 1vw, .8rem)));background:oklch(86% .026 78);border:1px solid oklch(70% .025 75);margin-inline:auto;padding:clamp(.45rem,1vw,.8rem);position:relative;overflow:hidden;box-shadow:inset 0 1px oklch(99% .01 80),0 2rem 4rem -3rem oklch(25% .02 70/.7)}.svg-preview{aspect-ratio:var(--artwork-aspect);background:var(--paper-light);overflow:hidden}.svg-preview svg{width:100%;height:100%;display:block}.paper-corner{aspect-ratio:1;background:linear-gradient(135deg, oklch(72% .03 75) 0 49%, var(--paper) 51%);pointer-events:none;width:1.3rem;position:absolute;bottom:0;right:0;box-shadow:-.2rem -.2rem .4rem oklch(34% .02 70/.12)}.canvas-caption{align-items:start;margin-top:.8rem}.canvas-caption p{max-width:56ch;color:var(--ink-soft);font-family:var(--serif);font-size:.8rem;font-style:italic;line-height:1.45}.control-column{border-top:1px solid var(--ink);animation:reveal-controls .65s .1s var(--ease-out) both}.control-section{border-bottom:1px solid var(--rule);padding-block:1.15rem 1.35rem}.section-heading{grid-template-columns:1.75rem 1fr;align-items:baseline;margin-bottom:1rem;display:grid}.section-heading>span{color:var(--ink-faint);font-family:var(--serif);font-size:.72rem;font-style:italic}.section-heading h2{font-family:var(--serif);letter-spacing:-.02em;font-size:1.35rem;font-weight:400}.text-control{color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;gap:.4rem;font-size:.68rem;font-weight:700;display:grid}.seed-input-row{border-bottom:1px solid var(--ink);grid-template-columns:1fr 2.8rem;display:grid}.seed-input-row input{outline-offset:-2px;min-width:0;color:var(--ink);font-family:var(--serif);background:0 0;border:0;padding:.55rem .2rem;font-size:1.05rem;font-style:italic}.icon-button{width:2.8rem;min-height:2.8rem;color:var(--accent-dark);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:grid}.field-note{color:var(--ink-faint);font-family:var(--serif);margin-top:.55rem;font-size:.75rem;font-style:italic}.size-preset-grid{border-top:1px solid var(--rule);border-left:1px solid var(--rule);grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:1rem;display:grid}.size-preset-grid button{border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);cursor:pointer;text-align:left;min-height:3.7rem;transition:color .18s var(--ease-out), background .18s var(--ease-out);background:0 0;padding:.65rem .7rem}.size-preset-grid button[aria-pressed=true]{color:var(--paper-light);background:var(--accent-dark)}.size-preset-grid strong,.size-preset-grid span{display:block}.size-preset-grid strong{font-family:var(--serif);font-size:.83rem;font-weight:400}.size-preset-grid span{color:var(--ink-faint);letter-spacing:.07em;text-transform:uppercase;margin-top:.18rem;font-size:.55rem;font-weight:700}.size-preset-grid button[aria-pressed=true] span{color:var(--paper)}.dimension-fields{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:.55rem;display:grid}.dimension-control{min-width:0;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;gap:.35rem;font-size:.61rem;font-weight:700;display:grid}.dimension-input-row{border-bottom:1px solid var(--ink);grid-template-columns:minmax(0,1fr) auto;align-items:center;display:grid}.dimension-input-row input{outline-offset:-2px;width:100%;min-width:0;color:var(--ink);font-family:var(--serif);font-variant-numeric:tabular-nums;background:0 0;border:0;padding:.48rem .2rem;font-size:.95rem;font-style:italic}.dimension-input-row input[aria-invalid=true]{color:oklch(42% .14 28)}.dimension-input-row span{color:var(--ink-faint);font-size:.52rem}.dimension-separator{color:var(--ink-faint);font-family:var(--serif);padding-top:1.65rem;font-size:.8rem;font-style:italic}.dimension-error{color:oklch(42% .14 28);letter-spacing:0;text-transform:none;min-height:2.5em;font-size:.55rem;font-weight:600;line-height:1.25}.aspect-lock{cursor:pointer;min-height:2rem;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;font-size:.64rem;font-weight:700;display:grid}.aspect-lock input{width:.95rem;height:.95rem;accent-color:var(--accent-dark);margin:0}.aspect-lock small{color:var(--ink-faint);font-family:var(--serif);letter-spacing:0;font-size:.72rem;font-style:italic;font-weight:400}.palette-list{display:grid}.palette-option{border:0;border-top:1px solid var(--rule);cursor:pointer;text-align:left;background:0 0;grid-template-columns:minmax(5.8rem,.65fr) 1fr;align-items:center;gap:1rem;padding:.68rem 0;display:grid}.palette-option:last-child{border-bottom:1px solid var(--rule)}.palette-swatches{height:1.55rem;display:flex;overflow:hidden}.palette-swatches i{transition:transform .26s var(--ease-out);flex:1;transform:scaleY(.62)}.palette-option[aria-checked=true] .palette-swatches i{transform:scaleY(1)}.palette-option strong,.palette-option small{display:block}.palette-option strong{font-family:var(--serif);font-size:.92rem;font-weight:400}.palette-option small{color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;margin-top:.12rem;font-size:.58rem}.custom-palette{margin-top:.8rem}.custom-palette summary{cursor:pointer;min-height:2.75rem;color:var(--accent-dark);letter-spacing:.1em;text-transform:uppercase;font-size:.64rem;font-weight:700;line-height:2.75rem;list-style-position:outside}.custom-palette-editor{padding-top:.15rem}.palette-mode-switch{border:1px solid var(--rule);grid-template-columns:1fr 1fr;display:grid}.palette-mode-switch button{min-height:2.65rem;color:var(--ink-soft);cursor:pointer;letter-spacing:.06em;text-transform:uppercase;background:0 0;border:0;padding:.55rem .45rem;font-size:.58rem;font-weight:700}.palette-mode-switch button+button{border-left:1px solid var(--rule)}.palette-mode-switch button[aria-pressed=true]{color:var(--paper-light);background:var(--accent-dark)}.custom-mode-note{min-height:2.6em;margin-block:.65rem .8rem;line-height:1.3}.custom-gradient-preview,.custom-swatches{height:2.2rem;margin-bottom:.7rem;display:flex;overflow:hidden}.custom-gradient-preview i{flex:1}.custom-swatches button{cursor:pointer;border:0;flex:1;min-width:0;padding:0;box-shadow:inset 0 0 0 1px oklch(98% .01 80/.35)}.custom-swatches button[aria-pressed=true]{z-index:1;box-shadow:inset 0 0 0 2px var(--paper-light), inset 0 0 0 3px var(--ink);position:relative}.color-editor{grid-template-columns:minmax(0,1fr) 6.5rem;align-items:stretch;gap:.8rem;display:grid}.hex-control{min-width:0;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;flex-direction:column;justify-content:flex-end;gap:.38rem;font-size:.58rem;font-weight:700;display:flex}.hex-input-row{border-bottom:1px solid var(--ink);grid-template-columns:1.7rem minmax(0,1fr);align-items:center;display:grid}.hex-input-row i{aspect-ratio:1;border:1px solid var(--rule);width:1.25rem}.hex-input-row input{outline-offset:-2px;width:100%;min-width:0;color:var(--ink);font-family:var(--serif);text-transform:lowercase;background:0 0;border:0;padding:.45rem 0;font-size:.72rem;font-style:italic}.range-stack{gap:1.1rem;display:grid}.range-control{gap:.55rem;display:grid}.control-label{color:var(--ink-soft);letter-spacing:.045em;justify-content:space-between;font-size:.68rem;font-weight:600;display:flex}.control-name{align-items:center;gap:.35rem;display:inline-flex}.info-tooltip{display:inline-flex;position:relative}.info-tooltip button{width:1rem;height:1rem;color:var(--ink-faint);cursor:help;background:0 0;border:0;border-radius:50%;place-items:center;padding:0;display:grid}.info-tooltip button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.2px;width:.88rem}.tooltip-copy{z-index:5;width:min(15rem,100vw - 2.5rem);color:var(--paper-light);background:var(--accent-dark);font-family:var(--sans);letter-spacing:0;opacity:0;pointer-events:none;text-transform:none;transition:opacity .14s var(--ease-out), transform .14s var(--ease-out);padding:.62rem .7rem;font-size:.64rem;font-weight:500;line-height:1.35;position:absolute;bottom:calc(100% + .55rem);left:-.4rem;transform:translateY(.25rem);box-shadow:0 .55rem 1.4rem oklch(20% .025 70/.2)}.info-tooltip:hover .tooltip-copy,.info-tooltip button:focus+.tooltip-copy,.tooltip-copy[data-open=true]{opacity:1;transform:translateY(0)}.control-label output{color:var(--ink);font-family:var(--serif);font-variant-numeric:tabular-nums;font-size:.78rem;font-style:italic}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:1.2rem;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent-dark) 0 var(--range-progress), var(--rule) var(--range-progress) 100%);height:1px}input[type=range]::-webkit-slider-thumb{appearance:none;border:1px solid var(--accent-dark);background:var(--paper-light);width:.68rem;height:.68rem;box-shadow:0 0 0 3px var(--paper);border-radius:50%;margin-top:-.34rem}input[type=range]::-moz-range-track{background:var(--rule);height:1px}input[type=range]::-moz-range-progress{background:var(--accent-dark);height:1px}input[type=range]::-moz-range-thumb{border:1px solid var(--accent-dark);background:var(--paper-light);border-radius:50%;width:.68rem;height:.68rem}.preset-grid{border-top:1px solid var(--rule);border-left:1px solid var(--rule);grid-template-columns:repeat(3,1fr);display:grid}.preset-note{color:var(--ink-faint);font-family:var(--serif);margin:-.35rem 0 .85rem 1.75rem;font-size:.75rem;font-style:italic;line-height:1.35}.preset-grid button{border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);cursor:pointer;text-align:left;min-height:4.4rem;transition:background .18s var(--ease-out);background:0 0;padding:.65rem}.preset-grid span,.preset-grid strong{display:block}.preset-grid span{color:var(--ink-faint);font-family:var(--serif);margin-bottom:.65rem;font-size:.62rem;font-style:italic}.preset-grid strong{letter-spacing:.07em;text-transform:uppercase;font-size:.59rem}footer{border-top:1px solid var(--ink);color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.5rem;padding-block:1rem .35rem;font-size:.58rem;font-weight:600;display:flex}footer p{color:var(--ink-soft);font-family:var(--serif);letter-spacing:0;text-transform:none;font-size:.72rem;font-style:italic;font-weight:400}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@keyframes reveal-canvas{0%{opacity:0;transform:translateY(.65rem)}}@keyframes reveal-controls{0%{opacity:0;transform:translate(.65rem)}}}@layer responsive{@media (width>=48rem){.app-shell{padding-inline:clamp(1.5rem,3vw,3.5rem)}.masthead{grid-template-columns:1fr auto auto;gap:clamp(2rem,6vw,7rem)}.masthead-note{display:block}.studio{grid-template-columns:minmax(0,1fr) minmax(17rem,20rem);align-items:start;gap:clamp(2rem,4vw,4.5rem)}.canvas-column{position:sticky;top:1rem}.control-column{border-top:0}}@media (width>=75rem){.studio{grid-template-columns:minmax(0,1fr) minmax(19rem,22rem)}.artboard{padding:.9rem}}@media (hover:hover){.export-button:hover{color:var(--accent-dark);background:var(--paper-light);box-shadow:0 0 0 1px var(--accent-dark) inset}.icon-button:hover{background:oklch(85% .035 80)}.palette-option:hover .palette-swatches i{transform:scaleY(.85)}.palette-option[aria-checked=true]:hover .palette-swatches i{transform:scaleY(1)}.preset-grid button:hover,.size-preset-grid button:hover:not([aria-pressed=true]){background:var(--paper-light)}.palette-mode-switch button:hover:not([aria-pressed=true]){color:var(--accent-dark);background:var(--paper-light)}.custom-swatches button:hover{filter:brightness(1.08)}}@media (pointer:coarse){.palette-option{min-height:4rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}.color-editor .react-colorful{width:100%;min-width:0;height:8.5rem;min-height:0}.color-editor .react-colorful__saturation{border:1px solid var(--rule);border-bottom:0;border-radius:0}.color-editor .react-colorful__hue{border:1px solid var(--rule);border-radius:0;height:1.15rem}.color-editor .react-colorful__pointer{border:2px solid var(--paper-light);width:1rem;height:1rem;box-shadow:0 0 0 1px var(--ink)}