:root {
  color-scheme: light;
  --window: #ededf0; --card: #ffffff; --page: #fff; --label: rgba(0,0,0,.88); --sub: rgba(0,0,0,.52);
  --accent: #007aff; --accent-fill: #0071e3; --green: #34c759; --red: #ff3b30; --glass: rgba(250,250,252,.62); --glass-ctl: rgba(255,255,255,.66); --glass-lens-ctl: rgba(255,255,255,.46); --glass-ctl-solid: #fbfbfc;
  --sheen: rgba(255,255,255,.6); --edge: rgba(0,0,0,.08); --rim: rgba(255,255,255,.95);
  --sep: rgba(0,0,0,.08); --hover: rgba(0,0,0,.045); --sep-strong: rgba(0,0,0,.2); --head: rgba(0,0,0,.07);
  --elev-panel: 0 1px 1px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.1);
  --elev-ctl: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
  --thumb: rgba(118,118,128,.16);
  --motion-quick: 120ms; --motion-base: 240ms; --motion-page: 360ms; --motion-pop: calc(var(--motion-base) * 2 / 3);
  --ease-travel: cubic-bezier(.2,.8,.2,1); --ease-fade: ease-out;
  /* IBM Plex Sans KR and Monoplex KR are served from /fonts (fonts.css). Scripts they do not
     cover (kana, hanzi, Thai, Tamil) fall through to the device fonts after them. */
  --sans: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Noto Sans", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", "Noto Sans Tamil", "Noto Sans Thai", sans-serif;
  --mono: "Monoplex KR", ui-monospace, "SF Mono", Menlo, monospace;
}
/* IBM Plex Sans KR has no Vietnamese letters (ă, đ, ơ, ư and the stacked tone marks), so a
   Vietnamese word would switch font in the middle; Vietnamese pages and the "Tiếng Việt" label
   in the language menu use the device font. */
:lang(vi) { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Noto Sans", sans-serif; }
[lang="vi"] { font-family: var(--sans); }
@media all {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --window: #0c0c0e; --card: #1c1c1e; --page: #1c1c1e; --label: #fff; --sub: rgba(255,255,255,.55);
    --accent: #0a84ff; --accent-fill: #0071e3; --green: #30d158; --red: #ff453a; --glass: rgba(44,44,46,.56); --glass-ctl: rgba(58,58,60,.52); --glass-lens-ctl: rgba(40,40,42,.46); --glass-ctl-solid: #2a2a2c;
    --sheen: rgba(255,255,255,.07); --edge: rgba(255,255,255,.13); --rim: rgba(255,255,255,.16);
    --thumb: rgba(255,255,255,.14);
    --sep: rgba(255,255,255,.1); --sep-strong: rgba(255,255,255,.22); --head: rgba(255,255,255,.1); --hover: rgba(255,255,255,.06);
    --elev-panel: 0 12px 32px rgba(0,0,0,.4); --elev-ctl: 0 4px 12px rgba(0,0,0,.3);
    }
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
/* Phones turn text up by themselves when the screen is turned to landscape; keep the sizes we set. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--window); color: var(--label); font: 15px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); font-size: .93em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }


.shell { display: grid; grid-template-columns: 260px minmax(0, 1fr) 340px; gap: 12px; height: 100vh; padding: 12px; }
.pane { border-radius: 18px; min-height: 0; overflow: auto; }
.glass-panel {
  background: var(--card);
  border: .5px solid var(--edge); box-shadow: var(--elev-panel);
}
.glass {
  background: linear-gradient(180deg, var(--sheen), rgba(255,255,255,0) 60%), var(--glass-ctl);
  -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  border: .5px solid var(--edge); box-shadow: inset 0 1px 0 var(--rim), var(--elev-ctl);
}
.ctl { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; color: var(--label); }
h1 { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 13px; font-weight: 600; color: var(--sub); margin: 0 0 8px; }
h2.gap { margin-top: 28px; }
.plain { list-style: none; padding: 0; }
.plain li { padding: 3px 0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.side { display: flex; flex-direction: column; padding: 16px 12px 12px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--label); font-size: 18px; font-weight: 650; padding: 4px 8px 20px; }
.brand:hover { text-decoration: none; }
.logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 19px; }
.side h2 { padding: 0 12px; }
.nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px; color: var(--label); font-size: 16px; }
.nav a:hover { background: var(--hover); text-decoration: none; }
.nav a.on { background: var(--hover); font-weight: 600; }
.nav a svg { color: var(--accent); }
.side-foot { margin-top: auto; }

.files { display: flex; flex-direction: column; overflow: hidden; }
.bar { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 28px 12px; }
.up { color: var(--sub); }
.fhead, .file { display: grid; grid-template-columns: 20px minmax(0, 1fr) 110px 80px; gap: 14px; align-items: center; padding: 0 28px; }
.fhead { height: 32px; font-size: 12px; font-weight: 600; color: var(--sub); border-bottom: .5px solid var(--sep); }
.fhead span:nth-child(3), .fhead span:nth-child(4), .fd, .fs { text-align: right; }
.flist { overflow: auto; flex: 1; }
.file { height: 44px; color: var(--label); font-size: 15px; box-shadow: 0 .5px 0 var(--sep); }
.file:hover { background: var(--hover); text-decoration: none; }
.file svg { color: var(--accent); }
.file:not([href$="/"]) svg { color: var(--sub); }
.fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd, .fs { color: var(--sub); font-size: 14px; font-variant-numeric: tabular-nums; }

.detail { padding: 20px 24px; }
dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: .5px solid var(--sep); }
dl > div:first-child { border-top: 0; }
dt { color: var(--sub); }
dd { text-align: right; font-weight: 550; }

@media (max-width: 1000px) {
  .shell { display: flex; flex-direction: column; height: auto; }
  .pane { overflow: visible; }
  .flist { overflow: visible; }
  .fhead, .file { grid-template-columns: 20px minmax(0, 1fr) 90px; }
  .fhead span:nth-child(4), .fs { display: none; }
}

/* Home: content kept inside 1200px so the sides stay free on a desktop, as on KAIST. */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px 48px; }
.top { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 72px; }
.top .brand { padding: 0; white-space: nowrap; font-size: 28px; letter-spacing: -.025em; gap: 8px; align-items: baseline; }
.brand .b { font-weight: 300; color: var(--sub); }
.brand .a { font-weight: 750; }
.tools { display: flex; align-items: center; gap: 10px; }
.seg { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 38px; padding: 0 2px; border-radius: 999px; }
.seg button { position: relative; z-index: 1; width: 36px; height: 33px; display: grid; place-items: center; border: 0; background: transparent; color: var(--sub); border-radius: 999px; cursor: pointer; transition: color var(--motion-quick) var(--ease-fade); touch-action: none; }
.seg button[aria-checked="true"] { color: var(--label); }
.seg button:focus-visible { outline: 2px solid var(--accent); }
.seg svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* The lens (SaltyMail theme.css): the pill under the labels at rest and the glass lens over them while
   held or moving. theme.js drives both layers every frame (springs): their size, squash, opacity, the
   glass's shadow and the filter's displacement. Nothing here transitions them. */
.lens-thumb, .lens-glass { position: absolute; top: 0; left: 0; border-radius: 999px; pointer-events: none; transform-origin: 0 0; }
.lens-thumb { z-index: 0; background: var(--thumb); }
.lens-glass { z-index: 2; display: none;
  background: linear-gradient(180deg, var(--sheen), rgba(255,255,255,0) 60%), var(--glass-ctl);
  -webkit-backdrop-filter: blur(2px) saturate(1.8); backdrop-filter: blur(2px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--rim), 0 0 0 .5px var(--edge), var(--elev-ctl); }
@media (prefers-reduced-transparency: no-preference) {
  :root[data-refraction="on"] .lens-glass {
    background: linear-gradient(180deg, var(--sheen), rgba(255,255,255,0) 60%), var(--glass-lens-ctl);
    backdrop-filter: var(--lens-thumb-filter);
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) { .lens-glass { display: none !important; } .lens-thumb { opacity: 1 !important; } }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.pane { overflow: visible; }
.col { display: flex; flex-direction: column; gap: 16px; }
.box { padding: 22px 24px 24px; }
.code { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--hover); font-size: 14px; line-height: 1.7; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.015em; }

.mirrors { padding: 28px 32px 16px; }
.stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 28px; }
.stat span { display: block; color: var(--sub); font-size: 15px; }
.stat b { display: block; font-size: 30px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.tr { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr 72px; gap: 16px; align-items: center; min-height: 62px; font-size: 17px; position: relative; }
.tr::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: .5px; background: var(--sep); }
.tr:last-child::after { display: none; }
.th { min-height: 44px; font-size: 15px; font-weight: 600; color: var(--sub); }
.tr b { font-weight: 600; }
.tr .sub { color: var(--sub); font-size: 15px; }
.tr a { font-weight: 600; text-align: right; }
.st { display: inline-flex; align-items: center; gap: 8px; }
.st-icon:empty { display: none; }
.st svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.st.ok svg { color: var(--green); }
.st.sync svg { color: var(--accent); animation: st-spin .9s linear infinite; }
.st.fail svg { color: var(--red); }
@keyframes st-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .st.sync svg { animation: none; } }
@media (max-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .tr { grid-template-columns: 1fr auto; }
  .tr .sub, .th span:nth-child(2) { display: none; }
  .tr .st, .th span:nth-child(3) { display: none; }
  .stat b { font-size: 24px; }
}

.left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.doc { padding: 28px 32px 32px; }
.dh { font-size: 22px; font-weight: 700; color: var(--label); margin: 0 0 14px; letter-spacing: -.01em; }
.dh.gap { margin-top: 32px; }
.doc p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.note { margin: 0 0 14px; color: var(--sub); }
.btn { text-decoration: none; font-weight: 600; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.sp-bar { height: 10px; border-radius: 5px; background: var(--head); overflow: hidden; margin: 6px 0 4px; }
.sp-bar i { display: block; height: 100%; width: 0; background: var(--accent-fill); border-radius: 5px; transition: width 160ms linear; }
/* Speed test states: the old state fades out, the new one rises in, the result rows follow one by one. */
@keyframes sp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sp-bar { from { opacity: 0; transform: scaleX(.96); } to { opacity: 1; transform: none; } }
#sp-before, #sp-run, #sp-done, #sp-err { animation: sp-in var(--motion-base) var(--ease-travel) both; }
#sp-run .sp-bar { animation: sp-bar var(--motion-base) var(--ease-travel) both; transform-origin: left; }
#sp-done dl > div { animation: sp-in var(--motion-base) var(--ease-travel) both; }
#sp-done dl > div:nth-child(2) { animation-delay: 60ms; }
#sp-done dl > div:nth-child(3) { animation-delay: 120ms; }
#sp-done .again { animation: sp-in var(--motion-base) var(--ease-travel) 180ms both; }
.sp-out { opacity: 0; transform: translateY(-4px); transition: opacity var(--motion-quick) var(--ease-fade), transform var(--motion-quick) var(--ease-fade); }
@media (prefers-reduced-motion: reduce) {
  #sp-before, #sp-run, #sp-done, #sp-err, #sp-run .sp-bar, #sp-done dl > div, #sp-done .again { animation: none; }
  .sp-bar i, .sp-out { transition: none; }
}
#sp-done dl { margin-bottom: 14px; }
.note.bad { color: var(--red); }

/* Motion: SaltyMail's durations and easing. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pane { animation: rise var(--motion-page) var(--ease-travel) both; }
.doc { animation-delay: 0ms; }
.mirrors { animation-delay: 70ms; }
.col > .box:nth-child(1) { animation-delay: 40ms; }
.col > .box:nth-child(2) { animation-delay: 90ms; }
.col > .box:nth-child(3) { animation-delay: 140ms; }
.top { animation: rise var(--motion-page) var(--ease-travel) both; }
a { transition: color var(--motion-quick) var(--ease-fade), opacity var(--motion-quick) var(--ease-fade); }
a:hover { opacity: .75; text-decoration: none; }
.ctl, .glass { transition: scale var(--motion-quick) var(--ease-travel), background-color var(--motion-quick) var(--ease-fade); }
.ctl:active, .seg button:active { scale: .97; }
.tr { margin: 0 -12px; padding: 0 12px; border-radius: 10px; transition: background-color var(--motion-quick) var(--ease-fade); }
.tr:not(.th):hover { background: var(--hover); }
@media (prefers-reduced-motion: reduce) {
  .pane, .top { animation: none; }
  .ctl, .glass, .seg button, a, .tr { transition: none; }
  .ctl:active, .seg button:active { scale: none; }
}

/* The theme change is a cross-fade of the page. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--motion-base); animation-timing-function: var(--ease-fade); }
/* The lens bends what is under it; a blur on the control itself would hide the control's fill from it. */
.seg { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-ctl-solid); }
/* While the lens is up, the control's own outline would show through it. */
.seg[data-lens] { border-color: transparent; box-shadow: var(--elev-ctl); }
/* Narrow screens: the header may wrap, and the longer English title is set smaller. */
@media (max-width: 640px) {
  .top { flex-wrap: wrap; height: auto; padding: 12px 0; gap: 10px 12px; }
  html:not([lang="ko"]) .top .brand { font-size: 22px; }
}

/* Mobile settings: a floating glass button (bottom right) and the sheet it opens. */
.fab, .sheet { display: none; }
@media (max-width: 640px) {
  .tools { display: none; }
  .top { height: 64px; padding: 0; }
  .wrap { padding-bottom: 96px; }
  .fab { display: grid; place-items: center; position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 52px; height: 52px; padding: 0; border-radius: 999px; color: var(--label); cursor: pointer; font: inherit; }
  .fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .fab:active { scale: .94; }
  .sheet { display: block; position: fixed; z-index: 29; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); width: min(340px, calc(100vw - 32px)); padding: 20px; border-radius: 22px; transform-origin: bottom right; opacity: 0; transform: scale(.92) translateY(10px); pointer-events: none; visibility: hidden;
    transition: opacity var(--motion-base) var(--ease-fade), transform var(--motion-base) var(--ease-travel), visibility 0s linear var(--motion-base); }
  .sheet.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .sheet h2 { margin-bottom: 10px; }
  .tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .tcard { display: grid; gap: 8px; justify-items: center; padding: 0; border: 0; background: none; color: var(--label); font: inherit; font-size: 14px; cursor: pointer; }
  .tcard[aria-checked="true"] { font-weight: 600; }
  .tprev { width: 100%; aspect-ratio: 3 / 2; border-radius: 10px; border: 2px solid transparent; box-shadow: 0 0 0 .5px var(--edge); }
  .tcard[aria-checked="true"] .tprev { border-color: var(--accent); }
  .tcard:focus-visible .tprev { outline: 2px solid var(--accent); outline-offset: 2px; }
  .p-light { background: linear-gradient(#fff, #fff) 38% 14% / 52% 72% no-repeat, linear-gradient(#e6e6eb, #e6e6eb) 8% 14% / 24% 72% no-repeat, #d9d9de; }
  .p-dark { background: linear-gradient(#1c1c1e, #1c1c1e) 38% 14% / 52% 72% no-repeat, linear-gradient(#2c2c2e, #2c2c2e) 8% 14% / 24% 72% no-repeat, #0c0c0e; }
  .p-system { background: linear-gradient(90deg, #fff 0 50%, #1c1c1e 50% 100%) 38% 14% / 52% 72% no-repeat, linear-gradient(90deg, #e6e6eb 0 50%, #0c0c0e 50% 100%); }
  .langslot .lang { display: block; width: 100%; }
  .langslot .lang-btn { width: 100%; }
  .langslot }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } .fab:active { scale: none; } }


/* <language-select>: the trigger is a glass capsule; the open list is SaltyMail's menu.
   Trigger and list move together: pressing dips the trigger, its chevron turns, the list grows out of
   the trigger's edge (a clip that opens with a scale from that corner), and the rows follow one by one. */
.lang { position: relative; display: inline-block; }
.lang-btn { gap: 8px; padding: 0 14px 0 12px; font: inherit; cursor: pointer; }
.lang-btn:focus-visible { outline: 2px solid var(--accent); }
.lang-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lang-btn .globe { color: var(--sub); }
.lang-btn .chev { width: 14px; height: 14px; color: var(--sub); margin-left: 2px; transition: transform var(--motion-base) var(--ease-travel); }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-btn[aria-expanded="true"] { scale: .97; box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 .5px var(--edge), 0 1px 2px rgba(0,0,0,.05); }
.lang-value { flex: 1; text-align: left; white-space: nowrap; }
.lang-menu { display: none; position: absolute; z-index: 40; box-sizing: border-box; min-width: max(100%, 200px); width: max-content; overflow-y: auto; padding: 4px; border-radius: 14px; outline: 0; color: var(--label);
  background: var(--card);
  border: .5px solid var(--edge); box-shadow: var(--elev-panel); }
.lang-menu[data-side="bottom"] { top: calc(100% + 8px); }
.lang-menu[data-side="top"] { bottom: calc(100% + 8px); }
.lang-menu[data-align="end"] { right: 0; }
.lang-menu[data-align="start"] { left: 0; }
.lang-menu[data-side="bottom"][data-align="end"] { transform-origin: top right; }
.lang-menu[data-side="bottom"][data-align="start"] { transform-origin: top left; }
.lang-menu[data-side="top"][data-align="end"] { transform-origin: bottom right; }
.lang-menu[data-side="top"][data-align="start"] { transform-origin: bottom left; }
.lang-menu[data-state="open"], .lang-menu[data-state="closing"] { display: block; }
.lang-menu[data-state="open"][data-side="bottom"] { animation: lang-open-down var(--motion-base) var(--ease-travel); }
.lang-menu[data-state="open"][data-side="top"] { animation: lang-open-up var(--motion-base) var(--ease-travel); }
.lang-menu[data-state="closing"] { pointer-events: none; animation: lang-close var(--motion-quick) var(--ease-fade) forwards; }
.lang-menu[data-state="open"] .lang-item { animation: lang-row var(--motion-base) var(--ease-travel) both; animation-delay: calc(var(--i, 0) * 32ms + 50ms); }
.lang-item { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px; border-radius: 10px; font-size: 15px; cursor: pointer; user-select: none; white-space: nowrap; }
.lang-item[data-highlighted] { background: var(--accent-fill); color: #fff; }
.lang-tick { display: grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--accent); visibility: hidden; }
.lang-tick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lang-item[aria-selected="true"] .lang-tick { visibility: visible; }
.lang-item[data-highlighted] .lang-tick { color: #fff; }
@keyframes lang-open-down { from { opacity: 0; transform: scale(.55); clip-path: inset(0 0 72% 0 round 14px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); } }
@keyframes lang-open-up { from { opacity: 0; transform: scale(.55); clip-path: inset(72% 0 0 0 round 14px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); } }
@keyframes lang-close { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.9); } }
@keyframes lang-row { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lang-menu[data-state="open"], .lang-menu[data-state="closing"], .lang-menu[data-state="open"] .lang-item { animation: none; }
  .lang-btn .chev { transition: none; }
  .lang-btn[aria-expanded="true"] { scale: none; }
}

/* The directory listing (directory.html), laid out as KAIST's: a title, then File Name / File Size /
   Date with the sort arrows, the parent first, striped rows. */
.dir { padding: 20px 24px 24px; }
.dir-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; overflow-wrap: anywhere; }
.crumbs { font-family: var(--mono); font-weight: 600; font-size: .92em; }
.crumbs a { color: var(--accent); }
.dir-wrap { border: 1px solid var(--sep-strong); border-radius: 10px; overflow: hidden; }
.dir-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.dir-table .k-size { width: 120px; }
.dir-table .k-date { width: 150px; }
.dir-table th { text-align: left; font-weight: 600; padding: 6px 12px; background: var(--head); border-bottom: 1px solid var(--sep-strong); white-space: nowrap; }
.dir-table td { padding: 5px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dir-table tbody tr:nth-child(even) { background: var(--hover); }
.dir-table .c-size, .dir-table .c-date { color: var(--sub); }
.dir-table .c-name a { color: var(--accent); }
.dir-state { text-align: center; color: var(--sub); padding: 22px 12px; }
.sort-l, .sort-d { font: inherit; color: inherit; background: none; border: 0; padding: 1px 3px; cursor: pointer; border-radius: 6px; transition: color var(--motion-quick) var(--ease-fade); }
.sort-d { display: inline-grid; place-items: center; vertical-align: middle; }
.sort-d svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sort-l:hover, .sort-d:hover { color: var(--accent); }
.sort-l:focus-visible, .sort-d:focus-visible { outline: 2px solid var(--accent); }
.dir-table th[aria-sort="ascending"] .sort-l, .dir-table th[aria-sort="descending"] .sort-d { color: var(--accent); }
@media (max-width: 640px) {
  .dir { padding: 16px 12px 18px; }
  .dir-title { font-size: 17px; }
  .dir-table { font-size: 13px; }
  .dir-table th, .dir-table td { padding: 6px 8px; }
  .dir-table .k-size, .dir-table th.size, .dir-table td.c-size { display: none; }
  .dir-table .k-date { width: 136px; }
}

/* saltyming.net page layout. Tokens override the mirror's so the copied glass controls pick them up.
   Every colour is from Anthropic's palette (ivory, slate and cloud greys, olive, the error red, the
   focus blue): the glass of the controls is ivory or warm slate instead of the mirror's cool greys,
   and their shadows and edges are tinted with the slate ink. --menu-hi is a highlighted menu row and
   --select the border of a chosen preview card. */
:root { --window: #faf9f5; --card: #f0eee6; --page: #faf9f5; --label: #141413; --sub: #5e5d59; --accent: #2c84db; --accent-fill: #2c84db;
  --sep: #e8e6dc; --hover: rgba(20,20,19,.05); --sep-strong: #d1cfc5; --head: #e8e6dc;
  --glass: rgba(250,249,245,.62); --glass-ctl: rgba(250,249,245,.72); --glass-lens-ctl: rgba(250,249,245,.46); --glass-ctl-solid: #faf9f5;
  --sheen: rgba(250,249,245,.6); --rim: rgba(250,249,245,.95); --edge: rgba(25,25,25,.1); --thumb: #e8e6dc;
  --elev-panel: 0 1px 1px rgba(20,20,19,.04), 0 12px 32px rgba(20,20,19,.08);
  --elev-ctl: 0 1px 2px rgba(20,20,19,.05), 0 4px 12px rgba(20,20,19,.05);
  --green: #788c5d; --red: #bf4d43; --menu-hi: #dedcd1; --select: #141413;
  --serif: ui-serif, "Iowan Old Style", "Apple SD Gothic Neo", Georgia, serif; }
:root[data-theme="dark"] { --window: #141413; --card: #1f1e1d; --page: #141413; --label: #faf9f5; --sub: #b0aea5; --accent: #6a9bcc; --accent-fill: #6a9bcc;
  --sep: #30302e; --hover: rgba(250,249,245,.07); --sep-strong: #3d3d3a; --head: #30302e;
  --glass: rgba(31,30,29,.56); --glass-ctl: rgba(48,48,46,.6); --glass-lens-ctl: rgba(38,38,36,.46); --glass-ctl-solid: #1f1e1d;
  --sheen: rgba(250,249,245,.06); --rim: rgba(250,249,245,.12); --edge: rgba(250,249,245,.12); --thumb: #3d3d3a;
  --elev-panel: 0 12px 32px rgba(0,0,0,.4); --elev-ctl: 0 4px 12px rgba(0,0,0,.3);
  --green: #788c5d; --red: #bf4d43; --menu-hi: #30302e; --select: #faf9f5; }
/* The language menu and the theme previews follow the redesigned mirror (mirror-web, branch
   redesign), so both sites draw them alike. The menu is the page colour, which stands apart from
   the cards it opens over; a highlighted row takes a warm grey and the text and tick keep the ink
   colour, where the copied menu filled it with the accent and turned the text white. */
.lang-menu { background: var(--page); }
.lang-item[data-highlighted] { background: var(--menu-hi); color: var(--label); }
.lang-tick, .lang-item[data-highlighted] .lang-tick { color: var(--label); }
.tcard[aria-checked="true"] .tprev { border-color: var(--select); }
/* Each preview is the page drawn small: a wide card on the left (8%-62%) and a narrow one on the
   right (66%-92%) on the page colour. A background position in % places a layer by the space left
   beside it, so 17.39% and 89.19% put those edges where the percentages say. "System" is the light
   preview and the dark one cut down the middle in a single line. */
.p-light { background: linear-gradient(#e8e6dc, #e8e6dc) 17.39% 50% / 54% 72% no-repeat, linear-gradient(#e8e6dc, #e8e6dc) 89.19% 50% / 26% 72% no-repeat, #faf9f5; }
.p-dark { background: linear-gradient(#30302e, #30302e) 17.39% 50% / 54% 72% no-repeat, linear-gradient(#30302e, #30302e) 89.19% 50% / 26% 72% no-repeat, #141413; }
.p-system { background: linear-gradient(90deg, #e8e6dc 0 77.78%, #30302e 77.78% 100%) 17.39% 50% / 54% 72% no-repeat, linear-gradient(#30302e, #30302e) 89.19% 50% / 26% 72% no-repeat, linear-gradient(90deg, #faf9f5 0 50%, #141413 50% 100%); }
html, body { height: auto; }
.wrap { max-width: 1280px; padding: 0 40px 0; }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; }
.nav .pills { display: flex; gap: 8px; }
.pills a { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--label); }
.pills a:hover { text-decoration: none; opacity: 1; background: var(--hover); }
.pills a[aria-current] { background: var(--sep); }
.nav .brand { padding: 0; font-size: 26px; letter-spacing: -.025em; color: var(--label); }
.nav .brand .a { font-weight: 750; }
.nav .tools { justify-content: flex-end; }
.intro { padding: 56px 0 56px; font-size: 40px; line-height: 1.28; letter-spacing: -.02em; font-weight: 650; color: var(--label); max-width: 1100px; }
.intro span { font-family: var(--serif); font-weight: 400; color: var(--sub); }
.feature { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 80px 0 0; border-radius: 28px; overflow: hidden; background: var(--card); color: var(--label); }
.feature:hover { opacity: 1; text-decoration: none; }
.feature .kind { font-size: 15px; color: var(--sub); }
.feature h1 { font-size: 64px; line-height: 1.06; font-weight: 700; letter-spacing: -.04em; margin: 14px 0 0; max-width: 14em; text-wrap: balance; padding: 0 40px; }
.feature .when { margin-top: 16px; font-size: 15px; color: var(--sub); order: 3; }
.feature img { order: 4; display: block; width: calc(100% - 160px); margin-top: 56px; border-radius: 16px 16px 0 0; box-shadow: 0 -1px 0 var(--sep), 0 0 40px rgba(0,0,0,.08); object-fit: cover; object-position: top center; aspect-ratio: 2400 / 1000; }
.nav + .feature { margin-top: 32px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 72px; padding-top: 18px; border-top: .5px solid var(--sep-strong); font-size: 14px; }
.sec-head b { font-weight: 650; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 28px; }
.item { display: block; padding: 0 0 40px; color: var(--label); }
.item:hover { opacity: 1; text-decoration: none; }
.item .meta { font-size: 14px; color: var(--sub); margin-bottom: 14px; }
.item .logo { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(200px, 27vw, 326px); overflow: hidden; border-radius: 8px; background: var(--card); font-size: 64px; color: var(--label); font-weight: 700; letter-spacing: -.04em; color: var(--label); }
.item .logo .brand { padding: 0; font-size: 64px; letter-spacing: -.025em; gap: 14px; align-items: baseline; }
.item img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--card); }
.item h3 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 18px 0 0; }
.item:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.item p { font-size: 16px; line-height: 1.55; color: var(--sub); margin: 12px 0 0; max-width: 34em; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 28px 32px; border-radius: 28px; background: var(--card); color: var(--label); }
.card:hover { opacity: 1; text-decoration: none; }
.card b { font-size: 36px; font-weight: 700; letter-spacing: -.03em; }
.card span { font-size: 17px; color: var(--sub); margin-top: 6px; }
.card:hover span { color: var(--label); }
.foot { display: flex; justify-content: space-between; gap: 32px; margin-top: 96px; padding: 20px 0 48px; border-top: .5px solid var(--sep-strong); font-size: 14px; color: var(--sub); }
.foot a { color: var(--sub); margin-left: 20px; }
.foot a:hover { color: var(--label); opacity: 1; }
/* article */
.art { max-width: 720px; margin: 0 auto; padding: 72px 0 40px; }
.art .kind { display: block; font-size: 15px; color: var(--sub); }
.art h1 { font-size: 52px; line-height: 1.1; font-weight: 700; letter-spacing: -.035em; margin: 14px 0 0; }
.art .dek { font-size: 24px; line-height: 1.45; color: var(--sub); margin: 24px 0 48px; }
.art p { font-size: 18px; line-height: 1.75; margin: 0 0 1.3em; }
.art h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--label); margin: 2em 0 .5em; }
.art .mt { margin-top: 48px; padding-top: 16px; border-top: .5px solid var(--sep); font-size: 14px; color: var(--sub); }
/* Links in an article (its addresses, src/markdown/autolink.mjs, and the translation notice) keep
   the text colour and are underlined. */
.art a { color: var(--label); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.art figure { margin: 40px 0; } .art figure img { display: block; width: 100%; border-radius: 12px; background: var(--card); }
.art p:has(> img) { margin: 40px 0; } .art p > img { display: block; width: 100%; border-radius: 12px; background: var(--card); }
.art ul { margin: 0; padding: 0; list-style: none; border-top: .5px solid var(--sep); } .art ul li { padding: 12px 0; border-bottom: .5px solid var(--sep); font-size: 17px; line-height: 1.5; }
/* The feature's screenshot grows up out of its card when it lifts (motion.css, [data-lift]). */
.feature img { transform-origin: 50% 100%; }
html:lang(ko) { word-break: keep-all; }
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .nav { grid-template-columns: auto 1fr; height: 64px; }
  .nav .pills { display: none; }
  .intro { font-size: 28px; padding: 24px 0 32px; }
  .feature { padding: 36px 20px 0; }
  .feature h1 { font-size: 38px; line-height: 1.12; padding: 0; }
  .feature img { width: 100%; margin-top: 28px; }
  .item .logo { font-size: 40px; }
  .item .logo .brand { font-size: 40px; gap: 10px; }
  .cols { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .art h1 { font-size: 34px; }
}