.playground-module__XDWUqG__page{--paper:#f4f3ee;--ink:#22221f;--muted:#76766e;--line:#d9d9d0;--accent:#e8492d;background:var(--paper);color:var(--ink);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;height:100svh;min-height:480px;font-family:var(--font-mono), monospace;-webkit-tap-highlight-color:transparent;flex-direction:column;padding:0 20px;font-size:11px;display:flex;overflow:clip}.playground-module__XDWUqG__page button{cursor:pointer;font:inherit}.playground-module__XDWUqG__page button:disabled{opacity:.35;cursor:default}.playground-module__XDWUqG__page button:focus-visible,.playground-module__XDWUqG__page input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.playground-module__XDWUqG__header{flex:0 0 64px;align-items:center;gap:32px;height:64px;display:flex}.playground-module__XDWUqG__brand{flex-shrink:0;position:relative}.playground-module__XDWUqG__wordmark{-webkit-user-select:none;user-select:none;align-items:center;margin:0;display:flex}.playground-module__XDWUqG__wordmark svg{display:block}.playground-module__XDWUqG__wordmark:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.playground-module__XDWUqG__wordmarkDescription{white-space:pre;pointer-events:none;color:var(--muted);visibility:hidden;align-items:center;font-size:10px;line-height:14px;display:flex;position:absolute;top:50%;left:calc(100% + 16px);transform:translateY(-50%)}.playground-module__XDWUqG__wordmarkDescription[data-visible=true]{visibility:visible}.playground-module__XDWUqG__typingCursor{width:.6ch;animation:playground-module__XDWUqG__cursorPulse var(--cursor-pulse) cubic-bezier(.4, 0, .6, 1) infinite;display:inline-block}@keyframes playground-module__XDWUqG__cursorPulse{50%{opacity:.5}}.playground-module__XDWUqG__actions{align-items:center;gap:25px;margin-left:auto;display:flex}.playground-module__XDWUqG__actions a{color:var(--ink);place-items:center;width:28px;height:32px;display:grid}.playground-module__XDWUqG__actions a:hover,.playground-module__XDWUqG__actions button:hover{color:var(--action-hover,var(--accent))}.playground-module__XDWUqG__actions a:focus-visible,.playground-module__XDWUqG__typeface select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.playground-module__XDWUqG__actions button,.playground-module__XDWUqG__editorFooter button,.playground-module__XDWUqG__editorFooter a{color:inherit;background:0 0;border:0;align-items:center;gap:7px;padding:8px 0;display:inline-flex}.playground-module__XDWUqG__editorFooter button:hover,.playground-module__XDWUqG__editorFooter a:hover{color:var(--accent)}.playground-module__XDWUqG__canvas{isolation:isolate;flex:1;min-height:0;position:relative}.playground-module__XDWUqG__openingSeed{z-index:4;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.playground-module__XDWUqG__openingSeed svg{display:block}.playground-module__XDWUqG__page[data-opening="0"] .playground-module__XDWUqG__letter{visibility:hidden}.playground-module__XDWUqG__page[data-opening="0"] .playground-module__XDWUqG__header,.playground-module__XDWUqG__page[data-opening="0"] .playground-module__XDWUqG__footer,.playground-module__XDWUqG__page[data-opening="1"] .playground-module__XDWUqG__header,.playground-module__XDWUqG__page[data-opening="1"] .playground-module__XDWUqG__footer{opacity:0}.playground-module__XDWUqG__page[data-opening="1"] .playground-module__XDWUqG__openingSeed,.playground-module__XDWUqG__page[data-opening="2"] .playground-module__XDWUqG__openingSeed{opacity:0;transition:opacity var(--opening-seed-fade) ease-out}.playground-module__XDWUqG__page[data-opening="1"] .playground-module__XDWUqG__letter,.playground-module__XDWUqG__page[data-opening="2"] .playground-module__XDWUqG__letter{transform-origin:50%;will-change:transform, opacity;animation:playground-module__XDWUqG__openingFlight var(--opening-flight) var(--opening-spring) var(--opening-delay) both, playground-module__XDWUqG__openingInk var(--opening-seed-fade) linear var(--opening-delay) both}.playground-module__XDWUqG__page[data-opening="2"] .playground-module__XDWUqG__header,.playground-module__XDWUqG__page[data-opening="2"] .playground-module__XDWUqG__footer{transition:opacity var(--opening-chrome-fade) ease-out}.playground-module__XDWUqG__page:not([data-opening="3"]) .playground-module__XDWUqG__selectionBorder,.playground-module__XDWUqG__page:not([data-opening="3"]) .playground-module__XDWUqG__handle{visibility:hidden}@keyframes playground-module__XDWUqG__openingFlight{0%{transform:translate(var(--opening-x), var(--opening-y)) scale(var(--opening-scale-x), var(--opening-scale-y))}to{transform:translate(0)scale(1)}}@keyframes playground-module__XDWUqG__openingInk{0%{opacity:var(--opening-opacity)}to{opacity:1}}.playground-module__XDWUqG__letter{position:absolute}.playground-module__XDWUqG__letter:hover,.playground-module__XDWUqG__letter:focus-within{z-index:2}.playground-module__XDWUqG__letter.playground-module__XDWUqG__selected{z-index:3}.playground-module__XDWUqG__letterButton{background:0 0;border:0;width:100%;height:100%;padding:0;display:block}.playground-module__XDWUqG__letterButton svg{pointer-events:none;display:block}.playground-module__XDWUqG__letterButton:focus-visible{outline:none!important}.playground-module__XDWUqG__selectionBorder{border:1px solid var(--accent);pointer-events:none;opacity:0;position:absolute;inset:-3px}.playground-module__XDWUqG__letter:hover .playground-module__XDWUqG__selectionBorder,.playground-module__XDWUqG__letter:focus-within .playground-module__XDWUqG__selectionBorder,.playground-module__XDWUqG__selected .playground-module__XDWUqG__selectionBorder{opacity:1}.playground-module__XDWUqG__handle{opacity:0;touch-action:none;z-index:1;background:0 0;border:0;width:22px;height:22px;padding:0;position:absolute}.playground-module__XDWUqG__handle span{border:1px solid var(--accent);background:var(--paper);width:6px;height:6px;margin:auto;display:block}.playground-module__XDWUqG__letter:hover .playground-module__XDWUqG__handle,.playground-module__XDWUqG__letter:focus-within .playground-module__XDWUqG__handle,.playground-module__XDWUqG__selected .playground-module__XDWUqG__handle{opacity:1}.playground-module__XDWUqG__handle:hover span{background:var(--accent)}.playground-module__XDWUqG__n,.playground-module__XDWUqG__s{left:calc(50% - 11px);cursor:ns-resize!important}.playground-module__XDWUqG__e,.playground-module__XDWUqG__w{top:calc(50% - 11px);cursor:ew-resize!important}.playground-module__XDWUqG__n,.playground-module__XDWUqG__ne,.playground-module__XDWUqG__nw{top:-14px}.playground-module__XDWUqG__s,.playground-module__XDWUqG__se,.playground-module__XDWUqG__sw{bottom:-14px}.playground-module__XDWUqG__e,.playground-module__XDWUqG__ne,.playground-module__XDWUqG__se{right:-14px}.playground-module__XDWUqG__w,.playground-module__XDWUqG__nw,.playground-module__XDWUqG__sw{left:-14px}.playground-module__XDWUqG__ne,.playground-module__XDWUqG__sw{cursor:nesw-resize!important}.playground-module__XDWUqG__nw,.playground-module__XDWUqG__se{cursor:nwse-resize!important}.playground-module__XDWUqG__dragging{-webkit-user-select:none;user-select:none}.playground-module__XDWUqG__dragging .playground-module__XDWUqG__letter:not(.playground-module__XDWUqG__selected) .playground-module__XDWUqG__selectionBorder,.playground-module__XDWUqG__dragging .playground-module__XDWUqG__letter:not(.playground-module__XDWUqG__selected) .playground-module__XDWUqG__handle{opacity:0}.playground-module__XDWUqG__footer{flex:0 0 59px;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:59px;font-size:10px;display:grid}.playground-module__XDWUqG__footer p{color:var(--muted);text-align:center;grid-column:2;margin:0}.playground-module__XDWUqG__typeface{color:var(--muted);grid-column:3;justify-self:end;align-items:center;gap:12px;display:flex}.playground-module__XDWUqG__typeface[aria-busy=true]{opacity:.5}.playground-module__XDWUqG__typeface label{align-items:center;display:flex;position:relative}.playground-module__XDWUqG__typeface select{appearance:none;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:0;padding:8px 17px 8px 0;font-size:10px}.playground-module__XDWUqG__typeface select:hover{color:var(--ink)}.playground-module__XDWUqG__typeface select:disabled{cursor:default}.playground-module__XDWUqG__typeface label svg{pointer-events:none;position:absolute;right:0}.playground-module__XDWUqG__keyboardHelp{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.playground-module__XDWUqG__editor{z-index:10;border:1px solid var(--line);background:var(--paper);width:282px;max-height:calc(100svh - 110px);padding:20px;animation:.16s ease-out playground-module__XDWUqG__arrive;position:fixed;top:76px;right:32px;overflow-y:auto;box-shadow:0 8px 24px #22221f0d,0 2px 5px #22221f08}.playground-module__XDWUqG__editorHeader{margin:-8px -8px 20px;position:relative}.playground-module__XDWUqG__editor[data-side=left]{left:32px;right:auto}.playground-module__XDWUqG__page .playground-module__XDWUqG__editorMove{width:100%;color:inherit;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;background:0 0;border:0;flex-direction:column;align-items:center;gap:10px;padding:0 8px 4px;display:flex}.playground-module__XDWUqG__page .playground-module__XDWUqG__editorMove[data-moving=true]{cursor:grabbing}.playground-module__XDWUqG__editorGrip{color:var(--muted)}.playground-module__XDWUqG__editorPreview{pointer-events:none;place-items:center;width:100%;height:88px;display:grid}.playground-module__XDWUqG__editorPreview svg{display:block}.playground-module__XDWUqG__close{width:32px;height:32px;color:var(--muted);background:0 0;border:0;place-items:center;display:grid;position:absolute;top:-4px;right:-4px}.playground-module__XDWUqG__close:hover{color:var(--ink)}.playground-module__XDWUqG__ranges{gap:18px;display:grid}.playground-module__XDWUqG__range{gap:9px;display:grid}.playground-module__XDWUqG__range>span{justify-content:space-between;display:flex}.playground-module__XDWUqG__range output{font-variant-numeric:tabular-nums}.playground-module__XDWUqG__range small{color:var(--muted);font-size:inherit;padding-left:2px}.playground-module__XDWUqG__range input{appearance:none;cursor:ew-resize;background:0 0;width:100%;height:18px;margin:0}.playground-module__XDWUqG__range input::-webkit-slider-runnable-track{background:var(--line);height:2px}.playground-module__XDWUqG__range input::-webkit-slider-thumb{appearance:none;border:2px solid var(--paper);background:var(--ink);width:12px;height:12px;box-shadow:0 0 0 1px var(--ink);border-radius:50%;margin-top:-5px}.playground-module__XDWUqG__range input::-moz-range-track{background:var(--line);height:2px}.playground-module__XDWUqG__range input::-moz-range-thumb{border:2px solid var(--paper);background:var(--ink);width:9px;height:9px;box-shadow:0 0 0 1px var(--ink);border-radius:50%}.playground-module__XDWUqG__protect{cursor:pointer;color:var(--muted);justify-content:space-between;align-items:center;margin:14px 0 24px;font-size:10px;display:flex;position:relative}.playground-module__XDWUqG__protect input{opacity:0;width:15px;height:15px;position:absolute;right:0}.playground-module__XDWUqG__checkbox{color:#0000;border:1px solid #adada5;place-items:center;width:15px;height:15px;display:grid}.playground-module__XDWUqG__protect input:checked+.playground-module__XDWUqG__checkbox{background:var(--ink);border-color:var(--ink);color:var(--paper)}.playground-module__XDWUqG__protect input:focus-visible+.playground-module__XDWUqG__checkbox{outline:2px solid var(--accent);outline-offset:3px}.playground-module__XDWUqG__appearance{border-top:1px solid var(--line);padding-top:20px}.playground-module__XDWUqG__fieldLabel{font-size:10px}.playground-module__XDWUqG__segments{background:#e9e9e2;gap:3px;margin-top:10px;padding:3px;display:flex}.playground-module__XDWUqG__segments button{width:50%;color:var(--muted);background:0 0;border:1px solid #0000;padding:7px;font-size:10px}.playground-module__XDWUqG__segments button[aria-pressed=true]{background:var(--paper);color:var(--ink);border-color:#d8d8d0}.playground-module__XDWUqG__colorRow{justify-content:space-between;align-items:center;margin:21px 0 24px;display:flex}.playground-module__XDWUqG__swatches{align-items:center;gap:10px;display:flex}.playground-module__XDWUqG__swatches>button{background:var(--swatch);width:19px;height:19px;color:var(--paper);border:0;border-radius:50%;place-items:center;padding:0;display:grid}.playground-module__XDWUqG__swatches>button[aria-pressed=true]{outline:1px solid var(--swatch);outline-offset:3px}.playground-module__XDWUqG__customColor{cursor:pointer;border:1px solid var(--line);border-radius:50%;place-items:center;width:21px;height:21px;display:grid;position:relative}.playground-module__XDWUqG__customColor input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.playground-module__XDWUqG__customColor span{pointer-events:none}.playground-module__XDWUqG__customColor:focus-within{outline:2px solid var(--accent);outline-offset:3px}.playground-module__XDWUqG__editorFooter{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;align-items:center;padding-top:12px;font-size:10px;display:flex}.playground-module__XDWUqG__notice{pointer-events:none;z-index:20;opacity:0;background:var(--ink);color:var(--paper);padding:10px 16px;transition:opacity .14s,transform .14s;position:fixed;bottom:55px;left:50%;transform:translate(-50%,6px)}.playground-module__XDWUqG__noticeVisible{opacity:1;transform:translate(-50%)}@keyframes playground-module__XDWUqG__arrive{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media (max-width:600px){.playground-module__XDWUqG__page{min-height:550px;padding:0 14px}.playground-module__XDWUqG__header{flex-basis:60px;gap:12px;height:60px}.playground-module__XDWUqG__actions{gap:16px;font-size:10px}.playground-module__XDWUqG__footer{flex-direction:column;flex-basis:74px;justify-content:center;gap:0;height:74px;font-size:9px;display:flex}.playground-module__XDWUqG__typeface{order:-1;gap:16px}.playground-module__XDWUqG__footer p{padding-bottom:6px}.playground-module__XDWUqG__editor{width:min(282px,100vw - 28px);max-height:calc(100svh - 82px);top:auto;bottom:14px;right:14px}.playground-module__XDWUqG__editorHeader{margin-bottom:16px}.playground-module__XDWUqG__editor[data-side=left]{left:auto;right:14px}.playground-module__XDWUqG__editor[data-vertical=top]{top:64px;bottom:auto}.playground-module__XDWUqG__notice{bottom:75px}}@media (max-width:360px){.playground-module__XDWUqG__wordmarkDescription{top:calc(100% + 7px);left:0;transform:none}}@media (prefers-reduced-motion:reduce){.playground-module__XDWUqG__editor,.playground-module__XDWUqG__typingCursor,.playground-module__XDWUqG__page .playground-module__XDWUqG__letter{animation:none}.playground-module__XDWUqG__notice,.playground-module__XDWUqG__page .playground-module__XDWUqG__header,.playground-module__XDWUqG__page .playground-module__XDWUqG__footer{transition:none}.playground-module__XDWUqG__openingSeed{display:none}.playground-module__XDWUqG__page[data-opening] .playground-module__XDWUqG__letter{visibility:visible}.playground-module__XDWUqG__page[data-opening] .playground-module__XDWUqG__header,.playground-module__XDWUqG__page[data-opening] .playground-module__XDWUqG__footer{opacity:1}}.playground-module__XDWUqG__importFont{color:var(--muted);background:0 0;border:0;padding:0;display:inline-flex}.playground-module__XDWUqG__importFont:hover:not(:disabled){color:var(--accent)}.playground-module__XDWUqG__importFont:disabled{opacity:.4}.playground-module__XDWUqG__fileInput{display:none}.playground-module__XDWUqG__editorFooter .playground-module__XDWUqG__exports{gap:16px;display:inline-flex}.playground-module__XDWUqG__editorFooter a{text-decoration:none}.playground-module__XDWUqG__editorFooter a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}