/* Typecho adapter only. The visual system itself is the original compiled Mizuki CSS bundled in /mizuki-assets/. */
:root{--page-bg:hsl(var(--hue),25%,93%);--card-bg:#fff;--primary:hsl(var(--hue),80%,55%);--radius-large:1rem;--enter-btn-bg:hsl(var(--hue),80%,94%);--enter-btn-bg-hover:hsl(var(--hue),80%,90%);--enter-btn-bg-active:hsl(var(--hue),80%,86%)}
html,body{margin:0;min-height:100%;background:var(--page-bg);font-family:Inter,"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}.dark{--page-bg:#101318;--card-bg:#181c22}.dark body{background:var(--page-bg);color:#e5e7eb}
.top-gradient-highlight{position:fixed;inset:0 0 auto;height:160px;pointer-events:none;z-index:1;background:linear-gradient(to bottom,rgba(255,255,255,.28),transparent)}
#top-row{position:absolute;top:0;left:0;right:0}.mizuki-banner{top:0;height:65vh;min-height:360px;max-height:610px}.banner-soft-mask{background:rgba(255,255,255,.20)}.dark .banner-soft-mask{background:rgba(0,0,0,.18)}
.banner-title-wrap{text-shadow:0 3px 8px rgba(0,0,0,.45);color:#fff;margin-top:-2vh}.banner-title{font-size:clamp(3rem,6.5vw,6.7rem);font-weight:800;letter-spacing:.06em;line-height:1}.banner-subtitle{font-size:clamp(1.1rem,2vw,2rem);margin-top:1.2rem;font-weight:500}.mizuki-wave{background:linear-gradient(to bottom,transparent 0%,rgba(238,247,251,.78) 55%,var(--page-bg) 100%)}.mizuki-content-spacer{height:calc(min(65vh,610px) - 3rem);min-height:330px}
#navbar{background:rgba(255,255,255,.10);backdrop-filter:blur(4px)}.dark #navbar{background:rgba(10,12,15,.15)}.mizuki-search{height:2.7rem;width:8.5rem;border:0;border-radius:.75rem;background:rgba(255,255,255,.32);padding:0 1rem;outline:none}.mizuki-search:focus{width:12rem;background:rgba(255,255,255,.72)}
.card-base{background:var(--card-bg)!important;border-radius:var(--radius-large)!important;box-shadow:0 1px 2px rgba(0,0,0,.015)}.mizuki-widget-title{font-weight:700;font-size:1.05rem;color:#171717;position:relative;margin:1rem 1rem .55rem 2rem}.mizuki-widget-title:before{content:"";position:absolute;left:-1rem;top:.35rem;width:.25rem;height:1rem;border-radius:.3rem;background:var(--primary)}.dark .mizuki-widget-title{color:#f5f5f5}
.mizuki-socials a{display:flex;align-items:center;justify-content:center}.mizuki-stat{display:flex;align-items:center;justify-content:space-between;padding:.45rem .75rem;border-radius:.6rem;color:#525252}.dark .mizuki-stat{color:#d4d4d4}.mizuki-stat strong{color:#171717}.dark .mizuki-stat strong{color:#fafafa}
.meta-icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.5rem;margin-right:.45rem;background:hsl(var(--hue),80%,94%);color:var(--primary)}.mizuki-excerpt{line-height:1.7}.mizuki-tags a{display:inline-flex;align-items:center;justify-content:center}
.page-navigator{display:flex;gap:.55rem;align-items:center}.page-navigator span>a,.page-navigator span>span{display:flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;padding:0 .7rem;border-radius:.65rem;background:#fff}.page-navigator .current>span{background:var(--primary);color:#fff}.dark .page-navigator span>a,.dark .page-navigator span>span{background:#181c22}
.cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:.15rem}.cal-head{font-size:.65rem;color:#a3a3a3;margin-bottom:.35rem}.cal-grid span{height:1.75rem;display:flex;align-items:center;justify-content:center;font-size:.78rem;border-radius:.4rem}.cal-grid .today{border:2px solid var(--primary);color:var(--primary);font-weight:700}
@media(max-width:1023px){.mizuki-content-spacer{height:calc(min(65vh,610px) - 1rem)}#sidebar{order:2}.right-sidebar-container{order:3}}
@media(max-width:767px){.mizuki-banner{height:52vh}.mizuki-content-spacer{height:calc(52vh - 1rem)}.banner-title{font-size:3.25rem}.banner-subtitle{font-size:1rem}.mizuki-post-card a.text-3xl{font-size:1.5rem!important}}

/* Mizuki typewriter */
.typewriter {
  position: relative;
  min-height: 1.5em;
  display: inline-block;
  vertical-align: baseline;
}
.typewriter:empty::before {
  content: "\00a0";
  visibility: hidden;
}

/* ===== Banner positioning: stable normal-flow Mizuki hero ===== */
/* The navbar overlays the hero, but the hero itself participates in document flow.
   This prevents the first row of cards from ever being hidden by the banner. */
#top-row{
  position:absolute!important;
  top:0;left:0;right:0;
  z-index:60;
}
#banner-wrapper.mizuki-banner{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  width:100%;
  height:clamp(360px,65vh,610px);
  min-height:0;
  max-height:none;
  z-index:10;
  overflow:hidden;
}
#banner-wrapper #banner-carousel{
  position:absolute;
  inset:0;
}
#banner-wrapper #banner-carousel > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
#banner-wrapper .banner-text-overlay{
  padding-top:4.5rem; /* visual compensation for overlay navbar */
}
#banner-wrapper .banner-soft-mask{pointer-events:none}
.mizuki-content-spacer,
.mizuki-banner-anchor{display:none!important}
.mizuki-main-shell{
  position:relative;
  z-index:30;
  margin-top:0;
  padding-top:1rem;
}
#main-grid{align-items:start}

/* Match the original Mizuki screenshot more closely: title is prominent but not gigantic. */
.banner-title{
  font-size:clamp(3rem,5vw,5.2rem);
  line-height:1.08;
}
.banner-subtitle{
  font-size:clamp(1.05rem,1.65vw,1.65rem);
  margin-top:1rem;
}

@media(max-width:767px){
  #banner-wrapper.mizuki-banner{
    height:clamp(320px,52vh,480px);
  }
  #banner-wrapper .banner-text-overlay{padding-top:4rem}
  .mizuki-main-shell{padding-top:.75rem}
  .banner-title{font-size:clamp(2.5rem,11vw,3.5rem)}
  .banner-subtitle{font-size:1rem}
}

/* ===== Mizuki-style Typecho comments ===== */
.comments-area{
  margin-top:1rem;
  padding:1.4rem 1.5rem 1.6rem;
  background:var(--card-bg);
  border-radius:var(--radius-large);
  color:#404040;
  overflow:hidden;
}
.dark .comments-area{color:#d4d4d4}
.comments-area>h2{
  position:relative;
  margin:.1rem 0 1.15rem;
  padding-left:1rem;
  font-size:1.1rem;
  line-height:1.6;
  font-weight:700;
  color:#171717;
}
.comments-area>h2:before{
  content:"";
  position:absolute;
  left:0;
  top:.35rem;
  width:.25rem;
  height:1rem;
  border-radius:.25rem;
  background:var(--primary);
}
.dark .comments-area>h2{color:#fafafa}
.comment-form{
  margin:0 0 1.7rem;
  padding:1rem;
  border:1px solid rgba(148,163,184,.20);
  border-radius:.9rem;
  background:rgba(248,250,252,.72);
}
.dark .comment-form{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08)}
.comment-form p{margin:.1rem 0 .8rem;color:#737373;font-size:.9rem}
.comment-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.comment-form input,.comment-form textarea{
  display:block;
  box-sizing:border-box;
  width:100%;
  border:1px solid rgba(148,163,184,.25);
  border-radius:.7rem;
  background:var(--card-bg);
  color:inherit;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.comment-form input{height:2.85rem;padding:0 .9rem;margin-bottom:.75rem}
.comment-form textarea{min-height:8rem;padding:.85rem .9rem;resize:vertical;line-height:1.7}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.comment-form button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:7.5rem;
  height:2.65rem;
  margin-top:.85rem;
  padding:0 1rem;
  border:0;
  border-radius:.7rem;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s,filter .15s;
}
.comment-form button:hover{filter:brightness(1.04);transform:translateY(-1px)}

/* Typecho's native listComments markup */
.comment-list,.comment-list ol{list-style:none;margin:0;padding:0}
.comment-list>li,.comment-list .comment-body{
  position:relative;
}
.comment-list>li{
  margin:0 0 .85rem;
  padding:1rem 1rem .9rem;
  border:1px solid rgba(148,163,184,.16);
  border-radius:.9rem;
  background:rgba(248,250,252,.55);
}
.dark .comment-list>li{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.07)}
.comment-list .comment-children{margin:.85rem 0 0 2.6rem;padding-left:.9rem;border-left:2px solid color-mix(in srgb,var(--primary) 24%,transparent)}
.comment-list .comment-children>li{margin-top:.7rem;padding:.85rem;border-radius:.8rem;background:color-mix(in srgb,var(--primary) 4%,var(--card-bg));border:1px solid color-mix(in srgb,var(--primary) 10%,transparent)}
.comment-list .comment-author{display:flex;align-items:center;min-height:2.7rem;padding-right:5rem;font-weight:700;color:#262626}
.dark .comment-list .comment-author{color:#f5f5f5}
.comment-list .comment-author .avatar{width:2.65rem;height:2.65rem;margin-right:.75rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent)}
.comment-list .comment-author cite{font-style:normal}
.comment-list .comment-author a{color:inherit;text-decoration:none}
.comment-list .comment-meta{margin:-.45rem 0 .65rem 3.4rem;font-size:.78rem;color:#a3a3a3}
.comment-list .comment-meta a{color:inherit;text-decoration:none}
.comment-list .comment-content{margin-left:3.4rem;line-height:1.8;overflow-wrap:anywhere;word-break:break-word}
.comment-list .comment-content p{margin:.35rem 0 .6rem}
.comment-list .comment-content img{max-width:100%;height:auto;border-radius:.65rem}
.comment-list .comment-content pre{max-width:100%;overflow:auto;padding:.8rem;border-radius:.65rem;background:rgba(15,23,42,.06);white-space:pre-wrap}
.dark .comment-list .comment-content pre{background:rgba(255,255,255,.06)}
.comment-list .comment-content code{overflow-wrap:anywhere;word-break:break-word}
.comment-list .comment-reply{position:absolute;right:.1rem;top:.1rem}
.comment-list .comment-reply a{
  display:inline-flex;
  align-items:center;
  height:2rem;
  padding:0 .7rem;
  border-radius:.55rem;
  background:hsl(var(--hue),80%,94%);
  color:var(--primary);
  font-size:.8rem;
  text-decoration:none;
}
.comment-list .comment-reply a:hover{background:hsl(var(--hue),80%,90%)}
.comment-list .comment-by-author>.comment-body:after,.comment-list>li.comment-by-author:after{content:"博主";display:inline-flex;margin-left:.45rem;padding:.08rem .4rem;border-radius:.35rem;background:var(--primary);color:#fff;font-size:.68rem;vertical-align:middle}
.comment-page .page-navigator{justify-content:center;margin-top:1rem}
.comment-page ol{list-style:none;display:flex;justify-content:center;gap:.45rem;padding:0}
.comment-page li a,.comment-page li span{display:flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 .55rem;border-radius:.6rem;background:hsl(var(--hue),80%,94%);color:var(--primary);text-decoration:none}
.comment-page li.current a,.comment-page li.current span{background:var(--primary);color:#fff}
@media(max-width:640px){
  .comments-area{padding:1rem}
  .comment-form{padding:.85rem}
  .comment-form .form-row{grid-template-columns:1fr;gap:0}
  .comment-list .comment-children{margin-left:.7rem;padding-left:.65rem}
  .comment-list .comment-author{padding-right:0}
  .comment-list .comment-meta,.comment-list .comment-content{margin-left:0}
  .comment-list .comment-meta{margin-top:.3rem}
  .comment-list .comment-reply{position:static;margin-top:.65rem;text-align:right}
}