/* Devices sit in Ken's hands; the apps keep their own scrollable screens. */
:root { --device-top: calc(70px + env(safe-area-inset-top, 0px)); --device-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.top { padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.phone-fab, .desk-fab, .run-menu, .lot-door { min-height: 44px; }
.phone-fab, .desk-fab, .run-menu { min-width: 44px; }
.phone-stage { position: fixed; inset: var(--device-top) 0 0; z-index: 60; pointer-events: none; overflow: hidden; }
#phone.phone { position: absolute; top: auto; bottom: calc(var(--device-bottom) + 16px); right: max(28px, calc((100vw - 1440px) / 2)); width: 300px; height: 520px; max-height: none; transform-origin: bottom right; transform: translateX(calc(100% + 80px)) scale(var(--phone-scale, 1)); visibility: hidden; transition: transform .24s ease, visibility .24s; isolation: isolate; }
body.phone-out #phone.phone { transform: scale(var(--phone-scale, 1)); visibility: visible; }
.phone-grip { position: absolute; width: 340px; height: 560px; left: -20px; top: 0; z-index: -1; pointer-events: none; filter: drop-shadow(4px 8px 0 #050a1270); }
#phone .phone-bezel { padding: 10px 6px 8px; border: 3px solid #454950; border-radius: 20px; box-shadow: 5px 6px 0 #020408, 0 20px 50px #0009; }
#phone .phone-notch { margin: 3px auto 10px; width: 70px; height: 5px; }
#phone .phone-close { top: -13px; right: -17px; width: 44px; height: 44px; min-height: 44px; border: 2px solid #a1b2bd; border-radius: 9px; background: #17212a; font-size: 26px; box-shadow: 3px 3px 0 #020408; }
#phone .phone-screen { border-radius: 12px; }
#phone .ph-status { padding-top: 5px; }
#phone .ph-nav { min-height: 44px; padding: 0 8px; }
#phone .ph-nav:empty { min-height:0; height:0; padding:0; margin:0; }
#phone .ph-nav button, #phone button.ph-back, #phone button.ph-appbar-back { min-width: 44px; min-height: 44px !important; }
#phone .ph-body { overscroll-behavior: contain; scrollbar-width: thin; }
#phone .phone-screen button { touch-action: manipulation; }
#phone .phone-screen button:not(.ph-icon-btn):not(.ph-dot):not(.ph-page-hint) { min-height: 44px; }
#phone .phone-screen button.ph-icon-btn { min-height: 44px !important; }
#phone .phone-screen button.ph-dot { width: 44px; height: 44px; min-height: 44px !important; border-radius: 0; background: radial-gradient(circle, #768591 3px, transparent 4px) !important; }
#phone .phone-screen button.ph-dot.on { background: radial-gradient(circle, #fff 3px, transparent 4px) !important; }
#phone .phone-screen button.ph-page-hint { min-height: 44px !important; }
#phone .ph-dots { padding: 0; gap: 0; }
#phone .ph-home { flex: 1; min-height: 0; }
.device-close:focus-visible, .phone-screen button:focus-visible, .desk button:focus-visible, .phone-fab:focus-visible, .desk-fab:focus-visible { outline: 3px solid #ffe680; outline-offset: 2px; }

#desk.desk, body.desk-out:not(.playing) #desk.desk { --deck-height: 110px; position: fixed; top: auto; bottom: var(--device-bottom); left: 50%; width: min(800px, calc(100vw - 48px)); height: min(650px, calc(100dvh - var(--device-top) - var(--device-bottom))); max-height: none; display: flex; flex-direction: column; transform: translate(-50%, calc(100% + 100px)); visibility: hidden; transition: transform .26s ease, visibility .26s; }
body.desk-out #desk.desk, body.desk-out:not(.playing) #desk.desk { transform: translateX(-50%); visibility: visible; }
#desk .desk-bezel { flex: 1; min-height: 0; max-height: none; padding: 8px 10px 10px; margin: 0 18px; border: 3px solid #35412f; border-bottom: 5px solid #101710; border-radius: 9px 9px 3px 3px; background: #101311; box-shadow: 0 0 0 2px #040704, 0 18px 45px #0008; }
#desk .desk-led { height: 2px; margin: 0 auto 3px; width: 50px; background: #62b84b; box-shadow: 0 0 5px #44d62c77; }
#desk .desk-bar { min-height: 44px; padding: 0 0 6px; }
#desk .desk-menu { text-align: left; color: #9ce381; font-size: 11px; padding-left: 8px; }
#desk .device-close { min-width: 44px; min-height: 44px; background: #162018; border-color: #507c43; }
#desk .desk-screen { flex: 1; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border: 1px solid #293c2c; padding: 14px; }
#desk .desk-screen button { min-height: 44px; }
#desk .desk-dock { flex: 0 0 auto; gap: 5px; padding: 8px 2px 0; scrollbar-width: thin; }
#desk .desk-dock-btn { min-width: 56px; min-height: 56px; padding: 3px; color: #c6d3c0; font-size: 10px; }
#desk .desk-dock-btn.on { color: #c1ff9e; }
.desk-deck { position: relative; flex: 0 0 var(--deck-height); margin-top: 4px; border: 2px solid #344632; border-bottom: 7px solid #090e09; border-radius: 3px 3px 12px 12px; background: linear-gradient(#222b22, #121a13); box-shadow: 0 12px 25px #0008; pointer-events: none; }
.desk-keyboard { position: absolute; top: 9px; left: 20%; width: 60%; height: 62%; }
.desk-trackpad { position: absolute; width: 23%; height: 22%; left: 38.5%; bottom: 6px; border: 2px solid #3b4a3a; border-radius: 3px; background: #1a221a; }
.desk-wrist { position: absolute; bottom: -8px; height: 105%; width: 20%; max-width: 150px; }
.desk-wrist-left { left: 3%; }
.desk-wrist-right { right: 3%; transform: scaleX(-1); }
body.desk-out.playing .stage-wrap, body.phone-out.playing .stage-wrap { margin-left: 0; margin-right: 0; }

/* Followers is a feed, with a separate, deliberate draft/publish action. */
.ph-feed { background: #f5f2ed; color: #25252b; margin: -8px -12px -12px; padding-bottom: 14px; font: 12px/1.45 system-ui, sans-serif; }
.ph-feed-head { display: flex; align-items: center; gap: 8px; padding: 13px 12px; color: #1d2225; border-bottom: 1px solid #dcd6cf; }
.ph-feed-avatar { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid #ad6b94; border-radius: 50%; background: #dbe4d6; color: #3b4443; font-weight: 800; }
.ph-feed-card { margin: 0 0 12px; background: #fffefa; border-bottom: 1px solid #dcd6cf; }
.ph-feed-card .ph-feed-head { border: 0; }
.ph-feed-media { overflow: hidden; background: #273b46; aspect-ratio: 4 / 3; }
.ph-feed-media img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.ph-feed .ph-feed-caption { margin: 0; padding: 11px 12px 6px; color: #25252b; }
.ph-feed .ph-feed-meta { padding: 0 12px 10px; color: #64656d; font-size: 11px; }
.ph-feed-actions { display: flex; gap: 7px; padding: 0 12px 12px; }
.ph-feed .ph-feed-actions button { flex: 1; background: #f0eae3; color: #2d3b3d; border: 1px solid #c6bdb3; border-radius: 5px; }
.ph-feed .ph-draft-card { margin: 12px 10px; padding: 0 0 12px; border: 1px solid #b6c5ad; border-radius: 8px; overflow: hidden; background: #f1f6ed; }
.ph-feed .ph-draft-card>strong { display: block; padding: 12px; margin: 0; color: #34522c; }
.ph-caption-options { display: grid; gap: 6px; padding: 10px 12px; }
.ph-feed .ph-caption-options button { color: #29312b; border: 1px solid #b5c2b1; background: #fffefa; border-radius: 6px; padding: 9px; text-align: left; font: 12px/1.4 system-ui, sans-serif; }
.ph-feed .ph-caption-options button[aria-pressed="true"] { background: #dcebcf; border: 2px solid #507441; padding: 8px; color: #254320; }
.ph-feed button.ph-publish { display: block; width: calc(100% - 24px); margin: 0 12px; min-height: 44px; background: #365d30; color: #fff; border: 1px solid #254720; border-radius: 6px; font-weight: 700; }
.ph-feed button.ph-publish:disabled { background: #dde0d8; border-color: #c4c8be; color: #62695d; opacity: 1; }
#desk .ph-feed { max-width: 430px; margin: -14px auto; }
#desk .ph-feed strong { color: #25252b; }
#desk .ph-feed p { color: #25252b; }

@media (min-width: 1280px) {
  body.playing #desk.desk { left: max(24px, calc((100vw - 1440px) / 2)); width: min(780px, 58vw); transform: translateY(calc(100% + 100px)); }
  body.playing.desk-out #desk.desk { transform: none; }
}
@media (max-width: 920px) {
  .phone-stage { inset: var(--device-top) 0 0; }
  body.phone-out .phone-stage { overflow-y: auto; overscroll-behavior: contain; }
  #phone.phone { top: max(16px, calc((100dvh - var(--device-top) - 560px) / 2)); bottom: auto; left: 50%; right: auto; height: min(520px, calc(100dvh - var(--device-top) - 40px - env(safe-area-inset-bottom, 0px))); min-height: 260px; transform-origin: top center; transform: translate(-50%, calc(100dvh + 50px)) scale(var(--phone-scale, 1)); }
  body.phone-out #phone.phone { transform: translateX(-50%) scale(var(--phone-scale, 1)); }
  .phone-grip { height: calc(100% + 40px); }
  #desk.desk, body.desk-out:not(.playing) #desk.desk { --deck-height: 88px; width: min(740px, calc(100vw - 16px)); }
  #desk .desk-bezel { margin: 0 7px; padding: 6px 6px 8px; }
  #desk .desk-screen { padding: 10px; }
  #desk .desk-dock-btn { min-width: 55px; }
  #desk .ph-feed { margin: -10px auto; }
}
@media (max-width: 540px) {
  .top { gap: 5px; }
  .device-cluster { gap: 0; }
  .phone-fab, .desk-fab { padding: 5px 7px; }
  .phone-fab span, .desk-fab span { font-size: 6px; }
  .fab-glyph { width: 12px; }
  .run-menu { margin-left: 5px; }
  .lot-controls { font-size: 12px; }
  #desk.desk, body.desk-out:not(.playing) #desk.desk { --deck-height: 76px; }
  #desk .desk-menu { font-size: 10px; }
  #desk .desk-screen .ph-chips { grid-template-columns: 1fr; }
  .desk-wrist { height: 94%; width: 22%; }
}
@media (max-height: 620px) {
  .phone-stage { overflow-y: auto; }
  #phone.phone { top: 16px; bottom: auto; transform-origin: top right; }
  #desk.desk, body.desk-out:not(.playing) #desk.desk { --deck-height: 54px; }
  #desk .desk-led { display: none; }
  #desk .desk-dock { padding-top: 4px; }
  #desk .desk-dock-btn { min-height: 44px; gap: 2px; }
  #desk .desk-dock .ph-icon { width: 26px; height: 26px; border-radius: 7px; }
  #desk .desk-dock .ph-icon svg { width: 17px; height: 17px; }
  .desk-keyboard { height: 75%; left: 23%; width: 54%; top: 4px; }
  .desk-trackpad { width: 15%; left: 42.5%; height: 14%; bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  #phone.phone, #desk.desk { transition: none; }
}

/* Feed typography stays readable on both shared app surfaces. */
.phone-lg .ph-feed.ph-ig { margin: 0; padding: 0 0 14px; }
.phone-screen .ph-feed strong, #desk .ph-feed strong { color: #25252b; font-family: system-ui, sans-serif; letter-spacing: 0; font-size: 12px; line-height: 1.4; margin: 0 0 3px; }
.ph-feed-head small { display: block; color: #686a6d; font-size: 10px; }
.ph-feed-profile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px; padding: 14px 12px; border-bottom: 1px solid #dcd6cf; background: #fffefa; }
.phone-screen .ph-feed-profile strong, #desk .ph-feed-profile strong { font-size: 19px; font-weight: 800; margin: 0; }
.ph-feed-profile>span { color: #62636a; font-size: 10px; }
.ph-feed .ph-feed-section { padding: 10px 12px; margin: 0; color: #62636a; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ph-feed .ph-feed-next { padding: 12px 10px 0; }
.ph-feed .ph-feed-next button { width: 100%; border: 1px solid #b7c6ac; border-radius: 6px; background: #e7efdf; color: #31512c; padding: 10px; }
.ph-feed .ph-feed-caption p { color: #25252b; margin: 4px 0; line-height: 1.5; }
.ph-feed .ph-draft-card>p:not(.ph-feed-caption):not(.ph-receipt) { margin: 8px 12px; color: #53604e; font-size: 11px; line-height: 1.5; }
.ph-feed .ph-receipt, #desk .ph-feed .ph-receipt { margin: 10px 12px 0; background: #deead6; color: #2d4d29; border-left-color: #638451; }
.ph-feed .ph-feed-comment { margin: 0; padding: 0 12px 12px; color: #625b65; font-size: 11px; }
.ph-feed .ph-feed-actions button { font: 12px/1.4 system-ui, sans-serif; }
#desk .ph-feed .ph-caption-options { display: grid; grid-template-columns: 1fr; gap: 6px; }
#desk .ph-feed .ph-caption-options button { color: #29312b; border-color: #b5c2b1; background: #fffefa; text-align: left; }
#desk .ph-feed .ph-caption-options button[aria-pressed="true"] { color: #254320; border-color: #507441; background: #dcebcf; }
#phone .phone-screen button.ph-dot { box-shadow: none !important; }
#desk .desk-dock { scroll-snap-type: x proximity; }
#desk .desk-dock-btn { scroll-snap-align: start; }
@media (pointer: coarse) { .keyboard-tip { display: none; } }
@media (max-width: 360px) {
  .top .lot-home { display: none; }
  #phone .phone-close { right: -8px; }
}

/* Apps have room to breathe; the hand-held shell stays the same. */
#phone .ph-saas, #desk .ph-saas { display:flex; flex-direction:column; gap:10px; }
#phone .ph-saas>p, #desk .ph-saas>p { margin:0; line-height:1.55; }
#phone .ph-saas>button, #desk .ph-saas>button, .ph-compose>button { margin:0; padding:10px 12px; }
#phone .acts, #desk .acts { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0; }
#phone .acts>button, #desk .acts>button { flex:1 1 94px; padding:10px; }
#phone .ph-chips, #desk .ph-chips { gap:8px; margin:8px 0; }
#phone .ph-chips>button, #desk .ph-chips>button { white-space:normal; line-height:1.35; }
#phone .ph-compose, #desk .ph-compose { display:flex; flex-direction:column; gap:12px; }
#phone .ph-chat, #desk .ph-chat { display:flex; flex-direction:column; gap:9px; padding:8px 2px 12px; }
#phone .bubble, #desk .bubble { margin:0; font:13px/1.55 system-ui,sans-serif; padding:11px 13px; max-width:91%; border-radius:14px; }
#phone .bubble.you, #desk .bubble.you { align-self:flex-end; border-bottom-right-radius:4px; }
#phone .bubble.claude, #desk .bubble.claude { align-self:flex-start; border-bottom-left-radius:4px; }
.ph-branch { display:flex; flex-direction:column; gap:8px; }
.ph-branch button { margin:0; padding:10px; }

/* The overflowing software folder is a first-class app on both devices. */
.ph-essentials { color:#e9f0fb; padding:12px 8px; background:linear-gradient(145deg,#29394e,#151d2b); border:1px solid #576c8a; border-radius:14px; }
.ph-essentials header { position:relative; padding:5px 5px 15px 52px; min-height:58px; }
.ph-folder-symbol { position:absolute; left:4px; top:5px; font:38px/1 system-ui,sans-serif; color:#b9cdea; }
.phone-screen .ph-essentials h3, #desk .ph-essentials h3 { margin:0 0 4px; color:#fff; font:700 21px/1.2 system-ui,sans-serif; }
.ph-essentials header p { margin:0 0 4px; color:#c4d1e2; font:12px/1.4 system-ui,sans-serif; }
.ph-essentials header small { color:#8fa4c2; font-size:10px; }
.ph-essentials .ph-home-grid { padding:10px 0; gap:15px 7px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.ph-essentials .ph-icon-btn { justify-self:center; width:100%; max-width:88px; }
.ph-essentials .ph-icon-name { max-width:100%; color:#ebf1fb; font-size:10px; overflow-wrap:anywhere; }
.ph-folder-pager { display:grid; grid-template-columns:1fr auto 1fr; gap:7px; align-items:center; margin-top:12px; padding-top:10px; border-top:1px solid #485b75; }
.ph-folder-pager button { padding:9px 5px; background:#364a66; border:1px solid #7089ac; color:#f4f7ff; border-radius:7px; font:11px/1.3 system-ui,sans-serif; }
.ph-folder-pager button:disabled { opacity:.35; }
.ph-folder-pager span { color:#adbed5; font:11px/1 system-ui,sans-serif; }
#desk .ph-essentials { max-width:500px; margin:auto; padding:18px; }
#desk .ph-essentials .ph-home-grid { display:grid; }
#desk .ph-essentials .ph-icon { width:48px; height:48px; }
#desk .ph-essentials .ph-icon-name { font:11px/1.3 system-ui,sans-serif; }

/* Text threads are short messages with clear speakers, not piles of action cards. */
.ph-messages, .ph-conversation { background:#eef0f3; color:#182130; min-height:100%; font:13px/1.45 system-ui,sans-serif; }
.ph-messages>header { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:17px 12px 12px; }
.phone-screen .ph-messages h3, #desk .ph-messages h3 { color:#182130; margin:0; font:700 24px/1.2 system-ui,sans-serif; }
.ph-messages>header>span { font-size:10px; color:#687888; }
#phone .ph-message-row, #desk .ph-message-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:start; width:100%; gap:9px; padding:14px 10px; text-align:left; border:0; border-top:1px solid #d8dee6; background:transparent; color:#27303a; border-radius:0; }
.ph-contact-avatar { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:50%; background:#9aaab8; color:#fff; font:700 15px/1 system-ui,sans-serif; }
.ph-message-summary { min-width:0; }
.phone-screen .ph-message-summary strong, #desk .ph-message-summary strong { color:#25303c; display:block; margin:0 0 3px; font:650 13px/1.3 system-ui,sans-serif; }
.ph-message-summary>span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#77818c; font-size:12px; line-height:1.45; }
.ph-message-row.unread { box-shadow:inset 3px 0 #3d87d5; }
.ph-message-row.unread .ph-message-summary>span { color:#495465; }
.ph-message-row>small { color:#9099a4; font-size:9px; white-space:nowrap; padding-top:3px; }
.ph-conversation>header { display:flex; align-items:center; gap:8px; padding:9px 10px; border-bottom:1px solid #d6dde5; background:#f7f8fa; }
.ph-conversation>header button { width:40px; padding:0; background:transparent; border:0; color:#2871b9; font:28px/1 system-ui,sans-serif; }
.phone-screen .ph-conversation>header strong, #desk .ph-conversation>header strong { color:#27323e; font:600 14px/1.3 system-ui,sans-serif; }
.ph-message-time { color:#9098a1; text-align:center; font-size:10px; margin:14px 0; }
.ph-text-thread { display:flex; flex-direction:column; gap:12px; padding:0 12px 16px; }
.ph-text { max-width:87%; padding:10px 12px; font:13px/1.55 system-ui,sans-serif; border-radius:15px; overflow-wrap:anywhere; }
.ph-text.received { align-self:flex-start; background:#dce2e8; color:#25303e; border-bottom-left-radius:4px; }
.ph-text.sent { align-self:flex-end; background:#337fc5; color:#fff; border-bottom-right-radius:4px; }
.ph-text.continued { margin-top:-8px; }
.ph-message-receipt { margin:0 14px 14px; color:#63778b; font-size:11px; text-align:right; }
.ph-reply-options { display:flex; flex-direction:column; gap:9px; padding:12px; background:#e6ebf1; border-top:1px solid #d3dce6; }
.ph-reply-options small { color:#778492; font-size:10px; }
#phone .ph-reply-options button, #desk .ph-reply-options button { margin:0; min-height:44px; padding:11px 12px; border:1px solid #b5c8dc; border-radius:12px; background:#fafcff; color:#326592; font:13px/1.4 system-ui,sans-serif; text-align:left; }
#desk .ph-messages, #desk .ph-conversation { max-width:530px; margin:auto; border-radius:10px; overflow:hidden; }

/* Ken's mailbox: the work, the bills and the pitches all arrived together. */
.ph-mail { min-height:100%; background:#f8f6f1; color:#272a30; font:13px/1.45 system-ui,sans-serif; }
.ph-mail>header { display:flex; gap:10px; align-items:center; padding:15px 12px; border-bottom:1px solid #dfdbd3; }
.ph-mail-logo { color:#cf443e; font:800 25px/1 system-ui,sans-serif; }
.phone-screen .ph-mail h3, #desk .ph-mail h3 { color:#272a30; font:700 22px/1.25 system-ui,sans-serif; margin:0; }
.ph-mail>header small { margin-left:auto; color:#8d8a82; font-size:10px; }
.ph-mail-tabs { display:flex; padding:8px; gap:5px; border-bottom:1px solid #dedbd5; }
#phone .ph-mail-tabs button, #desk .ph-mail-tabs button { flex:1; color:#736b63; background:transparent; border:0; border-radius:16px; padding:9px 4px; font:12px/1.3 system-ui,sans-serif; }
#phone .ph-mail-tabs button[aria-pressed="true"], #desk .ph-mail-tabs button[aria-pressed="true"] { color:#a42d28; background:#f6dfda; font-weight:700; }
#phone .ph-mail-row, #desk .ph-mail-row { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; position:relative; width:100%; padding:15px 12px 28px; border:0; border-bottom:1px solid #e3dfd7; background:#fffdf9; color:#292d34; text-align:left; border-radius:0; }
#phone .ph-mail-row.read, #desk .ph-mail-row.read { background:#f2f0e9; }
.ph-mail-avatar, .ph-mail-sender>span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#fff; font:600 12px/1 system-ui,sans-serif; }
.phone-screen .ph-mail-row strong, #desk .ph-mail-row strong { display:block; font:700 12px/1.4 system-ui,sans-serif; color:#282c31; margin:0 0 2px; }
.ph-mail-row b { display:block; font-size:12px; line-height:1.5; font-weight:650; margin-bottom:3px; }
.ph-mail-row.read strong, .ph-mail-row.read b { font-weight:500!important; }
.ph-mail-row small { display:block; color:#93908a; font-size:11px; line-height:1.45; }
.ph-mail-row i { position:absolute; bottom:9px; left:54px; color:#9b8b78; font:9px/1 system-ui,sans-serif; }
.ph-mail-detail { padding:12px; }
.ph-mail-toolbar { display:flex; justify-content:space-between; gap:10px; margin-bottom:18px; }
#phone .ph-mail-toolbar button, #desk .ph-mail-toolbar button { color:#806558; background:transparent; border:0; padding:8px; font:12px/1.4 system-ui,sans-serif; }
.ph-mail-detail h3 { font-size:22px!important; line-height:1.35!important; }
.ph-mail-label { display:inline-block; padding:4px 7px; margin:10px 0 16px; background:#e7e3da; color:#867966; border-radius:4px; font-size:9px; }
.ph-mail-sender { display:flex; align-items:center; gap:10px; border-bottom:1px solid #ddd8ce; padding-bottom:16px; }
.ph-mail-sender strong { color:#2f3338!important; font:650 12px/1.4 system-ui,sans-serif!important; }
.ph-mail-sender small { display:block; color:#9b9489; font-size:10px; }
.ph-mail-body { padding:5px 0; }
.phone-screen .ph-mail-body p, #desk .ph-mail-body p { color:#55534e; font:13px/1.7 system-ui,sans-serif; margin:16px 0; }
#phone .ph-mail-action button, #desk .ph-mail-action button { width:100%; margin:8px 0; padding:12px; background:#f1d9d1; border:1px solid #d9b4a7; border-radius:18px; color:#994e3a; font:600 12px/1.4 system-ui,sans-serif; }
.ph-mail-empty { padding:25px; color:#8e877c; }
#desk .ph-mail { max-width:630px; margin:auto; border-radius:10px; overflow:hidden; }

/* $HOMELESS belongs to the device; full-screen mode is the same live tape. */
.ph-coin-app { background:radial-gradient(ellipse at top right,#244e3d,#0d2020 60%); color:#e9fff2; padding:16px 12px; border-radius:12px; font:13px/1.5 system-ui,sans-serif; border:1px solid #365c4d; }
.ph-coin-app>header { display:flex; gap:10px; align-items:center; }
.ph-coin-app>header>span { color:#8effba; font:44px/1 system-ui,sans-serif; }
.phone-screen .ph-coin-app h3, #desk .ph-coin-app h3 { color:#e7fff0; font:700 20px/1.3 system-ui,sans-serif; margin:0; }
.ph-coin-app>header p { margin:2px 0; font-size:10px; color:#83a794; }
.ph-coin-price { padding:24px 0 10px; }
.ph-coin-price strong { display:block; color:#b9ffcf!important; font:700 25px/1.3 system-ui,sans-serif!important; }
.ph-coin-price small { color:#729485; font-size:10px; }
.ph-coin-chart { width:100%; height:auto; display:block; margin:4px 0 14px; }
.ph-coin-values { display:grid; grid-template-columns:1fr 1fr; gap:14px; border-top:1px solid #355144; padding-top:12px; }
.ph-coin-values small, .ph-coin-values b { display:block; }
.ph-coin-values small { color:#83a794; font-size:10px; }
.ph-coin-values b { font-size:14px; color:#dcfbe6; }
.phone-screen .ph-coin-app>p, #desk .ph-coin-app>p { color:#7fa591; font:12px/1.55 system-ui,sans-serif; margin:17px 0; }
#phone .ph-coin-app>button, #desk .ph-coin-app>button { width:100%; margin:0 0 9px; padding:11px; color:#b4ddc1; border:1px solid #466b55; border-radius:8px; background:#163526; font:600 12px/1.4 system-ui,sans-serif; }
#phone .ph-coin-app>button.ph-coin-open, #desk .ph-coin-app>button.ph-coin-open { background:#b0e59e; color:#1b472c; border-color:#a3d593; }
#desk .ph-coin-app { max-width:510px; margin:auto; padding:20px; }

/* A device is the foreground activity, held by Ken. */
.device-backdrop { position:fixed; inset:var(--device-top) 0 0; z-index:55; border:0; border-radius:0; background:#050b12b8; backdrop-filter:blur(3px); width:100%; cursor:default; }
.device-backdrop[hidden] { display:none; }
body.phone-out .stage-wrap, body.desk-out .stage-wrap { pointer-events:none; }
.settings-menu { position:relative; font:12px/1.4 system-ui,sans-serif; }
.settings-menu summary { list-style:none; min-height:44px; padding:12px 9px; box-sizing:border-box; cursor:pointer; color:#b8c2ca; }
.settings-menu summary::-webkit-details-marker { display:none; }
.settings-menu nav { position:absolute; top:48px; right:0; min-width:170px; padding:7px; border:1px solid #52616a; border-radius:8px; background:#101a23; box-shadow:0 10px 30px #0009; display:grid; gap:4px; }
.settings-menu nav a, .settings-menu nav button { display:block; padding:12px; min-height:44px; text-align:left; text-decoration:none; color:#f0ece2; background:transparent; border:0; font:13px/1.4 system-ui,sans-serif; }
.settings-menu nav a:hover, .settings-menu nav button:hover { background:#293641; }
.phone-thumb { position:absolute; left:-25px; top:45%; width:48px; height:40%; z-index:12; pointer-events:none; filter:drop-shadow(3px 2px 0 #0005); }
.phone-grip { width:380px; left:-40px; height:calc(100% + 115px); top:0; }
#phone.phone { right:max(55px, calc((100vw - 1440px)/2)); }
body.phone-out #phone.phone { bottom:64px; }
#desk.desk { z-index:61; }
.desk-wrist { width:28%; max-width:220px; height:155%; bottom:-35px; filter:drop-shadow(4px 3px 0 #0005); }
.desk-wrist-left { left:0; transform:rotate(8deg); }
.desk-wrist-right { right:0; transform:scaleX(-1) rotate(8deg); }
.ph-icon { border-radius:11px; }
.ph-icon::after { background:none; }
.ph-ico-followers { background:#9c587f !important; }
.ph-ico-claude { background:#bd674b !important; }
.ph-ico-claude svg { width:30px; height:30px; }
.ph-channel { background:#fcfaf6; color:#272625; padding:12px; font:13px/1.5 system-ui,sans-serif; margin:-8px; }
.ph-channel h3,.ph-channel h4 { color:#222; font:700 16px/1.35 system-ui,sans-serif; margin:10px 0; }
.channel-profile { display:flex; gap:10px; align-items:center; border-bottom:1px solid #ded9d1; padding-bottom:12px; }
.channel-profile h3,.channel-profile p { margin:0; }
.channel-avatar { width:42px; height:42px; border-radius:50%; background:#cd4036; color:#fff; display:grid; place-items:center; font-size:24px; font-weight:800; }
.channel-source,.channel-meta { color:#706a62 !important; font-size:11px; }
.channel-search { display:grid; gap:5px; margin:14px 0; }
.channel-search>div { display:flex; gap:6px; }
.channel-search input { width:100%; min-width:0; min-height:44px; padding:8px; box-sizing:border-box; border:1px solid #bfb8ae; border-radius:5px; background:#fff; color:#222; font:13px system-ui,sans-serif; }
.ph-channel button { color:#34312e; border:1px solid #c9c1b7; background:#f1ebe3; border-radius:5px; min-height:44px; font:13px/1.4 system-ui,sans-serif; padding:9px; }
.channel-videos { display:grid; gap:18px; }
.ph-channel button.channel-video { display:grid; gap:6px; text-align:left; border:0; padding:0 0 12px; background:transparent; border-bottom:1px solid #ded9d1; border-radius:0; }
.channel-video strong { color:#282624; font-size:14px; }
.channel-video>span:last-child { color:#756c64; font-size:11px; }
.channel-thumbnail { display:block; position:relative; aspect-ratio:16/9; background:#e5dfd6; overflow:hidden; border-radius:6px; }
.channel-thumbnail img { width:100%; height:100%; object-fit:cover; display:block; }
.channel-thumbnail small { position:absolute; right:5px; bottom:5px; background:#111c; color:#fff; padding:2px 4px; border-radius:3px; }
.channel-pager { display:flex; gap:8px; justify-content:space-between; margin:16px 0; }
.channel-player { aspect-ratio:16/9; margin:12px -12px; background:#111; }
.channel-player iframe { width:100%; height:100%; border:0; }
.channel-comment { padding:12px 0; border-top:1px solid #ddd5cd; overflow-wrap:anywhere; }
.channel-comment p { white-space:pre-wrap; margin:5px 0; color:#3b3733; }
.channel-comment small { color:#80746a; font-size:10px; margin-left:4px; }
.channel-comment.is-reply { border-left:2px solid #c9b9ac; padding-left:10px; }
#desk .ph-channel { max-width:650px; margin:auto; }
#desk .channel-videos { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:920px) { #phone.phone { right:auto; } .phone-grip { height:calc(100% + 80px); } }
@media(max-width:540px) { .lot-home { display:none; } .phone-thumb { left:-16px; width:36px; } .desk-wrist { width:29%; height:140%; bottom:-25px; } #desk .channel-videos { grid-template-columns:1fr; } }
@media(max-height:620px) { .phone-thumb { top:38%; height:53%; } .desk-wrist { height:150%; bottom:-20px; } }
.ph-home-summary { display:flex; justify-content:space-between; padding:10px 12px 4px; color:#ddd5c6; font:12px/1.4 system-ui,sans-serif; }
.ph-preview.ph-preview-compact { margin:6px 10px; padding:8px 10px; display:block; min-height:44px; }
.ph-preview-compact strong { font-size:11px; display:block; }
.ph-preview-compact span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
#phone .ph-home-grid { grid-template-columns:repeat(3,1fr); }
#phone .ph-home .ph-page-hint { font:11px/1.4 system-ui,sans-serif; padding:6px; }
.community-app { font:13px/1.55 system-ui,sans-serif; color:#e2e5e4; padding:6px; }
.community-app h2,.community-app h3 { font:700 17px/1.3 system-ui,sans-serif; color:#fff; margin:10px 0; }
.community-app p { margin:12px 0; color:#c4d0cf; }
.community-card { background:#172833; padding:12px; border:1px solid #446071; border-radius:7px; margin:14px 0; }
.community-card > small { display:block; margin-top:5px; color:#b6c9d2; }
.community-actions { display:grid; gap:8px; }
.community-app button { min-height:44px; padding:10px 12px; background:#284555; color:#fff; border:1px solid #537485; border-radius:5px; font:13px/1.4 system-ui,sans-serif; margin:4px 4px 4px 0; }
.community-app button:disabled { opacity:.5; }
.community-app .community-error { background:#482e2d; color:#ffe0d3; padding:10px; border-radius:5px; }
.community-app .community-footnote { color:#96aaa9; font-size:11px; }
.community-board { padding-left:20px; }
.community-board li { margin:10px 0; overflow-wrap:anywhere; }
.howto { flex-direction:column; gap:14px; }
.howto-card p { font:17px/1.65 system-ui,sans-serif; text-transform:none; }
.howto-skip { min-height:44px; padding:10px 16px; color:#e4e8e9; background:#152532; border:1px solid #607581; border-radius:5px; font:14px system-ui,sans-serif; cursor:pointer; }
/* Hands rest across the keyboard; the foreground laptop sits in front of Ken. */
#desk.desk, body.desk-out:not(.playing) #desk.desk { --deck-height:145px; }
.desk-keyboard { left:10%; width:80%; height:74%; top:10px; }
.desk-wrist { width:25%; max-width:190px; height:120%; bottom:-28px; }
.desk-wrist-left { left:3%; transform:rotate(7deg); }
.desk-wrist-right { right:3%; transform:scaleX(-1) rotate(7deg); }
.ph-ico-youtube { background:#a6554b !important; }
@media(min-width:1280px) { body.playing #desk.desk { left:50%; width:800px; transform:translate(-50%,calc(100% + 150px)); } body.playing.desk-out #desk.desk { transform:translateX(-50%); } }
@media(max-width:920px) { #desk.desk, body.desk-out:not(.playing) #desk.desk { --deck-height:88px; } .desk-wrist { height:130%; bottom:-22px; } }
@media(max-height:620px) { #desk.desk, body.desk-out:not(.playing) #desk.desk { --deck-height:60px; } .desk-keyboard { top:4px; height:78%; } .desk-wrist { height:135%; bottom:-16px; } }
.ph-feed-tabs { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 12px; border-bottom:1px solid #d8d1c7; font:12px system-ui,sans-serif; }
.ph-feed-tabs button { min-height:44px; padding:8px; background:transparent; border:0; color:#79516a; font:12px system-ui,sans-serif; }
.instagram-card { padding:18px 0; border-bottom:1px solid #ded9d1; }
.instagram-card blockquote { margin:12px 0; font:16px/1.5 Georgia,serif; }
.instagram-card>small { display:block; color:#72675e; font-size:11px; }
.instagram-card button { display:block; width:100%; margin:10px 0; }
.instagram-card a,.instagram-original { display:block; min-height:44px; color:#765269; font:12px/1.4 system-ui,sans-serif; padding:12px 0; box-sizing:border-box; }
.instagram-player iframe { display:block; width:100%; min-height:490px; border:0; margin-top:12px; background:#fff; }

/* A notification previews the message; its full text stays behind the tap. */
#phone .ph-banner-wrap { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:start; gap:6px; min-width:0; max-width:calc(100% - 16px); margin:0; }
#phone .ph-banner { box-sizing:border-box; width:100%; max-width:100%; min-width:0; margin:0; padding:9px; white-space:normal; overflow-wrap:anywhere; }
#phone .ph-banner em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:4px; }
#phone .ph-banner span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal; overflow-wrap:anywhere; line-height:1.4; }
#phone .ph-banner small { white-space:normal; margin-top:5px; }
#phone .ph-snooze { min-width:0; width:44px; box-sizing:border-box; margin:0; padding:8px 3px; min-height:44px !important; font:11px/1.3 system-ui,sans-serif; text-align:center; border-radius:7px; }
/* The scroll area ends above the dock; its content never flex-shrinks under it. */
#phone .ph-body { min-width:0; overflow-x:hidden; overflow-y:auto; scroll-padding-block:10px; }
#phone .ph-home { flex:0 0 auto; min-height:100%; box-sizing:border-box; padding-bottom:8px; }
#phone .ph-swipe { min-width:0; }
#phone .ph-home-grid { grid-template-columns:repeat(3,minmax(0,1fr)); flex:none; }
#phone .ph-body:has(.ph-folder) { overflow-y:auto; }
#phone .ph-folder { position:relative; inset:auto; flex:0 0 auto; min-height:100%; width:100%; box-sizing:border-box; }
#phone .ph-dock { flex:0 0 auto; }
/* Scale the complete physical device, including its controls and hands. */
#desk.desk { transform-origin:bottom center; }
body.desk-out #desk.desk, body.desk-out:not(.playing) #desk.desk, body.playing.desk-out #desk.desk { transform:translateX(-50%) scale(var(--desk-scale,1)); }
@media(min-width:921px) and (max-height:620px) { #phone.phone { height:calc(100dvh - var(--device-top) - 40px); min-height:260px; } }
/* Only app content scrolls. The hand-held shell and the controls stay put. */
#phone-stage.phone-stage { overflow:hidden; overscroll-behavior:none; }
body.phone-out, body.desk-out { overflow:hidden; overscroll-behavior:none; }
#phone .ph-body:has(.ph-folder) { overflow:hidden; }
#phone .ph-folder.ph-essentials { position:relative; flex:1 1 auto; height:100%; min-height:0; padding:8px; justify-content:flex-start; align-items:stretch; gap:0; overflow:hidden; }
#phone .ph-folder header { flex:0 0 auto; }
#phone .ph-folder .ph-home-grid { flex:1 1 auto; min-height:0; padding:4px 0; gap:8px; align-content:center; }
#phone .ph-folder-pager { flex:0 0 auto; margin-top:4px; padding-top:4px; gap:4px; }
#phone .ph-home-summary { display:block; padding:8px 12px 2px; }
#phone .ph-home-summary small { display:block; margin-bottom:4px; color:#b9c4cb; font:10px/1.4 system-ui,sans-serif; }
#phone .ph-home-summary>div { display:grid; grid-template-columns:1.4fr 1fr; gap:6px; }
#phone .ph-home-summary button { min-width:0; padding:7px 4px; border:1px solid #415463; border-radius:7px; background:#14212ccc; color:#e1e9ec; font:11px/1.3 system-ui,sans-serif; text-align:center; }
.settings-menu summary { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 10px; border:1px solid #688b9c; color:#c8e9ef; background:#0b1723; font:11px/1.3 "IBM Plex Mono",monospace; }
.settings-menu summary:focus-visible { outline:2px solid #d8f5ff; outline-offset:2px; }
@media(max-height:620px) {
  #phone .ph-folder.ph-essentials { padding:0 4px; }
  #phone .ph-folder header { display:none; }
  #phone .ph-folder .ph-home-grid { padding:0; gap:2px; }
  #phone .ph-folder .ph-icon { width:28px; height:28px; border-radius:7px; }
  #phone .ph-folder .ph-icon svg { width:19px; height:19px; }
  #phone .ph-folder .ph-icon-btn { gap:2px; }
  #phone .ph-folder .ph-icon-name { font-size:9px; line-height:1.2; }
  #phone .ph-folder-pager { margin:0; padding:0; border:0; }
  #phone .ph-folder-pager button { padding:3px; font-size:10px; }
}
/* A long inbox preview cannot become the minimum width of the home screen. */
#phone .ph-home { width:100%; max-width:100%; min-width:0; }
#phone .ph-preview.ph-preview-compact { box-sizing:border-box; width:calc(100% - 20px); max-width:calc(100% - 20px); min-width:0; margin:6px 10px; }
#phone .ph-preview-compact strong, #phone .ph-preview-compact span { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
#phone .ph-home .ph-home-grid { gap:5px 8px; padding:4px 12px; }
#phone .ph-home .ph-icon { width:44px; height:44px; }
#phone .ph-home .ph-icon svg { width:26px; height:26px; }

/* The laptop browser owns its app scroller; the physical case and dock stay put. */
#desk .desk-screen { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.desk-browser { display:flex; flex-direction:column; width:100%; height:100%; min-width:0; min-height:0; background:#0e1b24; }
.browser-tabs { display:flex; gap:3px; padding:4px 5px 0; overflow-x:auto; flex:none; background:#17252e; scrollbar-width:thin; }
#desk .browser-tabs button { min-width:86px; padding:6px 10px; border:0; border-radius:7px 7px 0 0; background:#24323b; color:#a6b9c7; font:11px/1.3 system-ui,sans-serif; }
#desk .browser-tabs button[aria-pressed=true] { background:#d7e0e4; color:#16212a; }
.browser-address { display:flex; align-items:center; gap:8px; flex:none; padding:6px 12px; color:#bccad1; background:#263741; font:11px/1.5 system-ui,sans-serif; }
.browser-address small { margin-left:auto; color:#92a5af; }
.browser-content { flex:1; min-width:0; min-height:0; overflow:auto; overflow-x:hidden; overscroll-behavior:contain; padding:12px; }
#desk .browser-content .ph-feed { margin:-12px auto; }
#desk .browser-content .ph-folder { min-height:0; }
.finance-app { min-width:0; color:#dfebe5; font:13px/1.5 system-ui,sans-serif; }
.finance-app>header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.finance-app h3 { font:600 20px/1.2 system-ui,sans-serif; margin:0; color:#e7f0e8; }
.finance-app small { color:#a1b6af; }
.finance-tabs { display:flex; gap:6px; margin-bottom:14px; }
.finance-tabs button { flex:1; min-width:0; min-height:44px; border:1px solid #3f6059; border-radius:6px; padding:8px; background:#182c29; color:#dcece4; }
.finance-tabs button[aria-pressed=true] { background:#c3e2d4; color:#162b24; }
.finance-balances { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.finance-balances>div { min-width:0; padding:12px 9px; background:#1a302c; border:1px solid #355148; border-radius:8px; }
.finance-balances small,.finance-balances strong { display:block; overflow-wrap:anywhere; }
.finance-balances strong { color:#e9f3eb; font:600 20px/1.3 system-ui,sans-serif; margin-top:5px; }
.finance-actions { display:grid; gap:8px; margin:16px 0; }
.finance-actions h4 { margin:0; }
.finance-actions button { width:100%; min-height:44px; padding:10px; border:1px solid #3f6059; border-radius:6px; text-align:left; color:#e1eee8; background:#203930; }
.finance-details { padding:10px; border:1px solid #354c43; border-radius:6px; margin:12px 0; }
.finance-details summary { min-height:44px; cursor:pointer; }
.finance-market { min-width:0; }
[data-coin-mount] { width:100%; min-width:0; }
.virtual-camera { min-width:0; color:#dce5eb; background:#101a20; padding:8px; border-radius:8px; font:12px/1.4 system-ui,sans-serif; }
.virtual-camera>header { display:flex; justify-content:space-between; gap:8px; margin:0 0 8px; }
.virtual-camera>header span { color:#a6b4be; font-size:10px; }
.camera-view { position:relative; max-width:420px; margin:auto; overflow:hidden; background:#263f48; }
.ken-selfie { display:block; width:100%; height:auto; max-height:100%; image-rendering:pixelated; }
.camera-frame { position:absolute; inset:15% 20%; border:1px solid #ffffff50; pointer-events:none; }
.camera-controls { text-align:center; padding:8px 0 0; }
.camera-controls button { width:52px; height:52px; padding:0; background:#f5ede1!important; border:5px double #273a47!important; border-radius:50%; color:#243845!important; font-size:25px; }
.camera-controls p { color:#94a6b1; font-size:10px; margin:3px 0; }
.camera-review { margin-top:10px; }
.camera-review label { display:grid; gap:4px; }
.camera-review input { width:100%; min-width:0; box-sizing:border-box; padding:10px; min-height:44px; border:1px solid #567; border-radius:5px; background:#e5ecef; color:#18222a; }
.camera-review>div { display:flex; gap:8px; margin:8px 0; }
.camera-review button { flex:1; min-width:0; min-height:44px; padding:8px; border:1px solid #69828f; border-radius:5px; background:#23413d; color:#e5efed; }
.camera-review small { color:#a5b5bf; }
.ken-selfie:not(.still) .selfie-eyes { transform-box:fill-box; transform-origin:center; animation:ken-blink 5.6s infinite; }
.ken-selfie:not(.still) .selfie-head { animation:ken-twitch 9s steps(1,end) infinite; }
@keyframes ken-blink { 0%,43%,46%,100% { transform:scaleY(1); } 44%,45% { transform:scaleY(.12); } }
@keyframes ken-twitch { 0%,67%,70%,100% { transform:translate(0,0); } 68%,69% { transform:translate(1px,-1px); } }
@media(prefers-reduced-motion:reduce) { .ken-selfie * { animation:none!important; } }
/* Two physical devices on a roomy desk; header controls switch them on small screens. */
@media(min-width:1280px) {
  body.devices-paired #desk.desk { left:calc(50% - 170px * var(--desk-scale,1)); width:800px; }
  body.devices-paired #phone.phone { right:calc(50% - 570px * var(--phone-scale,1)); }
}
@media(max-width:1279px) {
  body.phone-out.desk-out[data-device-focus=phone] #desk.desk { visibility:hidden; pointer-events:none; }
  body.phone-out.desk-out[data-device-focus=desk] #phone.phone { visibility:hidden; pointer-events:none; }
  body.phone-out.desk-out[data-device-focus=phone] #phone-fab,
  body.phone-out.desk-out[data-device-focus=desk] #desk-fab { background:#203d45; border-color:#c4f5ec; }
}
.finance-review { padding:12px; border:1px solid #c4cfad; border-radius:7px; background:#314335; }
.finance-review h4 { margin:0; }
.finance-review p { margin:8px 0; }
.finance-review>div { display:flex; gap:8px; }
.coin-elsewhere { padding:16px 8px; border:1px dashed #48685b; border-radius:8px; }
.coin-elsewhere h4 { margin:0 0 12px; font:500 15px/1.5 system-ui,sans-serif; }
.coin-elsewhere button { display:block; width:100%; min-height:44px; margin-top:12px; padding:8px; border:1px solid #98bdaa; background:#29483b; color:#e7eee8; border-radius:6px; }
.device-cluster { gap:8px; }
@media(max-width:540px) { .device-cluster { gap:5px; } }
@media(max-width:1279px) {
  body.phone-out.desk-out #phone.phone, body.phone-out.desk-out #desk.desk { transition:none; }
}
.device-cluster { border:0; background:none; }
#phone-fab, #desk-fab { border:1px solid #355e68; }
.hud-right { gap:8px; }
@media(max-width:540px) { .hud-right { gap:5px; } }
.global-community { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; min-width:44px; padding:8px; border:1px solid #355e68; background:#0b1922; color:#b0dce6; font:11px/1.3 system-ui,sans-serif; cursor:pointer; }
.global-community svg { width:18px; height:18px; fill:currentColor; }
.global-community:focus-visible { outline:2px solid #ffe680; outline-offset:2px; }
@media(max-width:740px) { .global-community span { display:none; } .global-community { padding:7px; } }
.finance-tabs button { padding:8px 4px; font:11px/1.3 system-ui,sans-serif; }
.finance-membership { padding:12px; border:1px solid #486558; border-radius:8px; background:#1a3028; }
.finance-membership h4 { font:600 19px/1.3 system-ui,sans-serif; margin:0 0 10px; }
.finance-membership button { display:block; width:100%; min-height:44px; padding:8px; border:1px solid #8baa95; border-radius:5px; background:#325640; color:#e6efe6; }
.finance-membership button:disabled { opacity:.5; }
.finance-membership label { display:flex; align-items:center; gap:10px; min-height:44px; margin:10px 0; }
.finance-membership input { width:22px; height:22px; accent-color:#bce0bf; flex:none; }
.finance-inventory article { display:flex; gap:10px; margin:10px 0; padding:10px; border:1px solid #355148; border-radius:7px; }
.finance-inventory article img { width:84px; height:70px; object-fit:cover; image-rendering:pixelated; border-radius:3px; }
.finance-inventory article>div { flex:1; min-width:0; }
.finance-inventory strong,.finance-inventory small { display:block; }
.finance-inventory button { min-height:44px; margin-top:7px; padding:8px; border:1px solid #648673; background:#233e31; color:#e3ede5; border-radius:5px; }
.whop-app { color:#e3d9d0; font:13px/1.5 system-ui,sans-serif; }
.whop-app>header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.whop-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:10px; background:#b86b50; color:#fff5e7; font:bold 24px/1 system-ui,sans-serif; }
.whop-app h3 { font:600 23px/1.3 system-ui,sans-serif; color:#fff0df; margin:0; }
.whop-app h4 { font:600 16px/1.3 system-ui,sans-serif; color:#f5e7d9; margin:0 0 7px; }
.whop-app p { margin:7px 0; }
.whop-app small { color:#bfae9f; }
.whop-sources { display:grid; gap:12px; }
.whop-sources article { border:1px solid #54473e; background:#251f1c; border-radius:10px; overflow:hidden; }
.whop-cover { display:grid; place-items:center; height:76px; font:40px/1 system-ui,sans-serif; background:repeating-linear-gradient(135deg,transparent,transparent 18px,#ffffff09 18px,#ffffff09 20px),var(--whop-color); color:#fff0d8; }
.whop-sources article>div { padding:13px; }
.whop-sources a { display:inline-flex; align-items:center; min-height:44px; color:#e8ba97; text-decoration:underline; }
.whop-workspace { margin-top:16px; padding:14px; background:#30281f; border:1px solid #6c5642; border-radius:10px; }
.whop-workspace-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.whop-workspace button { min-height:44px; min-width:0; padding:8px; border:1px solid #937858; border-radius:5px; background:#4a3828; color:#ffebd1; }
#desk .whop-sources { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:700px) { #desk .whop-sources { grid-template-columns:1fr; } }
/* The miniature app grid belongs inside the Essentials tile at every icon size. */
#phone .ph-folder-icon, #desk .ph-folder-icon { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:3px; padding:5px; box-sizing:border-box; overflow:hidden; }
#phone .ph-folder-icon .ph-mini, #desk .ph-folder-icon .ph-mini { width:100%; height:100%; min-width:0; min-height:0; border-radius:2px; }
/* Camera is a complete viewfinder and control surface, never a scrolling feed. */
#phone .ph-body:has(.virtual-camera) { overflow:hidden; }
#phone .virtual-camera { flex:1; width:100%; height:100%; min-height:0; box-sizing:border-box; display:flex; flex-direction:column; padding:6px; overflow:hidden; }
#phone .virtual-camera>header { flex:none; margin-bottom:5px; }
#phone .camera-view { flex:1; min-height:0; width:100%; max-width:none; margin:0; }
#phone .camera-view .ken-selfie { width:100%; height:100%; }
#phone .camera-controls { flex:none; padding-top:4px; }
#phone .camera-review { flex:none; margin-top:5px; }
#phone .camera-review label { gap:2px; }
#phone .camera-review input { font:12px/1.3 system-ui,sans-serif; padding:7px; }
#phone .camera-review>div { gap:5px; margin:4px 0; }
#phone .camera-review button { font:12px/1.2 system-ui,sans-serif; padding:5px; }
#phone .camera-review small { font-size:10px; }
@media(max-height:620px) {
  #phone .virtual-camera { display:grid; grid-template-columns:minmax(64px,1fr) minmax(160px,2fr); gap:5px; padding:2px; align-items:stretch; }
  #phone .virtual-camera>header { display:none; }
  #phone .camera-view { grid-column:1; grid-row:1; }
  #phone .camera-controls { grid-column:2; grid-row:1; padding:0; display:grid; place-content:center; }
  #phone .camera-controls p { margin:0; }
  #phone .camera-review { grid-column:2; grid-row:1; margin:0; display:flex; flex-direction:column; justify-content:center; min-height:0; }
  #phone .camera-review label>span, #phone .camera-review small { display:none; }
  #phone .camera-review input { height:44px; }
  #phone .camera-review>div { margin:3px 0 0; flex:none; }
  #phone .camera-review button { font-size:11px; }
}
.virtual-camera [hidden] { display:none!important; }
#phone .ph-home.ph-home-compact { height:100%; display:flex; align-items:center; }
#phone .ph-home-compact .ph-swipe { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:3px; align-items:center; }
#phone .ph-home-compact .ph-page-hint { grid-column:2; grid-row:1; width:44px; min-height:60px!important; padding:4px!important; font-size:10px; }
#phone .ph-home-compact .ph-home-grid { grid-column:1; grid-row:1; padding:4px; gap:3px; }
#phone .ph-home-compact .ph-icon-name { font-size:9px; letter-spacing:0; }
#phone .device-games button, #desk .device-games button { display:block; width:100%; min-height:60px; margin:9px 0; padding:10px; border:1px solid #658474; border-radius:7px; background:#1c352d; color:#e2eae4; text-align:left; }
.device-games button strong,.device-games button span { display:block; }
.device-games button span { margin-top:4px; font:12px/1.4 system-ui,sans-serif; color:#abc3b4; }

.device-game-return {display:block;margin:10px auto;min-height:44px;padding:10px 16px;border:1px solid #7b8d91;border-radius:8px;background:#202e35;color:#f4eee0;font:inherit;cursor:pointer;}

/* Paired desktop pose: the right hand holds the phone; one left index finger finds a key. */
.desk-paired-hand { display:none; position:absolute; pointer-events:none; width:27%; max-width:225px; height:124%; bottom:-28px; left:14%; filter:drop-shadow(4px 3px 0 #0005); }
@media(min-width:1280px) {
  body.devices-paired .desk-wrist { display:none; }
  body.devices-paired .desk-paired-hand { display:block; }
}
/* Camera chrome: one functional front lens, framing grid and shutter. */
.virtual-camera{background:#090b0d;border-radius:4px;color:#f4f2eb;padding:6px}.virtual-camera>header{align-items:center;min-height:44px;margin:0 0 4px}.virtual-camera .camera-lens{font:11px/1.2 system-ui,sans-serif;letter-spacing:.3px;color:#e2e1da}.virtual-camera [data-camera-grid]{width:44px;height:44px;min-height:44px;padding:11px;border:0;background:transparent;color:#e4e2db;border-radius:50%;cursor:pointer}.virtual-camera [data-camera-grid][aria-pressed=true]{color:#f4cb55;background:#302c1b}.virtual-camera [data-camera-grid] svg{display:block;width:22px;height:22px}.camera-view{border-radius:2px;background:#12191c}.camera-view .ken-selfie{object-fit:contain}.camera-view-label{position:absolute;bottom:7px;left:8px;background:#0005;padding:3px 5px;font:8px/1 system-ui,sans-serif;letter-spacing:1px;color:#efebe1;pointer-events:none}.camera-frame{inset:22% 24% 28%;border:0;background:linear-gradient(#f6d565,#f6d565) top left/12px 1px no-repeat,linear-gradient(#f6d565,#f6d565) top left/1px 12px no-repeat,linear-gradient(#f6d565,#f6d565) top right/12px 1px no-repeat,linear-gradient(#f6d565,#f6d565) top right/1px 12px no-repeat,linear-gradient(#f6d565,#f6d565) bottom left/12px 1px no-repeat,linear-gradient(#f6d565,#f6d565) bottom left/1px 12px no-repeat,linear-gradient(#f6d565,#f6d565) bottom right/12px 1px no-repeat,linear-gradient(#f6d565,#f6d565) bottom right/1px 12px no-repeat;opacity:.65}.camera-thirds{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33.1%,#fff4 33.1%,#fff4 33.5%,transparent 33.5%,transparent 66.4%,#fff4 66.4%,#fff4 66.8%,transparent 66.8%),linear-gradient(to bottom,transparent 33.1%,#fff4 33.1%,#fff4 33.5%,transparent 33.5%,transparent 66.4%,#fff4 66.4%,#fff4 66.8%,transparent 66.8%)}.virtual-camera .camera-controls{display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:7px}.camera-mode{font:600 10px/1 system-ui,sans-serif;letter-spacing:1.5px;color:#f6d565}.virtual-camera [data-camera-shot]{display:grid;place-items:center;width:58px;height:58px;min-height:58px;border:2px solid #f4f3ee!important;background:transparent!important;border-radius:50%;padding:4px;color:transparent!important}.virtual-camera [data-camera-shot]>span{display:block;width:44px;height:44px;border-radius:50%;background:#f4f3ee}.virtual-camera [data-camera-shot]:active>span{transform:scale(.93);background:#d3d0c4}.virtual-camera .camera-controls p{margin:0;color:#919496;font:9px/1 system-ui,sans-serif}.virtual-camera .camera-review button{border-color:#6d6b61;background:#27292b;color:#f6f1e4}.virtual-camera [data-camera-share]{background:#ded9c9;color:#151a1d;border-color:#ded9c9}.virtual-camera:has(.camera-review:not([hidden])) .camera-frame,.virtual-camera:has(.camera-review:not([hidden])) .camera-view-label{display:none}
@media(max-height:620px){#phone .camera-controls{display:flex;gap:4px;align-items:center;justify-content:center}#phone .camera-view-label{display:none}#phone .camera-frame{inset:22% 12% 28%}#phone .virtual-camera [data-camera-shot]{width:52px;height:52px;min-height:52px}#phone .virtual-camera [data-camera-shot]>span{width:38px;height:38px}}
/* Short portrait phones still have room for a full-width selfie above the shutter. */
@media(max-height:620px) and (orientation:portrait){#phone .virtual-camera{display:flex;flex-direction:column;padding:3px;gap:4px}#phone .camera-view{flex:1;min-height:0;width:100%}#phone .camera-controls{display:grid;grid-template-columns:1fr 52px 1fr;align-items:center;gap:8px;padding:0}#phone .camera-mode{justify-self:center}#phone .camera-controls p{justify-self:center}#phone .camera-review{flex:none;min-height:0}#phone .camera-frame{inset:22% 24% 28%}}

/* The battery button opens practical charging choices without changing the screen layout. */
#phone .phone-screen .ph-status [data-phone-battery] { width:auto; flex:0 0 auto; margin:0; white-space:nowrap; display:inline-flex; align-items:center; min-height:20px; height:20px; padding:0 3px; border:0; background:transparent; color:inherit; font:inherit; }
#desk .browser-address [data-browser-app] { width:auto; flex:0 0 auto; white-space:nowrap; margin-left:auto; min-height:28px; padding:3px 8px; font:11px/1.3 system-ui,sans-serif; }
.daily-needs { color:#dce9e2; font:13px/1.5 system-ui,sans-serif; }
.daily-needs h3 { margin:0 0 12px; font-size:19px; }
.daily-needs p { margin:10px 0; }
.daily-needs .needs-options { display:grid; gap:8px; }
#phone .daily-needs button, #desk .daily-needs button { display:block; width:100%; height:auto; min-height:44px; margin:6px 0; padding:10px; border:1px solid #718b7c; border-radius:6px; background:#213c32; color:#edf2de; text-align:left; }
.needs-review:not(:empty) { margin:14px 0; padding:10px; border:1px solid #c4b982; background:#273b2c; }
.daily-needs small,.daily-needs .needs-guide { color:#9dafaa; font-size:11px; }

/* App-first phone: use the viewport, keep the grip below the reading area. */
#phone.phone { width:min(440px,calc(100vw - 28px)); height:min(820px,calc(100dvh - var(--device-top) - 32px)); min-height:0; top:16px; bottom:auto; left:auto; right:max(24px,calc((100vw - 1440px)/2)); transform-origin:top right; transform:translateX(calc(100% + 80px)) scale(var(--phone-scale,1)); }
body.phone-out #phone.phone { top:16px; bottom:auto; transform:scale(var(--phone-scale,1)); }
#phone .phone-close { right:-10px; top:-10px; }
#phone .phone-grip { width:calc(100% + 60px); left:-30px; top:15%; height:calc(90% + 100px); }
#phone .phone-thumb { top:64%; height:29%; }
#phone .ph-status { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:6px; min-height:30px; padding:3px 9px; }
#phone .ph-status-mid { text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#phone .ph-status [data-phone-battery] { min-height:30px; font-size:10px; }
#phone .ph-home-gesture { flex:0 0 44px; min-height:44px; width:100%; padding:0; margin:0; display:grid; place-items:center; background:#080d13; color:white; border:0; border-radius:0; touch-action:none; }
.ph-home-gesture span { width:100px; max-width:35%; height:5px; background:#fff; border-radius:4px; }
#phone .ph-body { scrollbar-gutter:stable; }
#phone .ph-body>.ph-channel,#phone .ph-body>.ph-feed,#phone .ph-body>.ph-saas { flex:0 0 auto; min-height:100%; box-sizing:border-box; }
#phone .ph-channel { margin:0; padding:12px; width:100%; }
#phone .channel-videos { overflow:visible; min-height:0; }
#phone .channel-profile { padding-bottom:8px; }
#phone .ph-home .ph-home-grid { gap:12px; }
#phone .ph-home .ph-icon { width:54px; height:54px; }
#phone .ph-home .ph-icon svg { width:32px; height:32px; }
#phone .ph-home .ph-icon-name { font:12px/1.3 system-ui,sans-serif; }
.finance-menu-balance { margin:8px 0 20px; padding:18px; background:#1a302c; border:1px solid #355148; border-radius:12px; }
.finance-menu-balance>* { display:block; }.finance-menu-balance strong { font:600 30px/1.4 system-ui,sans-serif; color:#edfaf2; }
.finance-menu nav { display:grid; gap:10px; }
.finance-menu nav button { position:relative; display:flex; flex-direction:column; gap:5px; min-height:74px; padding:14px 36px 14px 14px; border:1px solid #3f6059; border-radius:10px; text-align:left; background:#182c29; color:#e6f2eb; }
.finance-menu nav strong { font:600 17px/1.3 system-ui,sans-serif; }.finance-menu nav span { font:13px/1.3 system-ui,sans-serif; color:#adc7bd; }.finance-menu nav b { position:absolute; right:14px; top:20px; font-size:23px; }
.finance-app>header { gap:8px; margin:0 0 8px; }.finance-app>header h3 { font-size:16px; margin-left:auto; }
.finance-back { min-height:44px; padding:8px; background:transparent; border:0; color:#c7e4d8; font:14px system-ui,sans-serif; }
#phone .finance-app { padding:8px; }.finance-coin .ph-sub { margin:4px 0; font-size:10px; }
#phone .ph-chips,#phone .ph-branch { display:grid; gap:10px; }
#phone .ph-branch button,#phone .ph-chips button { margin:0; padding:12px; }
.media-resume { display:grid; place-items:center; width:100%; min-height:120px!important; border:1px solid #61788a; border-radius:6px; background:#14222d; color:#e9f2f7; font:15px system-ui,sans-serif; cursor:pointer; }
@media(max-width:1279px) {
  #phone.phone { left:50%; right:auto; transform-origin:top center; transform:translate(-50%,calc(100dvh + 50px)); }
  body.phone-out #phone.phone { transform:translateX(-50%) scale(var(--phone-scale,1)); }
}
@media(min-width:1280px) {
  body.devices-paired #desk.desk { left:calc(50% - 240px * var(--desk-scale,1)); }
  body.devices-paired #phone.phone { right:calc(50% - 630px * var(--phone-scale,1)); }
}
@media(max-height:620px) {
  #phone .phone-notch { margin-bottom:4px; }
  #phone .ph-home .ph-home-grid { gap:5px; }
  #phone .ph-home .ph-icon { width:40px; height:40px; }
  #phone .ph-home .ph-icon-name { font-size:10px; }
  #phone .ph-home-compact .ph-swipe { min-height:0; }
  .finance-menu nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .finance-menu nav button { min-height:62px; padding:8px; }.finance-menu nav b { display:none; }
  .finance-menu nav span { font-size:11px; }.finance-menu-balance { padding:8px; margin:0 0 8px; }
}
/* Trading uses the whole app; its primary actions stay below a flexible chart. */
#phone-screen:has(.finance-coin) .ph-body { overflow:hidden; }
#phone .finance-coin { display:flex; flex-direction:column; height:100%; min-height:0; box-sizing:border-box; position:relative; padding:4px; }
#phone .finance-coin>header { flex:none; height:44px; margin:0 0 3px; }
#phone .finance-coin .finance-market,#phone .finance-coin [data-coin-mount] { flex:1; height:100%; min-height:0; display:flex; flex-direction:column; }
#phone .finance-coin .finance-market>.ph-sub { display:none; }
#phone .finance-coin .coin-session { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(48px,1fr) auto auto; height:100%; min-height:0; }
#phone .finance-coin .coin-chart-mount { height:100%; min-height:0; aspect-ratio:auto; }
#phone .finance-coin .tape-books { padding:4px 8px; gap:8px; margin:0; font-size:11px; }
#phone .finance-coin .tape-books dt { font-size:10px; margin:0; }
#phone .finance-coin .tape-books dd { font-size:16px; line-height:1.2; }
#phone .finance-coin .tape-controls { padding:3px; margin:0; display:flex; gap:3px; }
#phone .finance-coin .tape-amount-row { gap:4px; }
#phone .finance-coin .tape-amount-row>label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#phone .finance-coin .tape-currency { padding:0 8px; }
#phone .finance-coin .tape-currency input,#phone .finance-coin .tape-use-all,#phone .finance-coin .tape-primary button { min-height:44px; height:44px; padding:6px; }
#phone .finance-coin .tape-primary { gap:5px; }
#phone .finance-coin .tape-status { font-size:11px; line-height:1.2; }
#phone .finance-coin .tape-funding { font-size:12px; line-height:1.3; }
#phone .finance-coin .tape-funding summary { min-height:44px; padding:12px 6px; }
#phone .finance-coin .tape-funding[open] { position:absolute; inset:0; z-index:5; overflow:auto; overscroll-behavior:contain; box-sizing:border-box; padding:8px; border:1px solid #648577; background:#101c24; }
#phone .finance-coin .tape-funding[open] summary { position:sticky; top:-8px; background:#101c24; border-bottom:1px solid #648577; }
/* Landscape gives the phone a wide app surface, with controls beside the chart. */
@media(max-height:500px) and (orientation:landscape) {
  #phone.phone { width:min(760px,calc(100vw - 36px)); }
  #phone .finance-coin .coin-session { grid-template-columns:minmax(100px,1fr) minmax(300px,1.6fr); grid-template-rows:minmax(32px,1fr) 35px; gap:4px; }
  #phone .finance-coin .coin-chart-mount { grid-column:1; grid-row:1; }
  #phone .finance-coin .tape-books { grid-column:1; grid-row:2; padding:0 4px; }
  #phone .finance-coin .tape-controls { grid-column:2; grid-row:1 / 3; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:44px 44px; align-content:center; }
  #phone .finance-coin .tape-amount-row { grid-column:1; grid-row:1; min-width:0; }
  #phone .finance-coin .tape-primary { grid-column:1 / 3; grid-row:2; }
  #phone .finance-coin .tape-funding { grid-column:2; grid-row:1; }
  #phone .finance-coin .tape-status:not([hidden]) { position:absolute; top:3px; left:100px; right:4px; text-align:right; font-size:10px; pointer-events:none; }
  #phone .finance-coin .tape-funding summary { padding:12px 4px; }
}

/* The laptop screen uses the available desk, including when the phone is alongside. */
#desk.desk,body.desk-out:not(.playing) #desk.desk { width:min(1100px,calc(100vw - 32px)); height:min(800px,calc(100dvh - var(--device-top) - var(--device-bottom))); }
@media(min-width:1280px) { body.devices-paired #desk.desk { width:800px; } }
@media(max-height:500px) { #desk.desk { --deck-height:48px; } }
/* Borrowing stays a deliberate disclosure in the header, leaving space for the graph. */
@media(min-height:501px) {
  #phone .finance-coin .tape-funding { position:absolute; top:0; right:62px; width:110px; }
  #phone .finance-coin .tape-funding summary { min-height:44px; padding:7px 4px; font-size:11px; line-height:1.3; }
  #phone .finance-coin .tape-funding[open] { width:auto; right:0; }
}
/* One shared Clod conversation, with a real text composer always within reach. */
#phone .ph-body:has(.ph-clod) { overflow:hidden; }
.ph-clod { display:flex; flex-direction:column; height:100%; min-height:0; width:100%; font:14px/1.5 system-ui,sans-serif; }
.ph-clod .ph-chat { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px; }
.ph-clod .bubble { font:14px/1.5 system-ui,sans-serif; padding:11px 13px; margin-bottom:12px; }
.ph-clod .bubble>div { white-space:pre-wrap; overflow-wrap:anywhere; }
.clod-offline { display:block; margin-top:7px; color:#c4b7a3; font-size:11px; }
.clod-suggestions { margin-top:12px; }.clod-suggestions summary { min-height:44px; padding:12px 0; box-sizing:border-box; cursor:pointer; }
.clod-return { min-height:44px; width:100%; margin-top:10px; padding:8px; }
.clod-form { display:grid; grid-template-columns:minmax(0,1fr) 60px; gap:8px; padding:8px; flex:none; background:#151d22; border-top:1px solid #42505a; }
.clod-form textarea { resize:none; min-height:50px; width:100%; box-sizing:border-box; border:1px solid #77828a; background:#0e151c; color:#f3eee6; border-radius:10px; padding:9px; font:14px/1.4 system-ui,sans-serif; }
.clod-form button { min-height:44px; padding:8px; border:1px solid #f0ba95; background:#b56843; color:#fff4e9; border-radius:9px; font:14px system-ui,sans-serif; }
.clod-label { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
#desk .ph-clod { min-height:250px; }
@media(max-height:500px) { .clod-form textarea { min-height:44px; height:44px; padding:7px; } .clod-form { padding:4px; } .ph-clod .ph-chat { padding:6px; } }
.ph-clod { background:#101922; }
/* An explicitly opened global menu remains reachable above a foreground device. */
.top:has(#settings-menu[open]) { z-index:90; }
/* Laptop revision: one compact browser row and a chart-first trading workspace. */
body.desk-out:not(.devices-paired) #desk.desk { width:min(1100px,calc(100vw - 32px)); }
#desk .desk-bezel { position:relative; padding-top:8px; }
#desk .desk-bar { position:absolute; right:8px; top:-10px; min-height:0; padding:0; z-index:4; pointer-events:none; }
#desk .desk-menu { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#desk .desk-bar .device-close { pointer-events:auto; width:44px; height:44px; min-height:44px; border-radius:8px; }
#desk .desk-browser { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:44px minmax(0,1fr); }
#desk .browser-tabs { grid-column:1; grid-row:1; min-width:0; padding:0 3px; }
#desk .browser-tabs button { min-width:76px; min-height:44px; padding:6px 10px; }
#desk .browser-address { grid-column:2; grid-row:1; padding:0 48px 0 8px; gap:7px; }
#desk .browser-content { grid-column:1 / 3; grid-row:2; padding:8px; }
#desk .desk-dock { padding:3px 2px 0; gap:4px; }
#desk .desk-dock-btn { min-height:44px; height:44px; min-width:62px; padding:3px; display:flex; flex-direction:row; gap:4px; align-items:center; justify-content:center; }
#desk .desk-dock-btn .ph-icon { width:25px; height:25px; flex:none; border-radius:6px; }
#desk .desk-dock-btn .ph-icon svg { width:17px; height:17px; }
#desk .desk-dock-btn>span { font:11px system-ui,sans-serif; }
#desk .browser-content:has(.finance-coin) { overflow:hidden; }
#desk .finance-coin { display:flex; flex-direction:column; height:100%; min-height:0; position:relative; }
#desk .finance-coin>header { height:44px; flex:none; margin:0 0 4px; }
#desk .finance-coin .finance-market,#desk .finance-coin [data-coin-mount] { display:flex; flex-direction:column; flex:1; height:100%; min-height:0; }
#desk .finance-coin .finance-market>.ph-sub { display:none; }
#desk .finance-coin .coin-session { display:grid; grid-template-columns:minmax(0,2fr) minmax(250px,1fr); grid-template-rows:minmax(0,1fr) auto; gap:10px; max-width:none; height:100%; min-height:0; }
#desk .finance-coin .coin-chart-mount { grid-column:1; grid-row:1; width:100%; height:100%; min-height:0; aspect-ratio:auto; }
#desk .finance-coin .tape-books { grid-column:1; grid-row:2; padding:8px; margin:0; }
#desk .finance-coin .tape-controls { grid-column:2; grid-row:1 / 3; display:flex; align-content:start; padding:8px; gap:8px; }
#desk .finance-coin .tape-amount-row { flex-wrap:wrap; min-width:0; }
#desk .finance-coin .tape-currency { min-width:0; flex:1; }
#desk .finance-coin .tape-currency input { width:100%; min-width:0; }
#desk .finance-coin .tape-primary { gap:8px; }
#desk .finance-coin .tape-primary button { min-height:44px; }
#desk .finance-coin .tape-funding[open] { position:absolute; inset:44px 0 0; z-index:5; overflow:auto; background:#101c24; border:1px solid #648577; padding:12px; }
@media(max-width:600px) { #desk .browser-address>span { display:none; } #desk .browser-tabs button { min-width:64px; padding:5px; } #desk .browser-address { padding-left:3px; } #desk .finance-coin .coin-session { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(48px,1fr) auto auto; } #desk .finance-coin .coin-chart-mount { grid-column:1; grid-row:1; } #desk .finance-coin .tape-books { grid-column:1; grid-row:2; } #desk .finance-coin .tape-controls { grid-column:1; grid-row:3; padding:4px; gap:4px; } }
@media(max-height:500px) and (min-width:601px) { #desk .finance-coin .coin-session { grid-template-columns:minmax(0,1fr) minmax(300px,1fr); } #desk .finance-coin .tape-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:44px 44px; padding:0; gap:4px; } #desk .finance-coin .tape-amount-row { grid-column:1; grid-row:1; } #desk .finance-coin .tape-amount-row>label { display:none; } #desk .finance-coin .tape-primary { grid-column:1 / 3; grid-row:2; } #desk .finance-coin .tape-funding { grid-column:2; grid-row:1; font-size:11px; } #desk .finance-coin .tape-funding summary { padding:8px 2px; } #desk .finance-coin .tape-currency input { min-height:44px; height:44px; } #desk .finance-coin .tape-books { padding:3px; } }
#desk .finance-back { width:auto; flex:0 0 auto; text-align:left; }
@media(max-height:500px) {
  #desk .browser-content:has(.finance-coin) { padding:2px 4px; }
  #desk .finance-coin>header { margin-bottom:2px; }
  #desk .finance-coin .tape-books { padding:0 4px; font-size:10px; }
  #desk .finance-coin .tape-books dt { margin:0; font-size:10px; line-height:1.2; }
  #desk .finance-coin .tape-books dd { margin:0; font-size:16px; line-height:1.2; }
  #desk .finance-coin .coin-session { grid-template-rows:minmax(30px,1fr) 32px; }
  #desk .finance-coin .tape-status:not([hidden]) { position:absolute; top:2px; left:110px; right:5px; font-size:10px; margin:0; pointer-events:none; }
}
@media(max-height:500px) {
  #desk .browser-content:has(.finance-coin) { padding:0 4px; }
  #desk .finance-coin>header { margin:0; }
  #desk .finance-coin .tape-currency,#desk .finance-coin .tape-use-all { height:44px; min-height:44px; box-sizing:border-box; }
  #desk .finance-coin .tape-currency input { min-height:42px; height:42px; }
}
/* Notes is a quiet writing app; the automatic journal has its own tab. */
.notes-app { background:#f5eedc; color:#343128; min-height:100%; padding:12px; box-sizing:border-box; font:14px/1.5 system-ui,sans-serif; }
.notes-tabs { display:flex; gap:5px; border-bottom:1px solid #d8cbb0; padding-bottom:8px; margin-bottom:12px; }
.notes-app button { min-height:44px; padding:9px; color:#4d3d19!important; background:#f7e4ae!important; border:1px solid #cbb273!important; border-radius:7px; font:13px system-ui,sans-serif; }
.notes-tabs button { flex:1; min-width:0; padding:5px; }.notes-tabs button[aria-pressed=true] { background:#d9bd69!important; }
.notes-app header,.notes-editor-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }.notes-app h3 { color:#343128!important; font:600 20px system-ui,sans-serif; margin:0; }
.notes-list { display:grid; gap:8px; }.notes-list button { text-align:left; padding:12px; background:#fff9eb!important; }.notes-list strong,.notes-list span { display:block; overflow-wrap:anywhere; }.notes-list span { font-size:12px; color:#766e5c; margin-top:4px; }
.notes-app label { display:block; margin-bottom:12px; font-size:12px; }.notes-app input,.notes-app textarea { display:block; width:100%; min-width:0; box-sizing:border-box; margin-top:5px; padding:10px; background:#fffdf5; border:1px solid #c9b98f; border-radius:6px; color:#302c24; font:15px/1.5 system-ui,sans-serif; }.notes-app input { min-height:44px; }.notes-app textarea { min-height:160px; resize:vertical; }.notes-save-status { color:#766b4b; font-size:12px; }.notes-delete-confirm { border-top:1px solid #c9b98f; padding-top:10px; }.notes-delete-confirm button { margin-right:8px; }
.notes-app .ph-journal { color:#39352b; }.notes-app .ph-journal p { color:#655b48; }.notes-app .ph-journal-entry { background:#fff8e7; border-color:#c8b98d; }.notes-app .ph-journal-entry strong { color:#39352b; }
.finance-bills { border:1px solid #476258; padding:12px; margin-bottom:16px; border-radius:8px; }.finance-bills h4 { margin:0 0 10px; font-size:17px; }.finance-bills button { width:100%; min-height:44px; }.finance-bills p { color:#b2c4ba; font-size:12px; }
/* Essentials names are the navigation, with small category icons beside them. */
#phone .essentials-catalog,#desk .essentials-catalog { display:flex; flex-direction:column; height:100%; min-height:0; max-width:none; width:100%; padding:10px; border:0; border-radius:0; box-sizing:border-box; background:#192738; }
#phone .essentials-catalog header,#desk .essentials-catalog header { position:static; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px; padding:0 0 7px; flex:none; }
.essentials-search { display:flex; gap:5px; flex:none; margin:0 0 8px; }.essentials-search input { flex:1; min-width:0; width:100%; min-height:44px; padding:8px; background:#0e1a28; border:1px solid #66798f; color:#fff; border-radius:6px; font:14px system-ui,sans-serif; }.essentials-search button { min-height:44px; padding:7px; background:#2e455e; color:#f0f5fc; border:1px solid #8297af; border-radius:6px; font:12px system-ui,sans-serif; }
.essentials-list { flex:1; min-height:0; display:flex; flex-direction:column; gap:5px; justify-content:flex-start; }
#phone .essentials-row,#desk .essentials-row { display:flex; align-items:center; gap:10px; min-height:52px; height:52px; flex:none; width:100%; max-width:none; padding:6px 9px; border:1px solid #405870; border-radius:7px; background:#22364b; color:#f0f5fc; text-align:left; }
.essentials-row>span:nth-child(2) { min-width:0; flex:1; }.essentials-row strong { display:block; font:600 14px/1.2 system-ui,sans-serif; white-space:normal; overflow-wrap:anywhere; color:#f2f6fc!important; }.essentials-row small { display:block; font:11px/1.3 system-ui,sans-serif; color:#bdcde0; margin-top:3px; }.essentials-row b { font:20px system-ui,sans-serif; }.essentials-icon { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:7px; border:1px solid #ffffff30; }.essentials-icon svg { width:23px; height:23px; }
#phone .essentials-catalog .ph-folder-pager,#desk .essentials-catalog .ph-folder-pager { flex:none; margin-top:6px; padding-top:5px; }
@media(max-height:500px) { #phone .essentials-catalog,#desk .essentials-catalog { padding:2px 5px; } #phone .essentials-catalog header,#desk .essentials-catalog header { display:none; } .essentials-search { margin-bottom:4px; } #phone .essentials-catalog .ph-folder-pager,#desk .essentials-catalog .ph-folder-pager { margin:2px 0 0; padding:0; border:0; } }

/* Community uses the same opaque app surface on either device. */
.community-app { box-sizing:border-box; min-width:0; width:100%; padding:12px; background:#f6f4ee; color:#26382f; border-radius:10px; font:14px/1.45 system-ui,sans-serif; }
.community-app *, .account-app * { box-sizing:border-box; min-width:0; }
.community-heading,.account-app>header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.community-heading h2,.account-app h3 { margin:4px 0 10px; }
.community-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:10px 0 14px; }
.community-app button { min-height:44px; max-width:100%; padding:8px 11px; border:1px solid #b4c2b7; border-radius:9px; background:#fff; color:#244537; font:600 13px/1.25 system-ui,sans-serif; overflow-wrap:anywhere; }
.community-app button:disabled { opacity:.5; }
.community-tabs [aria-pressed=true],.account-app button[type=submit] { background:#355e49; color:#fff; border-color:#355e49; }
.community-app p { margin:8px 0 12px; }
.community-app h3 { font-size:17px; }
.community-app h4 { font-size:14px; margin:16px 0 6px; }
.community-app .community-card,.account-summary,.account-agent { background:#fff; border:1px solid #d3dbd0; border-radius:10px; padding:12px; margin:10px 0; overflow-wrap:anywhere; }
.community-app .community-board { margin:10px 0; padding-left:24px; }
.community-board li { padding:8px 0; }
.community-board li button { display:block; margin-top:5px; }
.community-app .community-actions,.account-actions,.account-auth-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.community-app small,.account-help,.community-footnote { display:block; color:#52675a; font-size:12px; }
.community-app label { display:block; margin:10px 0; }
.community-app input:not([type=checkbox]),.community-app textarea { display:block; width:100%; min-height:44px; margin-top:5px; padding:10px; border:1px solid #a9b9ad; border-radius:8px; background:#fff; color:#1f3428; font:16px/1.4 system-ui,sans-serif; }
.community-app textarea { resize:vertical; }
.community-app input[type=checkbox] { width:20px; height:20px; vertical-align:middle; margin:0 8px 0 0; }
.community-app fieldset { border:1px solid #c0ccbf; border-radius:8px; margin:12px 0; padding:8px; }
.community-app fieldset label,.community-app .account-check { min-height:44px; padding:8px 0; }
.account-secret { padding:12px; background:#fff3c8; border:1px solid #ceb45d; border-radius:10px; }
.account-secret code { display:block; white-space:pre-wrap; overflow-wrap:anywhere; user-select:all; font-size:13px; }
.account-settings { margin-top:20px; }
.account-settings summary { min-height:44px; padding:10px 0; cursor:pointer; }
.account-settings button { margin:6px 6px 0 0; }
.community-error { color:#9b3030; background:#ffebe5; border-radius:8px; padding:10px; }
.notes-tabs button { white-space:normal; overflow-wrap:anywhere; }
.community-app h2,.community-app h3,.community-app h4,.community-app strong,.community-app label,.community-app legend { color:#26382f; }
.community-app p,.community-app small,.community-app .community-footnote { color:#52675a; }
.community-app .community-error { color:#8d2929; background:#ffebe5; }
/* Hidden overflow still permits focus-driven scrolling; this shell is never a scroll container. */
#phone-stage.phone-stage { overflow:clip; }
.software-app,.parents-chat { padding:12px; background:#f3f0e6; border-radius:10px; color:#2d392f; font:14px/1.5 system-ui,sans-serif; min-width:0; box-sizing:border-box; }
.software-app h3,.software-app h4,.parents-chat h3 { color:#263b30; font:600 18px/1.4 system-ui,sans-serif; margin:8px 0; }
.software-app p,.parents-chat p { color:#516459; }
.software-app header,.parents-chat header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.software-app button,.parents-chat button { display:block; width:100%; min-height:44px; padding:10px; margin:10px 0; border:1px solid #b3c4b5; border-radius:8px; background:#fff; color:#294b37; font:600 14px/1.35 system-ui,sans-serif; text-align:left; white-space:normal; }
.software-app header button,.parents-chat header button { width:auto; }
.software-context { font-size:12px; }
.software-quote,.family-review { border:1px solid #c9c7af; padding:12px; background:#fffbed; border-radius:10px; }
.software-plan-row strong,.software-plan-row span { display:block; }.software-plan-row span { color:#677566; font-size:12px; }
.family-text { max-width:85%; width:fit-content; padding:10px 12px; border-radius:14px; margin:14px 0; background:#e0e6dc; color:#293f30; }
.family-text.me { margin-left:auto; background:#d8e9d8; }.family-receipt { font-size:12px; }
.software-app,.parents-chat { min-height:100%; }
/* Public source archive and readable media cards: independent of game rewards. */
#phone .instagram-card, #desk .instagram-card { min-width:0; padding:10px; margin:12px 0; border:1px solid #d8d1c8; border-radius:10px; background:#fffdfa; color:#282624; }
.instagram-source-image { display:block; width:100%; height:auto; max-height:440px; object-fit:contain; background:#ede8e1; border-radius:6px; }
#phone .instagram-card p, #desk .instagram-card p { color:#282624; font:14px/1.45 system-ui,sans-serif; margin:10px 0; }
#phone .instagram-card small, #desk .instagram-card small { display:block; margin-top:8px; color:#5e554d; font:12px/1.4 system-ui,sans-serif; }
#phone .ph-channel button, #desk .ph-channel button { background:#eee8df; color:#292724; border:1px solid #bdb4a9; font:14px/1.4 system-ui,sans-serif; min-height:44px; }
#phone .ph-channel button.channel-video, #desk .ph-channel button.channel-video { display:grid; gap:6px; width:100%; min-width:0; margin:0; padding:8px; border:1px solid #d8d1c8; border-radius:8px; background:#fffdfa; color:#282624; text-align:left; }
#phone .channel-video strong, #desk .channel-video strong { color:#282624; font:600 14px/1.35 system-ui,sans-serif; overflow-wrap:anywhere; }
#phone .channel-video>span:last-child, #desk .channel-video>span:last-child { color:#5e554d; font:12px/1.4 system-ui,sans-serif; }
#phone .channel-videos, #desk .channel-videos { gap:12px; }
#phone .ph-channel .channel-pager, #desk .ph-channel .channel-pager { align-items:center; gap:8px; }
#phone .ph-channel a, #desk .ph-channel a { display:inline-block; color:#285879; padding:10px 0; overflow-wrap:anywhere; }
/* Browser tabs size to their titles instead of inheriting full-width app buttons. */
#desk .browser-tabs { align-items:end; gap:4px; }
#desk .browser-tabs button { flex:0 0 auto; width:auto; max-width:160px; min-width:76px; height:44px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:0; font:13px/1.3 system-ui,sans-serif; }
#desk .browser-address { font:12px/1.3 system-ui,sans-serif; }
#phone .ph-reply-options, #desk .ph-reply-options { gap:10px; }
#phone .ph-reply-options button, #desk .ph-reply-options button { width:100%; margin:0; font:14px/1.4 system-ui,sans-serif; color:#285879; background:#fafcff; }
#desk .browser-content:has(.ph-clod) { display:flex; min-height:0; overflow:hidden; }
#desk .browser-content>.ph-clod { flex:1; height:100%; min-height:0; margin:0; }
#phone .notes-editor-bar, #desk .notes-editor-bar { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; position:sticky; top:0; background:#fffaf0; z-index:1; padding-bottom:6px; }
#phone .notes-editor-bar .notes-save-status, #desk .notes-editor-bar .notes-save-status { flex-basis:100%; margin:0; color:#375a42; font:12px/1.4 system-ui,sans-serif; }
#phone .ph-clod .ph-chat, #desk .ph-clod .ph-chat { max-height:none; width:100%; box-sizing:border-box; }
#desk .ph-clod .ph-chat { max-width:none; margin:0; padding:12px; }