@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap";:root{font-family:DM Sans,sans-serif;color:#24231f;background:#ece9e1;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button,label{-webkit-tap-highlight-color:transparent}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,430px);min-height:100vh}.viewer{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 48% 45%,rgba(255,255,255,.52),transparent 43%),#ece9e1}.brand{position:absolute;z-index:2;top:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:28px 32px;pointer-events:none}.wordmark{display:inline-flex;gap:10px;align-items:center;color:inherit;font-family:Manrope,sans-serif;font-size:15px;font-weight:600;letter-spacing:-.02em;text-decoration:none;pointer-events:auto}.brand-dot{width:16px;height:16px;border:5px solid #24231f;border-radius:50%}.status{display:flex;gap:7px;align-items:center;color:#656159;font-size:12px;font-weight:500}.status span{width:6px;height:6px;border-radius:50%;background:#69a578;box-shadow:0 0 0 3px #69a57824}.canvas-container{position:absolute;inset:0}.canvas-container canvas{display:block;width:100%;height:100%;cursor:grab;outline:none}.viewer[data-camera-mode=locked] .canvas-container canvas{cursor:default}.canvas-container canvas:active{cursor:grabbing}.viewer[data-camera-mode=locked] .canvas-container canvas:active{cursor:default}.back-preview{position:absolute;z-index:2;right:28px;bottom:28px;width:clamp(132px,15vw,178px);aspect-ratio:.82;overflow:hidden;border:1px solid rgba(36,35,31,.12);border-radius:16px;background:#ece9e1;box-shadow:0 16px 46px #2b282221;pointer-events:none}.back-preview[hidden]{display:none}.back-preview>span{position:absolute;z-index:1;top:11px;left:11px;padding:5px 8px;border:1px solid rgba(36,35,31,.08);border-radius:999px;color:#5f5b53;background:#faf8f2d1;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.back-canvas-container,.back-canvas-container canvas{width:100%;height:100%}.back-canvas-container canvas{display:block}.view-controls{position:absolute;z-index:2;bottom:27px;left:50%;display:flex;gap:12px;align-items:center;padding:8px 13px 8px 8px;border:1px solid rgba(36,35,31,.08);border-radius:999px;color:#656159;background:#faf8f2c7;box-shadow:0 8px 30px #2b282214;font-size:11px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translate(-50%)}.view-mode-button{display:inline-flex;min-height:29px;padding:0 11px;border:0;border-radius:999px;align-items:center;gap:7px;color:#fff;background:#24231f;font-size:10px;font-weight:600;cursor:pointer;box-shadow:0 1px 2px #1f1d192e}.view-mode-button:hover{background:#3c3933}.view-mode-button:disabled{cursor:wait;opacity:.62}.view-mode-button-secondary{border:1px solid rgba(36,35,31,.1);color:#3e3c37;background:#fff;box-shadow:0 1px 2px #1f1d191a}.view-mode-button-secondary:hover{background:#f5f3ed}.view-mode-button:focus-visible,.icon-button:focus-visible{outline:2px solid #24231f;outline-offset:2px}.view-mode-button svg{width:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button{display:grid;width:29px;height:29px;padding:0;border:0;border-radius:50%;place-items:center;color:#3e3c37;background:#fff;cursor:pointer;box-shadow:0 1px 2px #1f1d191f}.icon-button[hidden]{display:none}.icon-button:hover{background:#f5f3ed}.icon-button svg{width:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.divider{width:1px;height:13px;background:#24231f21}.panel{position:relative;z-index:3;display:flex;flex-direction:column;min-height:100vh;border-left:1px solid rgba(36,35,31,.11);background:#f8f6f0;box-shadow:-18px 0 50px #2a27200a}.panel-content{flex:1;padding:64px 42px 36px}.eyebrow{margin:0 0 24px;color:#8c877d;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}h1{max-width:300px;margin:0;font-family:Manrope,sans-serif;font-size:clamp(32px,3vw,43px);font-weight:500;line-height:1.05;letter-spacing:-.055em}.intro{max-width:320px;margin:18px 0 41px;color:#6d6960;font-size:14px;line-height:1.6}.upload-section{margin-bottom:34px}.field-label{margin:0 0 11px;color:#3d3b36;font-size:12px;font-weight:600}.drop-zone{display:flex;min-height:136px;padding:20px;border:1px dashed #b8b2a6;border-radius:12px;align-items:center;color:#555149;background:#ffffff6b;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}.drop-zone:hover,.drop-zone:focus-visible,.drop-zone.is-dragging{border-color:#4e4a42;outline:none;background:#fff}.drop-zone.is-dragging{transform:scale(1.01)}.drop-zone[hidden]{display:none}.upload-icon{display:grid;flex:0 0 auto;width:40px;height:40px;margin-right:14px;border:1px solid #ded9ce;border-radius:10px;place-items:center;color:#4c4942;background:#fff;box-shadow:0 3px 10px #23211d0f}.upload-icon svg,.remove-button svg,.tip>svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.upload-copy{display:flex;flex:1;flex-direction:column;font-size:12px;line-height:1.5}.upload-copy strong{color:#2f2d28;font-weight:600}.upload-copy span{color:#989287}.file-types{align-self:flex-end;color:#aaa398;font-size:9px;letter-spacing:.06em}.file-card{display:flex;min-height:76px;padding:10px;border:1px solid #ded9cf;border-radius:12px;align-items:center;background:#fff}.file-card[hidden]{display:none}.file-card img{width:58px;height:54px;border-radius:7px;object-fit:contain;background:#eeeae1}.file-details{display:flex;min-width:0;flex:1;flex-direction:column;padding:0 12px}.file-details strong{overflow:hidden;color:#37342f;font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.file-details span{margin-top:3px;color:#979187;font-size:10px}.remove-button{display:grid;width:31px;height:31px;padding:0;border:0;border-radius:50%;place-items:center;color:#8c867c;background:transparent;cursor:pointer}.remove-button:hover{color:#2f2d28;background:#f4f1eb}.remove-button svg{width:14px}.template-section{margin-bottom:34px}.template-heading{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:14px}.template-heading .field-label{margin-bottom:4px}.template-heading>span{padding:4px 6px;border:1px solid #ded9cf;border-radius:5px;color:#8a8479;background:#fff;font-size:8px;font-weight:600;letter-spacing:.08em}.template-description{margin:0;color:#8a8479;font-size:10px;line-height:1.45}.template-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.action-button{display:inline-flex;min-height:43px;padding:0 14px;border:1px solid #d8d2c7;border-radius:9px;align-items:center;justify-content:center;gap:8px;color:#37342f;background:#fff;font-size:11px;font-weight:600;cursor:pointer;transition:border-color .14s ease,background .14s ease,transform .14s ease}.action-button:hover{border-color:#aaa398;background:#fdfcf9}.action-button:active{transform:translateY(1px)}.action-button:focus-visible{outline:2px solid #24231f;outline-offset:2px}.action-button:disabled{cursor:wait;opacity:.6}.action-button-primary{border-color:#24231f;color:#fff;background:#24231f}.action-button-primary:hover{border-color:#3c3933;background:#3c3933}.action-button svg{width:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.template-status{min-height:15px;margin:7px 0 0;color:#6c675e;font-size:9px;line-height:1.5}.template-status.is-error{color:#a34a3d}.tip{display:flex;gap:10px;margin-top:34px;padding:15px;border:1px solid rgba(188,178,156,.42);border-radius:10px;color:#665f53;background:#f1ede3}.tip>svg{flex:0 0 auto;width:15px;margin-top:1px}.tip p{display:flex;margin:0;flex-direction:column;font-size:10px;line-height:1.5}.tip strong{margin-bottom:1px;color:#4b463e;font-weight:600}.tip span{color:#8a8275}.panel footer{padding:22px 42px;border-top:1px solid rgba(36,35,31,.08);color:#aaa398;font-size:9px}@media(max-width:820px){.app-shell{display:flex;flex-direction:column}.viewer{min-height:62vh}.panel{min-height:auto;border-top:1px solid rgba(36,35,31,.11);border-left:0}.panel-content{padding:40px 24px 32px}.panel footer{padding:20px 24px}.brand{padding:22px 20px}.view-controls{bottom:18px}.back-preview{right:18px;bottom:72px;width:132px}}@media(max-width:480px){.viewer{min-height:56vh}.view-controls>#view-instruction{display:none}.view-controls{left:20px;padding:6px;transform:none}.divider{display:none}.panel-content{padding-top:34px}.intro{margin-bottom:30px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}