:root{font-family:Arial, sans-serif;color:#172a3a;background:#f4f3ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1220px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:28px 42px;border-bottom:1px solid #dcdedb}.brand{font-size:27px;font-weight:900;letter-spacing:-1px;text-decoration:none;color:#12334b}.brand span{color:#d96525}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:6px}.format{font-size:11px;letter-spacing:1px;color:#697781}main{padding:45px 42px}.intro{margin-bottom:32px}.eyebrow{font-size:11px;letter-spacing:2px;color:#b95a29;font-weight:bold}h1{font-size:43px;line-height:1.08;letter-spacing:-1.8px;margin:18px 0}p{line-height:1.6}.intro>p:last-child{max-width:510px;font-size:14px;color:#64717c}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}.card{background:white;border:1px solid #e0e2de;border-radius:14px;padding:24px;margin-bottom:16px}.step{display:flex;align-items:center;gap:12px;margin-bottom:20px}.step>span{font-size:11px;font-weight:bold;color:#b25b2a;background:#fbefe5;border-radius:50%;padding:9px}h2{font-size:16px;margin:0}button,input,textarea{font:inherit}button,a.download{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #e78143;outline-offset:3px}.upload{display:flex;flex-direction:column;gap:10px;background:#fafbf9;border:1px dashed #adb9b8;border-radius:9px;padding:26px 20px;text-align:center}.upload>span{color:#76838b;font-size:12px}.upload input{max-width:100%;font-size:12px;margin:8px auto 0}.hint{font-size:11px;color:#75818a;margin:13px 0 0;overflow-wrap:anywhere}.file-label{display:flex;flex-direction:column;gap:10px;font-size:12px}.file-label input{width:100%;font-size:12px}.sample-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:20px 0;font-size:11px;color:#76838b}.sample-row button{border:1px solid #d8dfdf;background:#fff;border-radius:5px;padding:6px 10px;color:#274455;font-size:11px}.editor-label{font-size:11px;display:block;margin-bottom:8px}textarea{display:block;width:100%;height:250px;resize:vertical;border:1px solid #dce2e3;border-radius:8px;background:#f8fafb;padding:14px;font-family:Consolas,monospace;font-size:12px;line-height:1.6;color:#284559}.primary{display:flex;width:100%;justify-content:space-between;padding:18px 22px;border:0;border-radius:9px;background:#173f54;color:#fff;font-weight:bold;font-size:14px}.primary:disabled{opacity:.6;cursor:wait}#status{font-size:13px;min-height:24px;overflow-wrap:anywhere}.preview-panel{background:#e7ebe7;border-radius:16px;padding:24px;position:sticky;top:24px}.preview-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.preview-heading>span{font-size:11px;color:#6d7b7e;border:1px solid #becbc8;border-radius:5px;padding:4px 8px}.preview{aspect-ratio:4/5;background:#dbe2df;border:1px solid #cbd6d2;border-radius:6px;overflow:hidden;display:grid;place-items:center}.preview img{width:100%;display:block}.preview img[hidden],[hidden]{display:none!important}#empty{text-align:center;padding:28px;color:#6f817f}#empty h3{font-size:15px;color:#46605d}#empty p{font-size:12px;max-width:240px;margin:auto}.placeholder-icon{font-size:45px;color:#8ca49c}.download{display:block;background:#fff;border:1px solid #bbc9c5;padding:16px;text-decoration:none;color:#173f54;text-align:center;border-radius:8px;font-size:14px;font-weight:bold;margin-top:18px}.preview-note{text-align:center;font-size:11px;color:#75817c;margin-bottom:0}footer{display:flex;justify-content:space-between;padding:25px 42px;border-top:1px solid #dcdedb;font-size:11px;letter-spacing:1px;color:#83908e}footer span{letter-spacing:0}@media(max-width:760px){header{padding:22px}.format{font-size:9px}main{padding:28px 20px}h1{font-size:36px}.workspace{grid-template-columns:1fr;gap:20px}.preview-panel{position:static}.card{padding:20px}footer{padding:24px 20px}.preview{max-width:440px;margin:auto}}@media(prefers-reduced-motion:no-preference){button,a.download{transition:background .15s}button:hover:not(:disabled){filter:brightness(.94)}}


/* Touch-first studio; wider screens retain the two-column workspace. */
html{scroll-padding-top:80px}
body{padding-bottom:env(safe-area-inset-bottom)}
.workspace>*{min-width:0}
button,input,textarea,a.download{touch-action:manipulation}
button,input[type=file]::file-selector-button{min-height:44px}
input[type=file]::file-selector-button{font:inherit;border:1px solid #c5d1ce;background:white;border-radius:8px;padding:10px 14px;margin-right:10px;color:#173f54;cursor:pointer}
textarea{font-size:16px}
#scene-preview{width:100%;max-height:180px;object-fit:contain;border-radius:8px;background:#dbe2df}
.sample-row button{min-width:76px;font-size:14px}
.upload,.file-label{font-size:14px}
.upload input,.file-label input{font-size:14px}
.hint,.preview-note{font-size:13px}
#status{font-size:14px}
@media(max-width:760px){
 header{padding:16px 18px;padding-top:max(16px,env(safe-area-inset-top));background:#f4f3ef}
 .brand{font-size:23px}.brand small{font-size:8px;letter-spacing:2px}
 .format{font-size:10px;letter-spacing:0;max-width:95px;text-align:right;line-height:1.6}
 main{padding:20px 14px 24px}.intro{margin-bottom:22px}.eyebrow{font-size:10px;margin:0 0 10px}
 h1{font-size:29px;letter-spacing:-1px;line-height:1.15;margin:10px 0}
 .intro>p:last-child{font-size:14px;margin:10px 0 0}
 .workspace{gap:18px}.card{padding:18px;border-radius:16px;margin-bottom:12px}
 .step{margin-bottom:16px}h2{font-size:17px}
 .upload{padding:18px 12px;gap:8px}.upload>span{font-size:13px}
 .sample-row{gap:8px;margin:16px 0}.sample-row>span{flex-basis:100%;font-size:13px}
 .editor-label{font-size:13px}textarea{height:200px;padding:12px;line-height:1.5}
 .primary{position:sticky;bottom:max(12px,env(safe-area-inset-bottom));z-index:2;min-height:54px;font-size:16px;box-shadow:0 4px 18px #173f5433}
 #status{margin:12px 4px;min-height:0}
 .preview-panel{padding:18px;border-radius:16px;scroll-margin-top:18px}
 #empty{padding:22px}#empty h3{font-size:16px}#empty p{font-size:14px}
 .download{min-height:52px;font-size:16px;padding:16px}
 footer{padding:20px 18px;gap:12px;font-size:10px}
}