:root{font-family:'DM Sans',sans-serif;color:#292b29;background:#fcfbf8;font-synthesis:none;--green:#354c42;--muted:#7b7d74;--line:#e4e3db;--accent:#b0905b}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button,a,input,label{ -webkit-tap-highlight-color:transparent}button{color:inherit}button:focus-visible,a:focus-visible,label:focus-within{outline:2px solid #507b66;outline-offset:4px}button:disabled{opacity:.4;cursor:default}.topbar{height:84px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px}.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;letter-spacing:2px;font-size:12px;font-weight:700}.brand-icon{font-family:Manrope,sans-serif;position:relative;font-size:44px;letter-spacing:-8px;line-height:1;margin-right:8px}.brand-icon span{font-size:10px;position:absolute;right:-9px;bottom:5px;color:var(--accent)}.edition{font-size:9px;font-weight:500;letter-spacing:1.5px;color:var(--muted);border-left:1px solid var(--line);margin-left:10px;padding-left:24px}.text-button{background:none;border:0;font-size:12px;padding:8px 0;display:flex;gap:20px;align-items:center}.text-button span{font-size:18px}main{display:grid;grid-template-columns:minmax(0,1fr) 370px;min-height:calc(100vh - 84px)}.workspace{background:#f3f2ed;display:flex;flex-direction:column;position:relative;min-width:0}.stage-top{padding:34px 40px 0;display:flex;align-items:flex-start;justify-content:space-between;z-index:1}.eyebrow{font-size:9px;font-weight:650;letter-spacing:1.7px;color:var(--muted)}h1{font-family:Manrope,sans-serif;font-size:38px;letter-spacing:-2px;font-weight:500;margin:8px 0 0}.live{font-size:10px;display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #dedfd7;border-radius:30px;color:#5c665c;margin-top:7px}.live i{height:5px;width:5px;background:#748b69;border-radius:100%}#stage{height:clamp(380px,53vh,630px);min-height:360px;position:relative;isolation:isolate;flex:1}.stage-ring{position:absolute;width:380px;height:380px;border:1px solid #e5e3d9;border-radius:50%;top:48%;left:50%;transform:translate(-50%,-50%);z-index:-1}.stage-ring:after{content:'';position:absolute;inset:45px;border:1px solid #e8e6de;border-radius:50%}#webgl{width:100%;height:100%;cursor:grab;touch-action:pan-y}#webgl.dragging{cursor:grabbing}canvas{display:block}.side-label{position:absolute;bottom:18px;left:40px;display:flex;flex-direction:column;gap:8px;pointer-events:none}.side-label>span:first-child{font-size:9px;letter-spacing:2px;font-weight:600;color:#74786d}.side-label>span:nth-child(2){font-size:28px;line-height:1;color:#878d80}.side-label small{font-size:10px;color:#85877e}.export{position:absolute;bottom:20px;right:38px;background:#ffffff8a;border:1px solid var(--line);width:35px;height:35px;border-radius:50%;font-size:20px}.rotation{display:flex;justify-content:center;align-items:center;gap:12px;margin:12px 0 14px}.pill{font-size:10px;padding:8px 17px;border:1px solid #d8dad1;border-radius:20px;background:transparent}.pill:hover{background:#e7e9df}.rotate-button{font-size:11px;border:0;background:var(--green);color:#fff;border-radius:30px;padding:10px 20px;display:flex;align-items:center;gap:10px}.rotate-button span{font-size:17px}.rotate-button[aria-pressed=true]{background:#aa8148}.angle-control{display:flex;align-items:center;gap:12px;max-width:300px;width:75%;margin:0 auto 29px;font-size:9px;color:var(--muted)}input[type=range]{accent-color:var(--green);width:100%;height:3px;cursor:pointer;margin:10px 0}input[type=range]:focus-visible{outline:2px solid #6d9078;outline-offset:5px}.stage-footer{border-top:1px solid var(--line);margin:0 40px;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:9px;color:#8a8c82}.stage-footer>span:first-child{font-size:8px;letter-spacing:1.3px;font-weight:600;display:flex;align-items:center;gap:8px}.axis-icon{font-size:18px;font-style:normal;color:#7e8976}aside{padding:36px 30px 18px;background:#fcfbf8;border-left:1px solid var(--line)}h2{font-family:Manrope,sans-serif;font-weight:500;font-size:27px;line-height:1.26;letter-spacing:-1px;margin:12px 0}.panel-heading p{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 27px;max-width:280px}.section-title{display:flex;align-items:center;gap:11px;margin:24px 0 13px}.section-title>span{font-size:9px;color:#9a9d91}h3{font-size:12px;font-weight:600;margin:0}.tabs{display:flex;background:#eeeee7;border-radius:5px;padding:4px;gap:4px}.tabs button{width:50%;border:0;border-radius:3px;background:none;font-size:11px;padding:9px}.tabs .selected{background:white;box-shadow:0 1px 4px #0000000a}.check{display:flex;gap:7px;align-items:center;font-size:10px;color:#797d72;margin:12px 0 0}.check input{accent-color:var(--green);margin:0;width:13px;height:13px}.upload{border:1px dashed #c6cabc;border-radius:5px;display:flex;flex-direction:column;align-items:center;padding:17px 8px 16px;cursor:pointer;background:#f6f6f0;transition:.2s}.upload:hover,.upload.drag-over{background:#e9eee4;border-color:#507b66}.upload input{position:absolute;width:1px;height:1px;opacity:0}.upload-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:#e5e9df;color:var(--green);border-radius:50%;font-size:19px;margin-bottom:9px}.upload strong{font-size:11px;font-weight:550}.upload small{font-size:9px;color:#8b8e83;margin-top:6px}.file-status{font-size:9px;color:var(--muted);min-height:13px;margin:14px 0 11px}.samples{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.sample{padding:0;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:7px}.swatch{width:100%;height:48px;border:3px solid #fcfbf8;border-radius:6px;outline:1px solid transparent}.sample.selected .swatch{outline-color:#56644d}.sample small{font-size:9px;color:#808476}.wave{background:radial-gradient(ellipse at 90% 120%,#e67c50 0 43%,transparent 44%),linear-gradient(125deg,#e4e7ca 40%,#285f70 41% 65%,#a0b7ae 66%)}.type{background:#d5f156;color:#263b35;font-family:Manrope,sans-serif;font-weight:800;font-size:26px;display:flex;align-items:center;justify-content:center}.dots{background-color:#e4c8ae;background-image:radial-gradient(#5e5644 17%,transparent 19%),radial-gradient(#b77d62 22%,transparent 23%);background-position:0 0,13px 13px;background-size:26px 26px}.metal{background:linear-gradient(90deg,#ad8d58,#f3e1b4 40%,#c7a96e)}.adjust-heading{margin-top:26px}.small{font-size:9px;margin-left:auto;color:#7e8377;padding:0}.adjust{display:grid;gap:0}.adjust label{font-size:10px;display:flex;justify-content:space-between;color:#73796e;margin:8px 0 3px}.adjust output{font-size:9px}.adjust input{margin:7px 0 9px}.privacy{border-top:1px solid var(--line);padding-top:16px;margin-top:24px;font-size:9px;color:#8d9085;display:flex;gap:6px;align-items:center}.privacy span{font-size:17px}#error{position:absolute;inset:15%;padding:30px;background:#fff;line-height:1.6;font-size:14px}dialog{border:1px solid var(--line);border-radius:10px;max-width:650px;width:90%;padding:24px;box-shadow:0 20px 80px #0003}dialog::backdrop{background:#232b2788;backdrop-filter:blur(5px)}dialog img{display:block;max-height:75vh;max-width:100%;margin:auto}dialog p{font-size:11px;color:var(--muted);text-align:center}#close-reference{position:absolute;right:10px;top:8px;border:0;background:#f4f4ee;border-radius:50%;width:30px;height:30px;font-size:24px}@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) 410px}aside{padding:40px}.workspace #stage{min-height:530px}}@media(max-width:900px){.topbar{padding:0 24px}.edition{display:none}main{grid-template-columns:minmax(0,1fr) 320px}aside{padding:28px 22px}.stage-top{padding:28px 24px 0}.live{display:none}.stage-footer{margin:0 24px}.stage-footer>span:last-child{max-width:130px;text-align:right;line-height:1.5}.side-label{left:24px}.stage-ring{width:280px;height:280px}}@media(max-width:650px){.topbar{height:66px;padding:0 20px}.brand{font-size:10px;gap:8px}.brand-icon{font-size:37px}.topbar>.text-button{font-size:10px;gap:8px}main{display:flex;flex-direction:column}.stage-top{padding:22px 24px 0}h1{font-size:30px}#stage{height:420px;flex:auto;min-height:0}.rotation{margin-top:0}.stage-footer{padding:12px 0}.stage-footer>span:last-child{max-width:160px}.angle-control{margin-bottom:18px}aside{padding:30px 24px}.panel-heading h2 br{display:none}.panel-heading h2{font-size:24px}.panel-heading p{max-width:none}.samples{gap:16px}.swatch{height:65px}.side-label small{max-width:80px;line-height:1.6}.export{right:24px}dialog{padding:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

@media(min-width:651px){
  html,body{height:100%;overflow:hidden}
  body{height:100dvh;display:flex;flex-direction:column}
  .topbar{flex:0 0 84px}
  main{flex:1;min-height:0;height:calc(100dvh - 84px);align-items:stretch;overflow:hidden}
  .workspace{height:100%;min-height:0;position:relative;top:auto;overflow:hidden}
  .workspace #stage{height:auto;min-height:0;flex:1 1 0}
  .stage-top,.rotation,.angle-control,.stage-footer{flex-shrink:0}
  .stage-ring{width:300px;height:300px}
  aside{height:100%;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable}
}

.edit-background{width:100%;border:1px solid #c8d1c4;background:#edf2e9;color:#344d40;border-radius:5px;display:flex;align-items:center;text-align:left;padding:12px 10px;font-size:10px;font-weight:600;margin:-1px 0 16px}.edit-background span{margin-left:auto;font-size:14px}.edit-background[hidden]{display:none}.image-editor{width:min(1000px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);border:0;border-radius:12px;padding:0;overflow:auto;box-shadow:0 20px 90px #1c241e40;color:#292b29;background:#fcfbf8}.image-editor::backdrop{background:#27332ac0;backdrop-filter:blur(5px)}.editor-header{display:flex;justify-content:space-between;align-items:flex-start;padding:25px 30px 20px;border-bottom:1px solid var(--line)}.editor-header h2{font-size:24px;margin:8px 0 4px}.editor-header p{font-size:11px;color:#787d73;margin:0;line-height:1.6}.editor-close{position:static;flex:none;border:0;background:#efefe9;border-radius:50%;width:32px;height:32px;font-size:24px;line-height:1}.editor-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:340px}.editor-image-area{background:#f1f1eb;padding:20px;display:flex;justify-content:center;align-items:center;overflow:auto;max-height:57vh}.editor-checker{background-color:#fff;background-image:linear-gradient(45deg,#e1e3dc 25%,transparent 25%),linear-gradient(-45deg,#e1e3dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e1e3dc 75%),linear-gradient(-45deg,transparent 75%,#e1e3dc 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;box-shadow:0 2px 14px #00000014}#editor-canvas{display:block;width:auto;height:auto;max-width:100%;max-height:52vh;touch-action:none;cursor:crosshair}.editor-controls{padding:23px 24px;font-size:11px}.editor-primary,.editor-apply{border:0;color:white;background:#354c42;border-radius:5px;font-size:11px;font-weight:600;padding:13px 14px}.editor-primary{width:100%}.editor-primary:hover,.editor-apply:hover{background:#273b33}.editor-help{font-size:10px;color:#7c8176;line-height:1.55;margin:9px 0 15px}.editor-result{font-size:10px;color:#496a51;line-height:1.5;margin:0}.editor-result:empty{display:none}.editor-label{display:flex;justify-content:space-between;font-size:10px;color:#636a5f;margin-top:12px}.editor-divider{border-top:1px solid var(--line);margin:20px 0}.editor-subtitle{font-size:9px;letter-spacing:1.2px;color:#888d81;font-weight:700}.editor-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#eeeee7;border-radius:5px;padding:4px;margin-top:10px}.editor-tools button{border:0;background:transparent;border-radius:3px;padding:9px 3px;font-size:10px}.editor-tools button.active{background:white;box-shadow:0 1px 4px #00000014}.editor-actions{display:flex;justify-content:space-between;gap:10px;margin-top:19px}.editor-actions button,.editor-cancel{border:1px solid #d5d9cf;background:#fff;border-radius:5px;padding:9px 11px;font-size:10px}.editor-actions button:last-child{border:0;background:transparent;color:#757c71}.editor-note{border-top:1px solid var(--line);padding-top:15px;margin-top:20px;color:#91958a;font-size:9px;line-height:1.6}.editor-footer{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line);padding:16px 30px}.editor-cancel{padding:10px 20px}.editor-apply{padding:10px 20px}@media(max-width:650px){.image-editor{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.editor-header{padding:18px 20px 14px}.editor-body{display:flex;flex-direction:column}.editor-image-area{height:35vh;min-height:180px;max-height:none;padding:12px}#editor-canvas{max-height:calc(35vh - 24px)}.editor-controls{padding:16px 20px}.editor-divider{margin:12px 0}.editor-footer{padding:12px 20px}.editor-note{margin-top:12px}}
.device-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.device-option{display:flex;align-items:center;text-align:left;gap:9px;min-width:0;border:1px solid #e1e3da;border-radius:6px;background:#fff;padding:9px 8px;transition:border-color .15s,background .15s}.device-option.selected{border-color:#526e5d;background:#f2f6ef}.device-option strong,.device-option small{display:block;white-space:nowrap}.device-option strong{font-size:10px;font-weight:650}.device-option small{font-size:9px;color:#8b8e83;margin-top:4px}.device-option i{display:none;margin-left:auto;color:#536f5b;font-style:normal;font-size:11px}.device-option.selected i{display:block}.device-mini{width:18px;height:42px;flex:none;border-radius:4px 4px 6px 6px;position:relative;margin:5px 2px 0}.device-mini:before{content:'';position:absolute;top:-6px;height:6px;width:7px;left:5px;border-radius:2px 2px 0 0;background:#252925}.device-mini:after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:#d8dbd3a8;border-radius:4px 4px 0 0}.mini-gold{background:linear-gradient(90deg,#a7834f,#ecd8a7 55%,#a78550)}.mini-green{background:linear-gradient(90deg,#254534,#70947b 55%,#254534);border-radius:4px 4px 8px 8px}.clear-artwork{width:100%;padding:10px 12px;border:1px solid #d8dcd1;border-radius:5px;background:transparent;font-size:10px;text-align:center;color:#596459}.clear-artwork:hover:not(:disabled){background:#eef1e9}.clear-artwork:disabled{opacity:.45}.device-option:focus-visible,.clear-artwork:focus-visible{outline:2px solid #507b66;outline-offset:3px}
.stage-top{gap:16px}.preview-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:190px;flex-shrink:0;padding-top:7px}.preview-meta .live{display:flex;margin-top:0}.preview-meta p{font-size:10px;line-height:1.5;color:#7b8175;text-align:right;margin:0}@media(max-width:900px){.preview-meta{max-width:140px}.preview-meta p{font-size:9px}}