/* ============================================
   Design Tokens
   ============================================ */
:root, [data-theme="light"] {
  --color-bg:             #f7f6f2;
  --color-surface:        #f9f8f5;
  --color-surface-2:      #fbfbf9;
  --color-surface-offset: #f0ede8;
  --color-divider:        #dcd9d5;
  --color-border:         #d4d1ca;
  --color-text:           #28251d;
  --color-text-muted:     #6b6a65;
  --color-text-faint:     #b8b7b2;
  --color-primary:        #01696f;
  --color-primary-hover:  #0c4e54;
  --color-primary-subtle: #e0eeee;
  --color-code-bg:        #edeae4;
  --shadow-sm: 0 1px 3px oklch(0.2 0.01 80 / 0.07);
  --shadow-md: 0 4px 16px oklch(0.2 0.01 80 / 0.09);
  --shadow-lg: 0 12px 40px oklch(0.2 0.01 80 / 0.13);
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-hero:clamp(2.5rem,0.5rem + 6vw,5.5rem);
  --font-display: 'Noto Serif JP', Georgia, serif;
  --font-body: 'Noto Sans JP', 'Helvetica Neue', sans-serif;
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --content: 1100px;
}

[data-theme="dark"] {
  --color-bg:             #131210;
  --color-surface:        #1a1917;
  --color-surface-2:      #1f1e1c;
  --color-surface-offset: #252422;
  --color-divider:        #2e2d2b;
  --color-border:         #333230;
  --color-text:           #cecdcb;
  --color-text-muted:     #7a7977;
  --color-text-faint:     #4a4948;
  --color-primary:        #4f98a3;
  --color-primary-hover:  #227f8b;
  --color-primary-subtle: #1e3535;
  --color-code-bg:        #2a2926;
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.25);
  --shadow-md: 0 4px 16px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#131210;--color-surface:#1a1917;--color-surface-2:#1f1e1c;
    --color-surface-offset:#252422;--color-divider:#2e2d2b;--color-border:#333230;
    --color-text:#cecdcb;--color-text-muted:#7a7977;--color-text-faint:#4a4948;
    --color-primary:#4f98a3;--color-primary-hover:#227f8b;--color-primary-subtle:#1e3535;
    --color-code-bg:#2a2926;
    --shadow-sm:0 1px 3px oklch(0 0 0 / 0.25);
    --shadow-md:0 4px 16px oklch(0 0 0 / 0.35);
    --shadow-lg:0 12px 40px oklch(0 0 0 / 0.45);
  }
}

/* ============================================
   Base Reset
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:5rem;}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.7;}
img,picture,svg{display:block;max-width:100%;height:auto;}
ul[role="list"],ol[role="list"]{list-style:none;}
input,button,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.2;font-family:var(--font-display);}
p,li{text-wrap:pretty;max-width:72ch;}
code{font-family:ui-monospace,monospace;font-size:0.875em;background:var(--color-code-bg);padding:0.1em 0.4em;border-radius:var(--radius-sm);}
a,button,[role="button"],input,select{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition),opacity var(--transition);}
button{cursor:pointer;background:none;border:none;}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;}}
.skip-link{position:absolute;transform:translateY(-100%);padding:var(--space-2) var(--space-4);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);z-index:100;font-size:var(--text-sm);}
.skip-link:focus{transform:translateY(0);}

/* ============================================
   Layout
   ============================================ */
.container{max-width:var(--content);margin-inline:auto;padding-inline:clamp(var(--space-4),4vw,var(--space-12));}
.section{padding-block:clamp(var(--space-16),8vw,var(--space-24));}
.section-alt{background:var(--color-surface);}

/* ============================================
   Header
   ============================================ */
.site-header{position:sticky;top:0;z-index:50;background:oklch(from var(--color-bg) l c h / 0.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--color-divider);transition:box-shadow var(--transition);}
.site-header.scrolled{box-shadow:var(--shadow-sm);}
.header-inner{display:flex;align-items:center;gap:var(--space-6);height:3.5rem;}
.site-logo{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--color-text);}
.logo-text{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;letter-spacing:-0.01em;}
.site-nav{display:flex;align-items:center;gap:var(--space-1);margin-left:auto;}
.nav-link{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);text-decoration:none;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);}
.nav-link:hover{color:var(--color-text);background:var(--color-surface-offset);}
.nav-link.active{color:var(--color-primary);background:var(--color-primary-subtle);}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);color:var(--color-text-muted);margin-left:var(--space-2);}
.theme-toggle:hover{background:var(--color-surface-offset);color:var(--color-text);}
.nav-toggle{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);color:var(--color-text-muted);}
.mobile-nav{background:var(--color-surface);border-bottom:1px solid var(--color-divider);padding:var(--space-3) 0;}
.mobile-nav nav{display:flex;flex-direction:column;}
.mobile-nav-link{font-size:var(--text-base);font-weight:500;color:var(--color-text-muted);text-decoration:none;padding:var(--space-3) clamp(var(--space-4),4vw,var(--space-12));}
.mobile-nav-link:hover{color:var(--color-primary);}
@media(max-width:680px){.site-nav{display:none;}.nav-toggle{display:flex;}}

/* ============================================
   Hero
   ============================================ */
.hero{position:relative;min-height:clamp(540px,90vh,820px);display:flex;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.35;}
.orb-1{width:min(600px,80vw);height:min(600px,80vw);background:radial-gradient(circle,oklch(from var(--color-primary) l c h / 0.25) 0%,transparent 70%);top:-20%;right:-10%;}
.orb-2{width:min(400px,60vw);height:min(400px,60vw);background:radial-gradient(circle,oklch(0.65 0.08 200 / 0.15) 0%,transparent 70%);bottom:0%;left:-5%;}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--color-divider) 1px,transparent 1px),linear-gradient(90deg,var(--color-divider) 1px,transparent 1px);background-size:48px 48px;opacity:0.4;}
.hero-content{position:relative;z-index:1;padding-block:clamp(var(--space-16),10vw,var(--space-24));}
.hero-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:500;color:var(--color-primary);background:var(--color-primary-subtle);border:1px solid oklch(from var(--color-primary) l c h / 0.2);padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);margin-bottom:var(--space-6);}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h / 0.2);}
.hero-heading{font-size:var(--text-hero);font-weight:700;letter-spacing:-0.03em;line-height:1.1;margin-bottom:var(--space-6);max-width:14ch;}
.hero-heading em{font-style:normal;color:var(--color-primary);}
.hero-lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:52ch;margin-bottom:var(--space-8);line-height:1.65;}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-8);}
.stack-pills{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.pill{font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);}
.hero-scroll-hint{position:absolute;bottom:var(--space-8);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--color-text-faint);letter-spacing:0.1em;animation:bounce 2s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(5px);}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;padding:var(--space-3) var(--space-6);border-radius:var(--radius-lg);text-decoration:none;cursor:pointer;border:2px solid transparent;}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);}
.btn-ghost{background:transparent;color:var(--color-text);border-color:var(--color-border);}
.btn-ghost:hover{background:var(--color-surface);border-color:var(--color-text-muted);}

/* ============================================
   Section Header
   ============================================ */
.section-header{margin-bottom:var(--space-12);max-width:48ch;}
.section-eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-3);}
.section-title{font-size:var(--text-2xl);font-weight:700;letter-spacing:-0.02em;color:var(--color-text);}

/* ============================================
   Features Grid
   ============================================ */
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-4);}
.feature-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);transition:box-shadow var(--transition),transform var(--transition);}
.feature-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.feature-large{grid-column:1/-1;}
@media(min-width:640px){.feature-large{grid-column:span 2;}}
.feature-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-primary-subtle);color:var(--color-primary);border-radius:var(--radius-lg);margin-bottom:var(--space-5);}
.feature-title{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-3);}
.feature-desc{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--space-4);}
.feature-link{font-size:var(--text-sm);font-weight:600;color:var(--color-primary);text-decoration:none;}
.feature-link:hover{text-decoration:underline;}

/* ============================================
   Architecture
   ============================================ */
.arch-container{display:grid;grid-template-columns:1fr;gap:var(--space-12);align-items:center;}
@media(min-width:768px){.arch-container{grid-template-columns:1fr 1fr;}}
.arch-body{font-size:var(--text-base);color:var(--color-text-muted);margin:var(--space-4) 0 var(--space-8);max-width:55ch;line-height:1.7;}
.arch-steps{list-style:none;display:flex;flex-direction:column;gap:var(--space-5);}
.arch-steps li{display:flex;align-items:flex-start;gap:var(--space-4);}
.step-num{font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;color:var(--color-primary);background:var(--color-primary-subtle);border:1px solid oklch(from var(--color-primary) l c h / 0.2);min-width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);flex-shrink:0;letter-spacing:0.05em;}
.step-detail{font-size:var(--text-sm);color:var(--color-text-muted);}
.arch-steps li strong{font-size:var(--text-base);display:block;margin-bottom:var(--space-1);}

/* Diagram */
.diag-wrap{display:flex;flex-direction:column;align-items:center;gap:0;}
.diag-node{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5) var(--space-8);font-size:var(--text-sm);font-weight:600;color:var(--color-text);box-shadow:var(--shadow-sm);width:min(260px,100%);text-align:center;}
.user-node{border-color:var(--color-border);}
.cf-node{background:oklch(from var(--color-primary) l c h / 0.06);border-color:oklch(from var(--color-primary) l c h / 0.3);}
.s3-node{background:var(--color-surface);position:relative;}
.diag-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1);margin-top:var(--space-1);}
.diag-chips span{font-size:var(--text-xs);font-weight:500;padding:2px var(--space-2);background:oklch(from var(--color-primary) l c h / 0.12);color:var(--color-primary);border-radius:var(--radius-full);}
.diag-badge{font-size:var(--text-xs);font-weight:600;padding:2px var(--space-3);background:oklch(0.65 0.12 145 / 0.15);color:oklch(0.45 0.12 145);border-radius:var(--radius-full);margin-top:var(--space-1);}
.diag-arrow-wrap{padding:var(--space-2) 0;}
.diag-arrow{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:1.2rem;color:var(--color-primary);line-height:1;}
.diag-arrow span{font-size:var(--text-xs);font-weight:600;color:var(--color-text-faint);letter-spacing:0.05em;}

/* ============================================
   Page List
   ============================================ */
.page-list{display:flex;flex-direction:column;gap:var(--space-1);}
.page-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6) var(--space-8);}
.page-item p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2);max-width:60ch;}
.page-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);}
.page-path{font-size:var(--text-sm);}
.current-badge{font-size:var(--text-xs);font-weight:600;padding:2px var(--space-3);background:var(--color-primary-subtle);color:var(--color-primary);border-radius:var(--radius-full);}
.page-goto{font-size:var(--text-sm);font-weight:600;color:var(--color-primary);text-decoration:none;margin-left:auto;}
.page-goto:hover{text-decoration:underline;}

/* ============================================
   Breadcrumb
   ============================================ */
.breadcrumb{font-size:var(--text-xs);color:var(--color-text-faint);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.breadcrumb a{color:var(--color-text-muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--color-primary);}
.breadcrumb span[aria-hidden]{color:var(--color-text-faint);}

/* ============================================
   Sub Page Hero
   ============================================ */
.sub-hero{background:var(--color-surface);border-bottom:1px solid var(--color-divider);padding-block:clamp(var(--space-12),6vw,var(--space-20));}
.sub-hero-inner{display:flex;flex-direction:column;gap:var(--space-4);}
.sub-heading{font-size:var(--text-2xl);font-weight:700;letter-spacing:-0.02em;}
.sub-lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:58ch;line-height:1.65;}

/* ============================================
   Content Card (sub pages)
   ============================================ */
.content-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);}
@media(min-width:768px){.content-grid{grid-template-columns:2fr 1fr;}}
.content-main{}
.content-aside{}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);}
.card+.card{margin-top:var(--space-6);}
.card-title{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-4);}
.card-body{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.75;}
.card-body p+p{margin-top:var(--space-4);}
.info-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);}
.info-item{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-sm);}
.info-icon{color:var(--color-primary);margin-top:1px;flex-shrink:0;}
.aside-card{background:var(--color-primary-subtle);border:1px solid oklch(from var(--color-primary) l c h / 0.2);border-radius:var(--radius-xl);padding:var(--space-6);}
.aside-title{font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-4);}
.aside-links{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);}
.aside-links a{font-size:var(--text-sm);color:var(--color-primary);text-decoration:none;font-weight:500;}
.aside-links a:hover{text-decoration:underline;}
.tag-list{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);}
.tag{font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);background:var(--color-surface-offset);border:1px solid var(--color-border);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);}
.nav-buttons{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--color-divider);}

/* ============================================
   Footer
   ============================================ */
.site-footer{background:var(--color-surface);border-top:1px solid var(--color-divider);padding-block:var(--space-8);}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);}
.footer-brand{display:flex;align-items:center;gap:var(--space-2);font-weight:700;font-size:var(--text-sm);color:var(--color-text);}
.footer-nav{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-left:auto;}
.footer-nav a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;}
.footer-nav a:hover{color:var(--color-primary);}
.footer-copy{font-size:var(--text-xs);color:var(--color-text-faint);width:100%;}

/* ============================================
   Scroll Animation
   ============================================ */
.fade-in{opacity:1;}
@supports(animation-timeline:scroll()){
  .fade-in{opacity:0;animation:fade-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 70%;}
  @keyframes fade-reveal{to{opacity:1;}}
}