/* Product lighting, not a replacement of the scene's background. */
.art,.lights-on .art,.live-preview,.lights-on .live-preview{background:radial-gradient(ellipse at 20% 0%,#777d80 0%,#50575b 43%,#353b40 100%)}
.art:before,.live-preview:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.16' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.4;mix-blend-mode:soft-light}
.art-index,.lights-on .art-index,.preview-top,.preview-bottom,.lights-on .preview-top,.lights-on .preview-bottom{color:#d4dadd}
.material-chip,.lights-on .material-chip{background:#ffffff12;color:#e4e9ec;border-color:#ffffff24}
.render-letter{display:block;width:100%;height:100%;max-height:290px;overflow:visible;isolation:isolate}
.render-letter .led-face,.render-letter .led-wall{opacity:0;transition:opacity .5s ease}
.lights-on .render-letter .led-face{opacity:1}
.lights-on .render-letter .led-wall{opacity:.33}
.lights-on .render-letter.type-halo .led-wall{opacity:1}
.lights-on .render-letter.type-plexi .led-wall{opacity:.7}
.lights-on .render-letter.type-pixel .led-face{animation:rgb-emission 6s linear infinite}
.render-letter.type-unlit .led-wall{display:none}
@keyframes rgb-emission{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(110deg)}}
#configured-art{height:76%;position:relative}
#configured-art>.render-letter{height:100%;max-height:330px}
.board{--board-color:#30383d;background:linear-gradient(125deg,#ffffff24,transparent 43%,#0003),var(--board-color);border:1px solid #ffffff45;box-shadow:1px 1px #b2bac0,2px 2px #626d74,3px 3px #1b2329,4px 4px #48535d,6px 7px #10171c,14px 22px 19px #0007;transform:perspective(800px) rotateY(-12deg) rotateX(4deg);border-radius:1px}
.board>span{display:flex;align-items:center;justify-content:center;width:96%;height:100%;text-shadow:1px 2px 1px #0009}
.board.t7{background:repeating-linear-gradient(90deg,#ffffff00 0 12px,#ffffff26 13px 15px,#0007 16px 19px,#ffffff08 20px 26px),linear-gradient(125deg,#ffffff1a,#0003),var(--board-color)}
.board.t18{background:repeating-linear-gradient(90deg,#ffffff00 0 20px,#ffffff40 21px 28px,#0009 29px 35px,#ffffff0a 36px 48px),linear-gradient(125deg,#ffffff1a,#0003),var(--board-color)}
.board.engraved{background:linear-gradient(120deg,#ffffff38,#ffffff05 30%,#ffffff40 31%,#ffffff09 43%,#ffffff30),var(--board-color);border:2px solid #d1eff3a3;box-shadow:3px 4px #90b9bd88,12px 18px 20px #0005}
.board.grid{background:repeating-linear-gradient(90deg,transparent 0 17px,#ffffff48 18px 19px,var(--board-color) 20px 25px,#0008 26px 28px,transparent 29px 38px);box-shadow:8px 12px 15px #0003;border:0}
.board.hidden-profile{background:none;border:0;box-shadow:none}.board.hidden-profile:before{background:linear-gradient(#ffffff40,#0005),var(--board-color);height:20px;box-shadow:3px 5px #0007}
.board.cutout span{color:#d2dce0;text-shadow:1px 1px #0008}.lights-on .board.cutout span{color:#f6ffff;text-shadow:0 0 3px #fff,0 0 12px #b2eaff,0 0 25px #87dfff}
#configured-art .board{max-width:95%;min-height:20px;flex-shrink:0}
#configured-art .board .render-letter{width:96%;height:90%;max-height:240px}
#base-settings{margin:0;padding:18px;border:1px solid #bdc6b9;border-radius:12px;background:#f4f6ee;display:flex;flex-direction:column;gap:15px}
#base-settings legend{padding:0 8px;font-size:12px;font-weight:700;color:#31452f}
#base-settings small{font-size:10px;color:#727a6d;line-height:1.5}
.plate-art{background:linear-gradient(120deg,#fff9,#ffffff03 30%,#ffffff80 31%,#ffffff0a 43%),#c4d0d4;border:1px solid #e3f0f2a6;box-shadow:1px 1px #effaff,3px 3px #697d88,6px 6px #283941,15px 20px 20px #0006}
.plate-art.chrome,.plate-art.mirror{background:linear-gradient(125deg,#27333b 0%,#c3ced3 20%,#f7ffff 29%,#809099 32%,#17222c 43%,#71828c 48%,#e9f7ff 54%,#cad9e0 62%,#354651 73%,#c5d5db 90%);color:#10212c}
.plate-art.mirror{background:linear-gradient(125deg,#806129,#e4d099 23%,#fff7d1 30%,#9e7e38 33%,#3f301a 44%,#cdb378 50%,#fff4c6 58%,#8a6b36 75%,#d2b87d)}
.plate-art.layered{background:linear-gradient(135deg,#c0cbd0,#f5fafc 28%,#809097 30%,#c1cdd3 70%,#eaf0f2);border-left:14px solid #273943}
.plate-art.laser{background:repeating-linear-gradient(0deg,#ffffff20 0 1px,#00000008 1px 2px),linear-gradient(120deg,#8a989e,#e3edf2 40%,#7c8e99);text-shadow:0 1px #fff8}
.plate-art.print{background:repeating-linear-gradient(0deg,#ffffff18 0 1px,#0000000b 1px 2px),#c7cdba}
@media(max-width:680px){.render-letter{max-height:235px}#configured-art>.render-letter{max-height:230px}#configured-art .board .render-letter{max-height:180px}#base-settings{padding:12px}}
@media(prefers-reduced-motion:reduce){.render-letter .led-face{animation:none!important}}
/* One shared camera plane: child lettering has no additional skew. */
.art>.render-letter{width:78%;height:82%;transform:perspective(900px) rotateY(-8deg) rotateX(2deg)}
.board{transform:perspective(900px) rotateY(-8deg) rotateX(2deg)}
#configured-art>.render-letter{transform:perspective(900px) rotateY(-8deg) rotateX(2deg)}
#configured-art .board{min-height:0;max-width:none;max-height:none;overflow:visible}
#configured-art .board>span{width:100%;height:100%;position:relative}
#configured-art .board .render-letter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-height:none;max-width:none;flex-shrink:0}
#configured-art>.render-letter{max-height:none;max-width:none;flex-shrink:0}
#letter-settings{margin:0;padding:18px;border:1px solid #bdc6b9;border-radius:12px;background:#f4f6ee;display:flex;flex-direction:column;gap:15px}
#letter-settings legend{padding:0 8px;font-size:12px;font-weight:700;color:#31452f}
#letter-settings small{font-size:10px;color:#727a6d;line-height:1.5}
#dimension-warning{padding:12px;border:1px solid #ddaa60;border-radius:10px;background:#fff3dc;color:#7b4a0e;font-size:12px}
.base-examples{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
#type-settings,#plate-options{margin:0;padding:18px;border:1px solid #bdc6b9;border-radius:12px;background:#f4f6ee;display:flex;flex-direction:column;gap:15px}
#type-settings legend,#plate-options legend{padding:0 8px;font-size:12px;font-weight:700;color:#31452f}
#configured-art .configured-plate{max-width:none;min-height:0;padding:0;flex-shrink:0;transform:perspective(900px) rotateY(-8deg) rotateX(2deg);background:linear-gradient(125deg,#ffffff50,transparent 43%,#0002),var(--board-color);isolation:isolate}
.configured-plate .plate-text{position:relative;width:100%;height:100%}
#configured-art .configured-plate .render-letter{position:absolute;left:50%;top:50%;max-height:none;max-width:none;flex-shrink:0;transform:translate(-50%,-50%)}
.configured-plate[data-mount="adhesive"]:before,.configured-plate[data-mount="adhesive"]:after{display:none}
.configured-plate.mirror,.configured-plate.chrome{background:linear-gradient(125deg,#ffffff70,transparent 23%,#fff9 25%,#0004 41%,#fff8 60%,transparent 75%),var(--board-color)!important}
.configured-plate.print{background:repeating-linear-gradient(0deg,#fff2 0 1px,#0001 1px 2px),var(--board-color)!important}
.configured-plate.layered{border-left:8px solid #25343c}
@media(max-width:680px){.tabs button{white-space:normal}#type-settings,#plate-options{padding:12px}}
#language{min-width:72px;width:auto;height:40px;border-radius:30px;padding:0 12px}
#logo-settings{margin:0;padding:18px;border:1px solid #bdc6b9;border-radius:12px;background:#f4f6ee;display:flex;flex-direction:column;gap:13px}
#logo-settings legend{padding:0 8px;font-size:12px;font-weight:700;color:#31452f}
#logo-settings small{font-size:10px;color:#727a6d;line-height:1.5}
#logo-status{font-size:11px;color:#4d6547;overflow-wrap:anywhere}
#remove-logo{background:none;border:1px solid #c6cbbb;border-radius:8px;padding:8px;font-size:11px}
.logo-preview{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain;max-width:none;max-height:none;z-index:5;pointer-events:none}
.type-neon .led-face{mix-blend-mode:screen}
.render-letter .led-side{opacity:0;transition:opacity .4s}.lights-on .render-letter .led-side{opacity:1;filter:drop-shadow(0 0 5px #effaff)}
@media(max-width:680px){#logo-settings{padding:12px}}