:root {
  font-family: -apple-system, BlinkMacSystemFont, "Anthropic Sans Web Text", "SF Pro Text", "PingFang SC", sans-serif;
  font-size: 16px; color: var(--ink); color-scheme: light;
  --text-xs: 12px; --text-sm: 13px; --text-ui: 14px; --text-title: 15px; --text-body: 16px; --text-heading: 28px;
  --panel: rgba(255,253,248,.48); --sidebar: rgba(231,224,210,.24); --header-height: 60px; --nav-row: 44px;
  --bg: #f5f1e8; --surface: rgba(255,253,248,.82); --soft: #eae5da; --ink: #141413;
  --muted: #79756c; --line: rgba(86,77,61,.14); --accent: #c6613f; --accent-soft: #c6613f12;
  --danger: #ba4c45; --code: #f0ebe2; --edge: rgba(245,241,232,.95);
  --glass: linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,253,248,.24) 48%,rgba(246,239,226,.38));
  --glass-border: rgba(255,255,255,.62);
  --glass-rim: linear-gradient(135deg,#ffffffed 0%,#ffffff30 29%,#9b815126 53%,#ffffffb3 78%,#ffffff45);
  --glass-light: rgba(255,255,255,.78);
  --glass-shadow: 0 2px 4px #3d2d1705,0 8px 24px #3d2d170d,inset 0 1px 1px #ffffff99,inset 0 -1px 1px #6e543510;
  --glass-blur: 18px; --spring: cubic-bezier(.2,.85,.2,1);
  --safe: env(safe-area-inset-bottom,0px); --top: env(safe-area-inset-top,0px); --viewport-height: 100dvh; --viewport-top: 0px;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--ink); line-height: 1.5; }
button,input,textarea,select { font: inherit; }
button,a,input,textarea,summary { -webkit-tap-highlight-color: transparent; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; color: var(--ink); background: transparent; font-size: var(--text-ui); font-weight: 500; cursor: pointer; transition: background-color .18s,box-shadow .22s,transform .22s var(--spring),border-color .22s; }
button:disabled { opacity: .42; cursor: default; }
button:active:not(:disabled) { transform: scale(.98); }
button:hover:not(:disabled) { background-color: rgba(104,86,61,.07); }
button:focus-visible,a:focus-visible,summary:focus-visible { outline: 3px solid #c68b70; outline-offset: 3px; }
button.primary { background: var(--accent); color: white; box-shadow: 0 4px 12px #a04b2920; }
button.primary:hover:not(:disabled) { background: #ae5033; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none!important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { width: 36px; height: 36px; padding: 8px; border-radius: 10px; color: var(--muted); }
.quiet { padding: 6px 8px; color: var(--muted); font-size: var(--text-sm); font-weight: 450; }
.secondary { background: var(--panel); border-color: var(--line); }
.wide { width: 100%; }
.error { color: var(--danger); font-size: var(--text-sm); line-height: 1.65; }
.error:empty { display: none; }
.site-header,.workspace-nav,.chat-header,.composer-box,.jump-latest,.list-modes,.composer-menu,dialog { isolation: isolate; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(145%); backdrop-filter: blur(var(--glass-blur)) saturate(145%); }
/* The rim and moving light sit above the material, without covering its contents. */
.site-header::before,.workspace-nav::before,.chat-header::before,.composer-box::before,.list-modes::before,.composer-menu::before,dialog::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse 180px 120px at var(--glass-x,30%) var(--glass-y,0%),var(--glass-light),transparent 75%); opacity: .12; transition: opacity .55s ease; }
.site-header::after,.workspace-nav::after,.chat-header::after,.composer-box::after,.list-modes::after,.composer-menu::after,dialog::after { content: ''; position: absolute; z-index: 2; inset: -1px; pointer-events: none; border-radius: inherit; padding: 1px; background: var(--glass-rim); -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; }
@media (hover:hover) { .glass-hover::before { opacity: .48; } }
.glass-pressed::before { opacity: .8; transition-duration: .12s; }
.site-header { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 7; height: var(--header-height); width: 100%; margin: 0; padding: 0 24px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: color-mix(in srgb,var(--bg) 90%,transparent); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions button { color: var(--ink); }
.header-actions .icon-button { width: 34px; height: 34px; padding: 8px; }
.privacy-cover { display: none; }
.privacy-covered #workspace,.privacy-covered .site-header { visibility: hidden; }
.privacy-covered .privacy-cover { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 100; background: var(--bg); color: var(--muted); }
.privacy-cover h2 { margin: 8px 0 0; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.4px; }
.privacy-cover p { margin: 0; font-size: 14px; }
.security-entry { display: flex; gap: 6px; min-height: 34px; padding: 6px 9px; margin: 0; border-radius: 9px; color: var(--muted); font-size: var(--text-sm); font-weight: 450; }
.security-entry > span { flex: none; }
.security-entry .icon { width: 16px; height: 16px; }
.security-entry .icon:last-child { width: 16px; height: 16px; }
.brand { display: flex; gap: 9px; align-items: center; font-size: 17px; font-weight: 620; letter-spacing: -.4px; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: white; background: linear-gradient(145deg,#51483b,#2c2822); box-shadow: inset 0 1px 0 #ffffff38; }
.brand-mark .icon { width: 20px; height: 20px; stroke-width: 1.8; }
.signed-out .site-header,.booting .site-header { display: none; }
body.signed-out,body.booting { min-height: 100svh; background: radial-gradient(ellipse at 12% 18%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 47%),radial-gradient(ellipse at 88% 30%,#d1b16b14,transparent 42%),radial-gradient(ellipse at 52% 95%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 48%),var(--bg); }
body.signed-out > main,body.booting > main { display: grid; place-items: center; min-height: 100svh; padding: max(32px,var(--top)) 0 max(24px,var(--safe)); }
.login { position: relative; isolation: isolate; width: calc(100% - 48px); max-width: 880px; margin: auto; --auth-metal: linear-gradient(145deg,#fffefaed,#e9e3d7c7); --auth-screen: linear-gradient(145deg,#fdfbf5,#eee9de); --auth-edge: #fffdf8; --auth-shadow: #6753381a; --auth-sheen: #ffffff8c; --auth-action: #b85a3a; --auth-action-ink: #fff; }
.login-surround { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.surround-trails { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: color-mix(in srgb,var(--accent) 21%,transparent); stroke-width: 1; }
.surround-trails path { vector-effect: non-scaling-stroke; }
.surround-trails .trail-soft { stroke: color-mix(in srgb,var(--ink) 7%,transparent); }
.surround-orb { position: absolute; width: 250px; height: 250px; border: 1px solid color-mix(in srgb,var(--glass-border) 70%,transparent); border-radius: 50%; background: radial-gradient(circle at 28% 24%,var(--glass-border),transparent 44%),radial-gradient(circle at 72% 79%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 65%); box-shadow: inset 0 1px 2px var(--glass-border),inset 0 -10px 30px color-mix(in srgb,var(--accent) 3%,transparent); }
.surround-orb-top { top: -145px; left: calc(50% - 470px); }
.surround-orb-bottom { width: 310px; height: 310px; right: calc(50% - 540px); bottom: -200px; }
.surround-key { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--auth-edge); border-radius: 15px; color: color-mix(in srgb,var(--accent) 65%,var(--muted)); background: var(--auth-metal); box-shadow: 0 9px 25px var(--auth-shadow),inset 0 1px 0 var(--glass-border); transform: rotate(var(--key-angle)); animation: surround-drift 12s ease-in-out infinite; }
.surround-key .icon { width: 22px; height: 22px; stroke-width: 1.4; }
.surround-command { top: calc(50% - 310px); left: calc(50% - 380px); font-size: 27px; --key-angle: -13deg; }
.surround-slash { top: calc(50% - 286px); right: calc(50% - 350px); width: 38px; height: 38px; border-radius: 12px; --key-angle: 14deg; animation-delay: -4s; }
.surround-slash .icon { width: 18px; height: 18px; }
.surround-mac { bottom: calc(50% - 328px); left: calc(50% - 350px); --key-angle: -9deg; animation-delay: -7s; }
.surround-bolt { bottom: calc(50% - 302px); right: calc(50% - 390px); width: 36px; height: 36px; border-radius: 12px; --key-angle: 12deg; animation-delay: -2s; }
.surround-bolt .icon { width: 18px; height: 18px; }
.surround-glint { position: absolute; width: 9px; height: 9px; color: color-mix(in srgb,var(--accent) 45%,transparent); animation: auth-twinkle 7s ease-in-out infinite; }
.surround-glint::before,.surround-glint::after { content: ''; position: absolute; border-radius: 50%; background: currentColor; }
.surround-glint::before { inset: 0 4px; }
.surround-glint::after { inset: 4px 0; }
.glint-top { top: 12%; left: calc(50% - 95px); }
.glint-bottom { bottom: 9%; right: calc(50% - 130px); animation-delay: -3s; }
.login-shell { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 46px; padding: 48px 44px; border: 1px solid var(--glass-border); border-radius: 30px; background: radial-gradient(ellipse at 18% 20%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 55%),linear-gradient(135deg,color-mix(in srgb,var(--surface) 85%,transparent),color-mix(in srgb,var(--panel) 80%,transparent)); box-shadow: 0 24px 80px #49351c0a,inset 0 1px 0 var(--glass-border); -webkit-backdrop-filter: blur(24px) saturate(125%); backdrop-filter: blur(24px) saturate(125%); }
.login-shell::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--glass-rim); -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; }
.login-visual { position: relative; height: 336px; isolation: isolate; }
.auth-halo { position: absolute; z-index: -2; inset: -12px -22px 10px; border-radius: 50%; background: radial-gradient(ellipse at 65% 35%,#d4b06d30,transparent 62%),radial-gradient(ellipse at 25% 70%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 64%); filter: blur(14px); animation: auth-halo-breathe 12s ease-in-out infinite; }
.auth-grid { position: absolute; z-index: -1; inset: -8px; background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse,#0009,transparent 72%); mask-image: radial-gradient(ellipse,#0009,transparent 72%); opacity: .45; }
.auth-orbit { position: absolute; z-index: -1; top: 47%; left: 50%; border: 1px solid color-mix(in srgb,var(--ink) 7%,transparent); border-radius: 50%; transform: translate(-50%,-50%); }
.auth-orbit::after { content: ''; position: absolute; width: 5px; height: 5px; top: 15%; left: 13%; border-radius: 50%; background: color-mix(in srgb,var(--accent) 65%,var(--bg)); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 7%,transparent); }
.auth-orbit-outer { width: 306px; height: 306px; animation: auth-orbit-turn 32s linear infinite; }
.auth-orbit-inner { width: 230px; height: 230px; background: radial-gradient(circle,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%); }
.auth-orbit-inner::after { width: 4px; height: 4px; top: 80%; left: 89%; background: #b49c70; }
.auth-link-line { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 2 7; opacity: .3; animation: auth-link-flow 24s linear infinite; }
.auth-spark { position: absolute; z-index: 2; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 9px color-mix(in srgb,var(--accent) 30%,transparent); animation: auth-twinkle 5s ease-in-out infinite; }
.spark-a { top: 10px; left: 42%; }
.spark-b { bottom: 44px; left: 40%; width: 3px; height: 3px; animation-delay: -2s; }
.spark-c { top: 42%; right: 0; width: 3px; height: 3px; animation-delay: -3.5s; }
.auth-satellite { position: absolute; z-index: 3; top: 48px; left: 4px; display: grid; place-items: center; width: 38px; height: 38px; color: var(--muted); border: 1px solid var(--auth-edge); border-radius: 12px; background: var(--auth-metal); box-shadow: 0 8px 20px var(--auth-shadow); transform: rotate(-13deg); }
.auth-satellite .icon { width: 21px; height: 21px; }
.auth-device { position: absolute; z-index: 1; overflow: hidden; width: 246px; height: 166px; top: 62px; left: 50%; transform: translateX(-50%) rotate(-3deg); border: 1px solid var(--auth-edge); border-radius: 16px; padding: 7px; background: var(--auth-metal); box-shadow: 0 18px 30px var(--auth-shadow),inset 0 0 0 1px var(--line); animation: auth-window-drift 10s ease-in-out infinite; }
.auth-device::after,.auth-phone::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(110deg,transparent 25%,var(--auth-sheen) 48%,transparent 70%); transform: translateX(-130%); animation: auth-glint 13s ease-in-out infinite; }
.auth-window-bar { display: flex; align-items: center; gap: 4px; height: 25px; padding: 0 9px; border-bottom: 1px solid var(--line); background: var(--auth-screen); border-radius: 9px 9px 0 0; }
.auth-window-bar i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb,var(--muted) 35%,transparent); }
.auth-window-bar span { margin: auto; width: 54px; height: 4px; border-radius: 3px; background: var(--line); }
.auth-window-content { height: calc(100% - 25px); padding: 22px 18px; border-radius: 0 0 9px 9px; background: var(--auth-screen); }
.auth-line { display: block; width: 83%; height: 5px; margin-bottom: 11px; border-radius: 3px; background: color-mix(in srgb,var(--ink) 11%,transparent); }
.auth-line:nth-child(2) { width: 58%; background: color-mix(in srgb,var(--accent) 30%,transparent); }
.auth-line:nth-child(3) { width: 70%; }
.auth-caret { display: block; width: 6px; height: 10px; border-radius: 1px; background: var(--accent); opacity: .75; }
.auth-device-base { position: absolute; top: 247px; left: 50%; width: 164px; height: 6px; border-radius: 50%; background: var(--auth-shadow); filter: blur(4px); transform: translateX(-50%); }
.auth-floating { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--auth-edge); border-radius: 14px; background: var(--auth-metal); box-shadow: 0 10px 25px var(--auth-shadow),inset 0 1px 0 var(--glass-border); transform: rotate(var(--float-angle)); animation: auth-card-float 8s ease-in-out infinite; }
.auth-floating > .icon { width: 22px; height: 22px; color: var(--accent); stroke-width: 1.5; }
.auth-floating > span { flex: 1; }
.auth-floating i { display: block; height: 4px; margin: 4px 0; border-radius: 3px; background: color-mix(in srgb,var(--ink) 14%,transparent); }
.auth-floating i:last-child { width: 68%; opacity: .55; }
.auth-floating-chat { top: 26px; right: 0; width: 108px; --float-angle: 8deg; animation-delay: -2s; }
.auth-floating-project { top: 244px; left: -4px; width: 124px; --float-angle: -7deg; animation-delay: -5s; }
.auth-floating-project > .icon { color: #b69a61; }
.auth-phone { position: absolute; z-index: 3; overflow: hidden; top: 152px; right: 5px; width: 78px; height: 147px; padding: 5px; border: 1px solid var(--auth-edge); border-radius: 21px; background: var(--auth-metal); box-shadow: 0 15px 28px var(--auth-shadow),inset 0 0 0 1px var(--line); transform: rotate(9deg); animation: auth-phone-drift 11s ease-in-out infinite; }
.auth-phone::after { animation-delay: -2s; }
.auth-phone-screen { position: relative; height: 100%; padding: 24px 8px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--auth-screen); }
.auth-phone-camera { position: absolute; top: 6px; left: 50%; width: 22px; height: 5px; border-radius: 5px; background: color-mix(in srgb,var(--ink) 28%,transparent); transform: translateX(-50%); }
.auth-phone-screen > .icon { width: 13px; height: 13px; color: var(--muted); margin-bottom: 9px; }
.auth-phone-message { width: 85%; padding: 5px; border: 1px solid color-mix(in srgb,var(--accent) 12%,transparent); background: color-mix(in srgb,var(--accent) 8%,transparent); border-radius: 6px; margin-left: auto; }
.auth-phone-message i,.auth-phone-reply i { display: block; height: 2px; margin: 3px 0; border-radius: 2px; background: color-mix(in srgb,var(--ink) 20%,transparent); }
.auth-phone-message i:last-child,.auth-phone-reply i:last-child { width: 60%; }
.auth-phone-reply { margin-top: 10px; }
.auth-phone-home { position: absolute; left: 28%; right: 28%; bottom: 5px; height: 2px; border-radius: 2px; background: var(--line); }
.auth-key-tile { position: absolute; z-index: 5; display: grid; place-items: center; width: 66px; height: 66px; top: 232px; right: 100px; border: 1px solid var(--auth-edge); border-radius: 21px; background: var(--auth-metal); color: var(--accent); box-shadow: 0 12px 28px var(--auth-shadow),inset 0 1px 1px var(--glass-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: rotate(7deg); animation: auth-float 8s ease-in-out infinite; }
.auth-key-tile > .icon { width: 32px; height: 32px; stroke-width: 1.45; }
.auth-key-ring { position: absolute; inset: -7px; border: 1px solid color-mix(in srgb,var(--accent) 20%,transparent); border-radius: 29px; opacity: 0; }
.auth-visual-label { position: absolute; bottom: 1px; left: 0; width: 100%; color: var(--muted); text-align: center; font-size: 12px; letter-spacing: .5px; }
.login-content { min-width: 0; }
.login-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 28px; font-size: 18px; font-weight: 600; letter-spacing: -.5px; }
.login h1 { margin: 0; font-size: 34px; letter-spacing: -1px; font-weight: 650; line-height: 1.3; }
.login #description { max-width: 330px; margin: 12px 0 28px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.login #submit { min-height: 49px; width: 100%; padding: 12px 16px; border-radius: 14px; font-size: 15px; gap: 10px; background: var(--auth-action); color: var(--auth-action-ink); }
.login #submit:hover:not(:disabled) { background: color-mix(in srgb,var(--auth-action) 90%,var(--ink)); }
.login #submit .icon { width: 19px; height: 19px; }
.login #submit .login-button-arrow { width: 15px; height: 15px; margin-left: auto; opacity: .7; }
.login #submit .login-button-spinner { display: none; border-color: color-mix(in srgb,currentColor 25%,transparent); border-top-color: currentColor; }
.login #submit[aria-busy=true] { opacity: 1; }
.login #submit[aria-busy=true] .login-button-icon,.login #submit[aria-busy=true] .login-button-arrow { display: none; }
.login #submit[aria-busy=true] .login-button-spinner { display: inline-block; }
.login-state { display: flex; align-items: flex-start; gap: 9px; min-height: 76px; margin-top: 21px; padding: 0 3px; }
.login-state-dot { flex-shrink: 0; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: color-mix(in srgb,var(--muted) 50%,transparent); }
.login-state p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.login-state #login-status-title { color: var(--ink); font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.login #message { margin: 4px 0 0; }
.login[data-state=waiting] .auth-key-tile { animation: auth-float 3s ease-in-out infinite; }
.login[data-state=waiting] .auth-key-ring { animation: auth-ring 2.4s ease-out infinite; }
.login:is([data-state=preparing],[data-state=waiting],[data-state=verifying],[data-state=opening]) .login-state-dot { background: var(--accent); animation: auth-pulse 1.8s ease-in-out infinite; }
.login-footer { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 24px auto 0; padding: 6px 12px; border: 1px solid var(--glass-border); border-radius: 30px; background: var(--panel); box-shadow: inset 0 1px 0 var(--glass-border); color: var(--muted); font-size: 12px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.login-footer .icon { width: 13px; height: 13px; }
.login-footer-divider { height: 10px; width: 1px; margin: 0 3px; background: var(--line); }
.page-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); text-align: center; font-size: 14px; }
.page-loading p { margin: 0; }
.page-loading .loading-brand { margin-top: 8px; color: var(--ink); font-size: 24px; font-weight: 600; letter-spacing: -.7px; }
.auth-seal { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 19px; color: var(--accent); border: 1px solid var(--glass-border); background: var(--glass); box-shadow: var(--glass-shadow); }
.auth-seal .icon { width: 27px; height: 27px; stroke-width: 1.5; }
.auth-progress { position: relative; overflow: hidden; display: block; width: 72px; height: 2px; margin-top: 16px; border-radius: 2px; background: var(--line); }
.auth-progress::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateX(-100%); animation: auth-progress 1.6s ease-in-out infinite; }
.page-loading[data-state=error] .auth-progress { display: none; }
@keyframes auth-float { 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes auth-ring { 0% { opacity: .7; transform: scale(.96); } 90%,100% { opacity: 0; transform: scale(1.2); } }
@keyframes auth-pulse { 50% { opacity: .35; } }
@keyframes auth-progress { to { transform: translateX(100%); } }
@keyframes auth-halo-breathe { 50% { transform: scale(1.08) translateY(-6px); opacity: .65; } }
@keyframes auth-orbit-turn { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes auth-link-flow { to { stroke-dashoffset: -216; } }
@keyframes auth-twinkle { 0%,100% { opacity: .2; } 50% { opacity: .8; } }
@keyframes auth-window-drift { 50% { transform: translateX(-50%) translateY(-6px) rotate(-5deg); } }
@keyframes auth-phone-drift { 50% { transform: translateY(-5px) rotate(12deg); } }
@keyframes auth-card-float { 50% { transform: translateY(-5px) rotate(calc(var(--float-angle) + 2deg)); } }
@keyframes auth-glint { 0%,68% { transform: translateX(-130%); } 88%,100% { transform: translateX(130%); } }
@keyframes surround-drift { 50% { transform: translateY(-7px) rotate(calc(var(--key-angle) + 4deg)); } }
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; flex: 0 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

#desktop{position:fixed;inset:0;background:#161616}#screen{width:100%;height:100%;border:0}#lock{position:fixed;top:8px;right:8px;z-index:10;background:#232520e6;color:white;border:1px solid #ffffff40;border-radius:8px;padding:5px 12px;min-height:30px;font-size:12px}#legacy{display:block;margin-top:14px;color:var(--muted);font-size:13px;text-decoration:underline}
@media(max-width:680px){.login{width:calc(100% - 32px);max-width:440px}.login-shell{grid-template-columns:1fr;padding:26px 24px;gap:8px;border-radius:24px}.login-visual{height:310px;transform:scale(.78);transform-origin:center;margin:-24px -8px -12px}.login-content{padding-top:20px}.login-brand{margin-bottom:18px}.login h1{font-size:28px}.login #description{margin-bottom:20px}.surround-key{display:none}.login-state{min-height:60px}.login-footer{margin-top:18px}}
@media(prefers-color-scheme:dark){:root{--bg:#1f1e1d;--surface:#282725e8;--panel:#302e2a88;--ink:#efebe3;--muted:#aaa59b;--line:#d3c5ad24;--accent:#d99978;--glass-border:#ffffff20;--glass-rim:linear-gradient(135deg,#ffffff30,#ffffff08,#ffffff16)}.login{--auth-metal:linear-gradient(145deg,#3a3833,#292825);--auth-screen:linear-gradient(145deg,#282724,#201f1d);--auth-edge:#ffffff25;--auth-shadow:#0004;--auth-sheen:#ffffff10;--auth-action:#ce8d6c;--auth-action-ink:#211b17}.brand-mark{background:linear-gradient(145deg,#6f6250,#3d3830)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* LOGIN_SCENE_V2: CSS-only ornaments remain isolated to the sign-in screen. */
.login-footer{display:none!important}
.scene-toggle{position:fixed;z-index:12;top:26px;right:30px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.scene-toggle input{position:absolute;opacity:0;width:42px;height:42px;margin:0;cursor:pointer}
.scene-toggle>span{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--glass-border);border-radius:50%;background:var(--surface);box-shadow:0 8px 24px #45351b0b,inset 0 1px 0 var(--glass-border);color:var(--muted);transition:transform .25s,background .25s}
.scene-toggle:hover>span{transform:rotate(12deg)}.scene-toggle input:focus-visible+span{outline:3px solid var(--accent);outline-offset:4px}
.scene-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.scene-sun{display:none}.scene-theme:checked+span .scene-moon{display:none}.scene-theme:checked+span .scene-sun{display:block}
.scene-signature{position:absolute;top:30px;left:34px;display:flex;align-items:center;gap:11px;font:600 11px/1.3 -apple-system,sans-serif;letter-spacing:2.8px;color:var(--ink);opacity:.7}.scene-subtitle{display:block;font-size:8px;letter-spacing:1.5px;color:var(--muted);margin-top:5px}.scene-emblem{display:flex;align-items:center;gap:3px;height:24px}.scene-emblem i{width:3px;height:15px;background:var(--accent);border-radius:4px;transform:rotate(24deg)}.scene-emblem i:nth-child(2){height:24px;opacity:.65}.scene-emblem i:nth-child(3){height:10px;opacity:.4}
.scene-grain{position:absolute;inset:0;background-image:radial-gradient(var(--muted) .55px,transparent .7px);background-size:8px 8px;opacity:.1;mask-image:radial-gradient(ellipse at center,transparent 30%,black);-webkit-mask-image:radial-gradient(ellipse at center,transparent 30%,black)}
.scene-aura{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%);animation:scene-aurora 22s ease-in-out infinite;will-change:transform}.aura-one{left:-220px;top:12%}.aura-two{right:-200px;bottom:5%;animation-delay:-11s;background:radial-gradient(circle,#bfa26b20,transparent 68%)}
.scene-routes{position:absolute;width:100%;height:100%;inset:0;color:var(--accent);fill:none;pointer-events:none;opacity:.6}.scene-route-grid{stroke:currentColor;stroke-width:.7;opacity:.13}.scene-route-flow{stroke:url(#scene-route-color);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:48 520;animation:scene-flow 28s linear infinite;opacity:.6}.scene-route-flow path:nth-child(2){stroke-dasharray:24 360}.scene-nodes{fill:var(--bg);stroke:currentColor;stroke-width:1;animation:scene-twinkle 7s ease-in-out infinite}
.scene-orbit{position:absolute;width:170px;height:170px;border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);border-radius:50%;animation:scene-spin 45s linear infinite}.scene-orbit::before,.scene-orbit::after{content:'';position:absolute;border:1px dashed color-mix(in srgb,var(--accent) 14%,transparent);inset:12px;border-radius:50%}.scene-orbit::after{inset:27px;border-style:solid;opacity:.5}.scene-orbit i,.scene-orbit b{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 6%,transparent)}.scene-orbit i{left:14%;top:11%;opacity:.6}.scene-orbit b{bottom:8%;right:17%;width:4px;height:4px;opacity:.35}.orbit-left{left:calc(50% - 680px);top:calc(50% - 200px)}.orbit-right{right:calc(50% - 690px);bottom:calc(50% - 220px);width:230px;height:230px;animation-direction:reverse;animation-duration:60s}
.scene-panel{position:absolute;width:150px;height:116px;padding:14px;border:1px solid var(--glass-border);border-radius:20px;background:linear-gradient(125deg,color-mix(in srgb,var(--surface) 65%,transparent),color-mix(in srgb,var(--panel) 35%,transparent));box-shadow:0 15px 40px #49351c08,inset 0 1px 0 var(--glass-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:scene-panel-drift 13s ease-in-out infinite}.panel-left{left:max(24px,calc(50% - 650px));top:calc(50% + 4px);transform:rotate(-9deg);--panel-angle:-9deg}.panel-right{right:max(24px,calc(50% - 650px));top:calc(50% - 172px);transform:rotate(9deg);--panel-angle:9deg;animation-delay:-6s}.scene-panel-top{display:flex;align-items:center;gap:4px;color:var(--muted)}.scene-panel-top>i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4}.scene-panel-top>span{margin-left:auto;font:9px ui-monospace,monospace;opacity:.4;letter-spacing:2px}
.scene-equalizer{height:38px;margin-top:12px;display:flex;gap:5px;align-items:center;justify-content:center}.scene-equalizer i{width:4px;height:22px;border-radius:4px;background:var(--accent);opacity:.3;animation:scene-bars 3s ease-in-out infinite}.scene-equalizer i:nth-child(2n){height:32px;animation-delay:-.8s}.scene-equalizer i:nth-child(3n){height:14px;animation-delay:-1.8s}.scene-equalizer i:nth-child(4n){height:26px;animation-delay:-2.3s}.scene-mini-track{height:2px;margin:11px 9px 0;background:var(--line);border-radius:4px;overflow:hidden}.scene-mini-track span{display:block;width:35%;height:100%;background:var(--accent);opacity:.4;animation:scene-traverse 7s ease-in-out infinite}
.scene-key-composition{display:flex;justify-content:center;gap:8px;margin-top:12px}.scene-key-composition span{display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--glass-border);border-radius:9px;background:var(--auth-metal);box-shadow:0 3px 8px var(--auth-shadow);color:var(--muted);font-size:19px}.scene-key-composition span:nth-child(2){color:var(--accent);transform:translateY(-4px);animation:scene-key-tap 6s ease-in-out infinite}.scene-mini-lines{margin:13px 22px 0}.scene-mini-lines i{display:block;height:2px;margin-top:5px;background:var(--line);border-radius:2px}.scene-mini-lines i:last-child{width:65%}
.scene-bottom{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:23px;color:var(--accent);opacity:.55}.scene-bottom svg{width:260px;height:34px;fill:none;stroke:currentColor;stroke-width:.8;opacity:.45}.scene-bottom .scene-signal{stroke-width:1.8;stroke-dasharray:22 330;animation:scene-flow 12s linear infinite}.scene-dot-cluster{display:flex;gap:5px}.scene-dot-cluster i{width:3px;height:3px;border-radius:50%;background:currentColor;animation:scene-twinkle 4s infinite}.scene-dot-cluster i:nth-child(2){animation-delay:-1.2s}.scene-dot-cluster i:nth-child(3){animation-delay:-2.4s}.scene-spark-diamond{width:7px;height:7px;border:1px solid currentColor;transform:rotate(45deg);animation:scene-twinkle 5s ease-in-out infinite}
.scene-frame{position:absolute;width:15px;height:15px;border-color:var(--accent);opacity:.22}.frame-tl{top:96px;left:34px;border-top:1px solid;border-left:1px solid}.frame-tr{top:96px;right:34px;border-top:1px solid;border-right:1px solid}.frame-bl{bottom:30px;left:34px;border-bottom:1px solid;border-left:1px solid}.frame-br{bottom:30px;right:34px;border-bottom:1px solid;border-right:1px solid}
.login-shell{transition:box-shadow .4s,border-color .4s}.login-shell:hover{box-shadow:0 28px 90px #49351c10,inset 0 1px 0 var(--glass-border)}.login[data-state=waiting] .scene-route-flow{animation-duration:12s}.login[data-state=waiting] .scene-emblem i{animation:scene-bars 1.4s ease-in-out infinite}
body.signed-out:has(.scene-theme:checked){color-scheme:dark;--bg:#1f2323;--surface:#2a302eee;--panel:#343d3688;--ink:#f1eee7;--muted:#aaa99f;--line:#d3c5ad24;--glass-border:#ffffff21;--glass-rim:linear-gradient(135deg,#ffffff35,#ffffff07,#ffffff20);--glass-light:#ffffff33;--glass:linear-gradient(135deg,#ffffff12,#ffffff04);background-color:var(--bg)}
.signed-out .login:has(.scene-theme:checked){--auth-metal:linear-gradient(145deg,#3a403b,#282e2b);--auth-screen:linear-gradient(145deg,#292f2c,#202623);--auth-edge:#ffffff20;--auth-shadow:#0004;--auth-sheen:#ffffff18}
@media(prefers-color-scheme:dark){.scene-moon{display:none}.scene-sun{display:block}.scene-theme:checked+span .scene-moon{display:block}.scene-theme:checked+span .scene-sun{display:none}body.signed-out:has(.scene-theme:checked){color-scheme:light;--bg:#f5f1e8;--surface:#fffdf8d1;--panel:#fffdf87a;--ink:#141413;--muted:#79756c;--line:#564d3d24;--glass-border:#ffffff9e;--glass-rim:linear-gradient(135deg,#ffffffed,#ffffff30,#9b815126,#ffffffb3);--glass-light:#ffffffc7;--glass:linear-gradient(135deg,#ffffff94,#fffdf83d);background-color:var(--bg)}.signed-out .login:has(.scene-theme:checked){--auth-metal:linear-gradient(145deg,#fffefaed,#e9e3d7c7);--auth-screen:linear-gradient(145deg,#fdfbf5,#eee9de);--auth-edge:#fffdf8;--auth-shadow:#6753381a;--auth-sheen:#ffffff8c}}
@media(max-width:1199px){.scene-panel{display:none}.orbit-left{left:-100px;top:15%}.orbit-right{right:-110px;bottom:10%}.scene-frame{opacity:.12}.scene-signature{left:26px}.scene-bottom{bottom:22px}.scene-bottom svg{width:200px}}
@media(max-width:680px){.scene-signature{top:23px;left:22px;font-size:10px;gap:9px}.scene-subtitle{font-size:7px}.scene-emblem{transform:scale(.85)}.scene-toggle{top:19px;right:20px}.scene-toggle>span,.scene-toggle input{width:36px;height:36px}.scene-bottom{bottom:18px;opacity:.3}.scene-bottom svg{width:140px}.scene-frame{display:none}.scene-aura{width:370px;height:370px;opacity:.8}.orbit-left{width:130px;height:130px;left:-80px;top:80px}.orbit-right{width:180px;height:180px;right:-100px;bottom:35px}.scene-routes{opacity:.35}.login{margin:62px auto 48px}.login-shell{padding-top:24px}.scene-panel{display:none}}
@keyframes scene-flow{to{stroke-dashoffset:-1136}}@keyframes scene-spin{to{transform:rotate(360deg)}}@keyframes scene-aurora{50%{transform:translate(65px,-35px) scale(1.13)}}@keyframes scene-panel-drift{50%{transform:translateY(-12px) rotate(calc(var(--panel-angle) + 3deg))}}@keyframes scene-bars{50%{transform:scaleY(.4);opacity:.65}}@keyframes scene-traverse{0%,100%{transform:translateX(-100%)}50%{transform:translateX(290%)}}@keyframes scene-key-tap{48%,53%{transform:translateY(0);box-shadow:0 1px 3px var(--auth-shadow)}}@keyframes scene-twinkle{0%,100%{opacity:.2}50%{opacity:.85}}
@media(prefers-reduced-motion:reduce){.login *,.login *::before,.login *::after{animation:none!important;transition:none!important}}

body.signed-out{--accent:#397f70}.login{--auth-action:#397f70}.signed-out .login:has(.scene-theme:checked){--auth-action:#74b5a2;--auth-action-ink:#172b25}body.signed-out:has(.scene-theme:checked){--accent:#81bda9}
@media(prefers-color-scheme:dark){body.signed-out{--accent:#81bda9}.login{--auth-action:#74b5a2;--auth-action-ink:#172b25}body.signed-out:has(.scene-theme:checked){--accent:#397f70}.signed-out .login:has(.scene-theme:checked){--auth-action:#397f70;--auth-action-ink:#fff}}

@media(max-width:680px){.login .surround-key{display:none}}

body.signed-out{--login-top:#529c80;--login-bottom:#28725e;--login-shadow:#23694f2b;}

/* COLOR_GLASS_BUTTON_V3 */
body.signed-out #login #submit,body.signed-out #login #submit:hover:not(:disabled){position:relative;isolation:isolate;overflow:hidden;max-width:350px;min-height:50px;border-radius:16px;padding:13px 19px;border:1px solid #ffffff50;background:linear-gradient(125deg,var(--login-top),var(--login-bottom));color:#fff;box-shadow:inset 0 1px 1px #ffffff70,inset 0 -1px 0 #00000016,0 7px 20px var(--login-shadow);backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%);transition:box-shadow .2s,transform .2s,filter .2s}
body.signed-out #login #submit:hover:not(:disabled){filter:brightness(1.07);box-shadow:inset 0 1px 1px #ffffff80,0 9px 25px var(--login-shadow)}
body.signed-out #login #submit::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,#ffffff2e,transparent 48%,#ffffff0a);pointer-events:none;opacity:1}
body.signed-out #login #submit::after{content:'';position:absolute;inset:1px;border:1px solid #ffffff20;border-radius:14px;pointer-events:none;opacity:1;padding:0;background:none;mask:none;-webkit-mask:none}

#fullscreen{position:fixed;top:max(8px,env(safe-area-inset-top));right:84px;z-index:10;background:#232b26cc;color:#fff;border:1px solid #ffffff40;backdrop-filter:blur(12px);border-radius:10px;padding:6px 12px;font-size:12px}#lock{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}#fullscreen-help{max-width:min(420px,calc(100vw - 36px));border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--ink);padding:24px;box-shadow:0 24px 80px #0004}#fullscreen-help::backdrop{background:#0007;backdrop-filter:blur(5px)}#fullscreen-help h2{font-size:20px;margin-top:0}#fullscreen-help p{font-size:15px;line-height:1.8;color:var(--muted)}#close-fullscreen-help{background:#397f70;color:white;padding:10px 18px}#desktop:fullscreen{width:100vw;height:100dvh}body:has(#desktop:not([hidden])){overflow:hidden}

/* Ambient workspace details — no personal identifiers or simulated live data. */
.scene-signature .scene-subtitle{font-size:10px;letter-spacing:2.6px;margin:0;line-height:1.6}.scene-signature{opacity:.72}.scene-emblem{height:22px}
.ambient-heading{position:absolute;top:38px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;color:var(--muted);font:9px/1.5 ui-monospace,monospace;letter-spacing:3px;opacity:.55;white-space:nowrap}.ambient-heading span:first-child,.ambient-heading span:last-child{height:1px;width:42px;background:linear-gradient(90deg,transparent,var(--accent));opacity:.5}.ambient-heading span:last-child{transform:rotate(180deg)}
.ambient-globe{position:absolute;top:60px;left:calc(50% + 145px);width:92px;height:92px;transform:rotate(-22deg);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);border-radius:50%;background:radial-gradient(circle at 30% 25%,var(--glass-border),transparent 65%);box-shadow:inset -9px -6px 20px color-mix(in srgb,var(--accent) 8%,transparent);animation:ambient-bob 14s ease-in-out infinite}.globe-equator{position:absolute;top:27px;left:-2px;right:-2px;height:36px;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);border-radius:50%}.globe-meridian{position:absolute;top:-1px;bottom:-1px;left:23px;right:23px;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);border-radius:50%}.meridian-two{left:8px;right:8px;transform:rotate(-28deg)}.ambient-globe i,.ambient-globe b{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5;left:3px;top:29px;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 6%,transparent)}.ambient-globe b{left:auto;top:auto;bottom:10px;right:13px;width:3px;height:3px}
.ambient-stack{position:absolute;width:94px;height:94px;left:calc(50% - 605px);bottom:108px;transform:rotate(-15deg);animation:ambient-bob 16s ease-in-out infinite;animation-delay:-6s}.ambient-stack>span{position:absolute;inset:0;border:1px solid var(--glass-border);border-radius:23px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 68%,transparent),color-mix(in srgb,var(--panel) 25%,transparent));box-shadow:inset 0 1px 0 var(--glass-border),0 10px 25px var(--auth-shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:translate(18px,-16px) rotate(10deg)}.ambient-stack>span:nth-child(2){transform:translate(8px,-7px) rotate(5deg)}.ambient-stack>span:last-child{display:grid;place-items:center;transform:none}.ambient-stack svg{width:38px;height:38px;stroke:var(--accent);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.ambient-spectrum{position:absolute;right:calc(50% - 600px);bottom:110px;transform:rotate(8deg);width:148px;text-align:center}.ambient-spectrum>div{display:flex;align-items:center;justify-content:center;gap:6px;height:58px}.ambient-spectrum i{height:36px;width:22px;border:1px solid var(--glass-border);border-radius:10px;background:linear-gradient(155deg,var(--glass-border),color-mix(in srgb,var(--accent) 15%,transparent));box-shadow:inset 0 1px 0 var(--glass-border);animation:ambient-prism 9s ease-in-out infinite}.ambient-spectrum i:nth-child(2){height:46px;animation-delay:-1s}.ambient-spectrum i:nth-child(3){height:58px;animation-delay:-2s}.ambient-spectrum i:nth-child(4){height:46px;animation-delay:-3s}.ambient-spectrum i:nth-child(5){animation-delay:-4s}.ambient-spectrum>span{display:block;font:7px ui-monospace,monospace;letter-spacing:1.2px;color:var(--muted);opacity:.55;margin-top:10px}
.ambient-cursor{position:absolute;left:calc(50% - 180px);top:67px;width:32px;height:44px;transform:rotate(12deg);animation:ambient-cursor 18s ease-in-out infinite}.ambient-cursor svg{width:26px;height:26px;stroke:var(--accent);stroke-width:1;fill:color-mix(in srgb,var(--surface) 70%,transparent);opacity:.5}.ambient-cursor span{position:absolute;right:-13px;bottom:0;width:22px;height:18px;display:grid;place-items:center;border:1px solid var(--glass-border);border-radius:6px;background:var(--auth-metal);font-size:10px;color:var(--accent);opacity:.65}.ambient-constellation{position:absolute;width:220px;height:90px;right:115px;top:75px;stroke:var(--accent);stroke-width:.7;fill:none;opacity:.16}.ambient-constellation circle{fill:var(--bg);animation:scene-twinkle 7s infinite}.ambient-constellation circle:nth-child(2n){animation-delay:-3s}
.login-notes{position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(690px,100%)}.login-note{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid var(--glass-border);border-radius:14px;background:color-mix(in srgb,var(--panel) 60%,transparent);box-shadow:inset 0 1px 0 var(--glass-border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.login-note>svg{width:20px;height:20px;flex:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.75}.login-note strong{display:block;font-size:11px;font-weight:500;color:var(--ink);letter-spacing:.2px}.login-note small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.scene-bottom{bottom:18px;opacity:.35}.login-surround .surround-mac{left:calc(50% - 440px);bottom:calc(50% - 300px)}.login-surround .surround-bolt{right:calc(50% - 440px);bottom:calc(50% - 300px)}
@keyframes ambient-bob{50%{translate:0 -9px;rotate:4deg}}@keyframes ambient-prism{50%{transform:translateY(-5px) rotateY(25deg);opacity:.55}}@keyframes ambient-cursor{0%,100%{translate:0 0}35%{translate:16px -5px}65%{translate:-8px 8px}}
@media(max-width:1199px){.ambient-stack,.ambient-spectrum,.ambient-constellation{display:none}.ambient-globe{left:calc(50% + 175px);width:72px;height:72px;top:50px}.ambient-cursor{left:calc(50% - 210px);top:75px}.login-notes{width:min(620px,100%);gap:8px}.login-note{padding:10px}.login-note small{font-size:9px}}
@media(max-height:760px) and (min-width:681px){.ambient-globe{top:20px;width:70px;height:70px}.ambient-heading{top:25px}.ambient-cursor{top:36px}.login-notes{top:calc(100% + 14px)}.login-note{padding:8px 12px}.scene-bottom{display:none}}
@media(max-width:680px){.ambient-heading,.ambient-globe,.ambient-cursor,.ambient-constellation,.ambient-stack,.ambient-spectrum{display:none}.login-notes{position:relative;top:auto;left:auto;transform:none;width:100%;margin:16px auto 0;gap:8px;grid-template-columns:1fr}.login-note{padding:10px 15px;gap:11px;background:color-mix(in srgb,var(--panel) 40%,transparent)}.login-note div{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.login-note strong{font-size:11px}.login-note small{font-size:10px;margin:0}.login-note>svg{width:17px;height:17px}.scene-bottom{display:none}.login{margin-bottom:20px}.scene-signature .scene-subtitle{font-size:8px;letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){.login *,.login *::before,.login *::after{animation:none!important;transition:none!important}}

/* Compact supporting modules on phones. */
@media(max-width:680px){body.signed-out .login-notes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}body.signed-out .login-note{flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:72px;padding:10px 4px;text-align:center;border-radius:14px}body.signed-out .login-note div{display:block;min-width:0}body.signed-out .login-note strong{font-size:11px;line-height:1.4;white-space:nowrap}body.signed-out .login-note small{display:none}body.signed-out .login-note>svg{width:19px;height:19px}}

/* Keep only the device safe area below the final mobile row. */
@media(max-width:680px){body.signed-out>main{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}}
@media(max-width:680px) and (display-mode:standalone){body.signed-out>main{padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}}

/* Native mobile keyboard entry, alongside the existing desktop controls. */
#keyboard{position:fixed;top:max(8px,env(safe-area-inset-top));right:152px;z-index:10;background:#232b26cc;color:#fff;border:1px solid #ffffff40;backdrop-filter:blur(12px);border-radius:10px;padding:6px 12px;font-size:12px}

#gestures{position:fixed;top:max(8px,env(safe-area-inset-top));right:220px;z-index:10;background:#232b26cc;color:#fff;border:1px solid #ffffff40;backdrop-filter:blur(12px);border-radius:10px;padding:6px 12px;font-size:12px}
#gestures-help{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--ink);padding:24px;box-shadow:0 24px 80px #0004}#gestures-help::backdrop{background:#0007;backdrop-filter:blur(5px)}#gestures-help h2{font-size:20px;margin-top:0}#gestures-help p{font-size:14px;line-height:1.8;color:var(--muted)}#gestures-help button{background:#397f70;color:white;padding:10px 16px;font-size:14px}

/* Remote controls: keep phone gestures and actions separate from the login page. */
#desktop { --keyboard-lift:0px; background:#101613; }
#screen { display:block; height:calc(100% - 66px - env(safe-area-inset-bottom)); }
#remote-hint { position:fixed; z-index:8; top:max(10px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); max-width:calc(100% - 28px); padding:7px 13px; border:1px solid #ffffff16; border-radius:30px; background:#14231bd9; color:#d3e2da; font-size:11px; line-height:1.5; text-align:center; white-space:nowrap; pointer-events:none; backdrop-filter:blur(16px); }
#remote-dock { position:fixed; z-index:12; bottom:calc(max(9px,env(safe-area-inset-bottom)) + var(--keyboard-lift)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:3px; max-width:calc(100% - 16px); box-sizing:border-box; padding:5px; border:1px solid #ffffff25; border-radius:20px; color:#e8f0eb; background:linear-gradient(135deg,#293d33f2,#15241df5); box-shadow:0 6px 30px #0005,inset 0 1px 0 #ffffff12; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
#remote-dock button { position:static; min-height:46px; min-width:46px; padding:4px 6px; display:flex; flex-direction:column; gap:2px; border:0; border-radius:13px; background:transparent; color:inherit; font-size:10px; line-height:1.25; box-shadow:none; backdrop-filter:none; }
#remote-dock button:hover { background:#ffffff0e; }
#remote-dock button:active { background:#ffffff20; }
#remote-dock button[aria-pressed="true"] { color:#a0f1c5; background:#4c987b48; }
#remote-dock .control-icon { font-size:23px; height:25px; line-height:25px; font-weight:400; }
#remote-dock svg { width:23px; height:23px; margin:1px 0; stroke:currentColor; stroke-width:1.4; fill:none; }
#remote-dock .mouse-fill { fill:currentColor; stroke:none; opacity:.8; }
#remote-dock #collapse-controls { min-width:26px; padding:0 3px; color:#9cafa2; font-size:23px; border-left:1px solid #ffffff16; border-radius:0 13px 13px 0; }
#expand-controls { position:fixed; z-index:12; bottom:calc(max(10px,env(safe-area-inset-bottom)) + var(--keyboard-lift)); right:max(12px,env(safe-area-inset-right)); min-height:48px; padding:10px 17px; border:1px solid #ffffff30; border-radius:24px; color:#fff; background:#1c3329ed; box-shadow:0 6px 24px #0005; font-size:16px; }
#expand-controls span { font-size:12px; }
#gestures-help.remote-panel,#fullscreen-help.remote-panel { box-sizing:border-box; width:min(440px,calc(100vw - 24px)); max-width:440px; max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin:auto; overflow:auto; overscroll-behavior:contain; padding:22px; border:1px solid #a3c4ae30; border-radius:26px; color:#eaf1ec; background:linear-gradient(150deg,#25382d,#15271d); box-shadow:0 20px 80px #0009; color-scheme:dark; }
#gestures-help.remote-panel::backdrop,#fullscreen-help.remote-panel::backdrop { background:#0007; backdrop-filter:blur(5px); }
#gestures-help.remote-panel header { display:flex; justify-content:space-between; align-items:center; gap:16px; }
#gestures-help.remote-panel .panel-eyebrow { font-size:9px; font-weight:600; letter-spacing:2px; color:#8db99e; }
#gestures-help.remote-panel h2 { font-size:23px; margin:4px 0 0; letter-spacing:-.5px; }
#gestures-help.remote-panel #close-gestures-help { width:40px; height:40px; padding:0; border:1px solid #ffffff20; border-radius:50%; background:#ffffff08; color:#eaf1ec; font-size:25px; font-weight:300; }
#gestures-help.remote-panel .remote-status { margin:15px 0 6px; color:#9fcab0; font-size:11px; }
#gestures-help.remote-panel .remote-status::before { content:''; display:inline-block; width:5px; height:5px; margin-right:7px; vertical-align:2px; background:#8cdbab; border-radius:50%; }
#gestures-help.remote-panel .panel-section { padding:16px 0; border-bottom:1px solid #ffffff12; }
#gestures-help.remote-panel h3 { font-size:12px; font-weight:500; margin:0 0 11px; color:#d6e3da; }
#gestures-help.remote-panel .panel-note { margin:10px 0 0; color:#95aa9b; font-size:11px; line-height:1.75; }
#gestures-help.remote-panel .mode-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
#gestures-help.remote-panel button { background:#ffffff08; color:#deebe2; border:1px solid #ffffff15; min-height:42px; padding:9px; border-radius:12px; font-size:12px; }
#gestures-help.remote-panel button:hover { background:#ffffff12; }
#gestures-help.remote-panel .mode-options button { flex-direction:column; gap:4px; padding:12px 3px; }
#gestures-help.remote-panel .mode-options button>span { height:24px; font-size:23px; line-height:24px; }
#gestures-help.remote-panel .mode-options strong { font-size:12px; font-weight:500; }
#gestures-help.remote-panel .mode-options small { font-size:9px; color:#9aafa1; white-space:nowrap; }
#gestures-help.remote-panel .mode-options [aria-pressed="true"] { border-color:#8ed0ab80; background:#5d9d7840; color:#b2f0cd; }
#gestures-help.remote-panel .zoom-controls { display:flex; align-items:center; gap:8px; }
#gestures-help.remote-panel .zoom-controls button { min-width:42px; }
#gestures-help.remote-panel .zoom-controls output { min-width:52px; font:500 14px ui-monospace,monospace; text-align:center; }
#gestures-help.remote-panel #fit-screen { margin-left:auto; padding:9px 13px; }
#gestures-help.remote-panel .shortcut-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
#gestures-help.remote-panel footer { display:flex; gap:9px; padding-top:18px; }
#gestures-help.remote-panel #fullscreen,#gestures-help.remote-panel #lock { position:static; width:50%; padding:10px 8px; min-height:44px; font-size:12px; backdrop-filter:none; box-shadow:none; }
#gestures-help.remote-panel #lock { color:#e6bfb3; }
@media (pointer:fine) and (hover:hover) { #desktop .touch-only,.remote-panel .touch-only { display:none; } #screen { height:100%; } #remote-dock { left:auto; right:16px; transform:none; bottom:16px; } #remote-hint { display:none; } }
@media (max-width:600px) { #gestures-help.remote-panel { margin:auto auto max(10px,env(safe-area-inset-bottom)); border-radius:26px; padding:19px; } }
@media (max-height:480px) and (orientation:landscape) { #screen { height:100%; width:calc(100% - 70px - env(safe-area-inset-right)); } #remote-dock { left:auto; right:max(5px,env(safe-area-inset-right)); top:50%; bottom:auto; transform:translateY(-50%); flex-direction:column; gap:1px; border-radius:19px; padding:4px; } #remote-dock button { min-height:38px; min-width:45px; padding:2px 5px; } #remote-dock #collapse-controls { min-height:23px; border-left:0; border-top:1px solid #ffffff16; border-radius:0 0 13px 13px; } #remote-dock .control-icon { font-size:20px; height:21px; line-height:21px; } #remote-dock svg { width:20px; height:20px; } #remote-hint { max-width:calc(100% - 130px); } #gestures-help.remote-panel { margin:auto; max-height:calc(100dvh - 20px); } }
@media (prefers-reduced-motion:reduce) { #remote-dock button,.remote-panel button { transition:none; } }

#gestures-help.remote-panel .mode-options svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:360px) { #remote-dock{gap:2px;padding:4px}#remote-dock button{width:40px;min-width:40px;max-width:40px;padding:4px 0;font-size:9px}#remote-dock #collapse-controls{width:22px;min-width:22px;max-width:22px} }
@media (max-height:480px) and (orientation:landscape) { #remote-dock{top:calc((100% - var(--keyboard-lift))/2);max-height:calc(100% - var(--keyboard-lift) - 20px);overflow-y:auto;scrollbar-width:thin;flex-shrink:0;}#remote-dock button{flex-shrink:0;} }