:root {
  --bg: #0a0a0b;
  --card: rgba(30, 30, 33, 0.62);
  --card-line: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.08);
  --text: #f3f2ef;
  --muted: #9b9a97;
  --faint: #6c6b68;
  --green: #5fd38a;
  --red: #ff6b6b;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --r: 22px;
  --gutter: clamp(16px, 3.4vw, 66px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
/* sky: drifting glows + twinkling stars with mouse parallax */
#sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.orb.a { width: 62vmax; height: 62vmax; left: -22vmax; top: 18%; background: rgba(160,160,168,0.13); animation: driftA 18s ease-in-out infinite alternate; }
.orb.b { width: 54vmax; height: 54vmax; right: -20vmax; bottom: -18vmax; background: rgba(70,70,78,0.22); animation: driftB 24s ease-in-out infinite alternate-reverse; }
@keyframes driftA { from { transform: translate(0, 0) } to { transform: translate(14vw, -8vh) } }
@keyframes driftB { from { transform: translate(0, 0) } to { transform: translate(-12vw, -10vh) } }
#starfield { position: absolute; inset: -4%; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.star { position: absolute; border-radius: 50%; background: #fff; opacity: .15; animation: twinkle var(--d) ease-in-out var(--delay) infinite; }
@keyframes twinkle { 0%, 100% { opacity: .12 } 50% { opacity: .95 } }
@media (prefers-reduced-motion: reduce) { .orb, .star { animation: none !important; } #starfield { transition: none; } }

/* glass */
.glass, .pill, .card, .composer, .modal-box {
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 18px 50px rgba(0,0,0,0.35);
}
.hidden { display: none !important; }
.screen { position: relative; z-index: 1; height: 100dvh; display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* brand + header */
.brand { font-weight: 700; font-size: 23px; letter-spacing: 0.01em; }
.brand span { font-weight: 700; margin-left: 4px; }
.brand.big { font-size: 36px; text-align: center; }
.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 20px var(--gutter) 0;
}
.date { text-align: center; }
.date small { display: block; font-size: 11px; letter-spacing: 0.28em; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.date div { font-family: var(--serif); font-size: 26px; line-height: 1.15; }
#app[data-view="chat"] .date { justify-self: end; text-align: right; margin-right: 22px; }
#app[data-view="chat"] .top { grid-template-columns: 1fr auto auto; }
.top-right { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.pill {
  background: rgba(40,40,44,0.45);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .2s, background .2s;
}
.pill.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
.pill.status.off i { background: var(--red); }
.pill.status b { font-weight: 500; }
.pill.danger { color: var(--red); border-color: rgba(255,107,107,0.6); background: transparent; font-weight: 600; }
.pill.danger.on { background: var(--red); color: #160606; }
#new-chat .ic { font-size: 15px; line-height: 1; transition: transform .4s ease; }
#new-chat:hover .ic { transform: rotate(-180deg); }
#app[data-view="panel"] #new-chat { display: none; }
.pill:hover { border-color: rgba(255,255,255,0.28); background: rgba(52,52,57,0.55); }

/* chat */
.view { flex: 1; overflow-y: auto; padding: 0 var(--gutter); scrollbar-width: thin; scrollbar-color: #333 transparent; }
.hero { min-height: 58vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 88px); margin: 0; line-height: 1; letter-spacing: -0.01em; }
.hero h1 em { font-style: italic; }
.hero p { color: #cfcdc9; font-size: clamp(15px, 1.2vw, 17px); margin: 14px 0 0; }
#chat-view { display: flex; flex-direction: column; }
.thread { width: 100%; max-width: 720px; margin: auto auto 0; padding: 24px 0 120px; display: flex; flex-direction: column; gap: 18px; }
.msg { max-width: 82%; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; animation: pop .35s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.msg.user { align-self: flex-end; background: #232327; color: var(--text); font-size: 14px; padding: 9px 16px; border-radius: 18px; }
.msg.user .att { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg.user .att span { background: rgba(255,255,255,0.08); border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.msg.assistant, .msg.note { align-self: flex-start; font-size: 15px; }
.msg.assistant { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; max-width: 88%; }
.msg.assistant .av { color: var(--text); font-size: 12px; line-height: 1; }
.msg.assistant .who { font-size: 12px; color: var(--muted); white-space: normal; }
.msg.assistant .who b { color: var(--text); font-weight: 700; margin-right: 6px; }
.msg.assistant .body { grid-column: 1 / -1; margin-top: 6px; }
.msg.note { color: var(--muted); font-size: 14px; font-style: italic; }
.msg .sys { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; }
.chip { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--card-line); background: var(--card); font-size: 14px; }
.typing { display: inline-flex; gap: 5px; padding: 8px 0 4px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: #cfcdc9; animation: wave 1s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: .15s } .typing span:nth-child(3) { animation-delay: .3s }
@keyframes wave { 0%, 60%, 100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-6px); opacity: 1 } }

/* composer + buttons */
.composer {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px; width: min(720px, calc(100% - 2 * var(--gutter)));
  display: flex; align-items: center; gap: 6px; padding: 6px;
  background: rgba(36,36,40,0.55); border-radius: 26px; z-index: 5;
}
.composer textarea {
  flex: 1; resize: none; border: 0; outline: 0; background: transparent; font-size: 15px; line-height: 1.4;
  max-height: 160px; padding: 8px 6px;
}
.composer textarea::placeholder { color: #a6a5a1; }
.btn-icon { background: none; border: 0; color: var(--muted); padding: 8px; cursor: pointer; display: grid; place-items: center; transition: color .2s; }
.btn-icon:hover { color: #fff; }
.btn-send { background: #fff; border: 0; border-radius: 50%; width: 36px; height: 36px; color: #111; display: grid; place-items: center; cursor: pointer; transition: background .3s ease, color .3s ease, transform .2s ease; }
.btn-send svg { transition: transform .35s var(--ease-smooth); }
.btn-send:disabled { background: rgba(255,255,255,.08); color: rgba(255,255,255,.32); cursor: default; }
.btn-send:not(:disabled):hover { transform: scale(1.06); }
.btn-send:not(:disabled):hover svg { transform: translateY(-1px); }
.btn-send:not(:disabled):active { transform: scale(.94); }
.voice-toggle {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; gap: 6px; transition: all .2s; color: var(--muted);
}
.voice-toggle.on { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: #fff; }
.voice-toggle .vo { width: 10px; height: 10px; border-radius: 50%; background: #6c74d8; }

/* chat + voice layout: ONE grid transition, soft ease-out, no overshoot */
:root { --ease-smooth: cubic-bezier(.32, .72, 0, 1); }
#chat-view { display: grid; grid-template-columns: 1fr 0fr; transition: grid-template-columns .7s var(--ease-smooth); }
.chat-stage { min-width: 0; display: flex; flex-direction: column; }
.voice-stage {
  min-width: 0; overflow: hidden; align-self: start; position: sticky; top: 0;
  height: calc(100dvh - 170px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
#app.is-voice-mode #chat-view { grid-template-columns: 55fr 45fr; }
#app.is-voice-mode .voice-stage { opacity: 1; pointer-events: auto; transition: opacity .6s ease .12s; }
@media (prefers-reduced-motion: reduce) { #chat-view, .voice-stage, .orb-container { transition: none !important; } }

/* orb: scales with the window (up to 480px, shrinks with width AND height) */
.orb-container {
  width: min(480px, 100%, 60vh);
  aspect-ratio: 1;
  display: grid; place-items: center;
  transform: scale(.94);
  transition: transform .7s var(--ease-smooth);
}
#app.is-voice-mode .orb-container { transform: none; }
#orb-canvas { width: 100%; height: 100%; }

.menu { position: absolute; bottom: 60px; left: 0; background: #1b1b1e; border: 1px solid var(--card-line); border-radius: 18px; padding: 6px; min-width: 230px; }
.menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 12px 14px; border-radius: 12px; }
.menu button:hover { background: rgba(255,255,255,0.06); }

/* panel */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 22px 0 110px; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card {
  background: linear-gradient(160deg, rgba(42,42,46,0.55), rgba(24,24,27,0.55));
  border-radius: var(--r); padding: 20px 22px;
}
.card.soon { opacity: .45; }
.card h6 { margin: 0 0 12px; font-size: 10.5px; letter-spacing: 0.24em; font-weight: 700; text-transform: uppercase; color: #d9d8d4; }
.big-serif { font-family: var(--serif); font-size: 32px; line-height: 1.1; margin: 4px 0 8px; }
.muted { color: var(--muted); line-height: 1.5; margin: 0; }
.rows { margin-top: 10px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); color: #c9c8c4; font-size: 13.5px; }
.row b { color: var(--text); font-weight: 600; text-align: right; }
.row small { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; }
.row select, .inline { background: rgba(255,255,255,0.05); border: 1px solid var(--card-line); border-radius: 10px; padding: 6px 10px; outline: 0; max-width: 150px; }
.row select option { background: #1b1b1e; }
.inline.num { width: 80px; text-align: right; }
.tog { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: rgba(255,255,255,0.14); position: relative; cursor: pointer; flex: none; transition: background .2s; }
.tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
.tog:checked { background: var(--green); }
.tog:checked::after { left: 21px; }
.seg { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid var(--card-line); border-radius: 99px; padding: 4px; margin: 6px 0 4px; }
.seg button { border: 0; background: none; padding: 6px 15px; font-size: 13px; border-radius: 99px; color: var(--muted); font-weight: 600; }
.seg button.on { background: #fff; color: #111; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn { border: 1px solid rgba(255,255,255,0.18); background: transparent; border-radius: 99px; padding: 8px 16px; font-weight: 600; font-size: 13px; }
.btn.primary { background: #fff; color: #111; border-color: #fff; }
.btn.small { padding: 6px 12px; font-size: 12px; }
.btn:hover { border-color: rgba(255,255,255,0.4); }
.list .item { padding: 11px 0; border-top: 1px solid var(--line); }
.list .item:first-child { border-top: 0; padding-top: 2px; }
.list .item p { margin: 0 0 10px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.list .empty { color: var(--faint); padding: 4px 0; }
.log .item { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: baseline; padding: 11px 0; }
.log .when { color: var(--muted); font-size: 13px; }
.log .what { font-weight: 600; font-size: 13px; line-height: 1.4; word-break: break-word; }
.log .st { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }
.log .st.failed, .log .st.blocked { color: var(--red); }
.log .st.undone, .log .st.declined { text-decoration: line-through; }
.log button { font-size: 12px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--card-line); background: none; color: var(--muted); }
#log { max-height: 520px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; }

/* login box */
#login { align-items: center; justify-content: center; padding: 16px; }
.login-box {
  width: min(400px, 90%);
  text-align: center;
  background: linear-gradient(160deg, rgba(42,42,46,0.7), rgba(24,24,27,0.7));
  border-radius: var(--r);
  padding: 36px 32px;
  border: 1px solid var(--card-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 18px 50px rgba(0,0,0,0.45);
}
.login-box .sub { color: var(--muted); margin: 10px 0 26px; font-family: var(--serif); font-size: 22px; font-style: italic; }
.login-box form { display: flex; flex-direction: column; gap: 12px; }
.login-box input, .field { width: 100%; padding: 12px 18px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.16); background: rgba(36,36,40,0.72); outline: 0; font-size: 16px; }
.err { color: var(--red); min-height: 20px; }
.hint { color: var(--faint); font-size: 13px; margin-top: 8px; }

/* desktop app (Electron): login box is not draggable, only the header */
.desktop #login { -webkit-app-region: drag; }
.desktop .login-box { -webkit-app-region: no-drag; }

/* modal + toast */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: grid; place-items: center; z-index: 20; padding: 16px; }
.modal-box { position: relative; width: min(640px, 100%); max-height: 85vh; overflow-y: auto; background: rgba(22,22,24,0.88); border-radius: var(--r); padding: 28px; }
.modal-box h3 { margin: 0 0 16px; font-family: var(--serif); font-weight: 500; font-size: 32px; }
.modal-box .x { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 28px; color: var(--muted); }
.modal-box p { color: #c9c8c4; line-height: 1.5; }
.modal-box textarea.field { border-radius: 14px; min-height: 70px; resize: vertical; }
.mem-item { border-top: 1px solid var(--line); padding: 12px 0; }
.mem-item .meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.tag { border: 1px solid var(--card-line); border-radius: 99px; padding: 2px 8px; font-size: 11px; }
.tag.guess { border-color: #e0b85a; color: #e0b85a; }
.toast { position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%); background: #fff; color: #111; padding: 12px 20px; border-radius: 99px; font-weight: 600; z-index: 30; max-width: calc(100% - 32px); }

/* responsive */
@media (max-width: 1280px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  body { font-size: 14px; }
  .top { grid-template-columns: 1fr auto !important; padding-top: 18px; row-gap: 10px; }
  .brand { font-size: 21px; }
  .date { display: none; }
  .pill { padding: 8px 12px; font-size: 13px; }
  .pill.status b { display: none; }
  .grid { grid-template-columns: 1fr; gap: 16px; }
  .col:nth-child(3) { order: -1; }   /* approvals + activity first on phone */
  .col { gap: 16px; }
  .card { padding: 22px 20px; }
  .composer { width: calc(100% - 24px); bottom: max(12px, env(safe-area-inset-bottom)); padding: 6px; gap: 6px; }
  .round { width: 38px; height: 38px; font-size: 20px; }
  .composer textarea { font-size: 16px; }
  .msg { max-width: 92%; }
  .hero { min-height: 55vh; }
}

/* attachments */
.chips { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 8px); display: flex; flex-wrap: wrap; gap: 6px; }
.chips:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 6px 8px 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: rgba(40,40,44,0.6); animation: pop .25s ease; }
.fchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); display: grid; place-items: center; font-size: 13px; line-height: 1; padding: 0; }
.fchip button:hover { background: rgba(255,255,255,0.25); }

/* little interactive touches */
.round, .btn, .seg button, .pill { transition: transform .15s ease, background .2s, border-color .2s, opacity .2s; }
.round:active, .btn:active, .pill:active { transform: scale(.94); }
.round.ghost:hover { background: rgba(255,255,255,0.07); }
.round.solid:hover { transform: scale(1.05); }
.card { transition: transform .3s ease, border-color .3s; }
.card:not(.soon):hover { border-color: rgba(255,255,255,0.16); }
.composer:focus-within { border-color: rgba(255,255,255,0.22); }

/* desktop app (Electron): header is the window's drag bar, leave room for window buttons */
.desktop .top { -webkit-app-region: drag; padding-right: calc(var(--gutter) + 128px); }
.desktop .top button, .desktop .top .pill, .desktop .top a { -webkit-app-region: no-drag; }
.desktop #lock { -webkit-app-region: drag; }
.desktop .lock-box { -webkit-app-region: no-drag; }

/* ---- voice button + orb ---- */


/* narrow windows / phones: orb slides in on top, chat below */
@media (max-width: 760px) {
  #chat-view { grid-template-columns: 1fr; grid-template-rows: 0px 1fr; transition-property: grid-template-rows; }
  .voice-stage { grid-row: 1; position: static; height: auto; align-self: stretch; }
  .chat-stage { grid-row: 2; }
  .orb-container { width: min(480px, 100%, 34vh); }
  #app.is-voice-mode #chat-view { grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; }
}

/* ===== redesign pass ===== */

/* header */
.top, #app[data-view="chat"] .top { display: flex; align-items: center; gap: 14px; padding-top: 16px; }
.brand-wrap { display: flex; align-items: center; gap: 10px; }
.brand { font-size: 21px; }
.status { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 99px; color: var(--muted); font-size: 11px; letter-spacing: .04em; transition: background .25s; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(95,211,138,.7); }
.status.off i { background: var(--red); box-shadow: 0 0 8px rgba(255,107,107,.6); }
.status b { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 500; transition: max-width .3s ease, margin .3s ease; }
.status:hover { background: rgba(255,255,255,.06); }
.status:hover b { max-width: 80px; margin-left: 6px; }

.top .date, #app[data-view="chat"] .date { display: flex; align-items: baseline; margin: 0 0 0 auto; text-align: left; justify-self: auto; }
.date small { display: inline; font-size: 11px; letter-spacing: .14em; }
.date small::after { content: "\00b7"; margin: 0 7px; color: var(--faint); }
.date div { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.top-right { gap: 4px; }
@media (max-width: 760px) { .top .date { display: none; } }

.icon-btn { position: relative; width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--muted); display: grid; place-items: center; transition: color .2s, background .2s, border-color .2s, transform .15s; }
.icon-btn:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10); }
.icon-btn:active { transform: scale(.94); }
#view-toggle .i-chat { display: none; }
#app[data-view="panel"] #view-toggle .i-panel { display: none; }
#app[data-view="panel"] #view-toggle .i-chat { display: block; }
#view-toggle.has-badge::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #e0b85a; }

/* chat bubbles */
.thread { gap: 14px; }
.msg { max-width: 78%; font-size: 14.5px; }
.msg.user { background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.08); padding: 10px 15px; border-radius: 18px 18px 6px 18px; }
.msg.assistant { max-width: 82%; padding: 11px 15px 13px; border-radius: 18px 18px 18px 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.msg.assistant .av { font-size: 9px; color: var(--muted); }
.msg.assistant .who { font-size: 11px; color: var(--faint); letter-spacing: .04em; }
.msg.assistant .who b { color: var(--muted); font-weight: 600; }
.msg.assistant .body { margin-top: 5px; }

/* composer + voice button */
.composer { border-radius: 22px; background: rgba(28,28,32,.6); }
.composer .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; transition: color .25s ease, background .25s ease, box-shadow .4s ease; }
.composer .btn-icon:hover { background: rgba(255,255,255,.06); color: #fff; }
.composer .voice-btn { background: rgba(255,255,255,.06); }
.composer .voice-btn:hover { background: rgba(255,255,255,.1); }
.composer .voice-btn.on { color: #fff; background: rgba(185,194,255,.18); box-shadow: 0 0 0 1px rgba(185,194,255,.4); }
.composer .voice-btn.on.speaking { box-shadow: 0 0 0 1px rgba(185,194,255,.5), 0 0 16px rgba(170,180,255,.3); }

/* login: smaller, boxier, animated in/out */
#login { transition: opacity .45s ease; }
#login.leaving { opacity: 0; }
.login-box { width: min(340px, 88%); border-radius: 18px; padding: 30px 26px; animation: loginIn .6s cubic-bezier(.16,1,.3,1) backwards; transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1); }
#login.leaving .login-box { opacity: 0; transform: scale(.94) translateY(-8px); }
@keyframes loginIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.brand.big { font-size: 30px; }
.login-box .sub { font-size: 19px; margin: 8px 0 22px; }
.login-box input { border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.login-box input:focus { border-color: rgba(255,255,255,.34); }
.login-box .btn { border-radius: 12px; padding: 11px 16px; }

/* app fades in after unlock */
#app { transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1); }
#app.entering { opacity: 0; transform: translateY(14px) scale(.985); }