:root{--sky:#afdeef;--seafoam:#4db898;--turquoise:#37bec4;--ocean:#158aa1;--deep:#065269;--bg:#f2f8fa;--surface:#fff;--surface-2:#e6f3f7;--canvas:#f8fcfd;--ink:#0b2f3d;--muted:#4f7280;--line:#d3e7ee;--grid-line:#06526940;--empty:#e3eff3;--accent:#107a90;--accent-ink:#fff;--accent-soft:#dff1f4;--band:#c4e6f1;--danger:#b3261e;--danger-soft:#fdecea;--overlay:#04222d73;--shadow:0 1px 2px #0632410f, 0 8px 24px #0632411a;--radius:14px;--display:"Fraunces", Georgia, serif;--body:"Atkinson Hyperlegible", system-ui, sans-serif;--sheet-w:380px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#071d25;--surface:#0c2a35;--surface-2:#123642;--canvas:#09232d;--ink:#e6f4f8;--muted:#8fb3bf;--line:#1d4351;--grid-line:#afdeef33;--empty:#143a47;--accent:#37bec4;--accent-ink:#062a33;--accent-soft:#10404b;--band:#17505e;--danger:#f2877d;--danger-soft:#3a1f1f;--danger-ink:#2a0d0b;--overlay:#000c1299;--shadow:0 1px 2px #0000004d, 0 10px 30px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0;font-size:15px;line-height:1.4}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.38;cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;font-weight:600}.muted{color:var(--muted)}.hint{color:var(--muted);margin:0;font-size:.86rem}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row-end{justify-content:flex-end}.stack{gap:8px;display:grid}.grid-2{grid-template-columns:1fr 1fr;gap:8px;display:grid}.app{height:100dvh;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);display:grid}.header{padding:10px 16px;padding-top:max(10px, env(safe-area-inset-top));justify-content:space-between;align-items:center;gap:12px;display:flex}.brand{align-items:center;gap:12px;min-width:0;display:flex}.logo{background:radial-gradient(circle at 30% 30%, var(--sky) 0 5px, transparent 6px), radial-gradient(circle at 70% 30%, var(--seafoam) 0 5px, transparent 6px), radial-gradient(circle at 30% 70%, var(--turquoise) 0 5px, transparent 6px), radial-gradient(circle at 70% 70%, var(--deep) 0 5px, transparent 6px), var(--surface);width:34px;height:34px;box-shadow:var(--shadow);border-radius:11px;flex:none}.brand-text{min-width:0}.brand h1{white-space:nowrap;text-overflow:ellipsis;font-size:1.2rem;overflow:hidden}.brand p{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.8rem;overflow:hidden}.header-actions{flex:none;align-items:center;gap:6px;display:flex}.stage{min-height:0;margin:0 16px;position:relative}.canvas-wrap{background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius);overscroll-behavior:contain;position:absolute;inset:0;overflow:auto}.canvas-content{margin:0 auto;position:relative}.canvas-content canvas{touch-action:none;cursor:crosshair;display:block;position:sticky;top:0;left:0}.tool-pan canvas{cursor:grab}.tool-pick canvas{cursor:copy}.btn{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:11px;justify-content:center;align-items:center;gap:8px;min-height:42px;padding:8px 14px;font-size:.92rem;font-weight:700;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--muted)}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn-primary:hover:not(:disabled){border-color:var(--accent);filter:brightness(1.06)}.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--danger-ink,#fff)}.btn-danger:hover:not(:disabled){border-color:var(--danger);filter:brightness(1.06)}.btn-ghost{color:var(--muted);background:0 0;border-color:#0000}.btn-block{width:100%}.icon-btn{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:11px;flex:none;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex}.icon-btn:hover:not(:disabled){background:var(--surface-2)}.palette-bar{align-items:center;gap:8px;min-width:0;padding:10px 16px 4px;display:flex}.palette-scroll{scrollbar-width:none;flex:1;gap:8px;min-width:0;padding:7px;display:flex;overflow-x:auto}.palette-scroll::-webkit-scrollbar{display:none}.bead-swatch{border:1px solid #0000001f;border-radius:50%;flex:none;width:40px;height:40px;padding:0;font-size:.85rem;font-weight:700;transition:transform .12s;box-shadow:inset 0 -3px 6px #0000001f,inset 0 3px 5px #ffffff59}.bead-swatch.is-on{outline:2px solid var(--ink);outline-offset:3px;transform:scale(1.06)}.toolbar{padding:4px 8px;padding-bottom:max(8px, env(safe-area-inset-bottom));justify-content:center;gap:2px;display:flex}.tool{min-width:52px;color:var(--muted);background:0 0;border:0;border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:7px 4px 5px;font-size:.7rem;font-weight:700;display:flex}.tool.is-on{background:var(--accent-soft);color:var(--accent)}.toolbar-sep{background:var(--line);width:1px;margin:8px 4px}.app-name{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:2px;font-size:.68rem;font-weight:700;line-height:1;display:block}a.logo{display:block}.credit{background:var(--accent-soft);width:fit-content;color:var(--accent);border-radius:10px;align-items:center;gap:6px;padding:8px 12px;font-size:.88rem;text-decoration:none;display:inline-flex}.credit:hover{text-decoration:underline}.sheet{z-index:30;background:var(--surface);max-height:82dvh;box-shadow:var(--shadow);border-radius:20px 20px 0 0;flex-direction:column;transition:transform .25s;display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(102%)}.sheet.is-open{transform:none}.backdrop{z-index:25;background:var(--overlay);opacity:0;pointer-events:none;transition:opacity .2s;position:fixed;inset:0}.backdrop.is-open{opacity:1;pointer-events:auto}.sheet-head{border-bottom:1px solid var(--line);align-items:center;gap:4px;padding:10px 10px 8px 12px;display:flex}.tabs{scrollbar-width:none;flex:1;gap:2px;display:flex;overflow-x:auto}.tab{color:var(--muted);white-space:nowrap;background:0 0;border:0;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:5px;padding:8px 6px;font-size:.84rem;font-weight:700;display:inline-flex}.tab.is-on{background:var(--surface-2);color:var(--ink)}.sheet-body{min-height:0;padding:4px 16px calc(20px + env(safe-area-inset-bottom));flex:1;overflow-y:auto}.section{border-bottom:1px solid var(--line);gap:12px;padding:16px 0;display:grid}.section:last-child{border-bottom:0}.section-head{justify-content:space-between;align-items:center;gap:8px;min-height:32px;display:flex}.section-head h3{font-size:1.02rem}.field{gap:6px;display:grid}.field-label{color:var(--muted);letter-spacing:.02em;font-size:.78rem;font-weight:700}.input{border:1px solid var(--line);background:var(--bg);border-radius:10px;width:100%;min-height:42px;padding:8px 11px}input[type=range]{width:100%;accent-color:var(--accent)}.segmented{background:var(--surface-2);border-radius:12px;gap:2px;padding:3px;display:flex}.segmented button{min-height:36px;color:var(--muted);background:0 0;border:0;border-radius:9px;flex:1;font-size:.86rem;font-weight:700}.segmented button.is-on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #0000001f}.switch{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;display:flex;position:relative}.switch-text{font-size:.92rem;font-weight:700;display:grid}.switch-text small{color:var(--muted);font-size:.8rem;font-weight:400}.switch input{opacity:0;pointer-events:none;position:absolute}.switch-track{background:var(--line);border-radius:13px;flex:none;width:44px;height:26px;transition:background .15s;position:relative}.switch-track:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000040}.switch input:checked+.switch-track{background:var(--accent)}.switch input:checked+.switch-track:after{transform:translate(18px)}.switch input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:2px}.pal-list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.pal-row{border:1px solid #0000;border-radius:12px;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px;display:grid}.pal-row.is-on{background:var(--surface-2);border-color:var(--line)}.pal-row .bead-swatch{width:36px;height:36px}.color-input{font-variant-numeric:tabular-nums;color:var(--muted);cursor:pointer;border-radius:8px;align-items:center;padding:4px 6px;font-size:.78rem;display:inline-flex;position:relative}.color-input:hover{background:var(--surface)}.color-input input{opacity:0;cursor:pointer;position:absolute;inset:0}.code-input{min-height:36px;padding:6px 9px;font-size:.86rem}.pal-count{text-align:right;font-variant-numeric:tabular-nums;min-width:34px;color:var(--muted);font-size:.82rem}.drop{text-align:center;border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--bg);color:var(--muted);cursor:pointer;justify-items:center;gap:6px;padding:28px 18px;transition:border-color .15s,background .15s;display:grid}.drop strong{color:var(--ink)}.drop span{max-width:30ch;font-size:.86rem}.drop.is-over,.drop:hover{border-color:var(--accent);background:var(--accent-soft)}.guide-preview{border-radius:var(--radius);background:var(--bg);justify-content:center;padding:10px;display:flex}.guide-preview img{border-radius:8px;max-width:100%;max-height:220px}.extract{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:10px 6px;display:grid}.extract-item{color:var(--muted);font-variant-numeric:tabular-nums;justify-items:center;gap:4px;font-size:.74rem;display:grid}.extract-chip{border:1px solid #0000001f;border-radius:50%;width:40px;height:40px;box-shadow:inset 0 -3px 6px #0000001f,inset 0 3px 5px #ffffff59}.share-bar{border-radius:5px;gap:2px;height:10px;display:flex;overflow:hidden}.counts{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.counts td{border-bottom:1px solid var(--line);padding:6px 4px}.counts tr:last-child td{border-bottom:0}.dot{border:1px solid #0000001f;border-radius:50%;width:18px;height:18px;display:block}.counts-letter{width:24px;font-weight:700}.counts-code{text-overflow:ellipsis;white-space:nowrap;max-width:90px;font-size:.86rem;overflow:hidden}.counts-bar{width:40%}.counts-bar span{opacity:.85;border-radius:4px;min-width:2px;height:8px;display:block}.counts-n{text-align:right;font-weight:700}.stepper{gap:6px;display:grid}.stepper-box{border:1px solid var(--line);background:var(--bg);border-radius:10px;justify-content:space-between;align-items:center;display:flex}.stepper-box output{font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:700}.parts-ok{color:var(--accent);margin:0;font-size:.86rem;font-weight:700}.parts-warn{background:var(--surface-2);border-radius:12px;gap:8px;padding:10px 12px;display:grid}.parts-warn p{margin:0;font-size:.86rem}.parts-list{font-variant-numeric:tabular-nums;gap:2px;max-height:240px;margin:0;padding:0;font-size:.86rem;list-style:none;display:grid;overflow-y:auto}.parts-list li{border-bottom:1px solid var(--line);grid-template-columns:26px 1fr auto;align-items:center;gap:8px;padding:5px 4px;display:grid}.parts-list b{background:var(--accent-soft);width:22px;height:22px;color:var(--accent);border-radius:6px;place-items:center;font-size:.78rem;display:grid}.repeat{border-radius:var(--radius);border:1px solid var(--line);gap:10px;padding:12px;display:grid}.repeat .segmented button{font-size:.8rem}.modal{z-index:50;background:var(--overlay);place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal-box{background:var(--surface);width:min(420px,100%);max-height:92dvh;box-shadow:var(--shadow);border-radius:18px;gap:16px;padding:20px;display:grid;overflow:auto}.modal-box.is-wide{width:min(720px,100%)}.modal-title{font-size:1.25rem}.confirm-text{margin:0;font-size:1rem}.export-preview{background:var(--surface-2);border-radius:12px;justify-content:center;max-height:60dvh;padding:12px;display:flex;overflow:auto}.export-preview img{max-width:100%;height:auto;box-shadow:var(--shadow);border-radius:6px;align-self:flex-start}.toast{left:50%;top:calc(14px + env(safe-area-inset-top));z-index:60;background:var(--ink);width:max-content;max-width:calc(100vw - 32px);color:var(--bg);box-shadow:var(--shadow);border-radius:12px;padding:11px 16px;font-size:.9rem;position:fixed;transform:translate(-50%)}.modal-box.is-full{grid-template-rows:auto minmax(0,1fr);width:min(1200px,100%);height:min(100%,100dvh - 32px);max-height:none}.preview-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.preview-stage{border:1px solid var(--line);border-radius:12px;min-height:0;display:flex;overflow:auto}.preview-stage canvas{box-sizing:content-box;flex:none;margin:auto;padding:24px}.btn.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.sea-chips{display:inline-flex}.sea-chips span{border:1.5px solid var(--surface);border-radius:50%;width:14px;height:14px;margin-left:-4px}.guide-bar{z-index:5;border:1px solid var(--line);background:var(--surface);width:max-content;max-width:calc(100% - 20px);box-shadow:var(--shadow);border-radius:14px;align-items:center;gap:10px;padding:6px 6px 6px 14px;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%)}.guide-bar-text{color:var(--muted);font-size:.82rem}.tool-guide canvas{cursor:move}.grid-3{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}@media (width<=640px){.guide-bar-text{display:none}.guide-bar{padding-left:6px}}.warning{background:var(--danger-soft);color:var(--ink);border-radius:12px;grid-template-columns:auto 1fr;gap:10px;padding:12px 14px;display:grid}.warning>svg{color:var(--danger);margin-top:2px}.warning p{margin:4px 0 10px;font-size:.88rem}.new-design{gap:14px}.price-card{border-radius:var(--radius);background:var(--accent-soft);border:1px solid var(--line);gap:2px;padding:16px;display:grid}.price-label{color:var(--muted);font-size:.8rem;font-weight:700}.price-value{font-family:var(--display);color:var(--accent);font-variant-numeric:tabular-nums;font-size:2rem;font-weight:600}.price-sub{color:var(--muted);font-size:.84rem}.cost-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.cost-table td{border-bottom:1px solid var(--line);vertical-align:top;padding:8px 2px}.cost-table td:last-child{text-align:right;white-space:nowrap;font-weight:700}.cost-table small{color:var(--muted);font-size:.8rem;display:block}.cost-total td{border-bottom:0;font-size:1.02rem;font-weight:700}.buy-list{gap:6px;display:grid}.buy-list ul{gap:4px;margin:0;padding:0;list-style:none;display:grid}.buy-list li{font-variant-numeric:tabular-nums;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:8px;font-size:.88rem;display:grid}.buy-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cost-settings{border:1px solid var(--line);border-radius:var(--radius);padding:12px}.cost-settings summary{cursor:pointer;font-weight:700}.cost-settings[open] summary{margin-bottom:12px}.cost-settings .hint{margin-top:10px}.affix{border:1px solid var(--line);background:var(--bg);border-radius:10px;align-items:center;display:flex}.affix:focus-within{outline:2px solid var(--accent);outline-offset:1px}.affix .input{background:0 0;border:0;outline:none;min-width:0}.affix-text{color:var(--muted);padding:0 10px;font-size:.86rem}.affix-text:first-child{padding-right:0}.affix-text:last-child{padding-left:0}@media (width>=960px){.app{grid-template-columns:minmax(0, 1fr) var(--sheet-w)}.header{grid-column:1/-1}.sheet{border:1px solid var(--line);border-radius:var(--radius);max-height:none;box-shadow:none;grid-area:2/2/5;min-height:0;margin:0 16px 16px 0;transition:none;position:static;transform:none}.backdrop,.sheet-close,.tool-menu{display:none}.app.panel-hidden{grid-template-columns:minmax(0,1fr)}.app.panel-hidden .sheet{display:none}}@media (width<=959px){.desktop-only{display:none}}@media (width<=640px){.hide-md{display:none}.header-actions{gap:2px}.header-actions .btn{padding-inline:10px}}@media (width<=420px){.hide-sm{display:none}.tool{min-width:40px;padding-inline:2px;font-size:.64rem}.toolbar{gap:0;padding-inline:4px}.toolbar-sep{margin:8px 1px}.header{padding-inline:12px}.stage{margin:0 10px}.palette-bar{padding-inline:10px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}