:root {
  font-family: 'Inter Variable', Inter, sans-serif;
  color: #090c11;
  background: #f2f6f9;
  --bg: #f2f6f9;
  --ink: #090c11;
  --sub: #71767a;
  --border: #dce5eb;
  --dot: #55adf9;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --disclosure-motion: 250ms var(--ease-out);
  --color-motion: 150ms cubic-bezier(.4, 0, .2, 1);
  --panel-motion: 250ms linear(0 0%, .44 18%, .77 32%, .97 40%, 1.01 50%, 1.005 65%, 1 80%, 1 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
body.dialog-open { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--dot); outline-offset: 3px; }
/* nani.now light-theme --color-selection-bg. */
::selection { background-color: #26beff4d; }
[hidden] { display: none !important; }

.content-column { width: min(calc(100% - 44px), 656px); margin: 0 auto; text-align: left; }
.hero { padding-top: 64px; padding-bottom: 72px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 600; line-height: 1; }
.brand-lockup, .header-logo { -webkit-user-select: none; user-select: none; }
.hero .brand-lockup { font-size: 32px; letter-spacing: -.5px; }
.brand-lockup img { display: block; width: 58px; height: 58px; object-fit: contain; }
.hero h1 { max-width: 650px; margin: 34px 0 34px; font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -.5px; text-wrap: pretty; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.feature { padding-bottom: 64px; }
.feature h2, .feature p { max-width: 650px; margin: 0; font-size: 24px; line-height: 32px; font-weight: 500; text-wrap: pretty; }
.feature h2 { color: var(--ink); }
.feature p { margin-top: 12px; color: var(--sub); }
.writing-intro { padding-bottom: 0; }
/* Nani-derived frame/grid; captions follow this LP's Inter hierarchy:
   introduction 24/500, feature heading 20/500, explanation 18/400.
   User requested trying this typography on 2026-10-13. */
.writing-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 29.225px; row-gap: 37.575px; width: min(calc(100% - 56px), 751.5px); margin: 50.1px auto 96px; }
.writing-card { min-width: 0; }
.feature-illustration { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 64px; corner-shape: superellipse(2); box-shadow: 0 2px 5px -2px rgba(0, 20, 40, .08); }
.feature-illustration iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.feature-copy { padding: 0 4.175px; }
.feature-copy h3 { margin: 20px 0 0; font-size: 20px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.feature-copy p { margin: 8px 0 0; font-size: 18px; line-height: 1.6; font-weight: 400; color: var(--sub); }
/* Nani's actual more-features summary pill, measured 2026-10-14.
   Its typography uses this LP's Inter; the chevron SVG is copied from the summary. */
.feature-disclosure { grid-column: 1 / -1; margin-top: 8.35px; }
.feature-more-trigger { display: flex; justify-content: center; }
.feature-more-button { display: inline-flex; align-items: center; justify-content: center; appearance: none; border: 0; border-radius: 999px; background: rgba(41, 108, 147, .06); color: #4b5256; padding: 12.525px 20.875px; font-size: 15.865px; font-weight: 600; line-height: 1.4; user-select: none; transition: color var(--color-motion); }
.feature-more-chevron { width: 14.6125px; flex-shrink: 0; margin-left: 6.2625px; margin-right: -4.175px; color: #99a2a7; transform: rotate(180deg); transition: transform 200ms var(--ease-out); }
.feature-more-button[aria-expanded="true"] .feature-more-chevron { transform: rotate(0deg); }
@media (hover: hover) and (pointer: fine) { .feature-more-button:hover { color: var(--ink); } }
.feature-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 29.225px; row-gap: 37.575px; padding-top: 33.4px; }
.feature-disclosure.is-enhanced .feature-more-panel { height: 0; opacity: 0; overflow: hidden; transition: height var(--disclosure-motion), opacity var(--disclosure-motion); }
.feature-disclosure.is-enhanced .feature-more-panel.is-open { opacity: 1; }
@media (max-width: 760px) {
  .writing-cards { grid-template-columns: 1fr; width: min(calc(100% - 44px), 560px); margin-bottom: 64px; }
  .feature-more-grid { grid-template-columns: 1fr; }
  .feature-more-button { max-width: 100%; }
}
footer { display: flex; justify-content: center; padding: 0 22px 72px; }
footer .brand-lockup img { width: 44px; height: 44px; }

/* The header follows the live shiori.sh header structure: fixed, 90px fade,
   32px visible orb, 16px horizontal padding, and no header at the top. */
/* Shiori: opacity 0/1, y -4/0, scale .99/1, duration .2s on entry and exit. */
.floating-header { position: fixed; inset: 0 0 auto; z-index: 50; opacity: 0; transform: translateY(-4px) scale(.99); visibility: hidden; pointer-events: none; transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 0s linear 200ms; }
.floating-header.is-visible { opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; transition-delay: 0s; }
.header-gradient { position: absolute; inset: 0 0 auto; height: 90px; pointer-events: none; background: linear-gradient(to bottom, var(--bg), transparent); }
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; }
.header-logo { display: block; width: 44px; height: 32px; overflow: visible; }
.header-logo img { display: block; width: 44px; height: 44px; transform: translateY(-6px); }

/* nani.now/ja bottom CTA: bg-primary-dark, hover:bg-primary-darker,
   px-5.5 py-3.5, text-mdlg, font-bold, ring-5 ring-primary/20.
   Computed from the user's selected “無料ではじめる” button. */
.nani-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 7px; appearance: none; user-select: none; text-box-trim: trim-both; text-box-edge: cap alphabetic; padding: 14.6125px 22.9625px; border: 0; border-radius: 999px; background: #099bff; color: #fff; font-size: 17.368px; line-height: 1.2; font-weight: 600; box-shadow: 0 0 0 5px oklab(.721539 -.0767358 -.140186 / .2); transition: all 250ms cubic-bezier(.4, 0, .2, 1); }
.nani-button:hover { background: #008cf0; }
.nani-button:disabled { cursor: default; opacity: .7; box-shadow: none; }
.nani-button:disabled:hover { background: #099bff; }
.nani-button svg { width: 20px; height: 22px; flex: none; }
.github-action[aria-disabled="true"] { cursor: default; }
.header-action { min-height: 32px; padding: 6px 12px; font-size: 13px; line-height: 18px; box-shadow: none; }
.header-action svg { width: 15px; height: 17px; }

/* These panel and close-control values are copied from desktop style.css. */
.overlay { position: fixed; z-index: 20; inset: 0; display: flex; align-items: center; justify-content: center; padding: 62px 32px 36px; background: oklab(.561212 -.006363 -.008314 / .3); backdrop-filter: blur(12px); animation: veil-in 250ms cubic-bezier(.4, 0, .2, 1) both; }
.overlay-panel { width: min(100%, 670px); max-height: 100%; overflow: auto; background: #fff; border: 4px solid #fff; border-radius: 32px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); transform-origin: bottom; animation: panel-in var(--panel-motion) both; }
.overlay--closing { animation: veil-out 250ms cubic-bezier(.4, 0, .2, 1) both; }
.overlay--closing .overlay-panel { animation: panel-out var(--panel-motion) both; }
.overlay-close { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #fff; background: oklab(.628943 -.010888 -.0126 / .5); border: 0; border-radius: 50%; transition: background-color var(--color-motion); animation: close-in 300ms cubic-bezier(.23, 1, .32, 1) both; }
.overlay-close svg { width: 52%; height: 52%; }
.overlay-close:hover { background: oklab(.628943 -.010888 -.0126); }
.download-panel { padding: 31px 32px 33px; }
.overlay { z-index: 60; }
.download-panel h2, .download-panel p { color: var(--ink); font-size: 19px; font-weight: 600; line-height: 1.45; }
.download-panel h2 { margin: 0 0 8px; }
.download-panel p { margin: 0 0 24px; }
.download-panel form { display: flex; flex-direction: column; align-items: flex-start; }
/* Keep input text at 16px to avoid iOS focus zoom. */
.download-panel input { display: block; width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 14px; background: #f9fbfd; font-size: 16px; }
.widget-action { margin-top: 19px; box-shadow: none; }
.widget-action:disabled { opacity: 1; box-shadow: none; }
/* Nani Google login: Spinner with strokeWidth 3.2, w-4, light colors. */
.widget-action .sending-spinner { width: 16.7px; height: 16.7px; aspect-ratio: 1; flex-shrink: 0; animation: sending-spin .5s linear infinite, sending-fade-in .5s; }
.sending-spinner circle:first-child { stroke: color-mix(in oklab, #fff 20%, transparent); }
.sending-spinner circle:last-child { stroke: color-mix(in oklab, #fff 70%, transparent); }
@keyframes sending-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sending-fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes veil-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(40px) scale(.8); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes panel-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(40px) scale(.8); } }
@keyframes close-in { from { opacity: 0; } to { opacity: 1; } }

/* shiori.sh uses xl (80rem) for its larger hero typography. */
@media (min-width: 80rem) {
  .hero h1 { font-size: 36px; line-height: 40px; letter-spacing: -.7px; }
}

@media (max-width: 700px) {
  .hero { padding-top: 48px; padding-bottom: 64px; }
  .feature { padding-bottom: 56px; }
  .writing-intro { padding-bottom: 0; }
  .overlay { padding: 62px 18px 18px; }
  .overlay-close { right: 12px; top: 12px; width: 32px; height: 32px; }
  .download-panel { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Shortening an infinite loop alone makes it spin extremely fast. */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  /* Preserve a gentle fade while removing header movement and scaling. */
  .floating-header { transform: none; transition: opacity 200ms ease-in-out, visibility 0s linear 200ms !important; }
  .floating-header.is-visible { transition-delay: 0s !important; }
  .feature-disclosure.is-enhanced .feature-more-panel { transition: height 0s, opacity 150ms var(--ease-out) !important; }
  .feature-more-chevron { transition: none !important; }
}