@font-face{font-family:Fredoka;src:url('assets/Fredoka-Bold.ttf')}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;color:#283d36;background:#fbfaf7;font-family:Arial,Helvetica,sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ca7c56;outline-offset:4px}a{color:inherit;text-decoration:none}header{max-width:1440px;margin:auto;height:106px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid #e9e7df}.brand{font-size:29px;font-weight:900;letter-spacing:7px;display:block;line-height:1}.brand span{display:block;font-size:9px;letter-spacing:5px;margin:9px 0 0 3px}nav{display:flex;gap:32px;font-size:13px;align-items:center}nav button{border:0;background:none;color:inherit}.header-note{font-size:10px;letter-spacing:1.6px;color:#77827b}main{max-width:1440px;margin:auto;padding:0 5%}.intro{text-align:center;padding:54px 0 39px}.eyebrow{font-size:10px;letter-spacing:2.6px;font-weight:700;color:#8a7359}h1{font-family:Georgia,serif;font-weight:400;font-size:54px;line-height:1.08;letter-spacing:-1.8px;margin:18px 0}h1 em{color:#a97e62;font-weight:400}.intro p{color:#7c817a;font-size:14px;line-height:1.7;margin:0}.designer{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(345px,.85fr);gap:38px;align-items:start}.visual{border:1px solid #e3e3d9;border-radius:22px;overflow:hidden;position:sticky;top:24px;background:#f1f0e9}.visual-top{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;font-size:9px;letter-spacing:1.5px}.visual-top i{display:inline-block;width:6px;height:6px;background:#6b8b71;border-radius:50%;margin-right:7px}.units{background:#e5e5db;border-radius:8px;padding:3px;display:flex}.units button{font-size:12px;border:0;background:transparent;padding:7px 13px;color:#5a6c60;border-radius:6px}.units .active{background:white;box-shadow:0 1px 4px #0001}.scene{height:355px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 10%,#fff9 0,transparent 65%);padding:30px}.wall-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 24.8%,#d3d5c934 25%,transparent 25.2%);pointer-events:none}#preview{width:100%;max-height:210px;overflow:visible;filter:drop-shadow(1px 13px 8px #60523826);z-index:1}.shelf{position:absolute;bottom:28px;left:9%;right:9%;height:7px;background:#ded8c8;box-shadow:0 10px 14px #4e4c3520}.scene-caption{position:absolute;bottom:0;font:italic 12px Georgia,serif;color:#8a8d7e}.dimension{text-align:center;padding:29px 10px 24px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.dimension>span{font-size:23px;color:#819080}.dimension strong{font-size:15px;font-weight:500}.dimension small{font-size:11px;color:#7f887d}.visual-bottom{display:flex;justify-content:space-around;border-top:1px solid #dfdfd4;padding:19px 10px;gap:8px;font-size:10px;color:#74806f}.controls{padding:2px 0}.step{display:flex;gap:11px;align-items:center;margin:0 0 15px}.step>span{font-size:10px;border:1px solid #d6d9ce;border-radius:50%;height:25px;width:25px;display:grid;place-items:center}.step h2{font-size:17px;font-weight:500;margin:0}.step small{margin-left:auto;font-size:10px;color:#808777}.input-wrap{position:relative}input{width:100%;border:1px solid #d5d8cb;border-radius:9px;padding:17px 65px 17px 16px;font-size:20px;letter-spacing:2px;color:#304238;background:#fff}.input-wrap span{position:absolute;right:15px;top:21px;font-size:11px;color:#86907f}.hint{font-size:11px;color:#808678;line-height:1.6;margin:9px 0 17px}#error{font-size:12px;color:#ab4e32;min-height:2px;margin:0 0 18px}.letter-buttons{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}.letter-buttons button{width:39px;height:46px;border:1px solid #e1e0d5;border-radius:8px;background:#fff;position:relative;font:22px Fredoka,Arial;color:#2d4035;padding-bottom:5px}.letter-buttons button:after{content:'';position:absolute;bottom:5px;left:9px;right:9px;height:4px;background:var(--color);border-radius:3px}.letter-buttons button.active{border:2px solid #4a6550;background:#f0f2ea}.palette-title{display:flex;justify-content:space-between;font-size:11px;margin-bottom:13px}.palette-title strong{font-weight:500}.palette-title span{color:#7a8272}.palette{display:grid;grid-template-columns:repeat(10,1fr);gap:9px}.swatch{aspect-ratio:1;border-radius:50%;border:1px solid #00000014;padding:0;background:var(--color);min-width:0;position:relative}.swatch.active{outline:2px solid #344e39;outline-offset:3px}.swatch.active:after{content:'✓';color:var(--ink);font-weight:bold;position:absolute;inset:0;display:grid;place-items:center}.palette-actions{display:flex;justify-content:space-between;gap:8px;margin:18px 0 14px}.palette-actions button{border:0;background:none;padding:0;font-size:10px;color:#556b53;text-decoration:underline;text-underline-offset:3px}.color-note{font-size:10px;color:#929487;line-height:1.5;margin-bottom:22px}.order-card{padding:19px;border-radius:12px;background:#eef0e7}.order-card>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:11px}.order-card strong{font-size:15px;letter-spacing:1.5px}.order-card p{font-size:11px;color:#7c8373;margin:10px 0 17px}.primary,.secondary{width:100%;border-radius:7px;padding:14px;border:0;font-size:12px}.primary{background:#304b3c;color:white;display:flex;justify-content:space-between}.primary:hover{background:#46634f}.secondary{background:transparent;color:#465b46;padding:12px 5px 4px}.order-card small{display:block;text-align:center;color:#818977;font-size:9px;margin-top:10px}#feedback{font-size:11px;text-align:center;padding-top:8px;color:#536f45}.details{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:70px 0 55px;margin-top:52px;border-top:1px solid #e4e4da}.details h2{font:32px/1.2 Georgia,serif;margin:18px 0}.details p{font-size:13px;color:#7e8478;line-height:1.8;max-width:370px}dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 30px}dl div{border-bottom:1px solid #e2e4d8;padding:0 0 15px}dt{font-size:11px;color:#879080;margin-bottom:9px}dd{margin:0;font-size:16px}dd span{font-size:12px;color:#92998a}footer{display:flex;align-items:center;justify-content:space-between;padding:30px 0;border-top:1px solid #e3e4da}footer .brand{font-size:22px}footer p{font:italic 16px Georgia,serif;color:#8d806b}footer>span{font-size:10px;color:#8b9284}dialog{border:0;border-radius:15px;padding:18px;max-width:700px;width:92vw;max-height:90vh}dialog::backdrop{background:#1e332c99;backdrop-filter:blur(4px)}dialog img{display:block;width:100%}dialog>button{display:block;margin-left:auto;border:0;padding:10px;background:#eff0e9;border-radius:6px;position:sticky;top:0}button:disabled{opacity:.4;cursor:not-allowed}@media(min-width:1500px){.scene{height:420px}}@media(max-width:850px){header{height:85px}.header-note{display:none}nav{gap:18px;font-size:11px}h1{font-size:43px}.designer{gap:24px;grid-template-columns:1.1fr 1fr}.palette{gap:8px;grid-template-columns:repeat(7,1fr)}.scene{height:310px;padding:22px}.visual-top{padding:18px 15px}.visual-bottom{font-size:8px}.details{gap:35px}}@media(max-width:650px){header{padding:0 6%}.brand{font-size:24px}nav a:nth-child(2){display:none}nav{gap:15px}main{padding:0 6%}.intro{padding:35px 0 29px}h1{font-size:39px}.intro p{font-size:12px}.eyebrow{font-size:9px}.designer{grid-template-columns:1fr;gap:30px}.visual{position:relative;top:auto;border-radius:16px}.scene{height:230px;padding:20px}.visual-top{padding:15px}.dimension{padding:22px 10px 17px}.visual-bottom{font-size:9px;padding:15px 8px}.palette{grid-template-columns:repeat(10,1fr);gap:10px}.step h2{font-size:18px}.letter-buttons button{width:calc((100% - 56px)/9);max-width:44px}.details{grid-template-columns:1fr;gap:24px;padding:38px 0;margin-top:38px}.details h2{font-size:29px}.details p{max-width:none}dl{gap:18px}footer{gap:20px;flex-wrap:wrap}footer p{font-size:13px}footer>span{width:100%;text-align:center}.primary,.secondary{min-height:44px}}

/* Reference-inspired name sign studio layout */
body{background:#f8f6ef;color:#344638}header{height:90px;padding:0 3.2%}.header-note{letter-spacing:0;font-size:12px}main{padding:0 3.2%}.intro{display:flex;justify-content:space-between;text-align:left;padding:36px 0 30px;align-items:center}h1{font-size:58px;margin:12px 0 18px}h1 em{color:#7b8867}.intro-aside{font:italic 17px/1.6 Georgia,serif!important;text-align:right}.eyebrow{color:#7b856e;font-size:9px;letter-spacing:2px}.designer{grid-template-columns:minmax(0,1fr) 350px;gap:26px}.visual{position:relative;top:auto;background:radial-gradient(ellipse at 25% 25%,#fffaf3,#e9e7de);border:1px solid #e7e5dc;border-radius:20px}.scene{height:310px;background:none;padding:35px 30px}.visual-top{padding:22px}.preview-actions{display:flex;align-items:center;gap:10px}#enlarge{background:#fafaf680;border:1px solid #d8ddd0;border-radius:9px;font-size:22px;color:#73806b;width:34px;height:34px}.dimension{padding:17px 10px 30px}.dimension strong{font-size:13px}.visual-bottom{justify-content:space-between;padding:20px 24px;border:0;font-size:10px}.controls{background:#fffefa;border:1px solid #e6e6dc;border-radius:18px;overflow:hidden;padding:0}.control-section{padding:24px 22px;border-bottom:1px solid #e6e8dd}.control-section:last-child{border:0}.step{gap:10px;margin-bottom:20px}.step h2{font-size:15px}.step>span{background:#f0f2e8;border:0;color:#8b957e}.field-label{display:block;font-size:11px;color:#7c8677;margin-bottom:9px}input{font-size:19px;padding:14px 60px 14px 13px;background:#fbfcf7}.input-wrap span{top:18px}.hint{font-size:10px;margin-bottom:0}.step+.hint{margin:-8px 0 15px}#error{margin:6px 0 0;min-height:0}.letter-buttons{gap:7px;margin-bottom:24px}.letter-buttons button{width:40px;height:45px;background:#f5f6ee}.letter-buttons button:after{display:none}.letter-buttons button.active{background:#f1f4e9}.palette{grid-template-columns:repeat(5,1fr);gap:14px 18px}.swatch{max-width:40px}.palette-title{font-size:10px}.apply-all{margin-top:23px;width:100%;border:1px solid #dfe3d6;background:transparent;color:#64765a;font-size:10px;border-radius:7px;padding:10px}.finish>strong{display:block;font-size:24px;font-weight:400;margin:12px 0 8px}.finish details{font-size:12px;margin:15px 0 20px}.finish summary{cursor:pointer;color:#7c8974}.finish dl{display:block;margin-top:16px}.finish dl div{display:flex;justify-content:space-between;padding:8px 0}.finish dd,.finish dt{font-size:10px;margin:0}.primary{font-size:12px;padding:15px}.secondary{border:1px solid #dce1d3;margin-top:9px;padding:13px;background:#fffefa}.text-button{width:100%;border:0;background:none;padding:14px 0 0;color:#76856b;font-size:10px}.order-note{font-size:10px;line-height:1.7;text-align:center;color:#8c9384;margin:14px 0 0}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:26px 10px 15px}.features>div{display:flex;gap:12px;align-items:center}.features b{font:23px Georgia;color:#81906f}.features span{font-size:12px}.features small{display:block;font-size:10px;color:#929987;line-height:1.6;margin-top:5px}.sizing-note{font-size:11px;text-align:center;color:#8b947e;margin:10px 0 30px}.inspiration{border-top:1px solid #e2e4d8;padding:22px 0 0}.inspiration>div:first-child{display:flex;justify-content:space-between;align-items:center}.inspiration h2{font:18px Georgia,serif;margin:0}.inspiration>div>span{font-size:10px;color:#8c957f}.presets{display:flex;gap:12px;margin-top:18px}.presets button{border:1px solid #e0e3d6;border-radius:10px;background:#fffdf7;flex:1;padding:14px 10px;color:#68785c;font-size:11px;text-align:left}.presets button>span{display:block;width:84px;height:16px;border-radius:10px;margin-bottom:9px;background:linear-gradient(90deg,var(--a) 25%,var(--b) 25% 50%,var(--c) 50% 75%,var(--d) 75%)}.left-column>.color-note{font-size:10px;line-height:1.7;margin:23px 0}footer{margin-top:35px;padding:25px 0;gap:20px}footer>span{font-size:10px;color:#89937e}#largePreview{max-width:1300px;width:95vw}#largeArt{padding:35px 15px}#largeArt svg{width:100%;max-height:60vh}#largeSize{text-align:center;color:#5e7355}
@media(min-width:1500px){.scene{height:380px}}@media(max-width:850px){.designer{grid-template-columns:minmax(0,1fr) 320px;gap:18px}.features{grid-template-columns:1fr;gap:12px}.features small{display:inline;margin-left:7px}.features b{width:25px}.presets{flex-wrap:wrap}.presets button{min-width:95px}.inspiration>div:first-child{display:block}.inspiration h2{margin-bottom:6px}.scene{height:320px;padding:20px}.intro-aside{font-size:14px!important}}@media(max-width:650px){header{padding:0 6%;height:80px}main{padding:0 6%}.intro{padding:28px 0 25px}h1{font-size:44px;letter-spacing:-1.5px}.intro-aside{display:none}.designer{display:flex;flex-direction:column;gap:22px}.left-column,.controls{width:100%}.scene{height:215px;padding:20px 16px}.visual-top{padding:16px}.visual-bottom{padding:16px;font-size:8px}.features{grid-template-columns:1fr 1fr;padding:20px 0 10px;gap:15px}.features>div:last-child{display:none}.features span{font-size:10px}.features small{display:block;margin-left:0;font-size:9px}.features b{font-size:20px}.sizing-note{font-size:10px;margin-bottom:20px}.inspiration{padding-top:16px}.inspiration h2{font-size:16px}.inspiration>div:first-child{display:flex}.inspiration>div>span{font-size:8px}.presets{gap:7px}.presets button{min-width:0;font-size:9px;padding:11px 8px}.presets button>span{width:65px}.left-column>.color-note{margin:16px 0 0;font-size:9px}.control-section{padding:24px}.palette{grid-template-columns:repeat(7,1fr);gap:13px}.swatch{max-width:none}.letter-buttons button{width:calc((100% - 56px)/9);font-size:22px;max-width:40px}.step h2{font-size:16px}.intro p{font-size:12px}.header-note{display:none}footer>span{width:100%;text-align:left}footer{margin-top:25px}.finish>strong{font-size:25px}}
