@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:linear-gradient(90deg, transparent 0 49.8%, oklch(75% .02 78/.18) 50%, transparent 50.2%), 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{transform:translateY(1px)}.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{background:oklch(86% .026 78);border:1px solid oklch(70% .025 75);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:4/3;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}.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}.color-wells{gap:.45rem;padding:.25rem 0 .45rem;display:flex}.color-wells label{flex:1}.color-wells input{border:1px solid var(--rule);cursor:pointer;background:0 0;border-radius:0;width:100%;height:2.5rem;padding:0}.color-wells input::-webkit-color-swatch-wrapper{padding:.2rem}.color-wells input::-webkit-color-swatch{border:0}.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-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-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{background:var(--paper-light)}}@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}}}