style.css

/* Pawfoil layout. (c) 2026 CyberMax. */
.wrap.wide{max-width:1040px}
.lede{font-size:17px;margin:0 0 14px}
.maker{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media (min-width:860px){.maker{grid-template-columns:minmax(300px,380px) 1fr}.preview{position:sticky;top:12px}}
.controls{display:flex;flex-direction:column;gap:12px}
.photo input{position:absolute;width:1px;height:1px;opacity:0}.photo .btn{width:100%}
.field{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}
.field input{font:inherit;font-size:18px;padding:11px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
.adj label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}.adj input{width:150px}
.pro-box{border:1.5px dashed var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.preview{display:flex;flex-direction:column;align-items:center;gap:10px}
.tilt{position:relative;width:min(100%,420px);aspect-ratio:750/1050;border-radius:22px;transform-style:preserve-3d;transition:transform .12s ease-out;will-change:transform;touch-action:none}
.tilt canvas{width:100%;height:100%;border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.35);cursor:grab;display:block}
.holo{position:absolute;inset:0;border-radius:22px;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;background:linear-gradient(115deg,transparent 20%,rgba(255,0,170,.35) 35%,rgba(0,255,230,.35) 50%,rgba(255,230,0,.35) 65%,transparent 80%);background-size:250% 250%;transition:opacity .3s}
.tilt.foil .holo{opacity:.55}
.share{justify-content:center}
.controls .chips{flex-wrap:wrap!important;overflow:visible!important;margin:0!important;padding:0!important}