@font-face {
  font-family: "Space Grotesk";
  src: url("assets/space-grotesk-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("assets/space-grotesk-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #111110;
  --surface: #1a1a17;
  --line: #35352d;
  --text: #f1ede2;
  --muted: #aaa89c;
  --yellow: #ffdb26;
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; }
a { color: inherit; }
a, button, select { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 5px;
}

.site-header { background: #080807; border-bottom: 1px solid #292920; }
.top, .shell { width: min(100% - 80px, 1160px); margin-inline: auto; }
.top { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.identity { display: flex; align-items: center; gap: 25px; min-width: 0; }
.brand-logo { display: flex; flex-shrink: 0; transition: transform .2s; }
.brand-logo:hover { transform: rotate(-3deg); }
.brand-logo img { display: block; width: 108px; height: 56px; }
.brand { border-left: 1px solid var(--line); padding-left: 25px; color: #d5d1c5; font-size: 13px; font-weight: 700; }
.language-control { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.language-icon { width: 17px; height: 17px; color: #c7be97; }
.lang {
  max-width: min(44vw, 220px);
  min-height: 38px;
  border: 1px solid #434237;
  border-radius: 8px;
  background: var(--surface);
  color: #e8dba9;
  font: inherit;
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.lang:hover { background: #26251e; border-color: #77715a; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
  padding-top: 64px;
}
.hero { min-width: 0; padding-top: 8px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--yellow); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.hero h1 { font-size: clamp(36px, 4.3vw, 60px); line-height: 1.16; letter-spacing: -.055em; margin: 21px 0 18px; text-wrap: balance; overflow-wrap: anywhere; }
:lang(ja) .hero h1 { text-wrap: wrap; word-break: keep-all; }
.lead { color: var(--muted); font-size: 15px; line-height: 1.85; max-width: 50ch; margin: 0; text-wrap: pretty; }
.app { display: flex; align-items: center; gap: 22px; margin-top: 36px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.app-details { min-width: 0; }
.icon { width: 104px; height: 104px; border-radius: 24px; object-fit: cover; background: #080807; border: 1px solid #47423a; box-shadow: 0 10px 25px #08080780; flex-shrink: 0; }
.app-name { font-size: 27px; font-weight: 700; letter-spacing: -.04em; overflow-wrap: anywhere; }
.app-meta { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 5px; font-variant-numeric: tabular-nums; }
.status { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11px; font-weight: 700; color: #ddc1a2; }
.status::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; flex-shrink: 0; }
.status.ready { color: #e9d576; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.primary, .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  border: 1px solid var(--yellow);
  border-radius: 999px;
  background: var(--yellow);
  color: #171713;
  padding: 14px 26px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.primary { width: 100%; }
.primary::before {
  content: "";
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-5-5 5 5 5-5M4 16v5h16v-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.primary:hover, .button:hover { background: #ffe667; box-shadow: 0 5px 22px #ffdb2612; }
.primary:active, .button:active { transform: translateY(1px); }
.primary.disabled { background: #34342c; border-color: #46463b; color: #a9a99b; cursor: not-allowed; box-shadow: none; }
.primary.disabled::before { display: none; }
.secondary, .text-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; color: #ddd6b9; font-size: 13px; line-height: 1.65; text-decoration: none; padding: 6px 0; transition: color .2s; }
.secondary { width: 100%; }
.secondary::after { content: "→"; font-size: 19px; }
.secondary:hover, .text-link:hover { color: var(--yellow); }
.message { margin-top: 23px; padding: 14px 16px; border: 1px solid #494032; background: #221e18; border-radius: 10px; color: #d7c7ad; font-size: 12px; line-height: 1.8; }
.message.ready { background: #1c1c17; border-color: #333329; color: #bbb8a7; }
.support { color: #8f8e83; font-size: 11px; line-height: 1.85; margin: 14px 0 0; }

.guide { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 30px; }
.guide-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.guide h2 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.04em; }
.guide-head > span { color: #b5aa79; font-size: 10px; white-space: nowrap; }
.steps { list-style: none; margin: 0; padding: 7px 0 0; }
.steps li { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 15px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; padding-bottom: 7px; }
.stepnum, .num { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #59523a; border-radius: 50%; color: var(--yellow); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.step-title { margin: 2px 0 7px; font-size: 15px; line-height: 1.5; font-weight: 700; }
.step-text { color: #aaa89c; font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
.step-text b { color: #e0d9bd; font-weight: 700; }
.minor { margin-top: 19px; padding-top: 17px; border-top: 1px dashed #424136; color: #939183; font-size: 11px; line-height: 1.85; }
.footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin-top: 64px; padding: 23px 0 30px; border-top: 1px solid var(--line); color: #8f8e83; font-size: 11px; line-height: 1.8; }
.footer a { color: #c9bf93; text-decoration: none; }
.footer a:hover { color: var(--yellow); }
.hide { display: none !important; }

.profile-shell { max-width: 780px; }
.profile-main { padding-top: 30px; }
.back { display: inline-block; color: #c9c4ae; font-size: 12px; line-height: 1.7; text-decoration: none; padding: 7px 0; }
.back:hover { color: var(--yellow); }
.profile-main .hero { margin-top: 35px; }
.profile-main .hero h1 { font-size: clamp(32px, 4vw, 49px); }
.profile-main .lead { max-width: 66ch; }
.callout { display: flex; align-items: flex-start; gap: 13px; margin: 28px 0 33px; padding: 17px 19px; border: 1px solid #494329; border-radius: 12px; background: #211f14; font-size: 13px; line-height: 1.85; color: #ded5ae; }
.symbol { display: grid; place-items: center; margin-top: 3px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #9e8e44; color: var(--yellow); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.profile-guide { padding: 29px 32px 21px; }
.section-title { font-size: 21px; letter-spacing: -.035em; margin: 0; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.profile-guide .steps li { padding: 21px 0; }
.note { margin-top: 24px; padding-left: 16px; border-left: 2px solid #746839; color: var(--muted); font-size: 12px; line-height: 1.85; }
.profile-main .actions { gap: 24px; }
.profile-main .button { min-height: 48px; font-size: 13px; padding: 11px 24px; }
.profile-shell .footer { margin-top: 45px; }

@media (max-width: 960px) {
  .top, .shell { width: calc(100% - 48px); }
  .layout { gap: 35px; padding-top: 45px; }
  .guide { padding: 25px; }
  .guide-head { align-items: flex-start; }
  .icon { width: 88px; height: 88px; border-radius: 21px; }
  .app { gap: 16px; }
}
@media (max-width: 760px) {
  .top { min-height: 76px; gap: 12px; }
  .top, .shell { width: calc(100% - 40px); }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 38px; padding-top: 33px; }
  .hero { padding-top: 0; }
  .hero h1 { font-size: 40px; margin-top: 16px; }
  .lead { font-size: 15px; }
  .brand { display: none; }
  .brand-logo img { width: 95px; height: 49px; }
  .app { margin-top: 27px; padding-bottom: 24px; }
  .actions { margin-top: 24px; gap: 12px; }
  .primary { min-height: 53px; }
  .message { margin-top: 17px; }
  .message, .callout { font-size: 13px; }
  .support { margin-top: 12px; font-size: 12px; }
  .step-text { font-size: 14px; }
  .guide { border-radius: 16px; padding: 24px; }
  .guide-head { align-items: center; }
  .guide h2 { font-size: 22px; }
  .steps li { padding: 20px 0; gap: 12px; }
  .footer { margin-top: 36px; padding-bottom: 28px; gap: 10px; }
  .profile-main { padding-top: 20px; }
  .profile-main .hero { margin-top: 26px; }
  .profile-main .hero h1 { font-size: 36px; }
  .profile-main .actions { align-items: stretch; gap: 13px; }
  .profile-main .button, .profile-main .text-link { width: 100%; }
}
@media (max-width: 360px) {
  .top, .shell { width: calc(100% - 32px); }
  .language-icon { display: none; }
  .hero h1 { font-size: 35px; }
  .app { gap: 13px; }
  .icon { width: 74px; height: 74px; border-radius: 18px; }
  .app-name { font-size: 25px; }
  .app-meta { font-size: 11px; }
  .primary { padding-inline: 18px; font-size: 14px; }
  .guide { padding: 21px 18px; }
  .profile-main .hero h1 { font-size: 31px; }
  .callout { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Comic panels use the same YWDJ yellow with warm paper and ink. */
:root {
  --bg: #f0ecdf;
  --surface: #fffdf5;
  --line: #242420;
  --text: #20201d;
  --muted: #67665e;
  color-scheme: light;
}
body {
  background-color: var(--bg);
  background-image: radial-gradient(#36342c20 .8px, transparent .8px);
  background-size: 7px 7px;
}
.site-header { border-bottom: 4px solid #20201d; }
.brand { border-color: #49483d; }
.lang { color-scheme: dark; background: #20201b; }
.layout { gap: 42px; padding-top: 43px; padding-bottom: 8px; }
.layout > .hero {
  position: relative;
  background: #fffdf5;
  border: 3px solid var(--line);
  border-radius: 4px;
  padding: 28px;
  box-shadow: 8px 8px 0 var(--line);
}
.comic-art {
  position: relative;
  margin: -28px -28px 0;
  height: 230px;
  border-bottom: 3px solid var(--line);
  background: #e7c2a0;
  isolation: isolate;
}
.comic-slides { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y pinch-zoom; user-select: none; }
.comic-slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 29%; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.comic-slide.is-active { opacity: 1; }
.comic-slide-cultivator { object-position: 50% 30%; }
.comic-slide-doctor { object-position: 50% 38%; }
.comic-slide-adventure { object-position: 50% 32%; }
.comic-slide-moon { object-position: 45% 43%; }
.comic-controls { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.comic-controls[hidden] { display: none; }
.comic-controls button { pointer-events: auto; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.comic-arrow { position: absolute; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; transform: translateY(-45%); border: 0; color: #fffdf5; background: transparent; }
.comic-arrow::before { content: ""; position: absolute; inset: 6px; z-index: -1; background: #191917ad; border: 1px solid #fffdf58a; border-radius: 3px; transform: skewY(-4deg); transition: background .2s; }
.comic-arrow:hover::before { background: #191917; }
.comic-arrow svg { display: block; width: 19px; height: 19px; }
.comic-prev { left: 4px; }
.comic-next { right: 4px; }
.comic-toggle { position: absolute; right: 9px; top: 7px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: #fffdf5; }
.comic-toggle::before { content: ""; position: absolute; inset: 7px; z-index: -1; border: 1px solid #fffdf58a; background: #191917ad; border-radius: 3px; }
.comic-toggle:hover::before { background: #191917; }
.comic-toggle [data-play-icon] { font-family: Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; }
.comic-bottom { position: absolute; bottom: 2px; left: 13px; right: 45px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comic-count { color: #fffdf5; background: #191917ad; border: 1px solid #fffdf573; border-radius: 2px; padding: 4px 7px; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .07em; white-space: nowrap; }
.comic-dots { display: flex; align-items: center; justify-content: center; gap: 0; }
.comic-dot { display: grid; place-items: center; width: 27px; height: 32px; border: 0; padding: 0; background: transparent; }
.comic-dot::before { content: ""; display: block; width: 7px; height: 7px; border: 1px solid #151512; background: #fffdf5; box-shadow: 1px 1px 0 #151512; transform: rotate(-5deg); transition: width .2s, background .2s; }
.comic-dot[aria-current="true"]::before { width: 18px; background: var(--yellow); }
.comic-controls button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 0; }
.comic-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, #20201d35, transparent 55%);
}
.comic-art .eyebrow {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 12px;
  border: 2px solid #20201d;
  background: var(--yellow);
  color: #20201d;
  letter-spacing: .05em;
  box-shadow: 3px 3px 0 #20201d;
  transform: rotate(-3deg);
  z-index: 1;
}
.comic-art .eyebrow::before { display: none; }
.comic-star {
  position: absolute;
  right: 13px;
  bottom: -25px;
  width: 67px;
  height: 67px;
  color: var(--yellow);
  filter: drop-shadow(2px 2px 0 #20201d) drop-shadow(-1px -1px 0 #20201d);
  transform: rotate(13deg);
  z-index: 1;
}
.app { margin-top: 23px; padding-bottom: 0; border: 0; gap: 20px; }
.icon { width: 90px; height: 90px; border: 3px solid #20201d; border-radius: 17px; box-shadow: 4px 4px 0 #20201d; transform: rotate(-4deg); }
.hero .app-name { font-size: 31px; line-height: 1.15; margin: 0; letter-spacing: -.045em; text-wrap: wrap; }
.app-meta { color: #656458; }
.status, .status.ready { color: #635922; }
.status.ready::before { background: #968329; }
.layout .lead { margin-top: 24px; font-size: 13px; line-height: 1.75; }
.actions { margin-top: 22px; gap: 17px; }
.primary, .button {
  min-height: 56px;
  border: 3px solid #20201d;
  border-radius: 4px;
  background: var(--yellow);
  box-shadow: 5px 5px 0 #20201d;
  font-size: 16px;
  transform: rotate(-1deg);
}
.primary:hover, .button:hover { background: #ffe865; transform: rotate(0) translate(-1px, -1px); box-shadow: 6px 6px 0 #20201d; }
.primary:active, .button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #20201d; }
.primary.disabled { background: #d8d4c7; border-color: #9d9b91; color: #706e65; box-shadow: none; transform: none; }
.secondary, .text-link { color: #36352b; font-weight: 700; }
.secondary { padding-top: 7px; }
.secondary:hover, .text-link:hover { color: #74600b; }
.message { border: 2px solid #857351; border-radius: 4px; background: #fff1d9; color: #5c482d; }
.guide {
  position: relative;
  border: 3px solid var(--line);
  border-radius: 4px;
  padding: 26px;
  box-shadow: 7px 7px 0 var(--line);
  background: var(--surface);
}
.guide-head {
  margin: -26px -26px 0;
  padding: 22px 26px;
  border-bottom: 3px solid var(--line);
  background: var(--yellow);
  background-image: radial-gradient(#20201d20 .75px, transparent .75px);
  background-size: 5px 5px;
}
.guide h2 { font-size: 25px; }
.guide-head > span { color: #5a501b; }
.steps { padding-top: 3px; }
.steps li { grid-template-columns: 35px minmax(0, 1fr); gap: 15px; padding: 23px 0; border-color: #c8c4b6; }
.stepnum, .num { width: 31px; height: 31px; border: 2px solid #20201d; border-radius: 3px; background: var(--yellow); color: #20201d; box-shadow: 2px 2px 0 #20201d; font-size: 12px; transform: rotate(-4deg); }
.steps li:nth-child(even) .stepnum, .steps li:nth-child(even) .num { transform: rotate(4deg); }
.step-title { font-size: 16px; }
.step-text { color: #646259; }
.step-text b { color: #26251e; }
.minor { color: #706c60; border-color: #b7b0a0; }
.footer { border-top: 2px solid var(--line); color: #726e63; }
.footer a { color: #514a29; }
.footer a:hover { color: #171712; }
.profile-main .hero { padding: 0; }
.profile-main .eyebrow { color: #6c5b12; }
.profile-main .hero h1 { text-shadow: 3px 3px 0 #ffdb2680; }
.back { color: #514a29; font-weight: 700; }
.back:hover { color: #171712; }
.callout { background: #fff5bc; color: #4d4522; border: 2px solid #20201d; border-radius: 4px; box-shadow: 4px 4px 0 #20201d; }
.symbol { border-color: #655511; color: #5c4e11; }
.profile-guide { padding: 27px; }
.section-title { background: var(--yellow); margin: -27px -27px 0; padding: 20px 27px; border-bottom: 3px solid var(--line); }
.note { border-left: 3px solid #ae9023; color: #676153; }
a:focus-visible, button:focus-visible, select:focus-visible { outline-color: #c77720; }
.site-header a:focus-visible, .site-header select:focus-visible { outline-color: var(--yellow); }
@media (max-width: 960px) {
  .layout { gap: 32px; }
  .layout > .hero { padding: 24px; }
  .comic-art { margin: -24px -24px 0; height: 210px; }
  .guide { padding: 23px; }
  .guide-head { margin: -23px -23px 0; padding: 21px 23px; }
  .section-title { margin: -23px -23px 0; padding: 20px 23px; }
}
@media (max-width: 760px) {
  .top, .shell { width: calc(100% - 36px); }
  .layout { padding-top: 26px; gap: 32px; }
  .layout > .hero { padding: 20px; box-shadow: 5px 5px 0 var(--line); }
  .comic-art { margin: -20px -20px 0; height: 165px; }
  .comic-art .eyebrow { top: 12px; left: 12px; font-size: 10px; padding: 5px 9px; }
  .comic-star { width: 51px; height: 51px; bottom: -21px; right: 10px; }
  .app { gap: 15px; margin-top: 21px; }
  .icon { width: 76px; height: 76px; border-radius: 15px; }
  .hero .app-name { font-size: 27px; }
  .app-meta { font-size: 11px; }
  .status { font-size: 10px; margin-top: 6px; }
  .layout .lead { margin-top: 21px; font-size: 13px; }
  .primary { font-size: 15px; padding: 12px 16px; min-height: 54px; }
  .actions { margin-top: 17px; gap: 14px; }
  .secondary { padding-bottom: 0; }
  .guide { padding: 22px; box-shadow: 5px 5px 0 var(--line); }
  .guide-head { margin: -22px -22px 0; padding: 18px 22px; }
  .guide h2 { font-size: 23px; }
  .steps li { gap: 13px; padding: 21px 0; }
  .step-text { font-size: 14px; }
  .section-title { margin: -22px -22px 0; padding: 18px 22px; }
  .footer { margin-top: 34px; }
}
@media (max-width: 360px) {
  .top, .shell { width: calc(100% - 30px); }
  .layout > .hero { padding: 17px; }
  .comic-art { margin: -17px -17px 0; height: 145px; }
  .app { gap: 13px; }
  .icon { width: 64px; height: 64px; border-radius: 13px; }
  .hero .app-name { font-size: 25px; }
  .primary { font-size: 13px; gap: 8px; padding-inline: 10px; }
  .guide { padding: 19px; }
  .guide-head { margin: -19px -19px 0; padding: 18px 19px; }
  .section-title { margin: -19px -19px 0; padding: 18px 19px; }
}