@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Min Sans";
  src: url("fonts/minsans-ko.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}
@font-face {
  font-family: "Brand Kana";
  src: url("fonts/brandkana.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+30AF, U+30B9, U+30CB, U+30EA, U+30FC;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("fonts/notosansjp-ja.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrainsmono.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #151517;
  --bg-2: #1c1c1f;
  --desk: #2a2a30;
  --fg: #ededef;
  --fg-2: #9c9ca3;
  --fg-3: #6d6d75;
  --sep: rgba(255, 255, 255, 0.13);
  --sep-soft: rgba(255, 255, 255, 0.07);
  --panel: #303033;
  --barbg: #262629;
  --menu: #3a3a3d;
  --control: rgba(255, 255, 255, 0.10);
  --tile: rgba(255, 255, 255, 0.14);
  --accent: #0a84ff;
  --paper: #e9e9ec;
  --ink: rgba(0, 0, 0, 0.55);
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
                 "Apple SD Gothic Neo", "Hiragino Sans", sans-serif;
  --font: "Geist", "Min Sans", "Brand Kana", "Noto Sans JP",
          -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Apple SD Gothic Neo", "Malgun Gothic",
          "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo",
          sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --wide: 1000px;
  --ctl-h: 30px;
  --nav-h: 70px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff;
    --bg-2: #f5f5f7;
    --desk: #d8d9de;
    --fg: #1d1d1f;
    --fg-2: #6e6e73;
    --fg-3: #8e8e93;
    --sep: rgba(0, 0, 0, 0.13);
    --sep-soft: rgba(0, 0, 0, 0.07);
    --panel: #f4f4f6;
    --barbg: #ececef;
    --menu: #fbfbfd;
    --control: rgba(0, 0, 0, 0.07);
    --tile: rgba(0, 0, 0, 0.10);
    --accent: #007aff;
    --paper: #ffffff;
    --ink: rgba(0, 0, 0, 0.62);
  }
}

:root[data-theme="light"] {
  --bg: #ffffff;
    --bg-2: #f5f5f7;
    --desk: #d8d9de;
    --fg: #1d1d1f;
    --fg-2: #6e6e73;
    --fg-3: #8e8e93;
    --sep: rgba(0, 0, 0, 0.13);
    --sep-soft: rgba(0, 0, 0, 0.07);
    --panel: #f4f4f6;
    --barbg: #ececef;
    --menu: #fbfbfd;
    --control: rgba(0, 0, 0, 0.07);
    --tile: rgba(0, 0, 0, 0.10);
    --accent: #007aff;
    --paper: #ffffff;
    --ink: rgba(0, 0, 0, 0.62);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-sun { display: none; }
  :root:not([data-theme]) .theme-moon { display: block; }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

/* The sticky bar would otherwise cover whatever an in-page link jumps to. */
html { scroll-padding-top: calc(var(--nav-h) + 10px); }
@media (max-width: 720px) { html { scroll-padding-top: 118px; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.018em; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--fg-2);
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 60; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 8px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--sep-soft);
}

/* Translucency is progressive: a browser without backdrop-filter keeps the
   solid bar above rather than letting the page read through an unblurred
   pane. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar {
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--nav-h);
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 28px;
  font-size: 14px;
}

/* One height for the whole right-hand group, so the star widget, the coffee
   link, the language switch and the theme toggle sit on a single baseline in
   every language. */
.ghstar, .bmc, .lang, .theme { height: var(--ctl-h); flex: none; }

/* Narrow screens cannot fit the row, and the controls no longer squash to make
   room, so they wrap instead of pushing out a scrollbar. Every label in here is
   the same width in all three languages, so the wrapped header still cannot
   change height when the reader switches. */
@media (max-width: 720px) {
  .nav { height: auto; flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
}

/* Below this the two support links drop to their icons, which buys back enough
   room to keep the bar on one line down to phone widths. Both carry an
   aria-label, so the hidden text costs nothing to a screen reader. */
@media (max-width: 620px) {
  .ghstar > span, .bmc > span { display: none; }
  .ghstar, .bmc { padding: 0 10px; }
  .ghstar b { padding-left: 7px; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
}

.ghstar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--sep);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.ghstar:hover { color: var(--fg); border-color: var(--fg-3); }
.ghstar b {
  padding-left: 8px;
  margin-left: 1px;
  border-left: 1px solid var(--sep);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

/* Buy Me a Coffee's own yellow, on the same 30px shell as the star button so
   the brand colour is the only thing that separates them. The ink is the light
   theme's near-black in both themes, since the plate never changes. */
.bmc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #ffdd00;
  background: #ffdd00;
  color: #1d1d1f;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.bmc:hover { background: #ffe74d; border-color: #ffe74d; }

.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctl-h);
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--sep);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
}
.theme:hover { color: var(--fg); border-color: var(--fg-3); }
.theme-sun { display: block; }
.theme-moon { display: none; }
:root[data-theme="dark"] .theme-sun { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }
:root[data-theme="light"] .theme-sun { display: none; }
:root[data-theme="light"] .theme-moon { display: block; }

.intro {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 40px 28px 44px;
}

.intro h1 {
  margin: 0 0 18px;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.14;
  max-width: 21ch;
}

.intro p {
  margin: 0 0 26px;
  max-width: 58ch;
  color: var(--fg-2);
  font-size: 17px;
}

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn:hover { filter: brightness(1.08); }

.btn-secondary {
  background: var(--control);
  color: var(--fg);
  border-color: var(--sep);
}
.btn-secondary:hover { filter: none; border-color: var(--fg-3); }

.req { font-size: 13px; color: var(--fg-3); margin-left: 6px; }

.stage {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 20px 28px 72px;
}

.stage-tight { padding-top: 64px; }

.eyebrow {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.eyebrow:lang(ko), .eyebrow:lang(ja) { text-transform: none; letter-spacing: normal; font-size: 13px; }

.stage h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.6vw, 27px);
  max-width: 22ch;
}

.stage-lede { margin: 0 0 26px; max-width: 62ch; color: var(--fg-2); }

.footnote {
  margin: 16px 2px 0;
  max-width: 62em;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-3);
}

.stage-note {
  margin: 16px 2px 0;
  font-size: 13.5px;
  color: var(--fg-3);
  max-width: 62ch;
}

.desk {
  width: 940px;
  padding: 20px;
  margin: 36px 0 30px;
  border-radius: 22px;
  background: var(--desk);
  zoom: var(--z, 1);
}

.panel {
  width: 900px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
  border: 0.5px solid var(--sep);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
}


.panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid var(--sep-soft);
  position: relative;
}

.magnifier { color: var(--fg-3); flex: none; }

.search-value {
  font-size: 19px;
  white-space: pre;
}

.placeholder {
  font-size: 19px;
  color: var(--fg-3);
  margin-left: -10px;
}

.caret {
  width: 1px;
  height: 22px;
  background: var(--accent);
  margin-left: 1px;
  animation: blink 1.06s steps(2, start) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.sort {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-2);
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--control);
  white-space: nowrap;
}
.sort::after { content: " ⌄"; color: var(--fg-3); }

.gear { margin-left: auto; color: var(--fg-2); display: inline-flex; }
.sort:not([hidden]) + .gear { margin-left: 12px; }

.panel-body {
  padding: 0 0 16px;
  height: 541px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong, rgba(128,128,128,0.45)) transparent;
}
.panel-body::-webkit-scrollbar { width: 9px; }
.panel-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: rgba(128, 128, 128, 0.45);
}
.panel-body.locked { overflow: hidden; }

.day {
  height: 30px;
  display: flex;
  align-items: flex-end;
  padding: 0 20px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 180px);
  justify-content: space-between;
  row-gap: 12px;
  padding: 6px 18px 0;
}

.tile {
  position: relative;
  aspect-ratio: 180 / 124;
  border-radius: 8px;
  background: var(--tile);
  overflow: hidden;
}

.tile.selected { box-shadow: inset 0 0 0 3px var(--accent); }

.tile.dimmed { opacity: 0.26; }

.tile::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 3px;
  background-color: var(--paper);
  background-repeat: no-repeat;
}

[data-shot="browser"]::before {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(#9aa4b2, #9aa4b2),
    linear-gradient(#c4cbd6, #c4cbd6),
    linear-gradient(#c4cbd6, #c4cbd6),
    linear-gradient(#dfe3ea, #dfe3ea);
  background-size: 100% 17%, 46% 5%, 78% 6%, 62% 6%, 88% 22%;
  background-position: 0 0, 6% 34%, 6% 55%, 6% 70%, 6% 96%;
}

[data-shot="terminal"]::before {
  background-color: #16181d;
  background-image:
    linear-gradient(#57c98a, #57c98a),
    linear-gradient(#8ea0b8, #8ea0b8),
    linear-gradient(#57c98a, #57c98a),
    linear-gradient(#8ea0b8, #8ea0b8),
    linear-gradient(#8ea0b8, #8ea0b8);
  background-size: 34% 5%, 62% 5%, 26% 5%, 74% 5%, 48% 5%;
  background-position: 6% 14%, 6% 32%, 6% 50%, 6% 68%, 6% 86%;
}

[data-shot="chart"]::before {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-size: 38% 7%, 11% 34%, 11% 56%, 11% 44%, 11% 72%, 11% 28%;
  background-position: 8% 12%, 10% 88%, 30% 88%, 50% 88%, 70% 88%, 90% 88%;
}

[data-shot="chat"]::before {
  background-image:
    linear-gradient(#cbd2dc, #cbd2dc),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(#cbd2dc, #cbd2dc),
    linear-gradient(var(--accent), var(--accent));
  background-size: 52% 15%, 44% 15%, 38% 15%, 56% 15%;
  background-position: 5% 10%, 95% 36%, 5% 62%, 95% 90%;
}

[data-shot="code"]::before {
  background-color: #1b1d23;
  background-image:
    linear-gradient(#c678dd, #c678dd),
    linear-gradient(#61afef, #61afef),
    linear-gradient(#98c379, #98c379),
    linear-gradient(#61afef, #61afef),
    linear-gradient(#5c6370, #5c6370),
    linear-gradient(#98c379, #98c379);
  background-size: 30% 5%, 54% 5%, 42% 5%, 62% 5%, 26% 5%, 46% 5%;
  background-position: 8% 10%, 14% 27%, 14% 44%, 8% 61%, 14% 78%, 8% 95%;
}

[data-shot="receipt"]::before {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(#b9bfc9, #b9bfc9),
    linear-gradient(#b9bfc9, #b9bfc9),
    linear-gradient(#b9bfc9, #b9bfc9),
    linear-gradient(var(--ink), var(--ink));
  background-size: 34% 8%, 56% 4%, 56% 4%, 56% 4%, 26% 7%;
  background-position: 50% 12%, 50% 38%, 50% 52%, 50% 66%, 50% 90%;
}

[data-shot="map"]::before {
  background-color: #dfe6dd;
  background-image:
    linear-gradient(#b7c9b2, #b7c9b2),
    linear-gradient(#b7c9b2, #b7c9b2),
    linear-gradient(#f2f4f0, #f2f4f0),
    linear-gradient(#f2f4f0, #f2f4f0),
    linear-gradient(#e2544a, #e2544a);
  background-size: 40% 34%, 26% 26%, 100% 8%, 9% 100%, 9% 13%;
  background-position: 8% 14%, 88% 84%, 0 46%, 62% 0, 44% 40%;
}

[data-shot="photo"]::before {
  background-image:
    linear-gradient(160deg, #7f9cc4 0%, #b9a7c6 48%, #e2c3a8 100%);
  background-size: 100% 100%;
  background-position: 0 0;
}

[data-shot="doc"]::before {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(#c9cfd8, #c9cfd8),
    linear-gradient(#c9cfd8, #c9cfd8),
    linear-gradient(#c9cfd8, #c9cfd8),
    linear-gradient(#c9cfd8, #c9cfd8);
  background-size: 44% 7%, 84% 4%, 84% 4%, 76% 4%, 58% 4%;
  background-position: 8% 12%, 8% 40%, 8% 55%, 8% 70%, 8% 85%;
}
.scene-wrap { margin: 34px 0 0; }

.scene {
  position: relative;
  width: 900px;
  border-radius: 14px;
  background: var(--desk);
  border: 0.5px solid var(--sep);
  overflow: hidden;
  zoom: var(--z, 1);
  user-select: none;
}

.scene-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 26px;
  padding: 0 12px;
  background: var(--barbg);
  border-bottom: 0.5px solid var(--sep);
  font-size: 12px;
  color: var(--fg);
  position: relative;
  z-index: 3;
}

.scene-app { font-weight: 600; }
.scene-menu { color: var(--fg-2); }
.scene-gap { flex: 1; }
.scene-glyph { opacity: 0.7; flex: none; }
.scene-clock { font-variant-numeric: tabular-nums; }

.scene-desk { position: relative; height: 420px; }

.card {
  position: absolute;
  left: 46px;
  top: 40px;
  width: 300px;
  height: 196px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

.card-title {
  font-size: 12px;
  font-weight: 600;
  color: #3b3f46;
  margin-bottom: 10px;
}

.card-chart {
  height: 138px;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(#d6dae1, #d6dae1);
  background-size: 9% 42%, 9% 66%, 9% 51%, 9% 84%, 9% 38%, 9% 72%, 100% 1px;
  background-position: 4% 96%, 20% 96%, 36% 96%, 52% 96%, 68% 96%, 84% 96%, 0 100%;
}

.win {
  position: absolute;
  left: 486px;
  top: 96px;
  width: 372px;
  border-radius: 10px;
  background: var(--panel);
  border: 0.5px solid var(--sep);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.win-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  background: var(--barbg);
  border-bottom: 0.5px solid var(--sep);
}

.tl { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.tl-r { background: #ff5f57; }
.tl-y { background: #febc2e; }
.tl-g { background: #28c840; }

.win-title {
  margin-left: auto;
  margin-right: auto;
  padding-right: 40px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
}

.win-body { padding: 10px 14px 14px; }

.win-field {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--sep-soft);
}
.win-field b { min-width: 52px; flex: none; color: var(--fg-3); font-weight: 500; }
.win-field span { color: var(--fg-2); }

.win-drop {
  margin-top: 12px;
  min-height: 118px;
  padding: 12px;
  border-radius: 8px;
  border: 1.5px dashed transparent;
  font-size: 12.5px;
  color: var(--fg-2);
  transition: border-color 0.16s ease, background 0.16s ease;
}

.win-drop.over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.win-hint { display: block; margin-bottom: 10px; }

.attach {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: var(--control);
  border: 0.5px solid var(--sep);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.attach.shown { opacity: 1; transform: scale(1); }

.attach-thumb {
  width: 56px;
  height: 38px;
  flex: none;
  border-radius: 4px;
  background-color: var(--paper);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size: 9% 40%, 9% 64%, 9% 49%, 9% 82%, 9% 36%, 9% 70%;
  background-position: 6% 88%, 22% 88%, 38% 88%, 54% 88%, 70% 88%, 86% 88%;
}

.attach-meta { display: flex; flex-direction: column; min-width: 0; }
.attach-meta b {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attach-meta i { font-style: normal; font-size: 10.5px; color: var(--fg-3); }

.sel {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(120, 170, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.sel.on { opacity: 1; }

.sel-size {
  position: absolute;
  left: 17px;
  top: 13px;
  display: none;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  white-space: nowrap;
}

.flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.flash.fire { animation: shutter 0.22s ease-out; }

@keyframes shutter {
  0% { opacity: 0; }
  25% { opacity: 0.5; }
  100% { opacity: 0; }
}

.cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cursor.on { opacity: 1; }

.cur { position: absolute; display: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.cur-cross { left: -13px; top: -13px; }
.cur-arrow { left: -1px; top: -1px; }
.cursor[data-mode="cross"] .cur-cross { display: block; }
.cursor[data-mode="arrow"] .cur-arrow { display: block; }
.cursor.press .cur-arrow { transform: scale(0.88); }
.cursor.sizing .sel-size { display: block; }

.payload {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 108px;
  height: 72px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: var(--paper);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size: 9% 40%, 9% 64%, 9% 49%, 9% 82%, 9% 36%, 9% 70%;
  background-position: 6% 90%, 22% 90%, 38% 90%, 54% 90%, 70% 90%, 86% 90%;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: scale(0.4) rotate(-5deg);
  transform-origin: 0 0;
  transition: opacity 0.16s ease, transform 0.26s cubic-bezier(0.34, 1.35, 0.64, 1);
}
.payload.lift { opacity: 0.95; transform: scale(1) rotate(-3deg); }
.payload.drop { opacity: 0; transform: scale(0.5) rotate(0deg); }

.caption {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 9;
  padding: 11px 22px;
  border-radius: 999px;
  background: rgba(28, 28, 30, 0.88);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.caption.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.replay-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.scene.done .replay-layer { opacity: 1; pointer-events: auto; }

.replay-layer button {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 17px 34px;
  border-radius: 999px;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(28, 28, 30, 0.92);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  transition: transform 0.16s ease;
}
.replay-layer button:hover { transform: scale(1.05); }

.sk-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
}

.sk-ring, .sk-dot, .sk-ripple { position: absolute; border-radius: 50%; }

.sk-ring {
  width: 15px;
  height: 15px;
  border: 1.7px solid currentColor;
}

.sk-dot {
  width: 6.5px;
  height: 6.5px;
  background: currentColor;
  transform: scale(0);
}
.sk-icon.pending .sk-dot { animation: sk-spring 0.46s linear forwards; }

.sk-ripple {
  width: 19px;
  height: 19px;
  border: 1.2px solid currentColor;
  opacity: 0;
}
.sk-icon.pulsing .sk-ripple { animation: sk-pulse 1.05s ease-out infinite; }
.sk-ripple:nth-child(1) { --peak: 0.6; animation-delay: 0s; }
.sk-ripple:nth-child(2) { --peak: 0.36; animation-delay: 0.13s; }

@keyframes sk-spring {
  0% { transform: scale(0); }
  50% { transform: scale(1.32); }
  78% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

@keyframes sk-pulse {
  0% { transform: scale(0.5263); opacity: var(--peak); }
  52.4% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

.carousel { display: flex; align-items: center; gap: 10px; margin-top: 20px; }

.car-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--sep);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
}
.car-arrow:hover { color: var(--fg); border-color: var(--fg-3); }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.car-progress {
  flex: 1;
  min-width: 40px;
  max-width: 120px;
  height: 2px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--sep);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.carousel.running .car-progress { opacity: 1; }

.car-progress i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--fg-3);
  transform: scaleX(0);
  transform-origin: left;
}
.carousel.running .car-progress i { animation: car-fill var(--car-interval, 5200ms) linear forwards; }

@keyframes car-fill { to { transform: scaleX(1); } }

/* the grid cross-fades on a slide change so the swap does not snap */
.panel-body { transition: opacity 0.22s ease; }
.panel-body.swapping { opacity: 0; }

.tabs button {
  padding: 6px 13px;
  border-radius: 7px;
  border: 1px solid var(--sep);
  background: transparent;
  color: var(--fg-2);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.tabs button[aria-selected="true"] {
  background: var(--control);
  color: var(--fg);
  border-color: var(--fg-3);
}

.findings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--sep-soft);
}

.finding h3 { margin: 0 0 7px; font-size: 15px; }
.finding p { margin: 0; font-size: 14.5px; color: var(--fg-2); }

.notes-section {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 56px 28px 64px;
  border-top: 1px solid var(--sep-soft);
}

.notes-section h2 { margin: 0 0 32px; font-size: clamp(22px, 2.6vw, 27px); }

.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 52px;
}

.notes h3 { margin: 0 0 7px; font-size: 15px; }
.notes p { margin: 0; font-size: 14.5px; color: var(--fg-2); }

.origin {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 48px 28px 56px;
  border-top: 1px solid var(--sep-soft);
}
.origin p { margin: 0; max-width: 66ch; color: var(--fg-2); font-size: 15px; }
.origin a { color: var(--accent); }

/* Emphasis, not a link — no colour change, and the rule sits well clear of the baseline. */
.brandmark {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.28em;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 26px 28px 56px;
  font-size: 13px;
  color: var(--fg-3);
  border-top: 1px solid var(--sep-soft);
}

.footer-links { display: flex; gap: 20px; margin-left: auto; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--fg); }

@media (max-width: 1010px) { .desk, .scene { --z: 0.8; } }
@media (max-width: 820px) { .desk, .scene { --z: 0.62; } }
@media (max-width: 620px) { .desk, .scene { --z: 0.46; } }
@media (max-width: 430px) { .desk, .scene { --z: 0.34; } }

@media (max-width: 940px) {
  .findings { grid-template-columns: 1fr; gap: 24px; }
  .notes { grid-template-columns: 1fr; gap: 26px; }
  }

@media (max-width: 620px) {
  .footer-links { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-icon.pending .sk-dot { animation: none; transform: scale(1); }
  .sk-icon.pulsing .sk-ripple { animation: none; opacity: 0; }
  .caret { animation: none; }
  .cursor, .payload, .attach, .win-drop { transition: none; }
}

.shelf {
  position: absolute;
  left: 22px;
  top: 34px;
  width: 520px;
  height: 352px;
  border-radius: 11px;
  background: var(--panel);
  border: 0.5px solid var(--sep);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  transform-origin: 88% -22%;
  opacity: 0;
  transform: scale(0.9) translateY(-8px);
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.shelf.open { opacity: 1; transform: scale(1) translateY(0); }

.shelf-header {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--sep-soft);
  color: var(--fg-3);
  font-size: 12px;
}

.shelf-body { padding-bottom: 10px; }

.mini-day:lang(ko), .mini-day:lang(ja) { font-size: 11px; }

.mini-day {
  height: 18px;
  display: flex;
  align-items: flex-end;
  padding: 0 13px 3px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--fg-2);
}

.mini-tiles {
  display: grid;
  grid-template-columns: repeat(4, 104px);
  justify-content: space-between;
  row-gap: 7px;
  padding: 4px 12px 0;
}

.mini-tile {
  position: relative;
  aspect-ratio: 180 / 124;
  border-radius: 5px;
  background: var(--tile);
  overflow: hidden;
}
.mini-tile::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background-color: var(--paper);
  background-repeat: no-repeat;
}
.mini-tile.picked { box-shadow: inset 0 0 0 2.5px var(--accent); }

.win-mail { left: 566px; top: 62px; width: 312px; }
.win-mail .win-drop { min-height: 176px; }
.win-mail .attach { margin-bottom: 6px; padding: 6px; }
.win-mail .attach-thumb { width: 44px; height: 30px; }
.win-mail .attach-meta b { font-size: 10.5px; }
.win-mail .attach-meta i { font-size: 9.5px; }

.modkey {
  position: absolute;
  left: 18px;
  top: 16px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(28, 28, 30, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.cursor.mod .modkey { opacity: 1; transform: scale(1); }

.payload-stack {
  width: 116px;
  height: 78px;
  background: none;
  border: 0;
  box-shadow: none;
}

.payload-stack i {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: var(--paper);
  background-repeat: no-repeat;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38);
}
.payload-stack i:nth-child(1) { transform: rotate(-7deg) translate(-6px, 4px); }
.payload-stack i:nth-child(2) { transform: rotate(3deg) translate(4px, -2px); }
.payload-stack i:nth-child(3) { transform: rotate(-1deg); }

.payload-stack b {
  position: absolute;
  left: -9px;
  top: -9px;
  z-index: 2;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.4);
}

.payload-stack i[data-shot="browser"] {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(#9aa4b2, #9aa4b2),
    linear-gradient(#c4cbd6, #c4cbd6),
    linear-gradient(#c4cbd6, #c4cbd6),
    linear-gradient(#dfe3ea, #dfe3ea);
  background-size: 100% 17%, 46% 5%, 78% 6%, 62% 6%, 88% 22%;
  background-position: 0 0, 6% 34%, 6% 55%, 6% 70%, 6% 96%;
}

.payload-stack i[data-shot="terminal"] {
  background-color: #16181d;
  background-image:
    linear-gradient(#57c98a, #57c98a),
    linear-gradient(#8ea0b8, #8ea0b8),
    linear-gradient(#57c98a, #57c98a),
    linear-gradient(#8ea0b8, #8ea0b8),
    linear-gradient(#8ea0b8, #8ea0b8);
  background-size: 34% 5%, 62% 5%, 26% 5%, 74% 5%, 48% 5%;
  background-position: 6% 14%, 6% 32%, 6% 50%, 6% 68%, 6% 86%;
}

.payload-stack i[data-shot="chart"] {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-size: 38% 7%, 11% 34%, 11% 56%, 11% 44%, 11% 72%, 11% 28%;
  background-position: 8% 12%, 10% 88%, 30% 88%, 50% 88%, 70% 88%, 90% 88%;
}

.payload-stack i[data-shot="chat"] {
  background-image:
    linear-gradient(#cbd2dc, #cbd2dc),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(#cbd2dc, #cbd2dc),
    linear-gradient(var(--accent), var(--accent));
  background-size: 52% 15%, 44% 15%, 38% 15%, 56% 15%;
  background-position: 5% 10%, 95% 36%, 5% 62%, 95% 90%;
}

.payload-stack i[data-shot="code"] {
  background-color: #1b1d23;
  background-image:
    linear-gradient(#c678dd, #c678dd),
    linear-gradient(#61afef, #61afef),
    linear-gradient(#98c379, #98c379),
    linear-gradient(#61afef, #61afef),
    linear-gradient(#5c6370, #5c6370),
    linear-gradient(#98c379, #98c379);
  background-size: 30% 5%, 54% 5%, 42% 5%, 62% 5%, 26% 5%, 46% 5%;
  background-position: 8% 10%, 14% 27%, 14% 44%, 8% 61%, 14% 78%, 8% 95%;
}

.payload-stack i[data-shot="receipt"] {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(#b9bfc9, #b9bfc9),
    linear-gradient(#b9bfc9, #b9bfc9),
    linear-gradient(#b9bfc9, #b9bfc9),
    linear-gradient(var(--ink), var(--ink));
  background-size: 34% 8%, 56% 4%, 56% 4%, 56% 4%, 26% 7%;
  background-position: 50% 12%, 50% 38%, 50% 52%, 50% 66%, 50% 90%;
}

.payload-stack i[data-shot="map"] {
  background-color: #dfe6dd;
  background-image:
    linear-gradient(#b7c9b2, #b7c9b2),
    linear-gradient(#b7c9b2, #b7c9b2),
    linear-gradient(#f2f4f0, #f2f4f0),
    linear-gradient(#f2f4f0, #f2f4f0),
    linear-gradient(#e2544a, #e2544a);
  background-size: 40% 34%, 26% 26%, 100% 8%, 9% 100%, 9% 13%;
  background-position: 8% 14%, 88% 84%, 0 46%, 62% 0, 44% 40%;
}

.payload-stack i[data-shot="photo"] {
  background-image:
    linear-gradient(160deg, #7f9cc4 0%, #b9a7c6 48%, #e2c3a8 100%);
  background-size: 100% 100%;
  background-position: 0 0;
}

.payload-stack i[data-shot="doc"] {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(#c9cfd8, #c9cfd8),
    linear-gradient(#c9cfd8, #c9cfd8),
    linear-gradient(#c9cfd8, #c9cfd8),
    linear-gradient(#c9cfd8, #c9cfd8);
  background-size: 44% 7%, 84% 4%, 84% 4%, 76% 4%, 58% 4%;
  background-position: 8% 12%, 8% 40%, 8% 55%, 8% 70%, 8% 85%;
}

.attach-thumb[data-shot="browser"] {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(#9aa4b2, #9aa4b2),
    linear-gradient(#c4cbd6, #c4cbd6),
    linear-gradient(#c4cbd6, #c4cbd6),
    linear-gradient(#dfe3ea, #dfe3ea);
  background-size: 100% 17%, 46% 5%, 78% 6%, 62% 6%, 88% 22%;
  background-position: 0 0, 6% 34%, 6% 55%, 6% 70%, 6% 96%;
}

.attach-thumb[data-shot="terminal"] {
  background-color: #16181d;
  background-image:
    linear-gradient(#57c98a, #57c98a),
    linear-gradient(#8ea0b8, #8ea0b8),
    linear-gradient(#57c98a, #57c98a),
    linear-gradient(#8ea0b8, #8ea0b8),
    linear-gradient(#8ea0b8, #8ea0b8);
  background-size: 34% 5%, 62% 5%, 26% 5%, 74% 5%, 48% 5%;
  background-position: 6% 14%, 6% 32%, 6% 50%, 6% 68%, 6% 86%;
}

.attach-thumb[data-shot="chart"] {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-size: 38% 7%, 11% 34%, 11% 56%, 11% 44%, 11% 72%, 11% 28%;
  background-position: 8% 12%, 10% 88%, 30% 88%, 50% 88%, 70% 88%, 90% 88%;
}

.attach-thumb[data-shot="chat"] {
  background-image:
    linear-gradient(#cbd2dc, #cbd2dc),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(#cbd2dc, #cbd2dc),
    linear-gradient(var(--accent), var(--accent));
  background-size: 52% 15%, 44% 15%, 38% 15%, 56% 15%;
  background-position: 5% 10%, 95% 36%, 5% 62%, 95% 90%;
}

.attach-thumb[data-shot="code"] {
  background-color: #1b1d23;
  background-image:
    linear-gradient(#c678dd, #c678dd),
    linear-gradient(#61afef, #61afef),
    linear-gradient(#98c379, #98c379),
    linear-gradient(#61afef, #61afef),
    linear-gradient(#5c6370, #5c6370),
    linear-gradient(#98c379, #98c379);
  background-size: 30% 5%, 54% 5%, 42% 5%, 62% 5%, 26% 5%, 46% 5%;
  background-position: 8% 10%, 14% 27%, 14% 44%, 8% 61%, 14% 78%, 8% 95%;
}

.attach-thumb[data-shot="receipt"] {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(#b9bfc9, #b9bfc9),
    linear-gradient(#b9bfc9, #b9bfc9),
    linear-gradient(#b9bfc9, #b9bfc9),
    linear-gradient(var(--ink), var(--ink));
  background-size: 34% 8%, 56% 4%, 56% 4%, 56% 4%, 26% 7%;
  background-position: 50% 12%, 50% 38%, 50% 52%, 50% 66%, 50% 90%;
}

.attach-thumb[data-shot="map"] {
  background-color: #dfe6dd;
  background-image:
    linear-gradient(#b7c9b2, #b7c9b2),
    linear-gradient(#b7c9b2, #b7c9b2),
    linear-gradient(#f2f4f0, #f2f4f0),
    linear-gradient(#f2f4f0, #f2f4f0),
    linear-gradient(#e2544a, #e2544a);
  background-size: 40% 34%, 26% 26%, 100% 8%, 9% 100%, 9% 13%;
  background-position: 8% 14%, 88% 84%, 0 46%, 62% 0, 44% 40%;
}

.attach-thumb[data-shot="photo"] {
  background-image:
    linear-gradient(160deg, #7f9cc4 0%, #b9a7c6 48%, #e2c3a8 100%);
  background-size: 100% 100%;
  background-position: 0 0;
}

.attach-thumb[data-shot="doc"] {
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(#c9cfd8, #c9cfd8),
    linear-gradient(#c9cfd8, #c9cfd8),
    linear-gradient(#c9cfd8, #c9cfd8),
    linear-gradient(#c9cfd8, #c9cfd8);
  background-size: 44% 7%, 84% 4%, 84% 4%, 76% 4%, 58% 4%;
  background-position: 8% 12%, 8% 40%, 8% 55%, 8% 70%, 8% 85%;
}


.scene-wide { width: 1240px; --z: 0.76; }
.scene-wide .scene-desk { height: 700px; }

@media (max-width: 1010px) { .scene-wide { --z: 0.62; } }
@media (max-width: 820px) { .scene-wide { --z: 0.48; } }
@media (max-width: 620px) { .scene-wide { --z: 0.35; } }
@media (max-width: 430px) { .scene-wide { --z: 0.26; } }

.finder {
  position: absolute;
  left: 30px;
  top: 44px;
  width: 540px;
  height: 600px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: var(--panel);
  border: 0.5px solid var(--sep);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.finder-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 14px;
  background: var(--barbg);
  border-bottom: 0.5px solid var(--sep);
  flex: none;
}

.finder-nav { display: inline-flex; gap: 12px; margin-left: 8px; color: var(--fg-2); }

.finder-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
}
.finder-title svg { color: #6ba8f5; }

.finder-tools { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }

.finder-seg {
  display: inline-flex;
  gap: 1px;
  padding: 3px;
  border-radius: 6px;
  background: var(--control);
}
.finder-seg b { width: 20px; height: 15px; border-radius: 4px; }
.finder-seg b.on { background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }

.finder-search {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--control);
  color: var(--fg-3);
}

.finder-cols {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  background: var(--barbg);
  border-bottom: 0.5px solid var(--sep);
  font-size: 11px;
  color: var(--fg-3);
  flex: none;
}
.finder-cols .fcell + .fcell { border-left: 1px solid var(--sep-soft); padding-left: 10px; }

.finder-scroll { flex: 1; overflow: hidden; position: relative; }

.fcell { flex: none; }
.fname { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
.fname > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsize { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.fkind { width: 104px; padding-left: 16px; }

.frow {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  font-size: 11.5px;
  color: var(--fg-2);
  transition: background 0.25s ease;
}
.frow:nth-child(even) { background: var(--sep-soft); }
.frow.flip { background: color-mix(in srgb, #34c759 30%, transparent); }
.frow.done { color: var(--fg); }
.frow.done .fname i, .frow.done .fsize, .frow.done .fkind { color: #34c759; }
.frow.done .fname i { font-weight: 600; }

.fname i { font-style: normal; color: var(--fg-3); }
.ficon {
  width: 12px;
  height: 14px;
  flex: none;
  background: var(--fg-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2016%22%3E%3Cpath%20d%3D%22M2%201.6h6.2L12%205.4v9A1.4%201.4%200%200%201%2010.6%2015.8H2A1.4%201.4%200%200%201%20.6%2014.4V3A1.4%201.4%200%200%201%202%201.6Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.1%22%2F%3E%3Cpath%20d%3D%22M8.2%201.6V5.4H12%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.1%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2016%22%3E%3Cpath%20d%3D%22M2%201.6h6.2L12%205.4v9A1.4%201.4%200%200%201%2010.6%2015.8H2A1.4%201.4%200%200%201%20.6%2014.4V3A1.4%201.4%200%200%201%202%201.6Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.1%22%2F%3E%3Cpath%20d%3D%22M8.2%201.6V5.4H12%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.1%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

.finder-status {
  display: flex;
  justify-content: space-between;
  padding: 6px 14px;
  background: var(--barbg);
  border-top: 0.5px solid var(--sep);
  font-size: 11px;
  color: var(--fg-3);
  flex: none;
}
.finder-total { font-variant-numeric: tabular-nums; }

.ob {
  position: absolute;
  left: 610px;
  top: 26px;
  width: 600px;
  height: 640px;
  border-radius: 12px;
  background: var(--panel);
  border: 0.5px solid var(--sep);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.46);
  overflow: hidden;
}

.ob-tint {
  position: absolute;
  inset: 0 0 auto 0;
  height: 320px;
  background: linear-gradient(180deg, rgba(52, 199, 89, 0.14), rgba(52, 199, 89, 0));
  pointer-events: none;
}

.ob-lights { position: absolute; left: 18px; top: 16px; z-index: 2; display: flex; gap: 8px; }

.ob-body {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 44px 40px 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ob-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: linear-gradient(135deg, #34c759, rgba(52, 199, 89, 0.6));
  color: #fff;
  box-shadow: 0 5px 10px rgba(52, 199, 89, 0.35);
  flex: none;
}

.ob-title { margin: 12px 0 6px; font-size: 25px; font-weight: 700; letter-spacing: -0.02em; }
.ob-sub { margin: 0; font-size: 13px; color: var(--fg-2); max-width: 46ch; }

.ob-card {
  margin-top: 24px;
  width: 100%;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #34c759, #30b0c7);
  box-shadow: 0 6px 12px rgba(52, 199, 89, 0.22);
  color: #fff;
}

.ob-amount { display: flex; align-items: baseline; gap: 6px; }
.ob-amount b { font-size: 50px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.ob-amount span { font-size: 21px; font-weight: 600; opacity: 0.85; }

.ob-caption { margin: 12px 0; font-size: 13px; color: rgba(255, 255, 255, 0.92); }

.ob-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.ob-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: #fff; }

.ob-stats { display: flex; gap: 40px; margin-top: 16px; }
.ob-stats b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ob-stats span { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.ob-stats span:lang(ko), .ob-stats span:lang(ja) { font-size: 11px; letter-spacing: normal; text-transform: none; }

.ob-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 18px 40px;
  background: var(--barbg);
  border-top: 0.5px solid var(--sep);
}
.ob-dots { display: flex; gap: 5px; }
.ob-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--sep); }
.ob-dots i.on { width: 18px; background: var(--accent); }

.ob-continue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  min-width: 92px;
  justify-content: center;
  padding: 10px 30px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.42;
  transition: opacity 0.2s ease;
}

.scene.done .ob-continue { opacity: 1; }

.ob-spinner {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: ob-spin 0.7s linear infinite;
}

.scene.done .ob-spinner { display: none; }

@keyframes ob-spin { to { transform: rotate(360deg); } }


.lang {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--sep);
}

.lang button {
  padding: 3px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-3);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.lang button:hover { color: var(--fg); }
.lang button[aria-pressed="true"] { background: var(--control); color: var(--fg); }

/* Per-language typesetting.
   Must be written as elem:lang(), never :lang() elem — the latter is a
   descendant selector and never matches when lang sits on the element itself. */
/* Korean wraps per character by default, which is wrong: it reads as words
   separated by spaces, so keep-all is what makes it break like a sentence.
   overflow-wrap is the escape hatch keep-all needs — without it a long
   unbroken run has nowhere to break and runs out of its column. */
:lang(ko) {
  line-height: 1.72;
  letter-spacing: -0.003em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1:lang(ko) { line-height: 1.30; letter-spacing: -0.022em; max-width: 15em; }
h2:lang(ko), h3:lang(ko) { line-height: 1.40; letter-spacing: -0.018em; max-width: 14em; }
p:lang(ko) { max-width: 34em; }

:lang(ja) {
  line-height: 1.80;
  letter-spacing: 0.012em;
  line-break: strict;
  overflow-wrap: anywhere;
}
h1:lang(ja) { line-height: 1.38; letter-spacing: -0.010em; max-width: 15em; }
h2:lang(ja), h3:lang(ja) { line-height: 1.45; letter-spacing: -0.005em; max-width: 14em; }
p:lang(ja) { max-width: 34em; }

/* ch units hold roughly half as many CJK glyphs, so the ch caps above are
   replaced by em caps for ko/ja. */
.intro h1:lang(ko), .intro h1:lang(ja) { max-width: 13em; }
.stage h2:lang(ko), .stage h2:lang(ja) { max-width: 13em; }
.intro p:lang(ko), .intro p:lang(ja) { max-width: 32em; }
.stage-lede:lang(ko), .stage-lede:lang(ja) { max-width: 34em; }
.origin p:lang(ko), .origin p:lang(ja) { max-width: 36em; }
.ob-sub:lang(ko), .ob-sub:lang(ja) { max-width: 26em; }

/* Where a line is allowed to end. Only page copy is selected; the mock windows
   sit deeper and keep the browser's own breaking.

   Every block here is two to four lines, which is exactly what balancing is
   for: it evens the lines out instead of filling each one to the margin and
   leaving a stub behind. Measured against this page's own copy it never cost a
   line and closed the longest-to-shortest gap in all three languages — the
   English intro went from 333px of ragged to 46, Korean from 322 to 9, the
   Japanese storage lede from 460 to 14.

   Korean needs the keep-all above for this to mean anything. Korean wraps per
   character by default, so without it the balancer is free to hunt for even
   lines and find them in the middle of a word.

   Two neighbours were tried and dropped. word-break: auto-phrase confines
   Japanese to phrase boundaries, which added a line to three of the four
   headings here and never improved the evenness. text-wrap: pretty changed
   nothing whatsoever in Japanese, and balance beat it on every Latin and
   Korean block. */
main > section > :is(h1, h2, p) { text-wrap: balance; }

/* The header holds neutral metrics in every language. Without this the
   per-language line-height above grows the nav and every section below it
   jumps the moment the reader switches languages. */
.nav, .nav :lang(ko), .nav :lang(ja) { line-height: 1; letter-spacing: normal; }

/* The faux macOS chrome keeps the real system font and neutral metrics in
   every language, otherwise the mockups stop reading as macOS. */
.scene, .desk { font-family: var(--font-system); }
.scene, .scene :lang(ko), .scene :lang(ja),
.desk, .desk :lang(ko), .desk :lang(ja) {
  line-height: 1.55;
  letter-spacing: normal;
  word-break: normal;
}