:root{--crust: #11111b;--mantle: #181825;--base: #1e1e2e;--surface: #313244;--overlay: #6c7086;--subtext: #a6adc8;--text: #cdd6f4;--mauve: #cba6f7;--green: #a6e3a1;--yellow: #f9e2af;--red: #f38ba8}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--crust);color:var(--text);font-family:SFMono-Regular,Consolas,Liberation Mono,monospace}main{max-width:1100px;min-height:100vh;margin:auto;padding:24px}header,.result-heading,.source-card,.code-card{display:flex;align-items:center;justify-content:space-between}header{padding-bottom:20px;border-bottom:1px solid var(--surface)}header .brand{color:var(--mauve);font-size:15px;font-weight:700;text-decoration:none}header .brand:before{color:var(--green);content:"➜  "}.brand span{color:var(--text)}header p,footer,small{color:var(--subtext);font-size:11px}.hero{max-width:710px;padding:86px 0 42px}.eyebrow{color:var(--green);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.eyebrow i{display:inline-block;width:8px;height:8px;margin-right:7px;background:var(--green);border-radius:50%;box-shadow:0 0 10px #a6e3a177}h1{margin:15px 0 16px;color:var(--text);font-family:inherit;font-size:clamp(38px,6vw,66px);line-height:1.07;letter-spacing:-3px}h1:before{color:var(--mauve);content:"> "}h1 em{color:var(--mauve);font-style:normal}.intro{max-width:610px;margin:0;color:var(--subtext);font-size:14px;line-height:1.7}.intro:before{color:var(--overlay);content:"// "}.dropzone{position:relative;min-height:280px;border:1px solid var(--surface);border-radius:6px;background:var(--base);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;transition:.2s;box-shadow:inset 0 0 0 1px #45475a33}.dropzone:before{position:absolute;top:0;left:0;color:var(--overlay);content:" file input ";padding:7px 10px;border-right:1px solid var(--surface);border-bottom:1px solid var(--surface);font-size:10px}.dropzone.is-dragging{border-color:var(--mauve);background:#29243d;box-shadow:0 0 0 3px #cba6f722}.dropzone input{display:none}.upload-mark{width:41px;height:41px;display:grid;place-items:center;margin-bottom:15px;border:1px solid var(--green);border-radius:5px;color:var(--green);background:#a6e3a10f;font-size:23px;line-height:1}.dropzone h2{margin:0;color:var(--text);font-size:16px;letter-spacing:-.5px}.dropzone h2:before{color:var(--mauve);content:"$ "}.dropzone p{margin:7px 0 18px;color:var(--subtext);font-size:13px}.dropzone button,.text-button{padding:0;border:0;background:none;color:var(--mauve);font:inherit;text-decoration:underline;cursor:pointer}.dropzone button:disabled{cursor:wait;color:var(--overlay)}.error{margin-top:15px;color:var(--red);font-size:12px}.workspace{padding-top:14px}.source-card{padding:10px 13px;border:1px solid var(--surface);border-radius:5px;background:var(--base)}.source-card img{width:38px;height:38px;object-fit:cover;border-radius:4px}.source-card div{display:grid;gap:3px;margin-right:auto;margin-left:11px}.source-card span,.asset span{color:var(--subtext);font-size:11px}.source-card strong{color:var(--text);font-size:11px;font-weight:400}.result-heading{margin:38px 0 18px;align-items:end}.result-heading h2{margin:6px 0 0;color:var(--text);font-size:22px;letter-spacing:-1px}.result-heading h2:before{color:var(--mauve);content:"$ "}.download-all,.code-card button{border:1px solid var(--mauve);border-radius:4px;background:transparent;color:var(--mauve);padding:10px 13px;font:inherit;font-size:11px;text-decoration:none;cursor:pointer;transition:.15s}.download-all:hover,.code-card button:hover{background:var(--mauve);color:var(--base)}.assets{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.asset{position:relative;min-height:162px;padding:12px;border:1px solid var(--surface);border-radius:5px;color:var(--text);background:var(--base);text-decoration:none;transition:.15s}.asset:hover{border-color:var(--mauve);background:#29243d;transform:translateY(-2px)}.asset:hover b{color:var(--green)}.icon-preview{height:84px;display:grid;place-items:center;margin-bottom:10px;background:var(--mantle);background-image:linear-gradient(45deg,#313244 25%,transparent 25%),linear-gradient(-45deg,#313244 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#313244 75%),linear-gradient(-45deg,transparent 75%,#313244 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}.icon-preview img{max-width:64px;max-height:64px}.asset small{display:block;margin-top:5px}.asset b{position:absolute;right:12px;bottom:10px;color:var(--overlay)}.code-card{position:relative;flex-wrap:wrap;gap:18px;margin-top:31px;padding:22px;border:1px solid var(--surface);border-radius:6px;background:var(--base)}.code-card:before{position:absolute;top:-1px;left:14px;transform:translateY(-50%);padding:0 6px;color:var(--yellow);background:var(--crust);content:"output";font-size:10px}.code-card h3{margin:6px 0 0;font-size:14px}.code-card h3:before{color:var(--mauve);content:"# "}.code-card code{color:var(--yellow);font-family:inherit;font-size:.9em}.code-card pre{width:100%;overflow:auto;margin:0;padding:15px;border:1px solid var(--surface);border-radius:4px;background:var(--mantle);color:var(--green);font:11px/1.8 inherit}footer{display:flex;justify-content:space-between;margin-top:43px;padding-top:18px;border-top:1px solid var(--surface)}footer span:first-child:before{color:var(--green);content:"● "}footer span:last-child:before{content:"// ";color:var(--overlay)}@media(max-width:760px){main{padding:18px}.hero{padding:65px 0 33px}h1{font-size:39px;letter-spacing:-2px}.assets{grid-template-columns:repeat(2,1fr)}.result-heading{align-items:start;gap:16px;flex-direction:column}.code-card{align-items:start;flex-direction:column}.code-card button{align-self:stretch}header p{display:none}}