/* 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, Terminal 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.08fr);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);min-height:470px;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-chat,.home .h-ui-pc{background:#fffdf8;border-radius:18px;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.home .h-ui-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.home .h-ui-head b{font-family:var(--display);font-size:1.02rem;letter-spacing:-.01em}
.home .h-ui-head .h-pill{margin-left:2px}
.home .h-ui-thread{flex:1;padding:14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.home .h-ui-me{align-self:flex-end;max-width:88%;background:#fff3bf;border-radius:16px 16px 4px 16px;padding:9px 13px;line-height:1.45}
.home .h-ui-plan{border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.home .h-ui-plan p{display:flex;justify-content:space-between;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7c7462;margin-bottom:6px}
.home .h-ui-plan li{display:flex;align-items:center;gap:8px;padding:2px 0;color:#3b3a35;transition:color .3s}
.home .h-ui-plan li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid #cfc6b2;transition:background .3s,border-color .3s}
.home .h-ui-plan li.now::before{border-color:var(--ink);border-right-color:transparent;animation:h-spin 1s linear infinite}
.home .h-ui-plan li.did{color:#9a917d;text-decoration:line-through}
.home .h-ui-plan li.did::before{background:#d9d1bd;border-color:#d9d1bd}
@keyframes h-spin{to{transform:rotate(360deg)}}
.home .h-ui-steps{display:flex;flex-direction:column;gap:6px}
.home .h-ui-step{display:flex;gap:8px;align-items:baseline;color:#6b6557;font-size:.82rem;animation:h-in .35s ease-out}
.home .h-ui-step code{font-size:.74rem;color:#3b3a35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home .h-ui-said{line-height:1.5;animation:h-in .35s ease-out}
@keyframes h-in{from{opacity:0;transform:translateY(6px)}}
.home .h-ui-compose{margin:10px;padding:10px 12px;border:1.5px solid #ffe27a;border-radius:16px;color:#9a917d;display:flex;justify-content:space-between;align-items:center}
.home .h-ui-compose i{width:26px;height:26px;border-radius:50%;background:var(--ink)}

.home .h-ui-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:10px 10px 0;padding:4px;background:#f3eee2;border-radius:12px}
.home .h-ui-tabs span{text-align:center;padding:6px 0;border-radius:9px;font-weight:600;font-size:.8rem;color:#7c7462;transition:background .2s,color .2s}
.home .h-ui-tabs span.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,22,28,.12)}
.home .h-ui-view{position:relative;flex:1;margin:10px;border-radius:14px;overflow:hidden;min-height:250px}
.home .h-ui-pane{position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none}
.home .h-ui-pane.on{opacity:1}
.home .h-ui-screen{background:#f3eee2;padding:12px}
.home .h-urlbar{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 12px;font-family:var(--mono);font-size:.72rem;color:#6b6557;overflow:hidden;white-space:nowrap}
.home .h-lock{flex:none;width:8px;height:8px;border-radius:50%;background:#28c941}
.home .h-page{position:relative;margin-top:12px;background:#fff;border-radius:12px;padding:18px;min-height:160px}
.home .h-pg-h{height:14px;width:46%;background:var(--ink);border-radius:5px;margin-bottom:12px}
.home .h-pg-l{height:7px;background:#e6dfcd;border-radius:4px;margin-bottom:7px}
.home .h-w80{width:80%}.home .h-w60{width:60%}
.home .h-pg-form{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.home .h-pg-field{flex:1;min-width:110px;height:32px;background:#fff;border:1.5px solid #d9d1bd;border-radius:9px;padding:0 10px;display:flex;align-items:center;font-family:var(--mono);font-size:.74rem;overflow:hidden;white-space:nowrap}
.home .h-pg-field.focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--yellow)}
.home .h-pg-btn{height:32px;padding:0 16px;display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:9px;font-weight:700;font-size:.78rem;transition:.2s}
.home .h-pg-btn.press{background:var(--yellow);color:var(--ink);transform:scale(.94)}
.home .h-cursor{position:absolute;left:20px;top:20px;width:20px;height:20px;transition:left .8s cubic-bezier(.5,0,.2,1),top .8s cubic-bezier(.5,0,.2,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2-3 7z' fill='%23FFD43B' stroke='%2314161c' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.home .h-ui-term{background:#14161c;padding:14px 16px}
.home .h-ui-term small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#6e6b62;margin-bottom:8px}
.home #h-term{font-family:var(--mono);font-size:.78rem;line-height:1.7;color:#d8d3c4;white-space:pre-wrap;word-break:break-word}
.home #h-term .h-p{color:var(--yellow)}.home #h-term .h-o{color:#7fd8a6}.home #h-term .h-d{color:#7b786e}
.home #h-term .h-caret{display:inline-block;width:7px;height:1em;background:var(--yellow);vertical-align:-2px;animation:h-pulse2 1s infinite}
.home .h-ui-files{background:#fff;padding:12px;display:flex;flex-direction:column;gap:2px}
.home .h-ui-files div{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-family:var(--mono);font-size:.76rem;color:#3b3a35}
.home .h-ui-files div::before{content:"";flex:none;width:14px;height:17px;border-radius:3px;background:#e6dfcd}
.home .h-ui-files div.new{background:#fff3bf;animation:h-in .35s ease-out}
.home .h-ui-files div.new::after{content:"new";margin-left:auto;font-family:var(--body);font-size:.66rem;font-weight:700;color:#6b5400}
.home .h-ui-drive{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 10px 10px;padding:9px 12px;background:#f3eee2;border-radius:12px;color:#6b6557;font-size:.78rem}
.home .h-ui-drive b{flex:none;background:#fff;color:var(--ink);padding:5px 12px;border-radius:999px;font-size:.74rem}

/* 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)}
  .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-thread{min-height:260px}
}
@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}
}