@font-face{font-family:"Macintosh Skeletal";src:url("./assets/macintosh-skeletal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.47059;letter-spacing:-.022em;font-synthesis:none;color:#1d1d1f;background:#fff;color-scheme:light;--line:#d2d2d7;--muted:#6e6e73;--accent:#0071e3;--ease-out:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0;transition:background-color 160ms ease,color 160ms ease,transform 140ms var(--ease-out),box-shadow 160ms ease}button:active{transform:scale(.97)}button:disabled{cursor:wait;opacity:.4}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #0071e380;outline-offset:3px}a{color:inherit}[hidden]{display:none!important}
.shell{max-width:1280px;height:100svh;margin:0 auto;padding:0 40px 16px;display:flex;flex-direction:column}header{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end}.byline{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);text-decoration:none;letter-spacing:.01em}.icon{--icon-size:16px;width:var(--icon-size);height:var(--icon-size);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.nucleo-icon{display:block;width:100%;height:100%}main{display:flex;align-items:center;flex-direction:column;flex:1;min-height:0}
.stage{width:100%;height:auto;flex:1;min-height:140px;max-height:420px;position:relative;overflow:hidden;border-radius:28px;isolation:isolate;background:transparent;--stage-ink:#6e6e73;transition:background-color 200ms ease}.stage canvas{width:100%;height:100%;display:block}.stage-bottom{position:absolute;bottom:20px;right:22px;display:flex;justify-content:flex-end;pointer-events:none}.loop-toggle{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;background:transparent;color:var(--stage-ink);pointer-events:auto;opacity:.45}.loop-toggle[aria-pressed=true]{opacity:1;background:color-mix(in srgb,var(--stage-ink) 12%,transparent)}.loop-toggle:disabled{opacity:.25}.loading{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--muted);margin:0}
.controls{width:100%;flex-shrink:0;margin-top:16px;border:0;background:#f5f5f7;border-radius:28px;padding:20px 28px}.text-row{display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);padding-bottom:12px}.text-row label{white-space:nowrap;font-size:17px;font-weight:600;letter-spacing:-.022em}.text-row textarea{border:0;background:none;color:#1d1d1f;padding:0;width:100%;font-family:"Macintosh Skeletal",cursive;font-size:42px;font-weight:400;font-variation-settings:"wght" 270;letter-spacing:normal;line-height:1.65;resize:none;min-height:70px;max-height:210px;field-sizing:content}.text-row textarea:focus-visible{outline:none}.count{white-space:nowrap;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

.settings{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:16px;padding-top:16px}.setting{min-width:0}.label-row{display:flex;justify-content:space-between;align-items:center;font-size:17px;margin-bottom:8px;font-weight:600;letter-spacing:-.022em}.label-row output,.quiet{font-size:14px;color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}.label-row>.icon{color:var(--muted)}
input[type=range]{width:100%;margin:0;height:22px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;display:block}input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,#0071e3 var(--fill,20%),#d2d2d7 var(--fill,20%));border-radius:10px}input[type=range]::-moz-range-track{height:4px;background:#d2d2d7;border-radius:10px}input[type=range]::-moz-range-progress{height:4px;background:#0071e3;border-radius:10px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:18px;width:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002,0 0 0 .5px #0001;margin-top:-7px}input[type=range]::-moz-range-thumb{border:0;height:18px;width:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002,0 0 0 .5px #0001}.weight-presets{display:flex;justify-content:space-between;margin-top:4px;margin-left:-6px;margin-right:-6px}.weight-presets button{font-size:12px;color:var(--muted);padding:3px 6px;background:transparent;border-radius:6px}.weight-presets button[aria-pressed=true]{color:#1d1d1f;background:#e8e8ed;font-weight:500}
.swatches{display:flex;flex-wrap:wrap;gap:12px;align-items:center;min-height:29px}.swatch{width:23px;height:23px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #00000012;position:relative;flex-shrink:0;padding:0}.swatch:before{content:"";position:absolute;inset:-4px;border-radius:50%}.swatch[aria-pressed=true]:after{content:"";position:absolute;inset:-4px;border:2px solid #0071e3;border-radius:50%;pointer-events:none}.custom-color{width:23px;height:23px;border-radius:50%;position:relative;border:1px solid #b9b9bf;display:grid;place-items:center;color:#6e6e73;cursor:pointer;flex-shrink:0;background:#fff}.custom-color input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}.custom-color:focus-within{outline:3px solid #0071e380;outline-offset:3px}
.select-shell{position:relative;display:block;width:100%;color:#6e6e73}.select-shell>.icon{position:absolute;right:14px;top:50%;transform:translateY(-50%)}select{display:block;font-size:17px;width:100%;border:1px solid #d2d2d7;border-radius:12px;background:#fff;color:#1d1d1f;padding:9px 35px 9px 14px;appearance:none;cursor:pointer;letter-spacing:-.01em}
.bottom-row{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;display:flex;align-items:center;justify-content:flex-end;gap:14px}.download{min-width:160px;justify-content:center;display:flex;gap:9px;align-items:center;color:#fff;background:#0071e3;border:0;border-radius:100px;padding:10px 20px;font-size:17px;font-weight:400;letter-spacing:-.022em;box-shadow:none}.status{font-size:12px;line-height:1.5;color:var(--muted);text-align:center}.status:not(:empty){padding-top:14px}.warning{font-size:12px;line-height:1.5;color:#b64400;margin:12px 0 0}
@media(hover:hover) and (pointer:fine){.download:hover{background:#0077ed}.byline:hover{color:#0066cc}.swatch:hover{transform:scale(1.06)}.loop-toggle:hover{opacity:1;background:color-mix(in srgb,var(--stage-ink) 20%,transparent)}}
@media(max-width:640px){.shell{padding:0 18px 16px}header{height:40px}.byline{font-size:11px}.stage{height:auto;min-height:120px;max-height:340px;border-radius:24px}.stage-bottom{bottom:14px;right:14px}.controls{margin-top:16px;padding:16px 20px;border-radius:24px}.text-row{gap:13px;padding-bottom:10px}.text-row label{font-size:14px}.text-row textarea{font-size:36px;min-height:60px}.count{font-size:10px}.settings{column-gap:22px;row-gap:14px;padding-top:14px}.label-row{font-size:14px;margin-bottom:8px}.label-row output,.quiet{font-size:12px}.swatches{gap:8px;min-height:26px}.swatch,.custom-color{width:18px;height:18px}.weight-presets{margin-left:-4px;margin-right:-4px}.weight-presets button{font-size:9px;padding:4px}.select-shell>.icon{right:11px}select{font-size:13px;padding:11px 28px 11px 11px;border-radius:10px}.bottom-row{padding-top:12px;margin-top:16px;gap:9px}.download{min-width:140px;font-size:14px;padding:11px 14px;gap:6px}}
@media(max-width:380px){.shell{padding:0 14px 12px}.controls{padding:16px}.settings{column-gap:18px}.swatches{gap:7px}.swatch,.custom-color{width:17px;height:17px}.text-row .count{display:none}.download{padding:11px 12px}.weight-presets button{font-size:8px;padding:4px 3px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.swatch:hover{transform:none}}@media(prefers-contrast:more){:root{--muted:#424245;--line:#939398}.controls{outline:1px solid #939398}.loop-toggle{opacity:1}}

.download-menu{position:fixed;inset:auto;margin:0;width:160px;max-width:calc(100vw - 24px);padding:6px;border:1px solid #d2d2d780;border-radius:16px;background:#fffffff5;backdrop-filter:blur(20px);color:#1d1d1f;box-shadow:0 8px 32px #0002;transform-origin:bottom right;opacity:0;transform:scale(.95);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),display 200ms allow-discrete,overlay 200ms allow-discrete}.download-menu:popover-open{opacity:1;transform:scale(1)}@starting-style{.download-menu:popover-open{opacity:0;transform:scale(.95)}}.download-menu button{display:block;width:100%;text-align:left;background:transparent;padding:10px 8px;border-radius:10px;font-size:17px;line-height:1.47059;letter-spacing:-.022em}.download-menu button:focus-visible{background:#0071e3;color:white;outline:none}.download-menu button:disabled{cursor:default;opacity:.35}.download-menu.instant{transition:none}@media(hover:hover) and (pointer:fine){.download-menu button:not(:disabled):hover{background:#0071e3;color:white}}@media(prefers-reduced-motion:reduce){.download-menu{transform:none;transition:opacity 125ms ease,display 125ms allow-discrete,overlay 125ms allow-discrete}@starting-style{.download-menu:popover-open{transform:none}}}

.swatch[data-paper=transparent]{border:1px dashed #86868b;box-shadow:none}.download-menu button{white-space:nowrap}@media(max-width:640px){.download-menu button{font-size:14px}}

[data-smooth=surface]{position:relative;isolation:isolate}.controls[data-smooth=surface],.download[data-smooth=surface]{background:transparent}.controls[data-smooth=surface]::before,.download[data-smooth=surface]::before,.select-shell[data-smooth=surface]::before,.download-menu-surface::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--smooth-clip);pointer-events:none}.controls[data-smooth=surface]::before{background:#f5f5f7}.download[data-smooth=surface]::before{background:#0071e3;transition:background-color 160ms ease}.select-shell[data-smooth=surface]::before{background:#fff}.select-shell[data-smooth=surface] select{border-color:transparent;background:transparent}.smooth-border{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;stroke:#d2d2d7;stroke-width:1}.select-shell:focus-within .smooth-border{stroke:#0071e3;stroke-width:3}.select-shell[data-smooth=surface] select:focus-visible{outline:none}.download-menu{padding:0;border:0;background:transparent;backdrop-filter:none;box-shadow:none;filter:drop-shadow(0 8px 16px #0002)}.download-menu-surface{padding:6px;border-radius:16px;backdrop-filter:blur(20px)}.download-menu-surface::before{background:#fffffff5}.download-menu-surface>.smooth-border{stroke:#d2d2d780}.weight-presets button[data-smooth=clip]:focus-visible{outline-offset:-3px}@media(hover:hover) and (pointer:fine){.download[data-smooth=surface]:hover::before{background:#0077ed}}

.select-shell{border-radius:12px}@media(max-width:640px){.select-shell{border-radius:10px}}

.color-row{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:16px;margin-top:16px}.color-row .label-row{margin-bottom:8px}
@media(max-width:640px){.color-row{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);column-gap:18px;margin-top:16px}.color-row .swatches{gap:7px}}
@media(max-height:740px){header{height:36px}.shell{padding-bottom:12px}.stage{min-height:96px}.controls{margin-top:12px;padding-top:14px;padding-bottom:14px}.text-row textarea{font-size:36px;min-height:60px}.text-row{padding-bottom:8px}.settings{padding-top:12px;row-gap:12px}.label-row{font-size:14px;margin-bottom:6px}.label-row output{font-size:12px}.color-row{margin-top:12px}.color-row .label-row{margin-bottom:6px}.bottom-row{margin-top:12px;padding-top:10px}.weight-presets{margin-top:3px}}

#speed-value{display:flex;justify-content:flex-end;min-width:5ch}#speed-value numeric-text{font:inherit;color:inherit;letter-spacing:inherit}