.app-header{position:relative;z-index:30;padding:0 26px;background:var(--panel);box-shadow:0 1px 0 #00000008}
.brand-lockup{display:flex;align-items:center;gap:12px;min-width:0}
.brand-lockup .brandmark{display:grid;place-items:center;width:43px;height:43px;padding:0;transform:none;border:1px solid var(--line);border-radius:12px;background:var(--bg);flex-shrink:0}
.brandmark svg{width:35px;height:35px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round}
.brand-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.brand-copy .brand{font-size:21px;letter-spacing:-.65px;line-height:1.1;font-weight:750}
.creator-credit{position:relative;line-height:1}
#creator-toggle{display:flex;align-items:center;gap:4px;border:0;padding:2px 0;background:transparent;color:var(--muted);font-size:11px;line-height:1.3;border-radius:2px}
#creator-toggle>span{color:var(--accent);font-weight:650}
#creator-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .15s}
#creator-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
#creator-toggle:hover>span{text-decoration:underline;text-underline-offset:3px}
#creator-links{position:absolute;top:calc(100% + 15px);left:0;width:300px;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--panel);box-shadow:0 14px 40px #0004;line-height:1.5}
.creator-heading{padding:11px 12px 14px;border-bottom:1px solid var(--line);margin-bottom:5px}
.creator-heading strong{display:block;font-size:18px;letter-spacing:-.3px;margin:2px 0 4px}
.creator-heading p{font-size:12px;margin:0}
.creator-link{display:flex;align-items:center;gap:12px;padding:12px;border-radius:7px;text-decoration:none;color:var(--ink)}
.creator-link:hover{background:var(--bg)}
.creator-link>svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.5;flex-shrink:0}
.creator-link>span{flex:1}
.creator-link strong{display:block;font-size:14px;font-weight:650}
.creator-link small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.creator-link .external-arrow{font-size:19px;color:var(--muted);flex:0}
.header-tools{display:flex;align-items:center;gap:24px}
.app-label{font-size:10px;font-weight:650;letter-spacing:1.8px;color:var(--muted)}
.theme-switch{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.theme-switch button{display:flex;align-items:center;gap:6px;border:1px solid transparent;background:transparent;padding:6px 9px;font-size:12px;color:var(--muted);border-radius:5px;line-height:1.4}
.theme-switch button[aria-pressed=true]{color:var(--ink);background:var(--panel);border-color:var(--line);box-shadow:0 1px 3px #0001}
.theme-switch button:hover{color:var(--ink)}
.theme-switch svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.intro{margin:0 0 22px;padding:0 0 19px;border-bottom:1px solid var(--line)}
.intro h1{font-family:'Segoe UI',Arial,sans-serif;font-size:23px;line-height:1.2;font-weight:650;letter-spacing:-.55px;margin:0 0 7px}
.intro p{font-size:12px;line-height:1.5;margin:0;color:var(--muted)}
.workflow-heading{letter-spacing:1.35px}
@media(max-width:720px){.app-header{padding:0 16px;gap:8px}.app-label{display:none}.brand-copy .brand{font-size:19px}.brand-lockup{gap:8px}.brand-lockup .brandmark{width:36px;height:36px;border-radius:9px}.brandmark svg{width:29px;height:29px}.header-tools{gap:0}.theme-switch button{padding:6px 7px;font-size:11px}.theme-switch button svg{width:12px;height:12px}.theme-switch button{gap:4px}}
@media(max-width:480px){.app-header{padding:0 12px}.brand-lockup .brandmark{display:none}.brand-copy .brand{font-size:18px}.theme-switch button{padding:6px}.theme-switch svg{display:none}#creator-links{position:fixed;left:12px;right:12px;top:65px;width:auto;max-height:calc(100dvh - 80px);overflow:auto}}