:root {
  color-scheme: dark;
  font-family: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  --bg: #070d1c;
  --surface: #121729;
  --surface-light: #1a1d35;
  --field: #0d1222;
  --line: #384361;
  --text: #f4f7ff;
  --muted: #b2bdd6;
  --quiet: #93a3c0;
  --cyan: #39d9ff;
  --violet: #a27fff;
  --magenta: #ed79d7;
  --gradient: linear-gradient(105deg, #43d8ff 4%, #8297ff 49%, #eb82da 97%);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--text);
  background:
    radial-gradient(ellipse 58% 52% at 8% 29%, #073a6450 0%, transparent 72%),
    radial-gradient(ellipse 55% 59% at 95% 14%, #50266d4c 0%, transparent 77%),
    radial-gradient(ellipse 48% 40% at 55% 105%, #14276565 0%, transparent 77%),
    var(--bg);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .2;
  background-image: linear-gradient(#526b9828 1px, transparent 1px), linear-gradient(90deg, #526b9828 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse at 55% 35%, #000, transparent 78%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.shell { position: relative; max-width: 1510px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 72px); }
.page-beam { position: absolute; height: 1px; pointer-events: none; opacity: .6; }
.page-beam-a { left: -20%; right: 67%; top: 185px; background: linear-gradient(90deg, transparent, #21b9ed, transparent); transform: rotate(-19deg); }
.page-beam-b { right: -17%; left: 82%; top: 435px; background: linear-gradient(90deg, transparent, #dc54c4, transparent); transform: rotate(23deg); }
header { position: relative; z-index: 1; min-height: 94px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; letter-spacing: .19em; font-size: 16px; color: #f5f6ff; }
.brand b { font-weight: 700; }
.brand small { font-size: 11px; letter-spacing: .16em; font-weight: 700; color: #afc2df; }
nav { display: flex; align-items: center; gap: 10px; }
nav > a { text-decoration: none; font-size: 13px; font-weight: 600; color: #aebdda; padding: 9px 18px; }
nav > a:hover { color: var(--cyan); }
.lang { border: 1px solid #374362; border-radius: 10px; padding: 8px 13px; background: #151b2e; color: #b7bfd9; font-size: 12px; font-weight: 750; }
.lang.active { border-color: #7188ce; color: #fff; background: #394e86; }
.lang:hover { border-color: #93a9e7; }
main { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(40px, 5.4vw, 98px); padding: 28px 0 76px; min-height: calc(100vh - 161px); }
.intro { position: relative; isolation: isolate; padding: 25px 0 15px; min-width: 0; transform: translateY(-76px); }
.infinity-art {
  position: absolute; top: -98px; left: -90px; z-index: -1;
  width: clamp(310px, 35vw, 560px); height: auto; overflow: visible;
  user-select: none; pointer-events: none;
  opacity: .23;
  filter: drop-shadow(0 0 32px #4b75d76a);
}
.eyebrow { display: flex; align-items: center; gap: 10px; color: #9fd6f7; letter-spacing: .15em; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.eyebrow-mark { flex-shrink: 0; width: 10px; height: 10px; border: 2px solid var(--cyan); transform: rotate(45deg); box-shadow: 0 0 12px #22c8f788; }
h1 {
  margin: 24px 0 25px; font-size: clamp(43px, 3.4vw, 56px);
  font-family: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.025em; line-height: 1.17; text-wrap: balance;
}
h1 em { font-style: normal; white-space: nowrap; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 550px; margin: 0; font-size: clamp(16px, 1.13vw, 19px); line-height: 1.8; color: var(--muted); }
.topic-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 29px; }
.topic-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; font-size: 13px; font-weight: 600; color: #c5d5ee; border: 1px solid #334e6a; border-radius: 999px; background: #0c2034a6; }
.topic-chip:nth-child(2) { background: #251a3c88; border-color: #4d3c73; }
.topic-chip:nth-child(3) { background: #301d3b77; border-color: #61406e; }
.topic-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px #3dd9ff; }
.topic-chip:nth-child(2) i { background: var(--violet); box-shadow: 0 0 9px var(--violet); }
.topic-chip:nth-child(3) i { background: var(--magenta); box-shadow: 0 0 9px var(--magenta); }
.guestbook-note { max-width: 555px; margin-top: 42px; padding: 21px 23px; border-radius: 17px; border: 1px solid #335875; background: linear-gradient(116deg, #122a4099, #251c3d77); box-shadow: 0 15px 45px #01061433; }
.guestbook-note strong { display: block; font-size: 15px; font-weight: 650; }
.guestbook-note p { margin: 7px 0 0; font-size: 14px; color: #c3d0e6; line-height: 1.7; }
.footer-left { margin-top: 29px; color: #91a7c6; font-size: 12px; }
.footer-left span { color: #52bee3; margin: 0 5px; }
.card { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 3.2vw, 40px); border: 1px solid #445478; border-radius: 25px; background: linear-gradient(151deg, #1b2037f2 0%, #141629fa 62%, #1c152bf2 100%); box-shadow: 0 27px 108px #0008, inset 0 1px #ffffff0b; }
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--gradient); opacity: .9; }
.card-glow { pointer-events: none; position: absolute; z-index: -1; top: -160px; right: -150px; width: 370px; height: 300px; border-radius: 50%; background: #743da54a; filter: blur(60px); }
.upper { display: flex; align-items: center; justify-content: space-between; letter-spacing: .19em; color: #93dbf9; font-size: 12px; font-weight: 700; }
.slash { color: #e6a0ef; }
.card-heading { margin: 15px 0 20px; }
h2 { margin: 0; font-size: clamp(26px, 2.1vw, 32px); font-weight: 700; letter-spacing: -.018em; line-height: 1.25; }
.muted { color: #b2bfda; font-size: 14px; line-height: 1.5; margin: 6px 0 0; }
.banner { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; margin-bottom: 20px; border: 1px solid #455475; border-radius: 11px; background: #26304d94; color: #d3def1; font-size: 13px; line-height: 1.6; }
.banner-dot { flex: 0 0 auto; margin-top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #55c4fa; box-shadow: 0 0 13px #55c4fa77; }
form { display: flex; flex-direction: column; gap: 10px; }
form > label, legend, #version-field > label { display: block; color: #e9efff; font-size: 14px; font-weight: 650; }
input:not([type="radio"]), select, textarea { width: 100%; background: var(--field); color: var(--text); border: 1px solid #425170; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.55; outline: none; transition: border-color .15s, box-shadow .15s; }
input:not([type="radio"]), select { min-height: 44px; }
input::placeholder, textarea::placeholder { color: #8998b7; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: #61c8f9; box-shadow: 0 0 0 3px #2a99d02e; }
select { cursor: pointer; color: #e5e9fd; }
#version-field { margin-top: 2px; }
#version-field label { margin-bottom: 9px; }
#version-field input { color: #c0cbe4; }
fieldset { border: 0; padding: 10px 0 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 11px; }
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.kinds label { position: relative; display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 10px 13px; cursor: pointer; border: 1px solid #465474; border-radius: 10px; color: #bfcbe3; background: #151b2eb8; font-size: 13px; font-weight: 600; }
.kinds input { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; accent-color: #74cafa; }
.kinds label:has(input:checked) { color: #f5f7ff; border-color: #69a4df; background: linear-gradient(104deg, #1840609c, #4233669a); box-shadow: inset 0 0 18px #538fdf14; }
.kinds label:has(input:focus-visible) { outline: 2px solid #a6dfff; outline-offset: 2px; }
.counter-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; gap: 15px; }
.counter-row label { font-size: 14px; font-weight: 650; }
.counter-row small, .hint { font-size: 12px; color: #b6c5df; }
textarea { display: block; resize: vertical; line-height: 1.6; min-height: 112px; }
.hint { margin: -5px 0 6px; }
.product-hint { margin: -4px 0 2px; line-height: 1.55; }
.privacy { display: flex; gap: 10px; align-items: center; line-height: 1.6; color: #b9c8e0; font-size: 12px; margin: 4px 0 1px; }
.privacy-icon { display: inline-flex; flex: 0 0 15px; width: 15px; height: 15px; align-items: center; justify-content: center; color: var(--cyan); }
.privacy-icon::before { content: ""; display: block; width: 9px; height: 9px; border: 1.5px solid currentColor; transform: rotate(45deg); }
.privacy a { color: #9edbfa; text-underline-offset: 3px; }
.form-actions { margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.submit { margin-top: 0; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 30px; min-height: 48px; border: 0; border-radius: 10px; padding: 12px 19px; color: #0c1830; font-size: 14px; font-weight: 700; background: var(--gradient); box-shadow: 0 9px 29px #4b7cdf24; transition: filter .15s, transform .15s; }
.submit:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.submit:disabled { opacity: .57; cursor: not-allowed; }
.copy-button { min-height: 48px; padding: 12px 17px; border: 1px solid #607299; border-radius: 10px; background: #1a2640; color: #d8e8ff; font-size: 13px; font-weight: 650; cursor: pointer; }
.copy-button:hover { background: #243757; border-color: #8ebde4; }
.submit-arrow { font-size: 17px; font-weight: 600; }
#status { min-height: 16px; margin-top: 2px; font-size: 12px; line-height: 1.45; color: #81e5ce; }
#status.error { color: #ffafbc; }
.hidden-trap { position: absolute; left: -10000px; height: 1px; width: 1px; overflow: hidden; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid #2c3a59; padding: 23px 0 30px; color: #8f9eb9; font-size: 12px; }
a:focus-visible, button:focus-visible { outline: 2px solid #91d9ff; outline-offset: 3px; }
@media (min-width: 1600px) {
  main { gap: 100px; }
  .card { padding: 42px; }
}
@media (max-width: 1100px) {
  .shell { padding: 0 26px; }
  main { gap: 35px; grid-template-columns: .9fr 1.1fr; }
  h1 { font-size: clamp(42px, 5vw, 58px); }
  .intro { padding-bottom: 25px; transform: translateY(-42px); }
}
@media (max-width: 870px) {
  .shell { max-width: 710px; }
  main { grid-template-columns: 1fr; gap: 38px; padding: 22px 0 58px; }
  .intro { padding: 18px 0 0; transform: none; }
  .infinity-art { left: 3%; top: -78px; width: min(74vw, 440px); }
  h1 { font-size: clamp(48px, 8vw, 68px); }
  .guestbook-note { margin-top: 26px; }
  .card { padding: clamp(23px, 5vw, 38px); }
  .footer-left { display: none; }
}
@media (max-width: 500px) {
  .shell { padding: 0 16px; }
  header { min-height: 74px; }
  .brand { font-size: 13px; letter-spacing: .13em; }
  .brand small { font-size: 8px; }
  nav { gap: 6px; }
  nav > a { display: none; }
  .lang { padding: 7px 10px; }
  main { padding-top: 16px; gap: 23px; }
  .intro { padding: 8px 3px 0; }
  .eyebrow { font-size: 11px; }
  h1 { font-size: clamp(39px, 10.3vw, 53px); margin: 17px 0; }
  h1 em { white-space: normal; }
  .lead { font-size: 14px; }
  .topic-chips { margin-top: 18px; gap: 6px; }
  .topic-chip { padding: 6px 9px; font-size: 11px; }
  .guestbook-note { padding: 15px; gap: 12px; margin-top: 19px; }
  .guestbook-note strong { font-size: 13px; }
  .guestbook-note p { font-size: 13px; margin-top: 4px; }
  .card { border-radius: 17px; padding: 23px 17px; }
  .card-heading { margin: 11px 0 17px; }
  h2 { font-size: 25px; }
  .muted { font-size: 12px; }
  .kinds label { padding: 9px; font-size: 12px; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .submit, .copy-button { width: 100%; }
  .submit { align-self: stretch; }
  footer { font-size: 10px; padding-bottom: 20px; }
}
html.embed body { background: #0c1021; }
html.embed body::before { display: none; }
html.embed .shell { max-width: 800px; padding: 0 12px; }
html.embed header, html.embed .intro, html.embed footer, html.embed .page-beam { display: none !important; }
html.embed main { min-height: 0; display: block; padding: 12px 0; }
html.embed .card { padding: clamp(20px, 4vw, 36px); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }


/* Accessibility: do not require a separate alternative UI to navigate or read. */
.skip-link {
  position: fixed; z-index: 100; left: 20px; top: -120px;
  display: inline-block; padding: 11px 16px; border-radius: 9px;
  background: #d9f3ff; color: #081425; font-size: 15px; font-weight: 700;
  text-decoration: none; box-shadow: 0 5px 22px #0008;
}
.skip-link:focus-visible { top: 12px; outline: 3px solid #eac9ff; outline-offset: 2px; }
#main-content:focus { outline: none; }
.field-error { margin: -4px 0 2px; color: #ffbdca; font-size: 13px; line-height: 1.55; }
textarea[aria-invalid="true"] { border-color: #ffafc4; box-shadow: 0 0 0 2px #ffafc433; }
.kinds label { cursor: pointer; }
.kinds input { cursor: pointer; }
h1 em { white-space: normal; }

/* Windows high contrast: gradients must not be the only way to convey information. */
@media (forced-colors: active) {
  body, .card, .guestbook-note { background: Canvas; color: CanvasText; }
  body::before, .page-beam, .card-glow, .infinity-art { display: none !important; }
  h1 em { background: none !important; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .banner, .card, .guestbook-note, .kind-tile, .kinds label, input, select, textarea { border: 1px solid CanvasText; }
  .kinds label:has(input:checked) { outline: 2px solid Highlight; outline-offset: 1px; }
  .submit, .copy-button, .lang.active, .skip-link { background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; }
  .submit:disabled { color: GrayText; border-color: GrayText; }
  :focus-visible, .skip-link:focus-visible { outline: 3px solid Highlight !important; outline-offset: 3px; }
}
/* Zoom and narrow viewports: stack to keep all controls in view without horizontal panning. */
@media (max-width: 360px) {
  .shell { padding: 0 12px; }
  .card { padding: 20px 13px; }
  .kinds { grid-template-columns: minmax(0, 1fr); }
  .submit, .copy-button { width: 100%; }
  h1 { font-size: clamp(34px, 10vw, 42px); }
}

/* On narrow screens both branded headline lines must retain the SAME font size.
   Scale the whole heading to fit the longer English line, not only the gradient line.
   Desktop typography above 870px remains unchanged. */
h1 em { font-size: 1em; }
@media (max-width: 870px) {
  .intro h1 { font-size: clamp(42px, 7vw, 60px); text-wrap: initial; }
  .intro h1 em { white-space: nowrap; }
}
@media (max-width: 560px) {
  .intro h1 { font-size: clamp(27px, 8.3vw, 42px); }
}
@media (max-width: 320px) {
  .intro h1 { font-size: clamp(22px, 8.3vw, 27px); }
}
/* On extremely narrow screens or heavy browser zoom, prefer wrapping over clipping. */
@media (max-width: 270px) {
  .intro h1 em { white-space: normal; }
}

/* Linked mini-site navigation and static pages. */
.site-header { position: relative; z-index: 2; }
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-width: 0; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.site-nav > a { display: inline-flex; align-items: center; padding: 9px 13px; border: 1px solid transparent; border-radius: 10px; text-decoration: none; font-size: 13px; font-weight: 650; color: #b7cbe5; white-space: nowrap; }
.site-nav > a:hover { background: #24344a; color: #d6f7ff; }
.site-nav > a[aria-current="page"] { border-color: #3d6385; background: #18324a; color: #9de7ff; }
.language-switch { display: flex; flex: 0 0 auto; gap: 7px; }
.publish-options { display: block; margin: 7px 0 0; padding: 15px; border: 1px solid #3e5275; border-radius: 12px; background: #111c32a6; }
.publish-options legend { padding: 0 6px; margin: 0 0 5px -6px; font-size: 13px; font-weight: 650; }
.publish-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: #d5e2f6; line-height: 1.5; }
.publish-check input { width: 18px; height: 18px; margin: 0; flex: 0 0 18px; accent-color: #59c9f8; }
.public-name-choice { padding: 12px 0 3px 28px; }
.publish-hint { margin: 11px 0 0; line-height: 1.55; }
.subpage-main { min-height: calc(100vh - 180px); display: block; padding: clamp(30px, 5vw, 67px) 0 85px; }
.subpage-intro { max-width: 810px; margin-bottom: 38px; }
.page-eyebrow { font-size: 12px; letter-spacing: .14em; font-weight: 750; color: #91dfff; }
.page-title { margin: 17px 0 15px; font-size: clamp(37px, 4vw, 64px); line-height: 1.15; letter-spacing: -.028em; }
.page-lead { max-width: 750px; color: #bfcee4; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.72; margin: 0; }
.empty-panel { padding: clamp(28px, 5vw, 70px); background: linear-gradient(115deg, #132941d9, #20172fe8); border: 1px solid #3a577a; border-radius: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; }
.empty-symbol { color: #b29af9; font-size: 48px; line-height: 1; }
.empty-title { font-size: clamp(23px, 3vw, 32px); font-weight: 700; margin: 0; }
.empty-copy { color: #c3d2e9; max-width: 590px; line-height: 1.7; margin: 0; }
.page-action { display: inline-flex; gap: 22px; align-items: center; justify-content: center; border-radius: 11px; padding: 13px 22px; margin-top: 10px; background: var(--gradient); color: #071727; font-size: 14px; font-weight: 750; text-decoration: none; }
.page-action:hover { filter: brightness(1.12); }
.page-details { margin-top: 49px; }
.section-title { font-size: 24px; font-weight: 700; margin: 0 0 20px; }
.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.info-card,.project-card,.link-card,.privacy-panel { background: linear-gradient(150deg, #1b2036ed, #111a2bd9); border: 1px solid #3d4d70; border-radius: 17px; }
.info-card { padding: 24px; }
.step-num,.project-number { font-size: 12px; color: #6edbff; letter-spacing: .12em; font-weight: 750; }
.info-card h3 { font-size: 18px; margin: 12px 0 8px; }
.info-card p { color: #c0cee5; font-size: 14px; line-height: 1.7; margin: 0; }
.projects-grid,.links-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.project-card { padding: 25px; display: flex; flex-direction: column; min-height: 245px; }
.project-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.project-tag { font-size: 12px; color: #cdbdf8; border: 1px solid #594879; background: #3223406e; border-radius: 100px; padding: 5px 11px; }
.project-card h2 { margin: 19px 0 10px; font-size: 23px; }
.project-card > p { color: #c2cee1; line-height: 1.7; font-size: 14px; margin: 0 0 19px; }
.project-link { display: inline-flex; gap: 7px; align-items: center; align-self: flex-start; margin-top: auto; color: #9edfff; font-size: 13px; font-weight: 650; text-decoration: none; }
.project-link:hover,.external-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-card { display: flex; align-items: flex-start; gap: 17px; padding: 24px; }
.link-mark { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 13px; color: #98dfff; font-size: 23px; font-weight: 750; border: 1px solid #4b7091; background: #19314e; }
.link-description { min-width: 0; }
.link-description h2 { font-size: 21px; margin: 0 0 6px; }
.link-description p { font-size: 14px; color: #bacbe5; line-height: 1.6; margin: 0 0 14px; }
.external-link { font-size: 13px; color: #8bdcfb; text-decoration: none; font-weight: 700; }
.pending-link { display: inline-flex; font-size: 12px; color: #aaaccb; border: 1px dashed #576079; border-radius: 7px; padding: 5px 9px; }
.page-end-note { margin-top: 23px; color: #b6c4dd; font-size: 14px; }
.page-end-note p { display: inline; }
.page-end-note a { color: #8cd8fa; margin-left: 9px; }
.privacy-panel { max-width: 890px; padding: clamp(24px, 4vw, 48px); }
.privacy-panel h2 { font-size: 20px; margin: 23px 0 8px; }
.privacy-panel h2:first-child { margin-top: 0; }
.privacy-panel p { color: #c1cee6; line-height: 1.75; font-size: 15px; margin: 0; }
@media (max-width: 1100px) {
 .header-right { gap: 10px; } .site-nav > a { padding: 8px 9px; font-size: 12px; }
}
@media (max-width: 870px) {
 .site-header { flex-wrap: wrap; padding: 16px 0 11px; gap: 12px; }
 .header-right { width: 100%; justify-content: space-between; }
 .site-nav { justify-content: flex-start; }
 .subpage-main { padding-top: 26px; }
}
@media (max-width: 600px) {
 .site-nav { gap: 2px; } .site-nav > a { padding: 8px 7px; font-size: 11px; }
 .header-right { gap: 6px; align-items: flex-start; }
 .steps-grid,.projects-grid,.links-grid { grid-template-columns: minmax(0,1fr); }
 .empty-panel { padding: 30px 20px; } .project-card { min-height: 0; } .subpage-main { padding-bottom: 46px; }
}
@media (max-width: 390px) {
 .header-right { flex-wrap: wrap; } .site-nav { width: 100%; justify-content: space-between; }
 .language-switch { margin-left: auto; }
}
@media (forced-colors: active) {
 .site-nav > a[aria-current="page"] { color: Highlight; border-color: Highlight; }
 .publish-options,.empty-panel,.info-card,.project-card,.link-card,.privacy-panel { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}


/* Local D1 pilot UI; uses the existing Mugen palette, with safe text-only rendering. */
.page-details { margin: 18px 0 27px; padding: 18px 22px; border: 1px solid #3d4d70; border-radius: 15px; background: #141d32; }
.page-details > summary { cursor: pointer; margin: 0; font-size: 17px; }
.page-details[open] > summary { margin-bottom: 18px; }
.pilot-info { color: #9dddf6; font-size: 13px; }
.pilot-controls,.pilot-pages { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.pilot-controls label { color: #c5d4ea; font-size: 13px; }
.pilot-controls select { display: block; margin-top: 6px; }
.pilot-pages button,.pilot-entry button,.pilot-login button,.pilot-tabs button,.pilot-logout { padding: 9px 15px; border-radius: 9px; border: 1px solid #49749c; background: #1a3350; color: #e3f6ff; cursor: pointer; font: inherit; }
.pilot-pages button:disabled,.pilot-entry button:disabled { opacity: .45; cursor: not-allowed; }
.pilot-list { display: grid; gap: 14px; }
.pilot-entry { background: linear-gradient(135deg,#19243c,#141b2f); border: 1px solid #405577; border-radius: 16px; padding: 22px; min-width: 0; }
.pilot-entry strong { display: block; font-size: 16px; color: #d7f4ff; }
.pilot-entry .pilot-meta { display: block; font-size: 12px; color: #a3b6d0; margin-top: 8px; overflow-wrap: anywhere; }
.pilot-entry .pilot-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.65; color: #e8edf8; margin: 17px 0; }
.pilot-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.pilot-login,.pilot-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 13px; margin: 20px 0; }
.pilot-login label { flex: 1; min-width: 220px; }
.pilot-login input { width: 100%; margin-top: 7px; }
.pilot-login button:disabled { opacity: .65; cursor: wait; }
.login-feedback { margin: -8px 0 18px; color: #a7e6ff; font-size: 14px; line-height: 1.5; font-weight: 600; }
.login-feedback.error { color: #ffd0dc; }
#admin-password[aria-invalid="true"] { border-color: #ff9ab5; outline-color: #ff9ab5; }
.pilot-toolbar { justify-content: space-between; }
.pilot-tabs { display: flex; gap: 8px; }
.pilot-tabs button[aria-pressed="true"] { background: #395875; color: #fff; border-color: #9acfff; }
.pilot-test-marker { color: #80e6ff; font-weight: 750; letter-spacing: .07em; font-size: 12px; }
@media (max-width: 600px) { .pilot-entry { padding: 16px; } .pilot-controls { flex-direction: column; align-items: stretch; } .pilot-login { flex-direction: column; align-items: stretch; } }
@media (forced-colors: active) { .pilot-entry,.page-details { border: 1px solid CanvasText; background: Canvas; color: CanvasText; } }

/* Receipt replaces the form after a confirmed HTTP 201, never after a failed request. */
.send-receipt { padding: clamp(20px, 3vw, 30px); border: 1px solid #5b9bc1;
  border-radius: 18px; background: linear-gradient(145deg,#163a4aa8,#262046d9); }
.receipt-symbol { display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid #77d4e6; border-radius: 50%; color: #a3f8dc; font-size: 25px; font-weight: 700; }
.send-receipt h3 { font-size: clamp(21px, 2vw, 27px); line-height: 1.3; margin: 17px 0 9px; color: #f5faff; }
.send-receipt h3:focus { outline: none; }
.receipt-description { color: #c8e4f0; line-height: 1.7; font-size: 14px; margin: 0 0 20px; }
.receipt-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0 0 20px; }
.receipt-facts > div { background: #101c32b0; border: 1px solid #3c5676; border-radius: 11px; padding: 13px 14px; }
.receipt-facts dt { color: #a3bcd2; font-size: 12px; margin-bottom: 6px; }
.receipt-facts dd { margin: 0; font-size: 14px; color: #f1f7fd; line-height: 1.5; overflow-wrap: anywhere; }
.receipt-message-details { border-top: 1px solid #3b526f; padding-top: 13px; }
.receipt-message-details summary { color: #a4e7ff; cursor: pointer; font-size: 13px; font-weight: 650; }
.receipt-message-details .pilot-message { margin-bottom: 0; }
.receipt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.pilot-entry-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pilot-entry .pilot-state { display: inline-flex; padding: 6px 11px; border-radius: 100px;
  font-size: 12px; color: #d8eafc; border: 1px solid #4b6384; background: #2838568c; }
.pilot-facts { display: flex; flex-wrap: wrap; gap: 12px 23px; margin-top: 16px; }
.pilot-fact { display: flex; flex-direction: column; gap: 5px; min-width: 118px; }
.pilot-fact-label { font-size: 12px; color: #a6bcd8; }
.pilot-fact-value { font-size: 13px; font-weight: 650; color: #ebf4ff; overflow-wrap: anywhere; }
.pilot-permissions { display: grid; gap: 9px; margin: 13px 0; }
.pilot-permission { display: flex; align-items: center; gap: 9px; color: #c3ccdd; font-size: 13px; }
.pilot-permission.is-allowed { color: #b3e8e1; }
.pilot-permission.is-denied { color: #e7c5d0; }
.pilot-permission.is-na { color: #9baec9; padding-left: 28px; }
.pilot-permission-dot { display: grid; place-items: center; width: 19px; height: 19px;
  flex: 0 0 19px; border: 1px solid #667991; border-radius: 5px; font-weight: 700; line-height: 1; }
.pilot-permission.is-allowed .pilot-permission-dot { border-color: #6ecdb9; }
.pilot-permission.is-denied .pilot-permission-dot { border-color: #b37e95; color: #f4b4c7; }
.pilot-contact { display: flex; flex-direction: column; gap: 6px; background: #101a2b91;
  border: 1px solid #3b5272; border-radius: 10px; padding: 12px; margin: 13px 0 17px; }
.pilot-contact-label { color: #acbfd5; font-size: 12px; }
.pilot-contact-value { color: #ecf2ff; font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .receipt-facts { grid-template-columns: minmax(0,1fr); }
  .receipt-actions { flex-direction: column; align-items: stretch; }
  .receipt-actions .submit { width: 100%; }
}
@media (forced-colors: active) {
  .send-receipt,.receipt-facts > div,.pilot-contact { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .pilot-permission-dot,.pilot-state { border: 1px solid CanvasText; }
}

/* Guestbook is a reading surface, not a database dump. No social/reaction counters. */
.pilot-entry.guestbook-entry { padding: clamp(19px, 3vw, 26px); }
.guestbook-entry-header { display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px 20px; flex-wrap: wrap; }
.pilot-entry .guestbook-author { font-size: 17px; line-height: 1.4; color: #f0f6ff; }
.guestbook-published { font-size: 12px; color: #aebfd5; }
.guestbook-date { font-weight: 550; color: #c9d8ee; }
.guestbook-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.guestbook-tag { display: inline-flex; align-items: center; max-width: 100%;
  padding: 5px 11px; border-radius: 20px; border: 1px solid #47648b;
  background: #1b3550a0; color: #c7e5f8; font-size: 12px;
  line-height: 1.5; overflow-wrap: anywhere; }
.guestbook-topic { border-color: #675080; background: #30243f8f; color: #dfcefb; }
.guestbook-message { margin: 17px 0 0; color: #e9f0fd; font-size: 15px;
  line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
.guestbook-no-match { padding: 26px; background: #15233b; border: 1px solid #3e577b;
  border-radius: 14px; color: #c4d9ef; }
@media (max-width: 600px) {
 .guestbook-entry-header { align-items: start; flex-direction: column; gap: 6px; }
 .pilot-entry.guestbook-entry { padding: 19px 17px; }
}
@media (forced-colors: active) {
 .guestbook-tag,.guestbook-no-match { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
}

/* Moderation: one reply per published guestbook entry, not a conversation thread. */
.pilot-owner-reply-area { margin-top: 18px; border-top: 1px solid #405573; padding-top: 14px; }
.pilot-owner-reply { margin-bottom: 13px; padding: 14px 18px; border-left: 3px solid #72c3e7;
  border-radius: 0 10px 10px 0; background: #152e4599; }
.pilot-owner-reply-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; color: #d6efff; }
.pilot-owner-reply .pilot-message { margin: 10px 0 0; }
.pilot-reply-editor { margin-top: 15px; padding: 16px; border: 1px solid #435e82;
  border-radius: 12px; background: #121c32; }
.pilot-reply-label { display: block; font-size: 13px; font-weight: 650; color: #d9e9fb; }
.pilot-reply-textarea { display: block; width: 100%; min-height: 100px; margin: 10px 0 8px;
  padding: 12px; resize: vertical; color: #f1f6ff; font: inherit; line-height: 1.6;
  background: #0d1526; border: 1px solid #516b91; border-radius: 9px; }
.pilot-reply-feedback { color: #f0bcc8; font-size: 12px; min-height: 16px; }
.pilot-reply-editor .pilot-buttons { margin-top: 10px; }
/* Public response: a quieter, slightly indented note from the lab. */
.guestbook-owner-reply { position: relative; margin: 20px 0 0 clamp(10px, 4vw, 36px);
  padding: 15px 18px; background: #162d438c; border: 1px solid #3c6683;
  border-left: 3px solid #71c4e9; border-radius: 0 12px 12px 0; }
.guestbook-owner-reply-header { display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 16px; margin-bottom: 9px; }
.guestbook-owner-reply-label { font-size: 13px; font-weight: 750; color: #ade8ff; }
.guestbook-reply-date { font-size: 12px; color: #abc0d5; }
.guestbook-owner-reply-text { color: #e2effb; font-size: 14px; line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
@media (max-width: 600px) {
 .guestbook-owner-reply { margin-left: 9px; padding: 13px 14px; }
}
@media (forced-colors: active) {
 .pilot-owner-reply,.pilot-reply-editor,.guestbook-owner-reply { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}

/* Dedicated moderation queue: project, topic, order and archived status are
   real SQL-side filters, never just filters of the visible page. */
.pilot-admin-filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px;
  margin: 13px 0 8px; align-items: end; }
.pilot-admin-filters label { display: flex; flex-direction: column; gap: 7px;
  min-width: 0; color: #bbcbe0; font-size: 12px; font-weight: 650; }
.pilot-admin-filters select { width: 100%; min-width: 0; border: 1px solid #49658c;
  border-radius: 9px; background: #14223b; color: #eaf4ff; font: inherit; font-size: 13px;
  padding: 10px 12px; }
.pilot-section-hint { color: #aebfd5; font-size: 13px; line-height: 1.6;
  margin: 10px 0 19px; }
.pilot-retention { align-items: center; flex-wrap: wrap; margin: 12px 0 0; }
.pilot-retention .pilot-section-hint { flex: 1 1 300px; margin: 0; }
.pilot-retention [hidden] { display: none !important; }
.pilot-retention #retention-purge { background: #422532; border-color: #c97f96; color: #ffe3eb; }
.pilot-no-results { border: 1px dashed #476082; border-radius: 14px;
  padding: 22px; background: #16213b9c; color: #b9cce2; font-size: 14px; }
@media (max-width: 860px) {
 .pilot-admin-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 500px) {
 .pilot-admin-filters { grid-template-columns: minmax(0,1fr); }
 .pilot-tabs { flex-wrap: wrap; }
}
@media (forced-colors: active) {
 .pilot-admin-filters select,.pilot-no-results { background: Canvas; color: CanvasText;
  border: 1px solid CanvasText; }
}

/* Native hidden attributes must win even over flex/grid layout rules. */
.pilot-admin-filters [hidden],#admin-pagination[hidden] { display: none !important; }

/* Optional project maturity label. Ready and WIP are independent of public visibility. */
.catalog-dev-badge{display:inline-flex;align-self:flex-start;margin:0 0 13px;
 padding:6px 12px;border-radius:30px;border:1px solid #8068a5;color:#e0cafa;
 background:#35294b99;font-size:12px;font-weight:650}
/* Blocking head script marks HTTP before the static fallback markup is parsed.
   If catalog JavaScript fails before initialization, those cards stay hidden. */
html.catalog-remote-pending #catalog-live-content { visibility:hidden; }
html.catalog-remote-pending #catalog-projects > *,
html.catalog-remote-pending #catalog-links > *,
html.catalog-remote-pending #catalog-projects-development > * { visibility:hidden; }
.catalog-empty{grid-column:1/-1;color:#c4d4e8;font-size:14px}
/* Shared public-read outage: same Mugen identity as the main hero, on all pages.
   Normal loading/status messages remain quiet and unboxed. */
.service-outage {
 position:relative; overflow:hidden; display:flex; flex-direction:column;
 align-items:flex-start; gap:9px; width:min(100%,620px);
 margin:2px 0 4px; padding:22px 24px; border:1px solid #506588;
 border-radius:12px; background:linear-gradient(110deg,#112b43c7,#2a1d3bc2);
 box-shadow:0 12px 30px #05091850;
}
.service-outage::before {
 content:""; position:absolute; inset:0 auto 0 0; width:4px;
 background:linear-gradient(180deg,#43d8ff 0%,#8297ff 50%,#eb82da 100%);
}
.service-outage-title {
 display:block; font-family:"Cascadia Code",Consolas,ui-monospace,SFMono-Regular,monospace;
 font-size:clamp(17px,1.65vw,21px); font-weight:700; line-height:1.45;
 letter-spacing:-.025em; overflow-wrap:anywhere;
 color:#d7edff;
}
@supports (background-clip:text) or (-webkit-background-clip:text) {
 .service-outage-title {
  background:var(--gradient); -webkit-background-clip:text;
  background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
 }
}
.service-outage-hint { display:block; color:#d3dfee; font-size:14px; line-height:1.6; }
@media (max-width:500px) {
 .service-outage { padding:18px 16px; }
}
@media (forced-colors:active) {
 .service-outage { background:Canvas; border:2px solid CanvasText; color:CanvasText; }
 .service-outage::before { background:CanvasText; }
 .service-outage-title,.service-outage-hint {
  background:none; color:CanvasText; -webkit-text-fill-color:CanvasText;
 }
}
.project-card .project-link + .project-link{margin-top:12px}

/* Owner catalog editor: reusable RU/EN fields, no rich text or HTML injection. */
.cms-workspaces{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0 21px;padding-bottom:14px;border-bottom:1px solid #3c5274}
.cms-workspaces button{font-size:15px;padding:10px 18px}
.cms-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}
.cms-heading h2{font-size:22px;color:#f1f7ff}
.cms-heading button,.cms-editor button{padding:10px 17px;border-radius:9px;border:1px solid #49749c;background:#1a3350;color:#e3f6ff;cursor:pointer;font:inherit}
#catalog-filter-tabs{margin:14px 0 22px}
.cms-entry{gap:7px}
.cms-translation{color:#aebed6;font-size:13px}
.cms-editor{border:1px solid #49698b;background:#182840bd;border-radius:15px;padding:20px;margin:16px 0 20px}
.cms-editor h3{margin:0 0 18px;font-size:18px}
.cms-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.cms-form-grid label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:650;color:#ccd8ec}
.cms-form-grid input,.cms-form-grid textarea,.cms-form-grid select{font:inherit;font-size:14px;width:100%;background:#0e1629;border:1px solid #4a6488;border-radius:9px;padding:10px 12px;color:#f3f8ff}
.cms-form-grid textarea{resize:vertical;min-height:90px}
.cms-form-grid input:read-only{opacity:.65}
.cms-visible{display:flex;align-items:center;gap:10px;margin:22px 0 10px;font-size:14px;font-weight:650}
.cms-visible input{accent-color:#59c9f8;width:19px;height:19px}
.cms-editor .hint{color:#a5bad4;font-size:12px;line-height:1.6}
.cms-editor .pilot-buttons{margin-top:18px}
.cms-editor #cms-delete{border-color:#aa536f;background:#422435;color:#ffe1eb}
.cms-editor #cms-delete:hover{background:#5a3044}
/* Action feedback stays beside Save/Delete even when the user is scrolled down. */
.cms-editor-feedback:not([hidden]),#catalog-status:not(:empty){
 display:block;margin:15px 0 0;padding:15px 17px;border:1px solid #4c97ae;
 border-left:4px solid #64dcf0;border-radius:10px;background:#153343;
 color:#e1f8ff;font-size:14px;font-weight:500;line-height:1.55;
 overflow-wrap:anywhere;
}
/* Leave breathing room before the first card after the editor closes. */
#catalog-status:not(:empty){margin-bottom:22px}
.cms-editor-feedback.error,#catalog-status.error:not(:empty){
 border-color:#c97f96;border-left-color:#ff8ba7;background:#422532;
 color:#ffe3eb;font-weight:700;
}
/* Successful removal is neither a normal cyan save nor a pink warning. */
#catalog-status.removed:not(:empty){
 border-color:#947fc6;border-left-color:#c3a5ff;background:#302846;
 color:#f2eaff;font-weight:650;
}
.cms-editor-feedback[hidden]{display:none!important}
@media(forced-colors:active){
 .cms-editor-feedback:not([hidden]),#catalog-status:not(:empty),
 #catalog-status.removed:not(:empty){
  border:2px solid CanvasText;background:Canvas;color:CanvasText;
 }
}
#message-workspace[hidden],#catalog-workspace[hidden],#catalog-editor[hidden],.cms-project-only[hidden]{display:none!important}
@media(max-width:620px){.cms-form-grid{grid-template-columns:minmax(0,1fr)}.cms-editor{padding:16px}}
@media(forced-colors:active){.cms-editor,.cms-form-grid input,.cms-form-grid textarea,.cms-form-grid select{background:Canvas;color:CanvasText;border:1px solid CanvasText}}

/* Deliberately local, image-free clickable thumbnail slot. Replace artwork with
   a validated WebP once an image-source policy is chosen; destination already works. */
.project-preview { display:block; position:relative; aspect-ratio:16/9; width:min(100%,190px);
 margin:18px 0 8px; border:1px solid #436a91; border-radius:12px;
 overflow:hidden; background:linear-gradient(125deg,#111d38 5%,#203b5b 55%,#302645);
 text-decoration:none; color:#def4ff; isolation:isolate; }
.project-preview::before { content:""; position:absolute; inset:-30%;
 background:repeating-linear-gradient(100deg,transparent 0 26px,#87c9ef0b 26px 27px);
 transform:rotate(-8deg); pointer-events:none; }
.project-preview::after { content:""; position:absolute; top:18%; right:12%; width:20%; aspect-ratio:1;
 border:2px solid #69cced65; transform:rotate(45deg); box-shadow:0 0 32px #5996e444; pointer-events:none; }
.project-preview-art { display:flex; height:100%; padding:clamp(12px,2vw,18px);
 flex-direction:column; justify-content:space-between; position:relative; z-index:1; }
.project-preview-monogram { font-size:clamp(26px,4vw,41px); line-height:1.1;
 font-weight:800; letter-spacing:-.05em; color:#b8ecff; text-shadow:0 0 20px #4da6e76b; }
.project-preview-wordmark { font-size:10px; letter-spacing:.15em; font-weight:700; color:#b4c7eb; }
.project-preview-placeholder { align-self:flex-start; font-size:10px; color:#dccee9;
 letter-spacing:.045em; border:1px solid #80658a8c; padding:4px 8px; border-radius:5px; }
.project-preview:hover { border-color:#83d6ff; box-shadow:0 0 0 1px #72bff46b; }
.project-preview:focus-visible { outline:3px solid #9ddfff; outline-offset:4px; }
@media(forced-colors:active){.project-preview{background:Canvas;color:LinkText;border:1px solid LinkText}.project-preview-monogram,.project-preview-placeholder{color:LinkText}}

/* Public catalog: released and work-in-progress projects have distinct,
   ordered sections. Hidden projects are excluded server-side by /api/projects. */
.project-catalog-group + .project-catalog-group { margin-top: clamp(38px,5vw,65px);
 padding-top: 27px; border-top: 1px solid #405374; }
.project-group-heading { font-size:clamp(22px,2.5vw,27px);line-height:1.3;
 color:#edf4ff;font-weight:750;margin:0 0 8px; }
.project-group-hint {color:#b3c5df;font-size:14px;line-height:1.6;margin:0 0 21px;}
.project-catalog-group[hidden] {display:none!important}

/* Optional machine-translated public guestbook text. Original is always reachable. */
.guestbook-translation-tools {
 display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
 margin: 9px 0 0; font-size: 12px; line-height: 1.5;
}
.guestbook-translation-note { color: #abbdd4; }
.guestbook-translation-switch {
 padding: 4px 9px; border: 1px solid #5680a4; border-radius: 8px;
 background: #172f47; color: #cbeaff; font: inherit;
 font-size: 12px; font-weight: 650; cursor: pointer;
}
.guestbook-translation-switch:hover { border-color: #8dd9ff; background: #21415b; }
.guestbook-translation-switch:focus-visible { outline: 2px solid #a5e7ff; outline-offset: 3px; }
@media (forced-colors: active) {
 .guestbook-translation-switch { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
}