:root{--ink:#17201d;--paper:#f3f0e9;--muted:#74766f;--rule:#d6d3cb;--acid:#d9ff43}*{box-sizing:border-box}html,body{background:var(--paper);color:var(--ink);margin:0;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{color:inherit}.topbar{border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;height:72px;padding:0 28px;display:flex}.brand{letter-spacing:-.05em;color:var(--ink);font-size:18px;font-weight:800;text-decoration:none}.brand span{font-weight:400}.top-actions{align-items:center;gap:18px;display:flex}.saved{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-size:11px}.saved:before{content:"";background:#77a468;border-radius:50%;width:6px;height:6px;margin-right:8px;display:inline-block}.icon-button{border:1px solid var(--rule);cursor:pointer;background:0 0;border-radius:50%;width:36px;height:36px}.studio{grid-template-columns:minmax(320px,380px) minmax(460px,1fr) minmax(240px,300px);align-items:start;min-height:calc(100vh - 124px);display:grid}.controls,.output-panel{padding:44px 28px}.controls{border-right:1px solid var(--rule)}.output-panel{border-left:1px solid var(--rule);flex-direction:column;min-height:calc(100vh - 72px);display:flex;position:sticky;top:0}.eyebrow{letter-spacing:.15em;color:var(--muted);margin-bottom:18px;font:700 11px/1.2 monospace}.controls h1{letter-spacing:-.06em;margin:0 0 22px;font:400 48px/.88 Georgia,serif}.controls h1 em{color:#747a72;font-weight:400}.intro,.output-panel>div>p{color:#696c67;max-width:285px;font-size:14px;line-height:1.55}.seed-tools{border:1px solid var(--rule);grid-template-columns:1fr 1fr 1.4fr;margin-top:25px;display:grid}.seed-tools button{border:0;border-right:1px solid var(--rule);cursor:pointer;background:0 0;font-size:10px}.seed-tools button:hover{background:var(--acid)}.seed-tools label{color:var(--muted);text-transform:uppercase;padding:5px 8px;font:8px monospace}.seed-tools input{border:0;border-bottom:1px solid var(--rule);background:0 0;outline:0;width:100%;font:10px monospace;display:block}.step{border-top:1px solid var(--ink);margin-top:34px;padding-top:16px}.section-title{justify-content:space-between;align-items:end;margin-bottom:13px;display:flex}.section-title span{letter-spacing:.1em;text-transform:uppercase;font:700 11px monospace}.section-title small{color:var(--muted);font-size:10px}.section-title i{color:#92948d;margin-right:8px;font-size:9px;font-style:normal}.shape-grid{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.shape-grid button{border:1px solid var(--rule);cursor:pointer;background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:65px;font:700 9px monospace;display:flex}.shape-grid button:hover,.shape-grid button.active,.choice-grid button:hover,.choice-grid button.active{border-color:var(--ink);background:var(--ink);color:#fff}.shape-icon{border:1.5px solid;border-radius:50%;width:22px;height:22px;display:block}.shape-0{background:currentColor;border:0;width:9px;height:9px}.shape-1{border:0;border-top:2px solid;border-radius:0;width:28px;height:1px}.shape-3{border-radius:0}.shape-4{clip-path:polygon(50% 0,100% 100%,0 100%);background:currentColor;border:0;border-radius:0}.shape-5{border-radius:0;transform:rotate(45deg)}.shape-6{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:currentColor;border:0;border-radius:0}.shape-7{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 95%,50% 72%,21% 95%,32% 57%,2% 35%,39% 35%);background:currentColor;border:0;border-radius:0}.shape-8{background:linear-gradient(currentColor,currentColor) 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 50%/2px 100% no-repeat;border:0;border-radius:0}.shape-9{border-bottom:0;border-radius:50% 50% 0 0}.shape-10{background:linear-gradient(135deg,#0000 35%,currentColor 36% 42%,#0000 43% 57%,currentColor 58% 64%,#0000 65%);border:0;border-radius:0}.shape-11{border-radius:50% 0 50% 50%;transform:rotate(-45deg)}.choice-grid{grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:4px;margin-bottom:8px;display:grid}.choice-grid button{border:1px solid var(--rule);cursor:pointer;background:0 0;height:36px;font:700 9px monospace}.range-control{border-bottom:1px solid var(--rule);padding:13px 0 10px;display:block}.range-control>span{text-transform:uppercase;letter-spacing:.07em;justify-content:space-between;font:700 11px/1 monospace;display:flex}.range-control b{color:var(--muted);font-weight:400}.range-control>small{color:#8a8c85;margin-top:6px;font-size:10px;line-height:1.35;display:block}input[type=range]{appearance:none;background:0 0;width:100%;height:20px;margin-top:8px}input[type=range]::-webkit-slider-runnable-track{background:#c9c6be;height:2px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--ink);cursor:pointer;border-radius:50%;width:12px;height:12px;margin-top:-5px}.color-step .choice-grid+.choice-grid{margin-top:6px}.color-row{grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px;display:grid}.background-colors{grid-template-columns:repeat(2,1fr)}.color-input{text-transform:uppercase;color:var(--muted);text-align:center;font:8px monospace}.color-input input{border:1px solid var(--rule);cursor:pointer;background:0 0;width:100%;height:34px;margin-top:6px;padding:2px;display:block}.color-input input::-webkit-color-swatch-wrapper{padding:1px}.color-input input::-webkit-color-swatch{border:0}.canvas-wrap{background:#dedbd3;flex-direction:column;justify-content:center;align-self:start;align-items:center;min-width:0;height:100vh;padding:32px clamp(24px,4vw,64px) 20px;display:flex;position:sticky;top:0}.art-frame{width:min(100%,100vh - 92px,720px);position:relative;box-shadow:0 17px 45px #34383122}.art-frame:before{content:"";padding-top:100%;display:block}.art-frame svg{width:100%;height:100%;position:absolute;inset:0}.edition{letter-spacing:.14em;color:var(--ink);opacity:.65;font:7px monospace;position:absolute;bottom:2.4%;left:3%}.under-art{letter-spacing:.1em;color:#686b66;justify-content:space-between;width:min(100%,100vh - 92px,720px);padding-top:13px;font:9px monospace;display:flex}.dot{background:#789466;border-radius:50%;width:5px;height:5px;margin-right:7px;display:inline-block}.output-panel h2{letter-spacing:-.045em;margin:0 0 16px;font:400 35px/.98 Georgia,serif}.formats{border-top:1px solid var(--rule);margin-top:auto}.formats>div{border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;padding:14px 0;display:flex}.formats span{font:700 11px monospace}.formats small{color:var(--muted);font-size:10px}.downloads{gap:8px;margin-top:18px;display:grid}.downloads button{border:1px solid var(--ink);cursor:pointer;background:0 0;justify-content:space-between;align-items:center;height:46px;padding:0 15px;font-size:12px;font-weight:700;display:flex}.downloads button:first-child{background:var(--acid)}.share{text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:15px;font-size:11px;text-decoration:underline}.print-note{border-top:1px solid var(--rule);gap:13px;margin-top:12px;padding-top:18px;display:flex}.print-note span{font-size:20px}.print-note b{letter-spacing:.06em;font:700 10px monospace}.print-note p{color:var(--muted);margin:5px 0;font-size:10px;line-height:1.45}footer{border-top:1px solid var(--rule);letter-spacing:.12em;color:#777871;justify-content:space-between;align-items:center;height:52px;padding:0 28px;font:8px monospace;display:flex}@media (max-width:1050px){.studio{grid-template-columns:340px 1fr}.output-panel{border-left:0;border-top:1px solid var(--rule);grid-column:1/-1;grid-template-columns:1fr 1fr;gap:28px;min-height:0;display:grid;position:relative}.formats,.downloads{margin-top:0}.share,.print-note{grid-column:2}}@media (max-width:700px){.topbar{height:60px;padding:0 18px}.studio{flex-direction:column;display:flex}.controls{border-right:0;padding:34px 20px 26px}.controls h1{font-size:43px}.canvas-wrap{height:auto;padding:22px 18px;position:relative;top:auto}.art-frame,.under-art{width:min(100%,720px)}.output-panel{border-top:1px solid var(--rule);padding:34px 20px;display:flex}.formats{margin-top:28px}.share,.print-note{grid-column:auto}.shape-grid{grid-template-columns:repeat(4,1fr)}footer{padding:0 18px}footer span:last-child{display:none}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.layout-note{border-left:2px solid var(--acid);color:var(--muted);margin:9px 0 3px;padding-left:9px;font-size:10px;line-height:1.4}
