:root{--red: #e0272c;--yellow: #ffdd00;--green: #00954c;--lblue: #64c3e6;--pink: #f4a4c0;--bg: #fbfaf7;--panel: #ffffff;--glass: rgba(255, 255, 255, .7);--ink: #121117;--muted: #6a6874;--line: rgba(18, 17, 23, .08);--line-strong: rgba(18, 17, 23, .16);--soft: #f3f2f6;--soft-hover: #e7e5ee;--accent: #121117;--accent-ink: #ffffff;--warn-bg: #fff6e5;--warn-line: #f0c36d;--warn-ink: #7a5200;--bad: #c0392b;--dots: rgba(18, 17, 23, .13);--blob-opacity: .45;--radius: 24px;--shadow: 0 16px 32px -24px rgba(18, 17, 23, .35);--display: "Bricolage Grotesque Variable", system-ui, sans-serif;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter Variable,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}:focus-visible{outline:3px solid var(--lblue);outline-offset:2px}.backdrop{position:absolute;inset:0 0 auto;height:760px;pointer-events:none;z-index:0;overflow:hidden}.backdrop:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--dots) 1.2px,transparent 1.6px);background-size:22px 22px;-webkit-mask:radial-gradient(60% 70% at 55% 20%,#000,transparent 75%);mask:radial-gradient(60% 70% at 55% 20%,#000,transparent 75%)}.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:var(--blob-opacity)}.blob.b1{width:420px;height:420px;background:var(--pink);right:6%;top:20px}.blob.b2{width:360px;height:360px;background:var(--lblue);left:30%;top:180px;opacity:calc(var(--blob-opacity) * .75)}.blob.b3{width:280px;height:280px;background:var(--yellow);left:2%;top:60px;opacity:calc(var(--blob-opacity) * .7)}.nav{position:relative;z-index:5;margin:14px auto 0;max-width:1600px;width:calc(100% - 32px);display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--glass);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--line);border-radius:999px}.home{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;border-radius:999px}.logo{display:block;width:26px;height:26px;flex:none}.brand{font:700 17px var(--display);letter-spacing:-.02em;margin-left:4px}.nav-sub{margin-left:auto;font-size:13px;font-weight:500;color:var(--muted);padding:4px 12px;border:1px solid var(--line);border-radius:999px}.layout{position:relative;z-index:1;max-width:1600px;margin:0 auto;display:grid;grid-template-columns:minmax(260px,1fr) minmax(380px,1.6fr) minmax(300px,1.1fr);gap:16px;padding:22px 16px 28px;align-items:start}@media(max-width:1100px){.layout{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 20px 22px;min-width:0}.panel h2{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:700 22px/1.1 var(--display);letter-spacing:-.02em}.panel h2 i{font:600 12px/1 Inter Variable,system-ui,sans-serif;font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);flex:none}fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:14px 0 16px;min-width:0}legend{padding:0 8px 0 0;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}label.check,label.slider{display:block;margin:10px 0}label.check.inline{display:inline-flex;align-items:center;gap:6px;margin:0 14px 0 0}input[type=checkbox]{accent-color:var(--accent)}label.slider input[type=range]{width:100%;margin-top:6px;accent-color:var(--accent)}output{font-variant-numeric:tabular-nums;font-weight:600}.hint{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}select,input[type=number],input[type=text]{width:100%;padding:8px 12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);color:var(--ink);font:inherit}button{font:inherit;font-size:14px;font-weight:500;line-height:1.2;cursor:pointer;border-radius:999px;border:0;background:var(--soft);color:var(--ink);padding:9px 16px;transition:background .15s,transform .2s,box-shadow .2s}button:hover:not(:disabled){background:var(--soft-hover)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);color:var(--accent-ink);font-weight:600;padding:13px 20px}button.primary:hover:not(:disabled){background:var(--accent);transform:translateY(-1px);box-shadow:0 10px 24px -10px #1211178c}.field-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.dropzone{border:2px dashed var(--line-strong);border-radius:18px;padding:28px 16px;text-align:center;display:grid;gap:4px;color:var(--muted);cursor:pointer;transition:border-color .15s,background .15s}.dropzone strong{color:var(--ink);font:700 18px var(--display);letter-spacing:-.01em}.dropzone:hover,.dropzone:focus-visible,.dropzone.is-over{border-color:var(--ink);background:var(--soft)}.advanced{border:1px solid var(--line);border-radius:18px;padding:0 16px;margin:14px 0;background:color-mix(in srgb,var(--soft) 40%,transparent)}.advanced summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;padding:14px 0;font:700 16px var(--display);letter-spacing:-.01em}.advanced summary::-webkit-details-marker{display:none}.advanced summary:after{content:"+";grid-row:1 / span 2;grid-column:2;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font:500 18px/1 Inter Variable,system-ui,sans-serif;transition:transform .2s}.advanced[open] summary:after{transform:rotate(45deg)}.advanced summary span{grid-column:1;font:400 12.5px Inter Variable,system-ui,sans-serif;letter-spacing:0;color:var(--muted)}.advanced[open]{padding-bottom:4px}.preview-panel{display:flex;flex-direction:column;min-height:420px}.preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.preview-head h2{margin:0}.tabs,.seg{display:flex;gap:2px;padding:3px;background:var(--soft);border-radius:999px}.seg{margin:4px 0 8px}.tab,.seg-btn{flex:1;background:transparent;padding:7px 12px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}.tab:hover:not(:disabled),.seg-btn:hover:not(:disabled){background:transparent;color:var(--ink)}.tab.is-active,.seg-btn.is-active,.tab.is-active:hover,.seg-btn.is-active:hover{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px #1211171f,0 0 0 1px var(--line)}.preview-stage{display:flex;flex-direction:column;align-items:center}#preview{width:100%;height:auto;max-height:62vh;object-fit:contain;background:repeating-conic-gradient(#0000 0% 25%,#7f7f7f1a 0% 50%) 50% / 16px 16px;border-radius:16px}.viewer3d{width:100%;aspect-ratio:4 / 3;max-height:62vh;border-radius:16px;background:linear-gradient(160deg,#f7f5fb,#efedf4);display:grid;place-items:center;color:var(--muted)}.viewer3d canvas{width:100%;height:100%;display:block;border-radius:16px}.cell-readout{margin:8px 0 0;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;min-height:1.2em}.preview-toggles{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 0}.downloads{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;width:100%}@media(max-width:520px){.downloads{grid-template-columns:1fr}}.warnings{margin-top:10px;display:grid;gap:6px}.warnings p{margin:0;padding:10px 14px;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);border-radius:14px;font-size:13px}.readout{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:12px 0 0;padding:12px 14px;background:var(--soft);border-radius:14px;font-variant-numeric:tabular-nums}.readout dt{color:var(--muted)}.readout dd{margin:0;text-align:right}.readout dd.bad{color:var(--bad);font-weight:600}.legend{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;max-height:260px;overflow:auto}.legend:empty:before{content:"Load a picture to see the bead colors it needs.";color:var(--muted);font-size:12.5px}.legend li{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:8px;font-size:13px}.legend .sw{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px #7f7f7f73;display:grid;place-items:center;font-size:9px;font-weight:700}.legend .count{color:var(--muted);font-variant-numeric:tabular-nums}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.grid2 label{font-size:12.5px;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);max-width:560px;width:calc(100vw - 32px);padding:22px}dialog::backdrop{background:#12111759;backdrop-filter:blur(3px)}dialog h3{margin:0 0 4px;font:700 22px var(--display);letter-spacing:-.02em}.own-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;max-height:50vh;overflow:auto;margin:12px 0}.own-grid label{display:flex;align-items:center;gap:6px;font-size:12.5px}.own-grid .sw{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px #7f7f7f73;flex:none}dialog menu{display:flex;justify-content:flex-end;gap:8px;margin:0;padding:0}.footer{position:relative;z-index:1;max-width:1600px;margin:0 auto;padding:0 24px 30px;color:var(--muted);font-size:12.5px}.footer p{max-width:900px;margin:0}@media(prefers-reduced-motion:reduce){button,.advanced summary:after{transition:none}}.samples{margin:14px 0 4px}.samples-title{margin:0 0 8px;color:var(--muted);font-size:13px}.sample-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;max-height:290px;overflow-y:auto;padding:2px 4px 2px 0;overscroll-behavior:contain}.sample{display:grid;justify-items:center;gap:2px;padding:8px 4px 6px;border:1px solid var(--line);border-radius:14px;background:var(--soft);font-size:11px;color:var(--muted)}.sample canvas{width:100%;max-width:56px;aspect-ratio:1}.sample:hover{background:var(--soft-hover)}.sample.is-active{border-color:var(--ink);background:var(--panel);color:var(--ink)}