@charset "UTF-8";
:root {
  color-scheme: dark;
  --bg: #0b1016;
  --surface: #101820;
  --raised: #151f29;
  --line: #24313e;
  --text: #eaf0f5;
  --muted: #a1afbd;
  --dim: #7e8d9c;
  --accent: #64d9ed;
  --amber: #efc176;
  --radius: 7px;
  font-family:
    Inter,
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--text);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background:
    radial-gradient(circle at 82% -10%, rgba(79, 208, 235, 0.12), transparent 28rem),
    linear-gradient(135deg, #080e15 0%, var(--bg) 48%, #0a141c 100%);
  min-height: 100dvh;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}
button,
a,
summary {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
pre:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 1.9rem;
  line-height: 1.5;
  font-weight: 550;
  letter-spacing: 0.025em;
  margin-bottom: 12px;
}
h2 {
  font-size: 1.15rem;
  font-weight: 600;
}
h3 {
  font-size: 1rem;
  font-weight: 550;
}
button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  padding: 9px 14px;
  transition:
    background 0.18s,
    border-color 0.18s;
}
button:hover {
  background: var(--raised);
  border-color: #455869;
}
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--accent);
  border-color: var(--accent);
  color: #072630;
  font-weight: 650;
  min-height: 46px;
}
.primary:hover {
  background: #96e7f5;
  border-color: #96e7f5;
}
.secondary {
  background: var(--raised);
}
.quiet {
  border-color: transparent;
  color: var(--muted);
  font-size: 0.875rem;
}
.muted {
  color: var(--muted);
}
.fine {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.8;
}
.eyebrow {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.17em;
  color: var(--dim);
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.workspace {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
}
.sidebar {
  background: #0e151c;
  border-right: 1px solid var(--line);
  padding: 30px 18px 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  min-width: 0;
}
.sidebar::-webkit-scrollbar {
  display: none;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--text);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  font-weight: 720;
  line-height: 1.4;
  padding: 0 8px;
}
.brand:hover {
  text-decoration: none;
}
.brand > svg {
  color: var(--accent);
  width: 31px;
  height: 31px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(100, 217, 237, 0.17), transparent);
  box-shadow: 0 0 22px rgba(100, 217, 237, 0.15);
}
.brand-lockup {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.brand-lockup > span {
  white-space: nowrap;
  background: linear-gradient(100deg, #f1fbff 10%, #83e2f2 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-lockup small {
  display: block;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.18em;
  font-size: 0.65rem;
  color: #86a6b7;
  font-weight: 500;
  text-transform: uppercase;
}
.os-picker {
  margin: 30px 8px 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
}
.os-picker > span {
  font-size: 0.75rem;
  color: var(--dim);
}
select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 9px;
  border-radius: 5px;
}
.os-picker select {
  display: block;
  width: 100%;
  padding: 2px 0;
  border: 0;
  font-size: 0.875rem;
  background: transparent;
}
.nav-caption {
  font-size: 0.75rem;
  color: var(--dim);
  padding: 0 12px 10px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
  border-radius: 5px;
  margin: 2px 0;
}
.nav:hover,
.step-link:hover {
  text-decoration: none;
  background: #19232c;
  color: var(--text);
}
.nav.active {
  background: #172934;
  color: var(--accent);
}
.nav small {
  margin-left: auto;
  color: var(--dim);
  font-family: ui-monospace, monospace;
}
.build-label {
  padding-bottom: 7px;
}
.step-nav {
  margin: 2px 0 14px 20px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
.step-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  padding: 8px 4px 8px 8px;
  font-size: 0.875rem;
  border-radius: 4px;
  line-height: 1.5;
}
.mini-node {
  width: 19px;
  height: 19px;
  border: 1px solid #3c4b59;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  font-family: ui-monospace, monospace;
}
.step-link.current {
  color: var(--accent);
  background: #152732;
}
.current .mini-node {
  border-color: var(--accent);
}
.step-link.done .mini-node {
  background: var(--accent);
  color: #071b22;
  border-color: var(--accent);
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 24px;
}
.sidebar-email {
  display: block;
  padding: 0 12px;
  color: var(--dim);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.system-state {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 14px 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--muted);
}
.system-state small {
  margin-left: auto;
  font-size: 0.75rem;
}
.status-dot {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.main-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  height: 56px;
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 36px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
  gap: 15px;
}
.slash {
  padding: 0 12px;
  color: #4c5d6c;
}
.crumb {
  color: var(--text);
}
.secure {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 0.75rem;
  color: var(--dim);
}
.secure svg {
  width: 14px;
  height: 14px;
}
.topbar-os {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--dim);
  font-size: 0.75rem;
  white-space: nowrap;
}
.topbar-os select {
  min-width: 116px;
  padding: 5px 8px;
  font-size: 0.75rem;
}
.topbar-os + .secure {
  margin-left: 20px;
}
.collapsed-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
}
.collapsed-brand:hover {
  text-decoration: none;
}
.collapsed-brand > svg {
  width: 26px;
  height: 26px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  border-radius: 7px;
  color: var(--accent);
  background: linear-gradient(135deg, rgba(100, 217, 237, 0.17), transparent);
}
.collapsed-brand .brand-lockup > span {
  white-space: nowrap;
  font-size: 0.8125rem;
}
.collapsed-brand .brand-lockup small {
  font-size: 0.58rem;
}
.sidebar-hidden .topbar-title {
  display: none;
}
#main {
  overflow: auto;
  padding: 36px 40px 24px;
  outline: none;
  min-width: 0;
  scrollbar-color: #354756 transparent;
}
#main > * {
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
}
.page-heading {
  padding: 10px 0 28px;
}
.page-heading h1 {
  margin-top: 9px;
}
.page-heading p {
  margin-bottom: 0;
}
.step-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.step-count {
  font-family: ui-monospace, monospace;
  font-size: 1.25rem;
  color: var(--accent);
}
.step-count span {
  font-size: 0.75rem;
  color: var(--dim);
}
.progress-line {
  display: flex;
  margin-top: 28px;
  margin-bottom: 40px;
}
.progress-step {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  color: var(--dim);
  font-size: 0.75rem;
  text-align: center;
  z-index: 0;
}
.progress-step:hover {
  text-decoration: none;
  color: var(--text);
}
.progress-step:not(:last-child):after {
  content: "";
  position: absolute;
  left: calc(50% + 23px);
  right: calc(-50% + 23px);
  height: 1px;
  top: 18px;
  background: var(--line);
  z-index: -1;
}
.node {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 1px solid #344453;
  background: var(--bg);
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
}
.progress-step.current {
  color: var(--accent);
}
.progress-step.current .node {
  border: 1px solid var(--accent);
  background: #15303a;
  box-shadow: 0 0 18px #64d9ed15;
}
.progress-step.done .node {
  background: var(--accent);
  color: #10202a;
  border-color: var(--accent);
}
.step-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 26px;
}
.step-title-lockup {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  min-width: 0;
}
.step-title-lockup .eyebrow {
  grid-column: 1 / -1;
}
.step-title-lockup h1 {
  grid-column: 1;
  margin-top: 5px;
  margin-bottom: 0;
}
.time-label {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
}
.goal {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #111d25;
  border: 1px solid #253944;
  border-radius: 5px;
  padding: 12px 16px;
  margin-top: 4px;
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 0.8125rem;
}
.goal > svg {
  color: var(--accent);
  width: 17px;
}
.goal strong {
  font-weight: 550;
  color: #d1e4ee;
  margin-right: 14px;
}
.step-title-lockup .goal {
  grid-column: 2;
  align-self: center;
  min-width: 0;
  margin: 5px 0 0;
  padding: 0 0 0 13px;
  border: 0;
  border-left: 1px solid #38515e;
  border-radius: 0;
  background: transparent;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.step-title-lockup .goal > svg {
  display: none;
}
.step-title-lockup .goal strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}
.step-title-lockup .goal strong::before {
  content: "✓";
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: #15303a;
  box-shadow: 0 0 12px rgba(100, 217, 237, 0.22);
  color: var(--accent);
  font-family: ui-monospace, monospace;
  font-size: 0.65rem;
  line-height: 1;
}
.wizard-grid {
  display: grid;
  grid-template-columns: var(--video-cols, minmax(0, 1fr) minmax(0, 1.02fr));
  gap: 32px;
  align-items: start;
}
.video-column,
.commands {
  min-width: 0;
}
.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: #101922;
  border: 1px solid #2b3d4b;
  border-radius: 7px;
  overflow: hidden;
}
.video-placeholder {
  height: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(ellipse at 50% 40%, #1b3441 0, transparent 70%);
}
.video-os {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--dim);
}
.play-ring {
  height: 56px;
  width: 56px;
  border: 1px solid #4b6575;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  margin: 12px 0 18px;
}
.play-ring svg {
  width: 24px;
  height: 24px;
  margin-left: 4px;
}
.video-placeholder strong {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.video-placeholder p {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 7px;
}
.video-foot {
  position: absolute;
  bottom: 13px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--dim);
}
iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.video-caption {
  position: relative;
  padding-right: 178px !important;
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: 0.75rem;
  padding: 11px 1px 24px;
}
.small-heading {
  font-size: 0.875rem;
}
.action-list {
  list-style: none;
  padding: 0;
  counter-reset: action;
}
.action-list li {
  counter-increment: action;
  display: flex;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 13px;
}
.action-list li:before {
  content: counter(action, decimal-leading-zero);
  font-family: ui-monospace, monospace;
  color: var(--dim);
  font-size: 0.75rem;
  line-height: 2;
}
.tip {
  display: flex;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  margin-top: 24px;
  color: var(--muted);
  font-size: 0.8125rem;
}
.tip > svg {
  color: var(--dim);
  width: 18px;
  margin-top: 4px;
}
.tip p {
  margin: 0;
}
.tip strong {
  color: #c8d7e2;
  font-weight: 500;
}
code {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.commands-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.commands-heading h2 {
  font-size: 0.9375rem;
  margin: 0;
}
.commands-heading span {
  display: none;
}
.commands > .fine {
  margin-top: 6px;
  margin-bottom: 20px;
}
.workflow-prompts {
  position: relative;
}
.workflow-prompt {
  position: relative;
  margin: 0;
  padding: 0 0 18px;
}
.workflow-prompt:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 35px;
  bottom: -1px;
  width: 1px;
  background: var(--line);
}
.workflow-prompt > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
  color: var(--muted);
  list-style: none;
}
.workflow-prompt > summary::-webkit-details-marker {
  display: none;
}
.workflow-node {
  position: relative;
  z-index: 1;
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border: 1px solid #3b5160;
  border-radius: 50%;
  background: var(--bg);
  color: var(--dim);
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
}
.workflow-node svg {
  width: 16px;
  height: 16px;
}
.workflow-prompt > summary strong,
.workflow-prompt > summary small {
  display: block;
}
.workflow-prompt > summary strong {
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.workflow-prompt > summary small {
  margin-top: 1px;
  color: var(--dim);
  font-size: 0.6875rem;
}
.workflow-prompt[open] > summary {
  margin-bottom: 10px;
}
.workflow-prompt[open] .workflow-node {
  border-color: var(--accent);
  background: #15303a;
  color: var(--accent);
  box-shadow: 0 0 17px rgba(100, 217, 237, 0.18);
}
.workflow-prompt.is-complete .workflow-node {
  border-color: var(--accent);
  background: var(--accent);
  color: #08202a;
}
.workflow-prompt.is-complete::before {
  background: var(--accent);
}
.workflow-prompt > .prompt-card {
  margin-left: 46px;
}
.prompt-note {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: #15303a;
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
  font-size: 0.8125rem;
  color: var(--text);
}
.prompt-note strong {
  color: var(--accent);
}
.task-card .task-steps {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.task-card .task-steps li {
  margin-top: 10px;
}
.task-card .task-steps li:first-child {
  margin-top: 0;
}
.prompt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 17px 18px;
  margin: 0 0 14px;
  min-width: 0;
}
.prompt-top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
}
.prompt-order {
  font-family: ui-monospace, monospace;
  color: var(--dim);
  font-size: 0.75rem;
}
.target-label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.025em;
  color: var(--accent);
}
.target-label svg {
  width: 13px;
  height: 13px;
}
.prompt-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.prompt-title h3 {
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0;
  overflow-wrap: anywhere;
}
.copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  border-color: #34535f;
  padding: 6px 9px;
  font-size: 0.75rem;
  white-space: nowrap;
}
.copy svg {
  width: 14px;
  height: 14px;
}
.prompt-meta {
  font-family: ui-monospace, monospace;
  color: var(--dim);
  font-size: 0.75rem;
  margin-top: 9px;
}
.prompt-detail {
  margin-top: 13px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}
.prompt-detail summary {
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
}
.prompt-detail pre {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 350px;
  font-size: 0.875rem;
  line-height: 1.7;
  background: #0a1016;
  padding: 14px;
  border-radius: 4px;
  margin-bottom: 0;
  tab-size: 4;
}
.terminal-card {
  border-color: #5a4830;
  background: #1b1b19;
}
.terminal-card .target-label,
.terminal-card .copy {
  color: var(--amber);
}
.terminal-card .copy {
  border-color: #655039;
}
.terminal-card .prompt-detail {
  border-color: #443b2e;
}
.instruction {
  margin: 18px 0 24px;
  padding: 14px 16px;
  background: #101820;
  border-left: 2px solid #384d5f;
  border-radius: 0 4px 4px 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
summary {
  cursor: pointer;
}
summary:hover {
  color: var(--text);
}
.instruction summary {
  color: #d0dce5;
}
.instruction ol {
  padding-left: 20px;
  margin-bottom: 0;
}
.instruction li {
  margin-top: 11px;
}
.completion {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.completion .primary {
  width: 100%;
}
.completion .fine {
  display: none;
}
.completed-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 0.875rem;
}
.step-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-top: 0;
  font-size: 0.8125rem;
}
.step-footer a {
  color: var(--muted);
}
.step-footer a + a::before {
  content: "/";
  margin-right: 20px;
  color: var(--line);
}
.prepare-grid {
  display: grid;
  grid-template-columns: var(--video-cols, minmax(0, 1.4fr) minmax(240px, 1fr));
  gap: 48px;
}
.prepare-panel {
  padding: 28px;
}
.section-label {
  display: flex;
  gap: 12px;
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  color: var(--accent);
  margin-bottom: 22px;
}
.section-label span {
  font-family: inherit;
  color: var(--text);
}
.os-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.os-option {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 17px;
  background: #111c26;
}
.os-option.selected {
  background: #162d37;
  border-color: var(--accent);
}
.os-option > svg {
  margin-left: auto;
  color: var(--accent);
}
.os-symbol {
  font-size: 1.65rem;
}
.requirements {
  color: var(--muted);
  font-size: 0.8125rem;
}
.requirements p {
  margin-bottom: 12px;
}
.requirements strong {
  font-size: 0.8125rem;
  color: var(--text);
}
.prepare-panel .requirements {
  border-bottom: 1px solid var(--line);
  padding: 3px 0 17px;
  margin-bottom: 27px;
}
.checklist {
  display: grid;
  gap: 18px;
  margin-bottom: 26px;
}
.checklist label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.875rem;
  color: #ccd8e2;
}
.checklist input {
  margin-top: 5px;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.prepare-aside {
  padding: 14px 0;
}
.guide-player {
  margin-bottom: 34px;
  scroll-margin-top: 90px;
}
#prepare-form {
  scroll-margin-top: 140px;
}
.guide-line {
  margin: 0 0 22px;
}
.guide-line button.progress-step {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.guide-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.guide-controls > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.guide-need-os {
  margin-bottom: 34px;
}
.prepare-aside h2 {
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-top: 16px;
  margin-bottom: 30px;
}
.roadmap {
  list-style: none;
  border-left: 1px solid var(--line);
  padding-left: 24px;
  margin-left: 5px;
}
.roadmap li {
  position: relative;
  padding-bottom: 20px;
}
.roadmap li:before {
  content: "";
  height: 7px;
  width: 7px;
  background: #526978;
  border: 3px solid var(--bg);
  box-sizing: content-box;
  border-radius: 50%;
  position: absolute;
  left: -31px;
  top: 4px;
}
.roadmap li:first-child:before {
  background: var(--accent);
}
.roadmap span {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--dim);
}
.roadmap strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 6px 0;
}
.roadmap p {
  color: var(--muted);
  font-size: 0.8125rem;
}
.help {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 15px 0;
}
.help p {
  margin-top: 12px;
}
.single-column {
  max-width: 800px !important;
  margin-left: 0 !important;
}
.reading {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 16px;
  margin: 0 0 20px;
  border-radius: 6px;
  font-size: 0.875rem;
}
.reading > summary {
  font-weight: 500;
  margin-bottom: 10px;
}
.reading h3 {
  font-size: 0.875rem;
  margin: 18px 0 8px;
}
.reading p {
  color: var(--muted);
  font-size: 0.8125rem;
}
.bonus {
  display: inline-block;
  color: var(--accent);
  border: 1px solid #36545e;
  padding: 2px 7px;
  margin-right: 10px;
  font-size: 0.75rem;
}
.type-list > details {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.type-list summary {
  font-size: 0.8125rem;
  list-style: none;
}
.type-list summary span {
  font-family: ui-monospace, monospace;
  color: var(--accent);
  margin-right: 10px;
}
.type-list p {
  margin: 10px 0 0 26px;
}
.badge {
  margin-left: auto;
  font-family: ui-monospace, monospace;
  background: #193640;
  color: var(--accent);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 0.75rem;
}
.notice {
  margin-bottom: 20px;
}
.notice-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
  font-size: 0.75rem;
  color: var(--dim);
}
.notice-meta .badge {
  margin-left: 0;
}
.preserve {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.empty {
  padding: 35px;
}
.auth {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px 20px;
  gap: 30px;
}
.auth-card {
  width: min(100%, 440px);
  padding: 35px;
  border: 1px solid #2a4553;
  border-radius: 10px;
  background:
    linear-gradient(130deg, rgba(19, 38, 50, 0.74), transparent 50%),
    var(--surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32), inset 0 1px rgba(183, 245, 255, 0.05);
}
.auth-card h1 {
  font-size: 1.55rem;
  margin-top: 10px;
}
.auth-card label,
form > label {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 0.875rem;
  color: var(--muted);
}
input:not([type="checkbox"]),
textarea {
  background: #0b131b;
  border: 1px solid #344555;
  color: var(--text);
  border-radius: 5px;
  padding: 11px 12px;
  width: 100%;
  min-width: 0;
}
textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.6;
}
.wide {
  width: 100%;
}
.auth .fine {
  margin: 22px 0 0;
}
.auth > a.muted {
  font-size: 0.8125rem;
}
.error {
  color: #ffab9f;
  font-size: 0.8125rem;
  white-space: pre-wrap;
  margin: 10px 0 0;
}
.error:empty {
  display: none;
}
.error:not(:empty) {
  margin-bottom: 12px;
}
.public-requirements {
  max-width: 800px;
  margin: 80px auto;
  padding: 25px;
}
.loading {
  padding: 80px;
  text-align: center;
  color: var(--muted);
}
#toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 10px);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  border: 1px solid #487583;
  background: #16323d;
  color: #d2f5fc;
  border-radius: 6px;
  padding: 11px 22px;
  font-size: 0.875rem;
  transition:
    opacity 0.2s,
    transform 0.2s;
  max-width: 90vw;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.mobile-menu,
.drawer-scrim {
  display: none;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.version-line {
  color: var(--accent);
  font-size: 0.875rem;
  margin-bottom: 24px;
}
@media (min-width: 1600px) {
  #main {
    padding-top: 44px;
    padding-right: 60px;
    padding-left: 60px;
  }
  .wizard-grid {
    gap: 46px;
  }
}
@media (max-width: 1150px) {
  #main {
    padding: 28px 26px;
  }
  .workspace {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .wizard-grid {
    gap: 22px;
    grid-template-columns: var(--video-cols, minmax(0, 0.95fr) minmax(0, 1.05fr));
  }
  .prompt-title {
    align-items: flex-start;
  }
  .prepare-grid {
    gap: 25px;
    grid-template-columns: 1fr;
  }
  .prepare-aside {
    display: none;
  }
  .progress-step > span:nth-child(2) {
    font-size: 0.75rem;
  }
  .video-placeholder {
    min-height: 200px;
  }
  .target-label {
    font-size: 0.75rem;
  }
}
@media (max-width: 900px) {
  .wizard-grid {
    grid-template-columns: 1fr;
  }
  .video-column {
    max-width: 650px;
  }
  .video-frame {
    aspect-ratio: 16/9;
  }
  .video-column .tip {
    margin-top: 16px;
  }
  .progress-step > span:nth-child(2) {
    display: none;
  }
  .progress-line {
    margin-bottom: 28px;
  }
  .goal strong {
    display: block;
    margin-bottom: 3px;
  }
  .step-title-lockup {
    grid-template-columns: 1fr;
  }
  .step-title-lockup .goal {
    grid-column: 1;
    margin-top: 6px;
  }
  .prompt-title {
    align-items: center;
  }
  .target-label {
    font-size: 0.75rem;
  }
}
@media (max-width: 700px) {
  .workspace {
    display: block;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 275px;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  .drawer-open .sidebar {
    transform: none;
  }
  .main-wrap {
    height: 100dvh;
  }
  .mobile-menu {
    display: inline-flex;
    padding: 6px;
    border: 0;
  }
  .topbar {
    padding: 0 15px;
    height: 52px;
    min-height: 52px;
    justify-content: flex-start;
    font-size: 0.75rem;
  }
  .secure {
    margin-left: auto;
    font-size: 0;
  }
  .topbar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-os {
    margin-left: 10px;
    font-size: 0;
  }
  .topbar-os select {
    min-width: 92px;
  }
  .topbar-os + .secure {
    margin-left: 10px;
  }
  .secure svg {
    width: 17px;
    height: 17px;
  }
  .slash {
    padding: 0 6px;
  }
  .drawer-open .drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    border-radius: 0;
    background: #0009;
    z-index: 29;
    width: 100%;
    height: 100%;
  }
  #main {
    padding: 25px 18px 22px;
  }
  h1 {
    font-size: 1.55rem;
  }
  .step-heading .eyebrow {
    font-size: 0.75rem;
  }
  .step-count {
    font-size: 1rem;
  }
  .step-count span {
    font-size: 0.75rem;
  }
  .step-title-row {
    align-items: flex-end;
  }
  .time-label {
    margin-bottom: 17px;
    font-size: 0.75rem;
  }
  .progress-line {
    margin-top: 23px;
    margin-bottom: 25px;
  }
  .goal {
    padding: 12px;
    font-size: 0.75rem;
    margin-bottom: 24px;
  }
  .wizard-grid {
    gap: 24px;
  }
  .prompt-card {
    padding: 15px;
  }
  .prompt-title h3 {
    font-size: 0.875rem;
  }
  .step-footer {
    font-size: 0.75rem;
  }
  .page-heading {
    padding: 0 0 20px;
  }
  .page-heading h1 {
    font-size: 1.45rem;
  }
  .page-heading p {
    font-size: 0.875rem;
  }
  .prepare-panel {
    padding: 20px;
  }
  .os-option {
    padding: 12px;
    gap: 8px;
  }
  .os-symbol {
    font-size: 1.35rem;
  }
  .panel {
    padding: 20px;
  }
  .auth-card {
    padding: 26px;
  }
  .single-column {
    width: 100%;
  }
  .prompt-title {
    flex-wrap: wrap;
  }
  .copy {
    margin-left: auto;
    min-height: 36px;
  }
  .commands-heading span {
    font-size: 0.75rem;
  }
  .public-requirements {
    margin-top: 25px;
  }
  .reading {
    padding: 14px;
  }
  .auth {
    justify-content: flex-start;
    padding-top: 65px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-heading h2 {
  margin-bottom: 6px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.form-row > label {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 0.875rem;
  color: var(--muted);
  min-width: 0;
}
.form-row select {
  width: 100%;
  min-width: 0;
}
.consent {
  background: #0c151d;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 15px;
  margin: 8px 0 18px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.consent label {
  display: flex;
  gap: 10px;
  color: var(--text);
}
.consent input {
  accent-color: var(--accent);
  flex-shrink: 0;
}
.tiktok-panel {
  margin: 22px 0;
}
.data-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 28px;
}
.data-grid .tiktok-panel {
  margin-top: 0;
}
.data-grid .panel {
  margin-bottom: 24px;
}
.report-history {
  padding: 18px;
}
.report-history summary {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 0.875rem;
}
.report-history small {
  color: var(--dim);
  font-size: 0.75rem;
}
.report-history p {
  margin-top: 20px;
  font-size: 0.875rem;
}
.file-link {
  display: inline-block;
  font-size: 0.8125rem;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin: 5px 8px 0 0;
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.admin-stats > div {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 20px;
  border-radius: 7px;
}
.admin-stats span {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}
.admin-stats strong {
  font-size: 1.8rem;
  font-weight: 450;
  color: var(--accent);
  font-family: ui-monospace, monospace;
}
.admin-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  border-bottom: 1px solid var(--line);
  padding: 0 0 20px;
  margin-bottom: 24px;
  font-size: 0.875rem;
}
.admin-section {
  margin-bottom: 25px;
  scroll-margin-top: 20px;
}
.admin-section h2 {
  margin-bottom: 24px;
}
.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 15px;
}
.inline-form > label {
  flex: 1;
  min-width: 220px;
  margin-bottom: 0;
}
.inline-form button {
  margin-bottom: 0;
  min-height: 47px;
}
.inline-form .error {
  width: 100%;
}
.table-scroll {
  overflow-x: auto;
  margin: 18px -4px 0;
  padding: 4px;
}
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.table-scroll th {
  font-weight: 500;
  color: var(--muted);
  background: #14212c;
}
.table-scroll th,
.table-scroll td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.table-scroll td .quiet {
  font-size: 0.75rem;
  padding: 4px 6px;
}
.admin-progress {
  display: flex;
  gap: 4px;
}
.admin-progress > span {
  font-size: 0.75rem;
  font-family: ui-monospace, monospace;
  border: 1px solid #344654;
  border-radius: 3px;
  padding: 0 4px;
  color: var(--muted);
}
.admin-progress .is-done {
  color: var(--accent);
  background: #19343f;
  border-color: #426571;
}
.export-link,
.export-row {
  font-size: 0.8125rem;
}
.export-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.command-settings {
  margin-top: 30px;
}
.command-settings > summary {
  color: var(--amber);
}
.code-input {
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
  min-height: 220px;
  white-space: pre;
  overflow: auto;
}
.admin-section form {
  max-width: 860px;
}
.notice-list {
  margin-top: 25px;
}
.notice-list > div {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
  font-size: 0.875rem;
}
.notice-list > div > span {
  flex: 1;
}
.invite-result {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid #426773;
  border-radius: 5px;
  background: #152a34;
}
.invite-result label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.875rem;
}
.invite-result input {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
}
fieldset {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 18px;
  margin: 0 0 20px;
  min-width: 0;
}
legend {
  color: var(--accent);
  font-size: 0.875rem;
  padding: 0 8px;
}
fieldset label {
  display: grid;
  gap: 8px;
  margin-bottom: 15px;
  font-size: 0.875rem;
  color: var(--muted);
}
fieldset textarea {
  min-height: 90px;
}
input[type="file"] {
  font-size: 0.8125rem;
}
.danger {
  color: #ffac9c;
}
.skeleton {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 45px;
  color: var(--muted);
}
@media (max-width: 1100px) {
  .data-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .admin-stats {
    gap: 8px;
  }
  .admin-stats > div {
    padding: 12px;
  }
  .admin-stats span {
    font-size: 0.75rem;
  }
  .admin-stats strong {
    font-size: 1.5rem;
  }
  .inline-form {
    display: grid;
  }
  .inline-form > label {
    min-width: 0;
  }
  .admin-section {
    padding: 16px;
  }
  .admin-jumps {
    font-size: 0.8125rem;
    gap: 10px 15px;
  }
}

/* Member-controlled navigation width and visibility. */
.workspace {
  position: relative;
  grid-template-columns: var(--sidebar-width, 256px) minmax(0, 1fr);
}
.sidebar-heading {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.sidebar-heading .brand-lockup > span,
.sidebar-heading .brand-lockup small {
  white-space: normal;
  overflow-wrap: anywhere;
}
.sidebar-hide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 30px;
  height: 30px;
  padding: 4px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.sidebar-hide:hover {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}
.sidebar-hide svg {
  width: 19px;
  height: 19px;
}
.build-label {
  width: 100%;
  border: 0;
  text-align: left;
}
.build-label small {
  margin-left: 3px;
  color: var(--dim);
  line-height: 1;
}
.build-chevron {
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin-left: 3px;
  place-items: center;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1;
  transform: translateY(-3px);
  flex-shrink: 0;
}
.step-nav[hidden] {
  display: none;
}
.sidebar-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--sidebar-width, 256px) - 4px);
  width: 8px;
  z-index: 20;
  cursor: col-resize;
  touch-action: none;
}
.sidebar-resizer::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 150ms;
}
.sidebar-resizer:hover::after,
.sidebar-resizer:focus-visible::after,
.resizing-sidebar .sidebar-resizer::after {
  background: var(--accent);
}
.sidebar-resizer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.resizing-sidebar,
.resizing-sidebar * {
  cursor: col-resize !important;
  user-select: none !important;
}
.resizing-sidebar iframe {
  pointer-events: none;
}
.workspace.sidebar-hidden {
  grid-template-columns: minmax(0, 1fr);
}
.sidebar-hidden .sidebar,
.sidebar-hidden .sidebar-resizer {
  display: none;
}
.mobile-menu {
  display: inline-flex;
  padding: 6px;
  border: 0;
  flex-shrink: 0;
}
.topbar {
  justify-content: flex-start;
}
.topbar .secure {
  margin-left: auto;
}
.topbar .topbar-os {
  margin-left: auto;
}
.topbar .topbar-os + .secure {
  margin-left: 20px;
}
@media (max-width: 700px) {
  .workspace {
    display: block;
  }
  .sidebar {
    width: min(var(--sidebar-width, 256px), calc(100vw - 48px));
  }
  .sidebar-resizer {
    display: none;
  }
  .topbar .topbar-os {
    margin-left: 10px;
  }
  .topbar .topbar-os + .secure {
    margin-left: 10px;
  }
}

.bonus-nav .step-link {
  align-items: flex-start;
}
.bonus-nav .step-link {
  gap: 12px;
}
.bonus-marker {
  position: relative;
  width: 9px;
  height: 9px;
  margin: 6px 5px 0;
  flex-shrink: 0;
  border: 1px solid #5c9cad;
  transform: rotate(45deg);
  background: #10242e;
  box-shadow: 0 0 10px rgba(100, 217, 237, 0.14);
}
.bonus-marker::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--accent);
  opacity: 0.75;
}
.bonus-nav .step-link.current .bonus-marker {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 14px rgba(100, 217, 237, 0.48);
}
.bonus-nav .step-link.current .bonus-marker::after {
  background: #e4fcff;
}
.bonus-nav .step-link > span:last-child {
  overflow-wrap: anywhere;
}
.build-label .build-chevron:last-child {
  margin-left: 8px;
  flex-shrink: 0;
}
.bonus-link {
  margin-bottom: 22px;
}
.bonus-link h3 {
  margin: 12px 0 8px;
}
.bonus-link a,
.bonus-return {
  font-size: 0.875rem;
}
.bonus-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.bonus-layout > section {
  min-width: 0;
}
.bonus-return {
  display: inline-block;
  margin-top: 14px;
}
@media (max-width: 1000px) {
  .bonus-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
.signup-link { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; padding: 10px; font-size: 0.875rem; }
.issued-member-id { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 10px; background: #132b36; border: 1px solid #355c6b; border-radius: 7px; }
.issued-member-id > span { color: var(--muted); font-size: 0.875rem; }
.issued-member-id strong { color: var(--accent); font-family: ui-monospace, monospace; font-size: 1.5rem; letter-spacing: 0.06em; overflow-wrap: anywhere; }

.operator-dashboard {max-width:1400px;margin:0 auto;padding:32px 24px;}
.operator-header {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:36px;flex-wrap:wrap;}

.home-hero {display:grid;grid-template-columns:minmax(0,1.4fr) minmax(270px,1fr);overflow:hidden;border:1px solid #254052;border-radius:14px;background:linear-gradient(120deg,#07111f,#101f2c);margin-bottom:26px;box-shadow:0 16px 48px #0003;}
.home-package {display:flex;align-items:center;background:#030914;min-width:0;}
.home-package img {display:block;width:100%;height:auto;object-fit:contain;}
.home-welcome {padding:36px 30px;align-self:center;min-width:0;}
.home-welcome h1 {font-size:clamp(25px,2.7vw,40px);line-height:1.45;letter-spacing:.02em;margin:12px 0 16px;}
.home-welcome p {color:var(--muted);margin-bottom:24px;}
.home-welcome .primary {display:inline-flex;align-items:center;gap:12px;padding:12px 20px;border:1px solid var(--accent);border-radius:var(--radius);text-decoration:none;line-height:1.5;max-width:100%;}
.home-next {display:block;color:var(--muted);font-size:12px;margin-top:16px;}
.home-lower {display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.home-section-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.home-section-heading h2 {margin:0;font-size:20px;}
.home-section-heading strong {font-size:32px;color:var(--accent);}
.home-section-heading strong small {font-size:16px;color:var(--muted);font-weight:400;}
.home-section-heading a {font-size:13px;}
.home-progress progress {display:block;width:100%;height:8px;border:0;border-radius:99px;overflow:hidden;background:var(--line);accent-color:var(--accent);}
.home-progress progress::-webkit-progress-bar {background:var(--line);}
.home-progress progress::-webkit-progress-value {background:var(--accent);border-radius:99px;}
.home-progress progress::-moz-progress-bar {background:var(--accent);}
.home-step-list {padding:0;margin:20px 0 0;list-style:none;}
.home-step-list a {display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--text);font-size:14px;text-decoration:none;}
.home-step-list a:hover {color:var(--accent);}
.home-step-number {display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:12px;}
.home-step-number.is-done {color:var(--accent);background:#64d9ed15;border-color:#64d9ed66;}
.home-step-list small {margin-left:auto;color:var(--accent);white-space:nowrap;}
.home-news article {padding:18px 0;border-top:1px solid var(--line);}
.home-news h3 {font-size:16px;margin:10px 0;overflow-wrap:anywhere;}
.home-news article p {font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap;margin:0;}
@media(max-width:1100px) {.home-hero {grid-template-columns:1fr;}.home-welcome {padding:28px;}.home-welcome h1 br {display:none;}}
@media(max-width:700px) {.home-lower {grid-template-columns:1fr;}.home-welcome {padding:24px 20px;}.home-welcome h1 {font-size:26px;}.home-welcome .primary {width:100%;justify-content:center;}}

.upgrade-concept {max-width:900px;}
.upgrade-features {padding-left:24px;margin:24px 0 30px;}
.upgrade-features li {padding:8px 0;line-height:1.9;}
.upgrade-vote {display:flex;gap:14px;margin-top:30px;}
.upgrade-vote button {flex:1;max-width:240px;min-height:52px;font-size:16px;}
.upgrade-vote button[aria-pressed="true"] {background:var(--accent);border-color:var(--accent);color:#072630;font-weight:650;}
#upgrade-request-form {margin-top:30px;padding-top:26px;border-top:1px solid var(--line);}
#upgrade-request-status {margin-left:14px;}
.upgrade-request-item {border-top:1px solid var(--line);padding:18px 0;overflow-wrap:anywhere;}
.upgrade-request-item p {margin:12px 0 0;}


/* Monetization playbook: existing palette, type and panel tokens. */
.playbook-metrics {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:700px;}
.playbook-metrics .step-count {padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--accent);font-size:1.8rem;}
.playbook-metrics .step-count span {display:block;font-size:.75rem;color:var(--muted);}
.playbook-version {text-align:right;margin:10px 0;}
.playbook-jump {
 position:relative;
 color:var(--muted);
 font-size:.8125rem;
 line-height:1.7;
 margin:0 0 24px;
 padding:16px 0;
 border-block:1px solid var(--line);
}
.playbook-jump::before,
.playbook-jump::after {
 content:"";
 position:absolute;
 left:0;
 width:32px;
 height:1px;
 background:var(--accent);
 opacity:.65;
}
.playbook-jump::before {top:-1px;}
.playbook-jump::after {bottom:-1px;}
.playbook-jump > span {color:var(--accent);display:block;margin-top:4px;}
.flow-step {display:flex;align-items:center;gap:12px;margin:0 0 12px;}
.flow-step .node {flex-shrink:0;border-color:var(--accent);background:#15303a;color:var(--accent);box-shadow:0 0 18px #64d9ed15;}
.flow-step h2 {margin:0;font-size:1rem;font-weight:600;}
/* Equal breathing room around the connectors; keep step typography intact. */
#monetization-prompt .flow-arrow {position:relative;width:37px;height:32px;margin:20px 0;}
#monetization-prompt .flow-arrow::before {content:"";position:absolute;left:18px;top:0;bottom:0;width:1px;background:var(--line);}
#monetization-prompt > .fine:has(+ .flow-arrow),
#monetization-prompt > .playbook-input:has(+ .flow-arrow) {margin-bottom:0;}
#playbook-input-status:empty {display:none;}
.playbook-subheading {font-size:.875rem;font-weight:600;margin:18px 0 8px;}
.playbook-input {display:grid;gap:12px;margin:4px 0 6px;}
.playbook-input label {display:grid;gap:6px;font-size:.8125rem;color:var(--muted);}
.playbook-input select,.playbook-input textarea {width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);padding:9px 10px;font-size:.875rem;}
.playbook-input textarea {resize:vertical;}
.playbook-input .fine {margin:0;}
.playbook-layout {grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:26px;}
.playbook,.playbook-group,.playbook-type-body {min-width:0;overflow-wrap:anywhere;}
.playbook-questions {padding:18px;margin-bottom:24px;}
.playbook-questions fieldset {padding:0;border:0;margin:12px 0;}
.playbook-questions legend {padding:0;color:var(--muted);font-size:.8125rem;margin-bottom:8px;}
.playbook-questions .os-options {margin:0;gap:8px;}
.playbook-questions .os-option {padding:8px 12px;justify-content:center;font-size:.8125rem;min-width:0;}
.playbook-questions .os-option[aria-pressed="true"] {color:var(--accent);border-color:var(--accent);background:var(--raised);}
.playbook-questions .form-heading {gap:8px;flex-wrap:wrap;}
.playbook-questions h2 {margin:0;}
.playbook-questions .fine {margin-bottom:0;font-size:.75rem;}
.playbook-group {margin-bottom:22px;}
.playbook .section-label {font-size:.8125rem;margin:26px 0 10px;letter-spacing:.02em;}
.playbook .section-label > span {color:var(--accent);font-family:ui-monospace,monospace;margin-right:8px;}
.playbook-type {border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin:6px 0;scroll-margin-top:70px;}
.playbook-type > summary {display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:10px 12px;list-style:none;cursor:pointer;}
.playbook-type > summary::-webkit-details-marker {display:none;}
.playbook-number {font-family:ui-monospace,monospace;color:var(--accent);font-size:.8125rem;}
.playbook-type-name {font-size:.8125rem;line-height:1.6;}
.playbook-badges {grid-column:2;display:flex;flex-wrap:wrap;gap:4px;}
.playbook-badges .badge {margin:0;font-size:.625rem;padding:1px 6px;font-weight:400;}
.playbook-detail-label {grid-column:3;grid-row:1 / span 2;color:var(--accent);font-size:.6875rem;white-space:nowrap;}
.playbook-type[open] {border-color:var(--accent);}
.playbook-type[open] > summary {border-bottom:1px solid var(--line);}
.playbook-type[open] .playbook-detail-label span {display:inline-block;transform:rotate(45deg);}
.playbook-type.is-dimmed {opacity:.45;}
.playbook-type.is-dimmed[open],.playbook-type.is-dimmed:focus-within {opacity:1;}
.playbook-type-body {padding:18px;font-size:.8125rem;}
.playbook-type-body h3 {font-size:.9375rem;margin:24px 0 10px;}
.playbook-type-body h4,.playbook-systems h4 {font-size:.8125rem;color:var(--muted);margin:16px 0 8px;}
.playbook-type-body p {white-space:pre-line;}
.playbook-type-body ul,.playbook-systems ol {padding-left:20px;}
.playbook-type-body li {margin:6px 0;}
.playbook-profile {display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;margin:0;}
.playbook-profile dt {color:var(--muted);}
.playbook-profile dd {margin:0;}
.playbook-type-body .tip {margin:10px 0;}
.playbook-type-body .tip p {margin:6px 0 0;}
.playbook-choose {width:100%;font-size:.8125rem;text-align:left;white-space:normal;}
.playbook-products {min-width:0;}
.playbook-products .table-scroll {max-width:100%;}
.playbook-products-select {max-width:420px;margin-bottom:10px;}
.playbook-products th:first-child,.playbook-products td:first-child {width:1%;white-space:nowrap;padding-right:10px;}
.playbook-products td:nth-child(2) {white-space:normal;min-width:200px;}
.playbook-products th:nth-child(3),.playbook-products td:nth-child(3),.playbook-products th:nth-child(4),.playbook-products td:nth-child(4) {width:1%;white-space:nowrap;}
.playbook-discontinued {color:var(--muted);}
.playbook-systems {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.playbook-systems .panel {padding:16px;}
.playbook-systems h3 {font-size:.875rem;margin:10px 0;}
.playbook-systems p,.playbook-systems li {font-size:.8125rem;}
.playbook-system-links {display:flex;flex-wrap:wrap;gap:5px;}
.playbook-system-links button {padding:4px 7px;font-family:ui-monospace,monospace;}
#monetization-prompt {scroll-margin-top:75px;}
#monetization-prompt .prompt-meta {display:none;}
#monetization-prompt .prompt-detail {margin-top:10px;}
.playbook [hidden] {display:none !important;}
@media(max-width:1000px) {.playbook-layout {grid-template-columns:minmax(0,1fr);}}
@media(max-width:700px) {
 .playbook-metrics {gap:6px;}.playbook-metrics .step-count {padding:10px;font-size:1.25rem;}
 .playbook-metrics .step-count span {font-size:.625rem;}.playbook-version {font-size:.625rem;}
 .playbook-systems {grid-template-columns:minmax(0,1fr);}
 .playbook-profile {grid-template-columns:minmax(0,1fr);gap:3px;}.playbook-profile dd {margin-bottom:10px;}
 .playbook-type > summary {padding:10px 8px;gap:4px 8px;}.playbook-type-body {padding:14px;}
 .playbook-type-name {font-size:.75rem;}.playbook .reading {padding:12px;}
}
.playbook-type-body .tip {display:block;}
@media(min-width:1001px) {
 #monetization-prompt {
  position:sticky;
  top:12px;
  /* 56px topbar plus 12px clearance above and below the fixed column. */
  max-height:calc(100dvh - 80px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  scroll-margin-top:12px;
 }
}
@media(min-width:701px) {
 .playbook-type > summary {grid-template-columns:24px minmax(0,1fr) auto auto;padding:9px 12px;}
 .playbook-badges {grid-column:3;max-width:170px;justify-content:flex-end;}
 .playbook-detail-label {grid-column:4;grid-row:1;}
}

#monetization-prompt .bonus-return {margin-top:6px;}

/* Expandable notes above the monetization FAQ. */
.playbook-memos {display:grid;gap:12px;margin:26px 0;}
.playbook-memo {--memo-accent:var(--accent);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;}
.playbook-memo-secret {--memo-accent:var(--amber);}
.playbook-memo > summary {display:flex;align-items:center;gap:14px;padding:18px;cursor:pointer;list-style:none;}
.playbook-memo > summary::-webkit-details-marker {display:none;}
.playbook-memo > summary:hover {background:var(--raised);}
.playbook-memo > summary:focus-visible {outline:2px solid var(--memo-accent);outline-offset:-3px;}
.memo-icon {display:grid;place-items:center;flex:0 0 38px;height:38px;border:1px solid var(--line);border-radius:var(--radius);color:var(--memo-accent);background:var(--raised);}
.memo-icon svg {width:21px;height:21px;}
.memo-label {display:grid;gap:3px;min-width:0;}
.memo-label .eyebrow {font-size:.625rem;letter-spacing:.12em;color:var(--memo-accent);}
.memo-title {font-size:.9375rem;font-weight:600;}
.memo-toggle {position:relative;flex:0 0 16px;height:16px;margin-left:auto;color:var(--memo-accent);}
.memo-toggle::before,.memo-toggle::after {content:"";position:absolute;background:currentColor;}
.memo-toggle::before {width:12px;height:1px;left:2px;top:7px;}
.memo-toggle::after {width:1px;height:12px;left:7px;top:2px;}
.playbook-memo[open] .memo-toggle::after {display:none;}
.playbook-memo[open] {border-left-color:var(--memo-accent);}
.memo-body {margin:0 18px;padding:16px 0 18px;border-top:1px solid var(--line);font-size:.875rem;line-height:1.8;color:var(--muted);overflow-wrap:anywhere;}
.memo-body p {margin:0;white-space:pre-wrap;}

.playbook-group-heading {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin:26px 0 10px;}
.playbook .playbook-group-heading .section-label {margin:0;flex:1;min-width:180px;}
.playbook-explain-button {flex-shrink:0;padding:4px 10px;font-size:.6875rem;color:var(--accent);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);}
.playbook-explain-button[aria-expanded="true"] {border-color:var(--accent);background:var(--raised);}
.playbook-explanation {padding:14px 16px;margin-bottom:12px;border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--radius);background:var(--surface);color:var(--muted);font-size:.8125rem;line-height:1.8;overflow-wrap:anywhere;}
.playbook-explanation p {margin:0;white-space:pre-wrap;}
.playbook-explanation h3 {font-size:.8125rem;color:var(--text,inherit);margin:16px 0 6px;}
.playbook-explanation h3:first-child,.playbook-guide h3:first-child {margin-top:0;}
.playbook-explanation ol,.playbook-type-body ol {margin:0;padding-left:20px;}
.playbook-explanation li,.playbook-type-body ol li {margin:6px 0;}
.playbook-guide {padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line);}

.playbook-type-body > h3:first-child {margin-top:0;}

.playbook-locked-wrap {position:relative;}
.playbook-locked {display:flex;align-items:center;gap:12px;width:100%;padding:13px 12px;text-align:left;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface);color:var(--muted);cursor:default;}
.playbook-locked .playbook-number {color:var(--dim);}
.playbook-locked .playbook-type-name {flex:1;min-width:0;}
.playbook-lock-mark {display:flex;align-items:center;gap:6px;color:var(--dim);font-family:ui-monospace,monospace;font-size:.625rem;letter-spacing:.06em;}
.playbook-lock-mark svg {width:17px;height:17px;flex-shrink:0;}
.playbook-locked:hover,.playbook-locked:focus-visible {border-color:var(--dim);background:var(--raised);}
.playbook-lock-tooltip {position:absolute;bottom:calc(100% + 8px);right:0;max-width:100%;padding:9px 13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);color:var(--text);font-size:.75rem;line-height:1.6;visibility:hidden;opacity:0;pointer-events:none;z-index:4;}
.playbook-locked-wrap:hover .playbook-lock-tooltip,.playbook-locked-wrap:focus-within .playbook-lock-tooltip {visibility:visible;opacity:1;}

/* Account blueprint shares playbook typography, tokens, and controls. */
.account-metrics {grid-template-columns:repeat(3,minmax(0,1fr));}
.account-tabs {display:flex;gap:8px;margin:12px 0;}
.account-tabs .os-option {min-width:0;flex:1;justify-content:center;padding:9px 12px;font-size:.8125rem;}
.account-blueprint .os-option[aria-pressed="true"] {border-color:var(--accent);color:var(--accent);background:var(--raised);}
.account-blueprint .os-option:disabled {opacity:.45;cursor:default;}
.account-preview-layout {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:center;}
.account-profile {padding:24px 20px;text-align:center;min-width:0;}
.account-avatar {position:relative;display:grid;place-items:center;width:100px;height:100px;margin:0 auto 16px;border:1px solid;border-radius:50%;overflow:hidden;font-size:.75rem;padding:10px;}
.account-avatar img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.account-profile h3 {margin:0;font-size:1.15rem;}
.account-profile .fine {font-size:.6875rem;margin:6px 0 16px;}
.account-bio {font-size:.8125rem;line-height:1.9;white-space:pre-wrap;}
.account-follow {display:block;margin:18px auto 0;padding:7px 20px;max-width:180px;font-size:.8125rem;}
.account-summary {margin:0;font-size:.8125rem;}
.account-summary > div {padding:14px 0;border-bottom:1px solid var(--line);}
.account-summary dt {font-size:.6875rem;color:var(--accent);margin-bottom:5px;}
.account-summary dd {margin:0;line-height:1.85;}
.account-voice-samples {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:-4px;}
.account-voice-samples[hidden] {display:none;}
.account-voice-samples .os-option {justify-content:center;font-size:.8125rem;padding:8px 10px;}
.account-voice-samples .os-option[aria-pressed="true"] {border-color:var(--accent);color:var(--accent);}
.account-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.account-gallery img {width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);}
.account-item .playbook-badges .badge {white-space:normal;}
#account-prompt {min-width:0;overflow-wrap:anywhere;}
#account-prompt .flow-arrow {position:relative;width:37px;height:32px;margin:20px 0;}
#account-prompt .flow-arrow::before {content:"";position:absolute;left:18px;top:0;bottom:0;width:1px;background:var(--line);}
#account-prompt .prompt-meta {display:none;}
#account-prompt .prompt-detail {margin-top:10px;}
#account-prompt .bonus-return {margin-top:6px;}
@media(max-width:700px) {
 .account-preview-layout {grid-template-columns:minmax(0,1fr);gap:0;}
 .account-profile {width:100%;}
 .account-gallery {grid-template-columns:repeat(2,minmax(0,1fr));}
}

.account-avatar {background:var(--bg);color:var(--amber);border-color:var(--text);}

.account-logout {margin-bottom:28px;}

/* 動画の大きさを変えるつまみ（動画の右下） */
.video-resize {
  position: absolute;
  top: 6px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 9px 0 11px;
  border: 1px solid #2f5866;
  border-radius: 999px;
  background: #12252e;
  color: var(--accent);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  cursor: nwse-resize;
  touch-action: none;
}
.video-resize svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.video-resize:hover,
.video-resize:focus-visible {
  border-color: var(--accent);
  background: #15303a;
}
.resizing-video,
.resizing-video * {
  cursor: nwse-resize !important;
  user-select: none !important;
}
.resizing-video iframe {
  pointer-events: none;
}
@media (max-width: 1150px) {
  .prepare-grid .video-resize {
    display: none;
  }
}
@media (max-width: 900px) {
  .wizard-grid .video-resize {
    display: none;
  }
  .wizard-grid .video-caption {
    padding-right: 1px !important;
  }
}
@media (max-width: 1150px) {
  .prepare-grid .video-caption {
    padding-right: 1px !important;
  }
}

/* 動画の終了画面（Vimeo のおすすめ動画を覆う） */
.video-end {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, #1b3441 0, #101922 70%);
  text-align: center;
}
.video-end > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* セットアップガイド: 案内を上に横長で置き、本文は箱なしで全幅 */
.prepare-roadmap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-bottom: 30px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.prepare-roadmap h2 {
  font-size: 1.35rem;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin: 10px 0 0;
}
.prepare-roadmap .roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 18px 0 0;
  border-left: 0;
  border-top: 1px solid var(--line);
}
.prepare-roadmap .roadmap li {
  padding-bottom: 0;
}
.prepare-roadmap .roadmap li:before {
  left: 0;
  top: -25px;
}
.prepare-body .guide-player {
  max-width: 1000px;
}
@media (max-width: 900px) {
  .prepare-roadmap {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (max-width: 700px) {
  .prepare-roadmap .roadmap {
    grid-template-columns: 1fr;
    gap: 14px;
    border-top: 0;
    padding-top: 0;
  }
  .prepare-roadmap .roadmap li:before {
    display: none;
  }
  .prepare-body .video-resize {
    display: none;
  }
  .prepare-body .video-caption {
    padding-right: 1px !important;
  }
}
.prepare-body .os-options {
  max-width: 880px;
}
@media (max-width: 700px) {
  .prepare-roadmap {
    display: none;
  }
}
/* 各手順の左端と本文幅を統一。動画のサイズ変更は引き続き全幅まで対応。 */
.prepare-body > .section-label,
.prepare-body > .os-options,
.prepare-center > * {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.prepare-center > .guide-player {
  max-width: 1000px;
}

/* セットアップガイドの見出し・操作エリア */
.prepare-body .section-label {
  align-items: baseline;
  gap: 18px;
  margin-top: 0;
  margin-bottom: 24px;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.prepare-body .section-label span {
  font-family: Inter, "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
.prepare-body > .section-label {
  margin-bottom: 36px;
}
.prepare-body .os-options {
  gap: 20px;
  padding-bottom: 52px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.prepare-body .os-option {
  min-height: 80px;
  padding: 20px 24px;
  gap: 16px;
  font-size: 1.125rem;
  font-weight: 600;
}
.prepare-body .os-option {
  transition: border-color 160ms ease, background-color 160ms ease;
}
.prepare-body .os-option:hover {
  border-color: var(--accent);
  background-color: #172a35;
}
.prepare-body .os-option.selected {
  border-color: var(--accent);
  background: linear-gradient(120deg, #1b3944, #132831);
  box-shadow: inset 0 0 0 1px rgb(100 217 237 / 18%);
}
.prepare-body .os-option.selected .os-symbol {
  color: var(--accent);
}
.prepare-body .os-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.prepare-body .guide-line button.progress-step {
  font-size: 0.875rem;
  line-height: 1.6;
}
.prepare-body .guide-player,
.prepare-body .guide-need-os {
  padding-bottom: 36px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.prepare-body .checklist {
  gap: 12px;
  margin-bottom: 28px;
}
.prepare-body .checklist label {
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1rem;
  line-height: 1.75;
  cursor: pointer;
}
.prepare-body .checklist label:has(input:checked) {
  border-color: #397281;
  background: #12252e;
}
.prepare-body .checklist input {
  width: 20px;
  height: 20px;
  margin-top: 4px;
}
.prepare-body #prepare-form > .primary {
  min-height: 52px;
  padding: 14px 24px;
  font-size: 1rem;
}
.prepare-body .help {
  margin-top: 24px;
}
@media (max-width: 700px) {
  .prepare-body .section-label {
    gap: 12px;
    margin-bottom: 20px;
  }
  .prepare-body > .section-label {
    margin-bottom: 30px;
  }
  .prepare-body .os-options {
    gap: 12px;
    padding-bottom: 40px;
    margin-bottom: 32px;
  }
  .prepare-body .os-option {
    min-height: 72px;
    padding: 16px 12px;
    gap: 10px;
    font-size: 1rem;
  }
  .prepare-body .guide-player,
  .prepare-body .guide-need-os {
    padding-bottom: 28px;
    margin-bottom: 32px;
  }
  .prepare-body .guide-line button.progress-step {
    font-size: 0.8125rem;
  }
  .prepare-body .checklist label {
    padding: 16px;
    font-size: 0.9375rem;
  }
  .prepare-body #prepare-form > .primary {
    width: 100%;
    padding: 14px 16px;
    font-size: 0.9375rem;
  }
}

/* ステップ1冒頭の「セットアップガイドを視聴しました」 */
.guide-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 26px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.guide-confirm p {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.875rem;
  color: var(--amber);
}
.guide-confirm label {
  font-size: 0.9375rem;
  color: var(--text);
}
.guide-confirm a {
  font-size: 0.8125rem;
}

/* ステップ1の「Pexels の API キーが発行できない場合」のボックス（押すと動画が開く） */
.pixabay-guide {
  margin: 0 0 26px;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line));
  border-radius: var(--radius);
  background: var(--raised);
  overflow: hidden;
}
.pixabay-guide > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}
.pixabay-guide > summary::-webkit-details-marker {
  display: none;
}
.pixabay-guide-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--amber);
  color: var(--bg);
  font-size: 0.8125rem;
  font-weight: 800;
}
.pixabay-guide-open {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.pixabay-guide-open::after {
  content: " ▾";
}
.pixabay-guide[open] .pixabay-guide-open::after {
  content: " ▴";
}
.pixabay-guide > .video-frame {
  margin: 0 16px 16px;
}

/* お問い合わせ */
.inquiry-new {
  display: grid;
  gap: 14px;
  margin-bottom: 30px;
}
.inquiry-new h2 {
  margin: 0;
  font-size: 1.05rem;
}
.inquiry-new label,
.inquiry-reply label,
.inquiry-admin-form label {
  display: grid;
  gap: 6px;
}
.inquiry-files {
  font-size: 0.8125rem;
  color: var(--muted);
}
.inquiry {
  margin-bottom: 12px;
}
.inquiry summary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  cursor: pointer;
}
.inquiry-preview {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.8125rem;
}
.inquiry-status {
  font-size: 0.75rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.inquiry-status.status-open {
  color: var(--amber);
  border-color: #5a4a2c;
}
.inquiry-status.status-answered {
  color: var(--accent);
  border-color: #2f5866;
}
.inquiry-thread {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}
.inquiry-message {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.inquiry-message.from-staff {
  border-color: #2f5866;
  background: #12252e;
}
.inquiry-message p {
  margin: 6px 0 0;
}
.inquiry-meta {
  font-size: 0.75rem;
  color: var(--dim);
}
.inquiry-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.inquiry-images img {
  width: 140px;
  height: 90px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--line);
}
.inquiry-reply,
.inquiry-admin-form {
  display: grid;
  gap: 10px;
}
.inquiry-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-inquiry {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* 生年月日 */
.birthdate-form {
  display: grid;
  gap: 8px;
  max-width: 360px;
  margin: 14px 0 18px;
}
.birthdate-form label {
  display: grid;
  gap: 6px;
}
.birth-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 22px;
}
.birth-prompt > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.age-stats {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  margin-bottom: 18px;
}

/* 新規登録: 生年月日の注意書き（上の入力欄に近づけ、下のパスワード欄との間を空ける） */
.auth-card .birth-note {
  margin: -12px 0 22px;
}

/* ログイン画面:「パスワードまたは会員IDを忘れた方」（小さめ・上下の余白を詰める） */
.auth-card .forgot-link {
  display: block;
  margin: 10px 0 4px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}
.auth-card .forgot-link:hover {
  color: var(--accent);
}