@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');
:root{--ink:#29231e;--muted:#756b61;--paper:#fffdfa;--sand:#f5f0e9;--gold:#a87843;--line:#e8ded3;--deep:#1e1a17}*{box-sizing:border-box}body{margin:0;background:var(--sand);color:var(--ink);font:15px/1.5 'DM Sans',Arial,sans-serif}.utility{padding:11px;background:var(--deep);color:#fff;text-align:center;font-size:10px;font-weight:700;letter-spacing:.16em}.header{height:92px;width:min(1400px,calc(100% - 48px));margin:auto;display:flex;align-items:center;justify-content:space-between}.wordmark{font:400 35px/1 'Playfair Display',serif;letter-spacing:.18em;color:inherit;text-decoration:none}.wordmark span{display:block;margin-top:8px;font:700 8px 'DM Sans',sans-serif;letter-spacing:.25em;color:var(--gold)}nav{display:flex;gap:25px}nav a,footer a{font-size:11px;font-weight:700;letter-spacing:.1em;text-decoration:none;color:inherit}.shell{width:min(1400px,calc(100% - 48px));margin:auto}.intro{padding:52px 0 42px;max-width:640px}.eyebrow{margin:0 0 8px;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:.16em}.intro h1,.panel h2,.production-note h2{font:400 clamp(34px,4vw,58px)/1.02 'Playfair Display',serif;letter-spacing:-.04em;margin:0}.intro p:not(.eyebrow){font-size:16px;color:var(--muted);max-width:560px}.studio{display:grid;grid-template-columns:270px minmax(430px,1fr) 330px;gap:16px;align-items:start}.panel{border:1px solid var(--line);background:var(--paper);box-shadow:0 12px 30px #4d382113}.panel-head{padding:24px 22px 18px;border-bottom:1px solid var(--line)}.panel h2{font-size:28px}.library{position:sticky;top:15px}.search{display:block;padding:17px 18px 4px}.search span,.field>label{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.11em}.search input{width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);outline:0;background:transparent;font:14px 'DM Sans'}.filter-row{padding:9px 18px 13px;display:flex;gap:6px;overflow:auto}.filter-row button,.view-tabs button,.toggle button,.pattern-grid button,.metal-grid button,.segmented button,.style-grid button,.quiet{border:1px solid var(--line);background:#fff;color:var(--ink);font:700 9px 'DM Sans';letter-spacing:.08em;padding:8px;cursor:pointer}.filter-row button.active,.view-tabs button.active,.toggle button.active,.pattern-grid button.active,.metal-grid button.active,.segmented button.active,.style-grid button.active{background:var(--ink);color:#fff;border-color:var(--ink)}.component-grid{padding:0 14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:640px;overflow:auto}.component{border:1px solid var(--line);background:#fff;padding:10px;text-align:left;cursor:pointer;min-height:105px}.component:hover,.component.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}.bead-dot{display:inline-block;width:25px;height:25px;border-radius:50%;vertical-align:middle;margin-right:6px;border:1px solid #00000018;box-shadow:inset -5px -5px 8px #0002,inset 4px 4px 6px #fff8}.component strong{display:block;font:500 13px/1.18 'Playfair Display',serif;margin-top:7px}.component small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.preview{min-width:0;overflow:hidden}.preview-top{padding:24px 25px 0;display:flex;align-items:start;justify-content:space-between;gap:12px}.preview-top h2{font-size:31px}.view-tabs{display:flex;gap:4px}.canvas-wrap{position:relative;min-height:440px;margin:18px;background:radial-gradient(circle at 50% 10%,#fff 0,#f5f0e9 60%,#e7dbcc 100%);overflow:hidden}.canvas-wrap canvas{display:block;width:100%;height:440px}.wear-guide{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}.wear-guide .neck{position:absolute;width:145px;height:235px;top:75px;border:1px solid #c6ae98;border-radius:45% 45% 38% 38%;background:linear-gradient(90deg,#cba986,#f2d8bf 50%,#be9773)}.wear-guide .shoulders{position:absolute;bottom:-80px;width:470px;height:260px;border-radius:50% 50% 0 0;background:linear-gradient(90deg,#ad8567,#efcfb4 50%,#a87b5c)}.wear-guide p{position:absolute;bottom:8px;margin:0;padding:0 14px;text-align:center;color:#5e5247;font-size:10px;z-index:2}.preview-details{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 20px;font-size:11px;color:var(--muted)}.status{font-weight:700;color:#5f7a5e}.status.error{color:#aa503e}.sequence-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 10px}.sequence-head h3{font:500 20px 'Playfair Display',serif;margin:0}.quiet{padding:7px;margin-left:4px}.quiet:disabled{opacity:.45;cursor:not-allowed}.sequence{padding:0 20px 22px;display:flex;gap:6px;overflow:auto;min-height:70px}.sequence button{position:relative;flex:0 0 auto;border:1px solid var(--line);background:#fff;width:42px;height:50px;cursor:pointer}.sequence button.active{border:2px solid var(--gold)}.sequence .n{position:absolute;left:3px;top:2px;font-size:8px;color:var(--muted)}.sequence .mini{display:block;width:20px;height:20px;border-radius:50%;margin:13px auto 0;box-shadow:inset -3px -3px 4px #0002,inset 2px 2px 4px #fff8}.controls{position:sticky;top:15px}.field{padding:16px 22px;border-bottom:1px solid var(--line)}.toggle{display:grid;grid-template-columns:1fr 1fr;margin-top:8px}.toggle button{padding:12px}.field input[type=range]{width:100%;accent-color:var(--gold);margin-top:12px}.range-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.pattern-grid,.metal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}.pattern-grid button,.metal-grid button{min-height:36px;padding:5px;font-size:8px}.choice-list{display:grid;gap:6px;margin-top:9px}.choice{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:8px;border:1px solid var(--line);padding:8px;background:#fff;cursor:pointer;text-align:left}.choice.active{border-color:var(--gold);box-shadow:inset 3px 0 var(--gold)}.choice .bead-dot{width:18px;height:18px;margin:0}.choice strong{font-size:11px}.choice span:last-child{font-size:10px;color:var(--muted)}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:7px}.assistant{padding:18px 22px;background:#f8f3eb;border-bottom:1px solid var(--line)}.assistant h3{font:500 20px 'Playfair Display',serif;margin:0 0 9px}.style-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.price-card{padding:21px 22px}.price-card strong{display:block;font:500 40px 'Playfair Display',serif;letter-spacing:-.04em}.price-line{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding:4px 0}.primary,.secondary{width:100%;border:0;padding:14px;margin-top:13px;cursor:pointer;font:700 10px 'DM Sans';letter-spacing:.1em}.primary{background:var(--ink);color:#fff}.primary:hover{background:var(--gold)}.secondary{border:1px solid var(--ink);background:transparent;color:var(--ink)}.secondary:disabled{opacity:.4;cursor:not-allowed}.save-status{min-height:18px;margin:10px 0 0;font-size:11px;color:var(--muted)}.production-note{padding:75px 0 90px;max-width:670px}.production-note h2{font-size:42px}.production-note p:not(.eyebrow){color:var(--muted);font-size:16px}footer{display:flex;gap:25px;align-items:center;justify-content:center;background:var(--deep);color:#eee3d6;padding:22px;font-size:10px}@media(max-width:1120px){.studio{grid-template-columns:245px 1fr}.controls{position:static;grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);align-items:start}.controls .panel-head{grid-column:1/-1}.price-card{grid-column:1/-1}.field,.assistant{height:100%}}@media(max-width:760px){.header,.shell{width:min(100% - 28px,1400px)}.header{height:78px}.wordmark{font-size:27px}nav{gap:12px}nav a{font-size:9px}.intro{padding:34px 0 28px}.studio{display:flex;flex-direction:column;gap:12px}.preview{order:1;width:100%}.controls{order:2;width:100%;display:block}.library{order:3;width:100%;position:static}.canvas-wrap,.canvas-wrap canvas{height:340px;min-height:340px}.preview-top{padding:18px 16px 0}.preview-top h2{font-size:25px}.component-grid{max-height:360px;grid-template-columns:repeat(3,1fr)}.controls .panel-head,.field,.assistant,.price-card{padding-left:17px;padding-right:17px}.pattern-grid{grid-template-columns:repeat(3,1fr)}.sequence{padding-left:15px;padding-right:15px}.preview-details{padding-left:15px;padding-right:15px;font-size:10px}.production-note{padding:55px 0}.production-note h2{font-size:35px}footer{flex-wrap:wrap;gap:15px}}
