/* ============================================================
   PortalSystem Docs — “Viewfinder” design system
   モチーフ: ポータルのプレビューカメラ（ShotPoint）が覗くファインダー。
   角ブラケット枠・モノスペースのHUDラベル・シアングローで統一する。
   ============================================================ */

:root{
  --void:#0a0d13;
  --panel:#12161f;
  --panel2:#171d29;
  --panel3:#1c2331;
  --edge:#242c3d;
  --edge-bright:#3a465e;
  --ink:#eef1f7;
  --dim:#8f97ab;
  --dim2:#5f6981;
  --portal:#4fd8ff;
  --portal-soft:rgba(79,216,255,.14);
  --violet:#a78bfa;
  --warn:#ffb454;
  --danger:#ff6b6b;
  --ok:#7ee0c3;
  --tag-bool:#7ee0c3; --tag-float:#4fd8ff; --tag-str:#e2a6ff; --tag-obj:#ffcf5c; --tag-arr:#ff9f7a;
  --mono: ui-monospace,"SF Mono","Cascadia Code",Consolas,Menlo,monospace;
  --sans:"Hiragino Sans","Yu Gothic UI","Noto Sans JP",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{
    --void:#f3f5f9; --panel:#ffffff; --panel2:#f2f4f8; --panel3:#eaeef4;
    --edge:#dde2ea; --edge-bright:#c4cbd8;
    --ink:#161a22; --dim:#5b6478; --dim2:#8890a0;
    --portal:#0091b8; --portal-soft:rgba(0,145,184,.10); --violet:#7c5cf0;
    --warn:#a15c00; --danger:#c02b2b; --ok:#0f9d78;
    --tag-bool:#0f9d78; --tag-float:#0091b8; --tag-str:#8b2fc9; --tag-obj:#b5790a; --tag-arr:#c2540e;
  }
}

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

body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--sans);
  line-height:1.85; font-size:15.5px;
  background-image:
    radial-gradient(ellipse 900px 500px at 12% -10%, var(--portal-soft), transparent 60%);
  background-repeat:no-repeat;
}
a{color:var(--portal);}
::selection{background:var(--portal); color:#04121a;}
code{background:var(--panel3); padding:2px 7px; border-radius:4px; font-size:.86em; font-family:var(--mono); color:var(--ink); border:1px solid var(--edge);}

/* ---------- layout ---------- */
.layout{display:flex; max-width:1260px; margin:0 auto; align-items:flex-start;}
main{flex:1; min-width:0; padding:52px 56px 140px;}
@media (max-width:860px){ main{padding:32px 20px 90px;} }

/* ---------- nav ---------- */
nav{
  width:272px; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:30px 18px 40px; border-right:1px solid var(--edge);
  scrollbar-width:thin;
}
.brand{
  display:block; position:relative; padding:16px 16px 15px; margin-bottom:6px;
  font-family:var(--mono); text-decoration:none; color:var(--ink);
}
.brand-mark{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; letter-spacing:.02em;}
.brand-mark .dot{width:8px; height:8px; border-radius:50%; background:var(--portal); box-shadow:0 0 8px 1px var(--portal);}
.brand small{display:block; color:var(--dim); font-weight:400; font-size:11px; margin-top:5px; font-family:var(--sans); letter-spacing:.02em;}

.pagenav{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:3px;}
.pagenav a{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:7px; color:var(--dim);
  text-decoration:none; font-size:13px; border:1px solid transparent; font-family:var(--sans);
}
.pagenav a::before{content:"›"; font-family:var(--mono); color:var(--dim2); width:10px; flex-shrink:0;}
.pagenav a.current{background:var(--panel2); border-color:var(--edge); color:var(--ink); font-weight:700;
  box-shadow:inset 2px 0 0 var(--portal);}
.pagenav a.current::before{color:var(--portal);}
.pagenav a:not(.current):hover{background:var(--panel2); color:var(--ink);}

.group-title{
  font-family:var(--mono); font-size:10.5px; color:var(--dim2); text-transform:uppercase; letter-spacing:.12em;
  margin:26px 0 8px; padding:0 12px; font-weight:700;
  display:flex; align-items:center; gap:6px;
}
.group-title::before{content:"◆"; font-size:7px; color:var(--portal);}
ul.sectionlist{list-style:none; margin:0; padding:0; border-left:1px solid var(--edge); margin-left:16px;}
ul.sectionlist li{margin:0;}
ul.sectionlist a{
  display:block; padding:6px 12px 6px 16px; margin-left:-1px; border-left:2px solid transparent;
  border-radius:0 6px 6px 0; color:var(--dim); text-decoration:none; font-size:13px;
  transition:background .12s, border-color .12s, color .12s;
}
ul.sectionlist a:hover{background:var(--panel2); color:var(--ink); border-left-color:var(--portal);}

/* ---------- eyebrow / headings ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--portal); font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--portal);}

h1{
  font-size:32px; margin:0 0 10px; letter-spacing:-.01em; font-weight:800;
  font-family:var(--sans);
}
h1 + p.lead{color:var(--dim); font-size:16.5px; margin-top:0; max-width:760px;}

h2{
  font-size:20px; margin:60px 0 4px; padding-bottom:14px; position:relative;
  scroll-margin-top:24px; font-weight:800; line-height:1.4;
}
h2::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--portal) 0, var(--edge-bright) 130px, var(--edge) 100%);
}
h2 .comp-desc{
  display:block; font-size:12px; color:var(--dim); font-weight:400; margin-top:8px;
  font-family:var(--mono); letter-spacing:.01em;
}
h3{font-size:15px; margin:0; scroll-margin-top:20px; font-weight:700;}
p{margin:10px 0;}
ul,ol{padding-left:22px;}
li{margin:6px 0;}

/* ---------- corner-frame (signature viewfinder element) ----------
   ポータルのプレビューカメラが覗くファインダーの角ブラケットを、
   追加マークアップなしで多重backgroundにより描画する。 */
.field, .prefab-card, .intro-card, .card-link, .hero-frame{
  position:relative; background-color:var(--panel); border:1px solid var(--edge); border-radius:2px;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--portal),var(--portal)), linear-gradient(var(--portal),var(--portal)),
    linear-gradient(var(--portal),var(--portal)), linear-gradient(var(--portal),var(--portal)),
    linear-gradient(var(--portal),var(--portal)), linear-gradient(var(--portal),var(--portal)),
    linear-gradient(var(--portal),var(--portal)), linear-gradient(var(--portal),var(--portal));
  background-size:
    12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px;
  background-position:
    top -1px left -1px, top -1px left -1px,
    top -1px right -1px, top -1px right -1px,
    bottom -1px left -1px, bottom -1px left -1px,
    bottom -1px right -1px, bottom -1px right -1px;
}

/* ---------- hero (index only) ---------- */
.hero{padding:8px 0 0;}
.hero-frame{padding:30px 32px; margin:22px 0 8px;}
.hero-frame .flow{margin-top:20px;}

.reveal-line{
  height:2px; width:0; background:linear-gradient(90deg, var(--portal), transparent);
  animation:reveal .9s ease-out .1s forwards; margin:2px 0 22px;
}
@keyframes reveal{ to{ width:100%; } }

/* ---------- generic content blocks ---------- */
.intro-card{padding:22px 24px; margin:18px 0; position:relative;}
.flow{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:18px 0; font-size:13px; font-family:var(--mono);}
.flow .box{background:var(--panel2); border:1px solid var(--edge); border-radius:4px; padding:9px 13px; font-weight:600; color:var(--ink);}
.flow .arrow{color:var(--portal); font-weight:700;}

.note,.warn,.danger{border-radius:0 8px 8px 0; padding:13px 18px; margin:16px 0; font-size:14px; border-left:3px solid; background:var(--panel2);}
.note{border-color:var(--portal);}
.warn{border-color:var(--warn);}
.danger{border-color:var(--danger);}
.note b,.warn b,.danger b{font-family:var(--mono); text-transform:uppercase; font-size:11px; letter-spacing:.06em; display:inline-block; margin-right:2px;}

/* ---------- step list ---------- */
.step{display:flex; gap:16px; align-items:flex-start; margin:14px 0;}
.step .num{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--panel2); color:var(--portal);
  border:1px solid var(--portal); font-weight:700; font-size:12.5px; font-family:var(--mono);
  display:flex; align-items:center; justify-content:center;
}

.tree{
  font-family:var(--mono); font-size:12.5px; background:var(--panel3); border:1px solid var(--edge);
  border-radius:6px; padding:16px 20px; white-space:pre; color:var(--dim); overflow-x:auto;
}
.tree{ line-height:1.6; }

/* ---------- parameter field card ---------- */
.field{padding:20px 22px; margin:16px 0; position:relative;}
.field-head{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:6px;}
.fname{font-family:var(--mono); font-size:15.5px; font-weight:700; color:var(--ink);}
.type{
  font-family:var(--mono); font-size:11px; font-weight:700; padding:2px 4px; border-radius:3px; letter-spacing:.01em;
  border:1px solid currentColor; background:transparent;
}
.type::before{content:"‹";} .type::after{content:"›";}
.type.bool{color:var(--tag-bool);} .type.float{color:var(--tag-float);}
.type.str{color:var(--tag-str);} .type.obj{color:var(--tag-obj);} .type.arr{color:var(--tag-arr);}
.default{
  font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-left:auto;
  background:var(--panel2); border:1px solid var(--edge); border-radius:4px; padding:4px 10px;
}
.default b{color:var(--ink); font-weight:700;}
.field .meaning{margin:12px 0; color:var(--ink);}
.field .when{
  font-size:13.5px; color:var(--dim); background:var(--panel2); border-radius:6px; padding:11px 15px; margin-top:10px;
  border:1px solid var(--edge);
}
.field .when b{color:var(--ok); font-family:var(--mono); text-transform:uppercase; font-size:11px; letter-spacing:.05em;}
.field .caveat{font-size:13.5px; color:var(--warn); margin-top:10px; padding-left:18px; position:relative;}
.field .caveat::before{content:"!"; position:absolute; left:0; top:0; font-family:var(--mono); font-weight:800;}

/* ---------- table ---------- */
table{border-collapse:collapse; width:100%; margin:18px 0; font-size:13.8px;}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--edge); vertical-align:top;}
th{color:var(--portal); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-family:var(--mono); border-bottom:1px solid var(--edge-bright);}
tr:hover td{background:var(--panel2);}

/* ---------- prefab-card / qa card ---------- */
.prefab-card{padding:18px 22px; margin:16px 0; position:relative;}
.prefab-card h3{color:var(--portal); margin-bottom:8px; font-family:var(--mono); font-size:14px;}

/* ---------- landing cards ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; margin:26px 0;}
.card-link{
  display:block; padding:24px 24px; text-decoration:none; color:var(--ink);
  transition:border-color .15s, transform .15s, box-shadow .15s; position:relative;
}
.card-link:hover{transform:translateY(-3px); box-shadow:0 10px 30px -12px rgba(0,0,0,.5); border-color:var(--portal);}
.card-link .icon{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--portal); display:flex; align-items:center;
  justify-content:center; font-size:16px; color:var(--portal); font-family:var(--mono);
}
.card-link h3{color:var(--ink); font-size:16.5px; margin:14px 0 7px; font-weight:800;}
.card-link p{color:var(--dim); font-size:13.5px; margin:0;}
.card-link .tag{
  display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700; padding:3px 8px; border-radius:3px;
  border:1px solid var(--edge-bright); color:var(--dim); margin-bottom:12px; letter-spacing:.08em; text-transform:uppercase;
}

/* ---------- footer ---------- */
footer{
  color:var(--dim2); font-size:12px; margin-top:70px; padding-top:18px; border-top:1px solid var(--edge);
  font-family:var(--mono); letter-spacing:.02em;
}

@media (max-width:860px){
  .layout{flex-direction:column;}
  nav{position:relative; height:auto; width:auto; border-right:none; border-bottom:1px solid var(--edge);}
}

/* ---------- accessibility ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--portal); outline-offset:2px; border-radius:2px;
}