/* Single immersive studio. Shared components, three material themes, one layout and one mesh renderer. */
:root{--ink:#343d36;--muted:#90948b;--accent:#536b55;--paper:#faf9f6;--line:#e8e6df}
*{box-sizing:border-box}
body{margin:0;background:#eeede7;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;font-size:14px}
button{font:inherit;color:inherit}
select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;touch-action:manipulation}
button:focus-visible{outline:2px solid #6b866b;outline-offset:3px}
.app{max-width:1100px;margin:auto;background:var(--paper);min-height:100dvh;padding:0 36px 110px}
header{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;font-family:'Noto Serif SC',serif;letter-spacing:3px;font-size:17px}
.brand small{display:block;font-family:sans-serif;font-size:8px;letter-spacing:2px;margin-top:6px}
.quiet{font-size:12px;color:#777f73;padding:8px}
.eyebrow{font-size:9px;letter-spacing:2px;color:#8f9986}
h1{font-family:'Noto Serif SC',serif;font-size:27px;font-weight:500;margin:12px 0}
p{color:#8b9185;font-size:12px}
.workspace{display:grid;grid-template-columns:1.1fr 1fr;gap:30px}
.studio{border:1px solid var(--line);border-radius:20px;background:#f1f0e9;overflow:hidden;align-self:start}
.live{display:inline-block;width:5px;height:5px;background:#7c9479;border-radius:50%;margin-right:7px}
#tray{width:100%;aspect-ratio:1;position:relative;overflow:hidden;touch-action:none;border-radius:50%;margin:0 auto;max-width:420px}
.placed{position:absolute;transform:translate(-50%,-50%);touch-action:none;z-index:2;padding:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.placed.selected{outline-offset:4px}
.selection{display:flex;align-items:center;justify-content:center;gap:6px}
.selection button{padding:6px 9px;border:1px solid #dcded2;background:#faf9f5;border-radius:6px;font-size:11px}
.primary{background:var(--accent);color:white;border-radius:10px;padding:14px 22px;letter-spacing:1px;font-size:13px;box-shadow:0 4px 9px #41544113}
.sizebar{border-top:1px solid #e1e0d6;display:flex;align-items:center;justify-content:space-between;padding:12px 15px;font-size:10px;color:#7f8878}
.sizebar select{border:0;background:transparent;font-size:11px;font-weight:500;padding:4px 0}
.sizebar>span:last-child{font-size:9px}
.libraryhead{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px}
h2{font-family:'Noto Serif SC',serif;font-size:17px;font-weight:500;margin:0}
h2 small{display:block;font-family:sans-serif;font-size:8px;letter-spacing:1.8px;color:#a1a595;margin-top:7px}
.libraryhead .quiet{font-size:10px}
nav{display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:12px;overflow:auto}
nav button{font-size:11px;white-space:nowrap;padding:9px 12px;border-radius:20px;color:#8a9083}
nav button.active{background:#e7ece2;color:#4b664a}
#catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card{border:1px solid var(--line);border-radius:12px;padding:13px 5px 10px;text-align:center;background:#fffdfa;position:relative;transition:transform .15s}
.card:active{transform:scale(.96);background:#f0f3eb}
.card .name{display:block;font-size:11px}
.card .spec{display:block;font-size:9px;margin:5px 0}
.card .cost{font-size:11px;color:#65765b}
.card .plus{position:absolute;right:7px;top:6px;color:#9da790;font-size:15px}
.card .qty{position:absolute;left:6px;top:7px;font-size:9px;color:#67775e}
footer{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(1100px,100%);background:#faf9f6f5;backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:17px 36px max(17px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;z-index:12}
footer .primary{width:190px}
footer .primary span{margin-left:26px}
.toast{position:fixed;bottom:120px;left:50%;transform:translate(-50%,10px);padding:11px 18px;border-radius:25px;background:#354535ed;color:#fff;font-size:12px;opacity:0;transition:.25s;pointer-events:none;z-index:25;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
dialog{border:0;border-radius:22px;padding:26px;max-width:450px;width:calc(100% - 24px);max-height:85dvh;color:var(--ink);background:#faf9f6}
dialog::backdrop{background:#26302470;backdrop-filter:blur(3px)}
.sheethead{display:flex;justify-content:space-between;align-items:center}
.sheethead h2{margin-top:8px}
.muted{margin-bottom:20px}
#bill{max-height:28dvh;overflow:auto}
.billrow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}
.billrow small{color:#8a9184}
.delivery{background:#efeee7;padding:14px;border-radius:10px;margin-top:18px}
.delivery label{display:flex;align-items:center;font-size:12px;padding:6px 0;gap:5px}
.delivery small{margin-left:auto;font-size:10px;color:#8a9184}
input{accent-color:#536b55}
#billtotal{font-size:13px;display:flex;justify-content:space-between;align-items:center;margin:18px 0}
#billtotal strong{font-size:25px;font-weight:500}
.disclaimer{font-size:10px;line-height:1.8;color:#939789}
dialog>.primary{width:100%;margin-top:8px}
.empty{padding:20px;color:#9a9d91;font-size:12px}
@media(max-width:700px){.eyebrow{font-size:8px}}
@media(max-width:700px){h1{font-size:22px;margin:9px 0}}
@media(max-width:700px){.primary{padding:13px 18px}}
@media(max-width:700px){#catalog{grid-template-columns:repeat(4,1fr);gap:7px}}
@media(max-width:700px){.card .spec{font-size:8px}}
@media(max-width:700px){nav button{font-size:10px}}
@media(max-width:700px){footer .primary{width:160px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:700px){.studio{z-index:8}}
@media(max-width:700px){.library{position:relative;z-index:1}}
.placed{border:0;background:none;box-shadow:none;border-radius:50%;width:max(44px,var(--s));height:max(44px,var(--s));transition:left .48s cubic-bezier(.2,.8,.2,1),top .48s cubic-bezier(.2,.8,.2,1);overflow:visible;-webkit-tap-highlight-color:transparent;isolation:isolate}
.placed.selected{outline:0}
.placed.dragging{box-shadow:none;scale:1;z-index:11;transition:none;will-change:transform}
.placed.drop-target:before{content:'';position:absolute;inset:2px;border:2px dashed #658257;border-radius:50%;pointer-events:none}
.selection{height:50px}
.selection button{min-width:44px;min-height:44px}
.sizebar select{min-height:32px}
.added{animation:cardAdded .25s ease-out}
@keyframes cardAdded{50%{background:#dce8d5;box-shadow:inset 0 0 0 1px #a6baa1}}
button{-webkit-tap-highlight-color:transparent}
#tray{overscroll-behavior:contain}
dialog{overscroll-behavior:contain}
dialog[open]{z-index:30}
@media(max-width:700px){html{height:100%;overflow:hidden;overscroll-behavior:none}}
@media(max-width:700px){body{height:100%;overflow:hidden;overscroll-behavior:none}}
@media(max-width:700px){.app{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:0 12px calc(88px + env(safe-area-inset-bottom))}}
@media(max-width:700px){header{height:52px;min-height:52px}}
@media(max-width:700px){.workspace{display:flex;flex-direction:column;min-height:0;flex:1;gap:0}}
@media(max-width:700px){.studio{position:relative;top:auto;flex:none;width:100%;box-shadow:none;border-radius:16px}}
@media(max-width:700px){#tray{max-width:none;width:clamp(165px,28vh,255px);aspect-ratio:1}}
@media(max-width:700px){.selection{height:48px;gap:5px}}
@media(max-width:700px){.selection button{padding:5px;min-height:44px;min-width:44px}}
@media(max-width:700px){.library{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;min-height:90px;flex:1;margin-top:12px;padding-bottom:12px;scrollbar-width:thin;touch-action:pan-y}}
@media(max-width:700px){.libraryhead{margin-bottom:9px}}
@media(max-width:700px){.libraryhead h2{font-size:14px}}
@media(max-width:700px){.libraryhead h2 small{display:none}}
@media(max-width:700px){.libraryhead .quiet{min-height:36px}}
@media(max-width:700px){nav{padding-bottom:6px;gap:2px}}
@media(max-width:700px){nav button{min-height:36px;padding:6px 9px}}
@media(max-width:700px){.card{padding:7px 2px}}
@media(max-width:700px){.card .spec{margin:3px 0}}
@media(max-width:700px){footer{min-height:78px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}}
@media(max-width:700px){.toast{bottom:calc(100px + env(safe-area-inset-bottom))}}
@media(max-width:700px){dialog{max-height:calc(100dvh - 24px);padding:22px}}
@media(max-width:700px){.delivery label{min-height:44px}}
@media(max-width:700px) and (max-height:700px){header{height:44px;min-height:44px}}
@media(max-width:700px) and (max-height:700px){#tray{width:clamp(138px,26vh,185px)}}
@media(max-width:700px) and (max-height:700px){.selection{height:44px}}
@media(max-width:700px) and (max-height:700px){.library{margin-top:8px}}
@media(max-width:700px) and (max-height:700px){.sizebar>span:last-child{font-size:8px}}
@media(max-width:350px){.selection{gap:2px}}
@media(max-width:350px){.selection>span{max-width:73px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}
@media(max-width:350px){.sizebar{font-size:9px}}
@media(max-width:350px){.sizebar>span:last-child{text-align:right}}
@media(max-width:350px){#catalog{gap:5px}}
@media(max-width:350px){footer .primary{width:145px}}
@media(prefers-reduced-motion:reduce){.placed{transition:none!important;animation:none!important}}
@media(prefers-reduced-motion:reduce){.added{transition:none!important;animation:none!important}}
@media(prefers-reduced-motion:reduce){.toast{transition:none!important;animation:none!important}}
@media(max-width:700px) and (max-height:700px){.libraryhead{height:28px;margin:0 0 4px}}
@media(max-width:700px) and (max-height:700px){.libraryhead h2{font-size:12px}}
@media(max-width:700px) and (max-height:700px){.libraryhead .quiet{min-height:28px;padding:4px}}
@media(max-width:700px) and (max-height:700px){.library nav{display:none}}
@media(max-width:700px) and (max-height:700px){.card .spec{display:none}}
@media(max-width:700px) and (max-height:700px){.card .cost{display:block;margin-top:4px}}
@media(max-width:700px) and (max-height:700px){.toast{max-width:calc(100% - 30px);white-space:normal;text-align:center;line-height:1.5}}
.physics-active .placed{transition:none;will-change:left,top}
@keyframes beadAppear{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
#focusEditor{padding:18px;max-width:760px;width:calc(100% - 20px);max-height:calc(100dvh - 20px);background:#faf9f6}
#focusEditor .focus-heading{display:flex;align-items:center;justify-content:space-between}
.focus-heading h2{margin-top:7px}
.focus-heading button{min-height:44px}
.focus-note{font-size:11px;line-height:1.7;color:#8a9183}
#focusStage .studio{margin:auto;width:100%;max-width:640px}
#focusStage #zoom{display:none}
#focusStage #tray{width:min(90vw,54dvh,470px);max-width:none}
#focusStage .selection{height:50px}
#focusStage .sizebar{padding:6px 14px}
@media(max-width:700px){#focusEditor{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}}
@media(max-width:700px){#focusEditor[open]{display:flex;flex-direction:column}}
@media(max-width:700px){.focus-heading{flex:none;min-height:50px}}
@media(max-width:700px){.focus-heading h2{font-size:17px}}
@media(max-width:700px){.focus-note{flex:none;margin:10px 0 16px}}
@media(max-width:700px){#focusStage{display:flex;flex:1;align-items:center;min-height:0}}
@media(max-width:700px){#focusStage .studio{flex:none}}
@media(max-width:700px){#focusStage #tray{width:min(91vw,54dvh);max-width:none}}
@media(max-width:700px){#focusStage .sizebar{padding:5px 10px}}
@media(max-width:700px){#focusStage .selection.has-selected>span{max-width:65px}}
.selection:not(.has-selected)>span{max-width:none!important;white-space:nowrap}
.selection.has-selected>span{max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selection.has-selected{gap:4px}
.selection.has-selected button{padding:5px;min-width:44px}
#focusStage .selection:not(.has-selected)>span{font-size:10px}
@media(max-width:350px){.selection.has-selected>span{font-size:9px}}
@media(max-width:700px) and (max-height:700px){#focusStage #tray{width:min(91vw,calc(100dvh - 310px))}}
@media(max-width:700px) and (max-height:700px){#focusEditor .focus-note{margin:6px 0 8px;font-size:10px}}
@media(max-width:700px) and (max-height:700px){#focusStage .sizebar{font-size:9px}}
[hidden]{display:none!important}
.header-actions{display:flex;align-items:center;gap:2px}
.history-tools{display:flex;align-items:center;gap:2px}
.history-tools button{width:44px;height:44px;padding:2px;font-size:20px}
.history-tools button span{display:block;font-size:9px;color:#8a9184;margin-top:2px}
button:disabled{opacity:.35;cursor:default}
.sizebar #fit{margin-left:6px;color:#697d5d}
#replaceBanner{padding:8px 10px;border-radius:9px;background:#e5ecdf;color:#536b55;display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:9px}
#replaceBanner button{min-height:36px;padding:5px 9px}
#startGuide{max-width:560px}
#startGuide .muted{line-height:1.8}
.start-tabs{display:flex;background:#eeeee6;padding:4px;border-radius:11px;gap:3px;margin:18px 0}
.start-tabs button{flex:1;padding:11px 5px;border-radius:8px;font-size:12px;min-height:44px}
.start-tabs button.active{background:#fffef9;box-shadow:0 2px 5px #353b2510;color:#536b55}
#templateList{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.template-card{background:#f3f2ec;border:1px solid #e4e4da;border-radius:15px;padding:10px 7px 14px;text-align:center}
.template-card strong{display:block;font-family:'Noto Serif SC',serif;font-size:14px;font-weight:500}
.template-card small{display:block;color:#93998a;font-size:10px;margin:7px 0}
.template-card>span{font-size:11px;color:#617455}
.bracelet-preview{position:relative;width:250px;max-width:100%;aspect-ratio:1;margin:4px auto 16px;background:radial-gradient(circle,#f9f8f3,#efede5);border-radius:50%;overflow:visible}
.preview-bead{position:absolute;transform:translate(-50%,-50%)}
.template-preview{width:136px;margin-bottom:8px}
.preview-number{position:absolute;left:50%;top:-10px;transform:translateX(-50%);font-size:8px;color:#62705a;background:#fffffff0;border-radius:50%;width:13px;height:13px;line-height:13px;text-align:center}
.field-label{display:block;font-size:12px;color:#6c7863;margin:16px 0}
.field-label input{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #dedfd3;border-radius:9px;background:#fffefa;color:#3a4535;font:inherit;font-size:14px;min-height:44px}
.field-label select{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #dedfd3;border-radius:9px;background:#fffefa;color:#3a4535;font:inherit;font-size:14px;min-height:44px}
.field-label textarea{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #dedfd3;border-radius:9px;background:#fffefa;color:#3a4535;font:inherit;font-size:14px;min-height:44px}
.field-label textarea{resize:vertical}
.start-panel>.primary{width:100%}
.free-intro{text-align:center;padding:30px 0;font-family:serif;font-size:18px}
.free-intro p{font-family:sans-serif;font-size:12px;margin-top:20px}
#budgetMessage{color:#9b7750;font-size:12px;line-height:1.8}
.tool-grid{display:grid;gap:9px}
.tool-grid button{padding:15px;background:#eeeee6;border:1px solid #e3e4da;border-radius:10px;text-align:left;font-size:13px;min-height:62px}
.tool-grid button small{display:block;color:#939986;font-size:11px;margin-top:7px}
.repeat-section{margin-top:22px;border-top:1px solid var(--line);padding-top:12px}
.repeat-section h3{font-size:14px;font-weight:500}
.repeat-fields{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.repeat-fields select{min-height:44px;padding:6px;border:1px solid #dedfd3;background:#fffdfa;border-radius:6px}
.repeat-section .primary{width:100%}
.summary-size{background:#eeeee5;padding:13px;border-radius:10px;font-size:12px;line-height:1.8;margin-bottom:12px;color:#718064}
.fulfillment-note{padding:14px;border:1px solid var(--line);border-radius:10px}
.fulfillment-note strong{font-size:12px;font-weight:500}
.fulfillment-note p{font-size:11px;line-height:1.7;margin:7px 0 0}
.secondary-wide{width:100%;padding:14px;border:1px solid #bfcab6;border-radius:10px;color:#597450;min-height:44px}
.export-actions{display:flex;gap:8px;margin:20px 0 4px}
.export-actions button{flex:1;font-size:12px;min-height:44px}
.export-actions button:not(.primary){border:1px solid #c8cebd;border-radius:10px}
#productionMeta p{font-size:12px;color:#77816d;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
#productionMeta strong{font-weight:500;color:#57654e}
#productionRows .billrow{gap:12px;align-items:center;font-size:11px}
#productionRows small{font-size:10px;white-space:nowrap}
#summary #bill{max-height:170px}
#production{max-width:520px}
@media(max-width:700px){.header-actions .quiet{font-size:10px;padding:5px;min-height:36px}}
@media(max-width:700px){.brand{letter-spacing:2px;font-size:14px}}
@media(max-width:700px){.brand small{font-size:7px}}
@media(max-width:700px){.history-tools{gap:0}}
@media(max-width:700px){.sizebar{padding:2px 8px;gap:3px}}
@media(max-width:700px){.sizebar>span:last-child{max-width:145px;text-align:right;font-size:9px}}
@media(max-width:700px){.sizebar select{font-size:10px}}
@media(max-width:700px){.sizebar #fit{margin-left:3px}}
@media(max-width:700px){.template-preview{width:112px}}
@media(max-width:700px){#templateList{gap:8px}}
@media(max-width:700px){.template-card small{font-size:9px}}
@media(max-width:700px){.template-card>span{font-size:10px}}
@media(max-width:700px){.template-card{padding:8px 5px 12px}}
@media(max-width:700px){#startGuide{padding:20px 16px}}
@media(max-width:700px){#startGuide h2{font-size:18px}}
@media(max-width:700px){.start-tabs button{font-size:11px}}
@media(max-width:700px){.summary-size{font-size:11px}}
@media(max-width:700px){#summaryPreview{width:230px}}
@media(max-width:700px){.field-label input{font-size:16px}}
@media(max-width:700px){.field-label select{font-size:16px}}
@media(max-width:700px){.field-label textarea{font-size:16px}}
@media(max-width:700px){#productionPreview{width:260px}}
@media(max-width:700px){.export-actions{flex-wrap:wrap}}
@media(max-width:350px){.sizebar>span:last-child{font-size:8px;max-width:125px}}
@media(max-width:350px){.sizebar>span:first-child{font-size:8px}}
@media(max-width:350px){.sizebar select{font-size:9px}}
@media(max-width:350px){.template-preview{width:98px}}
@media(max-width:350px){.template-card small{font-size:8px}}
@media(max-width:350px){.history-tools button{width:44px}}
@media(max-width:350px){.repeat-fields{font-size:10px}}
@media(max-width:350px){.start-tabs button{font-size:10px}}
@media(max-width:350px){#productionRows .billrow{gap:6px;font-size:10px}}
@media(max-width:350px){#productionRows small{font-size:9px}}
.sound-toggle{min-width:44px;min-height:44px;padding:5px;border:1px solid #e0e3d6;border-radius:22px;color:#919986;white-space:nowrap;font-size:17px}
.sound-toggle span{font-size:9px}
.sound-toggle.sound-on{color:#4c7044;background:#e6eddf;border-color:#bdcdb2}
.focus-actions{display:flex;gap:5px;align-items:center}
@media(max-width:350px){.header-actions .quiet{font-size:9px;padding:4px}}
@media(max-width:350px){.header-actions{gap:0}}
@media(max-width:350px){.header-actions .sound-toggle{min-width:40px}}
@media(max-width:350px){.brand{gap:5px;font-size:12px;letter-spacing:1px}}
@media(max-width:350px){.brand small{font-size:6px}}
@media(max-width:350px){.focus-heading h2{font-size:15px}}
@media(max-width:350px){.focus-heading .quiet{font-size:10px}}
.rolling-spheres{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;border-radius:50%}
.rolling-spheres[hidden]{display:none}
.three-d-status{font-size:11px;text-align:center;color:#66715f;padding:8px}
.three-d-status[hidden]{display:none}
.selection{color:#65715f;font-size:11px}
.selection.has-selected button{min-height:44px;color:#465741}
.card .spec{color:#737b6c}
@media(max-width:700px){.card .name{font-size:11px}}
@media(max-width:700px){.card .cost{font-size:12px}}
@media(max-width:700px){.card .qty{font-size:10px}}
@media(max-width:700px){.libraryhead .quiet{font-size:11px}}
@media(max-width:700px){.selection:not(.has-selected)>span{font-size:11px}}
@media(max-width:700px){.sizebar{min-height:36px}}
@media(max-width:700px){.sizebar>span:last-child{color:#65715f}}
@media(max-width:350px){.selection.has-selected>span{max-width:55px}}
@media(max-width:350px){.selection.has-selected{gap:2px}}
@media(max-width:700px) and (max-height:780px){.library{margin-top:10px}}
@media(max-width:700px) and (max-height:780px){.libraryhead{margin-bottom:5px}}
@media(max-width:700px) and (max-height:780px){#tray{width:clamp(150px,26dvh,200px)}}
.shared-sphere-preview{display:block;width:54px;height:54px;margin:0 auto 3px;pointer-events:none}
.shared-sphere-preview img{display:block;width:100%;height:100%;object-fit:contain}
.shared-sphere-preview{position:relative}
.live-material-preview{position:absolute;inset:0;width:100%;height:100%;display:block}
.card[data-view="selected"]{border-color:#72856a;background:#f7f8f2}
.card[data-view="selected"] .spec{color:#536b55}
#tray.drag-delete-ready{outline:2px solid #a56b5f;outline-offset:-3px}
.tray-delete-hint{border-radius:12px;background:#7b463bed;color:white;text-align:center;line-height:1.5}
.delete-recovery{position:fixed;z-index:40;bottom:calc(96px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;padding:6px 10px 6px 16px;border-radius:14px;background:#354535;color:white;box-shadow:0 4px 18px #26332426;white-space:nowrap;font-size:12px}
.delete-recovery button{min-width:56px;min-height:44px;color:white;background:#ffffff1c;border-radius:9px;padding:8px 12px;font-weight:600}
#focusEditor .delete-recovery{bottom:calc(16px + env(safe-area-inset-bottom))}
.tray-delete-hint{position:fixed;left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);z-index:45;padding:8px 12px;font-size:11px;pointer-events:none}
.drag-bead-ghost{position:fixed;transform:translate(-50%,-50%);z-index:60;pointer-events:none;will-change:left,top}
.placed.dragging:before{display:none!important}
.studio-preferences{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2px 10px;font-size:10px}
.theme-options{display:flex;gap:2px}
.language-options{display:flex;gap:2px}
.language-options{margin-left:auto}
.studio-preferences button{min-width:36px;min-height:40px;border-radius:7px;padding:5px 8px;font-size:11px}
.studio-preferences button[aria-pressed=true]{background:var(--accent);color:var(--paper)}
.theme-label{color:var(--muted)}
html[data-theme=A]{--ink:#292b29;--accent:#292b29;--paper:#faf9f6;--line:#e3e1db;--muted:#687166}
html[data-theme=A] .primary{background:#292b29}
html[data-theme=A] .studio{background:#f0efea}
html[data-theme=A] .primary{border-radius:7px}
html[data-theme=B]{--ink:#414933;--accent:#596747;--paper:#f3eee4;--line:#ded8ca;--muted:#71765e}
html[data-theme=B] body{background:#dfd8c9}
html[data-theme=B] .app{background:#f3eee4}
html[data-theme=B] dialog{background:#f3eee4}
html[data-theme=B] .studio{background:#eae5d8}
html[data-theme=B] footer{background:#f3eee4f5}
html[data-theme=B] .card{background:#faf7ef}
html[data-theme=B] .studio-preferences{background:#ede7d9}
html[data-theme=C]{--ink:#f0ede5;--accent:#e9e3d7;--paper:#202321;--line:#444a43;--muted:#b9c0b2;color-scheme:dark}
html[data-theme=C] body{background:#151816}
html[data-theme=C] .app{background:#202321;color:#f0ede5}
html[data-theme=C] dialog{background:#202321;color:#f0ede5}
html[data-theme=C] .studio{background:#2b302b;border-color:#444a43}
html[data-theme=C] footer{background:#202321f5}
html[data-theme=C] .primary{background:#e9e3d7;color:#252c24;box-shadow:none}
html[data-theme=C] .card{background:#30372e;border-color:#4b5447;color:#eeeae0}
html[data-theme=C] .card[data-view=selected]{background:#384331;border-color:#bac8ab}
html[data-theme=C] .quiet{color:#c0c7b5}
html[data-theme=C] .selection{color:#c0c7b5}
html[data-theme=C] p{color:#c0c7b5}
html[data-theme=C] .sizebar{color:#c0c7b5}
html[data-theme=C] .card .spec{color:#c0c7b5}
html[data-theme=C] .card .cost{color:#c0c7b5}
html[data-theme=C] .card .qty{color:#c0c7b5}
html[data-theme=C] nav button{color:#c0c7b5}
html[data-theme=C] .selection button{background:#374031;color:#f1eddf;border-color:#55634b}
html[data-theme=C] .sound-toggle{background:#374031;color:#f1eddf;border-color:#55634b}
html[data-theme=C] nav button.active{background:#e9e3d7;color:#293026}
html[data-theme=C] .sizebar select{color:#e9eddf}
html[data-theme=C] input{background:#30372c;color:#f0ede5;border-color:#58614e}
html[data-theme=C] select{background:#30372c;color:#f0ede5;border-color:#58614e}
html[data-theme=C] textarea{background:#30372c;color:#f0ede5;border-color:#58614e}
html[data-theme=C] .delivery{background:#30372c;color:#f0ede5}
html[data-theme=C] .fulfillment-note{background:#30372c;color:#f0ede5}
html[data-theme=C] .summary-size{background:#30372c;color:#f0ede5}
html[data-theme=C] .template-card{background:#30372c;color:#f0ede5}
html[data-theme=C] #replaceBanner{background:#30372c;color:#f0ede5}
html[data-theme=C] .studio-preferences{background:#272e25}
html[data-theme=C] .studio-preferences button[aria-pressed=true]{color:#263022;background:#e9e3d7}
html[data-theme=C] .billrow{border-color:#454e3d}
html[data-theme=C] .sizebar{border-color:#454e3d}
html[data-theme=C] header{border-color:#454e3d}
@media(max-width:700px){html[data-language=en] .brand{font-size:12px;letter-spacing:.5px}}
@media(max-width:700px){html[data-language=en] .brand small{font-size:6px;letter-spacing:1px}}
@media(max-width:700px){html[data-language=en] .header-actions .quiet{font-size:10px;padding:4px}}
@media(max-width:700px){html[data-language=en] .card .name{font-size:10px;line-height:1.25;min-height:25px}}
@media(max-width:700px){html[data-language=en] .selection.has-selected>span{font-size:10px;max-width:75px}}
@media(max-width:700px){html[data-language=en] .studio-preferences .theme-label{font-size:10px}}
@media(max-width:700px){.studio-preferences{gap:5px;padding:1px 8px}}
@media(max-width:350px){html[data-language=en] .brand{font-size:10px}}
@media(max-width:350px){html[data-language=en] .header-actions .quiet{font-size:9px}}
@media(max-width:350px){html[data-language=en] .selection.has-selected>span{max-width:48px}}
html[data-language=en] footer .primary{letter-spacing:0;font-size:12px;white-space:nowrap}
html[data-language=en] footer .primary span{margin-left:8px}
.studio-app .app{max-width:none;height:100dvh;min-height:0;padding:0;display:flex;flex-direction:column;overflow:hidden}
.studio-app header{border:0;z-index:10}
.studio-app .header-actions{display:flex;align-items:center}
.studio-app #start{display:none}
.studio-app #save{border-radius:24px;min-height:40px}
.studio-app .settings-launch{min-height:44px}
.studio-app .workspace{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;flex:1;min-height:0;gap:0}
.studio-app .studio{position:relative;top:0;align-self:stretch;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;align-items:center;overflow:visible;min-height:0;width:100%}
.studio-app .live{display:none}
.studio-app #zoom{font-size:20px;min-width:40px;padding:4px}
.studio-app #tray{max-width:none;flex:none;margin:0}
.studio-app .selection{position:absolute;z-index:4;color:var(--ink)}
.studio-app .selection:not(.has-selected){display:none}
.studio-app .selection button{min-height:44px;color:var(--ink)}
.studio-app .history-tools{display:flex}
.studio-app .history-tools button{min-width:44px;min-height:44px;border-radius:50%;font-size:19px}
.studio-app #scatter{min-width:44px;min-height:44px;border-radius:50%;font-size:19px}
.studio-app .history-tools span{display:none}
.studio-app #scatter span{display:none}
.studio-app .library{margin:0;padding:22px 18px;min-height:0;overflow:auto;touch-action:pan-y;border-left:1px solid var(--line);border-radius:0}
.studio-app .libraryhead{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.studio-app .libraryhead h2{flex:1}
.studio-app .libraryhead h2 small{display:none}
.studio-app #preset{font-size:10px;min-height:40px}
.studio-app .material-expand{display:none}
.studio-app .card[data-view=selected]{border-color:var(--muted);background:var(--paper)!important}
.studio-app .card .cost{font-size:11px}
.studio-app footer{position:relative;transform:none;left:auto;bottom:auto;width:100%;flex:none}
.studio-app footer .primary{box-shadow:none}
.studio-app #studioSettings h3{font-size:12px;margin:24px 0 10px;font-weight:500;color:var(--muted)}
.studio-app #studioSettings .studio-preferences{padding:8px 0;border:0;background:transparent}
.studio-app #studioSettings .sizebar{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:8px 0;border:0}
.studio-app #studioSettings .sizebar>span:first-child{display:flex;align-items:center;gap:12px}
.studio-app #studioSettings .sizebar select{border:1px solid var(--line);padding:8px;border-radius:8px;font-size:14px;min-height:44px}
.studio-app #clear{border:1px solid var(--line);border-radius:10px;min-height:44px;width:100%}
.studio-app #focusEditor .focus-note{display:none}
.studio-app #focusStage .selection{height:46px}
@media(max-width:700px){.studio-app header{padding:0 20px;height:58px;min-height:58px}}
@media(max-width:700px){.studio-app .brand{font-size:14px;letter-spacing:2px}}
@media(max-width:700px){.studio-app .brand small{font-size:7px}}
@media(max-width:700px){.studio-app .header-actions .quiet{font-size:11px}}
@media(max-width:700px){.studio-app .sound-toggle{width:34px;height:34px;min-width:34px;min-height:34px}}
@media(max-width:700px){.studio-app .sound-toggle span{display:none}}
@media(max-width:700px){.studio-app .workspace{flex-direction:column;gap:0}}
@media(max-width:700px){.studio-app .studio{flex:1;min-height:0}}
@media(max-width:700px){.studio-app .selection{bottom:62px}}
@media(max-width:700px){.studio-app .library{flex:none;min-height:0;border-left:0;border-top:1px solid var(--line);padding:9px 0 0;z-index:9;transition:height .2s}}
@media(max-width:700px){.studio-app .drawer-grip{border-radius:2px;margin:0 auto 9px}}
@media(max-width:700px){.studio-app .libraryhead{margin:0 0 2px;gap:6px}}
@media(max-width:700px){.studio-app #preset{font-size:10px;padding:3px;min-height:32px}}
@media(max-width:700px){.studio-app .material-expand{display:block;min-height:32px;padding:4px 8px;color:var(--muted)}}
@media(max-width:700px){.studio-app nav{padding:0 18px 6px;gap:6px;border:0;scrollbar-width:none}}
@media(max-width:700px){.studio-app nav button{padding:6px 12px;min-height:32px;font-size:11px}}
@media(max-width:700px){.studio-app #catalog{display:flex;overflow-x:auto;overflow-y:hidden;gap:6px;padding:2px 17px 12px;touch-action:pan-x;overscroll-behavior-x:contain}}
@media(max-width:700px){.studio-app .card{flex:0 0 82px;padding:8px 3px 6px}}
@media(max-width:700px){.studio-app .card .name{white-space:normal;line-height:1.2}}
@media(max-width:700px){.studio-app .card .spec{margin:3px 0}}
@media(max-width:700px){.studio-app .card .cost{font-size:10px}}
@media(max-width:700px){.studio-app .card .plus{top:4px;right:4px}}
@media(max-width:700px){.studio-app .library.expanded{position:absolute;inset:auto 0 0;box-shadow:0 -20px 60px #1c22152b;overflow-y:auto}}
@media(max-width:700px){.studio-app .library.expanded #catalog{overflow:visible;touch-action:pan-y;padding-top:8px}}
@media(max-width:700px){.studio-app .library.expanded .card{width:auto}}
@media(max-width:700px){.studio-app footer{padding:10px 20px calc(10px + env(safe-area-inset-bottom))}}
@media(max-width:700px){.studio-app footer .primary{width:164px}}
@media(max-width:700px){.studio-app #studioSettings{margin:auto 0 0;width:100%;max-width:100%;border-radius:24px 24px 0 0;padding:24px}}
@media(max-width:700px){.studio-app .toast{bottom:calc(90px + env(safe-area-inset-bottom))}}
@media(max-width:700px) and (max-height:760px){.studio-app header{height:50px;min-height:50px}}
@media(max-width:700px) and (max-height:760px){.studio-app .library{height:212px}}
@media(max-width:700px) and (max-height:760px){.studio-app #tray{width:min(calc(100vw - 44px),calc(100dvh - 440px))}}
@media(max-width:700px) and (max-height:760px){.studio-app .card .spec{display:none}}
@media(max-width:700px) and (max-height:760px){.studio-app .shared-sphere-preview{width:50px;height:50px}}
@media(prefers-reduced-motion:reduce){.studio-app .library{transition:none}}
.studio-app{background:var(--paper)}
.studio-app header{position:relative;justify-content:center;border-bottom:1px solid var(--line);margin:0 22px;padding:0;height:70px;min-height:70px}
.studio-app .brand{font-family:Georgia,'Times New Roman',serif;font-size:25px!important;text-align:center}
.studio-app .brand small{font-family:Arial,sans-serif;font-size:7px!important;letter-spacing:4px!important;margin-top:5px}
.studio-app .studio-back{position:absolute;left:0;top:12px;min-width:40px;min-height:44px;color:var(--ink);text-decoration:none;font-size:34px;font-weight:200;line-height:40px}
.studio-app .header-actions{position:absolute;right:0;gap:0}
.studio-app .header-actions [data-sound-toggle]{display:none}
.studio-app #save{border:0;padding:4px 6px;font-family:Georgia,serif;font-size:15px}
.studio-app .settings-launch{position:absolute;right:0;top:59px;font-size:18px!important;letter-spacing:2px;z-index:11;min-width:40px;color:var(--ink)}
.studio-app .studio{padding:68px 10px 12px;justify-content:center;isolation:isolate}
.studio-app .studio-headline{position:absolute;left:0;right:0;top:6px;margin:12px 0;font-size:34px;font-family:Georgia,'Songti SC',serif;text-align:center;z-index:2}
.studio-app #tray{width:min(49vw,calc(100dvh - 240px),600px);overflow:visible;border-radius:0}
.studio-app .rolling-spheres{border-radius:0}
.studio-app .floating-history{position:absolute;z-index:6;display:flex;flex-direction:column}
.studio-app .floating-history button{border-radius:50%;border:1px solid var(--line);padding:0}
.studio-app .floating-history button span{display:none}
.studio-app .selection{bottom:4px;background:var(--paper);border:1px solid var(--line);border-radius:30px;left:50%;right:auto;width:max-content;max-width:calc(100% - 20px);transform:translateX(-50%);padding:0 8px;height:46px}
.studio-app .selection button{border:0;background:transparent;min-width:36px;padding:4px;border-radius:0;font-size:10px}
.studio-app .selection.has-selected>span{max-width:58px;font-size:10px}
.studio-app .libraryhead #preset{display:none}
.studio-app .libraryhead h2{font-family:Georgia,'Songti SC',serif;font-size:21px;font-weight:400}
.studio-app .material-expand{font-size:10px;opacity:.7}
.studio-app nav{border-bottom:1px solid var(--line);margin:0 16px;padding:0 0 7px;justify-content:space-between;gap:0}
.studio-app nav button{font-family:Georgia,'Songti SC',serif;color:var(--ink);min-height:30px}
.studio-app #catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-y:auto;overflow-x:hidden;padding:8px 14px 12px;gap:7px;touch-action:pan-y;max-height:100%}
.studio-app .card{border:1px solid var(--line);border-radius:10px;padding:7px 2px;min-width:0}
.studio-app .card .cost{display:none}
.studio-app .card .plus{display:none}
.studio-app .card .qty{font-size:8px;top:4px;left:5px;opacity:.65}
.studio-app .shared-sphere-preview{width:62px;height:62px;max-width:100%;margin:0 auto 5px}
.studio-app .card .spec{display:block!important;margin:4px 0 0;color:var(--ink)}
.studio-app footer{padding:8px 18px 12px;min-height:68px;gap:7px}
.studio-app .recipe-status{font-family:Georgia,'Songti SC',serif;padding:0;min-height:44px;white-space:nowrap}
.studio-app .size-guide{font-family:Georgia,'Songti SC',serif;min-height:44px;padding:0;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.studio-app footer .primary{width:auto;padding:12px 12px;min-height:44px;font-family:Georgia,'Songti SC',serif;letter-spacing:0;margin-left:auto}
.studio-app footer .primary span{margin-left:9px!important}
.studio-app #designActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.studio-app #designActions>button{min-height:44px;border:1px solid var(--line);border-radius:10px;font-size:12px;width:auto;color:var(--ink);background:transparent}
.studio-app #clear{grid-column:1/-1}
.studio-app .studio{background:transparent!important}
.studio-app .workspace{background:transparent!important}
.studio-app #focusStage .studio-headline{font-size:27px}
html[data-theme=A] .studio-app{background:#f5f0e9}
html[data-theme=B] .studio-app{background:#eee5d6}
html[data-theme=C] .studio-app{background:#242424;color:#f3eee7;--ink:#f3eee7;--muted:#c5beb6;--line:#ffffff30;--paper:#292929}
html[data-theme=C] .studio-app .primary{color:#222;background:#f2eae0}
html[data-theme=C] .studio-app nav button{color:#eee8df}
html[data-theme=C] .studio-app nav button.active{background:#f2eae0;color:#222}
@media(max-width:700px){.studio-app .workspace{display:flex}}
@media(max-width:700px){.studio-app #tray{max-width:480px}}
@media(max-width:700px){.studio-app .library{height:236px;padding-top:10px;overflow:hidden;display:flex;flex-direction:column}}
@media(max-width:700px){.studio-app .drawer-grip{flex:none;background:#9b928980}}
@media(max-width:700px){.studio-app .libraryhead{min-height:26px;flex:none}}
@media(max-width:700px){.studio-app nav{flex:none}}
@media(max-width:700px){.studio-app #catalog{flex:1;min-height:0;align-content:start;scrollbar-width:thin}}
@media(max-width:700px){.studio-app .library.expanded{height:min(66dvh,550px)}}
@media(max-width:700px){.studio-app .library.expanded #catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-y:auto}}
@media(max-width:700px){.studio-app .library .card{flex:none}}
@media(max-width:700px){.studio-app footer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}}
@media(max-width:700px){.studio-app .selection.has-selected{gap:0}}
@media(max-width:700px){.studio-app .selection.has-selected>span{max-width:54px}}
@media(max-width:350px){.studio-app header{height:62px;min-height:62px;margin:0 16px}}
@media(max-width:350px){.studio-app .brand{font-size:22px!important}}
@media(max-width:350px){.studio-app .library{height:220px}}
@media(max-width:350px){.studio-app footer{padding-left:12px;padding-right:12px;gap:6px}}
.studio-app #tray{isolation:isolate}
.studio-app .library:not(.expanded) #catalog{overflow-y:auto}
.studio-app .library:not(.expanded) .card{min-height:115px}
.studio-app .library:not(.expanded){height:226px}
.studio-app .measurement-help{font-size:12px;line-height:1.8;color:var(--muted);margin:10px 0}
.studio-app #designActions .sound-toggle{display:flex;width:auto;height:auto;border-radius:10px;gap:7px;justify-content:center}
.studio-app #designActions .sound-toggle span{display:inline}
.studio-app #studioSettings{overflow-y:auto}
.studio-app .floating-history{right:15px;top:63px;gap:8px}
.studio-app .floating-history button{border-color:#9e978d;background:#f7f3ed;color:#292621;font-family:Arial,sans-serif;font-size:23px;font-weight:400;line-height:1}
html[data-theme=C] .studio-app .floating-history button{background:#363432;border-color:#9c948b;color:#fff7ed}
.studio-app .floating-history button:disabled{color:#8d8781;border-color:#6e6862;background:#2c2b29}
html:not([data-theme=C]) .studio-app .floating-history button:disabled{background:#ece7df;color:#9b948b;border-color:#c6beb5}
.studio-app .card .name{font-weight:400;display:flex;align-items:center;justify-content:center;min-height:27px}
.studio-app .card .spec{font-family:Arial,sans-serif;letter-spacing:.3px;line-height:1.2}
@media(max-width:700px){.studio-app .studio-headline{font-size:34px;line-height:1.15;letter-spacing:-.7px;font-weight:400}}
@media(max-width:700px){.studio-app .library:not(.expanded){padding-top:10px}}
@media(max-width:700px){.studio-app .libraryhead{padding:0 20px}}
@media(max-width:700px){.studio-app nav{margin:0 16px;padding-bottom:8px}}
@media(max-width:700px){.studio-app .library:not(.expanded) #catalog{flex:1;gap:9px;padding:10px 14px 12px;overflow-y:hidden;align-content:start}}
@media(max-width:700px){.studio-app .library:not(.expanded) .card{height:128px;min-height:128px;padding:8px 2px 7px}}
@media(max-width:700px){.studio-app .shared-sphere-preview{width:62px;height:62px;margin:0 auto 5px}}
@media(max-width:700px){.studio-app .card .spec{margin-top:3px}}
@media(max-width:700px){.studio-app footer{border-top:1px solid var(--line);min-height:70px;padding-top:10px}}
@media(max-width:350px){.studio-app .studio-headline{font-size:29px}}
@media(max-width:350px){.studio-app .library:not(.expanded) .card{padding-top:7px}}
@media(max-width:350px){.studio-app .shared-sphere-preview{width:50px;height:50px;margin-bottom:4px}}
@media(max-width:350px){.studio-app .floating-history{right:11px;top:58px}}
.studio-app .floating-history button{display:grid;place-items:center}
.studio-app .floating-history svg{display:block;pointer-events:none}
@media(max-width:350px){.studio-app .library:not(.expanded) .card{height:116px;min-height:116px}}
.studio-app .studio-headline{letter-spacing:-1px;font-weight:400}
.studio-app .libraryhead{position:relative;min-height:44px;height:44px;flex:none}
.studio-app .libraryhead:has(.has-selected)>h2{visibility:hidden}
.studio-app .libraryhead .selection{position:absolute;inset:0 14px;width:auto;max-width:none;height:44px;transform:none;border:0;border-radius:0;padding:0;background:transparent;justify-content:space-between;gap:3px}
.studio-app .libraryhead .selection.has-selected>span{font-size:11px;font-family:Georgia,'Songti SC',serif;flex:1}
.studio-app .libraryhead .selection button{min-height:44px;min-width:34px;padding:0 4px;font-size:11px;color:var(--ink)}
.studio-app .libraryhead .selection button[data-action=delete]{color:#d4ada3}
html:not([data-theme=C]) .studio-app .libraryhead .selection button[data-action=delete]{color:#8a5146}
.studio-app nav button{font-size:12px;padding:4px 10px;flex:1;border-radius:20px;text-align:center}
.studio-app .card .name{font-size:12px;font-family:Georgia,'Songti SC',serif;letter-spacing:-.15px;line-height:1.25}
.studio-app .card .spec{font-size:10px;opacity:.85}
.studio-app .recipe-status{font-size:12px;letter-spacing:0}
.studio-app .size-guide{font-size:11px;color:var(--ink);opacity:.8}
.studio-app footer .primary{font-size:14px!important;min-width:150px;border-radius:9px}
@media(max-width:700px){.studio-app .drawer-grip{height:3px;width:44px;margin-bottom:6px}}
@media(max-width:700px){.studio-app .libraryhead{margin-bottom:4px}}
@media(max-width:700px){.studio-app .libraryhead h2{font-size:22px;line-height:1.2}}
@media(max-width:700px){.studio-app .library:not(.expanded) #catalog{padding-top:10px;grid-template-rows:128px;grid-auto-rows:128px}}
@media(max-width:700px){.studio-app .material-expand{font-size:10px;letter-spacing:.1px}}
@media(max-width:350px){.studio-app .libraryhead h2{font-size:19px}}
@media(max-width:350px){.studio-app .libraryhead .selection{inset:0 11px;gap:0}}
@media(max-width:350px){.studio-app nav button{font-size:11px;padding:4px 6px}}
@media(max-width:350px){.studio-app .library:not(.expanded) #catalog{grid-template-rows:116px;grid-auto-rows:116px;padding-top:8px}}
@media(max-width:350px){.studio-app .recipe-status{font-size:10px}}
@media(max-width:350px){.studio-app .size-guide{font-size:9px}}
@media(max-width:350px){.studio-app footer .primary{min-width:125px}}
@media(max-width:700px){.studio-app .library:not(.expanded) #catalog .card:nth-child(n+5){display:none}}
.studio-app .libraryhead:has(.has-selected)>.material-expand{visibility:visible;position:absolute;right:12px;top:0;height:44px;min-width:62px;padding:0;font-size:9px}
.studio-app .libraryhead .selection{right:88px}
.studio-app .libraryhead .selection.has-selected>span{max-width:58px}
@media(max-width:350px){.studio-app .libraryhead .selection{right:78px}}
@media(max-width:350px){.studio-app .libraryhead .selection.has-selected>span{max-width:39px;font-size:9px}}
@media(max-width:350px){.studio-app .libraryhead .selection button{font-size:9px;min-width:30px;padding:0 2px}}
@media(max-width:350px){.studio-app .libraryhead:has(.has-selected)>.material-expand{right:10px;min-width:60px;font-size:8px}}
.studio-app .libraryhead .selection button{background:transparent!important;border:0;box-shadow:none}
.studio-app .libraryhead .selection button[data-action=sample]{font-size:0}
.studio-app .libraryhead .selection button[data-action=sample]:before{content:'◐';font-size:18px;font-family:Arial,sans-serif}
.studio-app .libraryhead .selection button[data-action=delete]{font-size:0}
.studio-app .libraryhead .selection button[data-action=delete]:before{font-size:22px;font-family:Arial,sans-serif;font-weight:300}
.studio-app{background-image:url('assets/studio-surfaces-v31.png')!important;background-size:300% 100%!important;background-position:0 0!important;background-attachment:fixed!important}
html[data-theme=B] .studio-app{background-position:50% 0!important}
html[data-theme=C] .studio-app{background-position:100% 0!important}
.studio-app .app{background:transparent!important}
.studio-app .library{background:#f8f3ebf2;backdrop-filter:blur(12px);border:1px solid #b4aaa244;border-bottom:0}
.studio-app footer{background:#f8f3ebf2!important;backdrop-filter:blur(12px)}
html[data-theme=B] .studio-app .library{background:#eee4d5f2!important;border-color:#86755b55}
html[data-theme=B] .studio-app footer{background:#eee4d5f2!important;border-color:#86755b55}
html[data-theme=C] .studio-app .library{background:#2c2b29ed!important;border-color:#c5b6a044}
html[data-theme=C] .studio-app footer{background:#2c2b29ed!important;border-color:#c5b6a044}
.studio-app .card{background:#ffffff12!important;border-color:#95897955}
html[data-theme=B] .studio-app .card{background:#fff9f02b!important;border-color:#98856a55}
html[data-theme=C] .studio-app .card{background:#ffffff03!important;border-color:#c6bfb357}
.studio-app .floating-history button{min-width:40px;min-height:40px;width:40px;height:40px}
.studio-app .floating-history button:disabled{opacity:.75}
.studio-app .brand{font-weight:400;letter-spacing:5px!important}
.studio-app #save{font-weight:400}
@media(max-width:700px){.studio-app .studio{justify-content:flex-end;padding:56px 0 0}}
@media(max-width:700px){.studio-app #tray{width:min(100vw,calc(100dvh - 424px));margin-bottom:-1px}}
@media(max-width:700px){.studio-app .studio-headline{top:5px;margin-top:12px}}
@media(max-width:700px){.studio-app .library{border-radius:24px 24px 0 0;box-shadow:0 -5px 20px #00000009}}
@media(max-width:700px){.studio-app .library:not(.expanded){height:260px}}
@media(max-width:700px){.studio-app .card .name{font-size:12px;min-height:25px}}
@media(max-width:700px){.studio-app .card .spec{font-size:10px;color:var(--ink)}}
@media(max-width:700px){.studio-app footer .primary{font-family:Georgia,'Songti SC',serif;font-size:14px!important}}
@media(max-width:350px){.studio-app .library:not(.expanded){height:246px}}
@media(max-width:350px){.studio-app #tray{width:min(100vw,calc(100dvh - 424px))}}
@media(max-width:350px){.studio-app .card .name{font-size:10px}}
@media(max-width:350px){.studio-app .card .spec{font-size:9px}}
@media(max-width:350px){.studio-app footer .primary{font-size:12px!important}}
html[data-theme=A] .studio-app nav button.active{background:#ded5c9;color:#272622}
html[data-theme=B] .studio-app nav button.active{background:#85856a;color:#fffaf0}
.studio-app header>.settings-launch{left:50%;right:auto;top:0;transform:translateX(-50%);width:190px;min-width:190px;height:70px;min-height:70px;font-size:0!important;letter-spacing:0;line-height:1;padding:0;color:transparent;border:0;background:transparent}
.studio-app header>.settings-launch:focus-visible{outline:1px solid var(--muted);outline-offset:-5px;border-radius:8px}
@media(max-width:350px){.studio-app header>.settings-launch{left:50%;top:0;width:170px;min-width:170px;height:62px;min-height:62px}}
html[data-theme=C] .studio-app{background-color:#8f8f8f!important;background-blend-mode:multiply}
.studio-app .library{position:relative}
.studio-app .drawer-grip{position:absolute;left:50%;top:0;transform:translateX(-50%);width:64px;height:22px;min-height:22px;padding:0;margin:0;background:none;border:0;border-radius:12px;touch-action:none;cursor:ns-resize;z-index:3}
.studio-app .drawer-grip:before{content:'';position:absolute;left:10px;right:10px;top:8px;height:3px;border-radius:3px;background:var(--muted);opacity:.5}
.studio-app .drawer-grip:focus-visible{outline:1px solid var(--muted);outline-offset:-2px}
.studio-app .library:not(.expanded){padding-top:20px}
.studio-app .library.expanded{padding-top:20px}
.studio-app .recipe-sphere{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.studio-app .bracelet-preview{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.studio-app dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 20px 70px #0003;font-size:13px;scrollbar-width:thin}
.studio-app dialog::backdrop{background:#10100fe0;backdrop-filter:blur(5px)}
.studio-app dialog .sheethead{gap:12px;align-items:center;margin-bottom:16px}
.studio-app dialog h2{font-family:Georgia,'Songti SC',serif;font-size:25px;line-height:1.2;font-weight:400}
.studio-app dialog .sheethead .quiet{min-width:44px;min-height:44px;font-size:11px;color:var(--ink);flex:none}
.studio-app dialog p{color:var(--muted)}
.studio-app dialog small{color:var(--muted)}
.studio-app .field-label{color:var(--muted)}
.studio-app dialog input{background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:9px;accent-color:var(--accent)}
.studio-app dialog select{background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:9px;accent-color:var(--accent)}
.studio-app dialog textarea{background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:9px;accent-color:var(--accent)}
.studio-app .start-tabs{background:color-mix(in srgb,var(--ink) 5%,var(--paper));color:var(--ink);border:1px solid var(--line)}
.studio-app .delivery{background:color-mix(in srgb,var(--ink) 5%,var(--paper));color:var(--ink);border:1px solid var(--line)}
.studio-app .summary-size{background:color-mix(in srgb,var(--ink) 5%,var(--paper));color:var(--ink);border:1px solid var(--line)}
.studio-app .tool-grid button{background:color-mix(in srgb,var(--ink) 5%,var(--paper));border:1px solid var(--line)}
.studio-app .template-card{background:color-mix(in srgb,var(--ink) 5%,var(--paper));color:var(--ink);border:1px solid var(--line)}
.studio-app #replaceBanner{background:color-mix(in srgb,var(--ink) 5%,var(--paper));color:var(--ink);border:1px solid var(--line)}
.studio-app .start-tabs button{color:var(--muted)}
.studio-app .start-tabs button.active{background:var(--ink);color:var(--paper);box-shadow:none}
.studio-app .template-card strong{color:var(--ink)}
.studio-app .template-card>span{color:var(--ink)}
.studio-app .tool-grid button{color:var(--ink)}
.studio-app #productionMeta strong{color:var(--ink)}
.studio-app .secondary-wide{color:var(--ink)}
.studio-app .preview-number{background:var(--paper);color:var(--ink);border:1px solid var(--line);width:16px;height:16px;line-height:14px}
.studio-app .billrow{gap:12px;align-items:center;line-height:1.5}
.studio-app .billrow small{color:var(--muted)}
.studio-app .secondary-wide{border-color:var(--line);min-height:44px;border-radius:10px}
.studio-app .export-actions button{border-color:var(--line);min-height:44px;border-radius:10px}
.studio-app #designActions #start{display:block}
.studio-app #studioSettings h3{letter-spacing:.4px;margin-top:22px}
.studio-app #summary .primary{border-radius:10px;min-height:46px}
.studio-app #toolbox .primary{border-radius:10px;min-height:46px;box-shadow:none}
.studio-app #startGuide .primary{border-radius:10px;min-height:46px;box-shadow:none}
.studio-app #summary .disclaimer{line-height:1.65;font-size:11px}
.studio-app #productionMeta p{color:var(--muted);font-size:12px}
.studio-app #focusEditor{background:var(--paper);padding:16px}
.studio-app #focusStage .studio{height:calc(100dvh - 100px);padding:55px 0 10px;justify-content:center}
.studio-app #focusStage #tray{width:min(90vw,calc(100dvh - 200px),600px);margin:0}
.studio-app #focusStage .selection{bottom:0;background:var(--paper)}
.studio-app #focusStage .floating-history{top:58px;right:4px}
.studio-app .three-d-status{position:absolute;top:58px;left:0;right:0;color:var(--muted);font-size:11px;z-index:4}
.studio-app #replaceBanner{margin:0 14px 8px;padding:7px 10px;gap:5px;font-size:11px;border-radius:8px;flex:none}
@media(min-width:701px){.studio-app .app{max-width:1500px;margin:auto}}
@media(min-width:701px){.studio-app .workspace{grid-template-columns:minmax(0,1fr) minmax(320px,34%)}}
@media(min-width:701px){.studio-app .studio{padding:66px 20px 20px;justify-content:center}}
@media(min-width:701px){.studio-app #tray{width:min(58vw,calc(100dvh - 230px),650px)}}
@media(min-width:701px){.studio-app .library{border-radius:22px 0 0 0;padding:26px 16px 16px;overflow:auto;display:flex;flex-direction:column}}
@media(min-width:701px){.studio-app .libraryhead{padding:0;flex:none;margin-bottom:15px}}
@media(min-width:701px){.studio-app .libraryhead h2{font-size:24px}}
@media(min-width:701px){.studio-app .material-expand{display:none!important}}
@media(min-width:701px){.studio-app .drawer-grip{display:none}}
@media(min-width:701px){.studio-app nav{margin:0 0 10px;padding-bottom:10px;flex:none}}
@media(min-width:701px){.studio-app #catalog{grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding:10px 0;gap:10px;flex:none}}
@media(min-width:701px){.studio-app .card{padding:12px 4px;min-height:135px}}
@media(min-width:701px){.studio-app .shared-sphere-preview{width:68px;height:68px}}
@media(min-width:701px){.studio-app .libraryhead .selection{left:0;right:0}}
@media(min-width:701px){.studio-app .libraryhead .selection.has-selected>span{max-width:85px}}
@media(min-width:701px){.studio-app footer{padding-left:30px;padding-right:30px;gap:20px}}
@media(min-width:701px){.studio-app footer .primary{min-width:200px}}
@media(min-width:701px){.studio-app .recipe-status{font-size:15px}}
@media(min-width:701px){.studio-app .size-guide{font-size:13px}}
@media(max-width:700px){.studio-app dialog:not(#focusEditor){max-width:100%;width:100%;margin:auto 0 0;border-radius:24px 24px 0 0;max-height:92dvh;padding:22px 20px calc(20px + env(safe-area-inset-bottom));border-bottom:0}}
@media(max-width:700px){.studio-app #summary .field-label input{font-size:16px;line-height:1.4}}
@media(max-width:700px){.studio-app #summary .field-label textarea{font-size:16px;line-height:1.4}}
@media(max-width:700px){.studio-app #summary .primary{position:sticky;bottom:0;margin-top:12px;z-index:2;box-shadow:0 -8px 20px var(--paper)}}
@media(max-width:700px){.studio-app .summary-size{font-size:12px;line-height:1.65}}
@media(max-width:700px){.studio-app #summary #bill{max-height:24dvh}}
@media(max-width:700px){.studio-app .start-tabs button{font-size:11px}}
@media(max-width:700px){.studio-app .template-card small{line-height:1.5}}
@media(max-width:700px){.studio-app .library.expanded{overscroll-behavior:contain}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app header{height:56px;min-height:56px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app header>.settings-launch{height:56px;min-height:56px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .studio-headline{font-size:27px;top:0;margin:8px 0}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .studio{padding-top:42px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app #tray{width:min(100vw,calc(100dvh - 380px))}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .library:not(.expanded){height:210px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .libraryhead{height:34px;min-height:34px;margin-bottom:0}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .libraryhead h2{font-size:18px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .libraryhead .selection{height:34px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .libraryhead:has(.has-selected)>.material-expand{height:34px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app nav button{min-height:28px;height:28px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .shared-sphere-preview{width:42px;height:42px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .library:not(.expanded) #catalog{grid-template-rows:96px;grid-auto-rows:96px;padding-top:7px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .library:not(.expanded) .card{min-height:96px;height:96px;padding-top:5px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .card .name{font-size:10px;min-height:22px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .card .spec{font-size:9px;margin:0}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .floating-history{top:44px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app .floating-history button{width:34px;min-width:34px;height:34px;min-height:34px}}
@media(max-width:700px) and (max-height:620px) and (orientation:portrait){.studio-app footer{min-height:62px;padding-top:8px;padding-bottom:8px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,42%)}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app header{height:48px;min-height:48px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app header>.settings-launch{height:48px;min-height:48px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .brand{font-size:21px!important}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .brand small{font-size:6px!important}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .studio{padding:40px 8px 4px;justify-content:center}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .studio-headline{font-size:26px;margin:7px 0;top:0}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app #tray{width:min(95%,calc(100dvh - 160px))}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .library{position:relative;inset:auto;height:auto;max-height:100%;border-radius:18px 0 0 0;padding-top:10px;overflow:auto}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .library:not(.expanded){position:relative;inset:auto;height:auto;max-height:100%;border-radius:18px 0 0 0;padding-top:10px;overflow:auto}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .library.expanded{position:relative;inset:auto;height:auto;max-height:100%;border-radius:18px 0 0 0;padding-top:10px;overflow:auto}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .drawer-grip{display:none}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .libraryhead{height:36px;min-height:36px;padding:0 12px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .libraryhead h2{font-size:18px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app #catalog{overflow:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:112px;grid-template-rows:112px;padding:8px;gap:5px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .library:not(.expanded) #catalog{overflow:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:112px;grid-template-rows:112px;padding:8px;gap:5px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .library:not(.expanded) #catalog .card:nth-child(n+5){display:block}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .library:not(.expanded) .card{height:112px;min-height:112px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .shared-sphere-preview{width:44px;height:44px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .material-expand{display:none!important}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .libraryhead .selection{inset:0 10px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .libraryhead .selection.has-selected>span{max-width:60px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .floating-history{top:44px;right:10px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app .floating-history button{width:34px;min-width:34px;height:34px;min-height:34px}}
@media(max-width:900px) and (max-height:620px) and (orientation:landscape){.studio-app footer{min-height:60px;padding-top:8px;padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){.studio-app *{animation:none!important;transition:none!important}}
@media(prefers-reduced-motion:reduce){.studio-app *:before{animation:none!important;transition:none!important}}
@media(prefers-reduced-motion:reduce){.studio-app *:after{animation:none!important;transition:none!important}}
html[data-theme=C] .studio-app dialog{background:#292929;color:#f3eee7}
html[data-theme=C] .studio-app .summary-size{background:#333230;color:#f0eae1;border-color:#ffffff26}
html[data-theme=C] .studio-app .delivery{background:#333230;color:#f0eae1;border-color:#ffffff26}
html[data-theme=C] .studio-app .fulfillment-note{background:#333230;color:#f0eae1;border-color:#ffffff26}
html[data-theme=C] .studio-app .template-card{background:#333230;color:#f0eae1;border-color:#ffffff26}
html[data-theme=C] .studio-app .tool-grid button{background:#333230;color:#f0eae1;border-color:#ffffff26}
html[data-theme=C] .studio-app .start-tabs{background:#333230;color:#f0eae1;border-color:#ffffff26}
html[data-theme=C] .studio-app #replaceBanner{background:#333230;color:#f0eae1;border-color:#ffffff26}
html[data-theme=C] .studio-app .bracelet-preview{background:#292929}
html[data-theme=C] .studio-app dialog input{background:#292929;color:#f3eee7;border-color:#ffffff30}
html[data-theme=C] .studio-app dialog select{background:#292929;color:#f3eee7;border-color:#ffffff30}
html[data-theme=C] .studio-app dialog textarea{background:#292929;color:#f3eee7;border-color:#ffffff30}
html[data-theme=C] .studio-app .start-tabs button.active{background:#eee7dc;color:#242424}
html[data-theme=C] .studio-app dialog .billrow{border-color:#ffffff26}
html[data-theme=C] .studio-app dialog .repeat-section{border-color:#ffffff26}
@media(min-width:701px) and (min-height:621px){.studio-app .library:not(.expanded){height:100%;max-height:100%;min-height:0;align-self:stretch;overflow-y:auto}}
@media(min-width:701px) and (min-height:621px){.studio-app .library.expanded{height:100%;max-height:100%;min-height:0;align-self:stretch;overflow-y:auto}}
@media(min-width:701px) and (min-height:621px){.studio-app .libraryhead .selection{right:0}}
.studio-app .library nav{display:flex}
.studio-app .libraryhead #replaceBanner{position:absolute;inset:0 88px 0 14px;display:flex;align-items:center;padding:0;margin:0;border:0;background:transparent!important;z-index:2;gap:6px;min-height:44px}
.studio-app .libraryhead #replaceBanner[hidden]{display:none}
.studio-app .libraryhead #replaceBanner>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ink)}
.studio-app .libraryhead #replaceBanner button{min-height:44px;min-width:44px;padding:0;color:var(--ink);font-size:11px}
.studio-app .libraryhead:has(#replaceBanner:not([hidden])) .selection{visibility:hidden}
.studio-app .libraryhead:has(#replaceBanner:not([hidden])) h2{visibility:hidden}
@media(min-width:701px){.studio-app .libraryhead #replaceBanner{left:0;right:0}}
@media(max-width:350px){.studio-app .libraryhead #replaceBanner{left:11px;right:78px}}
@media(max-width:350px){.studio-app .libraryhead #replaceBanner>span{font-size:10px}}
.studio-app #summary .primary{position:static;box-shadow:none}
.studio-app .libraryhead .selection button[data-action=delete]:before{content:none}
.studio-app .selection button[data-action=delete] svg{display:block;margin:auto;pointer-events:none}
.studio-app #focusStage .selection button{background:transparent!important;color:var(--ink);border:0}

#tray{background:none;box-shadow:none;isolation:isolate;overflow:visible;border-radius:0}
.rolling-spheres{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;border-radius:0}
.placed{border:0;background:none;box-shadow:none;border-radius:50%;position:absolute;transform:translate(-50%,-50%);width:max(44px,var(--s));height:max(44px,var(--s));padding:0;touch-action:none;z-index:2;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:left .48s cubic-bezier(.2,.8,.2,1),top .48s cubic-bezier(.2,.8,.2,1)}
.placed.selected:before{content:'';position:absolute;left:50%;top:50%;width:calc(var(--s) + 7px);height:calc(var(--s) + 7px);transform:translate(-50%,-50%);border:1.3px solid var(--ink);outline:1.3px solid var(--paper);outline-offset:2px;border-radius:50%;pointer-events:none}
.placed.drop-target:before{content:'';position:absolute;inset:2px;border:2px dashed var(--ink);border-radius:50%;pointer-events:none}
.physics-active .placed,.placed.dragging{transition:none}
.placed.dragging:before{display:none}
.studio-app .shared-sphere-preview{display:block;position:relative}
.studio-app .shared-sphere-preview:empty{border-radius:50%;background:color-mix(in srgb,var(--muted) 12%,transparent)}