@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--ink:#25312b;--muted:#748077;--paper:#f7f6f0;--line:#dedfd4;--accent:#d9eb86}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'DM Sans',sans-serif}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--ink);padding:9px 13px}button:hover{background:#e9eddd}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ad4c88;outline-offset:3px}button:disabled{opacity:.4;cursor:default}header{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw}.home{font:700 24px 'Space Grotesk',sans-serif;text-decoration:none;color:var(--ink)}.home span{font-weight:400}.home small{font-size:14px;margin-left:15px}.identity{font-weight:600}.version{font:11px 'DM Sans',sans-serif;display:inline-block;border:1px solid var(--line);padding:4px 7px;border-radius:5px;margin-left:8px;color:#6c766e}header button{border:0;font-size:12px}main{max-width:1440px;margin:auto;padding:36px 4vw 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}.eyebrow,.section-label{font-size:10px;font-weight:700;letter-spacing:1.7px}.eyebrow{color:#78826d}h1{font:500 clamp(35px,4vw,54px) 'Space Grotesk',sans-serif;letter-spacing:-2px;margin:10px 0}h1 em{font-style:normal;color:#a55787}.intro p:last-child{color:var(--muted);margin-bottom:0}.seal{font-size:90px;line-height:1;color:#a55787;transform:rotate(12deg);margin-right:18px}.workspace{display:grid;grid-template-columns:272px minmax(0,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fcfbf6}aside{padding:24px;border-right:1px solid var(--line)}.section-label{font-size:9px;color:#85907d;margin-bottom:15px}.modes{display:grid;gap:7px;margin-bottom:28px}.modes button{display:flex;align-items:center;gap:14px;text-align:left;font-size:25px;padding:12px}.modes span{font-size:13px;font-weight:600}.modes small{display:block;font-size:10px;font-weight:400;margin-top:3px;color:var(--muted)}.modes [aria-pressed=true]{background:#edf1df;border-color:#b4c487}.field{display:block;font-size:12px;font-weight:500;margin:19px 0}.field output{float:right;color:#a55787;font-variant-numeric:tabular-nums}.field input{display:block;width:100%;margin:12px 0 0;accent-color:#627c4b}.field select,select{display:block;width:100%;margin-top:9px;padding:9px;border:1px solid var(--line);border-radius:6px;background:#fcfbf6;color:var(--ink);font-size:12px}#swatches{display:flex;gap:5px;margin-top:-6px}#swatches i{height:12px;flex:1;border-radius:3px}.surprise{width:100%;background:var(--accent);border-color:#c7d57f;margin:8px 0 18px}details{font-size:11px;color:var(--muted);line-height:1.7}summary{cursor:pointer;color:var(--ink)}.art-panel{min-width:0;background:#eeeee5}.art-toolbar{height:57px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:11px;border-bottom:1px solid var(--line)}.art-toolbar button{font-size:10px;border:0;padding:7px}.live-dot{display:inline-block;width:6px;height:6px;background:#779955;border-radius:50%;margin-right:6px}.paper{margin:24px auto 0;width:min(90%,650px);aspect-ratio:1;background:repeating-conic-gradient(#e5e4dd 0% 25%,#f5f4ee 0% 50%) 50% / 16px 16px;box-shadow:0 3px 16px #35422209}#art{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.canvas-caption{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);padding:16px 5%;gap:15px}.canvas-caption span:last-child{font-size:8px;letter-spacing:1px;white-space:nowrap}.export-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:23px;background:#fcfbf6;border-top:1px solid var(--line);margin-top:10px}.export-bar strong{font-size:12px}.export-bar small{display:block;font-size:10px;color:var(--muted);margin-top:6px}.exports{display:flex;gap:7px;align-items:center}.exports select{width:87px;margin:0}.exports button{font-size:11px;white-space:nowrap}.primary{background:var(--ink);color:#f8f9e8;border-color:var(--ink)}.primary:hover{background:#45553a}footer{display:flex;justify-content:space-between;padding:22px 0;color:var(--muted);font-size:10px}dialog{max-width:480px;border:1px solid var(--line);border-radius:12px;padding:28px;background:var(--paper);color:var(--ink);line-height:1.7}dialog::backdrop{background:#17231c77}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:1200px){.paper{width:min(83%,620px)}}@media(max-width:850px){.workspace{grid-template-columns:225px 1fr}aside{padding:17px}.art-toolbar{padding:0 10px}.export-bar{flex-direction:column;align-items:flex-start}.canvas-caption{flex-direction:column}.paper{margin-top:30px;width:94%}.seal{font-size:65px}.identity{font-size:12px}}@media(max-width:600px){header{height:65px}.home{font-size:19px}.identity{font-size:11px}.identity .version{margin-left:3px;padding:3px;font-size:9px}header button{font-size:10px;padding:4px}main{padding:24px 15px 0}.intro{margin-bottom:24px}.intro p:last-child{font-size:12px}.seal{font-size:55px;margin:0}.workspace{display:flex;flex-direction:column}aside{border-right:0;border-bottom:1px solid var(--line)}.modes{grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:20px}.modes button{font-size:20px;gap:6px;padding:10px 6px}.modes span{font-size:10px}.modes small{font-size:8px}.field{margin:14px 0}#controls{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.art-toolbar{height:52px}.paper{margin-top:18px}.canvas-caption{gap:7px}.export-bar{padding:18px;gap:15px}.exports{width:100%}.exports .primary{flex:1}footer{font-size:9px;gap:15px}}

.animation-bar{display:flex;align-items:center;gap:10px;padding:15px 22px;border-bottom:1px solid var(--line);background:#fcfbf6}.animation-bar[hidden]{display:none}.animation-bar button{font-size:11px;min-width:76px}.animation-bar label{display:grid;grid-template-columns:auto auto;gap:4px 12px;align-items:center;font-size:11px;flex:1;max-width:210px;margin-left:8px}.animation-bar output{text-align:right;color:#a55787}.animation-bar input{grid-column:1/-1;width:100%;accent-color:#627c4b;margin:0}.animation-bar>span{font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}@media(max-width:850px){.animation-bar{flex-wrap:wrap;padding:13px 15px}.animation-bar label{max-width:none}.animation-bar>span{flex-basis:100%;text-align:right}}

.exports{flex-wrap:wrap;justify-content:flex-end}#export-dialog{width:min(460px,calc(100% - 24px));max-height:90vh;overflow:auto}#export-dialog h2{font:500 27px 'Space Grotesk',sans-serif;margin:0}#export-options{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}#export-options label:first-child{grid-column:1/-1}.export-note,#video-note{font-size:12px;color:var(--muted);line-height:1.6}.export-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}#export-progress{width:100%;accent-color:#627c4b}#export-status{font-size:12px;min-height:20px}.export-credit{font-size:10px;color:var(--muted);margin:20px 0 0}.export-credit a{color:inherit}@media(max-width:600px){.exports{justify-content:flex-start}.exports .primary{flex:initial}.export-bar{gap:14px}.exports button{padding:9px}}

.collection-tools{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:17px 0;margin-top:-8px}.collection-tools>div:first-child{display:grid;gap:5px;min-width:0}.collection-tools strong{font-size:14px;overflow-wrap:anywhere}.collection-tools>div:last-child{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.collection-tools button{font-size:12px}.shared-banner{padding:13px 16px;background:#edf1df;border:1px solid #b4c487;border-radius:8px;margin-bottom:15px;font-size:12px}.shared-banner[hidden]{display:none}#gallery-dialog{width:min(850px,calc(100% - 24px));max-width:850px;max-height:88vh;overflow:auto}#gallery-dialog h2,#save-pattern-dialog h2,#share-dialog h2{font:500 25px 'Space Grotesk',sans-serif;margin:0}#gallery-dialog>p,#share-dialog>p{font-size:12px;color:var(--muted)}.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}#gallery-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.favorite{min-width:0;border:1px solid var(--line);border-radius:9px;overflow:hidden}.favorite-open{width:100%;text-align:left;border:0;border-radius:0;padding:12px;display:flex;flex-direction:column;align-items:stretch;gap:7px}.favorite-open img,.favorite-placeholder{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:5px;background:#f0f0e8}.favorite-placeholder{font-size:80px;text-align:center;color:#a55787}.favorite-open strong{font-size:13px;overflow-wrap:anywhere}.favorite-open small{font-size:10px;text-transform:capitalize;color:var(--muted)}.favorite-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px;border-top:1px solid var(--line);padding:5px}.favorite-actions button{font-size:10px;border:0;padding:7px}#save-pattern-dialog,#share-dialog{width:min(480px,calc(100% - 24px));max-height:88vh;overflow:auto}#favorite-name,#share-url{display:block;width:100%;border:1px solid var(--line);border-radius:6px;padding:11px;background:#fffdf8;color:var(--ink);font:13px 'DM Sans',sans-serif;margin-top:9px}#share-url{resize:vertical;word-break:break-all;font-size:11px}#save-error{color:#a63d56;font-size:12px}#gallery-status,#share-status{overflow-wrap:anywhere}#gallery-empty{border:1px dashed var(--line);padding:28px;text-align:center;border-radius:9px}#undo-gallery-delete{font-size:12px}@media(max-width:600px){.collection-tools{align-items:flex-start;flex-direction:column}.collection-tools>div:last-child{justify-content:flex-start;gap:6px}.collection-tools button{font-size:11px;padding:9px}#gallery-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#gallery-dialog{padding:18px}.favorite-open{padding:9px}.favorite-actions{padding:3px}.favorite-actions button{font-size:9px;padding:6px}#gallery-dialog h2{font-size:23px}}

[hidden]{display:none!important}

#color-editor{margin:15px 0 8px}#color-editor summary{font-size:11px}#custom-colors{margin-top:10px}.custom-color-row{display:grid;grid-template-columns:42px 30px minmax(0,1fr);align-items:center;gap:7px;margin:8px 0}.custom-color-row label{font-size:10px;color:var(--muted)}.custom-color-row input[type=color]{width:30px;height:30px;padding:2px;border:1px solid var(--line);border-radius:5px;background:transparent;cursor:pointer}.custom-color-row input[type=text]{width:100%;min-width:0;border:1px solid var(--line);padding:7px;font:11px monospace;background:#fffdf8;border-radius:5px;color:var(--ink)}.custom-color-row [aria-invalid=true]{border-color:#a63d56}.color-error{grid-column:2/-1;color:#a63d56;font-size:10px}.color-error:empty{display:none}.color-note{font-size:10px;color:var(--muted);line-height:1.7}#import-palette{width:100%;font-size:10px;padding:9px 5px;margin-top:4px}#palette-import-dialog{width:min(640px,calc(100% - 24px));max-width:640px;max-height:88vh;overflow:auto}#palette-import-dialog h2{font:500 25px 'Space Grotesk',sans-serif;margin:0}#palette-import-dialog>p{font-size:12px;color:var(--muted);line-height:1.7}#palette-import-dialog a{color:var(--ink)}#refresh-playground{font-size:11px}#playground-palettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.playground-palette{display:flex;flex-direction:column;gap:5px;align-items:stretch;text-align:left;min-width:0}.playground-palette strong{font-size:12px;overflow-wrap:anywhere}.playground-palette small{color:var(--muted);font-size:10px}.palette-strip{display:flex;height:30px;border-radius:5px;overflow:hidden;margin-top:5px}.palette-strip i{flex:1}#palette-import-text{display:block;width:100%;border:1px solid var(--line);border-radius:7px;padding:10px;background:#fffdf8;color:var(--ink);font:11px monospace;margin-top:8px;resize:vertical}#palette-import-status{font-size:12px;color:#91495a;overflow-wrap:anywhere}@media(max-width:600px){#custom-colors{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.custom-color-row{grid-template-columns:30px minmax(0,1fr)}.custom-color-row label{grid-column:1/-1}.color-error{grid-column:1/-1}#palette-import-dialog{padding:20px}#palette-import-dialog h2{font-size:23px}}

#playground-palettes,#backup-palettes{max-height:250px;overflow:auto}#backup-palettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}#palette-backup-details{margin-top:20px}#palette-backup-file{font-size:11px;max-width:100%;margin-top:10px}#palette-backup-status{font-size:12px}

.mechanism-controls{padding:14px 22px;background:#f6f7ed;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:10px 12px;font-size:11px}.mechanism-toggle{display:flex;align-items:center;gap:7px;font-weight:600}.mechanism-toggle input,.position-control input{accent-color:#217f88}#mechanism-turn{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.position-control{grid-column:1/-1;display:flex;align-items:center;gap:15px;font-size:10px}.position-control input{flex:1;min-width:0}.mechanism-legend{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:15px;font-size:9px;color:#596a61}.mechanism-legend span{display:flex;align-items:center;gap:5px}.mechanism-legend i{display:inline-block;width:8px;height:8px;border-radius:50%}.legend-fixed{background:#87998e}.legend-rolling{background:#167e89}.legend-pen{background:#b74c76}.mechanism-controls p{grid-column:1/-1;margin:0;font-size:9px;color:var(--muted);line-height:1.6}.spiro-mechanism *{vector-effect:non-scaling-stroke}.spiro-mechanism .fixed-ring{fill:none;stroke:#83968b;stroke-width:1.8}.spiro-mechanism .center-orbit{fill:none;stroke:#9bada0;stroke-width:1;stroke-dasharray:3 5;opacity:.7}.spiro-mechanism .rolling-ring{fill:#16828c0a;stroke:#167e89;stroke-width:2}.spiro-mechanism .pen-arm{stroke:#b74c76;stroke-width:2}.spiro-mechanism .rolling-spoke{stroke:#167e89;stroke-width:1;stroke-dasharray:3 3}.spiro-mechanism .rolling-marker,.spiro-mechanism .rolling-center{fill:#167e89;stroke:#fffdf8;stroke-width:1}.spiro-mechanism .contact-point{fill:#be9444;stroke:#fffdf8;stroke-width:1}.spiro-mechanism .pen-halo{fill:#fffdf8;stroke:#b74c76;stroke-width:1.5}.spiro-mechanism .moving-pen{stroke:#fffdf8;stroke-width:1}.spiro-mechanism.dark .fixed-ring{stroke:#a4c0b7}.spiro-mechanism.dark .rolling-ring,.spiro-mechanism.dark .rolling-spoke{stroke:#70d3db}.spiro-mechanism.dark .pen-arm{stroke:#efa2c0}.spiro-mechanism.dark .pen-halo{fill:#10182b;stroke:#efa2c0}@media(max-width:600px){.mechanism-controls{padding:14px 12px}.mechanism-toggle{font-size:10px;gap:5px}#mechanism-turn{font-size:9px}.position-control{gap:10px}.mechanism-legend{gap:12px}}