/* SPW Journal — shared presentation layer; original Halo bindings stay intact. */
:root {
  --spw-navy: #10263f; --spw-paper: #f8f1e2; --spw-cream: #f3e7cf; --spw-gold: #c59439;
  --spw-ink: #142b40; --spw-muted: #667178; --spw-rule: #dacdb6;
  --spw-accent: oklch(.4 .11 var(--hue)); --spw-accent-soft: oklch(.92 .035 var(--hue));
  --primary: var(--spw-accent); --page-bg: #f2ebdd; --card-bg: var(--spw-paper); --float-panel-bg: #fcf8ef;
  --btn-content: var(--spw-accent); --btn-regular-bg: var(--spw-accent-soft);
  --btn-regular-bg-hover: oklch(.87 .045 var(--hue)); --btn-regular-bg-active: oklch(.82 .06 var(--hue));
  --btn-plain-bg-hover: var(--spw-accent-soft); --btn-plain-bg-active: #e9dfcc;
  --btn-card-bg-hover: #eee4d2; --btn-card-bg-active: #e5d7bf;
  --enter-btn-bg: transparent; --enter-btn-bg-hover: var(--spw-accent-soft); --enter-btn-bg-active: #e9dfcc;
  --radius-large: 6px; --selection-bg: #e8cfb6;
}
:root.dark {
  --spw-navy: #080B12; --spw-paper: #10141e; --spw-ink: #f1e7d5; --spw-muted: #b3b9b9; --spw-rule: #41505b;
  --spw-accent: oklch(.78 .095 var(--hue)); --spw-accent-soft: oklch(.29 .025 var(--hue));
  --primary: var(--spw-accent); --card-bg: var(--spw-paper); --btn-content: var(--spw-accent);
  --btn-regular-bg: var(--spw-accent-soft); --btn-plain-bg-hover: var(--spw-accent-soft);
  --enter-btn-bg: transparent; --enter-btn-bg-hover: var(--spw-accent-soft);
  --page-bg: #080B12; --float-panel-bg: #10141e; --btn-regular-bg-hover: #334356; --btn-regular-bg-active: #3a4b5e;
  --btn-plain-bg-active: #344256; --btn-card-bg-hover: #24394a; --btn-card-bg-active: #304557;
  --enter-btn-bg-active: #344256; --selection-bg: #5a4145;
}
html { scroll-behavior: auto; background: var(--page-bg); }
body { margin: 0; color: var(--spw-ink); background: var(--page-bg); font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; isolation: isolate; overflow-x: clip; }
#spw-content { position: relative; z-index: 1; min-height: 100svh; padding-top: 72px; outline: none; }
.spw-ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; transform: translate(var(--spw-pointer-x, 0px), var(--spw-pointer-y, 0px)); }
.spw-ambient::before, .spw-ambient::after { content: ''; position: absolute; inset: -25%; will-change: transform; }
.spw-ambient::before { background: radial-gradient(ellipse at 12% 30%, #10263f20, transparent 48%), radial-gradient(ellipse at 80% 65%, #862d3215, transparent 50%); animation: spw-ink-drift 24s ease-in-out infinite alternate; }
.spw-ambient::after { background: linear-gradient(118deg, transparent 42%, #c5943912 49%, transparent 57%); animation: spw-light-drift 32s ease-in-out infinite alternate; }
.dark .spw-ambient::before, .dark .spw-ambient::after { background: none; }
html[data-spw-bg-paused] .spw-ambient::before, html[data-spw-bg-paused] .spw-ambient::after { animation-play-state: paused; }
@keyframes spw-ink-drift { from { transform: translate(-3%, -2%) scale(1); } to { transform: translate(9%, 6%) scale(1.08); } }
@keyframes spw-light-drift { from { transform: translateX(-9%) rotate(-4deg); } to { transform: translateX(12%) rotate(5deg); } }
#top-row { position: fixed !important; top: 0; left: 0; right: 0; height: auto !important; max-width: none; padding: 0; background: var(--spw-navy); z-index: 60; }
#navbar-wrapper { position: relative !important; top: 0 !important; transform: none !important; translate: none !important; opacity: 1 !important; pointer-events: auto !important; }
#navbar { border-bottom: 1px solid #c5943955; }
#navbar > .absolute { display: none; }
#navbar > .card-base { max-width: 1240px; height: 72px; border-radius: 0; background: var(--spw-navy); color: var(--spw-cream); padding-inline: 20px; }
#navbar a, #navbar button { color: var(--spw-cream); }
#navbar a > div { color: inherit; }
#navbar > .card-base > a { padding-left: 12px; padding-right: 32px; }
#navbar > .card-base > a > div { font: 750 29px/1 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; }
#navbar > .card-base > a .icon-\[tabler--smart-home\] { display: none; }
#navbar { --btn-plain-bg-hover: #ffffff12; --btn-plain-bg-active: #ffffff1c; --btn-content: var(--spw-cream); }
#navbar .btn-plain:is(:hover, :active, :focus-visible) { background: #ffffff12; color: var(--spw-cream); }
#navbar a[aria-current=page] { background: #ffffff08; color: var(--spw-cream); box-shadow: inset 0 -2px 0 var(--spw-gold); }
#navbar #display-settings-switch[aria-expanded=true] { background: #ffffff16; box-shadow: inset 0 -2px 0 var(--spw-gold); color: var(--spw-cream); }
#navbar .btn-plain:focus-visible { outline: 2px solid var(--spw-gold); outline-offset: -3px; }
#navbar input:not([type=range]) { border: 1px solid #c5943970; background: #ffffff08; color: var(--spw-cream); border-radius: 5px; }
#navbar input:not([type=range])::placeholder { color: #f3e7cfa3; }
#navbar [class*="search"] > span, #navbar .icon-\[material-symbols--search\] { color: #f3e7cfb3; }
#navbar .search-panel, #navbar #display-setting, #navbar #nav-menu-panel, #navbar #light-dark-panel { background: var(--float-panel-bg); color: var(--spw-ink); border: 1px solid var(--spw-rule); border-radius: 7px; }
#navbar .search-panel a, #navbar #display-setting button, #navbar #nav-menu-panel a, #navbar #light-dark-panel button { color: var(--spw-ink); }
#navbar #nav-menu-panel a:is(:hover, :active, [aria-current=page]), #navbar #light-dark-panel button:is(:hover, :active), #navbar #display-setting button:is(:hover, :active) { background: var(--spw-accent-soft); color: var(--spw-ink); }
body[data-spw-journey-view] #top-row { visibility: hidden; pointer-events: none; }
body[data-spw-journey] #banner-wrapper { display: none; }
body[data-spw-journey] #spw-content { border-top: 1px solid var(--spw-rule); }
#banner-wrapper { position: relative !important; top: auto !important; height: auto !important; translate: none !important; max-width: 1200px; margin: 28px auto 0; overflow: hidden; border: 1px solid #b7894d; border-radius: 3px; z-index: 10; }
#banner { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; height: auto !important; min-height: 330px; padding: 29px 34px; gap: 44px; opacity: 1 !important; transform: none !important; translate: none !important; background: oklch(.34 .095 var(--hue)); color: var(--spw-cream); }
#banner::before, #banner::after { content: ''; position: absolute; left: 12px; right: 12px; height: 8px; background: repeating-linear-gradient(90deg, var(--spw-cream) 0 11px, transparent 11px 27px); opacity: .6; pointer-events: none; }
#banner::before { top: 10px; } #banner::after { bottom: 10px; }
#banner > .pointer-events-none { display: none; }
#banner > img { position: relative; width: 100%; height: 268px; object-fit: cover; border: 1px solid #f3e7cf99; box-shadow: 5px 5px 0 #10263f45; }
.spw-hero-copy { position: relative; padding: 13px 0; }
.spw-hero-eyebrow { display: flex; align-items: center; gap: 15px; color: #ead0a1; font: 10px/1.5 Consolas, monospace; letter-spacing: .18em; }
.spw-hero-eyebrow::before { content: ''; width: 30px; height: 1px; background: currentColor; }
.spw-hero-copy .spw-hero-title { margin: 18px 0 16px; white-space: pre-line; font: 700 clamp(30px, 3.5vw, 46px)/1.35 'Noto Serif SC', 'Songti SC', SimSun, serif; letter-spacing: -.02em; }
.spw-hero-copy > p:last-child { font-size: 13px; line-height: 1.8; color: #f3e7cfcc; letter-spacing: .04em; }
body:not([class~="lg:is-home"]) #banner-wrapper { display: none; }
#main-panel-wrapper { position: relative !important; top: auto !important; margin: 30px auto 0; z-index: 20; }
#main-grid { grid-template-columns: 245px minmax(0, 1fr); gap: 36px; padding: 0 0 20px; max-width: 1200px; translate: none !important; }
#sidebar { max-width: none; padding-right: 25px; border-right: 1px solid var(--spw-rule); }
#sidebar .card-base { background: transparent; padding: 10px 0 18px; border-radius: 0; border-bottom: 1px solid var(--spw-rule); }
#sidebar a[aria-label=Profile] { width: 100px; margin: 0 0 15px; border: 1px solid #c5943980; border-radius: 50%; overflow: hidden; }
#sidebar a[aria-label=Profile] .aspect-square { border-radius: 50%; }
#sidebar .px-2 { padding-inline: 0; }
#sidebar .text-center { text-align: left; }
#sidebar .text-xl { font: 700 25px/1.4 Georgia, 'Noto Serif SC', SimSun, serif; color: var(--spw-ink); }
#sidebar .mx-auto.h-1 { display: none; }
#sidebar .text-neutral-400 { color: var(--spw-muted); font-size: 13px; line-height: 1.9; }
#sidebar-sticky { gap: 22px; }
#sidebar-sticky > .card-base { padding-top: 0; }
#sidebar-sticky .text-lg { font-size: 15px; color: var(--spw-ink); }
#sidebar .btn-plain { color: var(--spw-ink); font-size: 13px; }
#sidebar .btn-regular { border-radius: 4px; }
#sidebar a[aria-label=Profile] img { transition: transform .6s ease; }
#sidebar a[aria-label=Profile]:hover img { transform: scale(1.04); }
#content-wrapper article.card-base { background: transparent; border-radius: 0; border-bottom: 1px solid var(--spw-rule); }
.spw-index-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--spw-rule); padding: 4px 0 18px; margin-bottom: 4px; }
.spw-index-heading p { font: 9px/1.5 Consolas, monospace; letter-spacing: .18em; color: var(--spw-muted); margin-bottom: 7px; }
.spw-index-heading h2 { font: 700 21px/1.4 'Noto Serif SC', SimSun, serif; color: var(--spw-ink); }
.spw-index-heading a { color: var(--spw-accent); font-size: 11px; padding-block: 5px; white-space: nowrap; }
#content-wrapper article.card-base > div:first-child { padding: 22px 10px 25px 0; }
#content-wrapper article.card-base > div:first-child > a:first-child { font-family: 'Noto Serif SC', 'Songti SC', SimSun, serif; font-size: 26px; line-height: 1.5; letter-spacing: -.015em; color: var(--spw-ink); }
#content-wrapper article.card-base > div:first-child > a:first-child::before { display: none; }
#content-wrapper article.card-base > div:first-child > a:first-child:hover { color: var(--spw-accent); }
#content-wrapper article.card-base .text-neutral-500, #content-wrapper article.card-base .text-50 { color: var(--spw-muted); }
#content-wrapper article.card-base .meta-icon { background: transparent; width: auto; margin-right: 7px; color: var(--spw-accent); }
#content-wrapper article.card-base .meta-icon > span { font-size: 16px; }
#content-wrapper article.card-base .text-75 { color: var(--spw-muted); font-size: 14px; line-height: 1.9; }
#content-wrapper article.card-base.has-cover { min-height: 190px; }
#content-wrapper article.card-base.has-cover > div:first-child { margin-left: 215px; width: calc(100% - 215px) !important; }
#content-wrapper article.card-base.has-cover > a:last-child { left: 0; right: auto; top: 23px; bottom: 25px; width: 190px; border-radius: 3px; }
#content-wrapper article.card-base.no-cover > div:first-child { width: calc(100% - 48px) !important; }
#content-wrapper article.card-base.no-cover > a:last-child { width: 40px; top: 28px; bottom: 28px; right: 0; border-radius: 3px; }
#content-wrapper > .card-base, #post-container, #comment { border-radius: 6px; }
#post-container { border: 1px solid var(--spw-rule); padding: 30px 34px; }
#content-wrapper #post-container { background: var(--spw-paper); }
#post-container h1 { font-family: 'Noto Serif SC', 'Songti SC', SimSun, serif; line-height: 1.45; color: var(--spw-ink); }
.custom-md { line-height: 1.95; }
.custom-md a, .custom-md h2, .custom-md h3 { color: var(--spw-accent); }
.custom-md :is(h2, h3, h4) { scroll-margin-top: 96px; }
.custom-md pre { border-radius: 5px; }
#toc-container { z-index: 40; }
#toc a { border-radius: 3px; }
.footer > div:first-child { border-color: var(--spw-rule); border-style: solid; margin-block: 24px; }
.footer footer { color: var(--spw-muted); font-size: 11px; line-height: 1.8; }
:focus-visible { outline: 2px solid var(--spw-accent); outline-offset: 4px; }
@media (max-width: 1270px) { #banner-wrapper { width: calc(100% - 56px); margin-inline: 28px; } #main-grid { padding-inline: 28px; } }
@media (max-width: 1023px) {
  #main-grid { display: flex; flex-direction: column; gap: 28px; }
  #main-grid > main { order: 1; width: 100%; }
  #main-grid > .footer { order: 3; }
  #sidebar { order: 2; width: 100%; border-right: 0; border-top: 1px solid var(--spw-rule); padding: 22px 0 0; }
  #sidebar > div:first-child > .card-base { min-height: 130px; padding-left: 118px; position: relative; }
  #sidebar a[aria-label=Profile] { position: absolute; left: 0; top: 10px; }
  #sidebar-sticky { position: static; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  #banner { gap: 25px; padding: 27px; min-height: 300px; }
  #banner > img { height: 235px; }
}
@media (max-width: 767px) {
  #spw-content { padding-top: 64px; }
  #navbar > .card-base { height: 64px; padding-inline: 8px; }
  #navbar > .card-base > a { padding: 0 14px; }
  #navbar > .card-base > a > div { font-size: 26px; }
  #banner-wrapper { width: calc(100% - 32px); margin: 18px 16px 0; }
  #banner { grid-template-columns: 1fr; gap: 22px; padding: 27px 23px; min-height: 0; }
  #banner > img { height: 185px; }
  .spw-hero-copy { padding: 0 0 7px; }
  .spw-hero-copy .spw-hero-title { font-size: 32px; line-height: 1.45; margin: 14px 0 12px; }
  .spw-hero-copy > p:last-child { font-size: 12px; }
  #main-panel-wrapper { margin-top: 22px; }
  #main-grid { padding-inline: 19px; }
  #content-wrapper article.card-base > div:first-child { padding: 19px 0 22px; }
  #content-wrapper article.card-base > div:first-child > a:first-child { font-size: 23px; margin-bottom: 13px; }
  #content-wrapper article.card-base.has-cover > div:first-child, #content-wrapper article.card-base.no-cover > div:first-child { width: 100% !important; margin: 0; }
  #content-wrapper article.card-base.has-cover > a:last-child { position: relative; inset: auto; width: 100%; max-height: 200px; margin: 0 0 0; border-radius: 3px; }
  #content-wrapper article.card-base.has-cover > a:last-child img { width: 100%; height: 200px; }
  #content-wrapper > div { background: transparent; }
  #sidebar-sticky { gap: 22px; }
  #sidebar a[aria-label=Profile] { width: 84px; }
  #sidebar > div:first-child > .card-base { padding-left: 102px; }
  #sidebar .text-xl { font-size: 23px; }
  #post-container { padding: 22px 18px; }
  .custom-md { overflow-wrap: anywhere; }
  .custom-md pre { overflow-wrap: normal; }
  .footer footer { margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .spw-ambient::before, .spw-ambient::after { animation: none; will-change: auto; }
  .spw-ambient { transform: none; }
  #spw-content *, #spw-content *::before, #spw-content *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: 0s !important; }
}

/* Visible template credits removed; upstream license files are retained. */
.footer { display: none !important; }

/* Protect reading contrast over the full-strength centered particle field. */
html.dark body:has(spw-starflow[data-active]) #main-grid { text-shadow: 0 1px 3px #080b12, 0 0 8px #080b12, 0 0 16px #080b12; }

/* Transparent layouts with protection only around reading content. */
:root { --spw-veil:#fcf8f1ce; --spw-veil-soft:#f8f1e270; --spw-reading-copy:#3f4c56; --spw-reader:#fcf8f1f2; }
:root.dark { --spw-veil:#080b1299; --spw-veil-soft:#080b1245; --spw-reading-copy:#d9dee5; --spw-muted:#bdc5ce; --spw-reader:#0b1019ed; }
#content-wrapper { position:relative; padding:4px 0 24px; border:0; border-radius:0; background:transparent; backdrop-filter:none; box-shadow:none; }
#content-wrapper article.card-base > div:first-child, .spw-index-heading { position:relative; isolation:isolate; }
#content-wrapper:is([data-spw-template=index],[data-spw-template=category],[data-spw-template=tag]) article.card-base > div:first-child::after, .spw-index-heading::after { content:''; position:absolute; inset:0 -12px; z-index:-1; pointer-events:none; background:linear-gradient(90deg,var(--spw-veil),var(--spw-veil-soft) 78%,transparent); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); mask-image:linear-gradient(transparent,#000 18px,#000 calc(100% - 18px),transparent); }
#content-wrapper article.card-base { overflow:visible; }
#content-wrapper article.card-base .text-75 { color:var(--spw-reading-copy); font-size:15px; line-height:1.95; }
#content-wrapper article.card-base .text-50 { color:var(--spw-muted); font-size:13px; }
#content-wrapper article.card-base > div:first-child > a:first-child { font-weight:750; }
#sidebar { padding-right:24px; border-right:1px solid var(--spw-rule); }
#sidebar .card-base { padding:16px 0 20px; border:0; border-bottom:1px solid var(--spw-rule); border-radius:0; background:transparent; backdrop-filter:none; box-shadow:none; }
#sidebar-sticky > .card-base { padding:0 0 18px; }
#sidebar .text-neutral-400 { color:var(--spw-reading-copy); font-size:14px; }
#sidebar .btn-plain { font-size:14px; }
#sidebar .px-2, #sidebar-sticky .text-lg, #sidebar-sticky .btn-plain { text-shadow:0 1px 3px var(--page-bg),0 0 9px var(--page-bg),0 0 18px var(--page-bg); }
#content-wrapper > header.card-base, #content-wrapper > .card-base:not(article):not(#post-container) { background:linear-gradient(100deg,var(--spw-veil),transparent); border:0; border-radius:0; box-shadow:none; backdrop-filter:blur(3px); padding:22px 0; margin-bottom:20px; }
#content-wrapper h1 { font-family:'Noto Serif SC','Songti SC',SimSun,serif; font-size:clamp(27px,3vw,36px); line-height:1.45; letter-spacing:-.02em; color:var(--spw-ink); }
#content-wrapper[data-spw-template=post], #content-wrapper[data-spw-template=page], #content-wrapper[data-spw-template=moment] { padding:28px 32px; background:var(--spw-reader); border:1px solid var(--spw-rule); border-radius:8px; }
#content-wrapper #post-container { background:transparent; border:0; padding:0 0 20px; }
#content-wrapper[data-spw-template=page] > .card-base, #content-wrapper[data-spw-template=moment] > .card-base { padding:0; background:transparent; backdrop-filter:none; }
.custom-md { overflow-wrap:anywhere; }
.custom-md pre { max-width:100%; overflow-x:auto; }
.custom-md table { display:block; max-width:100%; overflow-x:auto; }
#navbar a[aria-current=page] { background:transparent; box-shadow:inset 0 -2px 0 var(--spw-gold); color:var(--spw-cream); }
#navbar a.btn-plain:hover:not([aria-current=page]) { background:transparent; color:#e5c689; box-shadow:none; }
@media(max-width:1023px){#sidebar{border-right:0;border-top:1px solid var(--spw-rule);padding:18px 0 0}#sidebar > div:first-child > .card-base{padding-left:118px}#sidebar a[aria-label=Profile]{left:0;top:12px}}
@media(max-width:767px){#main-grid{padding-inline:19px;gap:24px}#content-wrapper{padding:0 0 20px}#content-wrapper article.card-base .text-75{font-size:14px}#content-wrapper article.card-base .text-50{font-size:12px}#sidebar > div:first-child > .card-base{padding-left:102px}#sidebar-sticky{gap:18px}#content-wrapper[data-spw-template=post],#content-wrapper[data-spw-template=page],#content-wrapper[data-spw-template=moment]{padding:22px 18px}#content-wrapper #post-container{padding:0}}

/* Long-form reading: keep sticky utilities below the fixed navigation. */
@media(min-width:1024px){#sidebar-sticky{top:96px}}
#post-container .flex-nowrap { flex-wrap:wrap; min-width:0; }
#post-container .whitespace-nowrap { white-space:normal; overflow-wrap:anywhere; }
#toc-inner-wrapper { top:96px; max-height:calc(100svh - 116px); }
@media(min-width:1280px){
  body:has(#toc-wrapper) #main-panel-wrapper > div{max-width:none}
  body:has(#toc-wrapper) #main-grid{width:calc(100vw - 240px);max-width:1200px;margin-left:max(20px,calc((100vw - 1440px)/2 + 20px));margin-right:220px}
  #toc-wrapper{position:fixed;top:96px;right:max(20px,calc((100vw - 1440px)/2 + 20px));width:180px;opacity:1;transform:none;pointer-events:auto}
  #toc-inner-wrapper{position:static;width:180px;height:calc(100svh - 116px);padding:12px 8px;background:var(--spw-veil);border-radius:6px;backdrop-filter:blur(3px)}
}

#content-wrapper h1 { overflow-wrap:anywhere; }
