@font-face{font-family:Monocraft;src:url(/fonts/monocraft-tags.woff2)format("woff2");font-display:block;unicode-range:U+1EB,U+455,U+495,U+A730-A731}.tags [hidden]{display:none!important}.tags .lead{max-width:760px;color:var(--muted);text-wrap:pretty;margin-top:10px}.tags .banner{background:var(--tip);color:var(--accent-bad);box-shadow:inset 0 0 0 2px var(--accent-bad);margin-top:18px;padding:10px 14px}.tags .step-title{font-size:var(--fs-2);margin:27px 0 14px}.tags .step-title:focus,.tags .type-name:focus{outline:none}.tags .cards{grid-template-columns:minmax(0,1fr);gap:14px;margin:0;padding:0;list-style:none;display:grid}@media (width>=768px){.tags .cards{grid-template-columns:repeat(3,minmax(0,1fr))}}.tags .card{flex-direction:column;gap:10px;min-width:0;padding:14px 16px 16px;display:flex}.tags .card-name{color:var(--accent)}.tags .card-sample{align-items:center;min-width:0;min-height:40px;display:flex;overflow:hidden}.tags .variants{background:var(--slot);box-shadow:inset 3px 3px 0 var(--slot-lo), inset -3px -3px 0 var(--slot-hi);gap:4px;padding:4px}.tags .variants .tool{color:var(--muted);box-shadow:none;background:0 0;flex:auto}.tags .variants .tool:hover{color:var(--text)}.tags .variants .tool[aria-pressed=true]{background:var(--btn);color:var(--accent);box-shadow:inset 2px 2px 0 var(--btn-hi), inset -2px -2px 0 var(--btn-lo)}.tags .variants .tool[aria-pressed=true]:focus-visible{outline-color:var(--accent)}.tags .card-foot{flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:auto;display:flex}.tags .card-how{color:var(--muted)}.tags [data-presets-copy]{max-width:100%}.tags [data-presets-copy] [data-label]{text-align:left;min-width:0}.tags .picker-extra{gap:12px;margin-top:14px;display:grid}.tags .paste{gap:8px;display:grid}.tags .paste-row{gap:10px;display:flex}.tags .paste-row .input{flex:1;min-width:0}.tags .buy{color:var(--muted)}.tags .buy a{color:var(--accent)}.tags .editor-head{flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:22px;display:flex}.tags .type-name{font-size:var(--fs-2);color:var(--accent);line-height:1.2}.tags .grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview""compose""colors""result";align-items:start;gap:14px;margin-top:16px;display:grid}@media (width>=960px){.tags .grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"compose compose""preview preview""colors result"}}.tags .panel{padding:14px}.tags .compose{grid-area:compose}.tags .preview{grid-area:preview}.tags .colors{grid-area:colors;position:relative}.tags .result{grid-area:result}@media (width<=959px){.tags .preview{z-index:3;padding:8px;position:sticky;top:0}html:has(.tags .editor:not([hidden])){scroll-padding-top:130px}}.tags .label{color:var(--accent);font-size:var(--fs-1);margin:0;padding:0;font-weight:400}.tags .compose-main,.tags .compose-side{flex-wrap:wrap;align-items:flex-end;gap:10px 14px;display:flex}.tags .compose-side{justify-content:flex-start;margin-top:12px}.tags .text-box,.tags .nick-main:not(:empty){flex:260px;gap:6px;display:grid}.tags .nick-main:empty{display:none}.tags .nick-box{gap:6px;display:grid}.tags .nick-side{flex:0 260px}.tags .nick-side .nick-box{width:100%}.tags .input-wrap{position:relative}.tags .input{background:var(--slot);width:100%;min-height:44px;box-shadow:inset 4px 4px 0 var(--slot-lo), inset -4px -4px 0 var(--slot-hi);appearance:none;border:0;border-radius:0;padding:6px 12px}.tags .input::placeholder{color:var(--muted);opacity:.7}.tags .input[aria-invalid=true]{box-shadow:inset 4px 4px 0 var(--slot-lo), inset -4px -4px 0 var(--slot-hi), inset 0 0 0 2px var(--accent-bad)}.tags .input.big,.tags .nick-box.main .input{min-height:58px;font-size:var(--fs-2);padding-right:64px}.tags .counter{color:var(--muted);pointer-events:none;position:absolute;top:50%;right:12px;translate:0 -50%}.tags .tools{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.tags .tool{background:var(--btn);min-width:40px;min-height:40px;color:var(--text);cursor:pointer;box-shadow:inset 2px 2px 0 var(--btn-hi), inset -2px -2px 0 var(--btn-lo), 3px 3px 0 var(--edge-lo);border:0;justify-content:center;align-items:center;gap:8px;padding:4px 10px;display:inline-flex}.tags .tool:hover{background:var(--btn-hover)}.tags .tool:disabled{cursor:not-allowed;background:var(--panel-2);color:var(--muted);box-shadow:inset 2px 2px 0 var(--edge-hi), inset -2px -2px 0 var(--edge-lo)}.tags .tool[aria-pressed=true],.tags .tool[aria-selected=true]{background:var(--accent);color:var(--on-accent);box-shadow:inset 2px 2px 0 var(--accent-hi), inset -2px -2px 0 var(--accent-lo), 3px 3px 0 var(--edge-lo)}.tags .tool[aria-pressed=true]:focus-visible,.tags .tool[aria-selected=true]:focus-visible{outline-color:var(--text)}.tags .formats .tool{width:56px;min-height:58px;padding:4px}.tags .anim{flex-wrap:wrap;align-items:flex-end;gap:10px 14px;display:flex}.tags .field-col{justify-items:start;gap:6px;display:grid}.tags .menu{position:relative}.tags .text-style .menu-toggle{justify-content:space-between;min-width:140px;min-height:58px;padding:8px 12px}.tags .gradient-length{flex:200px;justify-items:stretch}.tags .gradient-length input{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;border-radius:0;width:100%;height:28px;margin:0;padding:0}.tags .gradient-length input::-webkit-slider-runnable-track{background:var(--slot);height:8px;box-shadow:inset 2px 2px 0 var(--slot-lo), inset -2px -2px 0 var(--slot-hi);border:0;border-radius:0}.tags .gradient-length input::-moz-range-track{background:var(--slot);height:8px;box-shadow:inset 2px 2px 0 var(--slot-lo), inset -2px -2px 0 var(--slot-hi);border:0;border-radius:0}.tags .gradient-length input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--accent);width:20px;height:24px;box-shadow:inset 2px 2px 0 var(--accent-hi), inset -2px -2px 0 var(--accent-lo), 2px 2px 0 var(--edge-lo);border:0;border-radius:0;margin-top:-8px}.tags .gradient-length input::-moz-range-thumb{background:var(--accent);width:20px;height:24px;box-shadow:inset 2px 2px 0 var(--accent-hi), inset -2px -2px 0 var(--accent-lo), 2px 2px 0 var(--edge-lo);border:0;border-radius:0}.tags .gradient-length input:disabled{cursor:default;opacity:.5}.tags .menu-option.style-option{grid-template-columns:1fr}.tags .menu-toggle{gap:10px}.tags .menu-pop{z-index:6;width:max-content;max-width:min(400px, calc(100vw - 2 * var(--gutter)));background:var(--panel);box-shadow:inset 2px 2px 0 var(--edge-hi), inset -2px -2px 0 var(--edge-lo), 6px 6px 0 var(--edge-lo);gap:4px;padding:6px;display:grid;position:absolute;top:calc(100% + 6px);left:0}.tags .menu-option{color:var(--text);text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:28px 1fr;align-items:center;gap:10px;padding:8px 10px;display:grid}.tags .menu-option:hover{background:var(--panel-2)}.tags .menu-option[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.tags .menu-option[aria-pressed=true] .hint{color:inherit;opacity:.75}.tags .menu-option[aria-pressed=true]:focus-visible{outline-color:var(--text)}.tags .menu-text{display:grid}.tags .dir-icon{place-items:center;display:grid}.tags .stepper-value{text-align:center;min-width:7ch}.tags .mirror{background:var(--tip);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px;padding:6px 10px}.tags .mirror mark{color:var(--accent-bad);box-shadow:inset 0 -2px 0 var(--accent-bad);background:#ff555540}.tags .error{color:var(--accent-bad);margin-top:6px}.tags .error:empty{display:none}.tags .hint{color:var(--muted)}.tags .hint.error{color:var(--accent-bad)}.tags .screen{background:var(--slot);box-shadow:inset 4px 4px 0 var(--slot-lo), inset -4px -4px 0 var(--slot-hi);padding:4px;overflow-x:auto}.tags canvas{image-rendering:pixelated;display:block}.tags .preview-bar{flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:8px;display:flex}.tags .preview-bar .tool{min-height:36px}.tags .list-head{flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px;display:flex}.tags .list-head .label{margin-right:auto}.tags .count{text-align:center;min-width:2ch}.tags .presets-toggle .pixel{margin-left:2px}.tags .rows{gap:8px;margin:0;padding:0;list-style:none;display:grid}.tags .color-row{grid-template-columns:2ch auto auto minmax(0,1fr) auto;align-items:center;gap:8px;display:grid}.tags .color-row.dragging{opacity:.85;outline:2px dashed var(--accent);outline-offset:2px}.tags .color-num{color:var(--muted);text-align:right}.tags .grip{width:28px;height:40px;color:var(--muted);cursor:grab;touch-action:none;background:0 0;border:0;place-items:center;padding:0;display:grid}.tags .grip:hover{color:var(--text)}.tags .color-row.dragging .grip{cursor:grabbing}.tags .swatch{cursor:pointer;width:40px;height:40px;box-shadow:inset 0 0 0 3px #00000059, 3px 3px 0 var(--edge-lo);border:0;padding:0}.tags .hex{text-transform:uppercase;min-height:40px}.tags .trash{min-width:40px;min-height:40px;padding:6px}.tags .trash:disabled{background:var(--btn);color:var(--text);box-shadow:inset 2px 2px 0 var(--btn-hi), inset -2px -2px 0 var(--btn-lo), 4px 4px 0 var(--edge-lo);opacity:.4}.tags .color-row .error{grid-column:3/-1;margin-top:0}.tags .list-shadow{margin-top:14px}.tags .switch{cursor:pointer;align-items:center;gap:10px;margin-top:12px;display:flex}.tags .switch input{opacity:0;width:1px;height:1px;position:absolute}.tags .switch-box{background:var(--slot);width:44px;height:24px;box-shadow:inset 2px 2px 0 var(--slot-lo), inset -2px -2px 0 var(--slot-hi);flex:none;position:relative}.tags .switch-box:after{content:"";background:var(--muted);width:16px;height:16px;position:absolute;top:4px;left:4px}.tags .switch input:checked+.switch-box{background:var(--accent-lo)}.tags .switch input:checked+.switch-box:after{background:var(--text);left:24px}.tags .switch input:focus-visible+.switch-box{outline:3px solid var(--accent);outline-offset:3px}.tags .note{color:var(--muted)}.tags .presets{background:var(--tip);grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin-bottom:10px;padding:8px;display:grid}.tags .preset{color:var(--text);text-align:left;cursor:pointer;background:0 0;border:0;gap:4px;padding:6px;display:grid}.tags .preset:hover{background:var(--panel-2)}.tags .preset-bar{height:10px;display:block;box-shadow:inset 0 0 0 2px #00000059}.tags .palette{z-index:5;background:var(--panel);width:236px;box-shadow:inset 2px 2px 0 var(--edge-hi), inset -2px -2px 0 var(--edge-lo), 6px 6px 0 var(--edge-lo);padding:10px;position:absolute}.tags .palette-top{gap:10px;display:flex}.tags .palette-sv{--hue:0;background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--hue) 100% 50%));cursor:crosshair;touch-action:none;flex:1;height:128px;position:relative}.tags .palette-dot{pointer-events:none;width:12px;height:12px;position:absolute;translate:-50% -50%;box-shadow:0 0 0 2px #000,inset 0 0 0 2px #fff}.tags .palette-hue{cursor:ns-resize;touch-action:none;background:linear-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);width:18px;height:128px;position:relative}.tags .palette-bar{pointer-events:none;background:#fff;height:4px;position:absolute;left:-3px;right:-3px;translate:0 -50%;box-shadow:0 0 0 2px #000}.tags .palette-swatches{grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px;display:grid}.tags .palette-swatch{aspect-ratio:1;cursor:pointer;border:0;place-items:center;padding:0;display:grid;box-shadow:inset 0 0 0 2px #00000059}.tags .palette-random{background:var(--btn);color:var(--text)}.tags .result-body{gap:10px;margin-top:10px;display:grid}.tags .result .hint{margin-top:8px}.tags .code{background:var(--tip);max-height:220px;box-shadow:inset 0 0 0 2px var(--edge-hi);font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all;margin:0;padding:10px 12px;line-height:24px;overflow:auto}.tags .code.yaml{white-space:pre}.tags .btn.wide{width:100%}.tags .pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px;display:grid}.tags .pair .btn{padding-inline:10px}.tags .btn.small{justify-self:start;min-height:40px;padding:6px 14px}.tags .sub{color:var(--muted);font-size:var(--fs-1);margin:6px 0 0;font-weight:400}.tags .next{gap:4px;margin:0;padding:0;list-style-position:inside;display:grid}.tags .next a{color:var(--accent)}