*{box-sizing:border-box}body{margin:0;background:#f4f6f2;color:#233c2d;font:15px/1.65 system-ui,"Segoe UI",sans-serif}header{padding:20px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce4db;background:#fff}header a{font-size:23px;text-decoration:none;color:inherit}header b{color:#378255}header span,.hint,small{font-size:12px;color:#637267}main{max-width:1120px;margin:auto;padding:30px 24px}.intro{margin-bottom:32px}.intro small{letter-spacing:.6px}h1{font-size:clamp(27px,4vw,42px);line-height:1.35;letter-spacing:-1px;margin:10px 0}.intro p{color:#637267}.workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:28px}fieldset{border:1px solid #dce4db;background:#fff;border-radius:17px;padding:20px;margin:0 0 22px;min-width:0}legend{font-weight:650;padding:0 8px}label{display:block;margin:12px 0;font-weight:500}input,select,textarea,button{font:inherit}input:not([type=checkbox]):not([type=range]),select,textarea{width:100%;padding:11px;border:1px solid #d4ded3;border-radius:9px;background:#fff;color:#233c2d;min-width:0}input[type=range]{width:100%;accent-color:#34764d}textarea{resize:vertical}button,.download{border:1px solid #cedace;border-radius:10px;padding:11px 14px;background:white;color:#233c2d;cursor:pointer;text-align:center}button:disabled{opacity:.45;cursor:default}button:hover:not(:disabled){background:#edf3ec}.row{display:flex;gap:12px;align-items:center}.row>*{flex:1;min-width:0}.upload{border:1px dashed #83a48a;border-radius:10px;padding:16px;background:#f5f9f3}.upload input{margin-top:10px}.inline{display:flex;gap:9px;align-items:center}.preview-card{padding:18px;background:#fff;border:1px solid #dce4db;border-radius:18px;position:sticky;top:18px}.preview-title{display:flex;justify-content:space-between;margin-bottom:14px}.preview-title span{font-size:12px;color:#637267}canvas{display:block;width:100%;max-height:540px;object-fit:contain;background:#e8eee4;border-radius:12px;margin:0 auto 16px}.primary{width:100%;background:#245b3a;color:#fff;margin-top:18px}.primary:hover:not(:disabled){background:#18482c}.download{display:block;text-decoration:none;background:#e2efdd;margin-top:12px}progress{width:100%;accent-color:#34764d;margin-top:14px}#status{font-size:13px}#gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.thumb img{width:100%;height:90px;object-fit:cover;border-radius:8px}.thumb button{padding:4px;width:100%;font-size:12px}.audio-box{padding:12px;background:#f5f7f3;border-radius:10px;margin:10px 0}.audio-box .row{margin:8px 0}.audio-box button{font-size:12px}footer{text-align:center;padding:26px;font-size:12px;color:#637267}[hidden]{display:none!important}@media(max-width:700px){main{padding:22px 14px}.workspace{grid-template-columns:1fr}.preview-card{position:static}aside{grid-row:1}canvas{max-height:380px}h1 br{display:none}fieldset{padding:15px}.row{flex-wrap:wrap}.row>*{flex-basis:120px}header{padding:15px}header span{font-size:11px}}

.editor-tabs{grid-column:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;position:sticky;top:0;z-index:3;background:#f4f6f2;padding:10px 0;align-self:start}
.editor-tabs button{padding:10px 4px;font-size:13px;white-space:nowrap}
.editor-tabs [aria-selected=true]{background:#245b3a;color:white;border-color:#245b3a}
.editor-tabs button:focus-visible{outline:3px solid #81ad8c;outline-offset:2px}
.editor{grid-column:1;grid-row:2}.workspace>aside{grid-column:2;grid-row:1 / span 2}.workspace{row-gap:8px;align-items:start}.intro{margin-bottom:18px}h1{font-size:clamp(25px,3vw,34px)}
@media(max-width:700px){.workspace>aside{grid-column:1;grid-row:3}.editor-tabs{grid-row:1}.editor{grid-row:2}.editor-tabs button{font-size:12px}.intro{margin-bottom:10px}#gallery{max-height:280px;overflow:auto}}

.login-page .primary{background:#ee4d2d;border-color:#ee4d2d;color:#fff}
.login-page .primary:hover:not(:disabled){background:#d63f20;border-color:#d63f20}
.login-page #switch-mode{width:100%;margin-top:12px}
.google-login{background:#fff;border:1px solid #dce4db;border-radius:17px;padding:20px}
.google-login button{width:100%}