/* Sota's home-screen geometry inside the original Wabi device frames. */
.phone .screen.hero-home{--hh-widget-size:39.6cqw;display:flex;flex-direction:column;background:#fafafa;color:#14171a;font-family:Selecta,Arial,sans-serif;letter-spacing:0;text-align:left;container-type:inline-size}
/* Clear the frame's Dynamic Island and leave air beneath the Wabi header. */
.hh-top{display:flex;align-items:center;justify-content:space-between;padding:19cqw 5cqw 5cqw;flex:none}
.hh-logo{display:block;width:25cqw;color:#191919}
.hh-logo svg{display:block;width:100%;height:auto}
.hh-me{position:relative;width:8.2cqw;height:8.2cqw;display:block}
.hh-body{flex:1 1 auto;min-height:0;overflow:hidden;mask-image:linear-gradient(to bottom,#000 calc(100% - 34cqw),transparent calc(100% - 15cqw))}
.hh-rail{display:grid;grid-template-rows:1fr 1fr;grid-auto-flow:column;grid-auto-columns:var(--hh-widget-size);gap:3cqw;padding:1cqw 0 3.6cqw 5cqw;overflow:hidden;mask-image:linear-gradient(to right,#000 calc(100% - 6cqw),transparent 100%)}
.hh-cell{width:var(--hh-widget-size);height:var(--hh-widget-size);position:relative}
.hh-cell .widget-frame{border-radius:16.67%;box-shadow:0 1cqw 3.5cqw #0000001a}
.hh-list{display:flex;flex-direction:column;gap:1.5cqw;padding:0 5cqw 8cqw}
.hh-row{display:flex;align-items:center;justify-content:space-between;gap:3cqw;width:100%;padding:3cqw;border-radius:5cqw;background:rgba(147,147,147,.08)}
.hh-row:first-child{box-shadow:inset 0 0 0 1.5px #fff}
.hh-icon{flex:none;width:14.4cqw;height:14.4cqw;position:relative}
.hh-icon .widget-frame{border-radius:50%;box-shadow:none}
.hh-avatar,.hh-dot{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;display:block;object-fit:cover}
.hh-text{flex:1;min-width:0}
.hh-text b{display:block;font-weight:400;font-size:4.4cqw;line-height:5cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-text span{display:block;margin-top:.5cqw;font-size:3.8cqw;line-height:4.4cqw;color:#8a9099;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-row.is-new .hh-text span{font-weight:500;color:#14171a}
.hh-when{flex:none;display:flex;align-items:center;gap:2cqw;font-size:3.8cqw;line-height:4.4cqw;color:#8a9099;opacity:.7}
.hh-when i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#2f6bff}
.hh-dock{position:absolute;left:50%;bottom:7.5cqw;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:3.5cqw}
.hh-search,.hh-plus{height:13.4cqw;border-radius:14.9cqw;background:rgba(244,244,244,.3);backdrop-filter:blur(4.5cqw) saturate(1.6);-webkit-backdrop-filter:blur(4.5cqw) saturate(1.6);box-shadow:inset -1px -1px 2px #ffffff52,inset 1px 1px 1px #ffffff1f,0 1.5cqw 4.5cqw #0000001a;display:flex;align-items:center}
.hh-search{width:70.1cqw;padding:0 4.2cqw;gap:2.4cqw;color:#8a9099;font-size:4.2cqw}
.hh-search svg{width:4.5cqw;height:4.5cqw;flex:none}
.hh-plus{width:13.4cqw;justify-content:center}
.hh-plus svg{width:7cqw;height:7cqw}
.hero-profiles{display:none;justify-content:center;gap:6px;position:relative;z-index:3;margin:22px auto 0;width:fit-content;padding:5px;border-radius:999px;background:#e9e9e9}
.hero-profiles button{font:400 14px/1.3 Selecta,Arial,sans-serif;color:#646464;background:transparent;border:0;border-radius:999px;padding:9px 17px;cursor:pointer}
.hero-profiles button[aria-pressed="true"]{color:#191919;background:#fff;box-shadow:0 2px 6px #0000000c}
.hero-profiles button:focus-visible{outline:2px solid #3367d6;outline-offset:5px}
.dcard,.dcard:focus-visible{outline:none}
.dcard{border-radius:15% / 7%;-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){.hero-profiles button{transition:none}}

/* Reuse Wabi’s glass-orb artwork for both people and personal threads. */
.hh-orb{border-radius:50%;isolation:isolate;box-shadow:0 .65cqw 1.3cqw #00000020}
.hh-orb::after{content:"";position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;background:url('../img/orb/orb-overlay.png') center/100% 100% no-repeat;mix-blend-mode:multiply;box-shadow:inset 0 -.7cqw 1.2cqw #00000022,inset 0 .3cqw .7cqw #ffffff70}

.hh-me{background:#e5e5e5}
.hh-thread-orb{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 .65cqw 1cqw #0000001c)}

/* The scene artwork includes its glass rim and lighting. Keep that finish
   intact, without a second material layer washing out the miniature worlds. */
.hh-scene-orb{border-radius:50%;clip-path:circle(48%);filter:none}
.hh-icon:has(.hh-scene-orb){filter:drop-shadow(0 .65cqw 1cqw #0000001c)}
