/* Base reset (what the artifact host used to provide) */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Sunghyun Sans (SIL OFL 1.1, see fonts/OFL.txt), subset to Latin.
   Chinese falls through to Noto Sans SC, loaded only at 600: a 500 request picks that face,
   which balances the optically lighter Han glyphs against the Latin. */
@font-face{font-family:"Sunghyun Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/SunghyunSans-Regular.latin.woff2") format("woff2")}
@font-face{font-family:"Sunghyun Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/SunghyunSans-Medium.latin.woff2") format("woff2")}
@font-face{font-family:"Sunghyun Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/SunghyunSans-SemiBold.latin.woff2") format("woff2")}

/* Layout: one quiet centered column. A single turnable 3D building carries all the color; every control lives in a fixed footer. */
:root{
  --bg:#fcfcfb; --fg:#1c1b19; --fg-2:#8c8a85; --fg-3:#d2cfc9;
  --chip:#f1f0ed; --chip-hover:#e7e5e1; --line:#ecebe7;
  --tip-bg:#1c1b19; --tip-fg:#fcfcfb; --menu-bg:#ffffff;
  --hot:#ff9500; --sep-o:.28;
  --shadow:0 10px 30px rgba(28,24,18,.10), 0 1px 3px rgba(28,24,18,.06);
  --font-body:"Sunghyun Sans", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-zh:"Sunghyun Sans", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.45,.64,1);
}
html,body{height:100%}
html{scrollbar-gutter:stable}
body{
  background:var(--bg); color:var(--fg);
  font:500 16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
html[lang^="zh"] body{font-family:var(--font-zh)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:6px}

/* ---------- hero ---------- */
.hero{
  min-height:calc(100svh - 72px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;padding-block:40px 24px;
}
.stage{position:relative;width:min(380px,88vw);aspect-ratio:380/300;max-width:100%}
.stage canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y;border-radius:14px;
  opacity:0;filter:blur(14px);transform:scale(1.02);
  transition:opacity .45s var(--ease), filter .7s var(--ease), transform .7s var(--ease);
}
.stage.rendered canvas{opacity:1}
.stage.ready canvas{filter:none;transform:none}
.stage.swapping canvas{opacity:0;filter:blur(10px);transform:scale(.985);transition-duration:.22s}
.stage.grabbing canvas{cursor:grabbing}

.bio{max-width:24em;margin:0;text-align:center;text-wrap:balance}
.lk{
  appearance:none;background:none;border:0;padding:0;margin:0;
  color:var(--fg-2);cursor:pointer;font:inherit;line-height:inherit;
  transition:color .15s var(--ease);
}
.lk:hover{color:var(--fg)}
.swap{transition:opacity .17s var(--ease), filter .17s var(--ease)}
.swap.out{opacity:0;filter:blur(3px)}

/* ---------- work ---------- */
.work{max-width:24em;margin:0 auto;padding-block:8px 150px}
.work h2{font-size:14px;font-weight:500;color:var(--fg-2);margin:0 0 6px;letter-spacing:.01em}
.work ul{list-style:none;margin:0;padding:0}
.work li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--line)}
.work li span:first-child{min-width:0}
.work .yr{font-size:14px;color:var(--fg-2);font-variant-numeric:tabular-nums;padding-top:2px}

/* ---------- footer ---------- */
.foot{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:14px max(18px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  background:linear-gradient(to top, var(--bg) 60%, color-mix(in srgb, var(--bg) 0%, transparent));
}
.foot .left{justify-self:start;min-width:0}
.foot .right{justify-self:end;display:flex;gap:6px}
.grp{display:flex;gap:6px;align-items:center}
.grp.pop{animation:pop .32s var(--spring)}
@keyframes pop{from{opacity:0;transform:translateY(5px) scale(.96)}}
.links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 9px;color:var(--fg-2);font-size:15px}
.links a,.links button{color:var(--fg-2);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;transition:color .15s var(--ease)}
.links a:hover,.links button:hover{color:var(--fg)}
.links .dot{color:var(--fg-3);user-select:none}
/* the footer sentence: the trust line's text; "Apers" is set off by --fg alone, underlined only on hover */
.foot-note{margin:0;font-size:13px;line-height:1.55;color:var(--fg-2);text-align:center;text-wrap:balance}
.foot-note .lk{color:var(--fg);text-decoration:none;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--fg-3)}
.foot-note .lk:hover{text-decoration:underline}

.pill{
  appearance:none;border:0;text-decoration:none;background:var(--chip);color:var(--fg);
  font-size:14px;line-height:1;height:32px;padding:0 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;
  transition:background-color .15s var(--ease), transform .18s var(--ease);
}
.pill:hover{background:var(--chip-hover)}
.pill:active{transform:scale(.95)}
.pill.icon{width:32px;padding:0;justify-content:center}
.pill svg{width:14px;height:14px;flex:none}
.chev{transition:transform .25s var(--spring)}
[aria-expanded="true"] .chev{transform:rotate(180deg)}

.search{gap:0;padding:0 9px;cursor:text}
.search input{
  appearance:none;border:0;background:none;outline:none;color:var(--fg);font:inherit;font-size:14px;
  width:0;opacity:0;padding:0;
  transition:width .38s var(--spring), opacity .2s var(--ease), padding .3s var(--ease);
}
.search.open input{width:150px;opacity:1;padding-left:7px}
.search input::placeholder{color:var(--fg-2)}
.search input::-webkit-search-cancel-button{display:none}
.search:focus-within{outline:2px solid var(--fg);outline-offset:2px}

.menu-wrap{position:relative}
.menu{
  position:absolute;left:0;bottom:42px;z-index:40;
  display:grid;grid-template-columns:repeat(2, minmax(max-content, 1fr));gap:2px;
  padding:6px;
  background:var(--menu-bg);
  background:color-mix(in srgb, var(--menu-bg) 86%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  visibility:hidden;pointer-events:none;
}
.menu.open{visibility:visible;pointer-events:auto}
.menu.ghosting{visibility:hidden}
.menu button{
  appearance:none;border:0;background:none;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:9px;padding:8px 14px 8px 10px;border-radius:11px;
  font-size:15px;color:var(--fg);white-space:nowrap;transition:background-color .15s var(--ease);
}
.menu button:hover,.menu button:focus-visible{background:var(--chip)}
.menu .ic{width:17px;height:17px;flex:none}
.menu .dot{width:6px;height:6px;border-radius:50%;background:var(--hot);flex:none;opacity:0;transform:scale(.3);transition:opacity .2s var(--ease), transform .35s var(--spring)}
.menu [aria-checked="true"] .dot{opacity:1;transform:none}
.genie-band{position:absolute;overflow:hidden;transform-origin:0 0;pointer-events:none;z-index:41;will-change:transform}
.genie-band > .menu{visibility:visible !important;opacity:1;left:0;bottom:auto;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--menu-bg);box-shadow:none}
#btnFilter{overflow:hidden}
canvas.flying{position:fixed;z-index:25;pointer-events:none;opacity:1;filter:none;transition:none;border-radius:0;display:block;margin:0;transform-origin:0 0;will-change:transform}
.ghost-word{position:fixed;z-index:26;pointer-events:none;white-space:nowrap;transform-origin:0 0;will-change:transform}
.item.fly-hide .pic img{opacity:0 !important;transition:none !important}
.item.fly-hide .with{color:transparent}
.item .with{transition:color .3s var(--ease)}
.item .with [data-n]{color:var(--fg-2)}

@media (max-width:640px){
  .foot{grid-template-columns:1fr auto}
  .links{grid-column:1/-1;order:-1}
  .hero{min-height:calc(100svh - 110px)}
}

/* ---------- timeline ---------- */
.tl{
  position:fixed;inset:0;z-index:20;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:24px 96px;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease), visibility 0s .35s;
}
body.tl-open .tl{opacity:1;visibility:visible;transition-delay:0s}
body.tl-open{overflow:hidden}
.strip{
  display:flex;align-items:flex-start;gap:6px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding-inline:calc(50% - 110px);padding-block:6px 10px;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.strip::-webkit-scrollbar{display:none}
.item{
  flex:0 0 220px;scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  appearance:none;border:0;background:none;padding:0;cursor:pointer;
  opacity:.5;
  transition:opacity .35s var(--ease), transform .6s var(--spring);
}
.item:hover{opacity:.8}
.item.active{opacity:1}
.item.pre{opacity:0;transform:translateY(24px) scale(.96)}
.item .date{font-size:14px;color:var(--fg-2);margin-bottom:14px;font-variant-numeric:tabular-nums}
.item .pic{width:220px;height:240px;display:block;position:relative}
.item .pic img{
  width:100%;height:100%;display:block;object-fit:contain;
  transition:filter .55s var(--ease), transform .45s var(--spring), opacity .4s var(--ease);
}
.item .pic img:not([src]){opacity:0}
.item .pic img.lo{filter:blur(9px);opacity:.6}
.item:hover .pic img{transform:translateY(-5px)}
.item .name{margin-top:12px;color:var(--fg)}
.item .with{font-size:15px;color:var(--fg-2);line-height:1.45;max-width:200px}
.strip.fade{opacity:0;transition:opacity .12s}
.strip{transition:opacity .2s var(--ease)}
.empty{height:350px;display:grid;place-items:center;color:var(--fg-2);text-align:center;padding-inline:24px}

.strip{position:relative;flex-shrink:0}
[hidden]{display:none!important}
.tl-feature{flex-shrink:0;height:36px;display:flex;justify-content:center;align-items:center;margin-top:6px}
.tl-feature .pill[hidden]{display:none}
.tl-zone{
  position:relative;flex-shrink:0;width:min(560px, calc(100% - 48px));height:104px;margin:4px auto 0;
  touch-action:none;user-select:none;-webkit-user-select:none;outline:none;cursor:default;
}
.tl-zone.held{cursor:none}
.tl-field{position:absolute;inset:0;pointer-events:none}
.tl-tick,.tl-sep,.tl-cap{position:absolute;left:0;top:0;border-radius:999px;background:var(--fg);pointer-events:none;will-change:transform,height,opacity}
.tl-tick{width:3px;height:8px;opacity:0}
.tl-sep{width:3px;height:14px;opacity:var(--sep-o)}
.tl-cap{width:3px;height:7px;background:var(--hot);opacity:0;z-index:3}
.tl-num{
  position:absolute;left:0;top:0;opacity:0;pointer-events:none;white-space:nowrap;z-index:3;
  font-weight:600;font-size:17px;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg);
  will-change:transform,opacity;
}
.tl-num.cur{color:var(--hot)}
.tl-date{
  position:absolute;left:0;top:0;opacity:0;pointer-events:none;z-index:4;
  font-size:20px;font-weight:500;line-height:1.3;white-space:pre;font-variant-numeric:tabular-nums;color:var(--fg);
  will-change:transform,opacity;
}
.tl-date .grp{display:inline-block;position:relative}
.tl-date .ghost{position:absolute;left:0;top:0;white-space:pre}
.reel{display:inline-block;position:relative;height:1.3em;vertical-align:top;transition:width .52s cubic-bezier(.4,0,.2,1)}
.reel>span{position:absolute;left:0;top:0;white-space:pre}

@media (max-width:520px){
  .item{flex-basis:178px}
  .item .pic{width:178px;height:194px}
  .strip{padding-inline:calc(50% - 89px)}
  .empty{height:300px}
}

/* ---------- tooltip & toast ---------- */
#tip{
  position:fixed;left:0;top:0;z-index:80;pointer-events:none;   /* above sheets (70): a mark or faces inside a sheet show their tip */
  background:var(--tip-bg);color:var(--tip-fg);
  font-size:13px;line-height:1.35;padding:6px 10px;border-radius:9px;white-space:nowrap;
  opacity:0;transform:translate(-50%, calc(-100% + 5px));
  transition:opacity .14s var(--ease), transform .22s var(--ease);
}
#tip.on{opacity:1;transform:translate(-50%,-100%)}
#tip.wrap{white-space:normal;width:max-content;max-width:min(320px, calc(100vw - 32px));text-align:center}
#toast{
  position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom, 0px));z-index:60;
  background:var(--tip-bg);color:var(--tip-fg);font-size:14px;padding:9px 14px;border-radius:999px;
  opacity:0;transform:translate(-50%,10px) scale(.97);pointer-events:none;
  transition:opacity .2s var(--ease), transform .35s var(--spring);
  user-select:text;max-width:calc(100vw - 32px);
}
#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important}
}

/* =========================================================
   Track Record prototype additions
   Only existing tokens. Cards are hairlines + whitespace.
   ========================================================= */

/* base: weights only come from these rules, never from browser bold defaults */
h1,h2,h3,h4,b,strong,th{font-weight:inherit}

/* nav */
.nav{
  position:relative;z-index:10;height:56px;max-width:1120px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.wordmark{font-size:16px;font-weight:600;line-height:1;color:var(--fg);text-decoration:none;white-space:nowrap}
.wordmark span{font-size:12px;font-weight:500;color:var(--fg-2);letter-spacing:0}   /* the space in the text is the gap */
.wordmark.small{font-size:13px;font-weight:500;color:var(--fg-2)}
.wordmark.small span{font-size:12px;margin-left:2px}
.nav-right{position:relative;display:flex;align-items:center;gap:10px}
/* the account menu: lin-qi's .menu in one column, its right edge on the avatar's, dropping from it
   (lin-qi's pop motion turned downward; it fades out on close) */
.acct-menu{left:auto;right:0;bottom:auto;top:calc(100% + 8px);grid-template-columns:1fr;width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;transform-origin:top right}
.acct-menu.open{animation:drop .32s var(--spring)}
.acct-menu.closing{opacity:0;transition:opacity .2s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-5px) scale(.96)}}
.acct-head{padding:8px 14px 8px 10px}
/* the name reuses .team-org (an approved 600 name style, 16px) */
.acct-head .team-org{margin-bottom:0;color:var(--fg)}
.acct-title{font-size:13px;line-height:1.4;color:var(--fg-2);margin-top:2px}
.acct-sep{height:1px;background:var(--line);margin:4px 0}
/* the nav search (js/search.js): the account menu's panel (.menu.acct-menu: its place under the nav's right edge, its
   drop and fade), as wide as the nav on a phone; its box is the complete track record's .search pill, open; its rows are the
   suggestion list's (TR.combobox), left-aligned under small .o-label group names */
.srch-menu{width:360px}
/* inside the panel the box nests: its radius is the panel's 18px less its 6px padding and 1px border (11px, the rows' own),
   and its magnifier sits 10px in, on the line of the group names and the pictures below */
.srch-menu .search{display:flex;border-radius:11px;padding:0 9px 0 10px}
.srch-menu .search.open input{width:100%;min-width:0}
/* no ring: the box is focused as the panel opens, and the caret already says where typing goes (the user's call) */
.srch-menu .search:focus-within{outline:0}
.srch-menu .add-results:empty{display:none}   /* no results yet: no margin or gap under the box, so it sits evenly in the panel */
.srch-menu .o-label{text-align:left;margin:8px 10px 4px}
.srch-menu .add-hit-deal{margin:0;white-space:normal}
.srch-menu .rq-empty{margin:0;padding:8px 10px}
@media (max-width:640px){.srch-menu{left:0;width:auto;transform-origin:top center}}
/* on a narrow phone the nav's pills keep their first word (their names stay whole for screen readers), so the
   search pill fits beside them without wrapping the nav */
@media (max-width:420px){#navJoin .nav-long{display:none}}
@media (max-width:360px){#navAdd .nav-long{display:none}.nav-right{gap:8px}}
.nav-link{white-space:nowrap;font-size:13px;color:var(--fg-2);text-decoration:none;padding:6px 8px;border-radius:11px;transition:color .15s var(--ease), background-color .15s var(--ease)}
.nav-link:hover{color:var(--fg);background:var(--chip)}
.nav-link span{color:var(--fg);font-variant-numeric:tabular-nums;margin-left:2px}
.nav-link.active{color:var(--fg)}
.nav-link:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.nav-link[hidden],.nav-pill[hidden],.nav-bell[hidden]{display:none}
.nav-bell{text-decoration:none;background:none;overflow:hidden}
.nav-bell:hover{background:var(--chip)}
.nav-bell span{font-size:13px;font-variant-numeric:tabular-nums}
.nav-bell:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.rq-face img{width:100%;height:100%;object-fit:contain;display:block}
/* on a phone "by Apers" sits under "Track Record" (never dropped: the product builds awareness for Apers);
   the logo inside the complete track record matches the nav exactly */
@media (max-width:420px){.nav .wordmark span,.tl-logo .wordmark span{display:block;margin:3px 0 0;line-height:1}}
.nav-pill{text-decoration:none}
.tl-logo .wordmark{pointer-events:auto}
/* add deal */
.add-view .claim-title{margin-top:0}
.add-drop{display:flex;flex-direction:column;align-items:center;gap:6px;margin:22px 0 0;padding:36px 20px;border:1px dashed var(--fg-3);border-radius:18px;text-align:center;cursor:pointer;transition:background-color .15s var(--ease), border-color .15s var(--ease)}
.add-drop:hover,.add-drop.over{background:var(--chip);border-color:var(--fg-2)}
.add-drop:focus-within{outline:2px solid var(--fg);outline-offset:2px}
.add-drop-title{font-size:16px;color:var(--fg)}
.add-drop-sub{font-size:13px;color:var(--fg-2);margin-bottom:10px}
.add-sample{margin:12px 0 0;text-align:center}
.add-sample .lk,.add-back .lk,.add-edit{font-size:13px;color:var(--fg-2)}
.add-sample .lk:hover,.add-back .lk:hover,.add-edit:hover{color:var(--fg)}
.add-back{margin:14px 0 0;text-align:center}
.add-view .claim-list{margin:18px 0 22px}
.add-row{align-items:flex-start;cursor:default}
.add-row:hover{background:none}
.add-row .claim-pic{width:52px;height:52px}
.add-row .team-who{flex:1;min-width:0}
.add-edit{margin-left:auto;align-self:center}
.add-row .claim-mark,.add-view .claim-mark{border:0;background:none;padding:4px;cursor:pointer;align-self:center;border-radius:50%}
.add-view .claim-mark:focus-visible{outline:2px solid var(--fg);outline-offset:1px}
.add-people{display:flex;align-items:center;gap:0;margin-top:6px;font-size:12px;color:var(--fg-2)}
.add-people > span:last-child{margin-left:8px}
.add-faces{display:flex}
.add-face{width:20px;height:20px;border-radius:50%;overflow:hidden;background:var(--chip);box-shadow:0 0 0 2px var(--bg);margin-left:-4px}
.add-face:first-child{margin-left:0}
.add-face svg{display:block;width:100%;height:100%}
.add-face.unclaimed svg{filter:grayscale(1);opacity:.72}
.add-pending{opacity:0;transform:translateY(6px)}
.add-found .add-row{transition:opacity .35s var(--ease), transform .35s var(--ease)}
/* someone to invite by email: the face sits by their name, the text column takes the row's width so every email
   box is the same width, and the row isn't a button (no hover) */
.team-person.add-invite{align-items:flex-start;cursor:default}
.team-person.add-invite:hover{background:none}
.add-invite .team-who{flex:1}
.add-email{display:flex;align-items:center;gap:10px;margin-top:8px}
.add-email input{flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--fg);font:inherit;font-size:14px;padding:7px 10px;outline:none}
.add-email input:focus{border-color:var(--fg-2)}
.add-email .lk{font-size:13px;color:var(--fg-2);white-space:nowrap}
.add-email [data-copy-for]{min-width:72px;text-align:right}   /* "Copy link" and "Link copied" take the same room, so the email boxes stay equal */
.add-email.is-bad input{border-color:var(--fg)}
.add-email-err{display:block;margin-top:6px}
.add-email-err[hidden]{display:none}
.add-left{margin:14px 0 0}
.add-left:empty{display:none}
.add-invite-note{margin:22px 0 0}
.add-results{margin-top:4px}
.add-hit{padding:10px 0;border-bottom:1px solid var(--line)}
.add-hit-name{font-size:15px;margin:0 0 4px}
.add-hit-name span{font-size:13px;color:var(--fg-2);margin-left:6px}
.add-hit-deal{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:13px;color:var(--fg);padding:6px 8px;margin:0 -8px;border-radius:11px;cursor:pointer}
button.add-hit-deal:hover,.add-hit-deal[aria-selected="true"]{background:var(--chip)}   /* the firm list's active row (aria-activedescendant) looks hovered */
.add-hit-deal.is-mine{color:var(--fg-2);cursor:default}
.field select{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--fg);font:inherit;font-size:15px;line-height:1.5;padding:10px 12px;outline:none}
.field select:focus{border-color:var(--fg-2)}
.sheet .o-label{text-align:left;margin:16px 0 6px}
.add-two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.add-two .field{margin:10px 0}
.add-view .field{margin:10px 0}
.add-seg{display:flex;gap:8px;margin:0 0 4px}
.add-seg{flex-wrap:wrap}
.add-building{display:flex;align-items:center;gap:12px;padding:8px}
.add-building > span:last-child{display:flex;flex-direction:column;gap:2px}
.add-building .add-hit-name{margin:0}
.add-new-pic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--chip);font-size:20px;color:var(--fg-2)}
.add-pick{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:left;margin-left:0;padding:10px 8px}
.add-pick:disabled{cursor:default;opacity:.55}
.add-pick:disabled:hover{background:none}
.add-where select{border:0;background:none;font:inherit;font-size:13px;color:var(--fg);padding:0;cursor:pointer}
.add-suggest{display:flex;flex-wrap:wrap;gap:8px}
.add-suggest .pill{gap:8px;padding-left:6px}
.add-view .pill.wide{margin-top:24px}
.add-class{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:11px;background:var(--bg);font:inherit;color:var(--fg);padding:6px 12px 6px 6px;cursor:pointer;text-align:left;transition:border-color .15s var(--ease)}
.add-class:hover{border-color:var(--fg-2)}
.add-class img{width:56px;height:56px;display:block}
.add-class b{font-size:15px;font-weight:400}
.add-class-empty{width:56px;height:56px;border-radius:9px;background:var(--chip)}
.add-class-change{margin-left:auto;font-size:13px;color:var(--fg-2)}
.add-classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.add-class-tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 12px;border:1px solid transparent;border-radius:18px;background:none;font:inherit;font-size:13px;color:var(--fg);cursor:pointer;transition:background-color .15s var(--ease)}
.add-class-tile img{width:104px;height:104px;display:block}
.add-class-tile:hover{background:var(--chip)}
.add-class-tile.on{border-color:var(--fg-2)}
.add-class-tile:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.add-role-icon{width:40px;height:40px;flex:none;border-radius:50%;background:var(--chip);display:grid;place-items:center;color:var(--fg)}
.add-role-icon svg{width:18px;height:18px}
.add-role{padding:6px 12px 6px 6px}
.add-role .add-class-empty{width:40px;height:40px;border-radius:50%}
.add-roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px}
.add-role-tile{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid transparent;border-radius:11px;background:none;font:inherit;font-size:14px;color:var(--fg);cursor:pointer;text-align:left;transition:background-color .15s var(--ease)}
.add-role-tile:hover{background:var(--chip)}
.add-role-tile.on{border-color:var(--fg-2)}
.add-role-tile:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.field.is-missing input,.field.is-missing select,.field.is-missing .add-class{border-color:var(--fg)}
.field-err{font-style:normal;font-size:13px;color:var(--fg)}
.add-note{font-size:13px;color:var(--fg-2);line-height:1.5;margin:0}
.add-link-note{margin:10px 0 0}
.add-default{display:flex;align-items:center;gap:12px;margin:14px 0 0;font-size:13px;color:var(--fg-2)}
.add-default img{width:72px;height:72px}
.a-price-note{color:var(--fg-2)}
.add-nudge{font-size:13px;color:var(--fg-2);line-height:1.5;margin:16px 0 0}
.add-photo{max-width:100%;max-height:240px;border-radius:11px;display:block}
.a-note{font-size:13px;color:var(--fg-2);margin:6px 0 0}
@media (max-width:640px){.add-two{grid-template-columns:1fr}}
/* requests */
.rq-view{max-width:560px;margin:0 auto;padding:40px 0 128px}
.rq-view .o-label{text-align:left;margin:28px 0 4px}
.rq-intro{font-size:14px;color:var(--fg-2);line-height:1.5;margin:0}
.rq{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.rq-face{width:40px;height:40px;flex:none;padding:0;border:0;border-radius:50%;overflow:hidden;background:var(--chip);cursor:pointer}
.rq-face svg{display:block;width:100%;height:100%}
.rq-face:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.rq-body{min-width:0;flex:1}
.rq-text{font-size:15px;line-height:1.45;margin:0;color:var(--fg)}
.rq-text b{font-weight:500}
.rq-text .lk{font-size:15px;color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--fg-3)}
.rq-sub{font-size:13px;color:var(--fg-2);line-height:1.45;margin:3px 0 0}
.rq-result{display:flex;align-items:center;gap:6px;color:var(--fg)}
.rq-actions{display:flex;align-items:center;gap:14px;margin-top:10px}
.rq-actions .lk{font-size:13px;color:var(--fg-2)}
.rq-actions .lk:hover{color:var(--fg)}
.rq-empty{font-size:14px;color:var(--fg-2);line-height:1.5;margin:8px 0 0}
.nav-avatar{width:28px;height:28px;padding:0;border:0;border-radius:50%;overflow:hidden;background:var(--chip);cursor:pointer}
.nav-avatar[hidden]{display:none}
.nav-avatar svg{display:block;width:100%;height:100%}

/* global stage */
#stage{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;
  display:none;border-radius:0;
}
#stage canvas{opacity:0;filter:none;transform:none;transition:opacity .4s var(--ease)}
#stage.rendered canvas{opacity:1;filter:none;transform:none}
.stage-slot{position:relative;width:100%;height:100%}
.stage-slot .stage{position:absolute;inset:0}

/* person */
/* first screen: the person, then their deals. The strip is the centerpiece; the sentence captions the selected card */
.p-view{max-width:1120px;margin:0 auto;box-sizing:border-box;min-height:calc(100svh - 56px);padding:16px 0 72px;display:flex;flex-direction:column;justify-content:center}
.p-portrait{width:104px;height:104px;margin:0 auto;border-radius:50%;overflow:hidden;background:var(--chip)}
.p-portrait svg{display:block;width:100%;height:100%}
/* your own portrait opens the photo sheet */
button.p-portrait{display:block;padding:0;border:0;cursor:pointer}
.p-portrait:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
/* the photo sheet: the add-deal drop zone, with your face above it; the file input stays focusable so the
   drop zone shows keyboard focus */
.photo-drop{position:relative}
.photo-drop input{position:absolute;width:1px;height:1px;opacity:0}
.photo-drop:focus-within{outline:0}
.photo-drop:has(input:focus-visible){outline:2px solid var(--fg);outline-offset:2px}
.photo-drop .p-portrait{display:block;margin:0 0 6px}
.photo-drop .add-drop-title{margin-bottom:10px}
/* framing the chosen photo: the profile portrait at twice its size; the photo moves and scales inside it */
.p-portrait.photo-crop{position:relative;width:208px;height:208px;margin:6px auto 0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.photo-crop.grabbing{cursor:grabbing}
.photo-crop canvas{position:absolute;left:0;top:0;display:block;max-width:none;transform-origin:0 0}
/* Chrome can match :focus-visible after the frame is focused by script, so the ring follows the keyboard instead */
.p-portrait.photo-crop:focus-visible{outline:0}
.p-portrait.photo-crop.kb{outline:2px solid var(--fg);outline-offset:2px}
/* the same 14px as between the sheet's sub-line and the frame (.sheet-head's margin); .sheet-meta sets margins later in the file */
.sheet-meta.photo-hint{margin:14px 0 0}
.p-featured{font-size:13px;color:var(--fg-2);text-align:center;margin:18px 0 -6px}
.p-sentence{max-width:34em;margin:26px auto 0;text-align:center;font-size:16px;line-height:1.6;text-wrap:balance;transition:opacity .17s var(--ease), filter .17s var(--ease)}
.p-sentence.swap-out{opacity:0;filter:blur(2px)}
.p-sentence .when{font-variant-numeric:tabular-nums}
.p-id{text-align:center;margin-top:14px}
.p-id h1{font-size:20px;font-weight:600;line-height:1.3;margin:0}
.p-id p{font-size:13px;color:var(--fg-2);margin:4px 0 0}
.p-stats{display:flex;justify-content:center;gap:44px;margin-top:20px}
.p-stats .stat{display:flex;flex-direction:column;align-items:center;gap:3px}
.p-stats b{font-size:20px;font-weight:500;line-height:1.1;color:var(--fg);font-variant-numeric:tabular-nums}
.p-stats small{font-size:13px;line-height:1.3;color:var(--fg-2)}
.p-trust{max-width:34em;margin:14px auto 0;text-align:center;font-size:13px;line-height:1.55;color:var(--fg-2);text-wrap:balance}
.p-report{margin:8px auto 0;text-align:center;font-size:13px;color:var(--fg-2)}
.p-trust .lk{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--fg-3)}
.trust-list{margin:0}
.trust-list .team-role{white-space:normal}
.p-track{align-self:center;width:calc(100vw - 48px);margin:6px 0 0}   /* wider than the text column, like lin-qi's strip; centered on the page */
/* the profile shows highlights: one centered row, all at full strength (dimming belongs to Track record) */
.p-track .strip{justify-content:safe center;padding-left:0;padding-right:0}
.p-track .item,.p-track .item:hover{opacity:1}
/* Complete track record: the way into the whole record, centered under the featured row (lin-qi's .pill) */
.p-all{align-self:center;margin:18px 0 0;scroll-margin-bottom:80px}   /* tabbing to it scrolls it clear of the fixed footer */
/* phones: the footer is two rows (about 92px), so the page ends far enough below it for the button to clear it */
@media (max-width:640px){.p-view{padding-bottom:108px}.p-all{scroll-margin-bottom:108px}}
.section-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px 10px;border-bottom:1px solid var(--line);font-size:13px;color:var(--fg-2)}
.section-head span:last-child{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}

/* strip + cards */
.strip{
  display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding:20px calc(50% - 110px) 4px;scrollbar-width:none;overscroll-behavior-x:contain;
}
.strip::-webkit-scrollbar{display:none}
/* cards are lin-qi .item (opacity, entrance, hover lift, fly-hide); .card only lays out the TR parts */
.card{flex:0 0 220px;scroll-snap-align:center}
.card:focus-visible{outline:2px solid var(--fg);outline-offset:8px;border-radius:11px}
.card-date{font-size:13px;color:var(--fg-2);margin-bottom:12px;font-variant-numeric:tabular-nums}
.card-pic{width:220px;height:240px;position:relative}
.card-img{width:100%;height:100%;display:block;object-fit:contain;opacity:1}
.card-img.loaded{opacity:1}
.card-address{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:12px;min-height:22px}
.card-address .lk{font-size:16px;font-weight:500;color:var(--fg)}
.card-address .lk:hover{color:var(--fg-2)}
.card:hover .card-address .lk{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--fg-3)}
.empty-strip{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 auto;padding:50px 0;color:var(--fg-2);font-size:14px}

/* people stack */
.people-stack{
  position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;margin-top:3px;
  cursor:pointer;user-select:none;-webkit-user-select:none;outline:none;
}
.people-stack .with{font-size:13px;color:var(--fg-2);line-height:1}
.people-stack .stack{display:flex;align-items:center;padding-left:2px}
.stack-avatar{
  width:24px;height:24px;border-radius:50%;overflow:hidden;display:block;position:relative;
  box-shadow:0 0 0 2px var(--bg);margin-left:-8px;
  transition:margin-left .3s var(--spring), transform .3s var(--spring);
}
.stack-avatar:first-child{margin-left:0}
.stack-avatar svg{display:block;width:100%;height:100%}
.people-stack:hover .stack-avatar,.people-stack:focus-visible .stack-avatar,.trust-list .team-person:focus-visible .stack-avatar{margin-left:-2px;transform:translateY(-1px)}
.stack-more{
  width:24px;height:24px;border-radius:50%;background:var(--chip);color:var(--fg-2);
  font-size:12px;display:flex;align-items:center;justify-content:center;
  margin-left:-8px;box-shadow:0 0 0 2px var(--bg);z-index:1;
  transition:margin-left .3s var(--spring), background-color .15s var(--ease);
}
.people-stack:hover .stack-more,.people-stack:focus-visible .stack-more,.trust-list .team-person:focus-visible .stack-more{margin-left:-2px}
.stack-more:hover{background:var(--chip-hover)}
.stack-names{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.people-stack:focus-visible{outline:2px solid var(--fg);outline-offset:5px;border-radius:999px}

/* seal + badge */
.seal{display:inline-flex;align-items:center;justify-content:center;line-height:0;border-radius:50%;cursor:help;flex:none}
.seal:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.seal-svg{display:block}
.badge{font-size:13px;line-height:1;color:var(--fg-2);white-space:nowrap;flex:none}

/* avatars */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;overflow:hidden;background:var(--chip);flex:none}
.avatar svg{display:block;width:100%;height:100%}
.avatar.sm{width:24px;height:24px}
.avatar.md{width:32px;height:32px}
.avatar.lg{width:48px;height:48px}
/* an uploaded photo (TR.avatarSVG returns <img class="face">) fills whichever round wrapper it's in */
img.face,.rq-face img.face{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar.unclaimed{outline:1px dashed var(--fg-3);outline-offset:2px;filter:grayscale(1);opacity:.72}

/* asset page */
.a-view{max-width:1120px;margin:0 auto;padding:6px 0 128px}
.back{display:inline-block;margin:8px 0 18px;font-size:13px;color:var(--fg-2);text-decoration:none}
.back:hover{color:var(--fg)}
.a-head h1{font-size:20px;font-weight:600;line-height:1.3;margin:0}
.a-head p{font-size:13px;color:var(--fg-2);margin:4px 0 0}
.a-hero{position:relative;width:420px;max-width:88vw;aspect-ratio:420/320;margin:18px auto 8px}
.a-events{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin:18px 0 12px}
/* event tabs: lin-qi .pill; active marked with the lin-qi .menu --hot dot */
.event-pill span{color:var(--fg-2);font-variant-numeric:tabular-nums}
.event-pill .dot{width:0;height:6px;margin-right:-6px;border-radius:50%;background:var(--hot);flex:none;opacity:0;transform:scale(.3);transition:opacity .2s var(--ease), transform .35s var(--spring), width .35s var(--spring), margin .35s var(--spring)}
.event-pill.active .dot{width:6px;margin-right:0;opacity:1;transform:none}
.a-event-card{max-width:640px;margin:0 auto;text-align:center;font-size:16px;line-height:1.6;text-wrap:balance}
.a-event-card .src{display:inline-flex;vertical-align:-1px;margin-left:4px;color:var(--fg-3);cursor:help;border-radius:50%;transition:color .15s var(--ease)}
.a-event-card .src:hover,.a-event-card .src:focus-visible{color:var(--fg-2)}
.a-to-leases{display:block;margin:0 auto 4px;background:none;border:0;padding:0;font:inherit;font-size:13px;cursor:pointer}
/* a building's leases: one list where the deal would be (rows like the people rows, with a hairline between) */
.leases{max-width:820px;margin:26px auto 0}
.lease-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 10px;font-size:13px;color:var(--fg-2)}
.lease-tools .search input{width:180px}
.lease-rows{border-top:1px solid var(--line)}
.lease-row{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:20px;padding:11px 6px;border-bottom:1px solid var(--line);cursor:pointer;outline:none;transition:background .15s var(--ease)}
.lease-row:hover{background:var(--chip)}
.lease-row:focus-visible{outline:2px solid var(--fg);outline-offset:0}
.lease-more{display:block;margin:16px auto 0;font-size:13px}
.lease-none{margin:0;padding:18px 0;text-align:center;font-size:13px;color:var(--fg-2)}
.a-claim{max-width:820px;margin:30px auto 14px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;color:var(--fg-2)}

/* team block */
.team-org{font-size:16px;font-weight:600;line-height:1.3;margin-bottom:6px}
.org-link{color:inherit;text-decoration:none;transition:color .15s var(--ease)}
.org-link:hover{color:var(--fg-2)}
.org-link:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:6px}
/* the deal, by side: two equal columns; every party is the same block; each person is a fixed-width row
   with the mark at its right end, so faces, names and marks line up down each column */
.deal{max-width:820px;margin:0 auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0 4px}
.deal-sides{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.deal-rest{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.party{margin-bottom:22px}
.party-role{font-size:13px;color:var(--fg-2);line-height:1.3;margin-bottom:2px}
.party-people{display:flex;flex-direction:column;align-items:flex-start}
.deal .team-person{width:300px;max-width:100%;box-sizing:border-box}
.deal .team-person > .seal,.deal .team-person > .badge,.deal .team-person > .pill{margin-left:auto}
.seat-avatar{box-sizing:border-box;background:none;border:1.3px dotted var(--fg-2)}
.team-person.seat{cursor:default}
.team-person.seat:hover{background:none}
.team-person.seat .team-name{color:var(--fg-2)}
.team-person{display:flex;align-items:center;gap:8px;padding:5px 6px;margin-left:-6px;border-radius:11px;cursor:pointer;outline:none}
.team-person:hover{background:var(--chip)}
.team-person:focus-visible{outline:2px solid var(--fg);outline-offset:0}
.team-who{display:flex;flex-direction:column;min-width:0;gap:1px}
.team-name{font-size:14px;font-weight:500;line-height:1.35}
.team-role{font-size:13px;color:var(--fg-2);line-height:1.35}
.team-person > .seal,.team-person > .badge{margin-left:auto}
.team-person.unclaimed .team-name{color:var(--fg-2)}

/* confirm */
.confirm-mode .nav,.confirm-mode .foot{display:none!important}
.confirm-view{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:28px 16px 48px}
.confirm-inner{width:min(420px,100%);text-align:center}
.confirm-kicker{margin:0 0 26px}   /* the real wordmark: these pages are where new people first meet Apers */
.confirm-card{display:flex;flex-direction:column;align-items:center;margin-bottom:22px}
.confirm-pic{width:220px;height:230px}
.confirm-img{width:100%;height:100%;display:block;object-fit:contain;opacity:1}
.confirm-img.loaded{opacity:1}
.confirm-address{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:8px;font-size:16px;font-weight:500}
.confirm-address span{font-size:13px;color:var(--fg-2);font-weight:500;font-variant-numeric:tabular-nums}
.confirm-statement{font-size:20px;font-weight:500;line-height:1.45;margin:0 0 12px;text-wrap:balance;color:var(--fg)}
.confirm-statement b{font-weight:600}
.confirm-you{font-size:14px;color:var(--fg-2);margin:0 0 6px}
.confirm-note{font-size:15px;line-height:1.6;color:var(--fg);margin:0 0 12px;text-wrap:balance}   /* the inviter's own line */
.confirm-benefit{font-size:14px;color:var(--fg-2);margin:0 0 22px}
.pill.wide{width:100%;justify-content:center}
.confirm-links{display:flex;justify-content:center;gap:20px;margin:14px 0 0}
.confirm-links .lk{font-size:13px;color:var(--fg-2)}
.confirm-links .lk:hover{color:var(--fg)}
.confirm-fine{font-size:13px;color:var(--fg-2);line-height:1.5;margin:18px 0 0}
.confirm-success{padding-top:4px}
.confirm-success h1{font-size:20px;font-weight:500;margin:12px 0 6px}
.confirm-success p{font-size:14px;color:var(--fg-2);margin:0 0 5px}
.confirm-success .confirm-connected{color:var(--fg);font-size:14px}
.confirm-success .confirm-fine{margin-top:18px}
.confirm-fine .lk{font-size:13px;color:var(--fg-2)}
.confirm-fine .lk:hover{color:var(--fg)}
.confirm-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:22px}
.confirm-seal{display:flex;justify-content:center;margin-bottom:4px}
/* claim flow: invite landing and "which deals are yours" reuse the confirm page */
.claim-title{font-size:20px;font-weight:500;line-height:1.35;margin:12px 0 6px}
.claim-face{width:88px;height:88px;margin:0 auto;border-radius:50%;overflow:hidden;background:var(--chip)}
.claim-face svg{display:block;width:100%;height:100%}
.claim-list{display:flex;flex-direction:column;gap:2px;margin:18px 0 22px;text-align:left}
.claim-deal{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:left;margin-left:0;padding:6px}
.claim-deal[aria-checked="false"] .team-name{color:var(--fg-2)}
.claim-pic{width:44px;height:44px;flex:none;display:grid;place-items:center}
.claim-pic img{max-width:100%;max-height:100%;display:block}
.claim-mark{margin-left:auto;display:flex}
.claim-seal{display:flex;justify-content:center}
.p-claim{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:14px auto 0;font-size:13px;color:var(--fg-2);text-align:center}
.p-portrait.unclaimed{outline:1px dashed var(--fg-3);outline-offset:3px;overflow:visible}
.p-portrait.unclaimed svg{border-radius:50%;filter:grayscale(1);opacity:.72}

/* sheets */
.sheet-root{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.sheet-root.open{pointer-events:auto}
.sheet-backdrop{position:absolute;inset:0;background:color-mix(in srgb, var(--fg) 16%, transparent);opacity:0;transition:opacity .25s var(--ease)}
.sheet-root.open .sheet-backdrop{opacity:1}
.sheet{
  position:relative;width:min(480px,100%);max-height:84svh;overflow:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:18px 18px 0 0;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow);
  transform:translateY(20px);opacity:0;transition:transform .35s var(--spring), opacity .2s var(--ease);
}
.sheet-root.open .sheet{transform:none;opacity:1}
@media(min-width:640px){.sheet-root{align-items:center;padding:20px}.sheet{width:min(420px,100%);border-radius:18px}}
.sheet-head{display:flex;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.sheet-title{min-width:0;flex:1}
.sheet-title h3{font-size:20px;font-weight:600;line-height:1.3;margin:0}
.sheet-title p{font-size:13px;color:var(--fg-2);margin:3px 0 0}
.sheet-meta{font-size:13px;color:var(--fg-2);line-height:1.55;margin:0 0 16px}
.sheet-meta .seal{vertical-align:-3px;margin-left:4px}
.sheet-stats{justify-content:flex-start;gap:36px;margin:2px 0 16px}
.sheet-stats .stat{align-items:flex-start}
.avatar.xl{width:72px;height:72px}
/* firm page: its own picture (a monogram until it has a logo), then its people, then its deals */
.o-logo{display:grid;place-items:center;font-size:20px;line-height:1;letter-spacing:.01em;color:var(--fg)}
.o-team{margin-top:20px}
.o-members{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px}
.o-member{display:flex;flex-direction:column;align-items:center;gap:2px;width:118px;padding:10px 4px 8px;border:0;border-radius:18px;background:none;font:inherit;color:inherit;cursor:pointer;text-align:center;transition:background-color .15s var(--ease)}
.o-member:hover{background:var(--chip)}
.o-member:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.o-member .avatar{width:56px;height:56px;margin-bottom:6px}
.o-name{font-size:13px;line-height:1.35}
.o-done{font-size:13px;color:var(--fg-2);line-height:1.35;font-variant-numeric:tabular-nums}
.o-member.unclaimed .o-name{color:var(--fg-2)}
.p-id .o-focus{font-size:16px;color:var(--fg);line-height:1.5;max-width:40em;margin:6px auto 0;text-wrap:balance}
.o-edit{font-size:13px;margin-left:6px}
.o-label{font-size:13px;color:var(--fg-2);line-height:1.35;margin:0 0 8px;text-align:center}
.o-more .avatar{font-size:15px;color:var(--fg)}
.o-list .team-person{margin-left:0}
.o-list .team-person > .o-done{margin-left:auto}
.o-list .team-person[hidden]{display:none}
.o-none{font-size:13px;color:var(--fg-2);padding:8px 0;margin:0}
.sheet-team .field{display:block;margin:0 0 10px}
.o-invite{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:6px;font-size:13px;color:var(--fg-2)}
@media (max-width:640px){.o-team .o-members{gap:2px 0}.o-members .o-member{width:88px;padding:8px 2px}.o-member .avatar{width:48px;height:48px}}
/* person popup: centered, a small version of their profile */
.sheet-person{text-align:center}
.sheet-person .sheet-head{flex-direction:column;align-items:center;gap:10px;border-bottom:0;padding:8px 0 0;margin-bottom:14px}
.sheet-person .sheet-stats{justify-content:center}
.sheet-person .sheet-stats .stat{align-items:center}
.sheet-person .sheet-actions{justify-content:center}
/* deal popup: everyone on the deal, by side */
@media(min-width:640px){.sheet.sheet-deal{width:min(720px,100%)}}
.deal-compact{border-top:0;border-bottom:0;padding-top:4px}
.deal-compact .deal-sides{gap:0 28px}
/* share sheet: the image as it will be posted */
@media(min-width:640px){.sheet.sheet-share{width:min(720px,100%)}}
.share-preview{aspect-ratio:1200/627;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--chip)}
.share-preview img{display:block;width:100%;height:100%}
.sheet-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.view-as-list{display:flex;flex-direction:column;gap:2px}
.view-as-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 8px;border:0;border-radius:11px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;outline:none}
.view-as-row:hover{background:var(--chip)}
.view-as-row.active{background:var(--chip)}
.view-as-row:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}
.view-as-row b{display:block;font-size:14px;font-weight:500}
.view-as-row small{display:block;font-size:12px;color:var(--fg-2);margin-top:2px}
.field{display:flex;flex-direction:column;gap:6px;margin:14px 0;font-size:13px;color:var(--fg-2)}
.field input,.field textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--fg);font:inherit;font-size:15px;line-height:1.5;padding:10px 12px;outline:none;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--fg-2)}
.field input::-webkit-search-cancel-button{display:none}
.empty-page{max-width:560px;margin:20vh auto;text-align:center;color:var(--fg-2);font-size:15px}
.empty-page .pill{margin-top:14px}

/* responsive */
@media (max-width:640px){
  .nav{height:52px}
  .a-hero{width:320px;aspect-ratio:320/280}
  .p-id h1,.a-head h1{font-size:20px}
  .p-stats{gap:32px}
  .strip{padding-inline:calc(50% - 89px);padding-top:16px}
  .card{flex-basis:178px}
  .card-pic{width:178px;height:194px}
  .card-address .lk{font-size:15px}
  .team-org{font-size:15px}
  /* one column: the two principals first, then everyone else; rows span the width, marks on the right edge */
  .deal-sides{display:flex;flex-direction:column}
  .deal-side{display:contents}
  .deal-rest{display:flex;flex-direction:column}
  .party{order:1}
  .party.principal{order:0}
  /* centered: role and firm centered, the people as a centered block (marks still line up inside it) */
  .party{text-align:center}
  .party-people{align-items:center}
  .deal .team-person{width:min(340px,100%);text-align:left}
  .a-claim{justify-content:center}
  .a-events{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
  .a-events::-webkit-scrollbar{display:none}
  .event-pill{flex:none}
  .confirm-statement{font-size:17px}
  .confirm-view{padding-top:24px}
  .foot{grid-template-columns:1fr auto}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* card top: date + seal */
.card-top{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:18px;margin-bottom:12px}
.card-date{margin:0}
.card-seal{display:flex}   /* the mark reads as part of the date */

/* tooltip placement */
#tip.below{transform:translate(-50%, 0);white-space:normal;max-width:min(420px, calc(100vw - 32px));text-align:center}
#tip.below.on{transform:translate(-50%, 0)}

.sheet-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border:0;border-radius:50%;background:var(--chip);color:var(--fg-2);font:500 17px/1 var(--font-body);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.sheet-close:hover{background:var(--chip-hover);color:var(--fg)}
.sheet .pill:focus-visible{outline:1px solid var(--fg-2);outline-offset:2px}

.sheet-reset{display:block;margin:14px auto 2px;font-size:12px;color:var(--fg-2);text-align:center}
.sheet-reset:hover{color:var(--fg)}

/* Track record mode: lin-qi .tl overlay; the logo sits exactly where the nav logo sits */
/* The strip glides between the page and the overlay, so the overlay itself never fades:
   its backdrop and its chrome (logo, ruler) do. Leaving for an asset fades all of it. */
.tl{opacity:1;background:transparent;transition:background-color .35s var(--ease), visibility 0s .35s}
body.tl-open .tl{background:var(--bg);transition-delay:0s}
.tl > :not(.strip){opacity:0;transition:opacity .35s var(--ease)}
body.tl-open .tl > :not(.strip){opacity:1}
.tl.leaving{opacity:0;transition:opacity .35s var(--ease), visibility 0s .35s}
.tl.closing{transition:background-color .35s var(--ease) .3s, visibility 0s .65s}   /* the backdrop stays until the strip has landed */
.tl.closing-quick{transition:background-color .3s var(--ease) .12s, visibility 0s .45s}
.tl.closing .tl-logo,.tl.closing-quick .tl-logo{opacity:1}   /* it sits exactly on the nav logo, which takes over when the backdrop clears */
/* laptop screens up to 900px tall: a little less air above and between, so Complete track record clears the footer */
@media (max-height:920px) and (min-width:641px){
  .p-view{padding-top:4px}
  .p-sentence{margin-top:18px}
  .p-all{margin-top:12px}
}
/* short laptop screens: the whole first screen (portrait, name, stats, strip, caption) still fits above the footer */
@media (max-height:780px) and (min-width:641px){
  .p-view{padding-top:4px}
  .p-portrait{width:80px;height:80px}
  .p-id{margin-top:10px}
  .p-stats{margin-top:12px}
  .p-sentence{margin-top:16px}
  .p-featured{margin-top:10px}
  .p-track .strip{padding-top:0}
  .p-all{margin-top:10px}
}
.tl-logo{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:3;
  width:min(1120px, calc(100% - 32px));height:56px;
  display:flex;align-items:center;pointer-events:none;
  border-bottom:1px solid var(--line);
}
@media(max-width:640px){.tl-logo{height:52px}}

.a-view{transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease)}

#view{transition:opacity .65s var(--ease)}
#view.is-entering{opacity:0;transition:none}
.p-view > *, .a-view > *, .confirm-view > *{transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease)}
#view.is-entering .p-view > *, #view.is-entering .a-view > *, #view.is-entering .confirm-view > *{opacity:0; transform:translateY(10px); filter:blur(2px)}
.p-view > *:nth-child(1), .a-view > *:nth-child(1), .confirm-view > *:nth-child(1){transition-delay:0ms}
.p-view > *:nth-child(2), .a-view > *:nth-child(2), .confirm-view > *:nth-child(2){transition-delay:70ms}
.p-view > *:nth-child(3), .a-view > *:nth-child(3), .confirm-view > *:nth-child(3){transition-delay:140ms}
.p-view > *:nth-child(4), .a-view > *:nth-child(4), .confirm-view > *:nth-child(4){transition-delay:210ms}
.p-view > *:nth-child(5), .a-view > *:nth-child(5), .confirm-view > *:nth-child(5){transition-delay:280ms}
.a-view > *:nth-child(6){transition-delay:350ms}
.a-view > *:nth-child(7){transition-delay:420ms}
.a-view > *:nth-child(8){transition-delay:490ms}

#view.is-leaving{opacity:0;transition:opacity .28s var(--ease)}

/* arriving with a flying building: the new page fades in as one piece, after the old one has mostly gone */
/* start states snap (no transition) so the page really starts hidden, then fades in when the class is removed */
#view.is-arriving,#nav.is-arriving{opacity:0;transition:none}
#view.arrive,#nav.arrive{transition:opacity .5s var(--ease) .12s}
.view-ghost{
  position:fixed;left:0;right:0;z-index:5;pointer-events:none;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.stage-shot{position:absolute;inset:0;width:100%;height:100%;display:block}
/* ---------- front page (#/start): lin-qi's hero, one building and one sentence, then "Which sounds like you?" ---------- */
.home{max-width:560px;margin:0 auto;padding:8px 0 128px;text-align:center}
.home-head{display:flow-root;transition:opacity .35s var(--ease), height .45s var(--ease) .1s}
.home-head.hid{height:0;opacity:0;overflow:hidden;transition-duration:.2s, .45s}   /* folded, still read by screen readers */
.home-head.snap{transition:none}
.home-title{font-size:20px;font-weight:500;line-height:1.35;margin:0 0 6px;text-wrap:balance}
/* the two headline lines share one grid cell, so the taller one holds the height at every width (no layout shift) */
.home-rot{display:grid}
.home-rot .rot{grid-area:1/1;opacity:0;transform:translateY(4px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.home-rot .rot.on{opacity:1;transform:none}
.home-rot .rot.off{opacity:0;transform:translateY(-4px)}
.home-rot .rot.snap{transition:none}
.home-go{transition:opacity .2s var(--ease), transform .2s var(--ease)}
.home-sub{font-size:15px;color:var(--fg-2);line-height:1.5;margin:0 auto;max-width:24em;text-wrap:balance}
.home-flow{position:relative;margin-top:36px}
.home-flow.sizing{transition:height .45s var(--ease);overflow:hidden}   /* what comes in is revealed as the block grows, never over the link below */
.home-ask{margin:0 0 10px}
.home-seg{justify-content:center}
/* steps: the leaving question and pills fade with a small drop, then close up (js/views/home.js) */
.home-ask,.home-seg .pill{transition:opacity .35s var(--ease), transform .35s var(--ease), background-color .15s var(--ease)}
.home-flow .home-fade{opacity:0;transform:translateY(4px);pointer-events:none;transition-duration:.2s}
.home-flow .snap{transition:none}
.home-flow .gone{display:none}
.home-pitch{padding-top:22px}
.home-pitch:empty{padding-top:0}
.home-pitch .pill{margin-top:16px}
.home-pitch.pre > *{opacity:0;transform:translateY(8px);transition:none}
.home-pitch.in > *{transition:opacity .45s var(--ease), transform .45s var(--ease)}
.home-pitch.in > .pill{transition-delay:.17s}
.home-pitch.out > *{opacity:0;transform:translateY(-4px);transition:opacity .2s var(--ease), transform .2s var(--ease)}
.home-worry{font-size:15px;color:var(--fg-2);line-height:1.5;margin:0 auto;max-width:28em;text-wrap:balance}
.home-value{font-size:16px;line-height:1.5;margin:0 auto;max-width:28em;text-wrap:balance}
/* the building: the old one settles down and fades, the new one rises in */
.home-hero{transition:opacity .45s var(--ease), transform .45s var(--ease)}
.home-hero.bld-out{opacity:0;transform:translateY(6px) scale(.98);transition-duration:.2s}
.home-hero.bld-pre{opacity:0;transform:translateY(10px);transition:none}
.home-example{font-size:13px;color:var(--fg-2);margin:20px 0 0}
.home-example .lk{text-decoration:none}
.home-example .lk:hover{text-decoration:underline}
button.nav-link{border:0;background:none;font:inherit;font-size:13px;cursor:pointer}
/* the work email, then LinkedIn (sign in, save your track record) */
.sheet .pill.sso-mail{margin-top:14px}
.sheet .sso-or{margin:14px 0;text-align:center}
.sheet [data-sso]{gap:8px}