/* /blog/what-is-a-life-os styles - the design's <style> block, verbatim; port notes
   at the top and the end. The design block is regenerated by
   scripts/port-blog.py; the notes around it are kept.
   Unlayered on purpose: any rule here out-ranks the site's layered
   shared.css / Tailwind rules (cascade-layers spec).
   why-lucie-is-a-paid-product.css begins with this same design block, byte
   for byte, then adds 26 classes; kept as two sheets rather than one so a
   revision of either post cannot restyle the other.
   */

/* ===== Port note that must precede the design (site cascade) ===== */
/* Tailwind v4's on-demand `.container` (layered) caps max-width per
   breakpoint. `.art-head`, `.art`, `.cover`, `.art-back` share an element
   with `.container` and set their own max-width, so this reset must come
   BEFORE the design (same trap as blog.css). */
.container{max-width:none}

:root{
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Charter","Iowan Old Style","Palatino","Georgia",serif;
  --ink:#1d1d1f;--muted:#61656e;--dim:#8b919b;--g4:#b8bcc6;--blue:#006eff;--blue-deep:#0058cc;--blue-tonal:#e8f1ff;--blue-tonal-ink:#0062e3;
  --green:#1f9d4a;--green-tonal:#e8f8ec;--orange:#f88a0d;--orange-tonal:#fff1e2;
  --surface:#f5f6f8;--line:#e4e6eb;--white:#fff;
  --card-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -14px rgba(20,40,80,.22);--card-line:0 0 0 1px rgba(0,0,0,.045);
  /* one type scale for the whole page */
  --fs-body:20px;--lh-body:1.7;
  --fs-em:26px;
  --fs-h2:34px;
  --fs-display:clamp(34px,4.6vw,58px);
  --fs-small:14px;
  --section-space:clamp(112px,12svh,176px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--white);scroll-padding-top:24px}
body{font-family:var(--sans);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;font-size:18px;line-height:1.55}
a{color:inherit;text-decoration:none}
button{font:inherit}
svg{display:block;max-width:100%}
::selection{background:#dce9ff;color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:6px}
.container{width:min(1160px,calc(100% - 80px));margin-inline:auto}
.skip-link{position:absolute;top:8px;left:12px;z-index:60;transform:translateY(-160%);padding:10px 16px;background:#fff;border:2px solid var(--blue)}
.skip-link:focus{transform:none}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
p{text-wrap:pretty}

.btn-glass{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.5;padding:14px 30px;border-radius:999px;cursor:pointer;color:#fff;background:var(--blue);border:1px solid transparent;box-shadow:0 10px 28px rgba(0,110,255,.3);transition:transform .18s ease,background .18s ease;white-space:nowrap}
.btn-glass:hover{transform:translateY(-1px);background:var(--blue-deep)}
.btn-glass-sm{padding:10px 18px;font-size:13.5px}

.site-header{position:sticky;top:12px;z-index:50;pointer-events:none;height:0;overflow:visible}
.nav-inner{pointer-events:auto;width:max-content;max-width:calc(100% - 32px);margin:0 auto;display:flex;align-items:center;padding:6px 6px 6px 18px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.26));border:1px solid rgba(255,255,255,.6);box-shadow:0 1px 1px rgba(0,0,0,.04),0 16px 40px -14px rgba(20,40,80,.26),inset 0 1px 1px rgba(255,255,255,.9);backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%)}
.nav-logo{padding-right:16px;display:flex;color:var(--ink)}
.nav-logo svg{height:24px;width:auto;display:block;color:var(--ink)}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0)}

/* Head */
.eyebrow{font-size:12px;line-height:1;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
.eyebrow a:hover{color:var(--blue)}
.art-head{padding:156px 0 8px;max-width:980px;margin:0 auto;text-align:center}
.art-head h1{font-size:clamp(40px,5.4vw,72px);line-height:1.05;max-width:900px;margin:0 auto}
.art-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:var(--fs-small);color:var(--dim);margin-top:28px}
.art-meta a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9cdd5}

/* Essay: every paragraph the same size */
.art{max-width:680px;margin:0 auto;padding:56px 0 8px;font-family:var(--serif);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.art p{margin:0 0 26px}
.art h2{font-family:var(--sans);font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.03em;margin:76px 0 22px}
.art a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:#c9cdd5}
.art a:hover{text-decoration-color:var(--blue)}
.cite{font-family:var(--sans);font-size:11px;font-weight:600;line-height:0;margin-left:2px;vertical-align:super}
.art .cite a{text-decoration:none;color:var(--blue);padding:0 2px}

.define{margin:0 0 34px;padding:22px 0 26px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.define-head{display:flex;align-items:baseline;gap:10px;margin:0 0 10px!important;font-family:var(--sans);font-size:15px}
.define-head b{font-weight:600}
.define-head i{font-family:var(--serif);color:var(--dim)}
.art .define-text{font-size:var(--fs-em);line-height:1.38;letter-spacing:-.01em;margin:0}
.define-text dfn{font-style:normal;font-weight:600}
.pull{margin:48px 0 8px;padding:0 0 0 24px;border-left:3px solid var(--blue)}
.art .pull p{font-size:var(--fs-em);line-height:1.38;letter-spacing:-.01em;font-style:italic;margin:0}

/* Display moments share one size */
.moment{padding:112px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.art .moment{margin:72px calc(50% - 50vw)}
.moment p{font-family:var(--sans);font-size:var(--fs-display);font-weight:600;line-height:1.08;letter-spacing:-.035em;max-width:1000px;margin:0 auto!important;text-wrap:balance}
.moment p span{display:block;color:var(--dim)}
.moment-close{border:0;padding:64px 24px 40px}
.moment-close p span{color:var(--ink)}
.moment-close p{color:var(--blue)}

/* Work OS vs Life OS, built from the Lucie widget grammar */
.vs{position:relative;left:50%;transform:translateX(-50%);width:min(860px,calc(100vw - 40px));margin:34px 0 48px;padding:22px;border-radius:28px;background:var(--surface);font-family:var(--sans);font-size:16px;line-height:1.45;color:var(--ink)}
.art .vs p,.vs p{margin:0}
.vs-time{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 14px 4px;font-variant-numeric:tabular-nums}
.vs-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:18px;align-items:start}
.vs-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.art .vs .vs-lab,.vs-lab{display:flex;align-items:baseline;gap:8px;font-size:13px;margin:0 0 0 4px}
.vs-lab b{font-weight:600}
.vs-lab span{color:var(--dim)}
.vs-life .vs-lab b{color:var(--blue)}
.c{background:#fff;border-radius:24px;padding:20px;box-shadow:var(--card-shadow),var(--card-line);display:flex;flex-direction:column;gap:16px;overflow:hidden;text-align:left}
.c-flat{box-shadow:var(--card-line)}
.c>.res{margin:4px -20px -20px}
.kick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:600}
.kick .src{width:18px;height:18px;border-radius:5px;flex:none}
.kk{color:var(--blue)}.kk.grey{color:var(--dim)}
.st{font-size:12px;font-weight:600;margin-left:auto}.st-orange{color:var(--orange)}
.kick+.t,.kick+.two,.kick+.rec,.kick+.mail{margin-top:-6px}
.t{font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.art .vs .t+.m,.t+.m{margin-top:-12px}
.m{font-size:14px;color:var(--muted);line-height:1.4}
.lab{font-size:12.5px;color:var(--dim);display:block;margin-bottom:2px}
.num{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.num-blue{color:var(--blue)}
.num-xl{font-size:32px;letter-spacing:-.03em;line-height:1}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rec{display:flex;align-items:baseline;gap:8px}
.rec .lab{margin:0}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:999px;line-height:1.2;white-space:nowrap}
.pill svg{width:13px;height:13px}
.pill-blue{background:var(--blue-tonal);color:var(--blue-tonal-ink)}
.btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.b{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 12px;border-radius:999px;border:0;font-size:15px;font-weight:600;cursor:pointer;width:100%;white-space:nowrap;transition:filter .15s ease,background .15s ease}
.b-primary{background:var(--blue);color:#fff}.b-primary:hover{background:var(--blue-deep)}
.b-tonal{background:var(--blue-tonal);color:var(--blue-tonal-ink)}.b-tonal:hover{filter:brightness(.97)}
.res{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;font-size:13.5px;font-weight:600;background:var(--green-tonal);color:var(--green)}
.res svg{width:14px;height:14px}
.strip-bar{position:relative;height:34px;border-radius:10px;background:var(--surface)}
.strip-bar i{position:absolute;top:0;bottom:0;border-radius:10px;display:flex;align-items:center;padding:0 10px;overflow:hidden}
.strip-bar em{font-style:normal;font-size:12px;font-weight:600;white-space:nowrap}
.blk-busy{background:#e3e5ea;color:var(--muted)}
.blk-free{background:var(--blue-tonal);color:var(--blue-tonal-ink);box-shadow:inset 0 0 0 1.5px var(--blue)}
.strip-bar .now{top:-4px;bottom:-4px;width:2px;padding:0;border-radius:2px;background:var(--orange)}
.strip-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.range-bar{position:relative;height:10px;border-radius:999px;background:#eceef2}
.range-usual{position:absolute;top:0;bottom:0;border-radius:999px;background:#9fc3ff}
.range-dot{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.range-axis{position:relative;display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.range-tag{position:absolute;top:0;transform:translateX(-50%);color:var(--blue-tonal-ink);font-weight:600;white-space:nowrap}
.mail{display:flex;flex-direction:column;border-radius:14px;background:var(--surface);padding:4px 14px 14px}
.mail p{display:flex;gap:12px;font-size:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.mail p span{width:56px;flex:none;color:var(--dim)}
.mail-body{display:flex;flex-direction:column;gap:7px;padding-top:12px}
.mail-body i{display:block;height:7px;border-radius:4px;background:#dfe2e8}
.when{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lucie-line{display:flex;gap:10px;align-items:flex-start;padding:0 4px}
.lucie-line .av{width:22px;height:22px;flex:none;color:var(--ink);margin-top:1px}
.lucie-line p{font-size:15px;line-height:1.5;color:var(--muted)}
.lucie-line b{color:var(--ink);font-weight:600}

/* Close, questions, sources */
.next{max-width:680px;margin:24px auto 0;padding:56px 0 0;border-top:1px solid var(--line);text-align:center}
.next-mark{width:72px;height:72px;margin:0 auto 24px;color:var(--ink);shape-rendering:geometricPrecision}
.next h2{font-size:var(--fs-h2);letter-spacing:-.03em;line-height:1.15;max-width:640px;margin:0 auto}
.next .btn-glass{margin-top:28px}
.qs{max-width:680px;margin:104px auto 0}
.qs h2{font-size:var(--fs-h2);margin-bottom:22px}
.q{border-top:1px solid var(--line);padding:18px 0}
.q:last-of-type{border-bottom:1px solid var(--line)}
.q summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";font-weight:400;color:var(--dim);font-size:24px;line-height:1;flex:none}
.q[open] summary::after{content:"\2212"}
.q p{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--muted)}
.sources{max-width:680px;margin:40px auto 0}
.srcs summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink);padding:12px 18px;border:1px solid var(--line);border-radius:999px;background:#fff}
.srcs summary::-webkit-details-marker{display:none}
.srcs summary::after{content:"+";color:var(--dim);font-size:20px;line-height:1;font-weight:400}
.srcs[open] summary::after{content:"\2212"}
.srcs ol{padding-left:22px;margin-top:20px;font-size:14px;line-height:1.55;color:var(--muted)}
.srcs li{margin-bottom:10px}
.srcs li:target{color:var(--ink)}
.srcs a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9cdd5}
.art-back{max-width:680px;margin:56px auto var(--section-space);font-size:15px}
.art-back a{color:var(--muted)}.art-back a:hover{color:var(--blue)}

/* Footer */
.site-footer{padding-top:64px;overflow:hidden;background:#fff;border-top:1px solid var(--line)}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;max-width:920px;margin:0 auto}
.foot-cols h3{font-size:14px;color:#757b85;font-weight:500;letter-spacing:0;line-height:1.4;margin-bottom:18px}
.foot-cols a{display:block;font-size:15px;color:var(--muted);line-height:1.5;margin-bottom:12px}
.foot-cols a:hover{color:var(--blue)}
.ask-ai{max-width:920px;margin:28px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ask-ai h3{font-size:14px;color:#757b85;font-weight:500;letter-spacing:0}
.ask-ai ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ask-ai a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--muted);background:#fff}
.ask-ai a:hover{border-color:var(--ink);color:var(--ink)}
.foot-meta{font-size:12px;color:#727780;padding:34px 0 10px;max-width:920px;margin:0 auto}
.giant{display:flex;align-items:flex-end;justify-content:center;height:210px;overflow:hidden;mask-image:linear-gradient(180deg,rgba(0,0,0,.35),transparent 92%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35),transparent 92%)}
.giant svg{height:280px;width:auto;max-width:none;flex:none;transform:translateY(75px);color:#b9b9c0}

@media(max-width:1000px){.container{width:calc(100% - 64px)}}
@media(max-width:760px){
  :root{--fs-body:18px;--lh-body:1.66;--fs-em:22px;--fs-h2:28px;--section-space:clamp(88px,12svh,120px)}
  .container{width:calc(100% - 40px)}
  .art-head{padding:122px 0 4px}
  .art{padding-top:40px}
  .art p{margin-bottom:22px}
  .art h2{margin-top:60px}
  .art .moment{margin:60px calc(50% - 50vw);padding:80px 22px}
  .moment-close{padding:48px 22px 28px}
  .pull{padding-left:18px}
  .vs{width:calc(100vw - 24px);padding:16px 12px;border-radius:24px}
  .vs-grid{grid-template-columns:1fr;gap:20px}
  .qs{margin-top:80px}
  .site-footer{padding-top:48px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .foot-meta{font-size:11px;max-width:300px;margin-left:0;padding-top:30px}
  .giant{height:145px}.giant svg{height:170px;transform:translateY(45px)}
}
@media(max-width:360px){.container{width:calc(100% - 32px)}h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){.btn-glass,.b{transition:none}.btn-glass:hover{transform:none}.progress{display:none}}
@media print{.site-header,.progress,.next,.site-footer,.art-back{display:none}}

/* Category map: Work OS and Life OS */
.map{position:relative;left:50%;transform:translateX(-50%);width:min(1040px,calc(100vw - 40px));margin:44px 0 40px;font-family:var(--sans);font-size:16px;line-height:1.45;color:var(--ink)}
.art .map p,.map p{margin:0}
.map ul{list-style:none;margin:0;padding:0}
.map-card{background:#fff;border-radius:32px;box-shadow:var(--card-shadow),var(--card-line);overflow:hidden}
.map-head{text-align:center;padding:44px 32px 34px}
.map-title{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
.map-sub{margin-top:10px!important;font-size:18px;color:var(--muted);text-wrap:balance}
.map-sub b{color:var(--ink);font-weight:600}.map-sub b.life{color:var(--blue)}
.map-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line)}
.map-col{padding:34px 34px 36px;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.map-work{background:#f7f7f8}
.map-life{background:#fff}
.map-name{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin:0}
.map-work .map-name{color:#2b2b2f}
.map-life .map-name{color:var(--blue)}
.map-desc{margin-top:6px!important;font-size:15px;color:var(--muted)}
.map-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 7px;margin:22px 0 0;min-height:66px;align-content:flex-start}
.map-cloud li{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;font-size:13.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap}
.map-work .map-cloud li{background:#fff;color:#3a3a3f;box-shadow:inset 0 0 0 1px #e1e3e8}
.map-life .map-cloud{align-content:center}
.map-life .map-cloud li{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #d6e4fb;height:34px;padding:0 15px;font-size:15px;font-weight:600}
.map-cloud li svg{width:16px;height:16px;color:var(--ink)}

/* Diagrams */
.flow{position:relative;width:100%;max-width:440px;margin:30px auto 0;display:flex;flex-direction:column;align-items:center}
.flow-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:32px;align-items:center}
.node{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;background:#fff}
.flow-work .node{color:#3a3a3f;box-shadow:inset 0 0 0 1px #d3d6dc}
.flow-work .node-mid{height:38px;padding:0 18px;font-size:14px}
.flow-work .node-end{height:42px;padding:0 22px;font-size:15px;background:#2b2b2f;color:#fff;box-shadow:none}
.flow-life .sig{color:var(--muted);font-weight:500;box-shadow:inset 0 0 0 1px #dfe6f2;padding:0 11px}
.flow-life .node-ctx{height:38px;padding:0 18px;font-size:14px;color:var(--blue-tonal-ink);box-shadow:inset 0 0 0 1.5px #9fc3ff}
.flow-life .node-end{height:42px;padding:0 22px;font-size:15px;background:var(--blue-tonal);color:var(--blue-tonal-ink);box-shadow:inset 0 0 0 1px #b9d3ff}
.flow-link{position:relative;height:30px;width:100%}
.flow-link i{position:absolute;left:50%;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:#c3c7cf}
.flow-link i::after{content:"";position:absolute;left:50%;bottom:-1px;width:6px;height:6px;margin-left:-3px;border-right:1.5px solid #c3c7cf;border-bottom:1.5px solid #c3c7cf;transform:rotate(45deg)}
.flow-life .flow-link i,.flow-life .flow-link i::after{background-color:#9fc3ff;border-color:#9fc3ff}
.flow-life .flow-link i::after{background:transparent}
.flow-link-long{height:48px}
.flow-link-converge{height:48px}
.flow-link-short{height:22px}
.flow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}
.flow-lines path{fill:none;stroke:#9fc3ff;stroke-width:1.5;stroke-linecap:round}

/* Facts */
.map-facts{width:100%;margin:30px 0 0;border-top:1px solid var(--line)}
.map-work .map-facts{border-color:#e6e7ea}
.map-facts>div{padding:16px 0;border-bottom:1px solid var(--line)}
.map-work .map-facts>div{border-color:#e6e7ea}
.map-facts dt{font-size:12.5px;font-weight:600;color:var(--dim);margin-bottom:9px}
.map-facts dd{margin:0}
.map-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 6px}
.map-tags li{font-size:13px;line-height:1;padding:7px 10px;border-radius:8px}
.map-work .map-tags li{background:#ececef;color:#3a3a3f}
.map-life .map-tags li{background:#f1f6ff;color:#1d3f75}
.map-goal{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.map-work .map-goal{color:#2b2b2f}
.map-life .map-goal{color:var(--blue)}
.map-q{margin-top:22px!important;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.35;letter-spacing:-.005em}
.map-work .map-q{color:#3a3a3f}
.map-life .map-q{color:var(--ink)}
.map-and{position:absolute;left:50%;top:34px;transform:translateX(-50%);z-index:2}
.map-and span{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line),0 6px 16px -8px rgba(20,40,80,.25);font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted)}
.map-grid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.map-foot{border-top:1px solid var(--line);text-align:center;padding:30px 32px 34px}
.map-both{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.25;text-wrap:balance}
.map-both-sub{margin-top:8px!important;font-size:15px;color:var(--muted);text-wrap:balance}
.map-note{max-width:680px;margin:18px auto 0;font-size:13.5px;line-height:1.55;color:var(--dim);text-align:center;text-wrap:pretty}
.art .summary{margin-top:6px}
@media(max-width:860px){
  .map{width:calc(100vw - 24px);margin:36px 0 32px}
  .map-card{border-radius:28px}
  .map-head{padding:34px 20px 26px}
  .map-sub{font-size:16px}
  .map-grid{grid-template-columns:1fr}
  .map-grid::before{display:none}
  .map-col{padding:28px 18px 30px}
  .map-and{position:relative;left:auto;top:auto;transform:none;display:flex;justify-content:center;height:0}
  .map-and span{transform:translateY(-50%)}
  .map-life{padding-top:40px}
  .map-foot{padding:26px 20px 30px}
  .map-both{font-size:21px}
  .map-note{padding:0 12px}
}

@media(max-width:600px){
  .flow-signals{flex-wrap:nowrap;gap:4px}
  .flow-life .sig{height:28px;padding:0 8px;font-size:11.5px}
}
@media(max-width:380px){
  .map-col{padding-left:12px;padding-right:12px}
  .flow-life .sig{padding:0 6px;font-size:11px}
}
.map .map-cloud{margin-top:22px}
.map .map-title{font-size:var(--fs-h2);font-family:var(--sans);margin:0;letter-spacing:-.03em;line-height:1.12}

/* Three kinds: Work OS, Personal Agents, Life OS */
.map3{width:min(1200px,calc(100vw - 40px))}
.map3 .map-head{padding:44px 32px 30px}
.map-evo{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px;margin-top:18px}
.map .map-evo{list-style:none;padding:0}
.map-evo li{font-size:14px;font-weight:600;letter-spacing:-.01em;color:#3a3a3f;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px #e1e3e8;background:#fff;white-space:nowrap}
.map-evo li.is-life{color:var(--blue-tonal-ink);background:var(--blue-tonal);box-shadow:inset 0 0 0 1px #b9d3ff}
.map-evo li.evo-arrow{padding:0;box-shadow:none;background:transparent;display:flex;flex:none}
.map-evo svg,.map-step svg{width:22px;height:11px;fill:none;stroke:#b3b8c2;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.map3 .map-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.map3 .map-grid::before{display:none}
.map3 .map-col{padding:30px 22px 34px}
.map-agent{background:#fbfbfc;box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line)}
.map-verb{font-size:13px;font-weight:600;color:var(--dim);margin-bottom:10px!important;min-height:20px}
.map-life .map-verb{color:var(--blue)}
.map3 .map-name{font-size:25px}
.map-agent .map-name{color:#2b2b2f}
.map3 .map-cloud{min-height:72px;align-content:center;margin-top:18px}
.map-agent .map-cloud li,.map3 .map-life .map-cloud li{height:34px;padding:0 15px;font-size:15px;font-weight:600;background:#fff}
.map-agent .map-cloud li{color:#2b2b2f;box-shadow:inset 0 0 0 1px #dcdee3}
.map3 .flow{margin-top:26px;max-width:100%}
.map3 .flow-life .sig{height:28px;padding:0 8px;font-size:11.5px}
.map3 .flow-signals{flex-wrap:nowrap;gap:4px}
.flow-agent .node{color:#3a3a3f;box-shadow:inset 0 0 0 1px #d3d6dc}
.flow-agent .act{font-weight:500;color:var(--muted);height:30px;padding:0 11px;font-size:12.5px}
.flow-agent .flow-acts{min-height:38px}
.flow-agent .node-end{height:42px;padding:0 20px;font-size:15px;color:#2b2b2f;background:#fff;box-shadow:inset 0 0 0 1.5px #2b2b2f}
.flow-agent .flow-lines path{stroke:#c3c7cf}
.flow-work .flow-lines path{stroke:#c3c7cf}
.map3 .map-facts dd .map-tags{min-height:64px;align-content:flex-start}
.map3 .map-goal{font-size:19px;letter-spacing:-.015em}
.map-agent .map-goal{color:#2b2b2f}
.map-agent .map-tags li{background:#efeff2;color:#3a3a3f}
.map3 .map-q{font-size:19px}
.map-agent .map-q{color:#3a3a3f}
.map-step{position:absolute;top:32px;z-index:2;transform:translateX(-50%)}
.map-step-1{left:33.333%}.map-step-2{left:66.666%}
.map-step span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line),0 6px 16px -8px rgba(20,40,80,.25)}
.map3 .map-both{font-size:23px;max-width:720px;margin-left:auto!important;margin-right:auto!important}
@media(max-width:1099px){
  .map3{width:calc(100vw - 24px)}
  .map3 .map-grid{grid-template-columns:1fr}
  .map-agent{box-shadow:none;border-top:1px solid var(--line)}
  .map-life{border-top:1px solid var(--line)}
  .map3 .map-col{padding:40px 20px 32px}
  .map-step{position:relative;left:auto!important;top:auto;transform:none;display:flex;justify-content:center;height:0}
  .map-step span{transform:translateY(-50%) rotate(90deg)}
  .map3 .map-cloud{min-height:0}
  .map3 .map-facts dd .map-tags{min-height:0}
  .map3 .map-q{font-size:20px}
}
@media(max-width:600px){
  .map3 .map-head{padding:34px 18px 26px}
  .map-evo{gap:6px}
  .map-evo li{font-size:12.5px;padding:7px 11px}
  .map-evo svg{width:14px}
  .map3 .map-col{padding:38px 12px 30px}
  .map3 .map-both{font-size:20px}
}

@media(max-width:600px){
  .map-evo{flex-wrap:nowrap;gap:2px}
  .map-evo li{font-size:11.5px;padding:6px 8px}
  .map-evo li.evo-arrow svg{width:12px}
}


.moment-three p{font-size:clamp(26px,3.8vw,52px);max-width:1100px}
.moment-three p span{display:block;color:var(--dim)}
@media(min-width:761px){.moment-three p span{white-space:nowrap}}
.moment-three p span.is-life{color:var(--blue)}

/* Logo tiles (logos only, names in alt text) */
.map .map-logos{gap:8px;min-height:0}
.map .map-logos li{width:48px;height:48px;padding:11px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #e1e3e8,0 1px 2px rgba(0,0,0,.03);display:flex;align-items:center;justify-content:center}
.map .map-logos li img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.map .map-logos li.tile-full{padding:0;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.map .map-logos li.tile-full img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.map .map-logos li.tile-wide{width:auto;padding:0 16px}
.map .map-logos li.tile-wide img{height:17px}
.map .map-logos li.tile-lucie{width:56px;height:56px;padding:12px;box-shadow:inset 0 0 0 1px #d6e4fb,0 6px 18px -10px rgba(0,110,255,.35)}
.map .map-logos li.tile-lucie svg{width:100%;height:100%;color:var(--ink)}
.map3 .map-cloud.map-logos{min-height:104px;align-content:center}
.ask-ai a{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
.ask-ai a img{width:20px;height:20px;object-fit:contain}
@media(max-width:1099px){.map3 .map-cloud.map-logos{min-height:0}}

.map .map-logos li.tile-lucie-wide{width:auto;height:56px;padding:0 20px}
.map .map-logos li.tile-lucie-wide svg{width:auto;height:24px;color:var(--ink)}

.map-evo li.evo-sep{padding:0 2px;box-shadow:none;background:transparent;color:var(--g4);font-size:18px;font-weight:600;line-height:1;flex:none}

@media(max-width:374px){
  .map-evo li{font-size:10.5px;padding:5px 6px}
  .map-evo li.evo-sep{padding:0;font-size:14px}
}

/* Share buttons and export */
.share-btn{position:absolute;top:16px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px 0 11px;border:0;border-radius:999px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 0 0 1px var(--line),0 4px 12px -6px rgba(20,40,80,.2);transition:box-shadow .15s ease,color .15s ease}
.share-btn:hover{color:var(--blue);box-shadow:0 0 0 1px #b9d3ff,0 6px 16px -6px rgba(0,110,255,.3)}
.share-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.share-btn[disabled]{opacity:.6;cursor:progress}
.map-card{position:relative}
.vs .share-btn{top:14px;right:14px}
@media(max-width:600px){.share-btn{top:12px;right:12px;height:32px;font-size:12.5px}}
.share-stage{position:fixed;left:-20000px;top:0;z-index:-1;pointer-events:none}
.share-export{padding:56px 56px 44px;font-family:var(--sans)}
.share-export .share-btn{display:none!important}
.share-export .vs,.share-export .map{position:relative!important;left:auto!important;transform:none!important;margin:0!important}
.share-foot{display:flex;justify-content:center;margin-top:36px;color:var(--ink)}
.share-foot svg{height:30px;width:auto;display:block}
@media print{.share-btn{display:none}}

@media(max-width:600px){.map3 .map-head{padding-top:58px}}

/* Export: Safari draws box-shadows badly inside captured images, so the capture uses real borders instead */
.share-export *,.share-export{box-shadow:none!important}
.share-export .map-card{border:1px solid #e4e6eb}
.share-export .c{border:1px solid rgba(0,0,0,.08)}
.share-export .map-evo li{border:1px solid #e1e3e8}
.share-export .map-evo li.is-life{border-color:#b9d3ff}
.share-export .map-evo li.evo-sep{border:0}
.share-export .map-logos li{border:1px solid #e1e3e8}
.share-export .map-logos li.tile-full{border:0}
.share-export .map-logos li.tile-lucie{border-color:#d6e4fb}
.share-export .flow-work .node,.share-export .flow-agent .node{border:1px solid #d3d6dc}
.share-export .flow-work .node-end{border:0}
.share-export .flow-agent .node-end{border:1.5px solid #2b2b2f}
.share-export .flow-life .sig{border:1px solid #dfe6f2}
.share-export .flow-life .node-ctx{border:1.5px solid #9fc3ff}
.share-export .flow-life .node-end{border:1px solid #b9d3ff}
.share-export .blk-free{border:1.5px solid var(--blue)}
@media(min-width:1100px){.share-export .map-agent{border-left:1px solid var(--line);border-right:1px solid var(--line)}}

.cover{margin:44px auto 0;max-width:1160px}
.cover img{display:block;width:100%;height:auto;border-radius:28px;background:#f4f4f6}
@media(max-width:760px){.cover{margin-top:32px}.cover img{border-radius:20px}}

/* ===== Port notes (site cascade, not design) ===== */
/* Tailwind preflight (base layer) box-sizes PSEUDO-elements too, while this
   design's own `*` rule covers elements only; in the design file every
   ::before/::after is content-box. Measured: no height change, but the
   flow diagram's arrowheads (`.flow-link i::after`, 6x6 plus 1.5px
   borders) draw 9px in the design and 6px without this. */
*::before,*::after{box-sizing:content-box}
/* shared.css (components layer) styles a global `.eyebrow` as a pill;
   this design's plain-text eyebrow never sets those properties, so they
   would fill in from the layered rule. Measured: +10px above the h1
   without it, at both widths. Same fix as blog.css. */
.eyebrow{display:block;background:none;padding:0;border-radius:0;box-shadow:none}
/* Site chrome, not page design. The 2026-09-27 files restyle the toolbar
   logo (24px), the footer meta line (34px top, 300px on phones) and the Ask
   AI row (28px, 24px on the hub's phones). Header and footer are global, so
   the site's values from app/site-chrome.css are put back: 22px, 42px/280px,
   36px/28px. The design's `.ask-ai h3/ul/a` rules match nothing in the
   site's Ask AI markup (spans and .ask-ai-btn) and are left alone. */
.nav-logo svg{height:22px}
.foot-meta{padding-top:42px}
.ask-ai{margin:36px auto 0}
@media(max-width:760px){.foot-meta{padding-top:30px;max-width:280px}.ask-ai{margin-left:0;margin-top:28px}}