:root{
    --bg:#0a0e12; --panel:#0f141a; --muted:#98a2b3; --text:#e6edf3;
    --brand:#17c9ff; --brand-2:#4ef0d9; --border:#1d2731; --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:14px; --container:1120px; --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box} html,body{margin:0;padding:0}
  body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
    color:var(--text); background:radial-gradient(1200px 600px at 75% -10%, #0f2a33 0%, transparent 60%), var(--bg);
    line-height:1.7; letter-spacing:.02em}
  
/* Layout */
.bd-container{max-width:var(--container); margin-inline:auto; padding:0 24px}
.bd-section{padding:88px 0; border-top:1px solid var(--border)}
.bd-h2{font-size:28px; margin:0 0 14px}
.bd-h3{font-size:22px; margin:32px 0 18px; color:var(--brand-2)}
.bd-section__lead{color:var(--muted); margin:0 0 28px}
.bd-section__lead02{color:#ff6969; font-weight:bold; margin:0 0 10px}
  
  /* Header */
  .bd-header{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px; border-bottom:1px solid var(--border); background:rgba(10,14,18,.75); backdrop-filter:saturate(140%) blur(10px)}
  .bd-logo{font-weight:800; letter-spacing:.08em; text-decoration:none; color:var(--text)}
  .bd-nav-toggle{display:none; background:none; border:0; width:44px; height:44px; padding:0; cursor:pointer}
  .bd-burger, .bd-burger::before, .bd-burger::after{display:block; width:22px; height:2px; background:var(--text); content:""; transition:transform .3s var(--ease)}
  .bd-burger::before{transform:translateY(-6px)} .bd-burger::after{transform:translateY(6px)}
  .bd-nav ul{display:flex; gap:20px; align-items:center; margin:0; padding:0; list-style:none}
  .bd-nav a{color:var(--text); text-decoration:none; padding:8px 10px; border-radius:10px}
  .bd-nav a:hover{background:rgba(255,255,255,.06)}
  .bd-nav .bd-cta{border:1px solid var(--brand); color:var(--brand)}
  
  /* Hero */
  .bd-hero{position:relative; min-height:45vh; display:grid; align-items:center; overflow:hidden; background:url('../assets/hero.png') center/cover no-repeat}
  .bd-hero__content{position:relative; z-index:1; padding:64px 24px}
  .bd-hero__title{font-size:48px; line-height:1.15; margin:0 0 12px}
  .bd-hero__lead{color:var(--muted); margin:0 0 28px}
  .bd-hero__cta{display:flex; gap:12px; flex-wrap:wrap}
  .bd-btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; text-decoration:none; border:1px solid transparent; box-shadow:var(--shadow); transition:transform .15s var(--ease)}
  .bd-btn:hover{transform:translateY(-1px)}
  .bd-btn--primary{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#001318}
  .bd-btn--ghost{background:transparent; border-color:#2b3b49; color:var(--text)}
  
.bd-hero__visual{position:absolute; inset:0; pointer-events:none}
.bd-hero__glow{position:absolute; inset:-30% -10% auto -10%; height:75%; filter:blur(80px);
  background:radial-gradient(800px 400px at 60% 20%, rgba(23,201,255,.25), transparent 60%)}
#bd-hero-canvas{position:absolute; inset:0; width:100%; height:100%; opacity:0.8}
  
/* Cards */
.bd-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0 0; padding:0}
.bd-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:0; list-style: none; overflow:hidden}
.bd-card__image{width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--bg)}
.bd-card__image img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.bd-card__title{font-size:18px; margin:0 0 8px; padding:18px 18px 0}
.bd-card__text{color:var(--muted); margin:0; padding:0 18px 18px}
  
  /* Works grid */
  .bd-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
  .bd-work{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin:0}
  .bd-work img{width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; display:block}
  .bd-work figcaption{font-size:12px; color:var(--muted); padding:8px}
  
/* Works list */
.bd-works-list{display:grid; gap:18px; margin:28px 0 0; padding:0; list-style:none}
.bd-work-item{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.bd-work-item__title{font-size:16px; margin:0 0 8px; color:var(--brand-2)}
.bd-work-item__text{color:var(--muted); margin:0; line-height:1.7}
.bd-section__note{color:var(--muted); margin:14px 0 0; font-size:14px}

/* Biography */
.bd-biography{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-top:28px}
.bd-biography__text{color:var(--muted); margin:0 0 14px; line-height:1.8}
.bd-biography__text:last-child{margin-bottom:0}

/* DL list */
.bd-dl{display:grid; gap:10px}
.bd-dl dt{color:var(--muted)} .bd-dl dd{margin:0}
  
  /* Contact */
  .bd-contact{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
  .bd-note{color:var(--muted); margin:8px 0 0; font-size:14px}
  
  /* Footer */
  .bd-footer{border-top:1px solid var(--border); padding:24px 0; color:var(--muted)}
  .bd-footer__inner{display:flex; align-items:center; justify-content:space-between}
  .bd-toplink{color:var(--muted); text-decoration:none}
  .bd-toplink:hover{color:var(--text)}
  
  /* Responsive */
  @media (max-width: 960px){
    .bd-cards{grid-template-columns:1fr 1fr}
    .bd-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width: 720px){
    .bd-hero__title{font-size:36px}
    .bd-nav-toggle{display:block}
    .bd-nav{position:absolute; top:64px; right:14px; background:var(--panel); border:1px solid var(--border);
      border-radius:12px; padding:8px; display:none}
    .bd-nav.open{display:block}
    .bd-nav ul{flex-direction:column; align-items:stretch}
  }