/* LYRA composition studio: scoped extension of the existing brand system. */
:root{--diy-ivory:#fefbf6;--diy-paper:#f1eee7;--diy-navy:#1f354f;--diy-muted:#6c6b63;--diy-line:#dcd8cd;--diy-gold:#ad9979;--diy-white:#fffefa;--diy-shadow:#49413526}
#design{scroll-margin-top:40px}
.diy-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:36px}
.diy-heading h2{font-size:clamp(34px,3.4vw,54px);font-weight:400;line-height:1.2;min-width:0}
.diy-heading p{max-width:330px;color:var(--diy-muted);font-size:13px;line-height:1.9}
.lyra-diy{color:var(--diy-navy);font-size:13px;line-height:1.6}
.lyra-diy *{box-sizing:border-box;min-width:0}
.lyra-diy button,.lyra-diy select,.lyra-diy input{font:inherit;color:inherit;letter-spacing:normal;border-radius:0}
.lyra-diy button{background:transparent;border:0;cursor:pointer;min-height:40px;transition:color .15s,background-color .15s,transform .15s}
.lyra-diy button:disabled{opacity:.36;cursor:default}
.lyra-diy button:focus-visible,.lyra-diy input:focus-visible,.lyra-diy select:focus-visible,.lyra-diy canvas:focus-visible,.lyra-diy summary:focus-visible,.lyra-diy a:focus-visible{outline:2px solid var(--diy-gold);outline-offset:3px}
.diy-workbench{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);border-top:1px solid var(--diy-line);border-bottom:1px solid var(--diy-line)}
.diy-preview{border-right:1px solid var(--diy-line);padding:26px 32px 20px 0}
.diy-stage{position:relative;background:radial-gradient(ellipse at 47% 37%,var(--diy-white),var(--diy-paper));height:500px;isolation:isolate}
#diy-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-4px}
#diy-canvas:active{cursor:grabbing}
.diy-stage-top,.diy-stage-bottom{position:absolute;left:24px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;z-index:2}
.diy-stage-top{top:14px}.diy-stage-bottom{bottom:12px;color:var(--diy-muted);font-size:11px}
.diy-mode{color:var(--diy-muted);font-size:11px}
.diy-view-tools,.diy-stage-bottom>div{display:flex;gap:8px;pointer-events:auto}
.diy-view-tools button{font-size:11px;padding:0 10px}.diy-stage-bottom button{width:36px;font-size:19px}
.diy-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:var(--diy-gold)}
.diy-empty[hidden]{display:none}.diy-empty span{font-family:var(--serif,serif);font-size:38px;letter-spacing:.15em}.diy-empty p{font-size:12px;margin:10px 0}
.diy-measure{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 0;border-bottom:1px solid var(--diy-line)}
.diy-measure p{display:flex;flex-direction:column;gap:3px;margin:0}.diy-measure strong{font-weight:500;font-size:14px}.diy-measure span{color:var(--diy-muted);font-size:11px}
.diy-measure label{white-space:nowrap;font-size:12px}.diy-measure input{width:62px;padding:8px 2px;background:none;border:0;border-bottom:1px solid var(--diy-gold);text-align:center}
.diy-edit{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0 4px;font-size:11px}.diy-edit-buttons{display:flex;align-items:center;gap:2px;flex-shrink:0}.diy-edit-buttons button{padding:0 7px}.diy-edit select{border:0;background:transparent;max-width:72px;min-height:40px;font-size:11px}
.diy-sequence summary{color:var(--diy-muted);cursor:pointer;padding:8px 0;font-size:11px}.diy-sequence ol{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0;margin:0;list-style:none}.diy-sequence button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;min-width:30px;font-size:9px;border-bottom:1px solid transparent}.diy-sequence button[aria-pressed=true]{border-color:var(--diy-gold);color:var(--diy-navy)}.diy-sequence button span{width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 30% 25%,var(--diy-white),var(--stone) 55%,var(--diy-muted));box-shadow:0 2px 3px var(--diy-shadow)}
.diy-library{padding:30px 0 22px 34px;display:flex;flex-direction:column}
.diy-library-head h3{font-size:26px;font-weight:400;line-height:1.25;margin:0 0 10px}.diy-library-head p{font-size:12px;color:var(--diy-muted);margin:0}
.diy-filters{display:flex;gap:22px;border-bottom:1px solid var(--diy-line);margin-top:24px}.diy-filters button{padding:8px 0;border-bottom:1px solid transparent;color:var(--diy-muted);font-size:12px}.diy-filters button[aria-pressed=true]{color:var(--diy-navy);border-color:var(--diy-gold)}
.diy-size{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 0;font-size:11px;color:var(--diy-muted)}.diy-size>div{display:flex;gap:4px}.diy-size button{padding:4px 7px;min-height:32px;color:var(--diy-muted)}.diy-size button[aria-pressed=true]{background:var(--diy-paper);color:var(--diy-navy)}.diy-size small{font-size:8px;margin-left:2px}
.diy-materials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;max-height:375px;min-height:240px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;align-content:start;padding:4px 6px 10px 2px}
.diy-material{display:flex;flex-direction:column;align-items:center;padding:12px 6px 8px;min-height:128px!important;text-align:center;border:1px solid transparent!important;background:var(--diy-white)!important}
.diy-material>span:not(.diy-stone-image){font-size:11px;line-height:1.5;margin-top:12px}.diy-material small{font-size:9px;color:var(--diy-muted);display:flex;justify-content:space-between;width:75%;margin-top:4px}.diy-material b{font-size:14px;font-weight:400;line-height:1}


.diy-inspiration{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:auto;padding-top:24px;font-size:11px}.diy-inspiration label{color:var(--diy-muted)}.diy-inspiration select{max-width:200px;border:0;border-bottom:1px solid var(--diy-line);background:none;padding:8px 20px 8px 0}
.diy-bottom{display:flex;justify-content:space-between;gap:22px;align-items:center;padding:22px 0 10px}.diy-history,.diy-save{display:flex;gap:18px;align-items:center}.diy-history button{font-size:11px;padding:6px 0}.diy-save button{padding:13px 23px;font-size:12px;border:1px solid var(--diy-line)}.diy-save .diy-primary{background:var(--diy-navy);border-color:var(--diy-navy);color:var(--diy-ivory)}
.diy-footnote{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:12px;font-size:10px;color:var(--diy-muted)}.diy-footnote p{margin:0;max-width:560px;line-height:1.8}.diy-footnote a{white-space:nowrap;border-bottom:1px solid var(--diy-gold);padding:6px 0;color:var(--diy-navy)}.diy-status{min-height:22px;font-size:11px;color:var(--diy-muted);margin:10px 0 0}
.diy-fallback{padding:38px;background:var(--diy-paper)}
@media(hover:hover){.diy-material:hover{border-color:var(--diy-line)!important;transform:translateY(-2px)}.lyra-diy button:not(:disabled):hover{color:var(--diy-gold)}.diy-save .diy-primary:hover{color:var(--diy-ivory);background:var(--diy-muted)}}
@media(min-width:1600px){.diy-stage{height:580px}.diy-materials{max-height:440px}.diy-material{min-height:146px!important}}
@media(max-width:1000px){.diy-workbench{grid-template-columns:minmax(0,1fr)}.diy-preview{border-right:0;border-bottom:1px solid var(--diy-line);padding:24px 0 18px}.diy-stage{height:480px}.diy-library{padding:28px 0 22px}.diy-materials{grid-template-columns:repeat(4,minmax(0,1fr));min-height:0;max-height:310px}.diy-inspiration{margin-top:10px}.diy-heading{align-items:start}.diy-heading p{max-width:260px}.diy-edit{font-size:12px}}
@media(max-width:600px){.diy-heading{display:block;margin-bottom:24px}.diy-heading p{margin-top:18px;max-width:300px;font-size:12px}.diy-stage{height:350px}.diy-preview{padding-top:18px}.diy-stage-top,.diy-stage-bottom{left:14px;right:10px}.diy-mode{font-size:10px}.diy-measure{gap:10px}.diy-measure span{font-size:10px;max-width:190px}.diy-measure label{font-size:11px}.diy-measure input{width:49px}.diy-edit{display:block}.diy-edit-buttons{justify-content:flex-end;margin-top:5px}.diy-edit-buttons button{padding:0 13px}.diy-materials{grid-template-columns:repeat(3,minmax(0,1fr));max-height:300px;gap:8px}.diy-material{min-height:130px!important;padding:12px 4px 8px}.diy-material>span:not(.diy-stone-image){font-size:10px}.diy-library-head h3{font-size:24px}.diy-filters{gap:24px;margin-top:18px}.diy-size>div{gap:0}.diy-size button{padding:4px 8px}.diy-bottom{flex-wrap:wrap;padding-top:15px;gap:14px}.diy-history{width:100%;gap:24px}.diy-save{width:100%;gap:12px}.diy-save button{flex:1;padding:13px 10px}.diy-footnote{align-items:start;gap:18px}.diy-footnote p{max-width:230px}.diy-footnote a{font-size:10px}.diy-status{font-size:10px}.diy-inspiration select{max-width:190px}}
@media(prefers-reduced-motion:reduce){.lyra-diy button{transition:none}}

/* Image-based material library, shared with the bracelet renderer. */
.diy-stone-image{display:block;flex-shrink:0;width:84px;height:84px;background-image:url('../diy/v2/crystal-atlas.webp');background-size:600% 600%;background-position:var(--tile-x) var(--tile-y);clip-path:circle(44%);}
.diy-material{padding:8px 5px 10px;min-height:146px!important;background:#f8f6f1!important}
.diy-material>span:not(.diy-stone-image){margin-top:3px;font-size:11px}
.diy-materials{max-height:470px;min-height:320px}
.diy-sequence button .diy-stone-image{width:24px;height:24px;border-radius:0;box-shadow:none;background-image:url('../diy/v2/crystal-atlas.webp');background-size:600% 600%;background-position:var(--tile-x) var(--tile-y)}
.diy-search{display:flex;gap:12px;margin-top:18px}
.diy-search input,.diy-search select,.diy-fit-settings select{border:0;border-bottom:1px solid var(--diy-line);background:transparent;padding:8px 2px;min-height:40px;font-size:11px}
.diy-search input{flex:1;width:50%}.diy-search select{width:42%;max-width:165px}
.diy-material-count{color:var(--diy-muted);font-size:10px;margin:0 0 8px}
.diy-no-results{grid-column:1/-1;color:var(--diy-muted);padding:18px;font-size:12px}
.diy-calculator{border-bottom:1px solid var(--diy-line);padding:10px 0 14px}
.diy-fit-settings{display:flex;align-items:center;gap:12px;font-size:11px;flex-wrap:wrap}
.diy-fit-settings>span{margin-left:auto;color:var(--diy-muted)}
.diy-recommendation{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:15px 0 6px}
.diy-recommendation strong{font-weight:500;font-size:15px;display:block;line-height:1.7}
.diy-recommendation span{display:block;font-size:11px;color:var(--diy-muted);line-height:1.8}
.diy-recommendation button{flex-shrink:0;border:1px solid var(--diy-gold);padding:8px 15px;font-size:11px;min-height:44px}
.diy-size-guide{color:var(--diy-muted);font-size:11px}.diy-size-guide summary{cursor:pointer;padding:8px 0}
.diy-size-guide table{width:100%;border-collapse:collapse;margin:6px 0}.diy-size-guide th,.diy-size-guide td{padding:7px 3px;text-align:left;border-bottom:1px solid var(--diy-line);font-weight:400}.diy-size-guide p{font-size:10px;line-height:1.8;max-width:500px}
.diy-size{flex-wrap:wrap}.diy-size button{padding:4px 6px}.diy-filters{gap:20px}
@media(min-width:1600px){.diy-stone-image{width:98px;height:98px}.diy-materials{max-height:530px}}
@media(max-width:1000px){.diy-materials{max-height:380px;min-height:0}.diy-search{margin-top:14px}.diy-inspiration{margin-top:8px}}
@media(max-width:600px){.diy-stone-image{width:75px;height:75px}.diy-materials{max-height:350px}.diy-material{min-height:133px!important}.diy-material>span:not(.diy-stone-image){font-size:10px}.diy-size{gap:6px;padding:12px 0}.diy-size>span{width:100%}.diy-size>div{width:100%;justify-content:space-between}.diy-size button{min-width:36px;min-height:40px}.diy-recommendation{align-items:start;gap:8px}.diy-recommendation strong{font-size:14px}.diy-recommendation button{padding:8px 10px}.diy-fit-settings{gap:8px}.diy-fit-settings>span{font-size:10px}}