/* milan/ — milan00101111.com
   one stylesheet, no frameworks. tokens first, then layout, then components. */

@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #1C1C1C; --ink: #E8E8E8; --muted: #9A9A9A; --num: #8A8A8A; --guide: #5A5A5A; --faint: #7A7A7A;
  --line: #2A2A2A; --accent: #FF9447; --video: #7FB4FF; --win: #141414; --win-line: #333333;
  --scrim: rgba(12, 12, 12, 0.70); --flash: rgba(255, 148, 71, 0.20); --hover: rgba(255, 255, 255, 0.04);
  --fs: 14px; --lh: 28px; --gutter: 28px;
  --pane: 100vw; --head: calc(44px + max(16px, env(safe-area-inset-top)));
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F3EF; --ink: #1A1A1A; --muted: #5E5E5E; --num: #6B6B6B; --guide: #B0B0B0; --faint: #767676;
  --line: #DDDCD6; --accent: #A8440A; --video: #1F5FBF; --win: #FFFFFF; --win-line: #D5D4CE;
  --scrim: rgba(244, 243, 239, 0.72); --flash: rgba(168, 68, 10, 0.14); --hover: rgba(0, 0, 0, 0.04);
}
@media (min-width: 960px) {
  :root { --fs: 15px; --lh: 28px; --pane: min(600px, 42vw); --head: calc(44px + 24px); }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body {
  font: 400 var(--fs) / var(--lh) var(--mono);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color 300ms ease, color 300ms ease;
  overflow: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--bg); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- no-js / crawler fallback ---------- */
.pre { padding: max(24px, env(safe-area-inset-top)) 20px 48px; max-width: min(100%, 80ch); height: 100%; overflow-y: auto; overflow-wrap: anywhere; }
.pre h1 { font-size: inherit; margin: 0; }
.pre h1 .s, .pre .dir { color: var(--accent); }
.pre p, .pre ul { margin: 0; }
.pre ul { list-style: none; padding-left: 1.5ch; margin-left: 0.5ch; border-left: 1px solid var(--line); }
.pre h2 { font-size: inherit; margin: 0; }
.pre hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.pre .c { color: var(--muted); white-space: normal; }
.js .pre { display: none; }
.app { display: none; }
.js .app { display: grid; }

/* ---------- app shell ---------- */
.app {
  position: relative; height: 100vh; height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr); grid-template-columns: var(--pane) 1fr;
}
.head {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  height: var(--head); padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 calc(34px + env(safe-area-inset-left));
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.head .root { transition: opacity 300ms ease; }
.wait-head .head .root { opacity: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  padding: 0 6px; margin: 0; border: 0; background: none; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; border-radius: 8px;
}
.btn:focus-visible, .row:focus-visible, .mail:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.btn[hidden] { display: none; }
.head .btn { color: var(--muted); }
.head .btn:hover { color: var(--ink); }

/* ---------- the tree ---------- */
.tree {
  grid-column: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 12px max(10px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
  counter-reset: ln; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
@media (min-width: 960px) { .tree { border-right: 1px solid var(--line); } }
.row {
  display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); align-items: start;
  width: 100%; min-height: var(--lh); margin: 0; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none;
  transition: background-color 900ms ease;
}
.row::before { counter-increment: ln; content: counter(ln); text-align: right; padding-right: 10px; color: var(--num); }
button.row, a.row { cursor: pointer; }
@media (hover: hover) { button.row:hover, a.row:hover { background: var(--hover); transition-duration: 120ms; } }
.row .t { display: flex; min-width: 0; white-space: nowrap; overflow: hidden; }
.row.wrap .t .n { white-space: normal; overflow-wrap: anywhere; }
.g { white-space: pre; color: var(--guide); flex: none; background-repeat: no-repeat; }
.dir { color: var(--accent); font-weight: 700; }
.c { color: var(--muted); white-space: pre; }
.xv { color: var(--video); }
.xi { color: var(--muted); }
.desc { color: var(--muted); }
.note, .empty, .toggle { color: var(--faint); }
.lnk .n { color: var(--ink); }
.lnk .t::after { content: " ↗"; color: var(--muted); white-space: pre; }
.head-dir { color: var(--accent); font-weight: 700; }
.row.flash { background: var(--flash); transition-duration: 120ms; }
.row.wait { visibility: hidden; }
.row.typing { animation: type var(--d, 190ms) steps(14, end) var(--delay, 0ms) both; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* title line + intro */
.title { font-weight: 700; }
.title h1 { margin: 0; font: inherit; white-space: nowrap; overflow: hidden; min-width: 0; }
.title .btn { min-height: var(--lh); padding: 0; justify-content: flex-start; font-weight: 700; transition: transform 180ms ease-out; }
.b { display: inline-block; transform-origin: left center; transition: transform 160ms ease-out, color 320ms ease, letter-spacing 300ms ease-in, margin 300ms ease-in, opacity 300ms ease-in; }
.b.gap { margin-right: 1ch; }
.b.hit { transform: scale(1.35); color: var(--accent); transition: none; }
.b.squeeze { letter-spacing: -0.6em; margin-right: 0; opacity: 0.1; }
.b.bin { color: var(--muted); }
.b.slash { color: var(--accent); }
.b.pop { transform: scale(1.6); transition: none; }
.cursor { display: inline-block; width: 0.1em; min-width: 2px; height: 0.95em; margin-left: 0.08em; background: var(--accent); vertical-align: -0.12em; }
.cursor.off { opacity: 0; }

/* ---------- viewer ---------- */
.scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity 260ms ease; }
.scrim.on { opacity: 1; }
.dialog, .pane-empty {
  position: fixed; z-index: 31;
  top: calc(14px + max(16px, env(safe-area-inset-top)) + 28px);
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 12px));
}
.dialog {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--win); border: 1px solid var(--win-line); border-radius: 12px;
  transform-origin: 50% var(--oy, 50%); transform: scale(0.94, 0.03); opacity: 0;
  transition: transform 280ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease;
}
.dialog.on { transform: none; opacity: 1; }
.dialog[hidden], .scrim[hidden], .pane-empty[hidden] { display: none; }
.pane-empty { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--win-line); border-radius: 12px; color: var(--muted); }
@media (min-width: 960px) {
  .scrim { display: none; }
  .dialog, .pane-empty { top: calc(var(--head) + 24px); left: calc(var(--pane) + 24px); right: 24px; bottom: 24px; }
}
.bar { flex: none; display: flex; align-items: center; gap: 2px; height: 44px; padding-left: 14px; border-bottom: 1px solid var(--win-line); }
.bar .path { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.bar .path .d { color: var(--muted); }
.bar .btn.link { color: var(--muted); padding: 0 8px; }
.bar .btn.link.ok { color: var(--accent); }
.stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; touch-action: pan-y; }
.stage.text { background: var(--win); align-items: stretch; justify-content: stretch; }
.stage img, .stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.stage img { -webkit-user-drag: none; user-select: none; }
.stage img.in-r { animation: in-r 300ms cubic-bezier(.2, .8, .2, 1); }
.stage img.in-l { animation: in-l 300ms cubic-bezier(.2, .8, .2, 1); }
@keyframes in-r { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes in-l { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
.decode { position: absolute; inset: 0; margin: 0; padding: 6px 8px; background: #000; color: var(--accent); font: inherit; word-break: break-all; white-space: pre-wrap; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 240ms ease; }
.stage.decoding .decode { opacity: 0.92; transition-duration: 0ms; }
.txt { position: relative; flex: 1 1 auto; padding: 16px; overflow-y: auto; counter-reset: tl; }
.tl { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); min-height: var(--lh); }
.tl::before { counter-increment: tl; content: counter(tl); text-align: right; padding-right: 10px; color: var(--num); }
.tl > span { white-space: pre-wrap; overflow-wrap: anywhere; }
.tl .k { color: var(--muted); }
.tl .err { color: var(--accent); }
.mail { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; min-height: var(--lh); }
.tl a { color: var(--ink); text-underline-offset: 3px; }
.who { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); font-weight: 700; cursor: pointer; text-decoration: underline dotted var(--muted); text-underline-offset: 4px; }
.foot { flex: none; display: flex; align-items: center; gap: 2px; height: 52px; padding: 0 4px calc(0px + env(safe-area-inset-bottom, 0px) * 0); border-top: 1px solid var(--win-line); }
.foot .count { white-space: pre; }
.foot .meta { flex: 1 1 auto; text-align: right; padding-right: 8px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.foot .snd { padding: 0 10px; color: var(--accent); }
.foot .snd.off { color: var(--muted); }
.foot .btn[disabled] { opacity: 0.35; cursor: default; }

/* ---------- peeks ---------- */
.peek { position: fixed; z-index: 40; width: 120px; border-radius: 8px; overflow: hidden; background: #000; border: 1px solid var(--win-line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); pointer-events: none; opacity: 0; transform: scale(0.96); transition: opacity 140ms ease, transform 140ms ease; }
.peek.on { opacity: 1; transform: none; }
.peek img { display: block; width: 100%; height: auto; }
.photo { position: absolute; z-index: 5; width: 140px; border-radius: 8px; overflow: hidden; border: 1px solid var(--win-line); background: #000; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; }
.photo.on { opacity: 1; transform: none; }
.photo img { display: block; width: 100%; height: auto; }

/* ---------- 404 ---------- */
.nf { height: 100vh; height: 100dvh; overflow-y: auto; padding: calc(max(16px, env(safe-area-inset-top)) + 24px) 20px 48px 6px; counter-reset: ln; }
.nf .row { cursor: default; }
.nf a.row { cursor: pointer; }
.nf .prompt { color: var(--accent); white-space: pre; }
.nf .t > span { white-space: pre-wrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }
}