:root{--bg:#f6f8fb;--card:#ffffff;--muted:#6b7280;--accent:#2563eb}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:linear-gradient(180deg,#f7fafc,#eef2f6);font-family:Inter,Noto Sans JP,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;color:#0f172a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1100px;margin:36px auto;padding:24px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;position:relative;padding-top:24px;padding-bottom:12px;flex-direction:column}.header-top{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:10px}.top-right{display:flex;align-items:center;gap:10px}.nav-btn{background:#fff;color:#0f172a;border:1px solid rgba(15,23,42,.15);padding:8px 14px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:500;transition:all .18s ease;box-shadow:0 1px 4px #1018280f}.nav-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px #1018280f}.nav-btn.active{background:var(--accent);color:#fff;box-shadow:0 8px 24px #2563eb2e}.brand{font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;pointer-events:none;padding-top:6px}.brand span{display:block}.brand-logo{height:120px;width:auto;display:block;max-height:24vh;pointer-events:auto}.clock{margin-left:auto;margin-right:12px;color:var(--muted);font-size:13px;font-weight:400}.digital-clock{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,Courier New,monospace;font-size:12px;letter-spacing:.6px;color:#0f172a;background:#ffffffe6;border:1px solid rgba(15,23,42,.06);padding:8px 14px;border-radius:10px;box-shadow:0 6px 18px #1018280a;display:inline-block;white-space:nowrap;text-align:center}@media (max-width: 600px){.digital-clock{font-size:11px;padding:6px 10px;min-width:160px}}.grid{display:grid;grid-template-columns:240px 1fr 240px;gap:18px}.card{background:var(--card);padding:18px;border-radius:14px;box-shadow:0 6px 18px #1018280f}.side-left,.side-right{position:sticky;top:28px}.card h2{margin:0 0 12px;font-size:16px}.small{color:var(--muted);font-size:13px}.blogs article{margin-bottom:12px;padding:14px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff)}.blogs h3{margin:0 0 6px}.pre.json{background:#0f172a;color:#e6eef8;padding:12px;border-radius:8px;overflow:auto;font-size:13px}form input,form textarea,form select{width:100%;padding:10px;border-radius:10px;border:1px solid #e6e9ef;margin-bottom:10px}form button{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer}.muted{color:var(--muted)}button{background:#1e88e5;color:#fff;border:0;padding:8px 12px;border-radius:10px}button.active{background:#0058a3}button:disabled{opacity:.6}.hobby-grid{display:flex;gap:12px;margin-top:8px}.hobby-column{flex:1}.hobby-column h3{margin:0 0 6px;font-size:14px}.hobby-column ul{margin:0;padding:0;list-style:none}.hobby-column li{margin-bottom:8px}.hobby-column a{color:var(--accent);text-decoration:none}.hobby-column a:hover{text-decoration:underline}.it-links{max-height:260px;overflow:auto;margin-top:8px}.it-links ul{margin:0;padding:0;list-style:none}.it-links li{padding:8px 0;border-bottom:1px solid #f0f3f7}.it-links a{color:var(--accent);text-decoration:none}.it-links a:hover{text-decoration:underline}@media (max-width: 900px){.grid{grid-template-columns:1fr}.side-left,.side-right{position:relative}.container{padding:16px}}