@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Nunito:wght@500;600;700;800;900&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#332f2a;--muted:#827a70;--paper:#f7f2e8;--cream:#fffaf0;--cream-2:#f0e9de;--line:#cfc5b7;--line-strong:#756b60;--coral:#f27059;--yellow:#f9dc5c;--mint:#67d5b5;--purple:#8a5cf5;font-synthesis:none;text-rendering:optimizelegibility;font-family:Nunito,ui-rounded,system-ui,sans-serif}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#f3ece3;--muted:#b7aca0;--paper:#1f1b19;--cream:#2b2522;--cream-2:#39312c;--line:#51463f;--line-strong:#78685e}*{box-sizing:border-box}html{background:var(--paper);min-width:320px}body{min-width:320px;min-height:100vh;color:var(--ink);margin:0;overflow-x:hidden}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:2px;outline:3px solid #8a5cf566}.app-shell{background:radial-gradient(circle at 12% 22%, #f270590f, transparent 23rem), radial-gradient(circle at 91% 11%, #67d5b517, transparent 25rem), linear-gradient(#52453606 1px, transparent 1px), linear-gradient(90deg, #52453606 1px, transparent 1px), var(--paper);background-size:auto,auto,24px 24px,24px 24px,auto;min-height:100vh;padding:16px clamp(12px,2.6vw,38px) 28px;overflow:hidden}.site-header{border-bottom:1px solid var(--line);align-items:center;gap:24px;max-width:1440px;min-height:50px;margin:0 auto 14px;display:flex}.brand{color:var(--ink);letter-spacing:-.02em;text-transform:uppercase;align-items:center;gap:9px;font-size:14px;font-weight:900;line-height:.9;text-decoration:none;display:inline-flex}.brand b{color:var(--coral)}.bead-logo{width:35px;height:32px;display:block;position:relative}.bead-logo i{background:var(--bead);border-radius:50%;width:11px;height:11px;position:absolute;-webkit-mask:radial-gradient(circle,#0000 0 22%,#000 24%);mask:radial-gradient(circle,#0000 0 22%,#000 24%)}.bead-logo i:first-child{top:0;left:0}.bead-logo i:nth-child(2){top:4px;left:11px}.bead-logo i:nth-child(3){top:0;left:22px}.bead-logo i:nth-child(4){top:17px;left:5px}.bead-logo i:nth-child(5){top:13px;left:16px}.site-header>p{color:var(--muted);letter-spacing:.16em;margin:0;font:500 10px DM Mono,monospace}.header-actions{align-items:center;gap:10px;margin-left:auto;display:flex}.theme-switcher{border:1px solid var(--line);background:#fffaf08c;border-radius:99px;align-items:center;gap:3px;padding:3px;display:inline-flex}.theme-switcher button{height:27px;color:var(--muted);cursor:pointer;letter-spacing:.05em;background:0 0;border:0;border-radius:99px;justify-content:center;align-items:center;gap:5px;padding:0 8px;font:500 8px DM Mono,monospace;display:inline-flex}.theme-switcher button:hover{color:var(--ink)}.theme-switcher button.selected{color:#3f372e;box-shadow:0 2px 5px #3a2e2321}.theme-switcher button.system.selected{background:var(--mint)}.theme-switcher button.light.selected{background:var(--yellow)}.theme-switcher button.dark.selected{background:var(--purple);color:#fff}.github-link{color:var(--ink);letter-spacing:.08em;border:1px solid #0000;align-items:center;gap:7px;padding:7px 9px;font:500 10px DM Mono,monospace;text-decoration:none;display:inline-flex}.github-link:hover{border-color:var(--line);color:var(--coral)}.workbench{border:1px solid var(--line);background:#fffaf0e6;border-radius:20px;grid-template-rows:auto minmax(560px,1fr);grid-template-columns:minmax(0,1.55fr) minmax(310px,.62fr);gap:0;max-width:1440px;margin:0 auto;display:grid;position:relative;overflow:hidden;box-shadow:0 16px 50px #42362714,8px 8px #f270591a}.workbench:before,.workbench:after{content:"";z-index:3;background:var(--purple);pointer-events:none;border-radius:50%;width:15px;height:15px;position:absolute;-webkit-mask:radial-gradient(circle,#0000 0 22%,#000 24%);mask:radial-gradient(circle,#0000 0 22%,#000 24%)}.workbench:before{top:17px;left:18px}.workbench:after{background:var(--mint);top:17px;right:18px}.panel{background:#fffaf0b8;min-width:0}.input-panel{border-bottom:1px solid var(--line);grid-column:1/-1;grid-template-columns:minmax(230px,.4fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding:24px 36px;display:grid}.preview-panel{flex-direction:column;grid-area:2/1;min-width:0;display:flex}.tools-panel{border-left:1px solid var(--line);background:#fffaf0e0;flex-direction:column;grid-area:2/2;min-width:0;display:flex}.panel-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.panel-heading>div,.source-intro .panel-heading{align-items:center;gap:10px;display:flex}.panel-heading span:last-child{gap:2px;display:grid}.panel-heading small{color:var(--muted);letter-spacing:.13em;font:500 9px DM Mono,monospace}.panel-heading b{letter-spacing:-.01em;font-size:15px;font-weight:800}.source-intro{gap:8px;display:grid}.source-intro>p{max-width:340px;color:var(--muted);margin:0;font-size:12px;line-height:1.5}.badge-form{min-width:0}.badge-form>label{color:var(--muted);letter-spacing:.12em;margin-bottom:7px;font:500 9px DM Mono,monospace;display:block}.url-control{background:#fffdfa;border:1px solid #bfb3a4;border-radius:11px;grid-template-columns:minmax(0,1fr) auto;padding:5px;display:grid;box-shadow:inset 0 1px 2px #32281e0d}.url-control:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px #8a5cf51f}.url-control input{color:#554e47;background:0 0;border:0;outline:0;min-width:0;height:44px;padding:0 13px;font:400 12px DM Mono,monospace}.url-control button{background:var(--coral);color:#fff;cursor:pointer;letter-spacing:.08em;border:0;border-radius:7px;justify-content:center;align-items:center;gap:8px;height:44px;padding:0 17px;font:700 10px DM Mono,monospace;display:inline-flex;box-shadow:inset 0 -3px #7a2b1f2e}.url-control button:hover{background:#e85f49;transform:translateY(-1px)}.url-control button:disabled{opacity:.65;cursor:wait}.form-meta{align-items:center;gap:12px;min-height:25px;margin-top:8px;display:flex}.examples{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.examples>span{color:#999086;letter-spacing:.1em;margin-right:2px;font:500 8px DM Mono,monospace}.examples button{color:#827a70;cursor:pointer;letter-spacing:.06em;background:0 0;border:1px solid #0000;border-radius:99px;padding:3px 7px;font:500 8px DM Mono,monospace}.examples button:hover,.examples button.active{border-color:var(--line);color:var(--coral);background:#fff}.load-state{color:#a39a90;white-space:nowrap;text-overflow:ellipsis;max-width:230px;margin-left:auto;font:400 8px DM Mono,monospace;overflow:hidden}.load-state.ready:before{content:"";background:#38b000;border-radius:50%;width:6px;height:6px;margin-right:6px;display:inline-block}.load-state.error{color:#c54838}.preview-heading{min-height:64px;padding:15px 19px 12px}.grid-size{color:#8f877e;letter-spacing:.08em;align-items:center;gap:6px;font:500 9px DM Mono,monospace;display:inline-flex}.pegboard-wrap{background:#d9d0c4;border:1px solid #a99e90;border-radius:12px;flex-direction:column;flex:1;justify-content:center;min-height:clamp(470px,60vh,620px);margin:0 19px 19px;padding:48px 28px 38px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 5px #ede7dc,inset 0 0 0 6px #b9ae9f,inset 0 15px 35px #42382d1a}.pegboard{z-index:1;place-items:center;display:grid;position:absolute;inset:21px}.pegboard canvas{width:100%;height:100%;display:block}.preview-empty{color:#82786c;letter-spacing:.14em;align-content:center;place-items:center;gap:12px;font:500 10px DM Mono,monospace;display:grid;position:absolute;inset:0}.preview-empty svg{color:var(--coral)}.board-note{z-index:2;color:#948b80;letter-spacing:.09em;text-transform:uppercase;align-items:center;gap:8px;font:500 8px DM Mono,monospace;display:flex;position:absolute;bottom:19px;left:30px;right:30px}.board-note>span:first-child{background:var(--coral);border-radius:50%;width:6px;height:6px}.board-note>span:last-child{background:#50443826;flex:1;height:1px}.tool-group{border-bottom:1px solid #e3dbd0;padding:18px 20px}.tool-group:last-child{border-bottom:0}.icon-button{border:1px solid var(--line);width:28px;height:28px;color:var(--muted);cursor:pointer;background:0 0;border-radius:50%;place-items:center;display:grid}.icon-button:hover{color:var(--coral);transform:rotate(-30deg)}.setting-block{border-top:1px solid var(--line);margin-top:12px;padding:14px 0 12px}.setting-block label{justify-content:space-between;align-items:baseline;margin-bottom:9px;display:flex}.setting-block label>span{color:var(--muted);letter-spacing:.1em;font:500 9px DM Mono,monospace}.setting-block output{color:var(--coral);font:700 10px DM Mono,monospace}.setting-block input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:12px;margin:4px 0 0}.setting-block input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--coral) 0 var(--progress), #ded6cc var(--progress) 100%);height:4px}.setting-block input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--coral);border:3px solid #fffaf0;border-radius:50%;outline:1px solid #bbad9d;width:15px;height:15px;margin-top:-5.5px}.setting-block input[type=range]::-moz-range-track{background:#ded6cc;height:4px}.setting-block input[type=range]::-moz-range-progress{background:var(--coral);height:4px}.setting-block input[type=range]::-moz-range-thumb{background:var(--coral);border:3px solid #fffaf0;border-radius:50%;width:10px;height:10px}.range-ends{color:#aaa197;justify-content:space-between;font:400 8px DM Mono,monospace;display:flex}.bead-style-note{background:var(--cream-2);border-radius:9px;align-items:center;gap:9px;padding:10px 11px;display:flex}.bead-style-note>i{background:var(--mint);border-radius:50%;flex:none;width:22px;height:22px;-webkit-mask:radial-gradient(circle,#0000 0 22%,#000 24%);mask:radial-gradient(circle,#0000 0 22%,#000 24%)}.bead-style-note>span{gap:1px;display:grid}.bead-style-note b{font-size:11px}.bead-style-note small{color:var(--muted);font-size:9px}.tool-label{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;display:flex}.tool-label>span{color:var(--muted);letter-spacing:.12em;font:500 9px DM Mono,monospace}.tool-label b{font-size:11px}.color-list{border-top:1px solid var(--line);scrollbar-color:#c5b8aa transparent;scrollbar-width:thin;max-height:170px;overflow:auto}.color-row{border-bottom:1px solid #e9e2d8;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;min-height:40px;display:grid}.color-row>i{border:1px solid #332f2a1f;border-radius:50%;width:19px;height:19px}.color-row>span{gap:1px;display:grid}.color-row b{font-size:10px}.color-row small{color:#a1988e;font:400 8px DM Mono,monospace}.color-row strong{color:#655d55;font:500 10px DM Mono,monospace}.export-group{background:linear-gradient(135deg,#f270590e,#0000 72%);margin-top:0}.export-group .panel-heading{margin-bottom:10px}.download-main{background:var(--coral);color:#fff;cursor:pointer;text-align:left;border:0;border-radius:9px;grid-template-columns:28px 1fr auto;align-items:center;width:100%;min-height:56px;padding:0 12px;display:grid;box-shadow:inset 0 -4px #75251b2e,0 5px 12px #c4493629}.download-main:hover{background:#e7604b;transform:translateY(-1px)}.download-main:disabled,.export-secondary button:disabled{opacity:.5;cursor:default}.download-main>span{gap:2px;display:grid}.download-main b{letter-spacing:.06em;font:700 10px DM Mono,monospace}.download-main small{color:#ffffffb8;letter-spacing:.05em;font:400 8px DM Mono,monospace}.export-secondary{grid-template-columns:1fr 1.1fr 1.1fr;gap:5px;margin-top:6px;display:grid}.export-secondary button,.export-secondary a{border:1px solid var(--line);color:#7e756c;cursor:pointer;white-space:nowrap;background:0 0;border-radius:7px;justify-content:center;align-items:center;gap:4px;min-width:0;height:34px;padding:0 5px;font:500 8px DM Mono,monospace;text-decoration:none;display:flex}.export-secondary button:hover,.export-secondary a:hover{border-color:var(--coral);color:var(--coral)}.export-secondary button span{color:#aaa097;font-size:7px}footer{color:#978e84;text-align:center;gap:3px;max-width:1440px;margin:24px auto 0;font:400 10px/1.6 DM Mono,monospace;display:grid}.footer-bead{background:var(--coral);vertical-align:-1px;border-radius:50%;width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-mask:radial-gradient(circle,#0000 0 22%,#000 24%);mask:radial-gradient(circle,#0000 0 22%,#000 24%)}footer a{color:#5f5851;text-underline-offset:3px}footer a:hover,.badge3d-accent{color:var(--coral)}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}:root[data-theme=dark] .app-shell{background:radial-gradient(circle at 12% 22%, #f270591a, transparent 23rem), radial-gradient(circle at 91% 11%, #67d5b514, transparent 25rem), linear-gradient(#fff5e606 1px, transparent 1px), linear-gradient(90deg, #fff5e606 1px, transparent 1px), var(--paper);background-size:auto,auto,24px 24px,24px 24px,auto}:root[data-theme=dark] .theme-switcher{background:#2b2522cc}:root[data-theme=dark] .workbench{background:#2b2522eb;box-shadow:0 16px 50px #00000047,8px 8px #f270591f}:root[data-theme=dark] .panel,:root[data-theme=dark] .tools-panel{background:#2b2522e0}:root[data-theme=dark] .url-control{background:#241f1c;border-color:#6a5b52;box-shadow:inset 0 1px 2px #00000047}:root[data-theme=dark] .url-control input{color:#eee4da}:root[data-theme=dark] .examples>span,:root[data-theme=dark] .examples button{color:#a99d92}:root[data-theme=dark] .examples button:hover,:root[data-theme=dark] .examples button.active{color:#ff8a74;background:#352e2a;border-color:#5a4e46}:root[data-theme=dark] .load-state{color:#9c9086}:root[data-theme=dark] .tool-group,:root[data-theme=dark] .setting-block,:root[data-theme=dark] .color-list,:root[data-theme=dark] .color-row{border-color:#493f39}:root[data-theme=dark] .setting-block input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--coral) 0 var(--progress), #554b45 var(--progress) 100%)}:root[data-theme=dark] .setting-block input[type=range]::-moz-range-track{background:#554b45}:root[data-theme=dark] .color-row strong{color:#c9bdb2}:root[data-theme=dark] .color-row small{color:#91857b}:root[data-theme=dark] .export-secondary button,:root[data-theme=dark] .export-secondary a{color:#c1b5aa;border-color:#554a43}:root[data-theme=dark] footer{color:#9f9389}:root[data-theme=dark] footer a{color:#d4c8bc}@media (width>=761px){.app-shell{padding-top:12px;padding-bottom:16px}.site-header{min-height:46px;margin-bottom:10px}.workbench{grid-template-rows:auto clamp(500px,100vh - 300px,600px)}.input-panel{padding-top:20px;padding-bottom:20px}.pegboard-wrap{min-height:0}.tools-panel{overflow-y:auto}.tool-group{padding-top:15px;padding-bottom:15px}.setting-block{margin-top:10px;padding-top:11px;padding-bottom:9px}.color-list{max-height:140px}footer{margin-top:16px}}@media (width<=980px){.workbench{grid-template-columns:minmax(0,1.35fr) minmax(285px,.75fr)}.input-panel{grid-template-columns:minmax(210px,.36fr) minmax(0,1fr);gap:24px}.site-header>p{display:none}.export-secondary{grid-template-columns:1fr 1fr}.export-secondary a{grid-column:1/-1}}@media (width<=760px){.workbench{grid-template-rows:auto;grid-template-columns:minmax(0,1fr)}.input-panel,.preview-panel,.tools-panel{grid-area:auto/1}.input-panel{grid-template-columns:1fr;gap:16px;padding:18px 16px}.source-intro>p{max-width:none}.preview-heading{padding:14px 14px 11px}.pegboard-wrap{min-height:420px;margin:0 10px 10px}.tools-panel{border-top:1px solid var(--line);border-left:0;grid-template-columns:1fr 1fr;display:grid}.settings-group{border-right:1px solid var(--line)}.export-group{grid-column:1/-1}}@media (width<=540px){.app-shell{padding:9px 8px 18px}.workbench:before,.workbench:after{display:none}.site-header{min-height:44px;margin-bottom:8px;padding:0 3px}.github-link span,.grid-size,.theme-switcher button span{display:none}.theme-switcher button{width:27px;padding:0}.url-control{grid-template-columns:1fr;gap:5px}.url-control input{background:#fffdfa}.url-control button{width:100%}.form-meta{flex-direction:column;align-items:flex-start}.load-state{margin-left:0}.pegboard-wrap{min-height:330px;padding:42px 10px 35px}.board-note{left:17px;right:17px}.tools-panel{grid-template-columns:1fr}.settings-group{border-right:0}.export-group{grid-column:auto}.tool-group{padding:17px 15px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}