@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;800&family=Prompt:wght@500;800&family=Sarabun:wght@500;800&family=Mali:wght@700&display=swap');
.dimension-slider{accent-color:#b35c6c;padding:0;height:20px}.dimension-slider+output{font-size:11px;color:#ddd;text-align:right}.view-controls{display:flex;flex-wrap:wrap;gap:6px}.view-controls button{font-size:11px;padding:7px 9px}.view-controls p{width:100%;font-size:10px;color:#aaa;margin:3px 0 8px}#rotation-controls{width:100%;display:flex;gap:12px}#rotation-controls[hidden]{display:none}#rotation-controls label{flex:1}#rotation-controls input{padding:0;accent-color:#b35c6c}#model-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}#model-canvas[hidden]{display:none}.show-model #lettering,.show-model #uploaded-art{visibility:hidden}.show-model #dimension,.show-model .badge{z-index:3;pointer-events:none}.show-model #dimension{color:#fff;text-shadow:0 1px 2px #333}.view-cube-wrap{display:none;position:absolute;left:28px;bottom:42px;width:48px;height:48px;perspective:260px;z-index:4}.show-model .view-cube-wrap{display:block}.view-cube{width:48px;height:48px;position:relative;transform-style:preserve-3d}.view-cube button{position:absolute;inset:0;width:48px;height:48px;padding:0;border:1px solid #8d8d8d;border-radius:0;background:#d5d5d5;color:#333;font-size:8px;backface-visibility:hidden}.cube-front{transform:translateZ(24px)}.cube-back{transform:rotateY(180deg) translateZ(24px)}.cube-left{transform:rotateY(-90deg) translateZ(24px)}.cube-right{transform:rotateY(90deg) translateZ(24px)}.cube-top{transform:rotateX(90deg) translateZ(24px)}.cube-bottom{transform:rotateX(-90deg) translateZ(24px)}
main{padding-top:22px}.intro{margin-bottom:16px}.intro h1{margin:4px 0;font-size:26px}.intro p{margin:0 0 4px}fieldset{margin-bottom:12px;padding-bottom:12px}legend{font-size:14px;margin-bottom:9px}label{gap:4px;margin-bottom:9px}input,select,textarea{padding:8px 10px}#modes{gap:6px}#modes button{padding:8px 5px}.art-upload{border-top:1px solid #ffffff15;padding-top:10px}.art-upload p{font-size:11px;color:#aaa;margin:4px 0;overflow-wrap:anywhere}.art-upload input{font-size:12px}#uploaded-art{width:100%;height:100%;max-height:300px;object-fit:contain}#uploaded-art[hidden],#lettering[hidden]{display:none}.hero[data-mode=fire] #lettering>div{background-image:var(--fire-texture);background-size:100% 100%;animation:none;filter:drop-shadow(1px 2px 0 #080808) drop-shadow(0 0 2px #ff7b2440)}
@media(max-width:850px){header{height:52px;padding:0 16px}header img{width:90px}header a{font-size:12px}main{padding:16px}.intro{margin-bottom:12px}.intro h1{font-size:21px}.intro span{font-size:11px}.workspace{gap:12px}.hero{height:210px;padding:40px 18px}.preview-footer{padding:8px 0}.preview-footer button{font-size:11px;padding:7px 10px}.preview-note{font-size:10px;margin:0 0 8px}.badge{font-size:10px;top:10px;left:10px}#dimension{bottom:12px}.row{gap:8px}input,select,textarea{font-size:16px}legend{margin-bottom:7px}textarea{height:64px}#result{padding:16px}}