:root{font-family:Arial,"PingFang SC",sans-serif;color:#17201a;background:#deddd8}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}main{min-height:100vh;display:grid;grid-template-columns:180px minmax(480px,1fr) 390px}header{background:#17201a;color:#f5f2e9;padding:30px 24px;display:flex;flex-direction:column}.logo{font-size:24px;font-weight:900;line-height:.88;letter-spacing:-.08em}.logo span{color:#f3ff62;font-size:16px}.logo+p{margin-top:32px;color:#aeb5ae;font-size:13px;writing-mode:vertical-rl;letter-spacing:.18em}header button{margin-top:auto;border:0;background:#f3ff62;padding:14px 8px;font-weight:bold;color:#17201a}.stage{padding:28px 36px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:repeating-linear-gradient(0deg,transparent,transparent 31px,#c9c8c3 32px),repeating-linear-gradient(90deg,transparent,transparent 31px,#c9c8c3 32px)}.stage-top{width:min(680px,100%);display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-size:11px;font-weight:bold;letter-spacing:.12em}.side-tabs{background:#cccac4;padding:3px}.side-tabs button{border:0;padding:7px 16px;background:transparent}.side-tabs .active{background:#17201a;color:white}.scene{width:min(680px,100%);aspect-ratio:90/54;perspective:1200px}.card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1);box-shadow:0 28px 60px #191b1a33}.card.flipped{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:var(--bg,#f3ff62);color:var(--ink,#17201a);padding:7%;}.back{transform:rotateY(180deg)}.front .brand{font-size:12px;text-transform:uppercase;letter-spacing:.18em}.front h1{font-size:clamp(34px,5vw,66px);line-height:.9;margin:18% 0 12px;letter-spacing:-.07em}.front p{margin:0}.front .mark{position:absolute;right:7%;top:8%;font-size:36px}.back h2{font-size:30px;margin:0 0 10%}.back .contact{display:grid;grid-template-columns:1fr 2fr;gap:11px;font-size:13px;border-top:1px solid;padding-top:20px}.back small{opacity:.65}.face.bold h1{font-size:clamp(48px,7vw,92px);margin:4% 0;max-width:90%}.face.bold .brand{position:absolute;bottom:7%}.face.bold .mark{font-size:90px;opacity:.15;top:auto;bottom:-20px}.face.minimal h1{font-weight:400;margin-top:25%;font-size:clamp(30px,4vw,50px);letter-spacing:0}.face.minimal .mark{font-size:13px}.back.minimal .contact{margin-top:18%;border:0}.flip{margin-top:24px;border:1px solid #555;background:#deddd8;padding:10px 18px}aside{background:#f6f3eb;padding:26px;overflow:auto}nav{display:flex;border-bottom:1px solid #c7c4bc;margin-bottom:28px}nav button{flex:1;border:0;background:none;padding:12px 2px;color:#8b8c87;font-size:12px}nav button.active{color:#17201a;border-bottom:3px solid}.panel{display:none}.panel.active{display:block}.panel label{display:block;font-size:11px;color:#777b76;margin-bottom:18px}.panel input,.panel textarea{display:block;width:100%;border:0;border-bottom:1px solid #bdbdb5;background:transparent;padding:8px 0;color:#17201a;outline:none}.panel input:focus,.panel textarea:focus{border-color:#17201a}.panel textarea{resize:vertical;min-height:55px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel h2{font-size:28px;margin:10px 0 28px}.layouts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.layouts button{height:130px;border:1px solid #c7c4bc;background:#eeeae1;display:flex;flex-direction:column;align-items:start;justify-content:end;padding:12px}.layouts button.active{background:#17201a;color:white}.layouts i{margin:auto;font-size:25px}.layouts small{opacity:.6}.color-line{display:grid!important;grid-template-columns:60px 45px 1fr;align-items:center}.color-line input{border:0;width:40px;height:40px;padding:0}.color-line span{font-size:16px;color:#17201a}.swatches{display:flex;gap:9px;margin-top:30px}.swatches button{width:42px;height:42px;border:5px solid #fff;box-shadow:0 0 0 1px #bbb}.swatches button:nth-child(1){background:#f3ff62}.swatches button:nth-child(2){background:#ff6847}.swatches button:nth-child(3){background:#18265c}.swatches button:nth-child(4){background:#e8e1d6}@media(max-width:950px){main{grid-template-columns:1fr}header{flex-direction:row;align-items:center;gap:20px;padding:18px 20px}.logo+p{display:none}header button{margin:0 0 0 auto}.stage{min-height:55vh;padding:24px 16px}aside{min-height:420px}.scene{max-width:620px}}@media(max-width:520px){header button{font-size:11px;padding:10px}.stage{min-height:400px}.face{padding:6%}.front h1{margin-top:13%;font-size:34px}.back h2{font-size:19px;margin-bottom:5%}.back .contact{font-size:9px;gap:6px;padding-top:8px}.layouts button{height:105px}.pair{grid-template-columns:1fr}}