/* The home page's picture of the app itself (2026-10-12): the Bots on the left, a conversation in
   the middle, the Bot's computer on the right - Screen and Files - drawn in the app's own
   warm-paper look and played by home.js. Scoped to .home and h-* like home.css. */

.home .h-face{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(20,22,28,.1)}
.home .h-face svg{width:86%;height:86%}
.home .h-face.h-lg{width:64px;height:64px}
.home .h-face.h-sm{width:30px;height:30px}

/* the window */
.home .h-ui{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1.12fr);gap:10px;padding:10px;background:#efe8d8;border-radius:26px;color:var(--ink);box-shadow:0 50px 100px -30px rgba(0,0,0,.7),0 0 0 8px rgba(255,255,255,.04);height:600px;font-size:.88rem}
.home .h-ui-side{padding:12px 6px;display:flex;flex-direction:column;gap:4px}
.home .h-ui-label{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7c7462;padding:2px 8px 8px}
.home .h-ui-bot{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;text-align:left;transition:background .2s,box-shadow .2s}
.home .h-ui-bot:hover{background:rgba(255,255,255,.5)}
.home .h-ui-bot.on{background:#fff;box-shadow:0 6px 18px -10px rgba(20,22,28,.35)}
.home .h-ui-bot b{display:block;font-size:.86rem;line-height:1.2}
.home .h-ui-bot small{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#7c7462;white-space:nowrap}
.home .h-ui-bot.on small{color:#8a6a00}
.home .h-pill{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;border-radius:999px;background:#fff3bf;color:#6b5400;font-weight:700;font-size:.68rem}
.home .h-pill::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor}
.home .h-pill.h-idle{background:transparent;color:#9a917d;padding:0}

.home .h-ui .dbc{border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px oklch(0.271 0.012 78/6%)}
.home .h-ui .dbc-head .h-face{width:30px;height:30px}
.home .h-ui .pc{border-radius:18px}
.home .h-ui .dbc-thread{min-height:0}

/* the three lines under it */
.home .h-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:70px}
.home .h-trio h3{font-size:1.5rem;font-weight:700;margin-bottom:10px;color:#fff}
.home .h-trio p{color:#aaa595}
.home .h-trio li{padding-top:22px;border-top:2px solid var(--yellow)}

@media (max-width:980px){
  .home .h-ui{grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:auto;grid-template-rows:auto 560px}
  .home .h-ui-side{grid-column:1/-1;flex-direction:row;overflow-x:auto;padding:4px}
  .home .h-ui-label{display:none}
  .home .h-ui-bot{flex:none}
  .home .h-trio{grid-template-columns:1fr}
}
@media (max-width:640px){
  .home .h-ui{grid-template-columns:1fr;border-radius:20px}
  .home .h-ui-bot small{display:none}
  .home .h-ui{height:auto;grid-template-rows:auto}
  .home .h-ui .dbc{height:420px}
  .home .h-ui .pc{min-height:430px}
}
@media (prefers-reduced-motion:reduce){
  .home .h-ui *{animation:none!important;transition:none!important}
}

/* Your own programs: the PC section */
.home .h-pc{background:var(--paper)}
.home .h-pc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:end}
.home .h-pc-list{display:flex;flex-direction:column;gap:14px}
.home .h-pc-list li{padding:20px 22px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.home .h-pc-list li:nth-child(2){box-shadow:0 0 0 3px var(--yellow)}
.home .h-pc-list b{display:block;font-size:1.05rem;margin-bottom:4px}
.home .h-pc-list p{color:var(--muted)}

/* apps, under what comes built in */
.home .h-apps-note{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:28px;padding:26px 30px;border-radius:24px;border:1.5px dashed #d9d1bd;background:rgba(255,255,255,.55)}
.home .h-apps-note h3{font-size:1.25rem;font-weight:700;margin-bottom:6px}
.home .h-apps-note p{color:var(--muted);max-width:60ch}
.home .h-apps-note .h-btn{flex:none}

@media (max-width:980px){
  .home .h-pc-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  .home .h-apps-note{flex-direction:column;align-items:flex-start;padding:22px}
}
@keyframes h-pulse2{50%{opacity:.25}}