*{box-sizing:border-box}
:root{--bg:#0e0e0e;--fg:#f7f7f7;--muted:#b7b7b7;--panel:#181818;--accent:#69f0ae}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:820px;margin:24px auto;padding:16px}
h1{font-weight:700;font-size:20px;margin:0 0 12px 0}
canvas{display:block;width:100%;max-width:720px;height:auto;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.35);outline:none;border:1px solid #2a2a2a;background:#000}
.hint{margin-top:8px;color:var(--muted);font-size:14px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:16px}
.modal.hidden{display:none}
.modal-dialog{background:#fff;color:#111;width:min(1100px,95vw);height:min(85vh,900px);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden}
.modal-header{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid #eaeaea;background:#fafafa}
.modal-header .title{font-weight:700}
.modal-header .spacer{flex:1}
.modal-header .link{color:#0b5bd3;text-decoration:underline}
.modal-header .btn{appearance:none;border:1px solid #ddd;border-radius:10px;padding:6px 10px;background:#fff;cursor:pointer}
.modal-header .btn:hover{background:#f4f4f4}
#resumeFrame{flex:1;border:0}