/* Warm olive STN, drawn in a few quiet value planes beneath a pixel-marked lens. */
:root{--sticker-heart:var(--heart);--sticker-star:var(--star);--sticker-plus:var(--plus);--sticker-highlight:var(--highlight)}
.app-window{
  --lcd-paper:#c5cba1;--lcd-ink:#303b2b;--lcd-muted:#566047;
  --paper:var(--lcd-paper);--panel:var(--lcd-paper);--header:var(--lcd-paper);
  --ink:var(--lcd-ink);--name:var(--lcd-ink);--muted:var(--lcd-muted);
  --heart:var(--lcd-ink);--star:var(--lcd-ink);--plus:var(--lcd-ink);
  --highlight:#e3e5bd;
  /* FusionPixel's 12-dot em sets one glass-cell pitch; glyphs stay native. */
  --lcd-cell:calc(clamp(16px,21rem,24px)/12);
  background:#abb58b;box-shadow:none;
}
.app-window::before{
  z-index:0;
  background:
    linear-gradient(180deg,#e3e5bd18 0 12%,transparent 12% 83%,#707b5110 83% 100%),
    linear-gradient(112deg,#b9c295 0 18%,#c2c9a0 18% 39%,#c9cda7 39% 74%,#c0c89c 74% 94%,#b6c092 94% 100%);
  background-size:100% 100%;
  box-shadow:inset 2rem 3rem 0 #4c593b4d,inset 4rem 6rem 0 #64714916,inset -2rem -2rem 0 #68734c1c,inset 0 -1rem 0 #e9ebc65c;
}
/* One static matrix modulates both native ink and blank glass; no text renderer. */
.app-window::after{
  background-image:
    url('./assets/lcd-lens-wear.svg?v=b259134ca6558a88cce77ebf1f96042785982de5'),
    url('./assets/lcd-matrix.svg?v=b259134ca6558a88cce77ebf1f96042785982de5');
  background-size:100% 100%,var(--lcd-cell) var(--lcd-cell);
  background-repeat:no-repeat,repeat;
  box-shadow:inset 0 1rem 0 #ebedc750,inset 1rem 0 0 #e7eac42b;
  pointer-events:none;user-select:none;
}
.app-header{background:transparent;box-shadow:inset 0 2rem 0 #e3e5bd20,0 2rem 0 #56604745}
.brand-icon img{filter:none;mix-blend-mode:normal;opacity:1}
.pixel-stickers{position:absolute;right:14rem;top:0;bottom:0;width:318rem;pointer-events:none}
.pixel-stickers,.stream-flourish{--heart:var(--sticker-heart);--star:var(--sticker-star);--plus:var(--sticker-plus);--highlight:var(--sticker-highlight)}
#timeline{z-index:1;padding:13rem 16rem 18rem;background:transparent}
#posts{gap:14rem}
.post{display:block;min-width:0}
.post[data-post-id]:not(:last-child)::after{content:'';display:block;height:2px;margin-top:15rem;background:repeating-linear-gradient(90deg,var(--lcd-muted) 0 2px,transparent 2px 6px);opacity:.65}
.post[data-tone]{
  --post-strip:transparent;--post-edge:var(--lcd-ink);--post-shadow:transparent;
  --post-handle:var(--lcd-muted);--heart:var(--lcd-ink);
}
.bubble{padding:0;background:transparent;box-shadow:none}
.post-identity{min-height:28rem;margin:0;padding:0;gap:8rem;background:transparent;font-size:clamp(14px,16rem,18px);line-height:1.4}
.post-identity::before{display:none}
.avatar{width:28rem;height:28rem;flex:none;padding:0;background:transparent;box-shadow:none;transition:none}
.avatar img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:grayscale(1) contrast(1.35);mix-blend-mode:multiply;opacity:.88}
.post:hover .avatar{transform:none}
.author-name{gap:1rem 6rem;color:var(--lcd-ink)}
.author-label{white-space:normal;overflow-wrap:anywhere}
.author-handle{color:var(--lcd-muted);font-size:clamp(11px,12rem,15px)}
.post-text{margin-top:8rem;font-size:clamp(16px,21rem,24px);line-height:1.5;color:var(--lcd-ink)}
.post-text,.author-name,.post-footer{text-shadow:none}
.post-footer{min-height:18rem;margin-top:7rem}
.post-time,.like-count{color:var(--lcd-muted);font-size:clamp(11px,12rem,15px)}
.post-actions .ui-icon{width:max(16rem,12px);height:max(16rem,12px)}
.post-actions button,.post-actions [aria-pressed=true] .like-count{color:var(--lcd-ink)}
.like-burst,.like-burst>span:nth-child(2n){color:var(--lcd-ink);background:var(--lcd-ink)}
.post-media{margin-top:8rem}
.post-media img{filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply;opacity:.85;image-rendering:pixelated}
.stream-flourish{display:flex}
.dither{display:none}
.settings-portrait{display:none}
.settings-card h2{font-size:15rem;color:var(--lcd-ink)}
.settings-row{margin-top:12rem;padding:8rem 0;background:transparent;box-shadow:none;color:var(--lcd-ink)}
.shell-picker{margin-top:15rem}
.shell-picker legend{margin-bottom:10rem}
.shell-options{gap:8rem}
.shell-option{background:transparent;color:var(--lcd-ink);box-shadow:none;padding:7rem 2rem}
.shell-option[aria-pressed=true]{background:var(--lcd-ink);color:var(--lcd-paper);box-shadow:none}
@media(hover:hover){.shell-option:hover{background:#7c8c6250}.shell-option[aria-pressed=true]:hover{background:var(--lcd-ink)}}
@media(max-height:550px) and (min-width:600px){
  .pixel-stickers{top:-5rem}
  #timeline{padding-top:10rem}
}

/* Profile content shares the feed's small monochrome screen. */
#profile:not([hidden]){margin-bottom:14rem;padding-bottom:14rem;border-bottom:2px dotted var(--lcd-muted)}
.profile-back{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;margin-bottom:8rem;color:var(--lcd-ink);font-size:clamp(18px,22rem,24px);line-height:1}
.profile-back>span{display:block;transform:scaleX(.82)}
.profile-identity{display:flex;align-items:center;gap:12rem;min-width:0}
.profile-avatar{width:48rem;height:48rem}
.profile-details{min-width:0}
#profileTitle{font-size:clamp(16px,21rem,24px);font-weight:400;line-height:1.4;overflow-wrap:anywhere;outline:none}
.profile-handle,.profile-count,.profile-empty{font-size:clamp(11px,13rem,16px);line-height:1.5;color:var(--lcd-muted);overflow-wrap:anywhere}
.profile-count{margin-top:4rem}
.profile-empty{margin-top:8rem}
a.avatar:focus-visible,.profile-back:focus-visible{outline:2px solid var(--lcd-ink);outline-offset:3px}
@media(hover:hover){a.avatar:hover,.profile-back:hover{background:#7c8c6230}}

.profile-bio{font-style:italic;margin-top:10rem;font-size:clamp(14px,17rem,20px);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--lcd-ink)}
@media(hover:hover){
  .author-name>a:hover{text-shadow:1px 1px 0 #e7f4c0,-1px -1px 0 #1c2d1740}
}

/* Give each ornament its own pocket of space inside the same header. */
.pixel-stickers .star-group{left:197rem;top:7rem}
.pixel-stickers .star-center{left:210rem;top:42rem}
.pixel-stickers .radio{left:227rem;top:22rem}
.pixel-stickers .star-left{left:265rem;top:6rem}
.pixel-stickers .heart-small{left:259rem;top:38rem}
.pixel-stickers .cross{left:279rem;top:45rem}
.pixel-stickers .heart-large{left:288rem;top:22rem}
.pixel-stickers .star-small{left:302rem;top:8rem}
.pixel-stickers .star-right{left:304rem;top:48rem}

@media(max-height:550px) and (min-width:600px){
  .pixel-stickers{top:0}
  .pixel-stickers .star-center{top:32rem}
  .pixel-stickers .radio{top:17rem}
  .pixel-stickers .heart-small{top:30rem}
  .pixel-stickers .cross{left:276rem;top:36rem}
  .pixel-stickers .heart-large{top:19rem}
  .pixel-stickers .star-right{left:287rem;top:5rem;width:8rem;height:8rem}
}