.crystal-app{--ink:#293a31;--sage:#879a7e;--soft:#f7f6f2;color:var(--ink);background:#faf9f7;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif;font-size:14px;position:absolute;inset:0}.crystal-app button{color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0}.crystal-app button:disabled{opacity:.35;cursor:default}.crystal-app button:focus-visible{outline-offset:2px;outline:2px solid #667f5e}.crystal-app svg{flex-shrink:0;width:20px;height:20px}.studio-header{top:var(--device-safe-area-top,54px);z-index:3;background:#f7f5ef;justify-content:space-between;align-items:center;height:44px;padding:0 13px;display:flex;position:absolute;left:0;right:0}.icon-button{place-items:center;width:30px;height:44px;display:grid}.project-title{align-items:center;gap:8px;display:flex;font-family:Songti SC,STSong,serif!important;font-size:20px!important}.tiny-leaf{color:#91a28a;font-size:18px}.save-state{color:#6e8366;align-items:center;gap:4px;font-size:11px;display:flex}.save-state svg{width:16px;height:16px}.studio-scroll{background:#faf9f7;top:calc(var(--device-safe-area-top,54px) + 44px)!important}.hero{background:#f5f1e9 url(/beads/backdrop.png) 50%/cover;height:350px;position:relative;overflow:hidden}.canvas-tools{z-index:2;justify-content:flex-end;align-items:center;gap:25px;height:40px;padding:0 17px;display:flex;position:relative}.hint{color:#727a71;background:#ffffffdf;border-radius:14px;padding:7px 12px;font-size:11px;box-shadow:0 2px 5px #4247310a}.undo-group{background:#ffffff85;border-radius:18px;display:flex}.undo-group button{place-items:center;width:36px;height:34px;display:grid}.bracelet-ring{touch-action:none;width:350px;height:350px;position:absolute;top:16px;left:50%;transform:translate(-50%)}.ring-bead{touch-action:none;padding:0;transition:left .22s,top .22s,width .22s,height .22s;position:absolute;transform:translate(-50%,-50%);border-radius:50%!important}.ring-bead img{object-fit:contain;pointer-events:none;filter:drop-shadow(0 5px 3px #5f553521);width:100%;height:100%}.ring-bead.selected{outline-offset:-5px;background:#ffffff40;outline:1.5px solid #819776}.empty-ring{color:#83917d;place-items:center;font-size:14px;display:grid;position:absolute;inset:0}.sizing-strip{white-space:nowrap;justify-content:center;align-items:center;gap:7px;width:100%;height:40px;display:flex;background:#f2f1ed!important;font-size:12px!important}.sizing-strip b{font-weight:500}.sizing-strip small{color:#747c72;font-size:10px}.sizing-strip svg{width:13px;height:13px;margin-left:5px}.separator{background:#adb3a8;width:1px;height:13px;margin:0 5px}.bead-library{background:#faf9f7;padding:0 14px 4px}.library-heading{justify-content:space-between;align-items:center;height:48px;display:flex}.library-tabs{gap:24px;height:100%;display:flex}.library-tabs button{padding:0;font-size:16px;position:relative}.library-tabs button.active{color:#46613f;font-weight:600}.library-tabs button.active:after{content:"";background:#657e5c;border-radius:2px;height:2px;position:absolute;bottom:4px;left:13px;right:13px}.upload-button{align-items:center;gap:6px;display:flex;font-size:13px!important}.search-field{color:#858a80;background:#eeede9;border-radius:22px;align-items:center;gap:9px;height:34px;padding:0 12px;display:flex}.search-field input{min-width:0;font:inherit;color:var(--ink);background:0 0;border:0;outline:none;flex:1;height:34px;font-size:13px}.search-field input::placeholder{color:#93998d}.search-field button{place-items:center;padding:0;display:grid}.search-field svg{width:18px;height:18px}.category-tabs{gap:12px;padding:12px 0 8px;display:flex}.category-tabs button{background:#f0efeb;border-radius:18px;padding:6px 16px;font-size:12px}.category-tabs button.active{color:#fff;background:#8da084}.bead-grid{grid-template-columns:repeat(4,1fr);display:grid}.bead-choice{flex-direction:column;align-items:center;min-width:0;display:flex;border-bottom:1px solid #eae9e4!important;padding:0 0 9px!important}.bead-choice:nth-child(n+5){border-bottom:0!important;padding-top:5px!important}.bead-choice img{object-fit:contain;filter:drop-shadow(0 4px 3px #61583a12);width:60px;height:60px;transition:transform .18s}.bead-choice:active img{transform:scale(.9)}.bead-choice span{font-size:12px;line-height:18px}.bead-choice small{color:#818579;font-size:10px;line-height:16px}.studio-footer{z-index:4;background:#faf9f7f5;border-top:1px solid #e7e8e1;align-items:center;gap:14px;height:60px;padding:8px 14px;display:flex;position:absolute;left:0;right:0}.material-button{white-space:nowrap;align-items:center;gap:8px;display:flex;padding:0!important;font-size:12px!important}.material-button svg{width:21px;height:21px}.crystal-app .primary,.sheet-body .primary{color:#fff;cursor:pointer;background:#829776;border:0;border-radius:25px;justify-content:center;align-items:center;gap:8px;min-height:44px;font-family:inherit;display:flex}.export-button{flex:1;font-size:16px!important}.toast{z-index:70;color:#fff;white-space:nowrap;background:#2f4432eb;border-radius:20px;padding:10px 17px;font-size:12px;position:absolute;bottom:110px;left:50%;transform:translate(-50%);box-shadow:0 3px 12px #2637281a}.file-input{display:none}.empty-library{text-align:center;color:#677c60;padding:25px 0 32px;font-size:14px}.empty-library small{color:#858d80;margin-top:8px;font-size:12px;display:block}.empty-library button{border:1px solid #879a7e;border-radius:20px;margin-top:15px;padding:8px 14px}.sheet-body{color:#2e3c32;padding-bottom:16px;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,sans-serif}.sheet-body button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}.sheet-body button:disabled{opacity:.4;cursor:default}.sheet-body svg{width:18px;height:18px}.sheet-body .full{width:100%;margin-top:16px}.sheet-note{color:#7c8777;margin:0 0 18px;font-size:13px;line-height:1.7}.selected-detail{align-items:center;gap:16px;display:flex}.selected-detail img{object-fit:contain;width:80px;height:80px}.selected-detail h3{margin:0 0 8px;font-size:18px}.selected-detail p{color:#87907f;margin:0;font-size:13px}.size-options,.bead-actions{gap:10px;margin:15px 0;display:flex}.size-options button{background:#f3f4ef;border-radius:20px;flex:1;padding:10px}.size-options button.active{color:#fff;background:#839979}.bead-actions button{border-bottom:1px solid #eceee6;flex:1;justify-content:center;align-items:center;gap:2px;padding:10px 0;font-size:12px;display:flex}.field-label{color:#6d7b64;margin:15px 0;font-size:13px;display:block}.field-label input{width:100%;font:inherit;color:#2d3e30;background:#f9faf6;border:1px solid #dfe3d8;border-radius:10px;outline-color:#8b9f80;margin-top:8px;padding:12px;display:block}.replacement-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.replacement-grid button{flex-direction:column;align-items:center;gap:3px;display:flex}.replacement-grid img{object-fit:contain;width:50px;height:50px}.replacement-grid small{font-size:11px}.material-list>div{border-bottom:1px solid #eef0e9;align-items:center;gap:10px;padding:8px 0;font-size:14px;display:flex}.material-list img{object-fit:contain;width:46px;height:46px}.material-list small{color:#839078;margin-top:4px;font-size:12px;display:block}.material-list b{margin-left:auto;font-weight:500}.upload-preview{object-fit:contain;width:90px;height:90px;margin:0 auto 12px;display:block}.export-preview{object-fit:contain;background:#f8f6f1;border-radius:12px;width:100%;max-height:400px}.subtle{padding:10px;color:#788c6b!important}.sheet-body .primary{color:#fff}.sheet-body .primary:disabled{opacity:.4}@media (height<=750px){.hero{height:320px}.bracelet-ring{width:320px;height:320px}}.hint{padding:6px 10px;font-size:10px}.category-tabs{padding:10px 0 6px}.category-tabs button{padding:5px 15px}.bead-choice{padding-bottom:4px!important}.bead-choice:nth-child(n+5){padding-top:3px!important}.bead-choice small{line-height:14px}.hint{font-size:11px}.project-title{text-overflow:ellipsis;white-space:nowrap;max-width:65%;display:block;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}.save-state{margin-left:auto}.bead-choice:not(:nth-child(4n)){border-right:1px solid #eeede8!important}.sheet-body button:focus-visible{outline-offset:2px;outline:2px solid #667f5e}@media (prefers-reduced-motion:reduce){.ring-bead,.bead-choice img{transition:none}}.library-heading{height:40px}.category-tabs{padding-top:8px;padding-bottom:4px}.studio-footer{gap:12px}.material-button{flex:1;font-size:13px!important}.export-button{flex:1}.studio-header{background:#f7f5ef}.canvas-tools{justify-content:flex-end;gap:8px;height:42px;padding:0 12px}.hint{text-overflow:ellipsis;white-space:nowrap;max-width:58%;overflow:hidden}.edit-toggle{align-items:center;gap:4px;height:32px;display:flex;box-shadow:0 1px 4px #4d563b12;color:#55704e!important;background:#fff!important;border-radius:18px!important;padding:0 11px!important;font-size:12px!important}.edit-toggle svg{width:15px;height:15px}.edit-toggle.active{color:#fff!important;background:#829776!important}.hero{height:335px}.ring-bead{transition:left .2s,top .2s,width .2s,height .2s,transform .2s}.ring-bead.selected{outline-offset:-4px;outline:2px solid #829776}.ring-bead.drop-target{filter:drop-shadow(0 0 5px #829776)}.drag-instruction{z-index:3;color:#fff;white-space:nowrap;pointer-events:none;background:#2f4432e8;border-radius:14px;padding:7px 12px;font-size:11px;position:absolute;bottom:11px;left:50%;transform:translate(-50%)}.library-heading{height:46px;padding:0 1px}.library-heading h2{color:#46613f;margin:0;font-size:17px;font-weight:700}.upload-button{color:#55704e!important;font-size:13px!important}.upload-button svg{width:17px;height:17px}.search-field{margin-top:2px}.category-carousel{height:44px;margin-top:2px}.category-carousel .mobile-carousel-content{align-items:center;gap:9px}.category-tabs{gap:9px;width:max-content;min-width:0;padding:4px 0!important}.category-tabs button{white-space:nowrap;padding:6px 14px;font-size:12px}.category-tabs button[aria-pressed=true]{color:#fff;background:#8da084}.catalog-count{color:#8a9287;margin:1px 0 7px;font-size:10px}.bead-choice{min-height:91px;border-bottom:1px solid #eae9e4!important;border-right:1px solid #eeede8!important;padding:2px 0 7px!important}.bead-choice img{object-fit:contain;width:52px;height:52px}.bead-choice span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11px;line-height:16px;overflow:hidden}.bead-choice small{font-size:10px;line-height:14px}.import-help{text-align:center;color:#9aa297;margin:10px 0 3px;font-size:10px}.material-button{text-overflow:ellipsis;min-width:0;overflow:hidden}.material-button span{text-overflow:ellipsis;overflow:hidden}.studio-footer{height:60px}.sheet-body{padding-bottom:20px}.sheet-body .full{margin-top:14px}.sheet-body .catalog-count{margin-bottom:6px}.sheet-body .category-carousel{height:39px}.sheet-body .bead-choice{min-height:79px}.sheet-body .bead-choice img{width:44px;height:44px}.sheet-body .bead-grid{margin-bottom:10px}.sheet-body .search-field input{font-size:12px}.sheet-body .import-help{display:none}.design-meta{color:#788574;background:#f5f6f1;border-radius:12px;grid-template-columns:auto 1fr;gap:8px 14px;margin:0 0 13px;padding:11px 13px;font-size:12px;display:grid}.design-meta b{color:#2e3c32;text-align:right;font-weight:600}.material-list>div{min-height:59px}.material-list img{width:44px;height:44px}.subtle{justify-content:center;align-items:center;gap:7px;min-height:42px;display:flex;border:1px solid #dbe2d5!important;border-radius:24px!important}@media (height<=750px){.hero{height:320px}.bracelet-ring{width:310px;height:310px;top:22px}.bead-choice{min-height:82px}.bead-choice img{width:46px;height:46px}}.bracelet-ring{top:20px}.bead-choice:nth-child(n){border-bottom:1px solid #eae9e4!important;padding-top:2px!important}.bead-choice:nth-child(4n){border-right:0!important}.size-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.size-options button{min-width:0;padding:10px 4px;font-size:12px}.device-screen:has(.crystal-app){overflow:clip}.sheet-body a{font:inherit;cursor:pointer;box-sizing:border-box;text-decoration:none}.sheet-body a:focus-visible{outline-offset:2px;outline:2px solid #667f5e}.studio-footer:after{content:"";height:var(--device-safe-area-bottom,34px);background:#faf9f7;position:absolute;top:100%;left:0;right:0}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{color:#293a31;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background:#faf9f7;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}.crystal-app{width:100%;max-width:600px;height:var(--app-height,100dvh);--device-safe-area-top:env(safe-area-inset-top,0px);--device-safe-area-bottom:env(safe-area-inset-bottom,0px);margin:auto;position:relative}.studio-header{grid-template-columns:minmax(0,1fr);gap:8px;height:52px;padding-inline:12px;display:grid}.studio-header .project-title{text-align:center;max-width:100%;position:static;transform:none;font-size:clamp(16px,4.8vw,20px)!important}.studio-scroll{bottom:calc(64px + env(safe-area-inset-bottom,0px));overscroll-behavior-y:contain;touch-action:pan-y;position:absolute;left:0;right:0;overflow-y:auto;top:calc(env(safe-area-inset-top,0px) + 52px)!important}.studio-scroll main{padding-bottom:16px}.studio-footer{height:64px;margin-bottom:env(safe-area-inset-bottom,0px);padding-bottom:8px;bottom:0!important}.studio-footer:after{height:env(safe-area-inset-bottom,0px)}.hero{--ring-size:clamp(220px,min(88vw,43svh),350px);height:calc(var(--ring-size) + 44px)}.bracelet-ring{width:var(--ring-size);height:var(--ring-size);top:38px}.canvas-tools{gap:6px;height:44px}.hint{flex:1;min-width:0;max-width:none;padding:6px 8px;font-size:11px}.undo-group,.edit-toggle{flex-shrink:0}.undo-group button{width:32px;height:40px}.edit-toggle{height:40px}.search-field,.search-field input{height:42px}.search-field input,.sheet-body .search-field input{font-size:16px}.category-carousel{overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;height:48px;overflow-x:auto}.category-tabs{align-items:center;min-height:44px;display:flex}.category-tabs button{flex-shrink:0;min-height:40px}.bead-choice{min-height:96px}.bead-choice span{font-size:12px}.bead-choice img{width:58px;height:58px}.sheet-overlay{z-index:50;background:#1b241b66;position:fixed;inset:0}.bottom-sheet{bottom:var(--keyboard-inset,0px);width:100%;max-width:600px;max-height:calc(var(--app-height,100dvh) - env(safe-area-inset-top,0px) - 16px);z-index:51;padding-bottom:env(safe-area-inset-bottom,0px);background:#fffefb;border-radius:24px 24px 0 0;flex-direction:column;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 -8px 40px #2130201a}.sheet-header{flex-shrink:0;padding:24px 56px 12px 20px;position:relative}.sheet-title{margin:0 0 8px;font-size:18px}.sheet-description{color:#7c8777;margin:0;font-size:13px;line-height:1.6}.sheet-close{color:#53654d;cursor:pointer;background:0 0;border:0;width:44px;height:44px;font-size:28px;position:absolute;top:12px;right:12px}.sheet-content{overscroll-behavior:contain;min-height:0;padding:0 20px 16px;overflow-y:auto}.sheet-body input{font-size:16px}.toast{bottom:calc(80px + env(safe-area-inset-bottom,0px));white-space:normal;text-align:center;max-width:94%}.bead-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bead-choice img{max-width:100%}.sizing-strip{gap:4px;font-size:clamp(10px,3vw,12px)!important}@media (width<=359px){.bead-library{padding-inline:10px}.bead-choice img{width:50px;height:50px}.studio-footer{gap:8px;padding-inline:10px}.material-button{font-size:12px!important}.export-button{font-size:14px!important}.sheet-content{padding-inline:14px}}@media (width>=480px){.bead-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.bead-choice:nth-child(n){border-right:1px solid #eeede8!important}.bead-choice:nth-child(5n){border-right:0!important}}@media (orientation:landscape) and (height<=500px){.hero{--ring-size:220px}.bottom-sheet{border-radius:16px 16px 0 0}.sheet-header{padding-top:12px}.sheet-description{font-size:12px}.export-preview{max-height:40vh}}@media (width>=601px){body{background:#eeede7}.crystal-app{box-shadow:0 0 40px #2334210a}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}.studio-scroll{touch-action:auto;overflow:hidden}.studio-scroll main{flex-direction:column;height:100%;padding-bottom:0;display:flex}.hero,.sizing-strip{flex-shrink:0}.hero{--ring-size:clamp(180px,min(80vw,34svh),280px)}.bead-library{overscroll-behavior:contain;flex:1;min-height:0;padding-bottom:16px;overflow-y:auto}.is-editing .hero{--ring-size:clamp(150px,min(68vw,27svh),230px)}.library-heading{gap:12px}.library-heading h2{margin-right:auto}.clear-design{min-height:44px;color:#697560!important;font-size:13px!important}.inline-editor{z-index:3;background:#faf9f7;border-bottom:1px solid #e6e9df;margin-bottom:8px;padding:8px 0;position:sticky;top:0}.inline-editor-heading{align-items:center;gap:8px;font-size:12px;display:flex}.inline-editor-heading span{color:#788574}.inline-editor-heading button{color:#55704e;min-height:36px;margin-left:auto}.inline-editor-controls{align-items:center;gap:5px;display:flex}.inline-editor-controls label{align-items:center;gap:6px;margin-right:auto;font-size:12px;display:flex}.inline-editor-controls select{font:inherit;color:#293a31;background:#f1f3ec;border:1px solid #d9e0d2;border-radius:8px;padding:8px 4px;font-size:16px}.inline-editor-controls button{place-items:center;width:40px;height:40px;display:grid}.local-draft-note{margin:12px 0 20px;font-size:12px}.canvas-help{align-items:center;gap:5px;min-height:44px;margin-right:auto;display:flex;color:#52654b!important;background:0 0!important;padding:0 6px!important;font-size:12px!important}.canvas-help svg{width:16px;height:16px}.gesture-help{margin:0;padding:0;list-style:none}.gesture-help li{border-bottom:1px solid #eceee5;padding:12px 0}.gesture-help b,.gesture-help span{display:block}.gesture-help b{margin-bottom:6px;font-size:14px}.gesture-help span{color:#687260;font-size:13px;line-height:1.7}@media (orientation:landscape) and (height<=500px){.studio-scroll main{grid-template-rows:minmax(0,1fr) 36px;grid-template-columns:42% 58%;display:grid}.hero{--ring-size:150px;grid-area:1/1;height:100%}.bracelet-ring{top:40px}.sizing-strip{grid-area:2/1;font-size:10px!important}.bead-library{grid-area:1/2/3;height:100%}.canvas-tools{padding:0 4px}.hint{display:none}.is-editing .hero{--ring-size:150px}}