:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg: #fff;--text: #1f1f1f;--muted: #6b7280;--ring: #2563eb;--card: #ffffff;--border: #e5e7eb;--shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 2px 4px rgba(0, 0, 0, .05), 0 10px 30px rgba(0, 0, 0, .08), 0 10px 30px rgba(0, 0, 0, .08);--radius: 10px;--pad: 12px;--hdr: 60px}:root{color-scheme:light}html,body,#root{height:100vh;background:var(--bg)!important;color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Arial;margin:0;overflow:hidden;font-size:clamp(12px,1.1vw + .4rem,16px)}.g-header{position:fixed;top:0;left:0;right:0;height:var(--hdr);display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid var(--border);z-index:50}.g-title{font-size:clamp(20px,2.2vw + .6rem,34px);font-weight:800;letter-spacing:-.02em;line-height:1;margin:0;color:#111827}.g-title:after{content:"";display:inline-block;width:clamp(6px,.6vw,8px);height:clamp(6px,.6vw,8px);background:var(--ring);border-radius:50%;margin-left:clamp(6px,.7vw,10px);vertical-align:middle}.g-root{box-sizing:border-box;height:100vh;padding:calc(var(--hdr) + 10px) 12px 12px;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:10px}.g-toolbar{flex:0 0 auto;padding:10px;display:grid;gap:10px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.g-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.g-segment{display:inline-flex;gap:6px;padding:6px;border:1px solid var(--border);border-radius:9999px;background:#fafafa}.control{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:#fafafa;font-size:clamp(11px,.9rem,14px)}.control .label{font-size:12px;color:var(--muted)}.control .color{width:26px;height:26px;border:0;background:transparent;padding:0}.control .range{width:clamp(100px,26vw,180px)}.badge{font-size:12px;color:var(--muted);padding:2px 8px;border:1px solid var(--border);border-radius:9999px;background:#fff}.btn{height:clamp(28px,4.5vh,36px);padding:0 clamp(8px,1.2vw,14px);border-radius:8px;border:1px solid var(--border);background:#fff;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:clamp(12px,.9rem,14px);white-space:nowrap}.btn:hover{border-color:#d1d5db}.btn.active{outline:2px solid var(--ring);outline-offset:1px}.btn.primary{background:var(--ring);color:#fff;border-color:var(--ring)}.btn.primary:hover{filter:brightness(.97)}.btn.ghost{background:#fafafa}.g-main{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;justify-content:center}.canvas-card{flex:1 1 auto;min-height:0;min-width:0;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;border:10px solid #000}.canvas-card{padding:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.canvas-wrap{position:relative;display:inline-block;line-height:0;max-width:100%;max-height:100%;box-sizing:content-box;border:0;box-shadow:0 0 0 1px var(--border) inset;border-radius:var(--radius);background:#fff}.canvas{display:block;border:0;border-radius:var(--radius);background:#fff}.pointer{position:absolute;transform:translate(-50%,-50%);pointer-events:none;border:none;box-shadow:none;outline:none}@media(max-width:900px){.g-toolbar{gap:8px}.g-row{gap:6px}.g-title{font-size:clamp(34px,2vw + .6rem,34px)}.control .range{width:clamp(90px,30vw,150px)}}@media(max-width:720px){:root{--hdr: 56px}.btn{height:clamp(36px,4.2vh,34px);padding:0 10px;font-weight:600}.control{padding:5px 8px}.control .color{width:24px;height:24px}.control .range{width:clamp(80px,36vw,130px)}.g-segment{width:100%;justify-content:space-between}.g-root{padding:calc(var(--hdr) + 8px) 10px 10px}}@media(max-width:480px){:root{--hdr: 52px}.g-title{font-size:clamp(28px,1.8vw + .6rem,34px)}.btn{height:30px;padding:0 8px;font-size:12px}.badge{font-size:11px}.control{gap:6px}.control .range{width:clamp(70px,40vw,110px)}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}