/* ============================================================
   This is Eytle — birch-forest skin
   Zero glow. Hairlines, flat fills, 6–8px radii.
   Deep blue is the world; amber is the only accent.
   ============================================================ */

/* ---- Patch Log pixel font (Minecraft AE) — used ONLY in Patch Log ---- */
@font-face {
  font-family: 'PatchFont';
  src: url('../fonts/Minecraft AE.woff2') format('woff2'),
       url('../fonts/Minecraft AE.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {                         /* night (default) */
  --ink:#14233f; --ink-deep:#0d1830; --ink-rise:#1d3257;
  --amber:#e6a92b; --amber-deep:#b27e16; --amber-ink:#1f1503;
  --parchment:#ece4d2; --dim:#93a1bd; --faint:#465478;
  --line:rgba(236,228,210,.13); --line-2:rgba(236,228,210,.22);
  --rail-bg:linear-gradient(180deg, rgba(13,24,48,.32), rgba(13,24,48,.12));
  --scrim:linear-gradient(180deg, rgba(13,24,48,.72), rgba(13,24,48,.86));
  --panel:rgba(13,22,42,.55);
  --field:rgba(0,0,0,.16);
  --surface-sheen:rgba(230,169,43,.11);
  --amber-flare:#f7d78f;
  --bg-img:url('../images/patchlog-bg-night.jpg');
  --disp:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesk','PingFang SC','Microsoft YaHei','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  --r:7px;
}
[data-theme="day"] {            /* day (lights on) */
  --ink:#a9cee6; --ink-deep:#bcd9ec; --ink-rise:#cfe4f2;
  --amber:#c9810f; --amber-deep:#9a610a; --amber-ink:#fff6e6;
  --parchment:#13223c; --dim:#31476a; --faint:#4d678b;
  --line:rgba(21,35,60,.16); --line-2:rgba(21,35,60,.26);
  --rail-bg:linear-gradient(180deg, rgba(247,251,254,.62), rgba(247,251,254,.42));
  --scrim:linear-gradient(180deg, rgba(169,206,230,.34), rgba(169,206,230,.58));
  --panel:rgba(255,255,255,.34);
  --field:rgba(255,255,255,.45);
  --surface-sheen:rgba(255,255,255,.34);
  --amber-flare:#fff0ba;
  --bg-img:url('../images/patchlog-bg-light.jpg');
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:var(--body); color:var(--parchment); background:var(--ink);
  min-height:100vh; position:relative; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; }
::selection { background:var(--amber); color:var(--amber-ink); }

/* ---- ambient layers ---- */
.bg, .scrim, .grain, .ambient-motes { position:fixed; inset:0; pointer-events:none; }
.bg, .scrim, .grain { z-index:0; }
.bg {
  background:var(--bg-img) center 18% / cover no-repeat;
  transform:scale(1.035) translate3d(var(--forest-x,0px),var(--forest-y,0px),0);
  transform-origin:center; transition:opacity .4s; will-change:transform;
}
.scrim  { background:var(--scrim); }
.grain  {
  opacity:.05; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.ambient-motes { z-index:1; width:100%; height:100%; opacity:.9; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app {
  position:relative; z-index:2; min-height:100vh;
  display:grid; grid-template-columns:248px 1fr;
}

/* ---- rail ---- */
.rail {
  display:flex; flex-direction:column; gap:28px;
  padding:30px 26px; border-right:1px solid var(--line);
  background:var(--rail-bg);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand {
  display:flex; align-items:center; gap:11px;
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:var(--parchment); text-align:left;
}
.brand img {
  width:34px; height:34px; border-radius:6px; display:block;
  transform-origin:50% 70%; transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.brand:hover img { transform:translateY(-2px) rotate(-7deg); }
.brand b { font-family:var(--disp); font-weight:500; font-size:18px; letter-spacing:.2px; }
.brand b em { font-style:italic; color:var(--amber); }

.lang { display:flex; gap:14px; font-size:12.5px; letter-spacing:.06em; }
.lang button { background:none; border:0; color:var(--faint); cursor:pointer; font:inherit; padding:0; transition:color .18s; }
.lang button:hover { color:var(--dim); }
.lang button.on { color:var(--amber); }

.rail nav { display:flex; flex-direction:column; gap:2px; }
.nav-i {
  position:relative; display:flex; align-items:center;
  padding:9px 10px 9px 14px; border-radius:6px;
  background:none; border:0; width:100%; text-align:left; cursor:pointer;
  font:inherit; font-size:14.5px; line-height:1.35; color:var(--dim); letter-spacing:.01em;
  transition:color .18s, background .18s;
}
.nav-i:hover { color:var(--parchment); background:var(--line); }
.nav-i.on { color:var(--amber); }
.nav-i.on::before {
  content:''; position:absolute; left:-2px; top:50%; transform:translateY(-50%);
  width:3px; height:15px; background:var(--amber);
}

.rail-foot { margin-top:auto; display:flex; flex-direction:column; gap:16px; }
.lamp {
  display:flex; align-items:center; gap:9px; align-self:flex-start;
  background:none; border:1px solid var(--line-2); color:var(--dim);
  padding:7px 13px; border-radius:6px; cursor:pointer; font:inherit; font-size:13px;
  transition:border-color .18s, color .18s;
}
.lamp:hover { border-color:var(--amber-deep); color:var(--parchment); }
.lamp #lamp-ico { display:inline-block; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.lamp:hover #lamp-ico { transform:rotate(28deg) scale(1.12); }
.contact { font-size:11.5px; color:var(--faint); line-height:1.9; letter-spacing:.02em; }
.contact a { color:var(--dim); text-decoration:none; transition:color .18s; }
.contact a:hover { color:var(--amber); }

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  width:min(100%, 1280px); justify-self:center;
  padding:clamp(38px,5vw,68px) clamp(28px,5vw,72px) 56px;
  display:flex; flex-direction:column; gap:clamp(26px,3vw,38px); min-width:0;
}

.hero {
  padding:0 0 clamp(22px,3vw,32px);
  border-bottom:1px solid var(--line);
}
.hero h1 {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(44px,5.4vw,72px); line-height:.94; letter-spacing:-.025em;
}
.hero h1 em {
  font-style:italic; color:var(--amber);
  background:linear-gradient(110deg,var(--amber) 20%,var(--amber-flare) 43%,var(--amber) 66%);
  background-size:240% 100%; background-position:130% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:amber-title-sweep 6.5s ease-in-out infinite;
}
.hero .url {
  margin-top:18px; font-size:11px; letter-spacing:.25em; color:var(--dim);
  text-transform:uppercase;
}

.eyebrow {
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber); margin-bottom:13px;
}

/* ---- panel (shared) ---- */
.panel {
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:clamp(20px,2.3vw,28px); backdrop-filter:blur(3px);
}

/* Motion layer: restrained forest ambience and responsive surfaces. */
.motion-surface { position:relative; isolation:isolate; overflow:hidden; }
.motion-surface::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(280px circle at var(--surface-x,50%) var(--surface-y,50%),var(--surface-sheen),transparent 68%);
  opacity:0; transition:opacity .34s ease;
}
.motion-surface:hover::after,
.motion-surface:focus-within::after { opacity:1; }
.motion-surface > * { position:relative; z-index:1; }
.motion-reveal {
  animation:forest-content-in .66s cubic-bezier(.16,1,.3,1) both;
  animation-delay:var(--reveal-delay,0ms);
}
@keyframes forest-content-in {
  from { opacity:0; transform:translateY(15px); filter:blur(5px); }
  to { opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes amber-title-sweep {
  0%,58%,100% { background-position:130% 0; }
  74% { background-position:-35% 0; }
}

html.theme-changing::view-transition-old(root),
html.theme-changing::view-transition-new(root) {
  animation:none; mix-blend-mode:normal;
}
html.theme-changing::view-transition-old(root) { z-index:1; }
html.theme-changing::view-transition-new(root) { z-index:2; }
.theme-wipe {
  position:fixed; inset:0; z-index:100; pointer-events:none;
  background:radial-gradient(
    circle at var(--theme-x) var(--theme-y),
    rgba(247,215,143,.98) 0 6%,
    rgba(178,126,22,.94) 38%,
    rgba(13,24,48,.97) 100%
  );
  will-change:clip-path,opacity;
}
.theme-wipe.to-day {
  background:radial-gradient(
    circle at var(--theme-x) var(--theme-y),
    rgba(255,244,194,.99) 0 7%,
    rgba(230,169,43,.92) 39%,
    rgba(169,206,230,.97) 100%
  );
}

/* ============================================================
   HOME (about / overview)
   ============================================================ */
.grid2 { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr); gap:clamp(18px,2.4vw,30px); align-items:stretch; }
.col-left { display:flex; flex-direction:column; gap:clamp(18px,2.4vw,30px); min-width:0; }
.col-right {
  min-width:0; min-height:0; height:100%; padding:clamp(20px,2.3vw,28px); display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  backdrop-filter:blur(3px);
}

/* latest patch log preview */
.plog-card { border-left:2px solid var(--amber); border-radius:0 8px 8px 0; }
.plog-card .date {
  font-family:'PatchFont',monospace; font-size:15px; color:var(--amber); letter-spacing:.04em;
}
.plog-card .txt {
  font-family:'PatchFont',monospace; font-size:15px; line-height:2.05;
  color:var(--parchment); margin-top:16px; opacity:.92; white-space:pre-wrap;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.plog-card .more {
  display:inline-block; margin-top:18px; font-size:12px; color:var(--dim);
  letter-spacing:.04em; cursor:pointer; background:none; border:0; font:inherit;
  transition:color .18s;
}
.plog-card .more:hover { color:var(--amber); }

/* message form */
.msg-text {
  width:100%; height:168px; resize:none; overflow:hidden;
  background:var(--field); border:1px solid var(--line); border-radius:6px;
  color:var(--parchment); font:inherit; font-size:14px; line-height:1.6;
  padding:11px 13px; transition:border-color .18s;
}
.msg-text::placeholder { color:var(--dim); }
.msg-text:focus { outline:none; border-color:var(--amber); }
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.msg-row { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:12px; }
.msg-count { font-size:12px; color:var(--faint); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.msg-send {
  background:var(--amber); color:var(--amber-ink); border:0; border-radius:6px; cursor:pointer;
  font:inherit; font-size:14px; font-weight:500; padding:10px 22px; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; overflow:hidden;
  transform:translateY(20px); transition:background .18s;
}
.msg-send:hover { background:var(--amber-deep); }
.msg-send:disabled { opacity:.6; cursor:default; }
.msg-plane {
  width:17px; height:17px; flex:0 0 auto;
  transform:rotate(-4deg);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.msg-send:hover .msg-plane { transform:translate(2px,-2px) rotate(-8deg); }
.msg-send.is-launching .msg-plane {
  animation:message-plane-takeoff .8s cubic-bezier(.4,0,.2,1);
}
@keyframes message-plane-takeoff {
  0% { transform:translate(0,0) rotate(-4deg); opacity:1; }
  42% { transform:translate(19px,-15px) rotate(-12deg); opacity:0; }
  43% { transform:translate(-15px,12px) rotate(-12deg); opacity:0; }
  100% { transform:translate(0,0) rotate(-4deg); opacity:1; }
}
.msg-hint { min-height:18px; margin-top:10px; font-size:12.5px; color:var(--dim); letter-spacing:.02em; }

/* gallery preview (home right column) */
.gal {
  --gal-gap:8px; position:relative; flex:1 1 0; min-height:360px; overflow:hidden;
  border-radius:5px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.gal-track {
  position:absolute; top:0; left:0; width:100%; display:flex; flex-direction:column;
  animation:home-gallery-scroll var(--gal-scroll-duration,29.333s) linear infinite;
  will-change:transform;
}
.gal:hover .gal-track,
.gal:focus-within .gal-track { animation-play-state:paused; }
.gal-set {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gal-gap);
  padding-bottom:var(--gal-gap);
}
.gal-item {
  width:100%; aspect-ratio:1; min-width:0; padding:0; overflow:hidden;
  appearance:none; background:none; border:1px solid var(--line); border-radius:5px;
  cursor:pointer; transition:border-color .18s, transform .18s; will-change:transform;
}
.gal-item img { width:100%; height:100%; object-fit:cover; display:block; }
.gal-item:hover { border-color:var(--amber-deep); transform:translateY(-2px); }
@keyframes home-gallery-scroll {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(0,-50%,0); }
}

/* ============================================================
   GENERIC LIST (projects / tools / sub-projects)
   ============================================================ */
.list { display:flex; flex-direction:column; gap:8px; }
.list-item {
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 18px; cursor:pointer; font:inherit; font-size:15px;
  color:var(--parchment); text-decoration:none; text-align:left; width:100%;
  backdrop-filter:blur(3px); transition:border-color .18s, color .18s;
}
.list-item:hover { border-color:var(--line-2); }
.list-item.on { border-color:var(--amber-deep); color:var(--amber); }
.list-item .right { display:flex; flex:0 0 auto; align-items:center; gap:11px; color:var(--dim); }
.list-item .chev { transition:transform .18s; }
.list-item:hover .chev { transform:translateX(2px); }
.badge {
  font-size:11px; letter-spacing:.04em; color:var(--faint);
  border:1px solid var(--line-2); border-radius:4px; padding:2px 7px;
}
.list-item .tool-ico { width:22px; height:22px; object-fit:contain; flex:0 0 auto; image-rendering:pixelated; }
.list-item .label {
  display:flex; flex:1 1 auto; align-items:center; gap:12px; min-width:0;
  line-height:1.4; overflow-wrap:anywhere;
}
.project-group { display:flex; flex-direction:column; }
.project-sub-slot:empty { display:none; }
.list-sub { margin:8px 0 6px 14px; padding-left:14px; border-left:1px solid var(--line); }
.list-sub .eyebrow { color:var(--dim); }

.placeholder-text { color:var(--dim); font-size:14px; }

/* ============================================================
   DOWNLOADS
   ============================================================ */
.dl-item {
  display:flex; align-items:center; gap:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 18px; text-decoration:none; color:var(--parchment);
  backdrop-filter:blur(3px); transition:border-color .18s;
}
.dl-item + .dl-item { margin-top:8px; }
.dl-item:hover { border-color:var(--line-2); }
.dl-ico { font-size:20px; line-height:1; flex:0 0 auto; }
.dl-info { flex:1 1 auto; min-width:0; }
.dl-name { font-size:15px; }
.dl-meta { font-size:12px; color:var(--faint); margin-top:3px; letter-spacing:.02em; }
.dl-item .arrow { color:var(--dim); flex:0 0 auto; }

/* ============================================================
   PATCH LOG — archive hierarchy
   ============================================================ */
.patchlog-shell { width:min(100%, 920px); }
.patchlog-header { max-width:660px; margin-bottom:16px; }
.patchlog-header .eyebrow { margin-bottom:0; }
.patchlog-title {
  margin-top:10px;
  font-family:var(--disp); font-size:clamp(30px,3.4vw,44px); font-weight:400;
  line-height:1.08; letter-spacing:-.02em; color:var(--parchment);
}
.patchlog-surface {
  overflow:hidden; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); backdrop-filter:blur(5px);
}
.patchlog-surface-calendar { max-width:680px; }
.patch-breadcrumb {
  display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:9px;
  width:100%; min-height:48px; padding:13px 20px; border-bottom:1px solid var(--line);
  color:var(--faint); font-size:12px; letter-spacing:.025em;
}
.patch-crumb {
  border:0; padding:0; background:none; color:var(--dim); font:inherit; white-space:nowrap;
  cursor:pointer; transition:color .18s;
}
.patch-crumb:hover { color:var(--amber); }
.patch-crumb-sep { color:var(--faint); opacity:.72; }
.patch-crumb-current { color:var(--parchment); white-space:nowrap; }
.patch-level { width:100%; padding:clamp(20px,3vw,30px); }
.patch-level-title {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:14px; color:var(--faint); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase;
}
.patch-index-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.patch-index-card {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px;
  min-height:76px; padding:14px 16px; border:1px solid var(--line); border-radius:8px;
  background:rgba(8,16,33,.18); color:var(--parchment); font:inherit; text-align:left;
  cursor:pointer; transition:border-color .18s, background .18s, color .18s;
}
.patch-index-card:hover { border-color:var(--amber-deep); background:rgba(8,16,33,.34); }
[data-theme="day"] .patch-index-card { background:rgba(248,252,255,.52); }
[data-theme="day"] .patch-index-card:hover { background:rgba(255,246,224,.64); }
.patch-index-copy { display:flex; flex-direction:column; min-width:0; gap:4px; }
.patch-index-main { font-family:var(--disp); font-size:18px; line-height:1.2; }
.patch-index-meta {
  color:var(--faint); font-size:11.5px; white-space:nowrap;
}
.patch-index-arrow { display:flex; align-items:center; color:var(--faint); }
.patch-index-card:hover .patch-index-arrow { color:var(--amber); }
.patch-calendar-card {
  min-width:0; border:1px solid var(--line); border-radius:8px;
  background:rgba(8,16,33,.16);
}
[data-theme="day"] .patch-calendar-card { background:rgba(248,252,255,.52); }
.patch-calendar-bar {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:42px; padding:10px 14px; border-bottom:1px solid var(--line);
  color:var(--faint); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.patch-calendar-legend { display:flex; align-items:center; gap:7px; letter-spacing:.02em; text-transform:none; }
.patch-calendar-legend i {
  width:9px; height:9px; border:1px solid var(--amber-deep); border-radius:2px;
}
.cal-wrap { width:100%; padding:18px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; width:100%; }
.cal-head {
  font-size:11px; color:var(--faint); text-align:center; padding-bottom:4px;
  letter-spacing:.04em;
}
.cal-day {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--dim); border:1px solid transparent; border-radius:5px;
  font-variant-numeric:tabular-nums; background:transparent; padding:0;
}
.cal-blank { border:0; }
.cal-day-future { color:var(--faint); opacity:.5; }
.cal-day-today { border-color:var(--line-2); }
.cal-day-entry {
  color:var(--amber); border-color:var(--amber-deep); cursor:pointer;
  font-family:'PatchFont',monospace; transition:background .18s;
}
.cal-day-entry:hover { background:rgba(230,169,43,.12); }
.cal-day-active { background:var(--amber); color:var(--amber-ink); border-color:var(--amber); }

/* ============================================================
   GALLERY — full grid
   ============================================================ */
.gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;
}
.gallery-grid img {
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px;
  border:1px solid var(--line); cursor:pointer; display:block; transition:border-color .18s;
}
.gallery-grid img:hover { border-color:var(--amber-deep); }
.gallery-masonry {
  display:block; columns:4 190px; column-gap:12px;
}
.gallery-masonry img {
  width:100%; height:auto; aspect-ratio:auto; margin:0 0 12px;
  break-inside:avoid; display:block;
}
.gallery-sentinel { height:2px; }

/* ============================================================
   OVERLAYS (patch reader + gallery lightbox)
   ============================================================ */
.overlay {
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:6vh 5vw; background:rgba(8,15,30,.55); backdrop-filter:blur(4px);
  animation:ov-in .2s ease;
}
[data-theme="day"] .overlay { background:rgba(120,160,195,.4); }
@keyframes ov-in { from { opacity:0; } to { opacity:1; } }
.ov-close {
  position:absolute; top:22px; right:26px; z-index:2;
  background:none; border:1px solid var(--line-2); color:var(--dim);
  border-radius:6px; padding:6px 12px; font:inherit; font-size:13px; cursor:pointer;
  transition:border-color .18s, color .18s;
}
.ov-close:hover { border-color:var(--amber-deep); color:var(--parchment); }

/* patch reader */
.reader {
  max-width:680px; width:100%; max-height:88vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  border-left:2px solid var(--amber); padding:40px 44px;
  backdrop-filter:blur(3px);
}
.reader .r-date {
  font-family:'PatchFont',monospace; font-size:16px; color:var(--amber); letter-spacing:.04em;
}
.reader .r-body {
  font-family:'PatchFont',monospace; font-size:15.5px; line-height:2.1;
  color:var(--parchment); margin-top:22px; opacity:.94; white-space:pre-wrap;
}

/* gallery lightbox — the preview develops smoothly while the original downloads */
.lightbox {
  --develop-progress:0%;
  display:grid; justify-items:center; gap:11px;
}
.lightbox-photo {
  position:relative; width:min(90vw,calc(82vh * var(--photo-ratio)));
  aspect-ratio:var(--photo-ratio); overflow:hidden; isolation:isolate;
  background:#07101d; border:1px solid var(--line-2); border-radius:6px;
}
.lightbox-photo img,
.lightbox-unexposed {
  position:absolute; inset:0; width:100%; height:100%;
}
.lightbox-photo img { display:block; object-fit:contain; border:0; }
.lightbox-unexposed {
  background:
    linear-gradient(180deg,rgba(22,31,43,.94),rgba(5,12,24,.985)),
    repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.015) 3px 4px);
}
.lightbox-preview {
  z-index:1; clip-path:inset(0 0 calc(100% - var(--develop-progress)) 0);
  filter:saturate(.82) contrast(.94) brightness(.92);
  will-change:clip-path;
}
.lightbox-original {
  z-index:2; opacity:0;
  transition:opacity .5s cubic-bezier(.2,.8,.2,1);
}
.lightbox-developer-line {
  position:absolute; z-index:3; left:0; right:0; top:var(--develop-progress); height:2px;
  transform:translateY(-50%); pointer-events:none; opacity:.92;
  background:linear-gradient(90deg,transparent 0%,rgba(224,150,32,.45) 12%,rgba(250,228,179,.96) 50%,rgba(224,150,32,.45) 88%,transparent 100%);
  box-shadow:0 -7px 22px rgba(229,172,73,.18),0 5px 18px rgba(239,213,160,.12);
  transition:opacity .35s ease;
}
.lightbox-developer-line::before {
  content:""; position:absolute; left:0; right:0; top:-22px; height:44px;
  background:linear-gradient(180deg,transparent,rgba(229,176,83,.045) 42%,rgba(249,228,185,.16) 50%,transparent 68%);
}
.lightbox-developer-line::after {
  content:""; position:absolute; inset:-1px 0; opacity:.8;
  background:linear-gradient(90deg,transparent 0%,rgba(255,245,214,.9) 20%,transparent 39%,rgba(255,238,191,.8) 63%,transparent 84%);
  background-size:180% 100%; animation:developer-shimmer 1.8s linear infinite;
}
@keyframes developer-shimmer {
  from { background-position:100% 0; }
  to { background-position:-100% 0; }
}
.lightbox-status {
  min-width:176px; display:flex; justify-content:space-between; gap:28px;
  color:rgba(234,223,199,.78); font-size:11px; letter-spacing:.14em;
  transition:opacity .4s ease,transform .4s ease;
}
[data-theme="day"] .lightbox-status { color:rgba(19,48,82,.75); }
.lightbox-progress { letter-spacing:.04em; }
.lightbox.is-developed .lightbox-original { opacity:1; }
.lightbox.is-developed .lightbox-developer-line,
.lightbox.is-preview-only .lightbox-developer-line { opacity:0; }
.lightbox.is-settled .lightbox-status { opacity:0; transform:translateY(-3px); }
.lightbox.is-preview-only .lightbox-preview { clip-path:inset(0); filter:none; }

/* ============================================================
   A11Y / MOTION
   ============================================================ */
:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px) {
  .grid2 { grid-template-columns:1fr; align-items:start; }
  .col-right { max-width:680px; }
  .gal { flex:none; width:100%; height:min(72vw,520px); min-height:360px; }
  .gallery-masonry { columns:3 170px; }
}
@media (max-width:760px) {
  .app { grid-template-columns:1fr; }
  .rail {
    position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center;
    gap:14px 20px; padding:16px 20px; border-right:0; border-bottom:1px solid var(--line);
  }
  .brand { order:0; }
  .lang { order:1; margin-left:auto; }
  .rail nav { order:2; flex-direction:row; flex-wrap:nowrap; gap:4px; width:100%; overflow-x:auto; padding-bottom:2px; }
  .nav-i { width:auto; flex:0 0 auto; padding:8px 10px; font-size:13.5px; white-space:nowrap; }
  .nav-i.on::before { display:none; }
  .rail-foot { order:3; margin:0; flex-direction:row; align-items:center; gap:18px; width:100%; }
  .stage { width:100%; padding:30px 20px 42px; gap:24px; }
  .hero { padding-bottom:22px; }
  .hero h1 { font-size:clamp(42px,13vw,58px); }
  .gallery-masonry { columns:2 140px; column-gap:9px; }
  .gallery-masonry img { margin-bottom:9px; }
  .msg-text { height:120px; }
  .patchlog-header { margin-bottom:16px; }
  .patch-index-grid { grid-template-columns:1fr; }
  .reader { padding:30px 26px; }
}
@media (max-width:400px) {
  .rail { padding-inline:16px; }
  .stage { padding-inline:16px; }
  .patch-breadcrumb { padding-inline:16px; }
  .patch-level { padding:16px; }
  .patch-index-card { min-height:70px; padding-inline:13px; gap:11px; }
  .cal-wrap { padding:14px 10px 16px; }
  .cal-grid { gap:3px; }
  .msg-row { align-items:flex-end; }
  .msg-send { padding-inline:17px; }
  .gal { height:420px; min-height:320px; }
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
  .motion-reveal { opacity:1 !important; transform:none !important; filter:none !important; }
  .ambient-motes { display:none !important; }
  .bg { transform:none !important; }
}