*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --canvas:#faf9f5;
  --surface-card:#efe9de;
  --surface-soft:#f5f0e8;
  --hairline:#e6dfd8;
  --ink:#141413;
  --body:#3d3d3a;
  --body-strong:#252523;
  --muted:#6c6a64;
  --muted-soft:#8e8b82;
  --primary:#cc785c;
  --primary-active:#a9583e;
  --on-primary:#fff;
  --accent-teal:#5db8a6;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-pill:9999px;
  --bg-glow:rgba(204,120,92,0.03);
  --card-shadow:0 2px 8px rgba(20,20,19,0.04),0 12px 40px rgba(20,20,19,0.06);
  --card-shadow-hover:0 4px 16px rgba(20,20,19,0.06),0 16px 48px rgba(20,20,19,0.08);
}

[data-theme="dark"]{
  --canvas:#161618;
  --surface-card:#232326;
  --surface-soft:#1e1e21;
  --hairline:#2e2e32;
  --ink:#eae8e4;
  --body:#a8a59e;
  --body-strong:#d2cfc8;
  --muted:#6e6b64;
  --muted-soft:#504e48;
  --primary:#d4856a;
  --primary-active:#e09a82;
  --accent-teal:#6cc4b2;
  --bg-glow:rgba(212,133,106,0.04);
  --card-shadow:0 2px 8px rgba(0,0,0,0.2),0 12px 40px rgba(0,0,0,0.15);
  --card-shadow-hover:0 4px 16px rgba(0,0,0,0.25),0 16px 48px rgba(0,0,0,0.2);
}

html{height:100%}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--canvas);color:var(--ink);
  min-height:100%;display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}

body::before{
  content:'';position:fixed;
  top:-30%;left:-10%;width:120%;height:120%;
  background:radial-gradient(ellipse at 50% 40%,var(--bg-glow) 0%,transparent 60%);
  animation:bgPulse 10s ease-in-out infinite alternate;
  pointer-events:none;z-index:0;
}

@keyframes bgPulse{0%{opacity:.3;transform:scale(1)}100%{opacity:1;transform:scale(1.05)}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ====== Loading ====== */
.loading-mask{
  position:fixed;inset:0;z-index:9999;
  background:var(--canvas);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .4s ease;
}
.loading-mask.hidden{opacity:0;pointer-events:none}
.loading-spinner{width:28px;height:28px;border:2px solid var(--hairline);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}

/* ====== Page ====== */
.page{
  position:relative;z-index:10;
  width:100%;max-width:880px;
  padding:32px 24px;
  display:flex;flex-direction:column;gap:20px;
}

/* ====== Info Strip ====== */
.info-strip{
  display:flex;align-items:baseline;justify-content:center;
  flex-wrap:wrap;gap:6px;
  font-size:14px;color:var(--muted);font-weight:400;
  opacity:0;animation:fadeSlideUp .6s .05s cubic-bezier(.16,1,.3,1) forwards;
}
.strip-time{
  font-variant-numeric:tabular-nums;
  font-weight:500;color:var(--muted);
  letter-spacing:.5px;
}
.strip-sep{color:var(--hairline);margin:0 2px}

/* ====== Main Card ====== */
.main-card{
  display:grid;
  grid-template-columns:1.1fr 1px 1fr;
  gap:0;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--radius-xl);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  opacity:0;animation:fadeSlideUp .7s .15s cubic-bezier(.16,1,.3,1) forwards;
}

.card-left{
  padding:48px 40px;
  display:flex;flex-direction:column;justify-content:center;
}

.site-name{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(40px,5.5vw,58px);
  font-weight:500;line-height:1.05;
  letter-spacing:-1.5px;color:var(--ink);
  margin-bottom:16px;white-space:nowrap;
}

.slogan{
  font-size:17px;color:var(--muted);
  letter-spacing:-.2px;margin-bottom:32px;
}

.greeting-line{
  margin-bottom:24px;
}
.greeting-text{
  display:inline-block;
  font-size:16px;font-weight:600;
  color:var(--primary);
  background:rgba(204,120,92,0.08);
  padding:6px 16px;border-radius:var(--radius-pill);
}
[data-theme="dark"] .greeting-text{
  background:rgba(212,133,106,0.12);
}

.hitokoto-block{
  border-left:2px solid var(--hairline);
  padding-left:18px;
}
.hitokoto-text{
  font-size:16px;line-height:1.75;
  color:var(--body-strong);
  font-style:italic;
  transition:opacity .3s;
}
.hitokoto-text.fading{opacity:0}
.hitokoto-from{
  font-size:13px;color:var(--muted-soft);
  margin-top:8px;font-style:normal;
}

/* Divider */
.card-divider{
  background:var(--hairline);
}

/* Right */
.card-right{
  padding:44px 36px;
  display:flex;flex-direction:column;justify-content:center;gap:32px;
}

.section-label{
  font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted-soft);
  margin-bottom:10px;
}

.link-stack{display:flex;flex-direction:column;gap:8px}

.link-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:var(--radius-md);
  text-decoration:none;color:var(--ink);
  transition:all .2s cubic-bezier(.16,1,.3,1);
}
.link-item:hover{
  background:var(--surface-soft);
  padding-left:18px;
}
.link-item:active{transform:scale(.98)}
.link-icon{font-size:16px;width:24px;text-align:center;flex-shrink:0}
.link-text{font-size:15px;font-weight:500;flex:1}
.link-arrow{
  font-size:14px;color:var(--muted-soft);
  transition:color .2s,transform .2s;
  transform:translateX(-4px);opacity:0;
}
.link-item:hover .link-arrow{
  color:var(--primary);
  transform:translateX(0);opacity:1;
}

.social-row{display:flex;gap:8px}
.social-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--radius-md);
  background:var(--surface-soft);
  color:var(--muted);text-decoration:none;
  transition:all .2s cubic-bezier(.16,1,.3,1);
}
.social-btn:hover{
  background:var(--surface-card);
  color:var(--ink);transform:translateY(-1px);
}
.social-btn:active{transform:scale(.95)}
.social-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.social-btn svg.fill-icon{fill:currentColor;stroke:none}

/* ====== Footer ====== */
.footer{
  display:flex;justify-content:space-between;align-items:center;
  padding-left:40px;padding-right:36px;
  font-size:13px;color:var(--muted);
  opacity:0;animation:fadeSlideUp .6s .3s cubic-bezier(.16,1,.3,1) forwards;
}
.footer a{color:var(--muted);text-decoration:none;transition:color .2s}
.footer a:hover{color:var(--primary)}

.theme-btn{
  width:28px;height:28px;border-radius:6px;border:none;
  background:var(--surface-soft);color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,transform .15s;flex-shrink:0;
}
.theme-btn:hover{background:var(--surface-card);color:var(--ink);transform:scale(1.1)}
.theme-btn:active{transform:scale(.9)}
.theme-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ====== Responsive ====== */
@media(max-width:768px){
  .page{padding:24px 16px}
  .main-card{
    grid-template-columns:1fr;
    border-radius:var(--radius-lg);
  }
  .card-divider{
    height:1px;width:100%;
  }
  .card-left{padding:28px 24px}
  .card-right{padding:24px}
  .site-name{font-size:clamp(32px,10vw,44px)}
  .info-strip{font-size:12px;gap:4px}
  .footer{flex-direction:column;gap:10px;text-align:center;padding-left:0;padding-right:0}
  .footer-text{order:2}
  .theme-btn{order:1}
}

@media(max-width:480px){
  .page{padding:16px 12px}
  .card-left{padding:24px 20px}
  .card-right{padding:20px}
  .site-name{font-size:32px}
  .strip-sep{display:none}
  .info-strip{gap:8px}
}