:root{--shell-950:#131316;--shell-900:#1a1a1f;--shell-850:#212127;--shell-800:#2a2a31;--shell-700:#3a3a43;--accent:#c8f542;--text:#e4e4e7;--muted:#a1a1aa;--error:#fca5a5;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--shell-950);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;line-height:1.5}a{color:inherit}main{max-width:1100px;margin:0 auto;padding:0 16px}.topbar{justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto;padding:20px 16px;display:flex}.brand{font-size:18px;font-weight:700;text-decoration:none}.topbar-link{color:var(--muted);font-size:14px;text-decoration:none}.topbar-link:hover{color:var(--accent)}.hero{text-align:center;padding:48px 0 32px}h1{letter-spacing:-.02em;margin:0 0 16px;font-size:clamp(34px,6vw,56px);line-height:1.1}.accent{color:var(--accent)}.lede{color:var(--muted);max-width:560px;margin:0 auto 36px;font-size:18px}.dropzone{border:2px dashed var(--shell-700);background:var(--shell-900);cursor:pointer;border-radius:18px;flex-direction:column;align-items:center;gap:14px;max-width:720px;margin:0 auto;padding:56px 24px;transition:border-color .15s,background .15s;display:flex}.dropzone:hover,.dropzone.is-dragging{border-color:var(--accent);background:var(--shell-850)}.dropzone.is-busy{opacity:.6;pointer-events:none}.dropzone-icon{width:56px;height:56px;color:var(--accent)}.dropzone-hint{color:var(--muted);font-size:14px}.button{font:inherit;cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;padding:12px 22px;font-size:15px;font-weight:600;display:inline-flex}.button:disabled{opacity:.5;cursor:wait}.button-primary{background:var(--accent);color:var(--shell-950)}.button-secondary{background:var(--shell-800);color:var(--text);border:1px solid var(--shell-700)}.button-wide{width:100%}.button-text{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;font-size:14px;text-decoration:underline}.error{color:var(--error);max-width:720px;margin:16px auto 0}.result{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:28px;padding:8px 0 48px;display:grid}.preview{background:#fff;border-radius:12px;max-height:80vh;overflow:hidden auto}.preview iframe{transform-origin:0 0;border:0;width:800px;height:600px;display:block}.panel{background:var(--shell-900);border:1px solid var(--shell-800);border-radius:16px;flex-direction:column;gap:12px;padding:24px;display:flex;position:sticky;top:16px}.panel-label{color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin:0;font-size:13px;font-weight:600}.panel-subject{overflow-wrap:anywhere;margin:0;font-size:18px;line-height:1.3}.panel-sender{color:var(--muted);overflow-wrap:anywhere;margin:0 0 4px;font-size:14px}.toggle{color:var(--muted);cursor:pointer;align-items:center;gap:10px;margin-bottom:4px;font-size:14px;display:flex}.toggle input{accent-color:var(--accent);width:16px;height:16px}.panel-status{min-height:1.5em;color:var(--muted);margin:0;font-size:14px}.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:32px 0;display:grid}.card{text-align:center;background:var(--shell-900);border:1px solid var(--shell-800);border-radius:16px;padding:28px 24px}.card-icon{width:44px;height:44px;color:var(--accent);background:#c8f5421a;border-radius:12px;justify-content:center;align-items:center;margin-bottom:16px;display:inline-flex}.card-icon svg{width:24px;height:24px}.card h3,.howto h3{margin:0 0 8px;font-size:17px}.card p,.howto p{color:var(--muted);margin:0;font-size:15px}.howto{padding:32px 0 64px}.howto h2{text-align:center;margin:0 0 24px;font-size:28px}.howto-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;display:grid}.footer{border-top:1px solid var(--shell-800);text-align:center;color:var(--muted);padding:24px 16px;font-size:14px}.footer a{color:var(--accent)}@media (width<=820px){.result,.cards,.howto-grid{grid-template-columns:minmax(0,1fr)}.panel{order:-1;position:static}.hero{padding-top:24px}}