/* UNIDENTIFIED: a surveillance terminal. Doto dot-matrix for headlines, DM Mono uppercase for everything else,
   hairlines instead of boxes, one accent (Monero orange). Press I to invert. */
:root { --bg: #050505; --fg: #ececea; --dim: #7d7d78; --line: #262624; --acc: #ff6600; --blue: #8cc4ff; --red: #ff2b2b;
  --display: "Doto", "DM Mono", ui-monospace, monospace; --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: dark; }
:root.inv { --bg: #ececea; --fg: #050505; --dim: #6b6b66; --line: #cfcfca; --acc: #c24e00; --blue: #1f5fc4; color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 12px/1.35 var(--mono); letter-spacing: .02em; text-transform: uppercase;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); transition: background .25s, color .25s; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--acc); color: #050505; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 1px dashed var(--acc); outline-offset: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; }
.dim { color: var(--dim); } .acc { color: var(--acc); }
.lnk { border-bottom: 1px solid var(--dim); transition: color .15s, border-color .15s; cursor: pointer; }
.lnk:hover { color: var(--acc); border-color: var(--acc); }
.sq { width: 7px; height: 7px; background: var(--acc); display: inline-block; }
.redact { background: currentColor; border-radius: 1px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--fg); background: transparent; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.btn:hover, .btn.on { background: var(--fg); color: var(--bg); }
.btn.solid { background: var(--fg); color: var(--bg); }
.btn.solid:hover { background: var(--acc); border-color: var(--acc); color: #050505; }
.btn.acc { background: var(--acc); border-color: var(--acc); color: #050505; }
.btn.acc:hover { background: var(--fg); border-color: var(--fg); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--fg); }
.btn.acc:disabled:hover { background: var(--acc); color: #050505; }

/* ---------- boot ---------- */
body.booting { overflow: hidden; }
#boot { position: fixed; inset: 0; z-index: 200; background: #050505; color: #ececea; display: grid; place-items: center; letter-spacing: .06em; }
#boot .box { width: min(360px, 100vw - 48px); display: grid; gap: 10px; }
#boot .row1 { display: flex; justify-content: space-between; font-size: 11px; }
#boot .bar { border: 2px solid #ececea; padding: 3px; height: 28px; display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; }
#boot .bar i { background: #ececea; visibility: hidden; } #boot .bar i.on { visibility: visible; }
#boot .blog { font-size: 10px; line-height: 1.6; color: #7d7d78; min-height: 4.8em; text-transform: none; }
#boot.done { animation: crt-off .5s steps(10) forwards; }
@keyframes crt-off { 0% { clip-path: inset(0); } 55% { clip-path: inset(49.5% 0); background: #ececea; } 100% { clip-path: inset(50%); background: #ececea; opacity: 0; } }

/* ---------- intro (the room) ---------- */
#intro { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #000; color: #ececea; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); }
/* the photo fills the screen (cropping the sides on tall screens), so every layer below can use the photo's own % */
.stage { position: absolute; left: 50%; top: 50%; width: max(100%, 177.7svh); aspect-ratio: 1672 / 941; transform: translate(-50%, -50%); }
.cam { position: absolute; inset: 0; transform: translate(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -9px)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.drift { position: absolute; inset: 0; animation: drift 38s ease-in-out infinite alternate; transform-origin: 54% 47%; }
@keyframes drift { 0% { transform: scale(1.04) translate(.6%, .3%); } 100% { transform: scale(1.11) translate(-.8%, -.5%); } }
.room { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; transition: filter .08s; }
.stage.dip .room { filter: brightness(.55) contrast(1.15); }
.stage.dip .bloom, .stage.dip .lamp { opacity: .1 !important; }
.stage.dip .scr { opacity: .15 !important; }
.bloom { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; opacity: .75; animation: flick 3.4s infinite; }
.spill { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; animation: flick 6.1s infinite;
  background: radial-gradient(22% 24% at 24% 52%, rgba(255, 120, 40, .16), transparent 70%), radial-gradient(30% 30% at 62% 50%, rgba(70, 110, 255, .2), transparent 70%), radial-gradient(12% 16% at 6% 45%, rgba(255, 170, 80, .14), transparent 70%); }
.scr { position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none; animation: flick 3.7s infinite; }
.scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 0 47%, rgba(255, 255, 255, .2) 50%, transparent 53%) 0 0 / 100% 260%; animation: roll 5s linear infinite; }
.scr.s1 { background: rgba(110, 120, 255, .08); animation-duration: 3.1s; }
.scr.s2 { background: rgba(70, 120, 255, .2); animation-duration: 5.3s; animation-delay: -2s; }
.scr.s3 { background: rgba(70, 120, 255, .22); animation-duration: 2.6s; animation-delay: -1s; }
.scr.s3::after { animation-duration: 6.4s; }
@keyframes flick { 0%, 100% { opacity: 1; } 7% { opacity: .82; } 8% { opacity: 1; } 31% { opacity: .95; } 33% { opacity: .6; } 34% { opacity: 1; } 62% { opacity: .9; } 63% { opacity: 1; } 81% { opacity: .75; } 82% { opacity: .98; } }
@keyframes roll { 0% { background-position: 0 120%; } 100% { background-position: 0 -120%; } }
.lamp { position: absolute; width: 16%; aspect-ratio: 1; transform: translate(-50%, -40%); border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 175, 90, .32), rgba(255, 140, 60, .08) 55%, transparent); animation: flick 4.7s infinite; }
.led { position: absolute; width: .3%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: screen; background: var(--c); box-shadow: 0 0 6px 2px var(--c); animation: led 1s steps(1) infinite; }
@keyframes led { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
.win { position: absolute; width: .45%; height: .55%; transform: translate(-50%, -50%); background: #ffd9a0; mix-blend-mode: screen; opacity: .0; animation: win 9s ease-in-out infinite; box-shadow: 0 0 5px 1px rgba(255, 200, 140, .5); }
@keyframes win { 0%, 40%, 100% { opacity: 0; } 50%, 80% { opacity: .55; } }
/* a censor bar across the eyes of the portrait on the wall */
.censor { position: absolute; width: 5.2%; height: 2.6%; background: #050505; transform: rotate(-1.5deg); box-shadow: 0 2px 0 -1px var(--acc), 0 6px 14px rgba(0, 0, 0, .6); }
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.fx::after { content: ""; position: absolute; inset: -50%; opacity: .13; animation: grain .5s steps(4) infinite;
  background-image: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain { 0% { transform: translate(0, 0) } 25% { transform: translate(-7%, 4%) } 50% { transform: translate(5%, -6%) } 75% { transform: translate(-3%, -8%) } 100% { transform: translate(6%, 3%) } }
.shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0, 0, 0, .65)), linear-gradient(transparent 50%, rgba(5, 5, 5, .88) 92%, #050505); }
.scan { position: absolute; width: 16%; aspect-ratio: .95; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; }
.scan i { position: absolute; width: 22%; height: 22%; border: 0 solid rgba(236, 236, 234, .9); }
.scan i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; } .scan i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.scan i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; } .scan i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.scan.lock i { border-color: var(--red); }
.scan .lab { position: absolute; left: calc(100% + 10px); top: 0; font-size: 10px; letter-spacing: .08em; white-space: nowrap; line-height: 1.6; text-shadow: 0 0 10px #000; }
.scan .lab b { color: var(--red); font-weight: 500; }
.iui { position: absolute; inset: 0; padding: 18px max(16px, env(safe-area-inset-left, 0px)) 22px; display: grid; grid-template-rows: auto 1fr auto; font-size: 11px; letter-spacing: .05em; z-index: 2; pointer-events: none; }
.iui a, .iui button { pointer-events: auto; }
.iui .bar-top { display: flex; justify-content: space-between; gap: 16px; }
.iui .tr { display: inline-flex; gap: 18px; align-items: center; }
.snd { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: #ececea; opacity: .75; }
.snd:hover { opacity: 1; }
.snd i { display: inline-flex; gap: 2px; align-items: flex-end; height: 9px; }
.snd i::before, .snd i::after { content: ""; width: 2px; height: 3px; background: currentColor; }
.snd.on { opacity: 1; color: var(--blue); }
.snd.on i::before { animation: eq .5s ease-in-out infinite alternate; } .snd.on i::after { animation: eq .5s ease-in-out -.25s infinite alternate; }
@keyframes eq { to { height: 9px; } }
/* intercepted transmissions: real ledger events, typed out over the scene */
.intercepts { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); top: 52px; width: min(330px, 70vw); display: grid; gap: 8px; z-index: 3; pointer-events: none; }
.icp { background: rgba(5, 5, 5, .72); border: 1px solid rgba(236, 236, 234, .25); border-left: 2px solid var(--red); padding: 8px 10px 7px; font-size: 10.5px; letter-spacing: .06em; backdrop-filter: blur(2px); animation: icp-in .35s steps(4); transition: opacity .6s; }
.icp .h { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.icp .h b { color: var(--red); font-weight: 500; }
.icp .t { min-height: 1.35em; }
.icp.out { opacity: 0; }
@keyframes icp-in { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.rec { display: inline-flex; align-items: center; gap: 7px; }
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: blink 1.1s steps(1) infinite; flex: none; }
@keyframes blink { 50% { opacity: 0; } }
.ihead { align-self: end; max-width: min(1100px, 100%); }
.ihead h1 { font: 800 clamp(34px, 6.4vw, 100px)/.82 var(--display); margin: 0 0 18px; letter-spacing: -.01em; text-shadow: 0 0 30px rgba(0, 0, 0, .6); }
.ihead h1 .acc { color: var(--blue); }
.ihead p { margin: 0; max-width: 46ch; }
.ibot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 16px; margin-top: 22px; }
.ica { grid-column: 2; display: grid; gap: 7px; width: min(460px, 42vw); }
.lbl { display: flex; justify-content: space-between; gap: 16px; }
.iact { grid-column: 3; justify-self: end; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#intro .btn { border-color: #ececea; color: #ececea; } #intro .btn:hover { background: #ececea; color: #050505; }
#intro .btn.xbtn { background: #ececea; color: #050505; } #intro .btn.xbtn:hover { background: var(--acc); border-color: var(--acc); }
#intro .lnk:hover { color: var(--acc); }
.arr { display: inline-block; animation: nudge 1.6s ease-in-out infinite; } @keyframes nudge { 50% { transform: translateY(3px); } }
.floats { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fl { position: absolute; transform: translate(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px)); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.fl > div { animation: hover 7s ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes hover { 0%, 100% { transform: translateY(0) rotate(var(--r0, -3deg)); } 50% { transform: translateY(-16px) rotate(var(--r1, 2deg)); } }
.fl.far { filter: blur(1.6px); opacity: .7; }
.card { background: #050505; border: 1px solid rgba(236, 236, 234, .75); padding: 5px 5px 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
.card img { display: block; image-rendering: pixelated; }
.card span { display: flex; justify-content: space-between; font-size: 8px; margin-top: 4px; letter-spacing: .08em; gap: 10px; }
.card span b { color: var(--red); font-weight: 500; }
/* waving DPRK flags: the flag image is sliced into 16 strips that bob out of phase */
:root { --dprk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 36' preserveAspectRatio='none'%3E%3Crect width='72' height='36' fill='%23024fa2'/%3E%3Crect y='6' width='72' height='24' fill='%23fff'/%3E%3Crect y='7' width='72' height='22' fill='%23ed1c27'/%3E%3Ccircle cx='24' cy='18' r='7.2' fill='%23fff'/%3E%3Cpath fill='%23ed1c27' d='M24 11.2l1.6 4.9h5.2l-4.2 3 1.6 4.9-4.2-3-4.2 3 1.6-4.9-4.2-3h5.2z'/%3E%3C/svg%3E"); }
.flag { position: relative; display: flex; aspect-ratio: 2 / 1; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .55)); }
.flag::before { content: ""; position: absolute; left: -3px; top: -6%; width: 2px; height: 190%; background: linear-gradient(#ececea, rgba(236, 236, 234, .15)); }
.flag i { flex: 1; background-image: var(--dprk); background-size: 1600% 100%; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(7%); filter: brightness(.72); } }
.ko { font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; letter-spacing: 0; }
.stamp { border: 2px solid var(--blue); color: var(--blue); padding: 7px 10px 5px; font: 800 24px/1 var(--display); background: rgba(5, 5, 5, .55); letter-spacing: .04em; }

/* ---------- masthead + hero ---------- */
.mast { font: 800 clamp(24px, 6.9vw, 90px)/.82 var(--display); letter-spacing: -.02em; margin: 0; padding-top: 14px; white-space: nowrap; display: flex; justify-content: space-between; }
.mast .x { font-weight: 500; color: var(--dim); }
.hero { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.art { container-type: inline-size; min-width: 0; }
.art pre { margin: 0; font: 400 calc(100cqw / var(--cols, 76) / .6)/1.2 var(--mono); letter-spacing: 0; text-transform: none; user-select: none; cursor: crosshair; color: var(--fg); white-space: pre; overflow: hidden; }
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: end; }
.notes p { margin: 0; }
.notes .wide { grid-column: 1 / -1; display: grid; gap: 8px; }
.ca-box { display: block; width: 100%; text-align: left; border: 1px solid var(--line); padding: 11px 14px 10px; font-size: 12px; letter-spacing: .04em; background: none; cursor: pointer; transition: color .15s, border-color .15s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-box[data-copy], .ca-box.addr { text-transform: none; } /* addresses are case-sensitive: never uppercase them */
.ca-box:hover, .ca-box:focus-visible { border-color: var(--fg); }
.ca-box.ok { border-color: var(--acc); color: var(--acc); }
#intro .ca-box { border-color: rgba(236, 236, 234, .35); background: rgba(5, 5, 5, .45); }
#intro .ca-box:hover { border-color: #ececea; }
.keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 46px 0 0; padding: 0; list-style: none; }
.keys li { display: flex; gap: 8px; align-items: flex-start; }
.cap { display: grid; grid-template-rows: 1fr 1fr; flex: none; }
kbd { font: 9px/1 var(--mono); width: 16px; height: 12px; display: grid; place-items: center; border: 1px solid var(--fg); margin-top: -1px; }
.keys button { all: unset; cursor: pointer; display: block; line-height: 13px; }
.keys button:hover, .keys button.on { background: var(--fg); color: var(--bg); }

/* ---------- sections ---------- */
section.s { padding-top: 72px; scroll-margin-top: 12px; }
h2 { font: 800 clamp(34px, 5.4vw, 58px)/.9 var(--display); margin: 0 0 28px; letter-spacing: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sec-head h2 { margin: 0; }
.mani { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.spread { max-width: 560px; display: grid; gap: 22px; font-size: clamp(13px, 1.6vw, 17px); line-height: 1.15; }
.spread p { margin: 0; }
.spread span { display: block; text-align: justify; text-align-last: justify; }
.list { border-top: 1px solid var(--line); }
.row { border-bottom: 1px solid var(--line); padding: 14px 0 12px; }
.row-head { display: flex; justify-content: space-between; gap: 16px; }
.row h3 { font: 400 clamp(15px, 2.1vw, 22px) var(--mono); margin: 4px 0 6px 32px; letter-spacing: .03em; }
.row h3 .sh { color: var(--dim); }
.row button.tg { all: unset; cursor: pointer; margin-left: 32px; color: var(--dim); }
.row button.tg:hover { color: var(--acc); }
.row .more { margin: 10px 0 2px 32px; max-width: 58ch; text-transform: none; font-size: 13px; line-height: 1.5; color: var(--dim); }
.stairs { font-size: clamp(14px, 1.9vw, 19px); line-height: 1.3; display: grid; gap: 2px; }
.stairs div { display: flex; gap: 10px; }
.stairs .t { transition: color .15s; }
.stairs div:hover .t, .stairs div:last-child .t { color: var(--acc); }

/* ---------- coins ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tabs button { all: unset; cursor: pointer; padding: 4px 8px 3px; border: 1px solid var(--line); }
.tabs button:hover { border-color: var(--fg); } .tabs button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.search { width: 240px; max-width: 100%; border: 1px solid var(--line); background: none; padding: 6px 10px; outline: none; }
.search:focus { border-color: var(--fg); }
.coins { border-top: 1px solid var(--line); }
.coin { display: grid; grid-template-columns: 36px minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)) 18px; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 0; transition: color .15s; }
.coin:hover { color: var(--acc); }
.coin.head { padding: 8px 0; color: var(--dim); font-size: 10px; }
.coin.head:hover { color: var(--dim); }
.coin .pic { width: 36px; height: 36px; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; background: #111; }
.coin .pic img { width: 100%; height: 100%; object-fit: cover; }
.coin .nm { min-width: 0; } .coin .nm span { color: var(--dim); }
.coin .nm div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin .r { text-align: right; white-space: nowrap; }
.empty { border-bottom: 1px solid var(--line); padding: 28px 0; color: var(--dim); }
/* coins list before the first launch: a scanner sweeping an empty line-up */
.awaiting { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 38px 0; }
.awaiting .aw-l { display: grid; gap: 6px; }
.awaiting .rec { font-size: 14px; }
.awaiting .sweep { position: absolute; top: 0; bottom: 0; width: 22%; background: linear-gradient(90deg, transparent, rgba(236, 236, 234, .07), transparent); border-right: 1px solid rgba(236, 236, 234, .25); animation: sweep 3.2s linear infinite; pointer-events: none; }
@keyframes sweep { from { left: -22%; } to { left: 100%; } }
.empty b { color: var(--fg); font-weight: 400; }

/* ---------- launch ---------- */
.launch { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: start; }
.launch > * { min-width: 0; }
.fields { border-top: 1px solid var(--line); }
.field { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 0; }
.field > label { color: var(--dim); display: flex; justify-content: space-between; gap: 8px; }
.field > label i { font-style: normal; }
.field input, .field textarea { width: 100%; background: none; border: 0; outline: none; padding: 6px 0; text-transform: none; font-size: 13px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); text-transform: uppercase; }
.pick { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pick .pv { width: 48px; height: 48px; border: 1px dashed var(--dim); display: grid; place-items: center; overflow: hidden; flex: none; }
.pick .pv img { width: 100%; height: 100%; object-fit: cover; }
.pick:hover .pv { border-color: var(--acc); }
dl { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
dt, dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); }
dt { color: var(--dim); padding-right: 28px; white-space: nowrap; }
dd { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dd a:hover { color: var(--acc); }
.err { color: var(--red); }
.hint { color: var(--dim); text-transform: none; font-size: 12px; line-height: 1.5; margin: 12px 0 0; }

/* ---------- monero pair ---------- */
.pair { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pair .big { font: 800 clamp(28px, 4.3vw, 56px)/.85 var(--display); margin: 0 0 26px; }
.pair .copy { text-transform: none; font-size: 14px; line-height: 1.55; max-width: 46ch; margin: 0 0 22px; }
.coin-art { max-width: 520px; justify-self: end; width: 100%; }
.coin-art pre { color: var(--acc); }

/* ---------- ledger ---------- */
.ev { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto 90px; gap: 16px; border-bottom: 1px solid var(--line); padding: 10px 0; align-items: baseline; }
.ev .k { color: var(--dim); } .ev .k.hot { color: var(--acc); }
.ev .w { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .w a:hover { color: var(--acc); }
.ev .a { text-align: right; white-space: nowrap; }
.ev .tx { text-align: right; color: var(--dim); white-space: nowrap; }
.ev a.tx:hover { color: var(--acc); }

/* ---------- terminal ---------- */
.ask { font: 800 clamp(32px, 6.4vw, 76px)/.95 var(--display); margin: 0 0 26px; text-wrap: balance; }
.term { border: 1px solid var(--line); padding: 16px; max-width: 640px; text-transform: none; font-size: 13px; }
.log { min-height: 96px; display: grid; gap: 4px; align-content: end; white-space: pre-wrap; word-break: break-word; }
.log .u { color: var(--dim); }
.prompt { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.prompt input { flex: 1; min-width: 0; background: none; border: 0; outline: none; text-transform: none; caret-color: var(--acc); }

/* ---------- coin page ---------- */
.cmast { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; padding-top: 28px; }
.cmast .pic { width: clamp(84px, 12vw, 150px); aspect-ratio: 1; border: 1px solid var(--line); overflow: hidden; flex: none; background: #111; }
.cmast .pic img { width: 100%; height: 100%; object-fit: cover; }
.cmast > div { min-width: 0; flex: 1; }
.cmast h1 { font: 800 clamp(40px, 9vw, 120px)/.82 var(--display); margin: 0; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cmast .sub { margin-top: 12px; color: var(--dim); }
.cgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; margin-top: 40px; align-items: start; }
.cgrid > * { min-width: 0; }
.vault-n { font: 800 clamp(40px, 6vw, 72px)/.9 var(--display); color: var(--acc); margin: 6px 0 18px; overflow-wrap: anywhere; }
.opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; width: 100%; border-bottom: 1px solid var(--line); padding: 11px 0; position: relative; }
.opt:hover, .opt.mine { color: var(--acc); }
.opt .bar { position: absolute; left: 0; bottom: -1px; height: 1px; background: var(--acc); }
.chat .log { min-height: 260px; max-height: 360px; overflow-y: auto; align-content: start; }
.chat .log .me { color: var(--acc); }
.back { display: inline-block; margin-top: 18px; }

/* ---------- footer ---------- */
footer { margin-top: 90px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; font-size: 10px; align-items: end; }
footer a:hover { color: var(--acc); }
footer > :nth-child(2), footer > :nth-child(3) { text-align: center; } footer > :last-child { text-align: right; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 300; background: var(--fg); color: var(--bg); padding: 9px 14px; font-size: 11px; }
.modal { position: fixed; inset: 0; z-index: 250; background: rgba(5, 5, 5, .82); display: grid; place-items: center; padding: 16px; }
.modal .term { background: var(--bg); width: 100%; max-width: 480px; }
.modal .steps { display: grid; gap: 6px; margin: 12px 0; text-transform: uppercase; font-size: 12px; }
.modal .steps div { color: var(--dim); } .modal .steps .on { color: var(--fg); } .modal .steps .done { color: var(--acc); }

@media (max-width: 720px) {
  .hero, .pair, .launch, .cgrid { grid-template-columns: 1fr; }
  .notes { grid-template-columns: 1fr; gap: 18px; }
  .mani { grid-template-columns: 1fr; gap: 36px; }
  .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  footer { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  footer > * { text-align: left !important; }
  .row h3, .row button.tg, .row .more { margin-left: 0; }
  .fl.m-hide { display: none; }
  .ibot { grid-template-columns: minmax(0, 1fr); }
  .ica { grid-column: 1; width: 100%; }
  .iact { grid-column: 1; justify-self: start; justify-content: flex-start; }
  .iui .bar-top { font-size: 9.5px; gap: 10px; }
  .coin { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .coin .h-m, .coin.head { display: none; }
  .field { grid-template-columns: 1fr; gap: 4px; }
  .ev { grid-template-columns: minmax(0, 1fr) auto; }
  .ev .k { grid-column: 1 / -1; } .ev .tx { display: none; }
  .scan .lab { font-size: 9px; left: 0; top: calc(100% + 6px); }
  .iui .tr { gap: 10px; }
  .intercepts { top: auto; bottom: 44%; }
  .coin-art { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .fx::after, .fl > div, .arr, .rec::before, .flag i, .drift, .bloom, .spill, .scr, .scr::after, .lamp, .led, .win { animation: none !important; } }