/* CaelbertChae.com — Personal Index V2.13 */
:root {
      --bg-a:#fff;
      --bg-b:#fbfbfd;
      --glow:rgba(180,190,205,.10);
      --ink:#1d1d1f;
      --muted:#6e6e73;
      --soft:#86868b;
      --brand:#0354fc;
      --line:rgba(29,29,31,.11);
      --panel:rgba(255,255,255,.88);
      --panel-solid:#fff;
      --shadow:0 24px 80px rgba(0,0,0,.07);
    }
    html[data-period="morning"] { --bg-a:#fffaf2; --bg-b:#f8f3ea; --glow:rgba(231,184,112,.17); --panel-solid:#fffaf2; }
    html[data-period="day"] { --bg-a:#fff; --bg-b:#fbfbfd; --glow:rgba(180,190,205,.10); --panel-solid:#fff; }
    html[data-period="evening"] { --bg-a:#faedd8; --bg-b:#e9cb94; --glow:rgba(202,139,54,.20); --panel-solid:#f8e7c8; }
    html[data-period="night"] {
      color-scheme:dark;
      --bg-a:#000;
      --bg-b:#1c1c1e;
      --glow:rgba(255,255,255,.04);
      --ink:#f5f5f7;
      --muted:#a1a1a6;
      --soft:#86868b;
      --line:rgba(245,245,247,.14);
      --panel:rgba(28,28,30,.88);
      --panel-solid:#1c1c1e;
      --shadow:0 24px 80px rgba(0,0,0,.32);
    }
    * { box-sizing:border-box; }
    html { min-width:1080px; min-height:100%; scroll-behavior:smooth; }
    body {
      min-width:1080px;
      min-height:100vh;
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(circle at 16% 18%, var(--glow), transparent 38%),
        linear-gradient(135deg,var(--bg-a),var(--bg-b));
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
      transition:background .35s ease,color .35s ease;
    }
    a,button { color:inherit; font:inherit; }
    a { text-decoration:none; }
    button { border:0; }
    [hidden] { display:none !important; }
    .shell { width:100%; max-width:1280px; margin:0 auto; padding:0 48px; }

    .site-header {
      position:sticky;
      top:0;
      z-index:30;
      height:38px;
      display:flex;
      align-items:center;
      border-bottom:1px solid var(--line);
      background:color-mix(in srgb,var(--panel) 84%,transparent);
      backdrop-filter:blur(18px) saturate(140%);
      -webkit-backdrop-filter:blur(18px) saturate(140%);
    }
    .header-inner { display:flex; align-items:center; justify-content:space-between; }
    .brand { display:flex; align-items:center; gap:9px; color:var(--soft); font-size:15px; font-weight:400; }
    .brand:hover { color:var(--ink); }
    .brand-logo { width:24px; height:24px; display:block; }
    .primary-nav { display:flex; align-items:center; gap:29px; color:var(--muted); font-size:14px; font-weight:500; }
    .primary-nav a:hover { color:var(--ink); }

    .local-nav {
      position:sticky;
      top:38px;
      z-index:20;
      border-bottom:1px solid var(--line);
      background:color-mix(in srgb,var(--panel) 78%,transparent);
      backdrop-filter:blur(16px) saturate(130%);
      -webkit-backdrop-filter:blur(16px) saturate(130%);
    }
    .local-nav-inner { height:46px; display:flex; align-items:center; }
    .local-title { margin-right:auto; font-size:13px; font-weight:600; letter-spacing:.01em; }
    .local-links { display:flex; align-items:center; gap:24px; }
    .local-links a { position:relative; padding:15px 0 14px; color:var(--muted); background:none; cursor:pointer; font-size:12px; }
    .local-links a:hover,.local-links a.active { color:var(--ink); }
    .local-links a.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--ink); }

    main { min-height:calc(100vh - 84px); }
    .page-view { min-height:calc(100vh - 84px); padding:86px 0 122px; }
    .page-head { display:grid; grid-template-columns:220px minmax(0,760px); justify-content:center; gap:72px; align-items:start; }
    .eyebrow { margin:9px 0 0; color:var(--brand); font-size:12px; font-weight:650; letter-spacing:.11em; text-transform:uppercase; }
    h1 { margin:0; max-width:780px; font-size:68px; line-height:.98; letter-spacing:-.05em; font-weight:650; }
    .lead { max-width:720px; margin:34px 0 0; color:var(--muted); font-family:Georgia,"Times New Roman","Songti SC","STSong",serif; font-size:25px; line-height:1.55; }
    .updated { margin:24px 0 0; color:var(--soft); font-size:12px; letter-spacing:.025em; }
    .content-grid { display:grid; grid-template-columns:220px minmax(0,760px); justify-content:center; gap:72px; margin-top:72px; }
    .rail { align-self:start; position:sticky; top:116px; }
    .rail-label { margin:0 0 13px; color:var(--soft); font-size:11px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; }
    .rail a { display:block; padding:6px 0; color:var(--muted); font-size:13px; }
    .rail a:hover { color:var(--ink); }
    .sections { min-width:0; }
    .section { padding:34px 0 42px; border-top:1px solid var(--line); }
    .section:first-child { padding-top:0; border-top:0; }
    .section h2 { margin:0 0 15px; font-size:27px; line-height:1.18; letter-spacing:-.025em; }
    .section h3 { margin:0 0 6px; font-size:15px; line-height:1.35; }
    .section p { margin:0 0 14px; color:var(--muted); font-size:15px; line-height:1.75; }
    .section p:last-child { margin-bottom:0; }
    .section a { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
    .cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; }
    .card { min-height:155px; padding:22px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--panel) 72%,transparent); }
    .card-index { display:block; margin-bottom:37px; color:var(--brand); font-size:11px; font-weight:650; letter-spacing:.08em; }
    .card p { margin:0; font-size:13px; line-height:1.55; }

    .status-list { margin:0; padding:0; list-style:none; }
    .status-row { display:grid; grid-template-columns:145px 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--line); }
    .status-row:first-child { border-top:0; padding-top:0; }
    .status-key { color:var(--ink); font-size:14px; font-weight:600; }
    .status-copy { color:var(--muted); font-size:15px; line-height:1.7; }

    .timeline { position:relative; margin-top:4px; }
    .timeline::before { content:""; position:absolute; left:111px; top:8px; bottom:8px; width:1px; background:var(--line); }
    .timeline-item { position:relative; display:grid; grid-template-columns:96px 1fr; gap:42px; padding:0 0 46px; }
    .timeline-item:last-child { padding-bottom:0; }
    .timeline-year { color:var(--soft); font-size:10px; line-height:1.35; font-weight:650; letter-spacing:.075em; white-space:nowrap; }
    .timeline-copy::before { content:""; position:absolute; left:107px; top:5px; width:9px; height:9px; border:2px solid var(--brand); border-radius:50%; background:var(--panel-solid); }
    .timeline-copy h2 { margin:-3px 0 9px; font-size:21px; letter-spacing:-.015em; }
    .timeline-copy p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }

    .spec-list { border-top:1px solid var(--line); }
    .spec-row { display:grid; grid-template-columns:180px 1fr; gap:28px; padding:18px 0; border-bottom:1px solid var(--line); }
    .spec-row dt { font-size:13px; font-weight:600; }
    .spec-row dd { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }

    .error-view { display:grid; place-items:center; min-height:calc(100vh - 84px); padding:52px 48px 110px; text-align:center; overflow:hidden; }
    .error-scene { position:relative; width:680px; height:214px; margin:0 auto 12px; }
    .error-art { width:100%; height:100%; overflow:visible; }
    .error-guide { fill:none; stroke:var(--line); stroke-width:1; stroke-linecap:round; }
    .error-route { fill:none; stroke:var(--brand); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:10 12; animation:route-flow 9s linear infinite; }
    .error-node { fill:var(--panel-solid); stroke:var(--brand); stroke-width:2; }
    .error-node-core { fill:var(--brand); }
    .error-dead-end { fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; opacity:.72; }
    .error-home { fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.82; }
    .error-question { fill:var(--brand)!important; font-size:20px!important; font-weight:700!important; letter-spacing:0!important; }
    .error-spark { fill:var(--brand); transform-box:fill-box; transform-origin:center; animation:spark-pulse 2.8s ease-in-out infinite; }
    .error-traveler { fill:var(--panel-solid); stroke:var(--brand); stroke-width:3; filter:drop-shadow(0 4px 8px rgba(3,84,252,.22)); }
    .error-art text { fill:var(--soft); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:10px; font-weight:650; letter-spacing:.14em; }
    @keyframes route-flow { to { stroke-dashoffset:-220; } }
    @keyframes spark-pulse { 0%,100% { opacity:.35; transform:scale(.82); } 50% { opacity:1; transform:scale(1.12); } }
    .error-mark { margin:0; color:var(--brand); font-size:13px; font-weight:650; letter-spacing:.12em; }
    .error-code { margin:13px 0 0; font-size:148px; line-height:.88; letter-spacing:-.08em; font-weight:700; }
    .error-title { margin:27px 0 0; font-family:Georgia,"Times New Roman","Songti SC","STSong",serif; font-size:31px; line-height:1.35; font-weight:400; }
    .error-copy { max-width:540px; margin:17px auto 0; color:var(--muted); font-size:14px; line-height:1.7; }
    .error-actions { display:flex; justify-content:center; gap:10px; margin-top:31px; }
    .button { padding:10px 18px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--panel) 78%,transparent); cursor:pointer; font-size:13px; }
    .button.primary { border-color:var(--brand); color:#fff; background:var(--brand); }

    .site-footer { padding:0 0 78px; color:var(--soft); font-size:11px; }
    .footer-inner { padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; gap:18px; }
    .footer-legal { display:flex; align-items:center; }
    .footer-legal a { position:relative; padding:0 9px; color:var(--soft); }
    .footer-legal a:first-child { padding-left:0; }
    .footer-legal a+a::before { content:""; position:absolute; left:0; top:50%; width:1px; height:11px; background:var(--line); transform:translateY(-50%); }
    .footer-language { margin-left:auto; display:flex; align-items:center; }
    .footer-language button { position:relative; padding:0 8px; color:var(--soft); background:none; cursor:pointer; font-size:11px; }
    .footer-language button.active { color:var(--ink); font-weight:600; }
    .footer-language button+button::before { content:""; position:absolute; left:0; top:50%; width:1px; height:11px; background:var(--line); transform:translateY(-50%); }

    @media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }
.primary-nav button { padding:0; color:inherit; background:none; cursor:pointer; }
    .primary-nav a,.primary-nav button { transition:color .18s ease; }
    .primary-nav a:hover,.primary-nav button:hover { color:var(--ink); }

    .modal {
      position:fixed; inset:0; z-index:80; display:none; place-items:center; padding:24px;
      background:rgba(0,0,0,.38); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
    }
    .modal.open { display:grid; }
    .dialog {
      width:360px; padding:26px; border:1px solid var(--line); border-radius:18px;
      background:var(--panel-solid); box-shadow:0 22px 60px rgba(0,0,0,.18); text-align:left;
    }
    .dialog h2 { margin:0 0 7px; font-size:20px; }
    .dialog p { margin:0 0 22px; color:var(--muted); font-size:14px; }
    .dialog input {
      width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:11px;
      color:var(--ink); background:transparent; outline:none;
    }
    .actions { margin-top:22px; display:flex; justify-content:flex-end; gap:10px; }
    .actions button { padding:9px 16px; border-radius:10px; background:transparent; cursor:pointer; }
    .actions .submit { color:#fff; background:#0071e3; }
    .sr-only {
      position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
      clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }
    body.modal-open { overflow:hidden; }