:root {
  color-scheme: light;
  --ink: #151922;
  --muted: #515a68;
  --graphite: #20242d;
  --line: #aab4c548;
  --focus: #234a7a;
  --glass: #ffffffb8;
  --page-width: 1160px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 82px; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(ellipse at 87% 5%, #d4dfed 0, #f1f4f8 34%, transparent 56%), #f8f9fc;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  line-height: 1.5;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.icon-library, .visually-hidden, .segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.icon {
  display: block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-width { width: min(var(--page-width), calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 5; padding: 10px 16px; background: white; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f9fafecc;
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}
.header-inner { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 14px 24px; }
.brand { display: inline-flex; gap: 9px; align-items: center; font-size: 15px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; text-decoration: none; }
.brand img { object-fit: contain; }
.site-header nav { display: flex; align-items: center; gap: clamp(4px, 2vw, 22px); }
.site-header nav a { display: flex; align-items: center; min-height: 44px; padding-inline: 9px; border-radius: 10px; color: var(--muted); font-size: 14px; text-decoration: none; }
.site-header nav a:hover, .site-header nav [aria-current] { color: var(--ink); background: #ffffffbc; }
.site-header nav [aria-current] { font-weight: 650; }
.intro { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: clamp(36px, 5.4vw, 72px) 36px; }
.eyebrow { margin: 0 0 10px; color: var(--muted); font-size: .82rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.intro h1 { margin: 0; max-width: 690px; font-size: clamp(2.22rem, 5.45vw, 4.4rem); line-height: .99; letter-spacing: -.066em; font-weight: 690; text-wrap: balance; }
.intro h1 + p { max-width: 560px; margin: 19px 0 0; color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.17rem); }
.intro-plate {
  position: relative;
  display: grid;
  flex: none;
  justify-items: center;
  align-content: space-between;
  width: clamp(118px, 16vw, 200px);
  aspect-ratio: .82;
  padding-block: clamp(12px, 2.2vw, 26px);
  margin-right: clamp(14px, 7vw, 98px);
  color: #263448;
  border-radius: 19px;
  border: 1px solid #fff;
  background: linear-gradient(148deg, #fff 0%, #f1f6fc 43%, #adb9cc 100%);
  box-shadow: inset 0 1px 2px #fff, 3px 4px 0 #8a97ae, 16px 30px 50px #25324b36;
  transform: perspective(850px) rotateY(-16deg) rotateX(9deg) rotateZ(8deg);
}
.intro-plate .icon { width: 48%; height: auto; aspect-ratio: 1; stroke-width: 1.15; }
.intro-plate span { width: 47%; height: 2px; border-radius: 99px; background: linear-gradient(90deg, transparent, #56678270, transparent); }
.workspace {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  min-height: 490px;
  overflow: clip;
  border: 1px solid #fff;
  border-radius: 30px;
  background: var(--glass);
  box-shadow: inset 0 1px 0 #fff, 0 18px 54px #1c335418, 0 2px 9px #1c33540b;
}
.tool-rail { min-width: 0; padding: 27px 14px 23px; border-right: 1px solid var(--line); background: linear-gradient(150deg, #edf2f8, #f8f9fc 85%); }
.rail-label { margin: 0 9px 13px; color: var(--muted); font-weight: 670; font-size: .78rem; }
.tool-tabs { display: grid; gap: 6px; }
.tool-tabs button {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  line-height: 1.2;
  font-size: .93rem;
  font-weight: 670;
}
.tool-tabs button:hover { background: #fff9; }
.tool-tabs button[aria-selected="true"] { background: linear-gradient(150deg, #fff, #f6f9fd); border-color: #fff; box-shadow: 0 3px 12px #263e5c1a, inset 0 0 0 1px #b5c1d040; }
.tool-tabs button > .icon { width: 23px; height: 23px; color: #334966; }
.tool-tabs button span span { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; font-weight: 450; }
.local-note { display: flex; align-items: baseline; gap: 7px; margin: 27px 9px 0; color: var(--muted); font-size: .75rem; }
.local-note span { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #426a5a; }
.tool-panel { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(210px, 1fr); min-width: 0; gap: 14px; padding: 14px; }
.tool-panel:focus-visible { outline-offset: -3px; }
.tool-controls { min-width: 0; padding: clamp(16px, 2.45vw, 32px); }
.tool-controls h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 690; line-height: 1.08; letter-spacing: -.045em; }
.tool-controls h2 + p { margin: 9px 0 22px; color: var(--muted); font-size: .95rem; }
form { display: grid; gap: 16px; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend { padding: 0; }
label, legend { font-size: .82rem; font-weight: 650; }
.optional { padding-left: 3px; color: var(--muted); font-weight: 450; }
.field-stack { display: grid; gap: 6px; min-width: 0; }
.field-stack > input + label, .field-stack > select + label, .field-stack > textarea + label, .field-stack > select + .field-stack { margin-top: 6px; }
input:not([type="radio"]):not([type="checkbox"]), textarea, select {
  width: 100%;
  min-width: 0;
  min-height: 45px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #bdc6d4;
  border-radius: 11px;
  font-size: 1rem;
  line-height: 1.25;
  box-shadow: inset 0 1px 3px #2235530b;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #687282; }
.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 6px; padding: 3px; border: 1px solid #dce2ec; border-radius: 13px; background: #e9edf4; }
.segmented label { position: relative; }
.segmented span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 4px; border-radius: 10px; cursor: pointer; text-align: center; }
.segmented input:checked + span { background: #fff; box-shadow: 0 1px 4px #334e712c; }
.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -1px; }
.check-label { display: flex; align-items: center; gap: 7px; min-height: 38px; cursor: pointer; }
.check-label input { width: 17px; height: 17px; margin: 0; accent-color: #253c58; }
.fields-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.field-help { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .78rem; }
.star-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.star-fields label { display: grid; gap: 5px; font-size: .73rem; }
.star-fields legend { margin-bottom: 5px; }
.star-fields input:not([type="radio"]) { padding-inline: 6px; }
.primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 670;
}
.primary-button {
  justify-self: start;
  color: #fff;
  border: 1px solid #253247;
  background: linear-gradient(160deg, #46566d 0%, #242d3c 44%, #111722 100%);
  box-shadow: inset 0 1px 1px #ffffff45, 0 5px 13px #202c4830;
}
.primary-button:hover { background: #334763; }
.secondary-button { color: #fff; background: #ffffff14; border: 1px solid #ffffff57; }
.secondary-button:hover:not(:disabled) { background: #ffffff26; }
.secondary-button:disabled { opacity: .65; cursor: default; }
.form-error { margin: -5px 0 0; color: #8f1d29; font-weight: 620; font-size: .84rem; }
.result-bay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 330px;
  padding: clamp(18px, 2.2vw, 29px);
  border: 1px solid #ffffff35;
  border-radius: 23px;
  color: #fff;
  background: radial-gradient(ellipse at 50% 0%, #4a586d 0%, #2b3545 42%, #151d2b 100%);
  box-shadow: inset 0 1px 1px #ffffff42, 0 9px 20px #1c2a4626;
  text-align: center;
}
.result-bay :focus-visible { outline-color: #c1dbff; }
.result-label { margin: 0 0 15px; color: #e3eaf5; font-size: .8rem; font-weight: 680; letter-spacing: .025em; }
.qr-preview { display: grid; place-items: center; width: min(100%, 181px); aspect-ratio: 1; overflow: hidden; border: 1px solid #ffffff38; border-radius: 18px; color: #d7e2f1; background: #ffffff15; }
.qr-preview > .icon { width: 66px; height: 66px; stroke-width: 1; }
.qr-preview[data-ready="true"] { border-color: #fff; background: white; }
.qr-preview > svg.qr-matrix { width: 100%; height: 100%; }
.result-note { margin: 13px 0 0; color: #dee6f1; font-size: .83rem; overflow-wrap: anywhere; }
.download-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 15px; }
.rating-number { font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 680; line-height: 1; letter-spacing: -.065em; }
.rating-number[data-compact="true"] { font-size: clamp(1.55rem, 3vw, 2.85rem); overflow-wrap: anywhere; }
.rating-number + p { margin: 12px 0 0; font-size: 1rem; font-weight: 690; }
.message-bay textarea { margin: 0 0 12px; min-height: 150px; padding: 13px; border-color: #ffffff45; background: #f9fbff; color: var(--ink); line-height: 1.45; }
.noscript-note { margin: 24px; color: #8f1d29; }
.practical-help { display: grid; grid-template-columns: minmax(175px, .82fr) minmax(0, 1.8fr); gap: 30px; padding-block: clamp(48px, 7vw, 84px) 36px; }
.help-heading h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.04; letter-spacing: -.046em; }
.help-list details { border-top: 1px solid #c6cfdd; }
.help-list details:last-child { border-bottom: 1px solid #c6cfdd; }
.help-list summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 14px; padding: 10px 2px; cursor: pointer; font-weight: 650; list-style: none; }
.help-list summary::-webkit-details-marker { display: none; }
.help-list summary::after { content: '+'; color: #395474; font-size: 1.3rem; font-weight: 450; }
.help-list details[open] summary::after { content: '−'; }
.help-list details p { margin: 0 24px 16px 2px; color: var(--muted); font-size: .92rem; }
.connection-note { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; border: 1px solid #dce3ef; border-radius: 18px; background: #edf2f9; }
.connection-note p { margin: 0; font-size: .94rem; }
.connection-note a { display: flex; align-items: center; min-height: 44px; font-weight: 680; color: #263f62; white-space: nowrap; text-underline-offset: 3px; }
.page-footer { display: flex; justify-content: space-between; gap: 14px; padding-block: 25px; color: var(--muted); font-size: .85rem; }
.page-footer a { text-underline-offset: 3px; }
@media (max-width: 1020px) {
  .workspace { grid-template-columns: 183px minmax(0, 1fr); }
  .page-width { width: calc(100% - 42px); }
  .tool-panel { grid-template-columns: minmax(0, 1.55fr) minmax(180px, 1fr); }
  .tool-controls { padding-inline: 14px; }
}
@media (max-width: 780px) {
  html { scroll-padding-top: 105px; }
  .workspace { display: block; }
  .tool-rail { padding: 15px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tool-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tool-tabs button { justify-content: center; gap: 7px; min-height: 48px; padding-inline: 5px; font-size: .84rem; }
  .tool-tabs button > .icon { width: 20px; height: 20px; }
  .tool-tabs button span span { display: none; }
  .rail-label { text-align: center; margin: 0 0 7px; }
  .local-note { justify-content: center; margin: 9px 0 0; }
  .intro-plate { margin-right: 15px; }
}
@media (max-width: 540px) {
  .page-width { width: calc(100% - 28px); }
  .header-inner { flex-wrap: wrap; justify-content: center; gap: 0 10px; padding-top: 6px; }
  .brand { min-height: 39px; }
  .site-header nav a { font-size: .82rem; }
  .intro { display: block; padding-block: 38px 25px; text-align: center; }
  .intro h1 { max-width: 390px; margin-inline: auto; }
  .intro h1 + p { margin: 14px auto 0; }
  .intro-break, .intro-plate { display: none; }
  .workspace { border-radius: 23px; }
  .tool-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .tool-panel { display: block; padding: 11px; }
  .tool-controls { padding: 13px 10px 23px; }
  .tool-controls h2, .tool-controls h2 + p { text-align: center; }
  .primary-button { justify-self: stretch; }
  .result-bay { min-height: 226px; border-radius: 17px; }
  .practical-help { display: block; padding-top: 45px; }
  .help-heading { margin-bottom: 20px; text-align: center; }
  .connection-note { flex-direction: column; gap: 3px; padding: 14px 16px; text-align: center; }
}