:root{color:#20201d;font-synthesis:none;text-rendering:optimizelegibility;background:#f5f4ef;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:#f5f4ef;min-width:320px}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{width:min(100% - 32px,920px);margin:0 auto;padding:64px 0 32px}.app-header{text-align:center;margin-bottom:32px}.eyebrow{color:#777469;letter-spacing:.16em;margin:0 0 8px;font-size:.75rem;font-weight:800}h1{letter-spacing:-.06em;margin:0;font-size:clamp(2.5rem,8vw,4.25rem);line-height:1}.lead{color:#66635b;margin:16px 0 0;font-size:clamp(.95rem,2.5vw,1.1rem)}.workspace{background:#fff;border:1px solid #dfddd4;border-radius:20px;padding:clamp(16px,4vw,32px);overflow:hidden;box-shadow:0 12px 40px #26252012}.drop-zone{background:#faf9f5;border:2px dashed #cbc8bc;border-radius:14px;justify-content:space-between;align-items:center;gap:24px;min-height:144px;padding:24px;transition:border-color .12s,background-color .12s;display:flex}.drop-zone.is-dragging{background:#eef7f1;border-color:#3e7b58}.drop-copy{grid-template-columns:auto 1fr;align-items:center;column-gap:14px;min-width:0;display:grid}.drop-icon{color:#fff;background:#252521;border-radius:50%;grid-row:1/4;place-items:center;width:46px;height:46px;font-size:1.6rem;line-height:1;display:grid}.drop-hint,.file-name{color:#777469;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:.85rem;overflow:hidden}.file-name{color:#3e7b58}.drop-button,.action-button{cursor:pointer;border-radius:10px;min-height:48px;padding:0 20px;font-weight:750}.drop-button{color:#252521;background:#fff;border:1px solid #cbc8bc;flex:none}.drop-button:hover,.secondary:hover{background:#f3f2ed}.notice{border-radius:9px;margin:16px 0 0;padding:12px 14px;font-size:.9rem}.notice.success{color:#245b3b;background:#e8f5ec}.notice.error{color:#8a2e27;background:#fceceb}.notice.info{color:#675416;background:#fff6d8}.editor{margin-top:24px}.preview-frame{background-color:#272725;background-image:linear-gradient(45deg,#30302e 25%,#0000 25%),linear-gradient(-45deg,#30302e 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#30302e 75%),linear-gradient(-45deg,#0000 75%,#30302e 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;border-radius:14px;place-items:center;min-height:240px;max-height:min(62vh,620px);display:grid;overflow:hidden}canvas{object-fit:contain;max-width:100%;max-height:min(62vh,620px);display:block}.controls{grid-template-columns:1.6fr 1fr;gap:16px;margin-top:20px;display:grid}.control-row{background:#faf9f5;border:1px solid #e3e1d9;border-radius:12px;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-width:0;min-height:72px;padding:14px 16px;display:grid}.control-row label{font-size:.9rem;font-weight:750}.control-row output{color:#66635b;text-align:right;min-width:3.2rem;font-size:.85rem}input[type=range]{accent-color:#252521;width:100%}input[type=color]{cursor:pointer;background:#fff;border:1px solid #cbc8bc;border-radius:8px;width:48px;height:44px;padding:3px}.actions{grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;display:grid}.action-button{border:1px solid #252521}.primary{color:#fff;background:#252521}.primary:hover{background:#41413c}.secondary{color:#252521;background:#fff}footer{color:#777469;text-align:center;margin-top:20px;font-size:.8rem}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #73a985}@media (width<=640px){.app-shell{width:min(100% - 20px,920px);padding-top:36px}.app-header{margin-bottom:24px}.workspace{border-radius:16px}.drop-zone{flex-direction:column;align-items:stretch;gap:18px;min-height:180px;padding:20px}.drop-button{width:100%}.drop-hint{display:none}.controls{grid-template-columns:1fr;gap:10px}.actions{grid-template-columns:1fr}.action-button{min-height:52px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}