:root{color-scheme:light;font-family:"Noto Serif SC","Source Han Serif SC",Songti SC,STSong,SimSun,ui-serif,Iowan Old Style,Times New Roman,serif;background:#efe6d6;color:#201b16;--ease-out: cubic-bezier(.2, .8, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--dur-1: .12s;--dur-2: .18s;--dur-3: .26s;--paper: rgba(248, 243, 231, .93);--paper-solid: #f8f3e7;--ink: #201b16;--muted: rgba(32, 27, 22, .62);--line: rgba(38, 44, 39, .16);--tea: #8f5b2a;--sage: #56644e;--clay: #a14d3a;--cinnabar: #9d3f32;--gilt: #b9935a;--indigo: #263947;--pine: #2c2a22;--stone: #2b241e;--shadow: 0 4px 12px rgba(44, 28, 16, .035);--rough-border: rgba(31, 35, 32, .42);--frame-line: rgba(38, 44, 39, .16);--frame-line-strong: rgba(38, 44, 39, .28);--paper-texture: url(/textures/caozhi-paper.png);--landscape-texture: url(/textures/ink-landscape-wash.png);--paper-wash: radial-gradient(ellipse at 12% 8%, rgba(38, 48, 43, .09), transparent 42%), radial-gradient(ellipse at 84% 18%, rgba(92, 102, 92, .08), transparent 38%), radial-gradient(ellipse at 52% 92%, rgba(42, 49, 45, .055), transparent 46%), linear-gradient(180deg, #f8f1e4, #eee4d2);--paper-fibers: var(--paper-texture);--surface-texture: linear-gradient(180deg, rgba(255, 252, 246, .7), rgba(240, 231, 216, .42)), var(--paper-texture);--corner-large: linear-gradient(var(--frame-line-strong), var(--frame-line-strong)) left top / 72px 1px no-repeat, linear-gradient(var(--frame-line-strong), var(--frame-line-strong)) left top / 1px 72px no-repeat, linear-gradient(var(--frame-line-strong), var(--frame-line-strong)) right top / 72px 1px no-repeat, linear-gradient(var(--frame-line-strong), var(--frame-line-strong)) right top / 1px 72px no-repeat, linear-gradient(var(--frame-line-strong), var(--frame-line-strong)) left bottom / 72px 1px no-repeat, linear-gradient(var(--frame-line-strong), var(--frame-line-strong)) left bottom / 1px 72px no-repeat, linear-gradient(var(--frame-line-strong), var(--frame-line-strong)) right bottom / 72px 1px no-repeat, linear-gradient(var(--frame-line-strong), var(--frame-line-strong)) right bottom / 1px 72px no-repeat;--corner-small: linear-gradient(var(--frame-line), var(--frame-line)) left top / 18px 1px no-repeat, linear-gradient(var(--frame-line), var(--frame-line)) left top / 1px 18px no-repeat, linear-gradient(var(--frame-line), var(--frame-line)) right top / 18px 1px no-repeat, linear-gradient(var(--frame-line), var(--frame-line)) right top / 1px 18px no-repeat, linear-gradient(var(--frame-line), var(--frame-line)) left bottom / 18px 1px no-repeat, linear-gradient(var(--frame-line), var(--frame-line)) left bottom / 1px 18px no-repeat, linear-gradient(var(--frame-line), var(--frame-line)) right bottom / 18px 1px no-repeat, linear-gradient(var(--frame-line), var(--frame-line)) right bottom / 1px 18px no-repeat;--ink-bleed: radial-gradient(210px 82px at 12% 4%, rgba(31, 35, 32, .035), transparent 74%), radial-gradient(240px 92px at 88% 96%, rgba(31, 35, 32, .03), transparent 76%);--fabric: none;--grain: var(--paper-texture), var(--paper-wash)}*{box-sizing:border-box}body{margin:0;min-width:320px;overflow-x:clip;background:#eee4d2;background-image:var(--grain);background-attachment:fixed}#root{min-height:100vh;overflow-x:clip}button,input,select{font:inherit}button{border:0;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(157,112,70,.28);outline-offset:2px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,8vw,92px);line-height:.94;letter-spacing:0;margin-bottom:22px}.loading{min-height:100vh;display:grid;place-items:center;font-size:42px;font-weight:700;color:var(--tea)}.eyebrow{margin:0 0 12px;color:var(--sage);text-transform:uppercase;letter-spacing:0;font-weight:700;font-size:13px}.subcopy{color:var(--muted);font-size:clamp(20px,2vw,28px);margin-bottom:32px}.topbar{height:82px}.designer-head{height:72px}.topbar,.designer-head{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,54px);border-bottom:0;background:#f4e8d3d1;background-image:var(--paper-fibers);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}.topbar:after,.designer-head:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:13px;pointer-events:none;background:linear-gradient(90deg,transparent 0,rgba(185,147,90,.24) 12%,rgba(38,44,39,.12) 50%,rgba(185,147,90,.22) 88%,transparent 100%),radial-gradient(180px 14px at 50% 50%,rgba(31,35,32,.07),transparent 78%);opacity:.62;filter:none}.brand,.icon-text{background:none;color:var(--ink);font-weight:800;font-size:22px;display:inline-flex;align-items:center;gap:10px}.brand img{width:48px;height:48px;object-fit:cover;border:0}nav{display:flex;gap:6px}nav button{background:none;color:var(--muted);padding:10px 12px;border-radius:3px;transition:color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}nav button:hover{background:#fffaf294;color:var(--ink);transform:translateY(-1px)}nav button:active{transform:translateY(0)}@media(prefers-reduced-motion:reduce){:root{--dur-1: 1ms;--dur-2: 1ms;--dur-3: 1ms}*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}.primary,.secondary,.icon-only{min-height:42px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);will-change:transform;position:relative;border:0}.primary:after,.secondary:after,.icon-only:after{content:"";position:absolute;inset:-1px;pointer-events:none;border:1px solid rgba(250,246,237,.18);background:var(--corner-small);opacity:.72}.primary{background:#2a2f26f5;background-image:none;color:#fcf5e8f5;padding:0 18px;font-weight:700;box-shadow:none}.primary:hover{transform:translateY(-1px);background:#3e4b30f5;box-shadow:none}.primary:active{transform:translateY(0);background:#313b27fa;box-shadow:none}.primary.small{min-height:38px}.secondary{background:#fcf7eddb;color:var(--ink);box-shadow:inset 0 0 0 1px #262c2714;padding:0 16px}.secondary:hover,.icon-only:hover{transform:translateY(-1px);border-color:#9d704652;box-shadow:none}.secondary:active,.icon-only:active{transform:translateY(0);box-shadow:none}.danger,.danger-action{color:#fffaf2;background:#8f3f33;background-image:none}.danger-action{box-shadow:none}.icon-only{width:42px;background:#fcf7eddb;color:var(--ink);box-shadow:inset 0 0 0 1px #262c2714}.hero-actions,.designer-actions,.bottom-actions{display:flex;gap:10px;flex-wrap:wrap}.bracelet-frame{width:460px;height:460px;position:relative;display:grid;place-items:center;overflow:visible;justify-self:center;align-self:center;margin-inline:auto}.bracelet{width:460px;height:460px;position:relative;display:grid;place-items:center;flex:0 0 auto;justify-self:center;align-self:center;margin-inline:auto;transform-origin:50% 50%}.ring-thread{position:absolute;width:calc(var(--ring) * 2 + 6px);height:calc(var(--ring) * 2 + 6px);border-radius:50%;border:0;background:radial-gradient(circle,transparent 67%,rgba(172,146,112,.82) 68%,rgba(112,78,42,.36) 69%,transparent 71%),radial-gradient(circle at 52% 48%,transparent 66%,rgba(31,35,32,.13) 68%,transparent 72%);box-shadow:0 0 0 1px #fffaf2b3,inset 0 0 0 1px #6e563a2e;opacity:.9}.preview-bead{position:absolute;border-radius:50%;background:none;padding:0;filter:drop-shadow(0 3px 5px rgba(42,32,22,.16));transition:transform var(--dur-2) var(--ease-out),filter var(--dur-2) var(--ease-out);will-change:transform;animation:bead-in var(--dur-2) var(--ease-out)}.preview-bead img{width:100%;height:100%;object-fit:contain;display:block;-webkit-clip-path:circle(48% at 50% 50%);clip-path:circle(48% at 50% 50%)}.preview-bead img[src*="/beads/CZ001/"]{-webkit-clip-path:circle(46.5% at 50% 50%);clip-path:circle(46.5% at 50% 50%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 63%);mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 63%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.preview-bead.selected{outline:3px solid rgba(139,55,39,.72);outline-offset:3px}.preview-bead:hover{transform:scale(1.03);filter:drop-shadow(0 5px 9px rgba(42,32,22,.18))}.preview-bead:active{transform:scale(1.015)}@keyframes bead-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.remove-bead{position:absolute;top:-4px;right:-4px;width:19px;height:19px;display:grid;place-items:center;border-radius:42% 55% 48% 51%;background:#232822e6;color:#fffaf2;border:0;opacity:0;pointer-events:none;transform:scale(.86);transition:opacity .16s ease,transform .16s ease}.preview-bead.selected .remove-bead,.remove-bead:focus-visible{opacity:1;pointer-events:auto;transform:scale(1)}.empty-ring{color:var(--muted)}.home{min-height:100vh;overflow-x:clip;background:#eee6d2;background-image:var(--paper-texture)}.home-canvas{--home-nav-height: 72px;position:relative;max-width:1440px;min-height:min(1098px,max(760px,calc(100dvh - var(--home-nav-height))));margin:0 auto;padding:clamp(72px,7.2vw,104px) clamp(58px,6.6vw,96px) clamp(56px,7vw,104px);background-image:url(/figma/nuwaria-hero-desktop.png);background-repeat:no-repeat;background-size:100% auto;background-position:top center;overflow:clip}.hero-copy{position:relative;z-index:1;width:min(500px,42vw)}.hero-copy .eyebrow{margin-bottom:clamp(18px,2.2vw,28px);color:#56644e;font-size:clamp(13px,1.1vw,16px);font-weight:600;text-transform:none}.hero-copy h1{margin-bottom:clamp(28px,3.4vw,44px);color:#211812;font-size:clamp(70px,7.2vw,104px);font-weight:500;line-height:.9}.hero-copy .subcopy{max-width:440px;margin-bottom:clamp(22px,2.6vw,32px);color:#201b1694;font-size:clamp(18px,1.55vw,22px);line-height:1.26}.hero-actions{display:flex;gap:22px;align-items:center}.home-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(44px,5vw,76px);max-width:1148px;margin:clamp(28px,4vw,54px) auto 0}.home-step-card{min-height:230px;padding:12px 26px 26px;display:grid;justify-items:center;align-content:start;background:#faf7ebc7;border:1px solid rgba(185,168,133,.46);border-radius:0;color:#211812;text-align:center;box-shadow:none;transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}.home-step-card:hover{background:#faf7ebe6;border-color:#56644e59;transform:translateY(-2px)}.home-step-card:active{transform:translateY(0)}.home-step-card img{width:172px;height:132px;object-fit:contain;margin-bottom:2px}.home-step-card strong{display:block;font-size:20px;font-weight:500;line-height:1.25}.home-step-card span{display:block;max-width:220px;margin-top:14px;color:#201b167a;font-size:12px;line-height:1.35}@media(max-width:720px){.home-canvas{--home-nav-height: 64px;max-width:none;min-height:1256px;padding:clamp(330px,82vw,382px) 24px 40px;background-image:url(/figma/nuwaria-hero-mobile.png);background-size:100% 1256px;background-position:top center}.hero-copy{width:100%}.hero-copy .eyebrow{margin-bottom:18px;font-size:15px;line-height:1.35}.hero-copy h1{margin-bottom:22px;font-size:clamp(56px,17vw,66px);line-height:.9}.hero-copy .subcopy{max-width:310px;margin-bottom:20px;font-size:16px;line-height:1.24;font-weight:500}.hero-actions{flex-direction:column;gap:14px}.hero-actions>button{width:100%;min-height:50px}.home-steps{grid-template-columns:1fr;gap:18px;margin-top:54px}.home-step-card{min-height:128px;grid-template-columns:minmax(118px,34%) minmax(0,1fr);grid-template-rows:auto auto;align-items:center;justify-items:start;align-content:center;gap:4px 16px;padding:14px 22px 14px 16px;text-align:left}.home-step-card img{grid-row:1 / 3;width:112px;height:96px;align-self:center;justify-self:center;margin:0}.home-step-card strong{align-self:end;font-size:21px;line-height:1.12}.home-step-card span{align-self:start;max-width:182px;margin:0;font-size:13px;line-height:1.28}}.designer{height:100vh;height:100dvh;background:#eee4d2;background-image:var(--grain);display:flex;flex-direction:column;overflow:hidden}.designer-grid{display:grid;grid-template-columns:420px minmax(0,1fr) 274px;gap:24px;padding:24px;flex:1;min-height:0;overflow:hidden}.library,.controls,.stage{background:var(--paper);background-image:var(--surface-texture);border-radius:3px;box-shadow:var(--shadow);min-height:0;border:1px solid rgba(38,44,39,.08);position:relative;transition:box-shadow var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}.stage{background-image:var(--fabric),var(--surface-texture);background-size:720px auto,auto;background-repeat:repeat,no-repeat;background-position:center,center}.library,.controls{padding:24px 18px;display:flex;flex-direction:column;box-shadow:0 3px 10px #2c1c1008,inset 0 1px #fffcf5c7}.stage:before{content:"";position:absolute;inset:-7px;pointer-events:none;background:var(--corner-large),var(--ink-bleed);opacity:.78;filter:none}.library:before,.controls:before{content:"";position:absolute;inset:-7px;pointer-events:none;background:var(--corner-large),var(--ink-bleed);opacity:.74}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px #fffaf252}.stage>*{position:relative;z-index:1}.library-layout{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;flex:1;min-height:0}.library-sidebar{display:flex;flex-direction:column;gap:10px;min-height:0}.library-eyebrow{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.library-groups{display:grid;gap:8px}.library-group{min-height:54px;padding:10px 12px;border-radius:3px;border:0;background:#fcf7edb8;color:var(--ink);text-align:left;font-weight:700;transition:background .18s ease,color .18s ease,border-color .18s ease;position:relative}.library-group.active{background:#30392ef0;background-image:none;border-color:#2c2a22eb;color:#fcf5e8f2}.library-group:after,.search:after,.subfilter-chip:after,.bead-card:after,.bead-size:after,.bead-popover:before,.segmented button:after{content:"";position:absolute;inset:-1px;pointer-events:none;border:1px solid rgba(38,44,39,.1);background:var(--corner-small);opacity:.86}.library-main{display:flex;flex-direction:column;gap:12px;min-height:0;position:relative}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.library-title{gap:14px}.library-title-copy{display:flex;align-items:center;gap:10px;min-width:0}.section-title h1,.section-title h2{font-size:18px;line-height:1.2;margin-bottom:14px}.section-title span{color:var(--muted)}.library-title h1{margin-bottom:0}.library-search{width:min(240px,100%);margin-left:auto}.search{height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;border:0;border-radius:3px;background:#fcf7ede6;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);position:relative}.search:focus-within{box-shadow:0 2px 7px #342c240b}.search input{border:0;outline:0;width:100%;background:transparent}.library-subfilters{display:grid;gap:10px;flex:0 0 auto;min-height:0}.library-subfilters-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.library-subfilters-head strong{font-size:14px}.library-subfilters-head small{color:var(--muted)}.subfilter-list{display:flex;flex-wrap:wrap;gap:8px;max-height:118px;overflow:auto;padding:1px 4px 4px 1px;align-content:flex-start;scrollbar-gutter:stable}.subfilter-chip{min-height:34px;padding:6px 12px;border-radius:3px;border:0;background:#fcf7edc7;color:var(--ink);font-size:12px;transition:transform var(--dur-1) var(--ease-out),background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);will-change:transform;position:relative}.subfilter-chip:hover{transform:translateY(-1px);box-shadow:none}.subfilter-chip:active{transform:translateY(0);box-shadow:none}.subfilter-chip.active{background:#b9935a2e;border-color:#2c2a22b3;color:#2c2a22eb}.bead-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1 1 0;min-height:260px;overflow:auto;padding-right:4px;align-content:start;align-items:start;grid-auto-rows:max-content}.bead-card{min-width:0;background:#fcf7edd1;background-image:none;border-radius:3px;border:0;padding:10px;text-align:left;display:grid;gap:8px;align-self:start;overflow:hidden;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out);will-change:transform;position:relative}.bead-card:hover{transform:translateY(-2px);box-shadow:none}.bead-card:active{transform:translateY(-1px);box-shadow:none}.bead-card-main{padding:0;border:0;background:transparent;text-align:left;display:grid;gap:8px;justify-items:center}.bead-card-main img{width:72px;height:72px;object-fit:contain;justify-self:center;-webkit-clip-path:circle(48% at 50% 50%);clip-path:circle(48% at 50% 50%);transition:transform var(--dur-2) var(--ease-out)}.bead-card:hover .bead-card-main img{transform:scale(1.04)}.bead-card-main img[src*="/beads/CZ001/"],.selected-detail img[src*="/beads/CZ001/"]{-webkit-clip-path:circle(46.5% at 50% 50%);clip-path:circle(46.5% at 50% 50%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 63%);mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 63%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.bead-card:hover .bead-card-main img[src*="/beads/CZ001/"]{transform:translateY(-1px) scale(1.06)}.bead-card-main strong{display:block;font-size:13px;line-height:1.25;min-height:32px;text-align:center}.bead-card-main small{color:var(--muted);display:block;margin-top:4px;text-align:center}.bead-size{border:0;background:#fcf7edc7;border-radius:3px;padding:4px 8px;font-size:12px;transition:transform var(--dur-1) var(--ease-out),border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out);position:relative}.bead-size:hover{transform:translateY(-1px)}.bead-size:active{transform:translateY(0)}.bead-size.active{border-color:var(--pine);background:#b9935a2e}.bead-popover{position:fixed;width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 24px);background:#fffaf2fa;background-image:var(--surface-texture);border:0;border-radius:3px;box-shadow:0 7px 18px #342c241c;padding:14px;display:grid;gap:12px;z-index:40;animation:popover-in var(--dur-2) var(--ease-out)}@keyframes popover-in{0%{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.bead-popover img{width:100%;height:160px;object-fit:cover;border-radius:2px;justify-self:center;background:#eee2cd}.bead-popover-body strong{display:block;font-size:14px;margin-bottom:8px}.bead-popover-body small{display:block;color:var(--muted);margin-bottom:10px}.bead-popover-body p{margin:0;font-size:12px;line-height:1.5;color:var(--muted);max-height:96px;overflow:auto}.bead-popover-sizes{display:flex;flex-wrap:wrap;gap:8px}.bead-popover-action{min-height:40px;border-radius:3px;background:var(--pine);color:#fffaf2;font-weight:700}@media(hover:none){.bead-popover{display:none}}.stage{display:grid;grid-template-rows:auto 1fr auto;place-items:center;padding:28px;overflow:hidden}.stage-top{justify-self:stretch}.stage-top h2{font-size:18px}.status{justify-self:stretch;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.status span{background:#e7dfd1c7;color:#584c40;border-radius:3px;padding:8px 12px;font-size:13px}.status .status-state--ready{background:#4c5e4029;color:#3f5333;box-shadow:inset 0 0 0 1px #4c5e403d}.status .status-state--warning{background:#8f35282e;color:#8f3528;box-shadow:inset 0 0 0 1px #8f35286b}.status .status-state--muted{color:#74685b}.controls{gap:14px;overflow:hidden}.panel{border-bottom:0;padding-bottom:14px;position:relative}.panel.selected{margin-inline:-6px;padding:18px 12px 20px;background:#e7decd75}.panel:after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,rgba(185,147,90,.2),transparent 28%,rgba(38,44,39,.1) 50%,transparent 72%,rgba(185,147,90,.18)),radial-gradient(120px 10px at 50% 50%,rgba(31,35,32,.05),transparent 76%);opacity:.64}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}.segmented button{min-height:58px;border-radius:3px;border:0;background:#fffaf2b3;font-weight:700;position:relative}.segmented button.active{background:var(--pine);color:#fffaf2}.segmented small{display:block;font-weight:400;font-size:11px;margin-top:3px}.summary p{color:var(--muted);margin-bottom:4px}.summary strong{font-size:32px}.progress{height:8px;background:#eadfcebd;border-radius:2px;overflow:hidden;margin-top:14px}.progress span{display:block;height:100%;background:var(--sage)}.selected-detail img{width:86px;height:86px;object-fit:contain;-webkit-clip-path:circle(48% at 50% 50%);clip-path:circle(48% at 50% 50%)}.selected-detail{min-height:0}.selected-detail strong{display:block;margin:6px 0}.selected-meta{display:block;color:var(--muted);margin-bottom:10px}.selected-detail p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}.selected-sizes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.selected-sizes .bead-size:disabled{opacity:.45;cursor:not-allowed}.bottom-actions{margin-top:auto}.preview-page{min-height:100vh;background:linear-gradient(180deg,#442d1d1a,#e7dcc85c),var(--paper-texture);overflow-x:clip;position:relative}.preview-page:before{content:"";position:fixed;inset:72px 0 0;pointer-events:none;background:linear-gradient(90deg,#f8f3e7fa 0 34%,#f8f3e7b8 58%,#3a2b1f33),var(--landscape-texture);background-size:cover;background-position:center top;opacity:.76}.preview-page:after{content:"";position:fixed;left:7vw;top:112px;width:min(58vw,760px);height:min(34vw,390px);pointer-events:none;background:linear-gradient(110deg,#3c1512f0,#671d18db 56%,#422318d6),var(--paper-texture);clip-path:polygon(9% 0,100% 0,100% 74%,63% 92%,24% 76%,0 88%,0 18%);opacity:.22;mix-blend-mode:multiply}.preview-head .primary:disabled,.preview-actions .primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.preview-head,.preview-shell{position:relative;z-index:1}.preview-shell{width:min(1332px,calc(100vw - 48px));margin:40px auto 56px;display:grid;grid-template-columns:minmax(420px,1fr) 440px;gap:24px;padding:34px;background:linear-gradient(180deg,#f8f3e7eb,#f8f3e7d6),var(--surface-texture);border:1px solid rgba(38,44,39,.08);border-radius:3px;box-shadow:var(--shadow);position:relative}.preview-shell:before{content:"";position:absolute;inset:-7px;pointer-events:none;background:var(--corner-large),var(--ink-bleed);opacity:.74}.preview-shell>*{position:relative;z-index:1}.preview-intro{grid-column:1 / -1;max-width:640px;position:relative}.preview-intro:after{content:"";position:absolute;right:-620px;top:14px;width:min(42vw,520px);height:1px;background:linear-gradient(90deg,rgba(185,147,90,.34),transparent 30%,rgba(38,44,39,.16) 58%,transparent),radial-gradient(180px 14px at 28% 50%,rgba(31,35,32,.08),transparent 72%);opacity:.72}.preview-intro h1{font-size:clamp(46px,5vw,76px);margin-bottom:14px}.preview-intro p:not(.eyebrow){color:var(--muted);font-size:19px;line-height:1.45;margin:0}.preview-stage,.preview-panel,.preview-details article{background:#fffaf2d1;background-image:var(--surface-texture);border:1px solid rgba(38,44,39,.08);border-radius:3px;box-shadow:0 3px 10px #2c1c1008,inset 0 1px #fffcf5c7}.preview-stage{min-height:560px;padding:22px;display:grid;grid-template-rows:auto 1fr auto;place-items:center;overflow:hidden;background:linear-gradient(180deg,#fffaf2d1,#f1e7d7e6),var(--landscape-texture);background-size:cover;background-position:center;position:relative}.preview-stage:before{content:"";position:absolute;inset:18px;pointer-events:none;background:var(--corner-large);opacity:.34}.preview-stage .stage-top{justify-self:stretch}.preview-stage .stage-top h2{font-size:20px}.preview-stage .bracelet-frame{width:min(100%,520px);height:430px}.preview-panel{padding:28px;display:flex;flex-direction:column;gap:22px}.preview-panel h2{font-size:30px;line-height:1.08;margin:0}.share-box{min-height:58px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 8px 8px 14px;background:#fcf7edeb;border-radius:3px;box-shadow:inset 0 0 0 1px #262c271a}.share-box span{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.share-box .secondary{min-height:40px;padding:0 12px}.preview-total span{color:var(--muted);display:block;margin-bottom:8px}.preview-total strong{display:block;font-size:42px;line-height:1}.preview-total p,.shopify-note{color:var(--muted);line-height:1.45;margin:12px 0 0}.shopify-note{font-size:13px;padding:12px;background:#8f352814;color:#8f3528;border-radius:3px}.shopify-note code{color:inherit;font-size:12px}.preview-actions{display:grid;gap:10px;margin-top:auto}.preview-actions button{width:100%}.preview-details{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.preview-details article{min-height:78px;padding:16px}.preview-details span{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.preview-details strong{font-size:14px;line-height:1.3}@media(max-width:980px){.preview-shell{grid-template-columns:1fr}.preview-panel{order:3}.preview-details{order:4;grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.preview-page:before{top:64px;opacity:.64}.preview-page:after{left:-54px;top:104px;width:360px;height:220px;opacity:.18}.preview-shell{width:calc(100vw - 24px);margin:20px auto 32px;padding:18px 12px;gap:14px}.preview-intro h1{font-size:44px}.preview-intro p:not(.eyebrow){font-size:16px}.preview-intro:after{display:none}.preview-stage{min-height:auto;padding:16px 10px;gap:12px}.preview-stage .bracelet-frame{width:288px;height:288px}.preview-panel{padding:18px}.preview-panel h2{font-size:24px}.share-box{grid-template-columns:auto minmax(0,1fr)}.share-box .secondary{grid-column:1 / -1;width:100%}.preview-details{grid-template-columns:1fr}.preview-head .designer-actions .secondary,.preview-head .designer-actions .primary{flex:1 1 0;min-width:0}}.modal-backdrop{position:fixed;inset:0;background:#2e2b2657;display:grid;place-items:center;z-index:50;padding:20px;animation:backdrop-in var(--dur-2) var(--ease-out)}.modal{width:min(520px,100%);background:var(--paper);background-image:var(--surface-texture);border-radius:3px;border:1px solid rgba(38,44,39,.08);padding:28px;animation:modal-in var(--dur-2) var(--ease-out);position:relative;box-shadow:0 10px 30px #2c1c1017,inset 0 1px #fffcf5b3}.modal:before{content:"";position:absolute;inset:-7px;pointer-events:none;background:var(--corner-large),var(--ink-bleed);opacity:.72}.modal>*{position:relative;z-index:1}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.modal svg{color:var(--tea);width:44px;height:44px}.modal h2{font-size:28px;line-height:1.12;margin:16px 0 24px}.confirm-modal h2{margin-bottom:10px}.confirm-modal p{color:var(--muted);line-height:1.5;margin-bottom:22px}.modal div{display:flex;gap:10px;flex-wrap:wrap}@media(max-width:1240px){.designer{height:100vh;height:100dvh;overflow:hidden}.designer-grid{grid-template-columns:1fr}.designer-grid{overflow:auto;overflow-x:hidden;grid-auto-rows:max-content;align-content:start;max-width:100%}.library{order:2}.stage{order:1;min-height:560px}.controls{order:3}.library,.stage,.controls{min-width:0;width:100%}.bead-list{grid-template-columns:repeat(3,1fr);max-height:none;overflow:visible}.controls{overflow:visible}}@media(max-width:720px){.topbar,.designer-head{min-height:64px;height:auto;padding:10px 16px;gap:10px}.brand,.icon-text{font-size:18px}nav{display:none}.subcopy{font-size:18px;margin-bottom:20px}.hero-actions{flex-direction:column}.hero-actions>button{width:100%}.designer-grid{padding:12px;gap:12px}.designer{height:auto;min-height:100dvh;overflow:visible}.designer-grid{overflow:visible}.library-layout{grid-template-columns:1fr;min-width:0}.library-sidebar{gap:8px;min-width:0}.library-groups{display:flex;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.library-group{min-width:96px;min-height:42px;padding:8px 10px}.search{height:38px;padding:0 10px}.bead-list{display:flex;flex-wrap:nowrap;gap:10px;width:100%;max-width:100%;min-width:0;min-height:156px;max-height:none;overflow-x:auto;overflow-y:hidden;padding:2px 4px 10px 2px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-gutter:auto}.bead-card{width:110px;min-width:110px;max-width:110px;flex:0 0 110px;padding:8px;gap:6px;scroll-snap-align:start}.bead-card-main{width:100%}.bead-card-main img{width:64px;height:64px}.bead-card-main strong{font-size:12px;min-height:30px}.bracelet-frame{--bracelet-scale: .626;width:288px;height:288px;overflow:hidden}.bracelet{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) scale(var(--bracelet-scale))}.stage{display:flex;flex-direction:column;align-items:center;min-height:auto;padding:16px 12px;gap:12px;justify-self:stretch}.stage-top,.status{width:100%}.stage-top{text-align:center}.designer-head{align-items:flex-start}.designer-head .icon-text{width:100%}.designer-actions{width:100%;justify-content:flex-end}.designer-actions .designer-clear,.designer-actions .designer-preview{width:42px;min-width:42px;min-height:42px;padding:0;font-size:0;gap:0}.library,.controls{padding:14px;font-size:13px;overflow-x:hidden}.library-main{max-width:100%;min-width:0;overflow-x:hidden}.library-title{gap:8px}.library-title-copy{gap:6px}.library-title .search{width:clamp(108px,42vw,156px);height:34px;padding:0 8px;gap:6px;margin-left:auto}.section-title h1,.section-title h2{font-size:16px;margin-bottom:8px}.library-title h1{margin-bottom:0}.library-title span{font-size:12px;line-height:1}.subfilter-chip,.bead-size,.status span,.selected-meta,.selected-detail p,.muted,.search input,.segmented small{font-size:12px}.status{gap:6px}.status span{padding:6px 8px}.selected-detail img{width:72px;height:72px}.segmented button{min-height:50px;padding:8px 6px;font-size:13px}.selected-sizes{gap:6px;margin-top:10px}.subfilter-chip,.bead-size{min-height:30px;padding:4px 8px}.bottom-actions>button{width:100%}}@media(max-width:360px){.bracelet-frame{--bracelet-scale: .548;width:252px;height:252px}}