@font-face{font-family:Outfit;src:url(/fonts/outfit-latin-wght-normal.woff2)format("woff2-variations");font-style:normal;font-weight:100 900;font-display:optional}@font-face{font-family:Shantell Sans;src:url(/fonts/shantell-sans-latin-wght-normal.woff2)format("woff2-variations");font-style:normal;font-weight:400 800;font-display:swap}:root{color-scheme:light;--paper:#f6f1e6;--paper-deep:#ece4d3;--surface:#fffaf0;--surface-strong:#fffdf8;--graphite:#2f2822;--muted:#6d6257;--line:#cfc3b4;--line-strong:#8a7d70;--control-line:#807365;--ink-line:#2f2822e6;--highlight:#fbefb4;--accent:#7b1b38;--focus:#9d3155;--font-hand:"Shantell Sans", "Outfit", ui-sans-serif, system-ui, sans-serif;--wobble-a:16px 7px 14px 9px / 9px 14px 7px 16px;--wobble-b:8px 15px 9px 13px / 13px 9px 15px 8px;--shadow-paper:2px 2px 0 #2f282238;--shadow-lift:3px 4px 0 #2f28224d;--shadow-soft:var(--shadow-paper);--shadow-float:4px 5px 0 #2f282238, 0 18px 50px #4a342229;--radius-small:10px 5px 9px 6px / 6px 9px 5px 10px;--radius-medium:var(--wobble-a);--content-width:78rem;--z-sticky:10;--z-modal:20;--bg:var(--paper);--text:var(--graphite);--border:var(--line);--border-strong:var(--line-strong);--shadow:var(--shadow-soft);--radius:var(--radius-medium)}*{box-sizing:border-box}html{scroll-behavior:smooth;min-height:100%}body{min-height:100dvh;color:var(--graphite);background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(#53433417 .8px,#0000 .8px);background-size:auto,18px 18px;margin:0;font-family:Outfit,ui-sans-serif,system-ui,sans-serif;font-weight:450;line-height:1.5}button,input{font:inherit}button{cursor:pointer}a{color:inherit}.page-shell{width:min(var(--content-width), calc(100% - 1.5rem));margin-inline:auto;padding-block:.75rem 2rem}.site-footer{color:var(--muted);text-align:center;margin-top:2.5rem;font-size:.875rem}.site-footer a{text-underline-offset:.2em}.site-footer a:hover{color:var(--accent)}.skip-link{z-index:calc(var(--z-modal) + 1);border-radius:var(--radius-small);background:var(--graphite);color:var(--surface);padding:.65rem .85rem;position:fixed;inset:.5rem auto auto .5rem;transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}:focus-visible{outline:3px solid color-mix(in srgb, var(--focus), white 18%);outline-offset:3px}button:active,a:active{transform:translateY(1px)}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.panel{border:2px solid var(--ink-line);border-radius:var(--radius-medium);background:#fffaf0f0}.modal-shell{z-index:var(--z-modal);justify-content:center;align-items:center;padding:1rem;display:none;position:fixed;inset:0}.modal-shell[data-open=true]{display:flex}.modal-backdrop{backdrop-filter:blur(2px);background:#2f282252;border:0;padding:0;position:absolute;inset:0}.modal{border:2px solid var(--ink-line);border-radius:var(--wobble-a);background:var(--surface-strong);width:min(42rem,100%);max-height:calc(100dvh - 2rem);box-shadow:var(--shadow-float);flex-direction:column;padding:1.1rem 1.2rem;display:flex;position:relative;overflow-y:auto}.modal-header{justify-content:space-between;align-items:start;gap:1rem;display:flex}.modal-header h2{font-family:var(--font-hand);margin:0;font-size:1.3rem;font-weight:700;line-height:1.15}.modal-header p{max-width:60ch;color:var(--muted);margin:.35rem 0 0}.modal-close,.modal-action{border:1.5px solid var(--ink-line);border-radius:var(--radius-small);background:var(--surface-strong);min-height:2.75rem;color:var(--graphite);box-shadow:var(--shadow-paper);transition:background .2s,box-shadow .2s,transform .2s}.modal-close:hover,.modal-action:hover{background:color-mix(in srgb, var(--highlight), var(--surface-strong) 50%)}.modal-close:active,.modal-action:active{box-shadow:none;transform:translate(1px,1px)}.modal-close{block-size:2.75rem;inline-size:2.75rem;box-shadow:none;flex:none;padding:0;font-size:1.2rem}.modal-action{padding:.65rem .9rem;font-weight:600}.modal-action:disabled{cursor:not-allowed;opacity:.5}.color-modal-body{gap:1rem;margin-top:.8rem;display:grid}.color-modal-section{gap:.55rem;display:grid}.color-modal-label{margin:0;font-size:.9rem;font-weight:600}.color-picker-panel{gap:.75rem;display:grid}.color-spectrum{border:1.5px solid var(--ink-line);border-radius:var(--radius-medium);cursor:crosshair;touch-action:none;background:#ff0040;block-size:13.75rem;inline-size:100%;display:block;position:relative;overflow:hidden}.color-spectrum:before,.color-spectrum:after{content:"";pointer-events:none;position:absolute;inset:0}.color-spectrum:before{background:linear-gradient(90deg,#fff 0%,#0000 100%)}.color-spectrum:after{background:linear-gradient(#0000 0%,#000 100%)}.color-spectrum-handle{pointer-events:none;border:3px solid #fffffff5;border-radius:50%;block-size:1.7rem;inline-size:1.7rem;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #30292273,0 5px 14px #30292238}.color-hue-input{appearance:none;border:1.5px solid var(--ink-line);border-radius:var(--radius-small);cursor:pointer;background:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);block-size:1.7rem;inline-size:100%;margin:0}.color-hue-input::-webkit-slider-runnable-track{background:0 0;block-size:1.7rem}.color-hue-input::-moz-range-track{background:0 0;block-size:1.7rem}.color-hue-input::-webkit-slider-thumb{appearance:none;background:0 0;border:3px solid #fff;border-radius:50%;block-size:1.7rem;inline-size:1.7rem;box-shadow:0 0 0 1px #30292273}.color-hue-input::-moz-range-thumb{background:0 0;border:3px solid #fff;border-radius:50%;block-size:1.4rem;inline-size:1.4rem;box-shadow:0 0 0 1px #30292273}.color-input-row{align-items:center;gap:.65rem;display:flex}.color-preview-chip{border:2px solid var(--surface-strong);border-radius:var(--radius-small);background:var(--accent);block-size:2.9rem;inline-size:2.9rem;box-shadow:0 0 0 1.5px var(--ink-line);flex:none}.color-hex-input{border:1.5px solid var(--ink-line);border-radius:var(--radius-small);background:var(--surface-strong);width:100%;min-height:2.9rem;color:var(--graphite);text-transform:uppercase;font-variant-numeric:tabular-nums;padding:.65rem .8rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.color-hex-input[aria-invalid=true]{border-color:#a23838}.field-error{color:#8b2d2d;margin:0;font-size:.85rem;font-weight:550}.color-modal-actions,.modal-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:1rem;display:grid}.recent-swatches{flex-wrap:wrap;gap:.45rem;display:flex}.swatch{appearance:none;border:2px solid var(--surface-strong);block-size:1.75rem;inline-size:1.75rem;box-shadow:0 0 0 1.5px var(--ink-line);color:#0000;border-radius:50% 46% 54% 48%/48% 54% 46% 50%;flex:none;padding:0;font-size:0;transition:transform .15s;overflow:hidden}.swatch:hover{transform:scale(1.08)}.swatch[aria-pressed=true]{box-shadow:0 0 0 1.5px var(--ink-line), 0 0 0 4px var(--surface-strong), 0 0 0 5.5px var(--ink-line)}.status{z-index:var(--z-sticky);border:1.5px solid var(--ink-line);border-radius:var(--wobble-b);background:var(--surface-strong);max-width:min(22rem,100vw - 2rem);color:var(--graphite);box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;padding:.55rem .95rem;font-weight:550;transition:opacity .2s,transform .2s;position:fixed;inset:auto 1.2rem 1.2rem auto;transform:translateY(.6rem)}.status[data-visible=true]{opacity:1;transform:translateY(0)}body .generator{width:100%}body .generator .generator-grid{grid-template-columns:minmax(0,1.25fr) minmax(22rem,.75fr);align-items:start;gap:1rem;display:grid}body .generator .generator-preview{min-width:0;position:sticky;top:5.8rem}body .generator .generator-controls{border:2px solid var(--ink-line);border-radius:var(--wobble-b);background:var(--surface-strong);min-width:0;box-shadow:var(--shadow-paper);align-content:start;padding:.25rem 1rem 1rem;display:grid}body .generator .control-group{border:0;border-bottom:1.5px dashed var(--line);grid-template-columns:7rem minmax(0,1fr);align-items:center;gap:.9rem;margin:0;padding:.8rem 0;display:grid}body .generator .control-group legend{color:var(--graphite);font-size:.88rem;font-weight:620;display:contents}body .generator .field,body .generator .field-row{align-items:center;gap:.65rem;min-width:0;font-size:.84rem;display:flex}body .generator .field-row>input[type=range]{inline-size:100%;min-width:0;accent-color:var(--accent);flex:auto}body .generator .field-row>output{inline-size:2.6rem;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}body .generator .segmented{background:0 0;flex-wrap:wrap;justify-self:start;gap:.25rem;padding:0;display:inline-flex}body .generator .segmented button{border:1.5px solid var(--line);border-radius:var(--wobble-a);background:var(--surface-strong);min-height:2rem;color:var(--muted);box-shadow:none;padding:.3rem .65rem;font-size:.8rem;font-weight:600;transition:color .15s,background .15s,border-color .15s}body .generator .segmented button:hover{border-color:var(--line-strong);color:var(--graphite)}body .generator .segmented button[aria-pressed=true]{border-color:var(--ink-line);background:var(--highlight);color:var(--graphite);box-shadow:none}body .generator .transform-actions button,body .generator .shape-actions button{border:1.5px solid var(--ink-line);border-radius:var(--wobble-b);background:var(--surface-strong);min-height:2.25rem;color:var(--graphite);transition:background .15s,box-shadow .15s,transform .15s;box-shadow:1.5px 1.5px #2f282238}body .generator .transform-actions button:hover,body .generator .shape-actions button:hover{border-color:var(--ink-line);background:color-mix(in srgb, var(--highlight), var(--surface-strong) 50%);color:var(--graphite)}body .generator .transform-actions button:active,body .generator .shape-actions button:active{box-shadow:none;transform:translate(1px,1px)}body .generator .generator-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding-top:1rem;display:grid}body .generator .action{border:1.5px solid var(--ink-line);border-radius:var(--wobble-a);background:var(--surface-strong);min-height:2.75rem;color:var(--graphite);box-shadow:var(--shadow-paper);padding:.6rem .75rem;font-size:.88rem;font-weight:620;transition:background .15s,box-shadow .15s,transform .15s}body .generator .action:hover{border-color:var(--ink-line);background:color-mix(in srgb, var(--highlight), var(--surface-strong) 50%)}body .generator .action:active{box-shadow:none;transform:translate(2px,2px)}body .generator .action-primary,body .generator .action-primary:hover{border:2px solid var(--ink-line);background:var(--accent);color:var(--accent-contrast,#fff)}body .generator .action-quiet{background:var(--surface-strong);color:var(--graphite)}body .generator .reset-action{min-height:2rem;box-shadow:none;color:var(--muted);text-underline-offset:3px;background:0 0;border:0;grid-column:1/-1;justify-self:center;font-size:.82rem;text-decoration:underline dotted}body .generator .reset-action:hover{color:var(--graphite);background:0 0}body .generator .control-section{border-bottom:1.5px dashed var(--line)}body .generator .control-section>summary{cursor:pointer;font-family:var(--font-hand);align-items:center;gap:.5rem;padding:.75rem 0;font-size:1.05rem;font-weight:700;line-height:1.1;list-style:none;display:flex}body .generator .control-section>summary::-webkit-details-marker{display:none}body .generator .control-section>summary:after{content:"+";inline-size:1.2rem;color:var(--muted);text-align:center;font-family:Outfit,ui-sans-serif,system-ui,sans-serif;font-size:1.1rem;transition:rotate .2s}body .generator .control-section[open]>summary:after{rotate:45deg}body .generator .section-note{color:var(--muted);margin-left:auto;font-family:Outfit,ui-sans-serif,system-ui,sans-serif;font-size:.76rem;font-weight:500}body .generator .control-section .control-group{border-bottom:0;padding-block:.55rem}body .generator .control-section .control-group:last-of-type{padding-bottom:.9rem}body .generator .border-controls{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.6rem .75rem;min-width:0;display:grid}body .generator .border-controls:not(:has(.border-toggle:first-child input:checked))>:not(.border-toggle:first-child){display:none}body .generator .border-toggle{white-space:nowrap;cursor:pointer;align-items:center;gap:.5rem;font-size:.85rem;display:inline-flex}body .generator .border-thickness,body .generator .border-outline-only{grid-column:1/-1}body .generator .border-toggle input[type=checkbox]{appearance:none;border:1.5px solid var(--ink-line);background:var(--surface-strong);cursor:pointer;border-radius:1rem;flex:none;block-size:1.45rem;inline-size:2.6rem;margin:0;transition:background .18s;position:relative}body .generator .border-toggle input[type=checkbox]:before{content:"";background:var(--line-strong);border-radius:50%;block-size:.95rem;inline-size:.95rem;transition:left .18s,background .18s;position:absolute;top:50%;left:.15rem;translate:0 -50%}body .generator .border-toggle input[type=checkbox]:checked{background:var(--highlight)}body .generator .border-toggle input[type=checkbox]:checked:before{background:var(--accent);left:1.3rem}body .generator .border-color-chip{appearance:none;border:2px solid var(--surface-strong);block-size:1.75rem;inline-size:1.75rem;box-shadow:0 0 0 1.5px var(--ink-line);cursor:pointer;border-radius:50%;flex:none;padding:0}body .generator .border-color-chip:hover{box-shadow:0 0 0 1.5px var(--ink-line), 0 0 0 4px var(--highlight)}body .generator .transform-actions{flex-wrap:wrap;gap:.5rem;display:flex}body .generator .transform-actions button{align-items:center;gap:.45rem;padding:.4rem .75rem;font-size:.84rem;display:inline-flex}body .generator .transform-actions svg{flex:none;block-size:.95rem;inline-size:.95rem}body .generator .generator-controls>.generator-actions{z-index:2;border-top:2px solid var(--ink-line);border-radius:0 0 var(--wobble-b);background:var(--surface-strong);grid-template-columns:minmax(0,1fr) auto;margin:0 -1rem -1rem;padding:.8rem 1rem .7rem;position:sticky;bottom:0}body .generator .generator-actions .action-primary{grid-column:auto}body .generator .more-menu{position:relative}body .generator .more-menu>summary{cursor:pointer;align-items:center;gap:.35rem;height:100%;list-style:none;display:flex}body .generator .more-menu>summary::-webkit-details-marker{display:none}body .generator .more-menu>summary:after{content:"▾";font-size:.75rem}body .generator .more-list{z-index:3;border:2px solid var(--ink-line);border-radius:var(--wobble-a);background:var(--surface-strong);min-inline-size:12rem;box-shadow:var(--shadow-lift);padding:.35rem;display:grid;position:absolute;bottom:calc(100% + .45rem);right:0}body .generator .more-list button{min-height:2.5rem;color:var(--graphite);text-align:left;background:0 0;border:0;border-radius:.4rem;padding:.45rem .7rem;font-size:.9rem}body .generator .more-list button:hover,body .generator .more-list button:focus-visible{background:var(--highlight)}body .generator .more-list hr{border:0;border-top:1.5px dashed var(--line);margin:.25rem .3rem}@media (width<=980px){body .generator .generator-grid{grid-template-columns:minmax(0,1fr)}body .generator .generator-preview{position:static}}@media (width<=520px){body .generator{padding:0}body .generator .generator-controls{padding-inline:.65rem}body .generator .control-group{grid-template-columns:5rem minmax(0,1fr);gap:.65rem}body .generator .generator-controls>.generator-actions{margin-inline:-.65rem;padding-inline:.65rem}}@media (width<=640px){.page-shell{width:min(100% - 1rem, var(--content-width));padding-block:.5rem 1.5rem}.color-spectrum{block-size:10rem}.color-modal-actions,.modal-actions{grid-template-columns:1fr}body .generator .generator-preview{z-index:3;background-color:var(--paper);margin-inline:-.5rem;padding:.5rem .5rem .4rem;position:sticky;top:0}body .generator .generator-controls>.generator-actions{grid-template-columns:minmax(0,1fr) auto auto;padding-block:.6rem}body .generator .reset-action{grid-column:auto;min-height:2.75rem}}@media (pointer:coarse){body .generator .segmented button{min-height:2.5rem}body .generator .field-row>input[type=range]{block-size:2rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}button:active,a:active,.skip-link:focus,.card:hover,.card:focus-within{transform:none!important}}