:root{
    /* PDF用 統一カラー（暗めの青色） */
    --surf: #1a3a52;     /* 暗めの青 */
    --mid:  #0e2c4f;     /* ミッドトーン青 */
    --deep: #071a2b;     /* 深い青 */
    --acc:  #5ba3d0;     /* アクセントカラー（明るめ青） */
    --txt:  #e6f0ff;     /* テキスト（明るい） */
    --dim:  #9bb7d4;     /* サブテキスト */
  
    --maxw:1080px;
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,.25);
    
    color-scheme: dark;
  }
  
  *{box-sizing:border-box}
  html, body { height:100% }
  html{ scroll-behavior:smooth }
  body{
    margin:0; color:var(--txt);
    font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Noto Sans JP,sans-serif;
    /* PDF用 固定背景色（暗めの青で統一） */
    background: var(--mid);
    position:relative;
  }
  
  /* ヘッダー */
  .site-header{
    position:fixed; inset:0 0 auto 0; height:64px; z-index:10;
    display:flex; align-items:center; justify-content:space-between; padding:0 20px;
    backdrop-filter:saturate(140%) blur(10px);
    background:linear-gradient(to bottom, rgba(6,19,32,.65), rgba(6,19,32,0));
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .brand{font-weight:700; color:var(--txt); text-decoration:none; letter-spacing:.5px}
  
  /* ナビゲーション */
  .nav{display:flex; gap:0; align-items:center;}
  .nav a{
    color:var(--dim); text-decoration:none; margin-left:16px;
    position:relative; padding-bottom:4px;
    transition: color .3s ease;
  }
  .nav a::after{
    content:''; position:absolute; bottom:0; left:0; right:0;
    height:2px; background:var(--acc);
    transform:scaleX(0); transform-origin:center;
    transition: transform .3s ease;
  }
  .nav a:hover{color:var(--txt)}
  .nav a.active{
    color:var(--txt);
    font-weight:600;
  }
  .nav a.active::after{
    transform:scaleX(1);
  }
  
  /* ログアウトボタン */
  .logout-btn{
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2);
    color:var(--txt);
    padding:8px 16px;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:all .3s ease;
    margin-left:auto;
  }
  .logout-btn:hover{
    background:rgba(255,255,255,.15);
    border-color:rgba(255,255,255,.3);
  }
  
  main{ scroll-snap-type:y mandatory }
  .snap{ scroll-snap-align:start }
  
  /* Hero + 波 */
  .hero{ position:relative; min-height:100svh; display:grid; place-items:center; padding-top:64px; overflow:hidden; }
  /* 昼間の軽い大気散乱ハイライト */
  .hero::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(circle at 50% 18%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
      linear-gradient(to bottom, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%);
    mix-blend-mode:soft-light; opacity:.85;
  }
  .hero::after{ content:""; }
  .whale-wrap{ position:relative; z-index:1 }
  .water-surface{ position:absolute; inset:0; pointer-events:none }
  
  /* シームレス波（背景画像のrepeat-x） */
  .wave{
    position:absolute; left:0; right:0; bottom:0; height:160px;
    background-repeat: repeat-x;
    background-size: 1200px 160px;           /* viewBoxに揃える */
  }
  
  /* 二重レイヤー × 2系統（半周期シフトで切れ端を隠す） */
  /* waveA: 穏やか (低振幅) シームレス。基準y=100 周期短縮しすぎず緩やか */
  .waveA1{ opacity:.34; bottom:8px; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 160" preserveAspectRatio="none"><path fill="rgba(91,211,255,0.20)" d="M0 100C75 100 105 85 150 100C195 115 225 115 300 100C375 85 405 85 450 100C495 115 525 115 600 100C675 85 705 85 750 100C795 115 825 115 900 100C975 85 1005 85 1050 100C1095 115 1125 100 1200 100V160H0Z"/></svg>'); animation: waveL 36s linear infinite; }
  .waveA2{ opacity:.34; bottom:8px; background-image:inherit; animation: waveL 36s linear infinite; animation-delay:-18s; }
  /* waveB: 前景 さらに控えめ (振幅 + 位相シフト) */
  .waveB1{ opacity:.48; bottom:0;  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 160" preserveAspectRatio="none"><path fill="rgba(91,211,255,0.24)" d="M0 95C65 95 95 82 160 95C225 108 255 108 320 95C385 82 415 82 480 95C545 108 575 108 640 95C705 82 735 82 800 95C865 108 895 108 960 95C1025 82 1055 82 1120 95C1165 105 1185 95 1200 95V160H0Z"/></svg>'); animation: waveR 28s linear infinite; }
  .waveB2{ opacity:.48; bottom:0;  background-image:inherit; animation: waveR 28s linear infinite; animation-delay:-14s; }
  
  @keyframes waveL{ 0%{ background-position: 0 0 } 100%{ background-position: -1200px 0 } }
  @keyframes waveR{ 0%{ background-position: 0 0 } 100%{ background-position:  1200px 0 } }
  
  /* 広域フェード：波エリア全体に“下方へ長く”マスク */
  .wave-fade{
    position:absolute; inset:0; bottom:-20vh;    /* 下へ延長して広域化 */
    -webkit-mask-image:
      linear-gradient(to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,.9) 20%,
        rgba(0,0,0,.6) 55%,
        rgba(0,0,0,0) 100%);
    mask-image:
      linear-gradient(to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,.9) 20%,
        rgba(0,0,0,.6) 55%,
        rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,0));
    pointer-events:none;
  }
  /* さらに端の見切れを防ぐため、波自身にも薄いマスクを適用 */
  .wave{
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,.85) 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,.85) 70%, rgba(0,0,0,0) 100%);
  }
  
  .whale-logo {
  /* 以前: width: min(60vw, 300px);  Cloudflare Pages 展開後も確実に反映されるよう明示的に固定 */
  /* 拡大: 以前より大きく表示 (最小120px / 通常30vw / 最大320px) */
  width: clamp(120px, 30vw, 320px);
    height: auto;
    max-width: 100%;
    animation: float 3s ease-in-out infinite;
    transition: transform 0.3s ease;
  }
  
  .whale-logo:hover {
    transform: scale(1.05) rotate(2deg);
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }

  .whale-wrap{ display:grid; place-items:center; gap:-40px; text-align:center; z-index:1 }
  
  .title{ font-size: clamp(22px, 3.2vw, 34px); font-weight: 800; letter-spacing:.4px }
  .title .sub{ display:block; margin-top:6px; color:var(--dim); font-weight:500 }
  @keyframes float{ 0%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-6px) rotate(-1deg)} 100%{transform:translateY(0) rotate(0deg)} }
  .tail{ transform-origin: 110px 72px; animation: tailWave 2.6s ease-in-out infinite }
  @keyframes tailWave{ 0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(-5.5deg) } }
  
  .title{ font-size: clamp(22px, 3.2vw, 34px); font-weight: 800; letter-spacing:.4px }
  .title .sub{ display:block; margin-top:6px; color:var(--dim); font-weight:500 }
  
  .scroll-to-top{
    position:fixed; bottom:80px; left:50%;
    transform:translateX(-50%);
    width:56px; height:36px; border-radius:18px;
    background:rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    color:var(--txt); border:1px solid rgba(255,255,255,.25);
    cursor:pointer; font-size:18px; z-index:20;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    opacity:0; visibility:hidden;
    transition: opacity .3s ease, visibility .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  }
  .scroll-to-top.visible{
    opacity:1; visibility:visible;
  }
  .scroll-to-top:hover{
    background:rgba(255,255,255,.25);
    border-color:rgba(255,255,255,.4);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
    transform:translateX(-50%) translateY(-4px);
  }
  
  .section{
    min-height:100svh; display:grid; align-content:center; justify-items:center;
    padding:96px 20px 64px; background:transparent;
  }
  .section > *{ max-width:var(--maxw) }
  
  h2{ font-size: clamp(20px, 2.6vw, 28px); margin:0 0 12px }
  p{ margin: 0 0 18px; color:var(--txt) }
  
  .tags{ margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap; list-style:none }
  .tags li{ padding:8px 12px; border-radius:999px; color:#0a1624; background:linear-gradient(135deg, #e6f6ff, #c7e9ff) }
  
  .grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); width:100% }
  .card{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding:20px; box-shadow: var(--shadow);
    transition: transform .4s ease, box-shadow .4s ease;
  }
  .card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.35) }
  
  .cta{ display:flex; gap:14px }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700;
    color:#061320; background: linear-gradient(135deg, var(--mid), var(--acc));
    box-shadow: var(--shadow);
  }
  .btn.ghost{ color: var(--txt); background: transparent; border:1px solid rgba(255,255,255,.18) }
  
  /* Profile section */
  .profile-container{ 
    width:100%; max-width:var(--maxw); margin-bottom:32px;
  }
  .profile-info{
    display:grid; gap:28px; grid-template-columns:1fr;
  }
  .profile-basic, .profile-description{
    background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow);
  }
  .profile-basic h3, .profile-description h3{
    margin:0 0 16px; font-size:18px; color:var(--txt);
  }
  .profile-details{
    display:grid; gap:12px;
  }
  .profile-item{
    display:grid; grid-template-columns:100px 1fr; gap:12px; align-items:baseline;
    padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05);
  }
  .profile-item:last-child{
    border-bottom:none;
  }
  .profile-label{
    font-size:14px; color:var(--dim); font-weight:600;
  }
  .profile-value{
    font-size:14px; color:var(--txt);
  }
  .profile-description p{
    margin:0 0 14px; color:var(--txt); line-height:1.7;
  }
  .profile-description p:last-child{
    margin-bottom:0;
  }
  .skills-section{
    width:100%; max-width:var(--maxw);
  }
  .skills-section h3{
    margin:0 0 16px; font-size:18px; color:var(--txt);
  }
  
  @media (min-width: 768px){
    .profile-info{
      grid-template-columns:1fr 1.2fr; gap:32px;
    }
    .profile-item{
      grid-template-columns:120px 1fr;
    }
  }
  
  /* Experience section */
  .experience-container{ width:100%; max-width:var(--maxw); display:grid; gap:32px; }
  .experience-block{ 
    width:100%;
    opacity:0.6;
    transform:translateY(20px) scale(0.98);
    transition: opacity .7s ease, transform .7s ease, box-shadow .7s ease;
  }
  .experience-block.in-view{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  .experience-block h3{ 
    font-size:22px; margin:0 0 20px; color:var(--txt); 
    border-bottom:2px solid rgba(255,255,255,.1); 
    padding-bottom:8px;
    transition: border-color .5s ease, text-shadow .5s ease;
  }
  .experience-block.in-view h3{
    border-bottom-color:rgba(91,211,255,.4);
    text-shadow:0 0 20px rgba(91,211,255,.3);
  }
  
  /* Timeline */
  .timeline{ position:relative; padding-left:21.2px; }
  .timeline::before{ 
    content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:linear-gradient(180deg, var(--acc) 0%, rgba(91,211,255,.3) 100%);
  }
  .timeline-item{ 
    position:relative; margin-bottom:28px;
    opacity:0.5; transform:translateX(-10px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .timeline-item.in-view{
    opacity:1; transform:translateX(0);
  }
  .timeline-item::before{
    content:''; position:absolute; 
    left:-25px; /* 丸の左端: -25px、幅10px → 中心は -20px */
    top:6px;
    width:10px; height:10px; border-radius:50%;
    background:var(--acc); 
    box-shadow:0 0 0 3px rgba(91,211,255,.2);
    transition: all .4s ease;
    transform-origin: center;
  }
  .timeline-item.in-view::before{
    width:14px; height:14px; 
    left:-27px; /* 丸の左端: -27px、幅14px → 中心は -20px */
    top:4px;
    background:var(--acc);
    box-shadow:0 0 0 5px rgba(91,211,255,.4), 0 0 16px rgba(91,211,255,.8);
    animation: pulse-dot 2s ease-in-out infinite;
  }
  @keyframes pulse-dot{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.2); }
  }
  .timeline-date{
    font-size:13px; color:var(--dim); margin-bottom:6px; font-weight:600;
  }
  .timeline-content h4{
    font-size:17px; margin:0 0 8px; color:var(--txt);
  }
  .timeline-content p{
    margin:0 0 8px; font-size:14px; line-height:1.6;
  }
  .timeline-content ul{
    margin:8px 0 0; padding-left:20px; font-size:14px; line-height:1.7;
  }
  .timeline-content li{ margin:4px 0; color:var(--txt); }
  
  /* Certifications list */
  .cert-list{
    list-style:none; margin:0; padding:0;
  }
  .cert-list li{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:12px 16px; margin-bottom:10px;
    background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px; gap:12px; flex-wrap:wrap;
    opacity:0.5;
    transform:translateX(-15px);
    transition: opacity .5s ease, transform .5s ease, border-color .5s ease, box-shadow .5s ease;
  }
  .experience-block.in-view .cert-list li{
    opacity:1;
    transform:translateX(0);
    border-color:rgba(255,255,255,.15);
    box-shadow:0 4px 12px rgba(0,0,0,.2);
  }
  .cert-list li:nth-child(1){ transition-delay:0.1s; }
  .cert-list li:nth-child(2){ transition-delay:0.2s; }
  .cert-list li:nth-child(3){ transition-delay:0.3s; }
  .cert-list li:nth-child(4){ transition-delay:0.4s; }
  .cert-list li:nth-child(5){ transition-delay:0.5s; }
  .cert-name{ font-weight:600; color:var(--txt); }
  .cert-date{ font-size:13px; color:var(--dim); white-space:nowrap; }
  
  /* Future plans list */
  .future-list{
    list-style:none; margin:0; padding:0;
  }
  .future-list li{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:12px 16px; margin-bottom:10px;
    background:linear-gradient(135deg, rgba(255,211,91,.08), rgba(255,211,91,.02));
    border:1px solid rgba(255,211,91,.15);
    border-radius:10px; gap:12px; flex-wrap:wrap;
    opacity:0.5;
    transform:translateX(-15px);
    transition: opacity .5s ease, transform .5s ease, border-color .5s ease, box-shadow .5s ease;
  }
  .experience-block.in-view .future-list li{
    opacity:1;
    transform:translateX(0);
    border-color:rgba(255,211,91,.3);
    box-shadow:0 4px 12px rgba(255,211,91,.15);
  }
  .future-list li:nth-child(1){ transition-delay:0.1s; }
  .future-list li:nth-child(2){ transition-delay:0.2s; }
  .future-list li:nth-child(3){ transition-delay:0.3s; }
  .future-list li:nth-child(4){ transition-delay:0.4s; }
  .future-name{ font-weight:600; color:var(--txt); }
  .future-date{ font-size:13px; color:var(--dim); white-space:nowrap; font-style:italic; }
  
  /* Activity list */
  .activity-list{
    list-style:none; margin:0; padding:0;
  }
  .activity-list li{
    padding:16px; margin-bottom:14px;
    background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border-left:3px solid rgba(91,211,255,.3);
    border-radius:8px;
    opacity:0.5;
    transform:translateX(-15px);
    transition: opacity .5s ease, transform .5s ease, border-color .5s ease, background .5s ease;
  }
  .experience-block.in-view .activity-list li{
    opacity:1;
    transform:translateX(0);
    border-left-color:var(--acc);
    background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  }
  .activity-list li:nth-child(1){ transition-delay:0.1s; }
  .activity-list li:nth-child(2){ transition-delay:0.2s; }
  .activity-list li:nth-child(3){ transition-delay:0.3s; }
  .activity-list li:nth-child(4){ transition-delay:0.4s; }
  .activity-list strong{
    display:block; font-size:16px; margin-bottom:6px; color:var(--txt);
  }
  .activity-list p{
    margin:0; font-size:14px; line-height:1.6; color:var(--dim);
  }
  
  /* Ideas section */
  .ideas-grid{
    display:grid; gap:24px; width:100%; max-width:var(--maxw);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .idea-card{
    background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    padding:20px;
    box-shadow:var(--shadow);
    transition: transform .4s ease, box-shadow .4s ease, border-color .3s ease;
    position:relative;
    overflow:hidden;
  }
  .idea-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg, var(--acc), rgba(255,211,91,.6));
    opacity:0; transition:opacity .3s ease;
  }
  .idea-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 40px rgba(0,0,0,.35);
    border-color:rgba(255,255,255,.15);
  }
  .idea-card:hover::before{
    opacity:1;
  }
  .idea-status{
    display:inline-block;
    padding:4px 10px;
    font-size:12px;
    font-weight:600;
    color:rgba(255,211,91,1);
    background:rgba(255,211,91,.15);
    border:1px solid rgba(255,211,91,.3);
    border-radius:20px;
    margin-bottom:12px;
  }
  .idea-card h3{
    font-size:18px;
    margin:0 0 12px;
    color:var(--txt);
    line-height:1.4;
  }
  .idea-card p{
    margin:0 0 16px;
    font-size:14px;
    line-height:1.7;
    color:var(--dim);
  }
  .idea-tags{
    display:flex; gap:8px; flex-wrap:wrap;
  }
  .idea-tags span{
    padding:4px 10px;
    font-size:12px;
    background:rgba(91,211,255,.12);
    border:1px solid rgba(91,211,255,.25);
    border-radius:12px;
    color:var(--acc);
    transition:all .3s ease;
  }
  .idea-card:hover .idea-tags span{
    background:rgba(91,211,255,.2);
    border-color:rgba(91,211,255,.4);
  }
  
  @media (max-width: 768px){
    .ideas-grid{
      grid-template-columns:1fr;
    }
  }
  
  /* フッター：より暗いダークサンド */
  .site-footer{
    display:grid; place-items:center; padding:24px;
    color:#efe9df;
    background:#5f523d;          /* さらに暗い砂色 */
    border-top:1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 6px 18px rgba(0,0,0,.20);
  }

/* Works grid (responsive) */
.works-grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px; 
  width:100%; 
  max-width:var(--maxw);
}

.works-grid .card{ 
  cursor:pointer;
  transition:all .3s ease;
}

.works-grid .card:hover{ 
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.4);
}

@media (max-width: 768px){
  .works-grid{ 
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:16px;
  }
}

@media (max-width: 480px){
  .works-grid{ 
    grid-template-columns:1fr;
    gap:14px;
  }
  .works-grid .card{ padding:16px }
}

/* Responsive */
@media (max-width: 640px){
  main{ scroll-snap-type: y proximity; }
  .site-header{ height:56px; padding:0 12px }
  .nav a{ margin-left:10px; font-size:14px; padding-bottom:2px; }
  .nav a::after{ height:1.5px; }
  .brand{ font-size:16px }
  .hero{ padding-top:56px }
  .whale-logo{ width:42vw; max-width:220px; min-width:132px; }
  .title{ font-size:5.2vw; }
  .title .sub{ margin-top:4px }
  .section{ padding:80px 16px 56px }
  
  /* Experience section responsive */
  .timeline{ padding-left:24px; }
  .timeline::before{ left:0; }
  .timeline-item::before{ left:-25px; width:8px; height:8px; top:7px; }
  .timeline-item.in-view::before{ width:12px; height:12px; left:-27px; top:5px; }
  .experience-block h3{ font-size:19px; }
  .timeline-content h4{ font-size:16px; }
  .timeline-content p, .timeline-content ul{ font-size:13px; }
  .cert-list li{ flex-direction:column; align-items:flex-start; gap:4px; padding:10px 12px; }
  .cert-date{ font-size:12px; }
  .activity-list strong{ font-size:15px; }
  .activity-list p{ font-size:13px; }
}

@media (max-width: 380px){
  .nav{ display:none }
}

/* Work item clickable style */
.work-item{
  cursor:pointer;
  transition: transform .4s ease, box-shadow .4s ease, border-color .3s ease;
  position:relative;
}
.work-item:hover{
  border-color:rgba(255,255,255,.15);
}
.work-item:active{
  transform: translateY(-2px) scale(0.98);
}
.click-hint{
  display:inline-block;
  margin-top:12px;
  padding:6px 12px;
  font-size:12px;
  color:var(--acc);
  background:rgba(91,211,255,.12);
  border:1px solid rgba(91,211,255,.25);
  border-radius:20px;
  opacity:.75;
  transition: opacity .3s ease, background .3s ease, border-color .3s ease;
}
.work-item:hover .click-hint{
  opacity:1;
  background:rgba(91,211,255,.2);
  border-color:rgba(91,211,255,.4);
}

/* Modal */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.modal.active{
  display:flex;
}
.modal-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
  animation: fadeIn .3s ease;
}
.modal-content{
  position:relative; z-index:1;
  max-width:800px; width:100%;
  max-height:85vh; overflow-y:auto;
  background:linear-gradient(180deg, 
    color-mix(in oklab, var(--surf) 95%, white 5%),
    color-mix(in oklab, var(--mid) 92%, black 8%));
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:32px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  animation: slideUp .4s ease;
}
.modal-close{
  position:absolute; top:16px; right:16px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:var(--txt); font-size:24px; line-height:1;
  cursor:pointer; transition:all .25s ease;
}
.modal-close:hover{
  background:rgba(255,255,255,.2);
  transform:rotate(90deg);
}
#modalTitle{
  margin:0 0 20px; font-size:28px; color:var(--txt);
}
.modal-body{
  color:var(--txt); line-height:1.8;
}
.modal-body h1, .modal-body h2, .modal-body h3{
  color:var(--txt); margin:24px 0 12px;
}
.modal-body h1{ font-size:24px; }
.modal-body h2{ font-size:20px; }
.modal-body h3{ font-size:18px; }
.modal-body p{ margin:0 0 16px; }
.modal-body ul, .modal-body ol{
  margin:0 0 16px; padding-left:24px;
}
.modal-body li{ margin:8px 0; }
.modal-body code{
  background:rgba(0,0,0,.3);
  padding:2px 6px; border-radius:4px;
  font-family:'Courier New', monospace; font-size:0.9em;
}
.modal-body pre{
  background:rgba(0,0,0,.4);
  padding:16px; border-radius:8px;
  overflow-x:auto; margin:0 0 16px;
}
.modal-body pre code{
  background:none; padding:0;
}
.modal-body a{
  color:var(--acc); text-decoration:underline;
}
.modal-body a:hover{
  color:color-mix(in oklab, var(--acc) 80%, white 20%);
}
.modal-body blockquote{
  border-left:4px solid var(--acc);
  padding-left:16px; margin:16px 0;
  font-style:italic; opacity:.9;
}
.modal-body img{
  max-width:100%; height:auto; border-radius:8px;
  margin:16px 0;
}

/* Reveal animation */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes slideUp{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important }
}