/* operad.io — one board of flat tiles. Neutrals and primary follow the iPhone app. */
:root {
  --bg: #fcfcfb;
  --tile: #efeef3;
  --ink: #17171a;
  --weak: #5e5e69;
  --acc: #5672b3;
  --acc-ink: #4a64a0;
  --on: #ffffff;
  --deep: #3f5a90;
  --light: #8fa5d3;
  --soft: #dfe5f2;
  --dark: #17171a;
  --on-dark: #ececf2;
  --ok: #1d7a4b;
  --run: #1f6fd1;
  --gap: 8px;
  --edge: 8px;
  --r: 8px;
  --s1: clamp(88px, 12.5vw, 190px);
  --s2: clamp(36px, 5.2vw, 84px);
  --s3: clamp(22px, 2.3vw, 34px);
  --s4: 17px;
  --s5: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Geist", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* taste-skill-ignore: real code only */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d11; --tile: #17171d; --ink: #ececf2; --weak: #a4a4b1;
    --acc-ink: #8ea4dc; --soft: #1c2438; --dark: #25252e; --on-dark: #ececf2;
    --deep: #3b5388; --light: #7f95c8; --ok: #5fcf9a; --run: #6aa9ff;
  }
}
@media (max-width: 720px) { :root { --gap: 6px; --edge: 6px; --s1: 22vw; --s2: 11vw; --s3: 22px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--s4)/1.55 var(--font);
  padding: var(--edge);
  -webkit-font-smoothing: antialiased;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
::selection { background: var(--acc); color: var(--on); }
h1, h2 { margin: 0; font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
h2 { font-size: var(--s2); max-width: 18ch; }
.s3 { font-size: var(--s3); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; }
.sub { font-size: var(--s4); color: var(--weak); margin-top: 20px; }
code, pre { font-family: var(--mono); }
code { font-size: 0.88em; }
pre { margin: 0; font-size: var(--s5); line-height: 1.6; white-space: pre; overflow-x: auto; }
pre code { font-size: inherit; }

.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.tile { border-radius: var(--r); background: var(--tile); padding: 24px; min-width: 0; }
.tile > * + * { margin-top: 14px; }
.paper { background: var(--tile); }
.dark { background: var(--dark); color: var(--on-dark); }
.acc { background: var(--acc); color: var(--on); }
.soft { background: var(--soft); }

/* top row */
.top { grid-template-columns: 60px 1fr auto; margin-bottom: var(--gap); }
.top .tile { display: flex; align-items: center; padding: 0 22px; height: 60px; margin: 0; }
.logo { background: var(--dark); color: var(--on-dark); justify-content: center; padding: 0 !important; }
.links { gap: 28px; }
.links a { padding: 8px 0; margin: 0; white-space: nowrap; }
.links > * + * { margin-top: 0; }
.links .gh { display: inline-flex; align-items: center; }
.links .gh svg { width: 20px; height: 20px; }
.links .end { margin-left: auto; }
.links .lang { font-size: 14px; gap: 4px; letter-spacing: .02em; }
.links .lang i { font-style: normal; opacity: .4; }
.links .lang span { opacity: .55; }
.links .lang b { font-weight: 600; }
.links .lang:hover span { opacity: 1; }
.links a:hover { color: var(--acc-ink); }
.go { background: var(--acc); color: var(--on); font-weight: 500; transition: transform .15s; }
.go:hover { background: var(--deep); }
.go:active, .btn:active { transform: scale(.97); }

/* hero: two by two */
.hero { grid-template-rows: repeat(2, minmax(340px, 1fr)); min-height: calc(100svh - 60px - 3 * var(--edge) - var(--gap)); }
.hero > * { grid-column: span 6; }
.name { display: flex; flex-direction: column; justify-content: space-between; }
.name .state { max-width: 18ch; }
:lang(zh) .name .state { max-width: 14em; }
.name h1 { font-size: var(--s1); letter-spacing: -0.05em; line-height: .9; margin-bottom: 0; }
.term, .phone-tile { padding: 0; overflow: hidden; position: relative; }
.term { background: var(--dark); color: var(--on-dark); }
.term pre { padding: 28px; }
.phone-tile { display: grid; align-items: end; justify-items: end; padding: 24px 24px 0; }
.phone { width: min(420px, 100%); background: var(--bg); border-radius: 18px 18px 0 0; padding: 18px 18px 0; min-height: 80%; }
.ph-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--s3); padding-bottom: 10px; }
.ph-head span { color: var(--acc-ink); font-weight: 500; }
.phone ul { list-style: none; margin: 0; padding: 0; }
.phone li { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; background: transparent; }
.phone li + li { border-top: 0; }
.phone li div { min-width: 0; }
.phone b { display: block; font-weight: 500; font-size: var(--s4); line-height: 1.25; }
.phone small { color: var(--weak); font-size: var(--s5); }
.phone em { font-style: normal; font-size: var(--s5); color: var(--weak); text-align: right; max-width: 8.5em; line-height: 1.25; padding-top: 2px; }
.mk { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; display: block; }
.mk.acc { background: var(--acc); }
.mk.run { background: var(--run); }
.pair { grid-column: span 6; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pair .tile { margin: 0; }

/* sections */
.band { margin-top: clamp(80px, 10vw, 150px); }
.band > h2 { margin-bottom: clamp(28px, 3.5vw, 48px); padding-left: 16px; }
.band > h2 + .sub { margin-top: -12px; margin-bottom: 36px; padding-left: 16px; }

/* the bar */
.bar { display: flex; gap: var(--gap); min-height: 46svh; align-items: stretch; }
.seg { border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-width: 0; }
.seg .clause { font-size: var(--s4); max-width: 24ch; }
.c1 { flex: 2.2; background: var(--dark); color: var(--on-dark); }
.c2 { flex: 3; background: var(--acc); color: var(--on); }
.c3 { flex: 1.6; background: var(--light); color: #0d0d11; }
.c4 { flex: 2.4; background: var(--deep); color: var(--on); }
.c5 { flex: 2.2; background: var(--dark); color: var(--on-dark); }
.seg code { font-size: .86em; }
.workers { margin-top: var(--gap); }
.workers > :first-child { grid-column: span 5; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.workers > :last-child { grid-column: span 7; display: flex; align-items: center; }


/* mosaic */
.mosaic { grid-auto-rows: 96px; }
.mosaic .tile { margin: 0; overflow: hidden; }
.mosaic .tile > * + * { margin-top: 12px; }
.m-flow > p + p, .m-pending > p + p { font-size: var(--s3); line-height: 1.2; letter-spacing: -0.02em; }
.m-head { grid-column: 1 / 7; grid-row: span 3; display: flex; align-items: flex-start; }
.m-head h2 { font-size: var(--s2); max-width: 12ch; }
.m-flow { grid-column: 7 / 13; grid-row: span 3; }
.m-pending { grid-column: 1 / 5; grid-row: span 4; }
.m-history { grid-column: 5 / 13; grid-row: span 4; display: flex; flex-direction: column; justify-content: space-between; }

.m-fig { grid-column: 1 / 4; grid-row: span 3; display: flex; flex-direction: column; justify-content: space-between; }
.fig { font-size: var(--s1); line-height: .8; font-weight: 500; letter-spacing: -0.05em; }
.m-list { grid-column: 4 / 8; grid-row: span 3; }
.plug { list-style: none; margin: 0; padding: 0; font-size: var(--s3); line-height: 1.35; letter-spacing: -0.02em; }
.plug b { display: block; font-weight: 500; }
.plug li + li { margin-top: 10px; }
.plug li { font-size: var(--s4); letter-spacing: 0; color: var(--weak); }
.plug b { font-size: var(--s3); letter-spacing: -0.02em; color: var(--ink); }
.m-write { grid-column: 8 / 13; grid-row: span 2; }
.m-check { grid-column: 8 / 13; grid-row: span 1; padding-top: 18px; }


/* rows: the live board */
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.row-wrap { display: block; }
.row {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 6fr 3fr 1.6fr 2.6fr; align-items: center; gap: 12px;
  min-height: 72px; padding: 0 24px; background: var(--tile); border-radius: var(--r);
  font-size: var(--s3); letter-spacing: -0.015em; transition: background .15s;
}
.row:hover { background: var(--soft); }
.row:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.r-f { font-size: var(--s4); color: var(--weak); letter-spacing: 0; }
.r-st { justify-self: end; padding: 7px 14px; border-radius: 6px; font-size: var(--s4); letter-spacing: 0; white-space: nowrap; font-weight: 500; }
.st-ok { background: var(--ok); color: #fff; }
.st-run { background: var(--run); color: #fff; }
.st-acc { background: var(--acc); color: #fff; }
.st-weak { background: var(--weak); color: #fff; }
@media (prefers-color-scheme: dark) { .st-ok, .st-run { color: #0d0d11; } .st-weak { color: #0d0d11; } }
.r-open { display: none; padding: 20px 24px 24px; border-radius: 0 0 var(--r) var(--r); }
.is-open .row { border-radius: var(--r) var(--r) 0 0; background: var(--acc); color: var(--on); }
.is-open .row .r-f { color: rgba(255,255,255,.88); }
.is-open .row .r-st { background: var(--on); color: var(--deep); }
.is-open .r-open { display: block; background: var(--acc); color: var(--on); }
.is-open .r-open > * + * { margin-top: 14px; }

.no-js-open .r-open { display: block; }
html:not(.js) .r-open { display: block; background: var(--tile); }
.acts { display: flex; gap: var(--gap); }
.btn { all: unset; box-sizing: border-box; cursor: pointer; padding: 11px 22px; border-radius: 6px; background: var(--on); color: var(--deep); font-weight: 500; transition: transform .15s; }
.btn.ghost { background: transparent; color: var(--on); outline: 2px solid rgba(255,255,255,.7); outline-offset: -2px; }
.btn:hover { background: #eef1f8; }
.btn.ghost:hover { background: rgba(255,255,255,.14); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.row-wrap[data-state="done"] .row, .row-wrap[data-state="rejected"] .row { background: var(--tile); }

/* clients */
.clients { grid-auto-rows: minmax(0, auto); }
.clients .tile { margin: 0; }
.c-tui { grid-column: 1 / 6; }
.c-mcp { grid-column: 6 / 13; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.c-mcp pre { margin-top: auto; padding-top: 24px; }
.c-app { grid-column: 1 / 6; display: flex; flex-direction: column; }
.c-app pre { margin-top: auto; padding-top: 24px; }
.clients .tile > p:not(.s3) { max-width: 52ch; }

/* cta: one row of the board, cropped at both edges */
.cta { grid-template-columns: 1fr minmax(0, 8fr) 1fr; margin: 0 calc(-1 * var(--edge)); }
.cta .edge { border-radius: 0; min-height: 360px; margin: 0; }
.cta .edge:first-child { border-radius: 0 var(--r) var(--r) 0; }
.cta .edge:last-child { border-radius: var(--r) 0 0 var(--r); }
.cta-main { padding: 40px; margin: 0; }
.cta-main .s3 { max-width: 28ch; }
.cta-main pre { white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(0,0,0,.2); border-radius: 6px; padding: 18px; }
.cta-main > p:last-child { max-width: 60ch; }

/* footer */
.foot { margin-top: clamp(96px, 10vw, 160px); }
.mark { display: flex; align-items: flex-end; gap: 4px; height: 30svh; min-height: 200px; }
.mark span { flex: 1 1 0; height: var(--h); background: var(--c); color: var(--bg); border-radius: var(--r) var(--r) 0 0; font-weight: 500; font-size: min(24vw, 26svh); line-height: .75; letter-spacing: -0.05em; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6%; }
.mark span:nth-child(4) { color: var(--bg); }
.foot-cols { margin-top: 56px; padding: 0 16px 28px; }
.tile-less { list-style: none; margin: 0; padding: 0; grid-column: span 2; font-size: 15px; }
.tile-less li + li { margin-top: 8px; }
.tile-less a:hover { color: var(--acc-ink); }
.fnote { grid-column: 9 / 13; font-size: 15px; color: var(--weak); }

/* motion */
.shutter .shutter-in { transform-origin: top left; }
@media (prefers-reduced-motion: no-preference) {
  .shutter { animation: shutter 1.1s cubic-bezier(.2,.7,.1,1) both; }
  .shutter .shutter-in { animation: settle 1.1s cubic-bezier(.2,.7,.1,1) both; }
  @keyframes shutter { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.1,1); transition-delay: var(--d, 0ms); }
  .js .reveal.in { opacity: 1; transform: none; }
  .phone li { animation: rise .6s cubic-bezier(.2,.7,.1,1) both; }
  .phone li:nth-child(1) { animation-delay: .5s; } .phone li:nth-child(2) { animation-delay: .58s; }
  .phone li:nth-child(3) { animation-delay: .66s; } .phone li:nth-child(4) { animation-delay: .74s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .name h1, .name .state { animation: rise .8s cubic-bezier(.2,.7,.1,1) .1s both; }
  .pair .tile { animation: rise .7s cubic-bezier(.2,.7,.1,1) .6s both; }
  .pair .tile + .tile { animation-delay: .7s; }
  .mk.acc { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 50% { transform: scale(.7); opacity: .7; } }
}

/* phone: its own composition */
@media (max-width: 900px) {
  .top { grid-template-columns: 60px 1fr auto; }
  .links { gap: 16px; overflow-x: auto; }
  .links a:nth-child(n+3):not(.gh) { display: none; }
  .bar { flex-direction: column; min-height: 0; }
  .seg { min-height: 120px; padding: 18px; gap: 16px; }
  .seg .clause { max-width: none; }
  .seg { flex: none !important; }
  .c2 { min-height: 190px; }
  .workers > :first-child, .workers > :last-child { grid-column: 1 / -1; }
  .mosaic { grid-auto-rows: auto; }
  .mosaic > * { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 140px; }
  .m-head h2 { max-width: none; }
  .m-fig, .m-list { grid-column: span 12; }
  .row { grid-template-columns: 1fr auto; min-height: 64px; padding: 0 16px; }
  .r-f { display: none; }
  .r-open { padding: 16px; }
  .clients > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .c-tui, .c-app { min-height: 0; }
  .cta { grid-template-columns: 1fr; margin: 0; }
  .cta .edge { min-height: 90px; border-radius: var(--r) !important; display: none; }
  .cta-main { padding: 22px; }
  .tile { padding: 20px; }
  .tile-less { grid-column: span 6; }
  .fnote { grid-column: 1 / -1; margin-top: 24px; }
}
@media (max-width: 720px) {
  .hero { grid-template-rows: none; min-height: 0; }
  .hero > * { grid-column: 1 / -1; }
  .name { min-height: 30svh; }
  .term { order: 2; }
  .phone-tile { order: 3; min-height: 360px; }
  .pair { order: 1; }
  .name { order: 0; }
  .pair .tile { aspect-ratio: 1; display: flex; align-items: flex-start; }
  .links a:not(.gh) { display: none; }
  .links { gap: 14px; }
  .top .links { padding: 0 16px; }
  .term pre { padding: 18px; font-size: 12.5px; }
  .mark { display: grid; grid-template-columns: repeat(3, 1fr); height: auto; min-height: 0; }
  .mark span { height: 15svh; min-height: 100px; font-size: 26vw; padding-bottom: 5%; border-radius: var(--r); }
  .mark span:nth-child(even) { height: 12svh; min-height: 84px; }
  .foot { margin-top: 64px; }
  .mark { align-items: end; }
}
.acc pre { background: rgba(0,0,0,.22); border-radius: 6px; padding: 16px; }
.src { text-decoration: underline; text-underline-offset: 3px; }