:root{--bg-0: #0e0e12;--bg-1: #16161d;--panel: rgba(22, 22, 29, .78);--panel-border: rgba(255, 255, 255, .08);--gold: #d9b25e;--gold-soft: #e7cf9a;--text: #f3f1ea;--text-dim: #9a978f;--accent: #c8a24a;--shadow: 0 18px 50px rgba(0, 0, 0, .45)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;font-family:Jost,system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at 50% 30%,#1c1c25,#0c0c10 70%);overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button,.bead-chip,.weave-chip,.cord-swatch,.size-btn{-webkit-tap-highlight-color:transparent;touch-action:manipulation}#app{position:fixed;top:0;right:0;bottom:0;left:0}#scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}#topbar{position:absolute;top:0;left:0;right:0;height:64px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;z-index:10;pointer-events:none}.brand{display:flex;flex-direction:column;line-height:1.05;pointer-events:auto}.brand-mark{font-family:Jost,system-ui,sans-serif;font-size:20px;letter-spacing:.32em;color:var(--gold-soft)}.brand-sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-top:2px}.topbar-actions{display:flex;gap:10px;pointer-events:auto}.ghost-btn{font-family:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:#ffffff0a;border:1px solid var(--panel-border);border-radius:999px;padding:9px 16px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .18s ease}.ghost-btn:hover{border-color:var(--gold);color:var(--gold-soft)}.wa-btn{color:#fff;background:#25d366;border-color:#1da851}.wa-btn:hover{color:#fff;background:#1ebe5b;border-color:#169c4a}aside{position:absolute;top:80px;bottom:20px;width:232px;padding:20px 18px;background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow);z-index:9;overflow-y:auto}#palette{left:max(20px,env(safe-area-inset-left))}#inspector{right:max(20px,env(safe-area-inset-right));top:80px;bottom:auto;width:224px;display:flex;flex-direction:column;gap:16px;padding:22px 20px}.summary-block{display:flex;flex-direction:column;gap:2px}.summary-block .big{font-size:33px;line-height:1.05}aside h2{font-family:Jost,system-ui,sans-serif;font-weight:600;font-size:16px;letter-spacing:.04em;color:var(--gold-soft);margin-bottom:4px}.hint{font-size:11px;color:var(--text-dim);margin-bottom:14px}.weave-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.weave-chip{display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 3px 6px;border-radius:10px;background:#ffffff08;border:1px solid var(--panel-border);cursor:pointer;transition:all .14s ease}.weave-chip:hover{border-color:var(--gold)}.weave-chip.active{border-color:var(--gold-soft);background:#d9b25e24}.weave-thumb{width:100%;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.08)}.weave-name{font-size:9.5px;color:var(--text-dim);letter-spacing:.02em}.weave-chip.active .weave-name{color:var(--gold-soft)}.toggle-btn{width:100%;padding:8px 10px;border-radius:10px;background:#ffffff08;border:1px solid var(--panel-border);color:var(--text-dim);font-family:inherit;font-size:11px;letter-spacing:.02em;cursor:pointer;transition:all .14s ease}.toggle-btn:hover{border-color:var(--gold)}.toggle-btn[aria-pressed=true]{border-color:var(--gold-soft);background:#d9b25e24;color:var(--gold-soft)}.palette-section{margin-bottom:16px}.section-title{font-family:Jost,system-ui,sans-serif;font-weight:600;font-size:15px;letter-spacing:.03em;color:var(--gold-soft);margin-bottom:8px}.size-picker{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}.size-btn{flex:1;min-width:26px;font-family:inherit;font-size:11px;color:var(--text-dim);background:#ffffff08;border:1px solid var(--panel-border);border-radius:8px;padding:5px 0;cursor:pointer;transition:all .14s ease}.size-btn:hover{color:var(--text);border-color:var(--gold)}.size-btn.active{background:#d9b25e29;border-color:var(--gold);color:var(--gold-soft)}.letter-controls{display:flex;align-items:center;gap:8px;margin-bottom:8px}.letter-select{flex:1;font-family:inherit;font-size:15px;color:var(--text);background:#ffffff0d;border:1px solid var(--panel-border);border-radius:8px;padding:8px 10px}.letter-select option{color:#18181c;background:#f3f1ea}.letter-styles{display:flex;gap:6px;margin-bottom:10px}.style-btn{flex:1;height:28px;border-radius:8px;border:2px solid transparent;cursor:pointer;background-clip:padding-box}.style-btn.active{border-color:var(--gold-soft);box-shadow:0 0 0 2px #d9b25e4d}.letter-activate{width:50%}.bead-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.bead-chip{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 9px;border-radius:14px;background:#ffffff08;border:1px solid var(--panel-border);cursor:grab;transition:transform .14s ease,border-color .14s ease,background .14s ease;-webkit-user-select:none;user-select:none}.bead-chip:hover{transform:translateY(-2px);border-color:var(--gold);background:#d9b25e14}.bead-chip:active{cursor:grabbing}.bead-chip.dragging{opacity:.45}.bead-swatch{width:46px;height:46px;border-radius:50%;box-shadow:inset -6px -8px 12px #0000008c,inset 5px 6px 10px #ffffff47,0 4px 8px #0006}.bead-swatch.flat{border-radius:8px;box-shadow:none;background-color:transparent;background-size:contain;background-repeat:no-repeat;background-position:center}.bead-name{font-size:10px;text-align:center;color:var(--text-dim);line-height:1.2}.bead-price{font-size:9px;color:var(--gold)}.cord-list{display:flex;flex-direction:column;gap:6px}.cord-group-head{width:100%;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:#ffffff08;border:1px solid var(--panel-border);color:var(--text-dim);font-family:inherit;font-size:12.5px;letter-spacing:.02em;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease}.cord-group-head:hover{border-color:var(--gold);color:var(--text)}.cord-group.open>.cord-group-head{border-color:var(--gold-soft);background:#d9b25e1f;color:var(--gold-soft)}.cgh-dots{display:inline-flex}.cgh-dots i{width:13px;height:13px;border-radius:50%;margin-left:-5px;border:1.5px solid var(--panel);box-shadow:inset 0 0 0 .5px #0000004d}.cgh-dots i:first-child{margin-left:0}.cgh-label{flex:1;text-align:left}.cgh-chev{font-size:11px;transition:transform .2s ease;opacity:.7}.cord-group.open .cgh-chev{transform:rotate(180deg)}.cord-group-body{display:flex;flex-wrap:wrap;gap:10px;max-height:0;overflow:hidden;opacity:0;padding:0 4px;transition:max-height .26s ease,opacity .2s ease,padding .26s ease}.cord-group.open>.cord-group-body{max-height:240px;opacity:1;padding:10px 4px 4px}.cord-swatch{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .14s ease,border-color .14s ease}.cord-swatch:hover{transform:scale(1.08)}.cord-swatch.active{border-color:var(--gold-soft);box-shadow:0 0 0 2px #d9b25e4d}aside{scrollbar-width:thin;scrollbar-color:rgba(217,178,94,.45) transparent}aside::-webkit-scrollbar{width:8px}aside::-webkit-scrollbar-track{background:transparent}aside::-webkit-scrollbar-thumb{background:#d9b25e66;border-radius:999px}aside::-webkit-scrollbar-thumb:hover{background:#d9b25eb3}aside::-webkit-scrollbar-button{display:none;width:0;height:0}.inspector-block{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--panel-border)}.inspector-block:last-child{border-bottom:none}.label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}.big{font-family:Jost,system-ui,sans-serif;font-size:27px;color:var(--text)}.price{color:var(--gold-soft)}.sub-note{font-size:10px;color:var(--text-dim)}.size-row{display:flex;align-items:center;gap:10px}#wrist-size{flex:1;accent-color:var(--gold)}.fill-bar{position:relative;height:6px;margin-top:8px;border-radius:999px;background:#ffffff14;overflow:hidden}#fill-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--gold-soft),var(--gold));transition:width .25s ease,background .25s ease}#fill-fill.full{background:linear-gradient(90deg,#e8896b,#c84a2c)}#toast{position:absolute;left:50%;top:78px;transform:translate(-50%);padding:10px 20px;border-radius:999px;background:#c84a2ceb;color:#fff;font-size:13px;letter-spacing:.02em;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:20}#toast.show{opacity:1}#wrist-val{font-size:12px;color:var(--text);min-width:54px;text-align:right}.tips ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:4px}.tips li{font-size:11px;color:var(--text-dim);line-height:1.4}.tips b{color:var(--text);font-weight:600}#drop-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:16px 30px;border:2px dashed var(--gold);border-radius:16px;background:#d9b25e1a;color:var(--gold-soft);font-size:14px;letter-spacing:.06em;pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:8}#drop-hint.show{opacity:1}#empty-state{position:absolute;left:50%;bottom:64px;transform:translate(-50%);z-index:7;pointer-events:none;transition:opacity .3s ease}.empty-card{text-align:center;color:var(--text-dim)}.empty-emoji{font-size:26px}.empty-card p{font-size:14px;margin-top:6px;color:var(--text)}.empty-sub{font-size:12px!important;color:var(--text-dim)!important;max-width:280px}#empty-state.hidden{opacity:0}#loader{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--bg-0);z-index:50;transition:opacity .5s ease;font-family:Jost,system-ui,sans-serif;letter-spacing:.3em;color:var(--gold-soft);font-size:20px}#loader.gone{opacity:0;pointer-events:none}#tool-banner{position:absolute;top:calc(72px + env(safe-area-inset-top));left:50%;transform:translate(-50%);display:none;align-items:center;gap:12px;padding:9px 9px 9px 20px;border-radius:999px;background:#d9b25e29;border:1px solid var(--gold);color:var(--gold-soft);font-size:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow);z-index:12}#tool-banner.show{display:flex}#tool-banner-close{width:30px;height:30px;border-radius:50%;border:1px solid var(--panel-border);background:#00000040;color:var(--text);font-size:13px;cursor:pointer}#select-bar{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:none;align-items:center;gap:14px;padding:8px 8px 8px 22px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow);z-index:12}#select-bar.show{display:flex}#select-bar-text{font-size:13px;color:var(--text-dim)}#btn-remove{font-family:inherit;font-size:13px;color:#fff;background:#c84a2ceb;border:none;border-radius:999px;padding:11px 20px;cursor:pointer}#btn-remove:active{background:#aa3a22f2}.bead-chip.active{border-color:var(--gold-soft);background:#d9b25e2e;box-shadow:0 0 0 2px #d9b25e40}aside{transition:transform .28s ease,opacity .28s ease}#app.panels-hidden #palette{transform:translate(calc(-100% - 40px));opacity:0;pointer-events:none}#app.panels-hidden #inspector{transform:translate(calc(100% + 40px));opacity:0;pointer-events:none}#rotate-hint{display:none;position:absolute;left:50%;bottom:18px;transform:translate(-50%);padding:9px 18px;border-radius:999px;background:#16161de6;border:1px solid var(--panel-border);color:var(--gold-soft);font-size:12px;z-index:11;pointer-events:none}@media (pointer: coarse){.ghost-btn{padding:12px 18px;font-size:13px}#palette{width:254px}#inspector{width:240px}#palette,#inspector{padding:18px 16px}.size-btn{padding:12px 0;font-size:14px;min-width:34px}.cord-swatch{width:44px;height:44px}.weave-thumb{height:30px}.weave-name{font-size:10.5px}.weave-chip{padding:10px 4px 9px}.bead-swatch{width:52px;height:52px}.bead-name{font-size:11px}#btn-remove{padding:13px 24px;font-size:14px}}@media (orientation: portrait){#rotate-hint{display:block}}@media (max-width: 920px){#palette{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;right:12px;width:auto;max-height:38vh}#palette .bead-list{grid-template-columns:repeat(4,1fr)}#inspector{top:calc(72px + env(safe-area-inset-top));width:220px}#empty-state{bottom:42vh}#select-bar{bottom:calc(40vh + 18px)}}:root{--glass-bg: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035));--glass-bg-hover: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07));--glass-border: rgba(255, 255, 255, .2);--glass-edge: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -12px 26px rgba(0, 0, 0, .22);--gold-glass: linear-gradient(160deg, rgba(231, 207, 154, .34), rgba(217, 178, 94, .12));--gold-edge: rgba(231, 207, 154, .75);--gold-glow: 0 0 16px rgba(217, 178, 94, .45)}#scene{z-index:0}#app:before,#app:after{content:"";position:absolute;z-index:1;pointer-events:none;width:46vw;height:46vw;max-width:560px;max-height:560px;border-radius:50%;filter:blur(100px);opacity:.5}#app:before{left:-14vw;top:6%;background:radial-gradient(circle,#d9b25e8c,#d9b25e00 70%)}#app:after{right:-14vw;bottom:2%;background:radial-gradient(circle,#3868c480,#3868c400 70%)}aside{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:22px;backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);box-shadow:0 26px 64px #00000080,var(--glass-edge)}.ghost-btn{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 1px #ffffff80,0 6px 18px #00000057;text-shadow:0 1px 2px rgba(0,0,0,.45)}.ghost-btn:hover{background:var(--glass-bg-hover);border-color:var(--gold);color:var(--gold-soft);box-shadow:inset 0 1px #ffffffb3,0 8px 24px #0006}.wa-btn{color:#eafff3;background:linear-gradient(160deg,#25d36699,#14964a52);border-color:#8cf5b9a6}.wa-btn:hover{color:#fff;background:linear-gradient(160deg,#2ee274b8,#19aa5673);border-color:#aaffcdd9}.weave-chip,.toggle-btn,.size-btn,.cord-group-head,.bead-chip,.letter-select{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:inset 0 1px #ffffff52}.weave-chip:hover,.toggle-btn:hover,.size-btn:hover,.cord-group-head:hover,.bead-chip:hover{background:var(--glass-bg-hover);border-color:var(--gold)}.weave-chip.active,.toggle-btn[aria-pressed=true],.size-btn.active,.cord-group.open>.cord-group-head,.bead-chip.active{background:var(--gold-glass);border-color:var(--gold-edge);box-shadow:inset 0 1px #ffffff8c,var(--gold-glow);animation:glassPulse .55s ease}@keyframes glassPulse{50%{box-shadow:inset 0 1px #ffffffbf,0 0 24px #d9b25ebf}}.cord-swatch{position:relative;box-shadow:inset -5px -7px 11px #00000080,inset 4px 5px 9px #ffffff6b}.cord-swatch:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fffffff2,#ffffff59 9%,#fff0 34%);pointer-events:none}.cgh-dots i{box-shadow:inset -2px -2px 4px #00000073,inset 1.5px 2px 3px #fff6}.cord-swatch.active{border-color:var(--gold-edge);box-shadow:0 0 0 3px #d9b25ee6,inset -5px -7px 11px #00000080,inset 4px 5px 9px #ffffff6b}#wrist-size{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;background:transparent}#wrist-size::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(180deg,#0006,#ffffff12);box-shadow:inset 0 1px 3px #00000080,inset 0 -1px #ffffff2e}#wrist-size::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffffff 0%,var(--gold-soft) 42%,var(--gold) 78%,#9c7a32 100%);box-shadow:0 3px 7px #0000008c,inset 0 1px 2px #ffffffe6;cursor:pointer}#wrist-size::-moz-range-track{height:8px;border-radius:999px;background:#00000052;box-shadow:inset 0 1px 3px #00000080}#wrist-size::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffffff 0%,var(--gold-soft) 42%,var(--gold) 78%,#9c7a32 100%);box-shadow:0 3px 7px #0000008c,inset 0 1px 2px #ffffffe6;cursor:pointer}.fill-bar{background:#0000004d;box-shadow:inset 0 1px 3px #00000080}#fill-fill{box-shadow:0 0 10px #d9b25e99}.brand-mark{background:linear-gradient(180deg,#fbeecb,#d9b25e 48%,#b98e3e 60%,#f5e7c0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:0 1px 4px rgba(0,0,0,.45)}.big{text-shadow:0 1px 3px rgba(0,0,0,.5)}.price,.big.price{text-shadow:0 0 12px rgba(217,178,94,.45),0 1px 2px rgba(0,0,0,.5)}#select-bar,#rotate-hint{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}#tool-banner{backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:var(--shadow),inset 0 1px #fff6}aside,.ghost-btn,.weave-chip,.toggle-btn,.size-btn,.cord-group-head,.cord-swatch,.cgh-dots i,.bead-chip{transition:all .22s cubic-bezier(.22,1,.36,1)}