:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#173127;--page-max:1180px;--surface:#fffcf4d1;--surface-strong:#fffcf4f0;--border:#25594029;--border-strong:#25594047;--text-soft:#4a6655;--accent:#1f7c5c;--accent-strong:#155b43;--shadow:0 22px 48px #1338261f;--radius-xl:28px;--radius-lg:20px;--radius-md:16px;background:radial-gradient(circle at 0 0,#afd6bd73,#0000 38%),linear-gradient(145deg,#fcfbf5 0%,#eff5e7 45%,#ddebdc 100%);font-family:Avenir Next,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0}body:before{content:"";pointer-events:none;background:linear-gradient(90deg,#ffffff1a 0,#0000 10% 90%,#ffffff1a 100%) 0 0/100% 100%,linear-gradient(#ffffff2e 1px,#0000 1px) 0 0/44px 44px,linear-gradient(90deg,#ffffff2e 1px,#0000 1px) 0 0/44px 44px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#0000008c,#0000 88%);mask-image:linear-gradient(#0000008c,#0000 88%)}button,input,label{font:inherit}button{cursor:pointer}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.page-shell{width:min(var(--page-max), calc(100vw - 32px));margin:0 auto;padding:12px 0 64px}.hero{gap:18px;padding:8px 0 32px;animation:.42s ease-out both rise-in;display:grid}.hero-copy h1{letter-spacing:-.04em;margin:0;font-family:Iowan Old Style,Palatino Linotype,serif;font-size:clamp(2.3rem,5vw,4.3rem);line-height:.96}.eyebrow,.panel-kicker,.preview-label{color:var(--accent-strong);letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px;font-size:.78rem;font-weight:700}.hero-text{max-width:62ch;color:var(--text-soft);margin:14px 0 0;font-size:1.05rem}.workspace{grid-template-columns:minmax(320px,.82fr) minmax(0,1.05fr);align-items:stretch;gap:24px;display:grid}.preview-panel,.controls-panel{min-width:0;height:100%}.controls-panel{grid-template-rows:auto minmax(0,1fr);gap:20px;display:grid}.preview-panel{grid-template-rows:minmax(0,1fr) auto;gap:20px;display:grid}.panel-card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow);height:100%;padding:22px}.panel-preview{padding:22px 22px 18px}.panel-heading{justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px;display:flex}.panel-heading h2{margin:0;font-size:1.32rem}.panel-note,.status-text{color:var(--text-soft);margin:0;font-size:.93rem}.preview-shell{border-radius:calc(var(--radius-xl) - 6px);border:1px solid var(--border);aspect-ratio:1;touch-action:none;background:linear-gradient(140deg,#f8f6ede6,#deecdfcc);width:100%;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid;position:relative;overflow:hidden}.preview-canvas{cursor:grab;width:100%;height:100%;display:block}.preview-canvas.is-dragging{cursor:grabbing}.preview-footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;display:grid}.preview-value{margin:0;font-size:.95rem;font-weight:600}.upload-card{border-radius:var(--radius-lg);border:1px dashed var(--border-strong);cursor:pointer;background:linear-gradient(140deg,#ffffffc2,#ecf5eaeb);gap:6px;padding:18px;transition:border-color .18s,transform .18s;display:grid}.upload-card:hover,.upload-card.is-over{border-color:var(--accent);transform:translateY(-1px)}.upload-title{font-size:1rem;font-weight:700}.upload-subtitle{color:var(--text-soft);font-size:.92rem}.error-text{color:#8a2d2d;background:#a42e2e14;border:1px solid #a42e2e29;border-radius:14px;margin:14px 0 0;padding:12px 14px}.frame-grid{grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:14px;display:grid}.frame-option{background:#ffffffbd;border:1px solid #2559401f;border-radius:18px;gap:12px;padding:12px;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid}.frame-option:hover{border-color:#1f7c5c6b;transform:translateY(-1px)}.frame-option.is-active{border-color:#1f7c5cb3;box-shadow:inset 0 0 0 1px #1f7c5c33}.frame-thumb-wrap{aspect-ratio:1;background:linear-gradient(45deg,#0000000d 25%,#0000 25% 75%,#0000000d 75%) 0 0/24px 24px,linear-gradient(45deg,#0000000d 25%,#0000 25% 75%,#0000000d 75%) 12px 12px/24px 24px,linear-gradient(#fff,#e8f0e5) 0 0/100% 100%;border-radius:16px;place-items:center;padding:12px;display:grid}.frame-thumb{object-fit:contain;width:100%;height:100%}.frame-name{text-align:left;font-size:.94rem;font-weight:700}.empty-frames{border:1px dashed var(--border-strong);color:var(--text-soft);border-radius:16px;padding:18px}.control-row,.button-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.control-row{margin-bottom:10px;font-weight:600}.zoom-slider{width:100%;accent-color:var(--accent)}.button-row{flex-wrap:wrap;margin-top:18px}.primary-button,.secondary-button{border:1px solid #0000;border-radius:999px;min-height:48px;padding:0 18px;font-weight:700;transition:transform .18s,opacity .18s,border-color .18s}.primary-button{color:#f8fff8;background:linear-gradient(135deg,#1f7c5c,#13503b)}.secondary-button{color:#173127;background:#ffffffb8;border-color:#25594029}.primary-button:hover,.secondary-button:hover{transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled,.zoom-slider:disabled{opacity:.5;cursor:not-allowed}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width<=960px){.workspace{grid-template-columns:1fr;align-items:start}.preview-panel,.controls-panel{grid-template-rows:auto;height:auto}}@media (width<=640px){.page-shell{width:min(var(--page-max), calc(100vw - 20px));padding-top:24px}.panel-card{padding:18px}.preview-footer{grid-template-columns:1fr}.frame-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.button-row{flex-direction:column;align-items:stretch}}