:root{--bg:#0a1f22;--accent:#5fdfd7;--accent-soft:#9fefea;--text:#cfe8e6;--muted:#7fa5a3;--panel:rgba(20,54,57,0.85);--border:#3a8a85;--shadow:#1a4548}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"MS Gothic","Meiryo","Hiragino Kaku Gothic ProN",sans-serif;background-color:var(--bg);background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(95,223,215,0.05) 3px 4px);color:var(--text)}

.site-header{display:flex;align-items:center;padding:12px 18px;border-bottom:3px double var(--accent);background:linear-gradient(#143a3e,#0f2c2f)}
.logo a{color:var(--accent);font-weight:700;text-decoration:none;font-size:18px;text-shadow:0 0 6px rgba(95,223,215,0.4)}
.site-desc{padding:8px 18px;font-size:13px;color:var(--text);border-bottom:1px solid rgba(95,223,215,0.2);background:rgba(0,0,0,0.25)}

.content-wrap{display:flex;align-items:flex-start}
.sidebar{width:140px;flex-shrink:0;border-right:2px solid var(--accent);min-height:calc(100vh - 90px)}
.sidebar a{display:block;padding:8px 12px;color:var(--text);text-decoration:none;font-size:14px;border-bottom:1px dashed rgba(95,223,215,0.3)}
.sidebar a:hover{background:rgba(95,223,215,0.1);color:var(--accent)}

main{flex:1;padding:28px;display:flex;justify-content:center;align-items:flex-start}
.panel{width:100%;max-width:720px;padding:18px;border:2px solid var(--accent);background:var(--panel);box-shadow:6px 6px 0 var(--shadow)}
h1{margin:0 0 8px 0;font-size:24px;color:var(--accent)}
h2{font-size:18px;color:var(--accent);border-bottom:1px dashed rgba(95,223,215,0.3);padding-bottom:4px;margin-top:24px}
h3{font-size:15px;color:var(--accent-soft);margin-top:20px}
p{margin:8px 0}
a{color:var(--accent)}
a:hover{text-shadow:0 0 6px rgba(95,223,215,0.6)}
.btn{display:inline-block;padding:6px 10px;background:var(--accent);color:var(--bg);text-decoration:none;border-radius:3px;font-weight:600}
.btn:hover{background:var(--accent-soft);text-shadow:none}
footer{padding:10px 18px;text-align:center;font-size:13px;color:var(--muted);border-top:1px solid rgba(95,223,215,0.15);background:rgba(0,0,0,0.2)}

.contents-list{list-style:none;padding:0;margin:8px 0}
.contents-list li{padding:6px 0;border-bottom:1px dashed rgba(95,223,215,0.25)}
.contents-list a{color:var(--accent)}
.note-date{font-size:12px;color:var(--muted);margin:0 6px 0 0}
.note-back{margin-top:20px;font-size:13px}

table{border-collapse:collapse;margin:12px 0;font-size:14px}
th,td{border:1px solid var(--accent);padding:6px 12px;text-align:left}
th{background:rgba(95,223,215,0.15);color:var(--accent);font-weight:700}
tbody tr:nth-child(even) td{background:rgba(95,223,215,0.05)}

pre{background:#000814;border:1px solid var(--border);padding:10px 12px;overflow-x:auto;color:var(--accent-soft);font-family:"MS Gothic","Consolas","Courier New",monospace;font-size:13px;line-height:1.5}
pre code{background:transparent;border:none;padding:0;color:inherit;font-size:inherit}
code{font-family:"MS Gothic","Consolas","Courier New",monospace;font-size:13px;background:rgba(95,223,215,0.12);padding:1px 5px;border:1px solid rgba(95,223,215,0.25);color:var(--accent-soft);border-radius:2px}

@media (max-width:600px){
  .content-wrap{flex-direction:column}
  .sidebar{width:100%;min-height:unset;border-right:none;border-bottom:2px solid var(--accent);display:flex;overflow-x:auto;white-space:nowrap}
  .sidebar a{display:inline-block;border-bottom:none;border-right:1px dashed rgba(95,223,215,0.3);padding:8px 14px}
  main{padding:16px}
  .panel{margin:0;padding:12px}
  h1{font-size:20px}
}