/* Shared visual foundation. scripts/sync-design.ps1 copies this into web/app. */
:root{--ink:#202321;--muted:#6f7471;--paper:#f5f6f3;--surface:#fff;--line:#e3e5e0;--canvas:#e9ece7;--signal:#bce68a;--green:#252b26;--orange:#ba662f;--notch:#202321;--notch-ink:#f6f8f2;color-scheme:light}
:root[data-theme=dark]{--ink:#f0f2ed;--muted:#999f98;--paper:#191c19;--surface:#202420;--line:#343a34;--canvas:#101310;--signal:#bce68a;--green:#dce4d5;--orange:#eeb57e;--notch:#101310;--notch-ink:#f0f2ed;color-scheme:dark}
body{font-family:Arial,Helvetica,sans-serif;background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--muted);outline-offset:4px}.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}
.shell-header{position:relative;height:64px;display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-radius:24px 24px 0 0;padding:0 22px;z-index:30;flex-shrink:0}.shell-page{color:var(--muted);font-size:12px;letter-spacing:.02em}.shell-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.notch-menu{position:absolute;top:0;left:50%;transform:translateX(-50%);width:236px;border-radius:0 0 23px 23px;background:var(--notch);color:var(--notch-ink);box-shadow:0 8px 20px #00000008;z-index:40}.notch-menu:before,.notch-menu:after{content:'';position:absolute;top:0;width:22px;height:22px;background:transparent;pointer-events:none}.notch-menu:before{right:100%;border-radius:0 22px 0 0;box-shadow:8px -8px 0 8px var(--notch)}.notch-menu:after{left:100%;border-radius:22px 0 0 0;box-shadow:-8px -8px 0 8px var(--notch)}.notch-menu summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;cursor:pointer;min-height:58px}.notch-menu summary::-webkit-details-marker{display:none}.notch-brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;letter-spacing:-.6px}.notch-brand .brand-logo{width:22px;height:24px}.notch-brand .brand-dot{display:none}.notch-menu .menu-chevron{opacity:.55;transition:transform .2s}.notch-menu[open] .menu-chevron{transform:rotate(180deg)}.notch-menu nav{padding:3px 12px 14px;display:flex;flex-direction:column}.notch-menu nav a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;border-radius:10px;font-size:12px;padding:12px}.notch-menu nav a:hover,.notch-menu nav a[aria-current]{background:#ffffff12}.notch-menu nav span{font-size:10px;opacity:.45}.theme-switch{position:relative;display:flex;border:1px solid var(--line);border-radius:30px;background:var(--paper);padding:3px;isolation:isolate}.theme-switch button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent!important;color:var(--muted);z-index:1;cursor:pointer}.theme-switch button[aria-pressed=true]{color:var(--ink)}.theme-thumb{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:var(--surface);box-shadow:0 1px 4px #0001;transition:transform .2s}.theme-switch[data-mode=auto] .theme-thumb{transform:translateX(28px)}.theme-switch[data-mode=dark] .theme-thumb{transform:translateX(56px)}.ai-connection-button{border:0!important;background:transparent!important;color:var(--muted)!important;font-size:11px;font-weight:400;padding:7px}.primary,:root[data-theme=dark] .primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}.primary:hover,:root[data-theme=dark] .primary:hover{background:var(--muted);border-color:var(--muted)}
@media(max-width:700px){.shell-header{padding:0 12px;height:104px;align-items:flex-end;padding-bottom:12px}.notch-menu{width:208px}.notch-menu summary{padding:13px 20px;min-height:50px}.notch-brand{font-size:15px}.shell-actions{gap:4px}.shell-page{font-size:11px}.theme-switch button,.theme-thumb{width:25px;height:25px}.theme-switch[data-mode=auto] .theme-thumb{transform:translateX(25px)}.theme-switch[data-mode=dark] .theme-thumb{transform:translateX(50px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.notch-menu{clip-path:inset(0 -30px -500px -30px)}
/* Icon notch: a single horizontal row, opened by hover, focus or tap. */
.notch-menu{width:84px;height:62px;transition:width .42s cubic-bezier(.2,.8,.2,1);border-radius:0 0 24px 24px}.notch-menu[data-expanded=true]{width:510px}.notch-toggle,:root[data-theme=dark] .notch-toggle{position:absolute;left:50%;top:4px;transform:translateX(-50%);display:grid;place-items:center;width:54px;height:50px;padding:0;background:transparent;border:0;border-radius:16px;color:var(--notch-ink);z-index:2;cursor:pointer}.notch-toggle:hover,:root[data-theme=dark] .notch-toggle:hover{background:#ffffff10}.notch-toggle .brand-logo{width:27px;height:29px}.notch-menu nav{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 60px 1.2fr 1fr;align-items:center;gap:4px;padding:7px 15px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .15s,visibility .15s}.notch-menu[data-expanded=true] nav{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .22s .12s,visibility 0s}.notch-menu nav a{justify-content:center;font-size:14px;white-space:nowrap;padding:12px 8px;opacity:0;transform:translateY(-5px);transition:opacity .2s,transform .3s,translate .15s}.notch-menu[data-expanded=true] nav a{opacity:1;transform:translateY(0)}.notch-menu[data-expanded=true] nav a:nth-child(2){transition-delay:.03s}.notch-menu[data-expanded=true] nav a:nth-child(4){transition-delay:.06s}.notch-menu[data-expanded=true] nav a:nth-child(5){transition-delay:.09s}.shell-page{font-size:14px}.ai-connection-button,:root[data-theme=dark] .ai-connection-button{border:1px solid var(--line)!important;background:var(--paper)!important;color:var(--ink)!important;font-size:13px;font-weight:500;padding:10px 15px;border-radius:22px;box-shadow:0 1px 2px #00000005}.ai-connection-button:hover,:root[data-theme=dark] .ai-connection-button:hover{background:var(--canvas)!important;border-color:var(--muted)!important}
.magnetic-cursor{position:fixed;top:0;left:0;width:0;height:0;z-index:99999;pointer-events:none;opacity:0;mix-blend-mode:difference;color:white;transform:translate3d(var(--x,0px),var(--y,0px),0)}.magnetic-cursor.visible{opacity:1}.magnetic-cursor i{position:absolute;width:5px;height:5px;left:-2.5px;top:-2.5px;background:white;border-radius:50%}.magnetic-cursor b{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border:1px solid white;border-radius:50%;transform:translate(var(--mx,0px),var(--my,0px));transition:width .18s,height .18s,left .18s,top .18s,opacity .18s;opacity:.65}.magnetic-cursor.over-control b{width:38px;height:38px;left:-19px;top:-19px;opacity:1}.magnetic-cursor.pressed b{width:18px;height:18px;left:-9px;top:-9px}.custom-pointer,.custom-pointer a,.custom-pointer button,.custom-pointer summary{cursor:none!important}.pill-button,.quiet-link,.maker-link,.ai-connection-button{transition:translate .15s,background .2s}
@media(max-width:1100px){.shell-header{height:114px;align-items:flex-end;padding-bottom:12px}.notch-menu[data-expanded=true]{width:min(510px,calc(100vw - 76px))}.robot-editor .editor-frame{height:calc(100dvh - 172px)}}
@media(max-width:600px){.notch-menu{width:76px;height:58px}.notch-menu[data-expanded=true]{width:calc(100vw - 54px)}.notch-toggle{width:42px;height:46px}.notch-toggle .brand-logo{width:24px;height:26px}.notch-menu nav{grid-template-columns:1fr 1fr 42px 1.2fr 1fr;gap:0;padding:6px}.notch-menu nav a{font-size:12px;padding:10px 4px}.shell-page{font-size:13px}.ai-connection-button{font-size:12px;padding:8px 12px}}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.magnetic-cursor{display:none}.custom-pointer,.custom-pointer a,.custom-pointer button,.custom-pointer summary{cursor:auto!important}}
.notch-menu{user-select:none}
