:root{
    --ink-navy: #12213F;
    --ink-deep: #0A162C;
    --line: #6FA3CE;
    --line-soft: rgba(111,163,206,0.28);
    --line-faint: rgba(111,163,206,0.14);
    --line-bright: #BFE0F5;
    --paper: #F5F1E5;
    --paper-dim: #EAE4D2;
    --paper-line: #C9C0A6;
    --ink-text: #1E2333;
    --ink-text-soft: #4B5266;
    --amber: #E0A039;
    --amber-deep: #B97C1F;
    --muted: #8D96AE;
    --green: #7C9473;
    --radius: 3px;
    --maxw: 1080px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

  body{
    margin:0;
    background: var(--ink-navy);
    color: var(--line-bright);
    font-family: 'Zen Kaku Gothic New', sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }

  .mono{ font-family: 'JetBrains Mono', monospace; }

  a{ color: inherit; }

  ::selection{ background: var(--amber); color: var(--ink-deep); }

  :focus-visible{
    outline: 2px solid var(--amber);
    outline-offset: 3px;
  }

  /* ---------- blueprint grid background ---------- */
  .grid-bg{
    background-image:
      linear-gradient(var(--line-faint) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-faint) 1px, transparent 1px),
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px;
    background-position: -1px -1px;
  }

  .crop{
    position:absolute;
    width:18px; height:18px;
    pointer-events:none;
  }
  .crop::before, .crop::after{
    content:"";
    position:absolute;
    background: var(--line);
    opacity:0.55;
  }
  .crop::before{ width:100%; height:1px; top:50%; }
  .crop::after{ width:1px; height:100%; left:50%; }
  .crop.tl{ top:14px; left:14px; }
  .crop.tr{ top:14px; right:14px; }
  .crop.bl{ bottom:14px; left:14px; }
  .crop.br{ bottom:14px; right:14px; }

  /* ---------- layout helpers ---------- */
  .wrap{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
  }

  .sheet{
    position: relative;
    padding: 96px 0 100px;
    border-bottom: 1px solid var(--line-soft);
  }

  .sheet-label{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom: 40px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.14em;
  }
  .sheet-label .num{
    color: var(--amber);
    font-weight:600;
  }
  .sheet-label .rule{
    flex:1;
    height:1px;
    background: var(--line-soft);
  }

  h2.title{
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 900;
    color: var(--line-bright);
    margin: 0 0 6px;
    letter-spacing: 0.01em;
  }
  .title-en{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.18em;
    margin-bottom: 14px;
  }

  .lede{
    max-width: 640px;
    color: var(--line-bright);
    opacity: 0.82;
    font-size: 15px;
  }

  /* ---------- nav ---------- */
  header.nav{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10,22,44,0.86);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-inner{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .nav-mark{
    font-family:'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--line-bright);
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  .nav-mark .dot{ color: var(--amber); }
  nav.links{
    display:flex;
    gap: 26px;
    font-size: 13px;
  }
  nav.links a{
    text-decoration:none;
    color: var(--muted);
    letter-spacing: 0.04em;
    transition: color 0.15s ease;
    position:relative;
  }
  nav.links a:hover{ color: var(--line-bright); }
  @media (max-width: 680px){
    nav.links{ display:none; }
  }

  /* ---------- hero ---------- */
  .hero{
    position: relative;
    padding: 80px 0 60px;
    overflow:hidden;
  }
  .hero-inner{
    position:relative;
    max-width: var(--maxw);
    margin:0 auto;
    padding: 0 24px;
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--amber);
    letter-spacing: 0.18em;
    margin-bottom: 18px;
  }
  .hero h1{
    font-size: clamp(34px, 6vw, 58px);
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 20px;
    color: #fff;
  }
  .hero h1 .sub{
    display:block;
    font-size: 0.36em;
    color: var(--line-bright);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-top: 10px;
  }
  .hero p.desc{
    max-width: 560px;
    font-size: 16px;
    color: var(--line-bright);
    opacity: 0.85;
    margin: 0 0 32px;
  }

  .tags{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    margin-bottom: 56px;
  }
  .tag{
    font-family:'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 7px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    color: var(--line-bright);
    letter-spacing: 0.04em;
  }

  /* title block — signature element */
  .title-block{
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.02);
    max-width: 620px;
  }
  .tb-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
  }
  .tb-cell{
    padding: 14px 18px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }
  .tb-row .tb-cell:last-child{ border-right:none; }
  .tb-row:last-child .tb-cell{ border-bottom:none; }
  .tb-k{
    font-family:'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.12em;
    margin-bottom: 4px;
  }
  .tb-v{
    font-size: 14px;
    color: var(--line-bright);
  }
  .tb-v.mono{ font-family:'JetBrains Mono', monospace; font-size:13px; }

  /* ---------- project universe ---------- */
  .intro-block{
    display:flex;
    flex-wrap:wrap;
    gap: 48px;
    align-items:flex-start;
    margin-bottom: 56px;
  }
  .principles{
    flex:1;
    min-width: 260px;
    list-style:none;
    margin:0; padding:0;
    display:grid;
    gap: 12px;
  }
  .principles li{
    font-size: 13px;
    color: var(--line-bright);
    opacity: 0.85;
    padding-left: 18px;
    position:relative;
  }
  .principles li::before{
    content:"—";
    position:absolute;
    left:0;
    color: var(--amber);
  }

  /* dependency diagram */
  .diagram{
    flex: 1.3;
    min-width: 280px;
  }
  .diagram-row{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .diagram-row-5{
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  }
  .diagram-node{
    border: 1px solid var(--line);
    padding: 10px 6px;
    text-align:center;
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--line-bright);
    background: rgba(111,163,206,0.06);
    word-break: break-word;
  }
  .diagram-arrow{
    display:flex;
    justify-content:center;
    margin: 8px 0;
    color: var(--amber);
    font-size: 18px;
  }
  .diagram-core{
    border: 1px solid var(--amber);
    padding: 12px;
    text-align:center;
    font-family:'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--amber);
    background: rgba(224,160,57,0.06);
  }
  .diagram-core .core-sub{
    display:block;
    margin-top: 6px;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.02em;
  }

  /* project cards */
  .cards{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  @media (max-width: 720px){
    .cards{ grid-template-columns: 1fr; }
    .diagram-row{ grid-template-columns: repeat(2, 1fr); }
  }

  .card{
    background: var(--paper);
    color: var(--ink-text);
    border-radius: var(--radius);
    padding: 22px 22px 20px;
    position:relative;
    border: 1px solid var(--paper-line);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .card:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.28);
  }
  .card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom: 10px;
    gap: 10px;
  }
  .card-name{
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 0.01em;
  }
  .card-name .en{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--ink-text-soft);
    letter-spacing: 0.12em;
    margin-top: 3px;
  }
  .status{
    font-family:'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 2px;
    white-space: nowrap;
    letter-spacing: 0.04em;
    border: 1px solid currentColor;
  }
  .status.progress{ color: var(--amber-deep); }
  .status.accepted{ color: var(--green); }
  .status.design{ color: #6C7690; }
  .status.scoping{ color: #6C7690; }

  .card-role{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--amber-deep);
    letter-spacing: 0.03em;
    margin: 0 0 10px;
  }

  .card p{
    font-size: 13.5px;
    color: var(--ink-text-soft);
    margin: 0 0 12px;
  }
  .card-meta{
    display:flex;
    flex-wrap:wrap;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--paper-line);
  }
  .meta-chip{
    font-family:'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-text-soft);
    background: var(--paper-dim);
    padding: 3px 7px;
    border-radius: 2px;
  }

  /* ---------- home lab ---------- */
  .lab-layout{
    display:flex;
    gap: 48px;
    flex-wrap:wrap;
  }
  .rack{
    flex: 1;
    min-width: 240px;
    border: 1px solid var(--line);
    padding: 18px;
    background: rgba(111,163,206,0.05);
  }
  .rack-title{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.1em;
    margin-bottom: 12px;
  }
  .rack-unit{
    border: 1px solid var(--line-soft);
    padding: 12px 14px;
    margin-bottom: 8px;
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--line-bright);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 10px;
  }
  .rack-unit.host{
    border-color: var(--amber);
    color: var(--amber);
    font-size: 12px;
  }
  .rack-unit .u-label{ opacity: 0.6; }
  .rack-services{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
    margin-top: 4px;
  }

  .lab-specs{
    flex: 1;
    min-width: 240px;
  }
  .spec-row{
    display:flex;
    justify-content:space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-faint);
    font-size: 13.5px;
  }
  .spec-row .k{ color: var(--muted); }
  .spec-row .v{ font-family:'JetBrains Mono', monospace; color: var(--line-bright); text-align:right; }

  /* ---------- school ---------- */
  .note{
    border-left: 2px solid var(--amber);
    padding: 4px 0 4px 22px;
    max-width: 680px;
  }
  .note p{
    font-size: 14.5px;
    color: var(--line-bright);
    opacity: 0.85;
    margin: 0 0 14px;
  }
  .note-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top: 16px;
  }

  /* ---------- contact / footer ---------- */
  .contact-sheet{
    padding: 90px 0 50px;
  }
  .contact-block{
    border: 1px solid var(--line);
    padding: 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap: 24px;
  }
  .contact-block h3{
    margin: 0 0 8px;
    font-size: 22px;
    color: #fff;
  }
  .contact-block p{
    margin:0;
    color: var(--muted);
    font-size: 13px;
    max-width: 380px;
  }
  .stamp-btn{
    font-family:'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--ink-deep);
    background: var(--amber);
    border: none;
    padding: 14px 26px;
    border-radius: var(--radius);
    text-decoration:none;
    display:inline-block;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .stamp-btn:hover{ background: var(--line-bright); transform: translateY(-2px); }

  .foot-meta{
    max-width: var(--maxw);
    margin: 40px auto 0;
    padding: 0 24px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap: 10px;
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
  }

  /* reveal on scroll */
  .reveal{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.in{
    opacity: 1;
    transform: none;
  }

  .draft-flag{
    display:inline-block;
    font-family:'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-deep);
    background: var(--amber);
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.05em;
  }