:root{
  --paper:#ffffff;
  --ink:#111111;
  --muted:#9a9a9a;
  --select:#1a73ff;
  --fade:260ms;
  --overshoot:cubic-bezier(.34,1.56,.64,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  opacity:1;
  filter:blur(0);
  transition:opacity var(--fade) ease, filter var(--fade) ease;
}
body.enter, body.leave{ opacity:0; filter:blur(12px); }

body.canvas{ overflow:hidden; }

.wordmark{
  position:fixed; top:28px; left:32px; z-index:10;
  font-size:13px; color:var(--ink);
  text-decoration:none; user-select:none;
}
.wordmark:hover{ opacity:.55; }

/* ---------- desktop ---------- */

.desktop{
  position:fixed;
  inset:0;
  overflow:hidden;
}

.file{
  position:absolute;
  top:0; left:0;
  width:112px;
  border:0; padding:8px 4px 6px;
  background:none; font:inherit; color:inherit;
  text-align:center; text-decoration:none; cursor:default;
  border-radius:8px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  will-change:transform;
}

.file .icon{
  width:76px; height:76px; display:block;
  pointer-events:none;
  -webkit-user-drag:none;
  transition:transform 160ms ease, filter 160ms ease;
}
.file:hover .icon{ transform:translateY(-2px); }
.file.dragging{ z-index:40; }
.file.dragging .icon{
  transform:scale(1.06);
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.18));
  transition:none;
}

/* shared-link spotlight: everything except the linked file washes out toward
   the white page and blurs, so the one being pointed at stays legible.
   only opacity and filter transition here — transform carries the icon's
   position, and animating it would fight dragging. */
.file{
  transition:opacity 460ms ease, filter 460ms ease;
}
.file.dimmed{
  opacity:.34;
  filter:blur(2px);
  pointer-events:none;
}

.file .name{
  display:inline-block; max-width:104px;
  padding:2px 6px; border-radius:5px;
  font-size:12px; line-height:1.3; word-break:break-word;
  pointer-events:none;
  transition:background 120ms ease, color 120ms ease;
}
.file:hover .name,
.file:focus-visible .name,
.file.dragging .name{ background:var(--select); color:#fff; }
.file:focus-visible{ outline:none; }

.file.is-placeholder .icon{ opacity:.42; }
.file.is-placeholder .name{ color:var(--muted); }
.file.is-placeholder:hover .name,
.file.is-placeholder.dragging .name{ color:#fff; }

.file .soon{
  position:absolute; transform:translateY(-96px);
  padding:3px 8px; border-radius:6px;
  background:var(--ink); color:#fff; font-size:11px;
  opacity:0; pointer-events:none; transition:opacity 180ms ease;
}
.file.show-soon .soon{ opacity:1; }

/* ---------- hover popup ---------- */

.pop{
  position:fixed; top:0; left:0; z-index:50;
  width:260px; padding:12px;
  display:flex; flex-direction:column; gap:10px;
  background:#fff;
  border:1px solid #ececec;
  border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
  pointer-events:none;
  opacity:0;
  transform:scale(.86);
  transform-origin:var(--origin, 50% 0%);
  transition:opacity 120ms ease, transform 120ms ease;
}
.pop.show{
  opacity:1;
  transform:scale(1);
  transition:opacity 200ms ease, transform 380ms var(--overshoot);
}
.pop[data-pos="bottom"]{ flex-direction:column-reverse; }

.pop-title{ font-size:12.5px; font-weight:600; }
.pop-desc{ margin:3px 0 0; font-size:12px; line-height:1.5; color:#6b6b6b; }

.pop-media{
  overflow:hidden;
  border-radius:9px;
  background:#f5f5f5;
  line-height:0;
  opacity:0;
  filter:blur(10px);
  transform:translateY(var(--slide, 14px));
  transition:opacity 380ms ease, filter 380ms ease, transform 420ms var(--overshoot);
}
.pop.show .pop-media{
  opacity:1; filter:blur(0); transform:translateY(0);
  transition-delay:90ms;
}
.pop-media img,
.pop-media video{ width:100%; height:auto; display:block; }

/* ---------- post ---------- */

.post{
  max-width:56ch;
  margin:0 auto;
  padding:26vh 32px 96px;
  font-size:14px;
  line-height:1.7;
}

.post h1{ margin:0; font-size:15px; font-weight:600; }

.post .date{ margin:2px 0 26px; font-size:12px; color:var(--muted); }

.post .body{ margin:0; white-space:pre-wrap; font:inherit; }

.error{
  position:absolute; top:88px; left:32px;
  color:var(--muted); font-size:12px; max-width:34em;
}

@media (max-width:520px){
  .wordmark{ top:22px; left:20px; }
  .file{ width:96px; }
  .post{ padding:22vh 20px 72px; }
}

@media (prefers-reduced-motion:reduce){
  body{ transition:none; }
  body.enter, body.leave{ opacity:1; filter:none; }
  .file .icon, .pop, .pop-media{ transition-duration:1ms; }
  .pop-media{ filter:none; transform:none; }
}