/* ===== Highlights as cards (Quick Win) ===== */
.highlights{list-style:none; padding-left:0; margin: 12px 0; display:grid; gap:10px}
.highlights li{background: var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 12px; line-height:1.7; display:flex; align-items:flex-start; gap:8px}
.highlights li:hover{transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.10)}
.highlights li::before{content:""; flex:0 0 8px; height:8px; width:8px; margin-top:8px; border-radius:50%; background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #6ee7b7))}
/* Grid variant for multi-column lists */
.highlights.grid{grid-template-columns: repeat(3, 1fr)}
.highlights.grid li{min-height: 100%;}
/*
 * Copyright (c) 2025 DAIZO SASAKI
 * This code is provided for personal portfolio display. Redistribution or commercial use without permission is prohibited.
 */
/* ===== Base ===== */
:root{
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: #475569;
  --accent: #2563eb;
  --card: #f8fafc;
  --border: #e2e8f0;
}

html[data-theme="dark"]{
  --bg: #0b1020;
  --fg: #e5e7eb;
  --muted: #94a3b8;
  --accent: #60a5fa;
  --card: #0f172a;
  --border: #1f2937;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Noto Sans JP", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
}

img{max-width:100%; display:block}
a{color: var(--accent); text-decoration: none}
.nav a.active{color: var(--accent); border-bottom:2px solid var(--accent)}
.nav a{transition: color .2s ease}
.nav a:hover{filter: brightness(1.1)}
.container{max-width: 1160px; margin: 0 auto; padding: 0 24px}
.section{padding: 88px 0}
.section p{max-width: 72ch; margin-left:auto; margin-right:auto}
h1{font-size: clamp(28px, 5vw, 48px); line-height:1.2; letter-spacing: .01em; font-weight: 800; margin: 0 0 16px}
h2{font-size: clamp(24px, 3.2vw, 34px); line-height:1.28; letter-spacing: .005em; margin: 0 0 18px; font-weight: 800}
h3{font-size: clamp(18px, 2.2vw, 22px); line-height:1.35; margin: 18px 0 10px}
/* Anchor offset for sticky header */
main section[id], main[id]{scroll-margin-top: 80px}
html{scroll-behavior:smooth}

/* Section theming: about block with subtle surface */
#about.section{background: color-mix(in oklab, var(--bg) 94%, #000); border:1px solid var(--border); border-radius:16px; padding: 56px 20px}

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 20;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom: 1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-weight:800; color: var(--fg)}
.nav{display:flex; gap:16px}
.nav a{color: var(--fg); opacity:.8}
.nav a:hover{opacity:1}
.theme-toggle{border:1px solid var(--border); background:var(--card); color:var(--fg); padding:8px 10px; border-radius:8px; cursor:pointer}

/* ===== Hero ===== */
.hero{display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center; min-height: 64vh}
.hero h1{font-size: clamp(32px, 5vw, 48px); line-height:1.18; margin: 0 0 14px}
.hero h1{text-wrap: balance}
.hero p{color: var(--muted); margin: 0 0 22px; max-width: 60ch}
.accent{color: var(--accent)}
.cta{display:flex; gap:12px}
.btn{display:inline-block; border:1px solid var(--border); background:var(--card); color:var(--fg); padding:10px 16px; border-radius:10px}
.btn.primary{background: var(--accent); color: #fff; border-color: transparent}
.btn:hover{filter: brightness(1.05)}
.btn, .card{transition: transform .2s ease, box-shadow .2s ease, filter .2s ease}
.btn.primary{box-shadow: 0 6px 14px color-mix(in oklab, var(--accent) 30%, transparent)}
.btn.primary:hover{transform: translateY(-1px); box-shadow: 0 10px 20px color-mix(in oklab, var(--accent) 40%, transparent)}
.btn{min-height: 40px}
.hero-visual{justify-self:center; width:min(360px, 90%)}

/* ===== Cards, grids ===== */
.card{background: var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow: 0 4px 10px rgba(0,0,0,.06)}
.card:hover{transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12)}
.skills-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.projects-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
/* Tags */
.tags{display:flex; gap:6px; flex-wrap:wrap; margin: 0 0 12px}
.tag{border:1px solid var(--border); background: var(--card); padding:2px 8px; border-radius:999px; font-size:12px; color: var(--muted)}
.tag[data-tag~="ai"], .tag[data-tag="ai"]{ background: #e8f1ff !important; color:#0b5cd6 !important; border-color:#bcd4ff !important }
.tag[data-tag~="webapp"], .tag[data-tag="webapp"]{ background:#e9f8ef !important; color:#0a7d3b !important; border-color:#bfeccc !important }
.tag[data-tag~="frontend"], .tag[data-tag="frontend"]{ background:#fff2e5 !important; color:#b85c00 !important; border-color:#ffd7ab !important }
.tag[data-tag~="cloud"], .tag[data-tag="cloud"]{ background:#eef7ff !important; color:#0b63a6 !important; border-color:#c6e4ff !important }
.tag[data-tag~="api"], .tag[data-tag="api"]{ background:#f0eaff !important; color:#6237b0 !important; border-color:#dacbff !important }
.tag[data-tag~="blog"], .tag[data-tag="blog"]{ background:#fff0f0 !important; color:#b03a3a !important; border-color:#ffc9c9 !important }
.tag[data-tag~="music"], .tag[data-tag="music"]{ background:#f5f0ff !important; color:#6a3bb0 !important; border-color:#e1d4ff !important }
.tag[data-tag~="training"], .tag[data-tag="training"]{ background:#e9fbff !important; color:#0e6d7a !important; border-color:#c8f1f7 !important }
.tag[data-tag~="landing-page"], .tag[data-tag="landing-page"]{ background:#fff6e9 !important; color:#8a5a00 !important; border-color:#ffe4b8 !important }
/* Additional common tags */
.tag[data-tag~="html"], .tag[data-tag="html"]{ background:#fff0f0 !important; color:#b02a2a !important; border-color:#ffc9c9 !important }
.tag[data-tag~="css"], .tag[data-tag="css"]{ background:#eaf7ff !important; color:#0a66c2 !important; border-color:#cde8ff !important }
.tag[data-tag~="javascript"], .tag[data-tag="javascript"]{ background:#fffbe6 !important; color:#8a6d00 !important; border-color:#fff0b3 !important }
.tag[data-tag~="prompt-engineering"], .tag[data-tag="prompt-engineering"]{ background:#f0fff4 !important; color:#1f7a3a !important; border-color:#c7f0d4 !important }
.tag[data-tag~="experiment"], .tag[data-tag="experiment"]{ background:#f4f0ff !important; color:#5a34b3 !important; border-color:#e1d9ff !important }

/* ===== Contact ===== */
.contact ul{padding-left: 18px}
.contact li{margin: 6px 0}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border); padding: 24px 0; margin-top: 24px}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .hero{grid-template-columns: 1fr; gap: 24px}
  .skills-grid, .projects-grid{grid-template-columns: 1fr 1fr}
  .highlights.grid{grid-template-columns: 1fr 1fr}
}
@media (min-width: 1100px){
  .hero{grid-template-columns: 1.2fr .8fr}
  .hero h1{white-space: nowrap}
}
@media (max-width: 600px){
  .skills-grid, .projects-grid{grid-template-columns: 1fr}
  .highlights.grid{grid-template-columns: 1fr}
}
/* ===== Mobile optimization ===== */
@media (max-width: 600px){
  .container{padding: 0 16px}
  .section{padding: 56px 0}
  .header-inner{height:56px}
  .nav{gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap}
  .nav a{display:inline-block; padding:6px 8px}
  .hero h1{font-size: clamp(24px, 7vw, 34px)}
  .hero p{font-size: 14px}
  h2{font-size: clamp(18px, 5.5vw, 22px)}
  .hero-visual{width:min(300px, 90%)}
  .cta{flex-direction: column}
  .cta .btn{width:100%; text-align:center}
  .card{padding:12px}
  .projects-grid, .skills-grid{gap:12px}
  .tags{gap:4px}
  .tag{font-size:11px; padding:2px 6px}
}