/* ================= Product gallery: eight of the app's own screens, rebuilt from the SwiftUI source =================
   Tokens are KnacticsColor (warm palette) and KnacticsSpectrum from Knactics/App/KnacticsDesign.swift.
   Sizes are the app's own points (cards 22, pills 46, rows 16 inset), so a tile reads as the phone at 1:1. */
.bento{
  --g-ink:#1A1714;--g-graphite:#3D3833;--g-muted:#8A8680;--g-faint:#B0AAA3;
  --g-paper:#FAF9F7;--g-surface:#F2F0EB;--g-selection:#E5E2DB;--g-card:#F9F8F5;--g-line:#E2DCD4;--g-cardline:rgba(226,220,212,.55);
  --g-raised:#fff;--g-success:#06906A;--g-accent:#3D6EF0;
  --g-serif:ui-serif,"New York","Newsreader",Georgia,serif;
  position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-flow:dense;
  gap:14px;height:780px;margin-top:64px}
.bento *{box-sizing:border-box}

/* One open tile (3 columns by 4 rows) and seven small ones packed beside it: the first small one wide, the rest square.
   Choosing a small tile opens it where the open one was; the others slide over to make room. */
.bt{position:relative;min-width:0;min-height:0;border-radius:24px;overflow:hidden;cursor:pointer;
  /* frosted white glass, lighter than the page, so each tile takes the colour behind it */
  background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px -30px rgba(70,52,30,.3),0 1px 2px rgba(70,52,30,.04);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  transition:box-shadow .2s}
.bt.on{grid-column:1 / span 3;grid-row:1 / span 4;cursor:default;border-radius:28px}
.bt.wide{grid-column:span 2}
.bt:not(.on):hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 0 0 2px rgba(61,110,240,.3),0 22px 48px -30px rgba(70,52,30,.36),0 1px 2px rgba(70,52,30,.04)}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(*),::view-transition-new(*){height:100%;object-fit:cover;object-position:top left}

/* Small: the place's name and sidebar symbol, over a compact view of the screen drawn to fit the tile */
.bt-hd{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-start;gap:8px;padding:15px 16px;text-align:left;
  font:600 15.5px/1.2 var(--app-font);color:var(--ink);background:none;border:0;cursor:pointer}
.bt-hd svg{width:18px;height:18px;flex:none;color:var(--ink-2);margin-top:-1px}
.bt.on .bt-hd{display:none}
.bt-hd small{display:none}
.bt.wide:not(.on) .bt-hd{flex-wrap:wrap;align-content:flex-start;column-gap:8px;row-gap:8px}
.bt.wide:not(.on) .bt-hd small{display:block;flex-basis:100%;padding-right:56%;font:400 14.5px/1.4 var(--app-font);color:var(--ink-2)}

.bt-cap{position:absolute;left:30px;top:28px;z-index:2;opacity:0;visibility:hidden}
.bt.on .bt-cap{opacity:1;visibility:visible}
.bt-cap h3{margin:0;font:600 23px/1.2 var(--app-font);letter-spacing:-.01em;color:var(--ink)}
.bt-cap p{margin:6px 0 0;font:400 16.5px/1.45 var(--app-font);color:var(--ink-2)}
.bt.side .bt-cap{top:50%;transform:translateY(-50%)}
.bt.side .bt-cap h3{font-size:30px;line-height:1.15}
.bt.side .bt-cap p{font-size:17.5px;margin-top:10px}
.bt-scr{position:absolute;left:0;top:0;transform-origin:0 0}
.bt:not(.on) .bt-scr{visibility:hidden;pointer-events:none}

/* Compact views: the same app pieces, composed to fit a small tile; the script scales each to fit whole */
.bt-mini{position:absolute;left:14px;right:14px;top:46px;bottom:12px;z-index:3;pointer-events:none}
.bt.on .bt-mini{display:none}
.bt.wide .bt-mini{left:48%}
.mn{position:absolute;left:0;top:0;transform-origin:0 0;font-family:var(--g-serif);color:var(--g-ink);-webkit-font-smoothing:antialiased}
.mn-card{background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(226,220,212,.8),0 10px 22px -12px rgba(70,52,30,.4)}
.mn-office{width:216px;padding:10px 10px 11px}
.mn-office .seg{display:flex;padding:2px;border-radius:10px;background:#EAEAEB;font:500 11px/22px -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",sans-serif;text-align:center}
.mn-office .seg > *{flex:1;border-radius:8px}
.mn-office .seg b{font-weight:500;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.mn-office svg{display:block;width:100%;height:58px;margin:8px 0 6px}
.mn-office .row{display:flex;align-items:center;gap:6px;font:600 12.5px/1.2 var(--g-serif)}
.mn-w{width:210px;display:flex;flex-direction:column;align-items:center}
.mn-w b{margin-top:6px;font:400 18px/1.15 var(--g-serif)}
.mn-w small{font:400 12.5px/1.3 var(--g-serif);color:#14B8A6}
.mn-w .chips{display:flex;gap:4px;margin-top:9px}
.mn-wheel{width:150px;height:150px}
.mn-wheel .ring{position:absolute;left:17px;top:17px;width:116px;height:116px;border-radius:50%;border:1px dashed rgba(176,160,140,.6)}
.mn-wheel > span{position:absolute}
.mn-wheel .mid{position:absolute;left:34px;right:34px;top:62px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.mn-wheel .mid b{font:400 13px/1.1 var(--g-serif)}
.mn-wheel .mid i{font:600 9.5px/1 var(--g-serif);font-style:normal;padding:3px 8px;border-radius:999px;color:#fff}
.mn-feed{width:214px;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.mn-feed h5{margin:0;font:600 14px/1.25 var(--g-serif)}
.mn-feed p{margin:0;font:400 11.5px/1.4 var(--g-serif);color:var(--g-graphite);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mn-feed .src{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(226,220,212,.9);font:400 10.5px/1.2 var(--g-serif);color:var(--g-muted)}
.mn-feed .src svg{width:9px;height:9px}
.mn-ideas{width:206px;height:140px}
.mn-ideas .c{position:absolute;left:0;right:0;top:0;height:124px;border-radius:18px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(242,80,143,.28),0 10px 20px -10px rgba(242,80,143,.35)}
.mn-ideas .c.b1{transform:translateY(8px) scale(.95);opacity:.9}
.mn-ideas .c.b2{transform:translateY(16px) scale(.9);opacity:.6}
.mn-ideas .c.f{padding:12px 14px;display:flex;flex-direction:column;gap:5px}
.mn-ideas .c::before{content:"";position:absolute;inset:0 0 auto;height:80px;background:linear-gradient(180deg,rgba(242,80,143,.2),rgba(242,80,143,0))}
.mn-ideas .c > *{position:relative}
.mn-ideas .top{display:flex;justify-content:space-between;align-items:center}
.mn-ideas h5{margin:auto 0 0;font:400 17px/1.15 var(--g-serif)}
.mn-ideas p{margin:0;font:400 11.5px/1.35 var(--g-serif);color:var(--g-graphite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-lib{width:216px;display:flex;flex-direction:column;gap:10px}
.mn-lib .kinds{display:flex;justify-content:space-between}
.mn-lib .k{width:70px;display:flex;flex-direction:column;align-items:center;gap:4px;font:400 10.5px/1.1 var(--g-serif);text-align:center}
.mn-lib .k em{font:500 10px/1 var(--g-serif);font-style:normal}
.mn-lib .row{display:flex;align-items:center;gap:8px;padding:8px 10px}
.mn-lib .row b{flex:1;min-width:0;font:400 12.5px/1.2 var(--g-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-con{width:220px;display:flex;flex-direction:column;gap:6px}
.mn-con .r{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:var(--g-card);box-shadow:inset 0 0 0 1px rgba(226,220,212,.8)}
.mn-con .lg{width:28px;height:28px;flex:none;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px rgba(226,220,212,.9);display:grid;place-items:center}
.mn-con .lg img{width:18px;height:18px;object-fit:contain}
.mn-con .m{flex:1;min-width:0}
.mn-con .m b{display:block;font:600 12.5px/1.2 var(--g-serif)}
.mn-con .m small{display:block;font:400 10px/1.2 var(--g-serif);color:var(--g-muted)}
.mn-con i{font:600 10.5px/22px var(--g-serif);font-style:normal;height:22px;padding:0 10px;border-radius:999px;background:var(--g-ink);color:#fff}
/* Phone versions of the compact views (shown only on phones, see the end of the file) */
.bt-mini.ph{display:none}
.mp-office{width:150px;padding:8px 8px 9px}
.mp-office .seg{display:flex;padding:2px;border-radius:8px;background:#EAEAEB;font:500 9.5px/18px -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",sans-serif;text-align:center}
.mp-office .seg > *{flex:1;border-radius:6px}
.mp-office .seg b{font-weight:500;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.mp-office svg{display:block;width:100%;height:40px;margin:6px 0 5px}
.mp-office .row{display:flex;align-items:center;gap:5px;font:600 11px/1.2 var(--g-serif)}
.mp-office .gb,.mp-feed .gb,.mp-ideas .gb{font-size:10px;padding:2px 6px}
.mp-w{width:150px;display:flex;flex-direction:column;align-items:center}
.mp-w b{margin-top:4px;font:400 15px/1.15 var(--g-serif)}
.mp-w small{font:400 11px/1.3 var(--g-serif);color:#14B8A6}
.mp-w .chips{display:flex;flex-wrap:nowrap;gap:4px;margin-top:8px}
.mp-wheel{width:116px;height:116px}
.mp-wheel .ring{position:absolute;left:16px;top:16px;width:84px;height:84px;border-radius:50%;border:1px dashed rgba(176,160,140,.6)}
.mp-wheel > span{position:absolute}
.mp-wheel .mid{position:absolute;left:28px;right:28px;top:40px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.mp-wheel .mid b{font:400 10.5px/1.1 var(--g-serif)}
.mp-wheel .mid i{font:600 8px/1 var(--g-serif);font-style:normal;padding:3px 6px;border-radius:999px;color:#fff;white-space:nowrap}
.mp-feed{width:150px;padding:9px;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.mp-feed h5{margin:0;font:600 12px/1.25 var(--g-serif);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mp-feed .src{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(226,220,212,.9);font:400 9.5px/1.2 var(--g-serif);color:var(--g-muted)}
.mp-feed .src svg{width:8px;height:8px}
.mp-ideas{width:150px;height:112px}
.mp-ideas .c{position:absolute;left:0;right:0;top:0;height:100px;border-radius:16px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(242,80,143,.28),0 8px 16px -8px rgba(242,80,143,.35)}
.mp-ideas .c.b1{transform:translateY(6px) scale(.95);opacity:.9}
.mp-ideas .c.b2{transform:translateY(12px) scale(.9);opacity:.6}
.mp-ideas .c.f{padding:10px 11px;display:flex;flex-direction:column;gap:4px}
.mp-ideas .c::before{content:"";position:absolute;inset:0 0 auto;height:64px;background:linear-gradient(180deg,rgba(242,80,143,.2),rgba(242,80,143,0))}
.mp-ideas .c > *{position:relative}
.mp-ideas .top{display:flex;justify-content:space-between;align-items:center}
.mp-ideas h5{margin:auto 0 0;font:400 14px/1.15 var(--g-serif)}
.mp-ideas p{margin:0;font:400 10px/1.3 var(--g-serif);color:var(--g-graphite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-lib,.mp-con{width:150px;display:flex;flex-direction:column;gap:5px}
.mp-lib .r,.mp-con .r{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:11px;background:var(--g-card);box-shadow:inset 0 0 0 1px rgba(226,220,212,.8)}
.mp-lib b,.mp-con b{flex:1;min-width:0;font:400 11.5px/1.2 var(--g-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-con b{font-weight:600}
.mp-lib em{font:600 11px/1 var(--g-serif);font-style:normal}
.mp-con .lg{width:24px;height:24px;flex:none;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px rgba(226,220,212,.9);display:grid;place-items:center}
.mp-con .lg img{width:15px;height:15px;object-fit:contain}
.mp-con i{font:600 9.5px/19px var(--g-serif);font-style:normal;height:19px;padding:0 8px;border-radius:999px;background:var(--g-ink);color:#fff}
.bt-office{width:680px}
.bt-office .kcv{max-width:none}

/* The phone screen: the app page at the app's own size; the script places and scales it */
.ks{width:372px;
  display:flex;flex-direction:column;overflow:hidden;border-radius:30px 30px 0 0;background:var(--g-surface);
  font-family:var(--g-serif);color:var(--g-ink);-webkit-font-smoothing:antialiased;
  box-shadow:0 -1px 0 rgba(255,255,255,.8),0 30px 70px -30px rgba(70,52,30,.5)}
:where(.ks) button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
:where(.ks) input,:where(.ks) textarea{font:inherit;color:inherit;border:0;outline:0;background:transparent;padding:0;margin:0;resize:none}
.ks svg{display:block;flex:none}
.ks-sc{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:6px 16px 32px}
.ks-sc::-webkit-scrollbar{display:none}

/* Sheet header (KnacticsSheetHeader) and page top bar (PersonalTopBar) */
.ks-hd{position:relative;z-index:2;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:8px 10px 4px}
.ks-hd b{text-align:center;font:600 17px/1.2 var(--g-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-tb{position:relative;z-index:2;display:grid;grid-template-columns:54px 1fr 54px;align-items:center;padding:16px 16px 8px;
  background:linear-gradient(180deg,var(--g-surface) 72%,rgba(242,240,235,0))}
.ks-tb b{text-align:center;font:600 18px/1.2 var(--g-serif)}
.ks-tb > :last-child{justify-self:end}
.kc{width:44px;height:44px;display:grid;place-items:center}
.kc i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--g-card);box-shadow:inset 0 0 0 1px var(--g-cardline);color:var(--g-graphite)}
.kc svg{width:15px;height:15px}
.kfl{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--g-graphite);
  background:rgba(255,255,255,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 11px 22px -6px rgba(40,30,20,.14)}
.kfl svg{width:22px;height:22px}

/* Shared pieces */
.kh{font:400 15px/1.2 var(--g-serif);color:var(--g-muted);padding:0 16px;margin:0 0 10px}
.kcard{background:var(--g-card);border-radius:22px;box-shadow:inset 0 0 0 1px var(--g-cardline)}
.krows > * + *{position:relative}
.krows > * + *::before{content:"";position:absolute;top:0;left:var(--inset,72px);right:16px;height:1px;background:rgba(226,220,212,.7)}
.gt{--gc:var(--c);width:var(--s);height:var(--s);flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c));
  box-shadow:0 calc(var(--s)*.07) calc(var(--s)*.28) color-mix(in srgb,var(--c) 28%,transparent)}
.gt.sq{border-radius:calc(var(--s)*.26)}
.gt svg{width:40%;height:40%}
.gb{display:inline-flex;align-items:center;flex:none;padding:2.5px 7px;border-radius:999px;font:600 11.5px/1.2 var(--g-serif);white-space:nowrap;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.kpill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;white-space:nowrap;
  font:600 16px/1 var(--g-serif)!important;color:#fff!important;background:var(--fill,var(--g-ink))!important;box-shadow:0 5px 12px rgba(0,0,0,.14);transition:background .2s,color .2s,box-shadow .2s}
.kpill svg{width:15px;height:15px}
.kpill:disabled{cursor:default;color:var(--g-muted)!important;background:var(--g-selection)!important;box-shadow:none}
.kpill.full{width:100%}
.kfield{background:var(--g-card);border-radius:16px;box-shadow:inset 0 0 0 1px var(--g-cardline);padding:0 16px}
.ksearch{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:999px;background:var(--g-card);box-shadow:inset 0 0 0 1px var(--g-cardline)}
.ksearch svg{width:16px;height:16px;color:var(--g-muted)}
.ksearch input{flex:1;min-width:0;font:400 16px/1 var(--g-serif);color:var(--g-graphite)}
.ksearch input::placeholder{color:var(--g-faint)}
.wa{overflow:visible}
.kx-strip{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:4px 16px}
.kx-strip::-webkit-scrollbar{display:none}
.klead{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:5px;transition:opacity .2s}
.klead .gt{position:relative}
.klead .t{font:400 13px/1.2 var(--g-serif);text-align:center;width:var(--w,84px)}
.klead .n{font:500 11.5px/1.2 var(--g-serif);margin-top:1px}
.klead.sel .gt::after{content:"";position:absolute;inset:-5px;border-radius:calc(var(--s)*.26 + 5px);box-shadow:inset 0 0 0 2.5px var(--g-ink)}
.klead.sel .t{font-weight:600}
.klead.dim{opacity:.45}
.krow{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 16px;width:100%;text-align:left}
.krow .m{flex:1;min-width:0}
.krow .tt{display:flex;align-items:baseline;gap:6px;font:400 17px/1.25 var(--g-serif)}
.krow .tt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krow .pv{font:400 14px/1.3 var(--g-serif);color:var(--g-muted);margin-top:3px}
.krow .dt{font:400 12px/1 var(--g-serif);color:var(--g-muted);flex:none}

/* ---------- Wheel (KnacticsWheel) ---------- */
.kwh{position:relative;height:330px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.kwh.drag{cursor:grabbing}
.kwh .ring{position:absolute;border-radius:50%;border:1px dashed rgba(226,220,212,.95);pointer-events:none}
.kwh .pad{position:absolute;border-radius:50%;touch-action:none}
.kwh .hole{position:absolute;border-radius:50%;touch-action:pan-y}
.kwh .it{touch-action:none;position:absolute;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;scale:.82;opacity:.78;transition:scale .22s ease,opacity .22s ease}
.kwh .it.on{scale:1.3;opacity:1;z-index:1}
.kwh .mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;transition:opacity .16s}
.kwh .mid.fade{opacity:0}
.kwh .mid h5{margin:0;font:400 21px/1.15 var(--g-serif)}
.kwh .mid p{margin:0;font:400 13px/1.3 var(--g-serif);color:var(--g-muted)}
.kwh .go{margin-top:6px;height:32px;padding:0 18px;border-radius:999px;font:600 14px/32px var(--g-serif)!important;color:#fff!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c))!important}

/* ---------- Workers: New worker ---------- */
.kw2{--tint:#14B8A6}
.kw2 .wash{position:absolute;inset:0 0 auto;height:340px;background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 16%,transparent),transparent);pointer-events:none;transition:background .3s}
.kw-id{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:8px}
.kw-av{position:relative;width:88px;height:88px}
.kw-av::before{content:"";position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;background:color-mix(in srgb,var(--tint) 22%,transparent);filter:blur(28px)}
.kw-av svg{position:relative;width:88px;height:88px}
.kw-names{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.kw-names input{width:100%;text-align:center}
.kw-names .nm{font:400 26px/1.2 var(--g-serif);color:var(--g-ink)}
.kw-names .rl{font:400 16px/1.2 var(--g-serif);color:var(--tint)}
.kw-names input::placeholder{color:var(--g-faint)}
.kw-cols{display:flex;justify-content:center;gap:2px;width:100%}
.kw-cols button{flex:0 1 40px;min-width:0;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative}
.kw-cols button svg{width:75%;height:75%}
.kw-cols button.on::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px var(--c)}
.kw-sec{margin-top:28px}
.kw-goal{padding:16px;min-height:120px}
.kw-goal textarea{display:block;width:100%;min-height:92px;font:400 17px/1.35 var(--g-serif);color:var(--g-ink)}
.kw-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.kw-modes button{display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border-radius:999px;background:var(--g-card);box-shadow:inset 0 0 0 1px var(--g-cardline);font:400 15px/1 var(--g-serif);color:var(--g-ink);transition:background .22s,color .22s,box-shadow .22s;white-space:nowrap}
.kw-modes button svg{width:15px;height:15px}
.kw-modes button.on{background:var(--tint);color:#fff;box-shadow:none}
.kset{display:flex;align-items:center;gap:14px;min-height:52px;padding:8px 16px}
.kset > svg{width:20px;height:20px;color:var(--gl,var(--g-ink))}
.kset .t{flex:1;font:400 17px/1.2 var(--g-serif);white-space:nowrap}
.kset .v{height:34px;padding:0 11px;border-radius:8px;background:rgba(118,118,128,.12);font:400 16px/34px -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",sans-serif;color:var(--g-ink);white-space:nowrap}
.kset .vsub{font:400 15px/1.2 var(--g-serif);color:var(--g-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
.ktog{position:relative;width:51px;height:31px;border-radius:999px;background:rgba(120,120,128,.16);transition:background .2s;flex:none}
.ktog::after{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .2s}
.ktog[aria-checked="true"]{background:var(--tint,var(--g-success))}
.ktog[aria-checked="true"]::after{transform:translateX(20px)}
.kdays{display:flex;gap:6px;padding:10px 12px}
.kdays button{flex:1;height:40px;border-radius:50%;max-width:40px;margin:0 auto;font:600 15px/40px var(--g-serif);background:var(--g-card);box-shadow:inset 0 0 0 1px var(--g-cardline);transition:background .18s,color .18s}
.kdays button.on{background:var(--tint);color:#fff;box-shadow:none}
.kw-bar{position:relative;z-index:2;padding:20px 16px 18px;background:linear-gradient(180deg,rgba(242,240,235,0),var(--g-surface) 20px)}

/* ---------- Build ---------- */
.kb2 .intro{padding:0 4px}
.kb2 .intro h4{margin:0;font:400 28px/1.15 var(--g-serif)}
.kb2 .intro p{margin:6px 0 0;font:400 15px/1.4 var(--g-serif);color:var(--g-muted)}
.kb2 .kfield{position:relative;margin-top:14px;min-height:96px;padding:14px 60px 14px 16px}
.kb2 .kfield textarea{display:block;width:100%;min-height:68px;font:400 17px/1.3 var(--g-serif)}
.kb2 .kfield textarea::placeholder{color:var(--g-faint)}
.kb2 .mic{position:absolute;right:6px;bottom:6px;width:44px;height:44px;display:grid;place-items:center;color:var(--g-muted)}
.kb2 .mic svg{width:18px;height:18px}
.kb2 .go-row{display:flex;align-items:center;gap:4px;margin-top:12px}
.kb2 .go-row small{flex:1;font:400 13px/1.3 var(--g-serif);color:var(--g-muted)}
.kb2 .plus{width:42px;height:42px;display:grid;place-items:center;flex:none}
.kb2 .plus i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(226,220,212,.88);color:var(--g-muted)}
.kb2 .plus svg{width:16px;height:16px}
.kb2 .wheel-h{margin:26px 0 14px}
.kb2 .ex{display:flex;align-items:flex-start;gap:12px;width:100%;padding:13px 16px;text-align:left;font:400 15px/1.35 var(--g-serif)}
.kb2 .ex span{flex:1}
.kb2 .ex svg{width:13px;height:13px;margin-top:3px;color:var(--c)}
.kb2 .bfoot{margin:26px 16px 0;font:400 13px/1.4 var(--g-serif);color:var(--g-muted)}

/* ---------- Goals ---------- */
.kg2 .empty{margin:22px auto 0;max-width:300px;text-align:center;font:400 15px/1.4 var(--g-serif);color:var(--g-muted)}
.kmodal{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:rgba(26,23,20,.16);opacity:0;pointer-events:none;transition:opacity .2s}
.kmodal.on{opacity:1;pointer-events:auto}
.kmodal .box{position:relative;width:min(304px,100%);border-radius:22px;overflow:hidden;background:var(--g-card);padding:24px 22px 20px;text-align:center;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent),0 12px 30px color-mix(in srgb,var(--c) 22%,transparent);transform:scale(.94);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.kmodal.on .box{transform:none}
.kmodal .box::before{content:"";position:absolute;inset:0 0 auto;height:150px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 18%,transparent),transparent)}
.kmodal .box > *{position:relative}
.kmodal .gt{margin:0 auto}
.kmodal h5{margin:16px 0 0;font:600 20px/1.2 var(--g-serif)}
.kmodal p{margin:8px 0 0;font:400 15px/1.4 var(--g-serif);color:var(--g-muted)}
.kmodal .kpill{width:100%;margin-top:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c))!important;box-shadow:0 4px 8px color-mix(in srgb,var(--c) 30%,transparent)}
.kmodal .no{display:block;width:100%;margin-top:6px;padding:10px 0;font:600 15px/1 var(--g-serif)!important;color:var(--g-graphite)!important}

/* ---------- Ideas ---------- */
.ki2 .ideck{position:relative;height:354px;margin-top:22px}
.ki2 .icard{position:absolute;left:0;right:0;top:0;height:330px;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:28px;overflow:hidden;background:var(--g-raised);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent),0 12px 22px color-mix(in srgb,var(--c) 18%,transparent);
  transform-origin:50% 100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.ki2 .icard::before{content:"";position:absolute;inset:0 0 auto;height:190px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,transparent),transparent);pointer-events:none}
.ki2 .icard > *{position:relative}
.ki2 .icard .top{display:flex;align-items:center;justify-content:space-between}
.ki2 .icard h5{margin:auto 0 0;font:400 27px/1.18 var(--g-serif);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ki2 .icard p{margin:0;font:400 16px/1.45 var(--g-serif);color:var(--g-graphite)}
.ki2 .icard .hints{display:flex;justify-content:space-between;gap:6px;margin-top:6px;font:500 11px/1 var(--g-serif);color:var(--g-faint);white-space:nowrap}
.ki2 .icard .hints span{display:inline-flex;align-items:center;gap:4px}
.ki2 .icard .hints svg{width:12px;height:12px}
.ki2 .stamp{position:absolute;left:50%;top:24px;transform:translateX(-50%) scale(.8);opacity:0;padding:7px 14px;border-radius:8px;background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 2.5px var(--c);
  color:var(--c);font:700 15px/1 var(--g-serif);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;transition:opacity .15s,transform .15s}
.ki2 .stamp.on{opacity:1;transform:translateX(-50%) scale(1)}
.ki2 .acts{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:16px}
.ki2 .acts button{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--g-card);box-shadow:inset 0 0 0 1px var(--g-cardline),0 5px 10px rgba(0,0,0,.06)}
.ki2 .acts button svg{width:19px;height:19px}
.ki2 .acts .pri{width:64px;height:64px;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--g-success) 82%,#fff),var(--g-success));box-shadow:0 5px 10px rgba(6,144,106,.3)}
.ki2 .acts .pri svg{width:22px;height:22px}
.ki2 .count{margin-top:16px;text-align:center;font:500 13px/1 var(--g-serif);color:var(--g-muted);font-variant-numeric:tabular-nums}
.ki2 .all{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:44px;margin-top:10px;font:600 15px/1 var(--g-serif);color:var(--g-graphite)}
.ki2 .all svg{width:12px;height:12px}

/* ---------- Feed ---------- */
.kf2 .day{padding:0 16px;margin:0 0 12px;font:400 15px/1.2 var(--g-serif);color:var(--g-muted)}
.kf2 .post{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px;margin-bottom:22px;border-radius:22px;background:var(--g-raised);box-shadow:inset 0 0 0 1px var(--g-cardline),0 6px 14px rgba(0,0,0,.05)}
.kf2 .post h5{margin:0;font:600 20px/1.25 var(--g-serif)}
.kf2 .post p{margin:0;font:400 16px/1.52 var(--g-serif);color:var(--g-graphite)}
.kf2 .srcs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;width:100%}
.kf2 .srcs::-webkit-scrollbar{display:none}
.kf2 .srcs a{display:inline-flex;align-items:center;gap:6px;flex:none;padding:5px 10px;border-radius:999px;background:var(--g-card);box-shadow:inset 0 0 0 1px var(--g-cardline);font:400 13px/1.2 var(--g-serif);color:var(--g-muted)}
.kf2 .srcs a:hover{color:var(--g-graphite)}
.kf2 .srcs svg{width:11px;height:11px}
.kf2 .acts{display:flex;align-items:center;gap:18px;width:100%;padding-top:2px;font:500 14px/1 var(--g-serif);color:var(--g-graphite)}
.kf2 .acts .ask{display:inline-flex;align-items:center;gap:7px;margin-right:auto}
.kf2 .acts svg{width:17px;height:17px}
.kf2 .acts .ic{width:32px;height:32px;display:grid;place-items:center}
.kf2 .none{margin:40px 20px;text-align:center}
.kf2 .none h5{margin:0;font:400 20px/1.2 var(--g-serif)}
.kf2 .none p{margin:8px 0 0;font:400 14px/1.4 var(--g-serif);color:var(--g-muted)}

/* ---------- Library ---------- */
.kl2 .lrec{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:6px var(--side,60px) 18px}
.kl2 .lrec::-webkit-scrollbar{display:none}
.kl2 .rc{flex:none;width:214px;height:282px;scroll-snap-align:center;display:flex;flex-direction:column;text-align:left;border-radius:22px;overflow:hidden;background:var(--g-raised);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent),0 8px 16px color-mix(in srgb,var(--c) 18%,transparent);transition:transform .2s,opacity .2s}
.kl2 .rc .pv{position:relative;align-self:stretch;width:100%;height:176px;flex:none;background:#fff;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.04)}
.kl2 .rc .bd{align-self:stretch;width:100%;flex:1;display:flex;flex-direction:column;padding:14px}
.kl2 .rc .bd b{font:600 16px/1.25 var(--g-serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kl2 .rc .ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font:400 12px/1 var(--g-serif);color:var(--g-muted)}
.kl2 .rc .pv-sheet{inset:12px 12px 0}
.kl2 .rc .pv-doc{inset:12px 26px 0}
.kl2 .rc .pv-slide{inset:32px 16px auto}
.kl2 .lsec{margin-top:22px}
.kl2 .lsec[hidden]{display:none}
.kl2 .krow[hidden]{display:none}
.kl2 .nomatch{margin:22px 0 0;text-align:center;font:400 15px/1.4 var(--g-serif);color:var(--g-muted)}

/* ---------- Connectors ---------- */
.kc2 .list{display:flex;flex-direction:column;gap:10px}
.kc2 .cn{display:flex;flex-direction:column;gap:10px;height:112px;padding:16px;border-radius:22px;background:var(--g-card);box-shadow:inset 0 0 0 1px var(--g-cardline)}
.kc2 .cn .r{display:flex;align-items:center;gap:12px}
.kc2 .lg{width:50px;height:50px;flex:none;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--g-cardline);display:grid;place-items:center;padding:9px;overflow:hidden;font:700 21px/1 var(--g-serif)}
.kc2 .lg img{width:32px;height:32px;object-fit:contain}
.kc2 .cn .m{flex:1;min-width:0}
.kc2 .cn .m b{display:block;font:600 17px/1.2 var(--g-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc2 .cn .m small{display:block;margin-top:3px;font:400 13px/1.2 var(--g-serif);color:var(--g-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc2 .cn .go{height:36px;padding:0 16px;flex:none;border-radius:999px;font:600 14px/36px var(--g-serif)!important;color:#fff!important;background:var(--g-ink)!important;transition:background .2s,color .2s}
.kc2 .cn .go.done{color:var(--g-graphite)!important;background:var(--g-selection)!important;cursor:default}
.kc2 .cn p{margin:0;font:400 14px/1.35 var(--g-serif);color:var(--g-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kc2 .none{margin:40px 10px;text-align:center;font:400 15px/1.4 var(--g-serif);color:var(--g-muted)}
.kc2 .fs{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:24px 20px 14px;background:linear-gradient(180deg,rgba(242,240,235,0),var(--g-surface) 55%)}
.kc2 .fs .ksearch{height:56px;padding:0 20px;background:var(--g-raised);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.kc2 .fs .ksearch svg{width:18px;height:18px;color:var(--g-ink)}
.kc2 .fs .ksearch input{font-size:17px}
.kc2 .ks-sc{padding-bottom:100px}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .bento{height:740px;gap:12px}
  .bt-cap{left:22px;top:22px}
  .bt-hd{font-size:14.5px;padding:13px 13px}
}
/* Phones: the same bento, two small tiles to a row (the first one wide) above the open screen,
   each drawing its phone version of the compact view */
@media (max-width:760px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:184px repeat(3,164px) 660px;height:auto;gap:10px;margin-top:44px}
  .bt{border-radius:20px}
  .bt.on{grid-column:1 / -1;grid-row:5;border-radius:24px}
  .bt.wide{grid-column:span 2}
  .bt-hd{padding:13px 14px;font-size:15px}
  .bt.wide:not(.on) .bt-hd small{font-size:13px;line-height:1.4;padding-right:52%}
  .bt-mini:not(.ph){display:none}
  .bt-mini.ph{display:block;left:12px;right:12px;top:40px;bottom:10px}
  .bt.wide .bt-mini.ph{left:50%;top:14px;bottom:14px;right:14px}
  .bt-cap{left:20px;top:20px}
  .bt-cap h3{font-size:21px}
  .bt-cap p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .kwh .it,.ki2 .icard,.kw-av svg{transition:none!important}
}