/* The public site (docs/public.md — ported; the canvas «moood.me»): one column that lays out wider on a wide screen, the system's
   font, white or night — as the device says, or as chosen here (html[data-theme]: the footer's switch) —, one dark
   button colour, grey for what is second. Gold only in the sign. */

:root {
  --bg: #FFFFFF; --ink: #111418; --muted: #6B7078; --line: #E6E6E3; --logo: #1D2433; --btn: #111418; --btn-ink: #FFFFFF;
  --field: #D6D6D2; --soft: #F4F4F2; --gold: #E8C98A; --danger: #B3261E;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0E1116; --ink: #E6E8EC; --muted: #8B93A0; --line: #222832; --logo: #E6E8EC; --btn: #E6E8EC;
    --btn-ink: #0E1116; --field: #2E3440; --soft: #161A21; --danger: #F2867E; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0E1116; --ink: #E6E8EC; --muted: #8B93A0; --line: #222832; --logo: #E6E8EC; --btn: #E6E8EC;
  --btn-ink: #0E1116; --field: #2E3440; --soft: #161A21; --danger: #F2867E; color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--muted); }
a.muted, .muted, .muted a { color: var(--muted); }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 500; line-height: 1.25; margin: 0; }
p { margin: 0; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px 72px; }
.narrow { max-width: 680px; }
@media (max-width: 600px) { .wrap { padding: 0 16px 56px; } }

/* the sign: italic Georgia, a moon over the m, the middle o gold, .me paler — the same on every page */
.brand { text-decoration: none; font: italic 26px/1 Georgia, "Times New Roman", serif; color: var(--logo); }
.brand:hover { color: var(--logo); }
.brand .m { position: relative; }
.brand .m::after { content: ""; position: absolute; left: 0.46em; top: 0.15em; width: 0.15em; height: 0.15em; border-radius: 50%; background: var(--gold); }
.brand .moon { color: var(--gold); }
.brand .tld { opacity: 0.55; }

header.top { display: flex; align-items: center; gap: 24px; padding: 28px 0 0; flex-wrap: wrap; }
header.top .brand { flex-grow: 1; }
header.top a:not(.brand) { font-size: 14px; color: var(--muted); text-decoration: none; padding: 10px 0; }
/* the switch of language: a globe (at the foot, the page's language beside it) dropping the languages down — at the
   foot, up */
.js .words { display: none; }
.lang { position: relative; font-size: 14px; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--muted); padding: 6px; border-radius: 6px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--ink); }
.lang summary svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lang .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; gap: 2px; min-width: 140px; padding: 6px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.lang .menu > * { padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.lang .menu b { font-weight: 600; color: var(--ink); }
.lang .menu a, header.top .lang .menu a { color: var(--ink); text-decoration: none; padding: 6px 10px; font-size: 14px; }
.lang .menu a:hover { background: var(--soft); }
footer .lang .menu { top: auto; bottom: calc(100% + 4px); }
footer > .tail { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
footer > .tail > .theme { margin-left: 0; }
header.top .me { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; }
header.top .me img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* buttons: the one dark kind, the outlined, the plain link-like */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 6px; border: 0;
  background: var(--btn); color: var(--btn-ink); text-decoration: none; cursor: pointer; font-size: 15px; }
.btn:hover { color: var(--btn-ink); opacity: 0.88; }
.btn.line { background: none; color: var(--ink); border: 1px solid var(--field); }
.btn.line:hover { color: var(--ink); border-color: var(--muted); }
.plain { border: 0; background: none; padding: 8px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.plain:hover { color: var(--ink); }

input[type=email], input[type=text], textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--field);
  border-radius: 6px; padding: 10px 12px; width: 100%; }
textarea { resize: vertical; }
label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.error { color: var(--danger); font-size: 14px; }

/* a game's stills: its scenes' pictures, one at a time — the pointer across them goes through them all (a finger: a
   swipe, one); the marks below say which, and along them — a finger too — go through them all; a click brings it near */
.stills { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stills .pic { display: block; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--soft) center / cover no-repeat; touch-action: pan-y;
  cursor: zoom-in; outline-offset: 3px; }
.stills .pic[role=img] { cursor: default; }
.stills .marks { display: flex; align-items: center; gap: 4px; height: 24px; margin: -10px 0 -10px; touch-action: none; cursor: ew-resize; }
.stills .marks span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background 0.15s; }
.stills .marks span.on { background: var(--muted); }

/* brought near: the picture grows into a big frame where the scene comes alive; the game's panel beside it */
html.zoomed { overflow: hidden; }
.zoom { position: fixed; inset: 0; z-index: 30; }
.zoom .veil { position: absolute; inset: 0; background: rgba(8, 10, 14, 0.82); opacity: 0; transition: opacity 0.4s ease; }
.zoom.open .veil { opacity: 1; }
.zoom .frame { position: fixed; border-radius: 6px; overflow: hidden; background: #07080c center / cover no-repeat;
  transition: left 0.4s cubic-bezier(.2, .8, .2, 1), top 0.4s cubic-bezier(.2, .8, .2, 1), width 0.4s cubic-bezier(.2, .8, .2, 1), height 0.4s cubic-bezier(.2, .8, .2, 1); }
.zoom .frame img, .zoom .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
/* the picture over the live scene till it has drawn itself, then gone */
.zoom .frame img { z-index: 1; transition: opacity 0.5s ease; pointer-events: none; }
.zoom .frame img.gone { opacity: 0; }
/* waiting for the scene, over its picture: a slow ring in the middle (as the dev site's viewer: scene/nav.css), and
   under it «the scene will come alive» — what it waits for */
.zoom .frame .wait { position: absolute; left: 50%; top: 50%; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: rgba(255, 236, 200, 0.85); opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease; animation: zoom-wait 1s linear infinite; }
@keyframes zoom-wait { to { transform: rotate(1turn); } }
.zoom .frame .said { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, 30px); white-space: nowrap; padding: 4px 12px;
  border-radius: 999px; font-size: 13px; line-height: 1.4; color: #E8E2D6; background: rgba(10, 12, 18, 0.72); opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease; }
.zoom .frame .said:empty { display: none; }
.zoom.open .frame.waiting .wait, .zoom.open .frame.waiting .said { opacity: 1; transition-delay: 0.4s; }
/* the scene will not come (this device cannot show it, or it could not be shown): its words alone, no ring */
.zoom .frame.cannot .wait { display: none; }
.zoom .frame.cannot .said { transform: translate(-50%, -50%); }
/* what one can do in the scene alive: in its corner, quiet till the pointer is over it */
.zoom .frame .can { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: 6px; pointer-events: none;
  opacity: 0.75; transition: opacity 0.3s ease; }
.zoom .frame:hover .can { opacity: 1; }
.zoom .frame .can span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px;
  background: rgba(10, 12, 18, 0.55); color: #E8E2D6; font-size: 13px; animation: zoom-can 0.4s ease both; }
.zoom .frame .can svg { width: 18px; height: 18px; stroke-width: 1.6; }
.zoom .frame .can em { font-style: normal; white-space: nowrap; }
@keyframes zoom-can { from { opacity: 0; transform: translateY(-4px); } }
/* the whole screen for the scene (on a phone: turned across), in the other corner */
.zoom .frame .full { position: absolute; right: 12px; top: 12px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; background: rgba(10, 12, 18, 0.55); color: #E8E2D6; opacity: 0.75; }
.zoom .frame:hover .full { opacity: 1; }
.zoom .frame:fullscreen { border-radius: 0; }
@media (max-width: 600px) { .zoom .frame .can em { display: none; } }
/* the scenes along the frame's foot, under it: the pointer moved along them looks them through */
.zoom > .marks { position: fixed; z-index: 1; height: 28px; display: flex; align-items: center; gap: 4px; cursor: ew-resize; opacity: 0;
  transition: opacity 0.3s ease 0.15s; }
.zoom.open > .marks { opacity: 1; }
.zoom > .marks span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.zoom > .marks span.on { background: #FFFFFF; }
.zoom .side { position: fixed; right: 40px; top: 50%; transform: translateY(-50%); width: 300px; color: #E6E8EC; opacity: 0;
  transition: opacity 0.3s ease 0.15s; display: flex; flex-direction: column; gap: 24px; }
.zoom.open .side { opacity: 1; }
.zoom .side a, .zoom .side .meta, .zoom .side .meta a { color: #E6E8EC; }
.zoom .side .meta, .zoom .side .plain { color: #A9B0BB; }
.zoom .side .btn { background: #E6E8EC; color: #0E1116; }
.zoom .side .btn.line { background: none; color: #E6E8EC; border-color: #4A5260; }
.zoom .side h3 { font-size: 24px; }
.zoom .side .soon h3 a, .zoom .side .soon .line { color: #A9B0BB; }
.zoom .turn { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #A9B0BB; }
.zoom button { cursor: pointer; }
.zoom .turn button, .zoom .close { width: 44px; height: 44px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #E6E8EC;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zoom .close { position: fixed; top: 16px; right: 16px; }
.zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .zoom .side { left: 16px; right: 16px; top: auto; bottom: 20px; transform: none; width: auto; gap: 14px; }
}

/* the main page */
.intro { margin-top: 72px; max-width: 640px; font-size: 21px; line-height: 1.45; }
.intro + p { margin-top: 12px; max-width: 640px; color: var(--muted); font-size: 15px; }
.section-title { margin: 0 0 12px; font-size: 14px; font-weight: 500; color: var(--muted); }
.going { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px 24px; }
.going a { display: flex; gap: 16px; align-items: center; text-decoration: none; min-width: 0; }
.going .pic { width: 144px; height: 81px; border-radius: 4px; flex-shrink: 0; background: var(--soft) center / cover no-repeat; }
.going .t { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.going .w { font-size: 14px; color: var(--muted); }
nav.genres { margin-top: 64px; display: flex; gap: 8px 24px; flex-wrap: wrap; font-size: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
nav.genres a { text-decoration: none; }
.genre { margin-top: 64px; }
.genre > h2 { margin: 0 0 8px; font-size: 22px; }
.game-row { display: flex; flex-wrap: wrap; gap: 20px 48px; padding: 20px 0 28px; }
.game-row .stills-box { flex: 3 1 480px; min-width: 0; }
.game-row .panel-box { flex: 2 1 280px; }
.about { display: flex; flex-direction: column; gap: 6px; }
.about h3 { font-size: 24px; }
.about h3 a, .sketch-panel h3 a { text-decoration: none; }
.about .line { margin-top: 10px; font-size: 15px; }
/* coming: not ready yet — the name and what it is in grey, nothing to press but «Tell me»; the picture smaller, at the
   right */
.soon h3 a, .soon h1, .soon .line { color: var(--muted); }
.coming .game-row { flex-direction: row-reverse; justify-content: flex-end; }
.coming .game-row .stills-box { flex: 0 1 400px; }
.coming .game-row .panel-box { flex: 1 1 320px; }
.meta { color: var(--muted); font-size: 15px; }
.meta a { color: var(--muted); }
.actions { margin-top: 18px; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.asked { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--muted); }
.asked .row { display: flex; gap: 4px 16px; flex-wrap: wrap; align-items: center; }
.panel { margin-top: 64px; padding: 28px; border-radius: 6px; border: 1px dashed var(--field); display: flex; flex-direction: column; gap: 8px; }
.panel h2 { font-size: 22px; }
.panel p { font-size: 15px; max-width: 560px; }
/* how it was made: a line of its own, a page's sign in colour */
.made { margin: 10px 0 0; font-size: 15px; }
.made a { display: inline-flex; align-items: center; gap: 7px; }
.made svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #9A7434; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.made svg .leaf { fill: var(--gold); }
.news { margin-top: 64px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex;
  align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.news > span:first-child { flex: 1 1 320px; }
.news .all { margin-left: auto; }
/* the stories in a list: a cover at the left, its name, a line or two, when */
.told { margin-top: 80px; }
.page .told { margin-top: 8px; }
.told .head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.told .head h2 { font-size: 22px; margin: 0; }
.told .list { display: flex; flex-direction: column; gap: 24px; }
.story-card { display: flex; gap: 20px; align-items: flex-start; text-decoration: none; color: var(--ink); max-width: 760px; }
.story-card .pic { width: 200px; aspect-ratio: 16 / 10; border-radius: 3px; flex-shrink: 0; background: var(--soft) center / cover no-repeat;
  background-image: var(--cover); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .story-card .pic { background-image: var(--cover-dark); } }
:root[data-theme="dark"] .story-card .pic { background-image: var(--cover-dark); }
.story-card > span:last-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.story-card .t { font-size: 18px; }
.story-card .w { font-size: 15px; color: var(--muted); }
.story-card .when { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .story-card { flex-direction: column; gap: 10px; } .story-card .pic { width: 100%; } }
.sketches { margin-top: 80px; }
.sketches .head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sketches .head h2 { font-size: 22px; }
.sketches .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px 20px; }
.sketches .grid a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; font-size: 15px; }
.sketches .grid .pic { display: block; aspect-ratio: 16 / 10; border-radius: 3px; background: var(--soft) center / cover no-repeat; }
footer { margin-top: 112px; padding: 24px 0 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px 28px; flex-wrap: wrap; font-size: 15px; }
footer > a { display: inline-flex; align-items: center; gap: 7px; }
footer > a.brand { display: inline; font-size: 20px; margin-right: 4px; }
footer > a svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* a game's page */
.game { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 40px 56px; }
.game .stills-box { flex: 999 1 560px; min-width: 0; }
.game .about { flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px; }
.game h1 { font-size: 32px; }

/* pages of text: about, a game's story, an idea, the profile, signing in */
.page { margin-top: 56px; display: flex; flex-direction: column; gap: 16px; }
.page h1 { font-size: 32px; }
.page h2 { font-size: 22px; margin-top: 32px; }
.page .lead { font-size: 19px; }
.page img { max-width: 100%; border-radius: 4px; }
.page section { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
/* a story: a picture made smaller for the column (its original a click away, over the page), its caption — the italic
   line under it —, videos, sounds, rows of pictures, quotes, parts folded away */
.page a.pic { display: block; cursor: zoom-in; }
.page a.pic img { display: block; }
.page video { display: block; max-width: 100%; border-radius: 4px; background: #000; }
.page audio { display: block; width: 100%; }
.page p:has(> a.pic) > i, .page p:has(> video) > i, .page p:has(> audio) > i { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; }
.page button.unmute { display: inline-block; margin-top: 8px; border: 0; background: none; padding: 6px 0; font: inherit; font-size: 14px;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.page blockquote { margin: 4px 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--field); font-size: 18px; line-height: 1.5; }
.page blockquote.caution { padding: 14px 18px 14px 56px; border: 0; border-radius: 6px; color: #FFFFFF;
  background: #B3261E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 23 21H1z' fill='%23fff' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12 9v6' stroke='%23B3261E' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='18' r='1.4' fill='%23B3261E'/%3E%3C/svg%3E") no-repeat 18px 16px / 24px 24px; }
.page blockquote.caution a { color: #FFFFFF; }
.page details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
.page details summary { cursor: pointer; color: var(--muted); font-size: 15px; }
.page details[open] summary { margin-bottom: 12px; }
.page details > div { display: flex; flex-direction: column; gap: 16px; }
.page img { height: auto; }
.pic-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.pic-row figure { flex: var(--ar) 1 calc(var(--ar) * 180px); margin: 0; }
.pic-row::after { content: ''; flex: 1 1 0; }
.pic-row figure img { width: 100%; height: auto; border-radius: 4px; }
.pic-row figcaption { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.4; }
/* a game's card in a story: the main page's row, sized for the column (side by side while it fits) */
.page .game-row { gap: 16px 32px; padding: 8px 0 12px; }
.page .game-row .stills-box { flex-basis: 360px; }
.page .game-row .panel-box { flex-basis: 240px; }
/* the original over the page: at its own size if it fits, else fitted to the height; a very wide one scrolls sideways */
.original { position: fixed; inset: 0; z-index: 40; background: rgba(8, 10, 14, 0.94); overflow: auto; cursor: zoom-out; display: flex; }
.original img { max-height: 100vh; max-width: none; height: auto; margin: auto; display: block; }
@media (max-aspect-ratio: 1/1) { .original img { max-width: 100vw; max-height: none; } }
.check { display: flex; gap: 10px; align-items: center; font-size: 16px; color: var(--ink); margin: 0; }
.check input { width: 20px; height: 20px; }

/* the profile: who, what they asked to be told of, signing out — and, apart, the danger zone */
.profile { margin-top: 56px; display: flex; flex-direction: column; gap: 40px; }
.profile .who { display: flex; align-items: center; gap: 16px; }
.profile .who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.profile .who h1 { font-size: 28px; }
.profile section { display: flex; flex-direction: column; gap: 14px; }
.profile section > h2 { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.profile .rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; }
.profile .rows > * { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; margin: 0; }
.profile .rows > * + * { border-top: 1px solid var(--line); }
.profile .zone { border: 1px solid var(--danger); border-radius: 8px; padding: 18px; display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.profile .zone p { flex: 1 1 260px; color: var(--muted); font-size: 14px; }
.profile .zone p b { display: block; color: var(--ink); font-size: 16px; font-weight: 500; margin-bottom: 2px; }
.btn.danger { background: none; color: var(--danger); border: 1px solid var(--danger); }
.btn.danger:hover { color: var(--danger); opacity: 0.8; }

/* the theme: as the device says, light, dark — the foot's switch (each its sign), the top's (the next one) */
.theme { margin-left: auto; display: inline-flex; gap: 2px; }
.theme button, .theme-next { border: 0; background: none; color: var(--muted); padding: 6px; border-radius: 6px; cursor: pointer; display: inline-flex; }
.theme button[aria-pressed="true"] { background: var(--soft); color: var(--ink); }
.theme svg, .theme-next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme button:hover, .theme-next:hover { color: var(--ink); }
.theme-next { align-items: center; gap: 6px; font: inherit; font-size: 13px; }
.theme-next .said { animation: theme-said 2.5s ease forwards; white-space: nowrap; }
@keyframes theme-said { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* a little window: «Tell me» without a sign-in, the one question after it */
dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); padding: 24px; width: min(420px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(14, 17, 22, 0.45); }
dialog .row { display: flex; gap: 8px; margin-top: 4px; }
dialog .row input { flex: 1; }
dialog h2 { font-size: 18px; margin-bottom: 14px; }
dialog .close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--muted); }
dialog { position: fixed; }