@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Instrument+Serif&display=swap";:root{--paper:#f4f2eb;--panel:#f8f7f2;--ink:#171815;--muted:#77776f;--line:#d9d7cf;--green:#74d44b;--text-extra-small:11px;--text-small:12px;--text-control:13px;--text-menu:14px}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--ink);background:var(--paper);font-family:DM Sans,sans-serif;overflow:hidden}button,input{font:inherit}button{color:inherit}.app{grid-template-rows:60px minmax(0,1fr);height:100dvh;display:grid}.top{z-index:10;border-bottom:1px solid var(--line);background:var(--paper);justify-content:space-between;align-items:center;padding:0 18px;display:flex;position:relative}.brand{align-items:center;display:flex}.brand strong{font-size:20px;font-weight:600}.panel-intro>span,.section-heading,.control-label{text-transform:uppercase;letter-spacing:.12em;font-family:DM Mono,monospace}.export-wrap{justify-self:end;position:relative}.export-button{color:#fff;height:36px;font-family:DM Mono,monospace;font-size:var(--text-control);text-transform:uppercase;cursor:pointer;background:#111;border:1px solid #111;align-items:center;gap:12px;padding:0 15px;font-weight:400;display:flex}.export-button:disabled{opacity:.6}.workspace{grid-template-columns:minmax(0,1fr) 380px;min-height:0;display:grid}.preview-panel{background-color:#efede6;background-image:linear-gradient(45deg,#00000009 25%,#0000 25%),linear-gradient(-45deg,#00000009 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#00000009 75%),linear-gradient(-45deg,#0000 75%,#00000009 75%);background-position:0 0,0 7px,7px -7px,-7px 0;background-size:14px 14px;grid-template-rows:minmax(0,1fr);min-width:0;padding:36px;display:grid}.stage{background:#fff;min-width:0;min-height:0;position:relative;overflow:hidden}.field{cursor:grab;touch-action:none;width:100%;height:100%;position:absolute;inset:0}.field:active{cursor:grabbing}.control-panel{border-left:1px solid var(--line);background:var(--panel);scrollbar-width:thin;min-width:0;overflow-y:auto}.panel-intro,.control-section{border-bottom:1px solid var(--line);padding:28px 24px}.panel-intro>span{color:var(--muted);font-size:var(--text-small);margin-bottom:18px;font-weight:500;display:block}.panel-intro h1{letter-spacing:0;text-wrap:balance;max-width:300px;margin:0;font-family:Instrument Serif,serif;font-size:46px;font-weight:400;line-height:.94}.panel-intro p{color:#5f6059;max-width:300px;font-size:var(--text-control);text-wrap:pretty;margin:18px 0 0;line-height:1.55}.section-heading{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px;display:flex}.section-heading h2{font:inherit;font-size:var(--text-small);margin:0;font-weight:500}.section-heading span{color:#96968e;font-size:var(--text-small)}.preset-heading{align-items:center}.presets{grid-template-columns:repeat(3,1fr);gap:12px 8px;display:grid}.preset{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;min-width:0;padding:5px}.preset canvas{object-fit:cover;width:100%;height:46px;display:block}.preset span{font-family:DM Mono,monospace;font-size:var(--text-extra-small);text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;margin-top:6px;display:block;overflow:hidden}.preset:hover,.preset.is-active{border-color:var(--ink)}.preset-reset{min-height:30px;color:var(--muted);font-family:DM Mono,monospace;font-size:var(--text-extra-small);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #aaa9a1;align-items:center;gap:7px;padding:0 8px;display:inline-flex}.preset-reset:hover{border-color:var(--ink);color:var(--ink)}.preset-reset:active{scale:.96}.preset-reset svg{flex:none}.palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;display:grid}.swatch{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;height:42px;position:relative}.swatch input{appearance:none;pointer-events:none;background:0 0;border:1px solid #00000024;width:100%;height:100%;padding:0;position:absolute;inset:0}.swatch input::-webkit-color-swatch-wrapper{padding:0}.swatch input::-webkit-color-swatch{border:0}.swatch.is-dragging{opacity:.35}.swatch.is-drop{outline:2px solid var(--ink)}.swatch-nudge,.swatch-x{z-index:3;color:#fff;cursor:pointer;opacity:0;background:#111;border:0;position:absolute}.swatch:hover .swatch-nudge,.swatch:hover .swatch-x,.swatch:focus-within .swatch-nudge{opacity:1}.swatch-nudge{width:14px;height:20px;padding:0;font-size:13px;top:11px}.swatch-nudge.prev{left:-7px}.swatch-nudge.next{right:-7px}.swatch-x{width:14px;height:14px;font-size:var(--text-small);padding:0;line-height:14px;top:-5px;right:-5px}.swatch.add{background:0 0;border:1px dashed #a7a79e;place-items:center;display:grid}.segmented{border:1px solid var(--line);grid-template-columns:1fr 1fr;display:grid}.segmented button{height:34px;font-family:DM Mono,monospace;font-size:var(--text-control);text-transform:capitalize;cursor:pointer;background:0 0;border:0}.segmented button.is-active{background:var(--ink);color:#fff}.matrix-options{grid-template-columns:repeat(3,1fr)}.control-groups{gap:22px;display:grid}.control-group{gap:10px;display:grid}.control-label{color:var(--muted);font-size:var(--text-extra-small)}.parameter-section{padding-bottom:36px}.controls{gap:21px;display:grid}.slider{font-size:var(--text-control);grid-template-columns:1fr auto;align-items:center;gap:7px 12px;display:grid}.slider>span{font-weight:500}.slider em{color:#888880;font-family:DM Mono,monospace;font-size:var(--text-small);font-style:normal}.slider input{width:100%;height:2px;accent-color:var(--ink);cursor:pointer;border-radius:0;grid-column:1/-1;margin:0}.slider.is-disabled{opacity:.3;pointer-events:none}.menu{z-index:20;background:#111;border:1px solid #2e2e2b;min-width:170px;padding:5px;display:grid;position:absolute;top:calc(100% + 8px);right:0}.menu button{color:#fff;font-family:DM Mono,monospace;font-size:var(--text-menu);text-align:left;cursor:pointer;background:0 0;border:0;padding:10px}.menu button:hover{background:#2b2b28}@media (width<=820px){body{overflow:auto}.app{grid-template-rows:56px auto;height:auto;min-height:100dvh}.top{grid-template-columns:1fr auto}.workspace{display:block}.preview-panel{height:66vh;min-height:430px;padding:14px}.control-panel{border-top:1px solid var(--line);border-left:0;overflow:visible}.presets{grid-template-columns:repeat(4,1fr)}}@media (width<=520px){.brand strong{font-size:17px}.export-button{gap:8px;padding:0 10px}.preview-panel{height:58vh;min-height:360px;padding:12px}.panel-intro,.control-section{padding:24px 18px}.presets{grid-template-columns:repeat(3,1fr)}}