:root{color-scheme:light;--cream: #f8efd9;--paper: #fffaf0;--ink: #3f3024;--muted: #7a6754;--line: #e7d4b0;--mint: #cde7d0;--sage: #6e9f78;--lilac: #d8caef;--peach: #f4b99d;--sky: #cde7f2;--gold: #e9b94f;--shadow: 0 18px 45px rgba(67, 48, 30, .16);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(circle at 15% 10%,rgba(205,231,208,.82),transparent 24rem),radial-gradient(circle at 92% 8%,rgba(205,231,242,.9),transparent 22rem),linear-gradient(180deg,var(--cream),#fff6e8 74%,#f3eadf)}button,input{font:inherit}button{min-height:2.8rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid rgba(63,48,36,.13);border-radius:8px;color:var(--ink);background:#ffffffb8;cursor:pointer;font-weight:800;transition:transform .14s ease,box-shadow .14s ease,background .14s ease}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px #3f30241f}button:disabled{cursor:not-allowed;opacity:.46}.app-shell{min-height:100vh;display:grid;grid-template-columns:minmax(18rem,24rem) minmax(0,1fr);gap:clamp(1rem,3vw,2rem);padding:clamp(.85rem,2vw,1.4rem)}.tool-panel{align-self:start;display:grid;gap:1rem;padding:1rem;border:1px solid rgba(63,48,36,.12);border-radius:8px;background:#fffaf0d1;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.title-block{display:flex;gap:.8rem;align-items:center}.mark{width:3rem;aspect-ratio:1;display:grid;place-items:center;border-radius:8px;background:linear-gradient(135deg,var(--mint),#fff1be);color:#52785a}h1{margin:0;font-size:clamp(1.55rem,4vw,2rem);line-height:1;letter-spacing:0}p{margin:.34rem 0 0;color:var(--muted);font-size:.92rem;font-weight:650}.control-group{display:grid;gap:.7rem}.file-control{display:grid;gap:.45rem;padding:.78rem;border:1px solid rgba(63,48,36,.11);border-radius:8px;background:#ffffff8c}.file-control span{display:flex;align-items:center;gap:.45rem;color:var(--ink);font-weight:850}.file-control input{width:100%;color:var(--muted);font-size:.86rem}.preset-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}.preset-row button{min-width:0;display:grid;gap:.12rem;padding:.58rem .35rem}.preset-row button small{color:var(--muted);font-size:.74rem}.preset-row .is-active{background:linear-gradient(135deg,var(--lilac),var(--sky));border-color:#4f588c2e}.action-row{display:grid;grid-template-columns:1fr;gap:.55rem}.primary-action{background:linear-gradient(135deg,var(--sage),#4f91a3);color:#fff}.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:0}.meta-grid div{min-width:0;padding:.65rem;border:1px solid rgba(63,48,36,.09);border-radius:8px;background:#ffffff80}dt{color:var(--muted);font-size:.72rem;font-weight:800}dd{margin:.2rem 0 0;overflow-wrap:anywhere;font-size:.96rem;font-weight:850}.share-link{display:block;overflow-wrap:anywhere;border-radius:8px;background:#cde7d09e;color:#315f45;padding:.75rem;font-size:.86rem;font-weight:800;text-decoration:none}.preview-panel{position:relative;min-height:calc(100vh - 2.8rem);display:grid;place-items:center;overflow:hidden;border:1px solid rgba(63,48,36,.12);border-radius:8px;background:linear-gradient(90deg,rgba(63,48,36,.035) 1px,transparent 1px),linear-gradient(rgba(63,48,36,.035) 1px,transparent 1px),radial-gradient(circle at 50% 45%,rgba(255,255,255,.92),transparent 28rem),#fffaf0b8;background-size:28px 28px,28px 28px,auto,auto;box-shadow:var(--shadow)}.source-preview,.empty-preview{width:min(38rem,82%);aspect-ratio:1;display:grid;place-items:center;border-radius:8px;background:#ffffff94}.source-preview img{max-width:100%;max-height:100%;display:block;object-fit:contain}.empty-preview{color:var(--muted);gap:.7rem;font-weight:850}.preview-canvas{display:block;max-width:min(100%,76vw);max-height:calc(100vh - 3.8rem);width:auto;height:auto;image-rendering:auto;box-shadow:0 20px 44px #3f302433}.busy-layer{position:absolute;inset:0;display:grid;place-items:center;color:var(--sage);background:#fffaf06b}.busy-layer svg{animation:spin .85s linear infinite}@keyframes spin{to{rotate:360deg}}@media(max-width:820px){.app-shell{grid-template-columns:1fr}.preview-panel{min-height:62vh}.preview-canvas{max-width:100%;max-height:70vh}}