.token-demo{z-index:1;max-width:1600px;color:var(--starry-text);margin:82px auto 24px;padding:0 20px;position:relative}.tk-heading{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.tk-heading h1{margin:0;font-size:1.35rem}.tk-heading small{color:var(--starry-cyan);margin-left:8px;font-size:.6rem}.tk-heading>div{gap:8px;display:flex}.token-demo button,.token-demo select{font:inherit;border:1px solid var(--starry-border);color:var(--starry-text);background:var(--starry-bg);cursor:pointer;border-radius:6px;padding:8px 10px;font-size:.75rem}.token-demo button:disabled{opacity:.35;cursor:default}.token-demo button[aria-pressed=true],.token-demo .tk-export{border-color:var(--starry-cyan);color:var(--starry-cyan);background:color-mix(in srgb,var(--starry-cyan) 13%,var(--starry-bg))}.token-demo :focus-visible{outline:2px solid var(--starry-gold);outline-offset:2px}.tk-workspace{grid-template-columns:190px minmax(0,1fr) 190px;align-items:start;gap:14px;display:grid}.tk-sidebar{border:1px solid var(--starry-border);background:color-mix(in srgb,var(--starry-bg) 96%,transparent);border-radius:9px;padding:15px}.tk-sidebar h2{margin:0 0 12px;font-size:.9rem}.tk-note{color:var(--starry-text-dim);font-size:.68rem;line-height:1.5}.token-demo label{margin:16px 0;font-size:.72rem;display:block}.token-demo label>span{float:right;color:var(--starry-text-dim);font-size:.65rem}.token-demo input[type=range]{width:100%;accent-color:var(--starry-cyan);margin-top:9px;display:block}.token-demo fieldset{border:0;min-width:0;margin:0;padding:0}.tk-inline{gap:4px;display:flex}.tk-inline button{padding:6px;font-size:.65rem}.token-demo details{margin-top:18px;font-size:.7rem;line-height:1.6}.token-demo summary{cursor:pointer;color:var(--starry-cyan)}.tk-editor{box-sizing:border-box;width:100%;min-width:0;max-width:calc(100dvh - 161px);margin:0 auto;padding-left:49px;position:relative}.tk-stage{border:1px solid var(--starry-border);aspect-ratio:1;background:#55565a;border-radius:8px;width:100%;max-width:calc(100dvh - 210px);margin:auto;position:relative;overflow:hidden}.tk-stage canvas{touch-action:none;width:100%;height:100%;display:block}.tk-editor>p{text-align:center;min-height:1em;margin:8px 0;font-size:.7rem}.tk-toolbar{flex-direction:column;gap:6px;width:39px;display:flex;position:absolute;top:0;left:0}.tk-toolbar button{width:39px;height:39px;padding:4px;font-size:1.2rem}.tk-toolbar hr{border:0;border-top:1px solid var(--starry-border);width:100%;margin:3px 0}.tk-tool{position:relative}.tk-tooltip{border:1px solid var(--starry-border);background:var(--starry-bg);z-index:7;pointer-events:none;border-radius:6px;width:195px;padding:9px;font-size:.75rem;display:none;position:absolute;top:0;right:45px}.tk-tooltip small{color:var(--starry-text-dim);margin-top:4px;font-size:.65rem;line-height:1.4;display:block}.tk-tool:hover .tk-tooltip{display:block}.tk-tool:has(:focus-visible) .tk-tooltip{display:block}.tk-brush-panel{z-index:6;background:var(--starry-bg);border:1px solid var(--starry-border);border-radius:8px;width:195px;padding:12px;position:absolute;top:8px;right:calc(100% + 8px);box-shadow:0 8px 25px #0007}.tk-brush-panel>div{justify-content:space-between;align-items:center;font-size:.8rem;display:flex}.tk-brush-panel button{padding:2px 7px}.tk-brush-panel label{margin:10px 0}.tk-border-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.tk-border-grid button{aspect-ratio:1;color:#eee;padding:5px}.tk-border-grid svg{width:100%;height:100%;display:block}.tk-color{justify-content:space-between;align-items:center;display:flex!important}.tk-color input{background:0 0;border:0;width:54px;height:28px;padding:0}.tk-selection{pointer-events:none;box-sizing:border-box;border:1px solid #fff9;position:absolute}.token-demo .tk-handle{pointer-events:auto;touch-action:none;background:#ddd;border:1px solid #333;border-radius:0;width:12px;min-width:0;height:12px;padding:0;position:absolute}.tk-handle.nw{cursor:nwse-resize;top:-6px;left:-6px}.tk-handle.ne{cursor:nesw-resize;top:-6px;right:-6px}.tk-handle.sw{cursor:nesw-resize;bottom:-6px;left:-6px}.tk-handle.se{cursor:nwse-resize;bottom:-6px;right:-6px}.token-demo .tk-empty{white-space:nowrap;padding:12px 16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:1000px){.tk-workspace{grid-template-columns:155px minmax(0,1fr) 145px;gap:9px}.tk-sidebar{padding:10px}.token-demo{padding:0 12px}.tk-stage{max-width:none}}@media (max-width:720px){.tk-workspace{grid-template-columns:1fr 1fr}.tk-editor{grid-area:1/1/auto/-1}.tk-stage{max-width:480px}.tk-heading{flex-wrap:wrap}.token-demo{margin-top:82px}.tk-border-grid{grid-template-columns:repeat(3,1fr)}.tk-brush-panel{width:165px}}.tk-border-upload{width:100%;margin-top:10px}.tk-custom-border{width:70px;height:70px;margin-top:8px}.tk-custom-border img{max-width:100%;max-height:100%;margin:auto;display:block}.token-demo .tk-check{align-items:center;gap:7px;display:flex}.token-demo label select{width:100%;margin-top:6px;display:block}@media (max-width:720px){.tk-brush-panel{z-index:20;width:180px;position:fixed;inset:auto auto 18px 12px}}.tk-tool:has(button[aria-pressed=true]) .tk-tooltip{display:none}.tk-view-controls{justify-content:center;align-items:center;gap:6px;margin:0 0 8px;font-size:.7rem;display:flex}.tk-view-controls button{padding:5px 9px}.tk-view-controls output{text-align:center;min-width:40px}.tk-stage{overscroll-behavior:contain;overflow:auto}.tk-world{aspect-ratio:1;position:absolute}.tk-world canvas{width:100%;height:100%;position:absolute;inset:0}.tk-toolbar{top:39px}.tk-brush-panel{top:47px}.tk-view-controls~.tk-stage{max-width:calc(100dvh - 250px)}@media (max-width:1000px){.tk-view-controls~.tk-stage{max-width:none}}.tk-brush-cursor{pointer-events:none;z-index:3;box-sizing:border-box;border:1px solid #fff;border-radius:50%;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #111}.tk-brush-cursor:after{content:"";background:#fff;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #111}.tk-heading>div{flex-wrap:wrap;max-width:100%}.token-demo .tk-sidebar{padding:10px}.token-demo .tk-sidebar h2{margin-bottom:8px}.token-demo label{margin:8px 0}.token-demo input[type=range]{margin-top:4px}.token-demo details{margin-top:8px}.token-demo .tk-border-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.token-demo .tk-border-grid button{min-width:0;padding:3px}.token-demo .tk-border-upload{margin-top:6px}.token-demo .tk-custom-border{width:42px;height:42px;margin-top:5px}.token-demo .tk-note{margin:6px 0;line-height:1.35}.token-demo .tk-heading{margin-bottom:8px}.token-demo .tk-heading>div{gap:6px}.token-demo .tk-sidebar button,.token-demo .tk-sidebar select{padding:6px 7px}@media (min-width:721px){:is(html:has(.token-demo),body:has(.token-demo)){overflow:hidden}.token-demo{box-sizing:border-box;flex-direction:column;width:100%;max-width:1600px;margin:0 auto;padding:0 14px;display:flex;position:fixed;inset:62px 0}.tk-heading{flex-shrink:0}.tk-workspace{flex:1;grid-template-columns:175px minmax(0,1fr) 185px;gap:10px;min-height:0}.tk-sidebar{box-sizing:border-box;overscroll-behavior:contain;scrollbar-width:thin;max-height:100%;overflow:auto}.tk-editor{max-width:calc(100dvh - 180px);padding-left:40px}.tk-view-controls~.tk-stage{max-width:calc(100dvh - 220px)}.tk-toolbar{gap:4px;width:32px}.tk-toolbar button{width:32px;height:32px;font-size:1rem}.tk-editor>p{margin:5px 0;font-size:.65rem;line-height:1.35}.tk-tooltip{right:38px}}@media (min-width:721px) and (max-height:650px){.token-demo .tk-sidebar>.tk-note{display:none}.token-demo label{margin:5px 0}.token-demo .tk-toolbar{gap:2px}.token-demo .tk-toolbar button{height:27px}}.tk-preview-options{border-top:1px solid var(--starry-border);margin-top:10px;padding-top:8px}.tk-preview-options .tk-color input{width:36px;height:24px}.tk-preview-options .tk-inline{flex-wrap:wrap}