:root{
  --cream:#fdfbf7;--taupe:#e8e4dc;--mocha-light:#a69080;--mocha:#7a6353;--mocha-dark:#4a3f35;
  --sage:#9eb08d;--sage-light:#cbd5c0;--rose:#d9b8b5;--offwhite:#faf9f5;
  --bg:var(--cream);--surface:rgba(250,249,245,.8);--border:rgba(232,228,220,.6);
  --text:var(--mocha-dark);--muted:var(--mocha);--accent:var(--rose);--glow:color-mix(in srgb,var(--rose) 35%,transparent);
}
/* Seasons recolor the light palette */
[data-season=spring]{--rose:#e89ab3;--sage:#7fb069;--sage-light:#cfe8c0;--cream:#fdf3f6;--bg:#fdf3f6;
  --surface:rgba(255,248,250,.85);--border:rgba(232,154,179,.35);--accent:#e07a9a;--muted:#8a5a6a;--mocha-light:#c47f96}
[data-season=summer]{--rose:#f2a65a;--sage:#3fa7a0;--sage-light:#bfe6e0;--cream:#fff8e8;--bg:#fff8e8;
  --surface:rgba(255,252,242,.85);--border:rgba(242,166,90,.35);--accent:#ef8c3a;--muted:#7a5a33;--mocha-light:#3fa7a0}
[data-season=autumn]{--rose:#c8693a;--sage:#a8892f;--sage-light:#ead9b0;--cream:#f8eedf;--bg:#f8eedf;
  --surface:rgba(252,245,235,.85);--border:rgba(200,105,58,.3);--accent:#b8562a;--muted:#7a4a2e;--mocha-light:#8f3d22}
[data-season=winter]{--rose:#8fb0d6;--sage:#7d9fb5;--sage-light:#dce8f2;--cream:#f2f6fb;--bg:#f2f6fb;
  --surface:rgba(250,252,255,.85);--border:rgba(143,176,214,.4);--accent:#5f87b8;--muted:#4e6278;--mocha-light:#9fb8d4}
.dark{
  --bg:#1c1917;--surface:rgba(41,37,36,.8);--border:rgba(68,64,60,.6);
  --text:#f5f5f4;--muted:#c9c3be;--accent:#b0c29f;--glow:rgba(99,102,241,.14);
}
/* Paper grain: small tiled noise, cheap to paint */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.dark body::before{mix-blend-mode:screen;opacity:.12}
/* Candle glow (dark mode only) */
.candle{position:fixed;left:0;right:0;margin:0 auto;bottom:-20vh;width:min(90vw,700px);height:60vh;pointer-events:none;display:none;
  background:radial-gradient(closest-side,rgba(255,170,80,.28),rgba(255,140,50,.08) 60%,transparent);animation:flicker 4s ease-in-out infinite}
.dark .candle{display:block}
@keyframes flicker{0%,100%{opacity:.85;transform:scale(1)}20%{opacity:1;transform:scale(1.03)}45%{opacity:.75;transform:scale(.98)}70%{opacity:.95;transform:scale(1.02)}}
/* Tea cup + steam */
.cup{display:block;margin:0 auto 4px;color:var(--muted)}
.steam{stroke-dasharray:4 6;opacity:0;animation:steam 3.2s ease-in-out infinite}
.s2{animation-delay:.8s}.s3{animation-delay:1.6s}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-8px)}}
.season{position:fixed;top:24px;left:24px;z-index:40;display:flex;align-items:center;gap:8px;
  height:46px;padding:0 16px 0 12px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--accent);
  backdrop-filter:blur(8px);font:500 1.25rem/1 Caveat,cursive;transition:transform .2s,color .6s,border-color .6s}
.season:hover{transform:translateY(-2px)}
.season svg{flex-shrink:0;transition:transform .5s}
.season:hover svg{transform:rotate(25deg)}
.season .lbl{color:var(--text)}
.dark .season{color:var(--accent)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:48px 24px;
  font-family:Lora,serif;color:var(--text);background:var(--bg);overflow-x:hidden;transition:background .5s,color .5s}
.col{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}

.fog{position:fixed;inset:0;pointer-events:none;background:var(--bg);animation:fog 1.2s ease-out forwards;z-index:50}
@keyframes fog{to{opacity:0;visibility:hidden}}
.glow{position:fixed;top:-15%;left:-15%;width:60vw;height:60vw;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow),transparent);animation:pulse 10s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.1);opacity:.6}}
/* Seasonal background particles */
.fx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fx .p{position:absolute;top:-40px;opacity:var(--o);color:var(--rose);will-change:transform;
  animation:fall var(--dur) linear var(--del) infinite}
.fx .p:nth-child(3n){color:var(--sage)}.fx .p:nth-child(3n+1){color:var(--mocha-light)}
.fx .p svg{display:block;animation:spin calc(var(--dur)/2) linear infinite}
@keyframes fall{to{transform:translate(var(--sway),110vh)}}
@keyframes spin{to{transform:rotate(360deg)}}
/* spring: petals drift gently; summer: fireflies rise and glow; autumn: leaves tumble; winter: snow */
[data-season=spring] .fx .p svg{animation:sway 3s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-30deg)}to{transform:rotate(30deg)}}
[data-season=summer] .fx .p{top:auto;bottom:-40px;color:#f6c453;animation-name:rise-up;filter:drop-shadow(0 0 6px #f6c453)}
[data-season=summer] .fx .p svg{animation:twinkle 2s ease-in-out infinite alternate}
@keyframes rise-up{to{transform:translate(var(--sway),-110vh)}}
@keyframes twinkle{from{opacity:.3;transform:scale(.7)}to{opacity:1;transform:scale(1.1)}}
[data-season=autumn] .fx .p svg{animation-duration:4s}
[data-season=winter] .fx .p{color:#fff;filter:drop-shadow(0 0 2px rgba(95,135,184,.6))}
[data-season=winter] .fx .p svg{animation-duration:12s}
.dark[data-season=winter] .fx .p{filter:none}

/* Seasonal avatar effects */
.halo{position:absolute;inset:-14px;border-radius:50%;pointer-events:none;z-index:-1;transition:background .6s}
[data-season=spring] .halo{background:radial-gradient(closest-side,rgba(232,154,179,.55),transparent);animation:bloom 4s ease-in-out infinite}
@keyframes bloom{50%{transform:scale(1.12)}}
[data-season=summer] .halo{inset:-22px;background:repeating-conic-gradient(rgba(246,196,83,.55) 0 8deg,transparent 8deg 24deg);
  -webkit-mask:radial-gradient(closest-side,transparent 58%,#000 60%,transparent);mask:radial-gradient(closest-side,transparent 58%,#000 60%,transparent);animation:spin 30s linear infinite}
[data-season=autumn] .halo{background:radial-gradient(closest-side,rgba(200,105,58,.5),rgba(168,137,47,.15) 70%,transparent);animation:ember 3s ease-in-out infinite}
@keyframes ember{50%{opacity:.6;transform:scale(1.06) rotate(4deg)}}
[data-season=winter] .halo{background:radial-gradient(closest-side,rgba(220,232,242,.9),rgba(143,176,214,.25) 70%,transparent);animation:frost 5s ease-in-out infinite}
@keyframes frost{50%{opacity:.7;filter:blur(2px)}}
[data-season=winter] .avatar{border-color:#e8f1f8;box-shadow:0 0 0 2px rgba(143,176,214,.5),0 4px 14px rgba(95,135,184,.3)}
[data-season=spring] .avatar{border-color:#fbe3eb}
[data-season=autumn] .avatar{border-color:#f1dcc4}
.badge{position:absolute;top:-6px;right:-8px;z-index:3;color:var(--accent);pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));animation:bob 4s ease-in-out infinite}
.badge svg{display:block}
@keyframes bob{50%{transform:translateY(-5px) rotate(12deg)}}
.heart svg{display:block}

.theme{position:fixed;top:24px;right:24px;z-index:40;padding:12px;border-radius:16px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);display:grid;place-items:center;
  backdrop-filter:blur(8px);transition:transform .2s}
.theme:hover{transform:scale(1.1) rotate(15deg)}
.theme .sun{display:none}.dark .theme .sun{display:block}.dark .theme .moon{display:none}

.rise{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.4s + var(--d)*.12s)}
@keyframes rise{to{opacity:1;transform:none}}

.avatar-wrap{position:relative;margin:32px 0}
.avatar{width:128px;height:128px;object-fit:cover;cursor:pointer;border:4px solid var(--offwhite);
  border-radius:35% 65% 60% 40%/45% 45% 55% 55%;box-shadow:0 4px 12px rgba(0,0,0,.12);transition:transform .4s}
.dark .avatar{border-color:#292524}
.avatar:hover{transform:scale(1.03)}.avatar:active{transform:scale(.95)}
.hearts{position:absolute;inset:0;pointer-events:none;overflow:visible}
.heart{position:absolute;color:var(--accent);font-size:24px;animation:heart 1.6s ease-out forwards}
@keyframes heart{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-150px) rotate(var(--r)) scale(var(--s))}}

header{text-align:center;margin-bottom:40px}
h1{font:500 clamp(1.875rem,5vw,2.25rem)/1.2 "Playfair Display",Georgia,serif;letter-spacing:-.025em;margin-bottom:8px}
.sub{font:500 1.5rem Caveat,cursive;color:var(--muted);transform:rotate(-1deg)}
.sub span{display:inline-block;overflow:hidden;white-space:nowrap;max-width:100%;vertical-align:bottom;
  width:0;animation:type 1.9s steps(37) 1.2s forwards}
@keyframes type{to{width:19.5em}}
@media(max-width:420px){.sub span{white-space:normal;width:auto;animation:none}}

.links{width:100%;display:flex;flex-direction:column;gap:16px}
.link{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-radius:16px;background:var(--surface);border:1px solid var(--border);
  color:var(--text);text-decoration:none;backdrop-filter:blur(4px);box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .3s,box-shadow .3s}
.link:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.link:active{transform:scale(.98)}
.link::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .7s}
.link:hover::after{transform:translateX(100%)}
.link .l{display:flex;align-items:center;gap:16px;letter-spacing:.025em;font-weight:500}
.link .i{padding:10px;border-radius:12px;background:var(--bg);border:1px solid var(--border);color:var(--muted);display:grid}
.link .arr{color:var(--accent);opacity:0;transform:translateX(-8px);transition:.5s}
.link:hover .arr{opacity:1;transform:none}

.reads{width:100%;margin-top:24px;min-height:160px;content-visibility:auto;contain-intrinsic-size:160px}
.reads h3{font:500 1.5rem Caveat,cursive;color:var(--muted);text-align:center;margin-bottom:12px}
.reads .card{padding:20px 24px;border-radius:32px;background:var(--surface);border:1px solid var(--border);overflow:hidden}
.skel{display:flex;gap:16px;align-items:center;min-height:100px}
.skel i{width:48px;height:64px;border-radius:8px;background:var(--border)}
.skel b{flex:1;height:16px;border-radius:4px;background:var(--border)}
/* Goodreads widget overrides */
#gr_custom_widget_1772632100 [class*=gr_custom_container]{width:100%!important;padding:0!important;border:0!important;background:transparent!important;color:inherit!important}
#gr_custom_widget_1772632100 [class*=gr_custom_header],#gr_custom_widget_1772632100 center,#gr_custom_widget_1772632100 noscript,#gr_custom_widget_1772632100 br,#gr_custom_widget_1772632100 [class*=gr_custom_rating]{display:none!important}
#gr_custom_widget_1772632100 [class*=gr_custom_each_container]{display:flex!important;align-items:center;flex-wrap:wrap;padding:14px 0!important;margin:0!important;border-bottom:1px dashed rgba(166,144,128,.25)!important;overflow:hidden!important}
#gr_custom_widget_1772632100 [class*=gr_custom_each_container]:last-of-type{border-bottom:0!important}
#gr_custom_widget_1772632100 [class*=gr_custom_book_container]{flex-shrink:0;width:48px!important;height:auto!important;margin:0 16px 0 0!important;overflow:visible!important}
#gr_custom_widget_1772632100 [class*=gr_custom_book_container] img{width:48px!important;height:auto!important;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.12);transition:transform .4s}
#gr_custom_widget_1772632100 [class*=gr_custom_book_container] a:hover img{transform:scale(1.1) rotate(-3deg)}
#gr_custom_widget_1772632100 [class*=gr_custom_title]{font-weight:600;font-size:.95rem;margin-right:6px}
#gr_custom_widget_1772632100 [class*=gr_custom_author]{font-size:.85rem!important;color:var(--muted);opacity:.85}
#gr_custom_widget_1772632100 a{color:inherit!important;text-decoration:none!important}

.reads+.reads{margin-top:8px}
.goal a{color:inherit;text-decoration:none}
.bar{height:12px;border-radius:99px;background:var(--border);overflow:hidden}
.bar span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--sage),var(--rose));transition:width 1s}
.goal{text-align:center;margin:10px 0 14px;font-size:.95rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.stats b{display:block;font:500 1.4rem "Playfair Display",serif}.stats small{color:var(--muted)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.posts a{aspect-ratio:1;border-radius:14px;overflow:hidden;display:block;transition:transform .3s}
.posts a:hover{transform:scale(1.04) rotate(-1deg)}.posts img{width:100%;height:100%;object-fit:cover}
.posts a.follow{grid-column:1/-1;aspect-ratio:auto;padding:16px;text-align:center;background:var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none}
.pick{width:100%;padding:12px;border-radius:14px;cursor:pointer;background:var(--bg);border:1px solid var(--border);color:var(--text);font-weight:500}
.pick:hover{border-color:var(--accent)}
.picked{text-align:center;margin-top:12px;min-height:1.5em;font-style:italic}
.flip{animation:flip .5s}@keyframes flip{from{opacity:0;transform:rotateX(90deg)}}
.quote{text-align:center;font-style:italic;color:var(--muted)}
.washi{margin:64px 0 32px;width:112px;height:28px;opacity:.4;transform:rotate(-2deg);transition:opacity .7s;
  background:repeating-linear-gradient(45deg,var(--rose) 0 8px,var(--sage-light) 8px 16px)}
.washi:hover{opacity:1}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .rise{opacity:1;transform:none}.sub span{width:auto}}

/* ===== Dark mode, per season ===== */
.dark[data-season=spring]{--bg:#1d1519;--surface:rgba(44,30,37,.78);--border:rgba(232,154,179,.18);--text:#f7eef1;--muted:#d9b9c4;--accent:#f0a3bd;--glow:rgba(232,154,179,.16);--rose:#f0a3bd;--sage:#9fcf8a;--mocha-light:#c98aa2;--candle:255,170,190}
.dark[data-season=summer]{--bg:#121a22;--surface:rgba(26,38,48,.78);--border:rgba(63,167,160,.2);--text:#eef6f6;--muted:#b6d3d1;--accent:#f6c453;--glow:rgba(63,167,160,.16);--rose:#f2a65a;--sage:#5cc7bf;--mocha-light:#7fb8c9;--candle:255,200,110}
.dark[data-season=autumn]{--bg:#1c1410;--surface:rgba(43,30,22,.8);--border:rgba(200,105,58,.2);--text:#f6ece2;--muted:#d6bba3;--accent:#e08a52;--glow:rgba(200,105,58,.18);--rose:#d9774a;--sage:#c9a640;--mocha-light:#a85a36;--candle:255,150,70}
.dark[data-season=winter]{--bg:#10151d;--surface:rgba(26,33,45,.8);--border:rgba(143,176,214,.2);--text:#eef3f9;--muted:#b4c4d8;--accent:#9fc2ea;--glow:rgba(143,176,214,.16);--rose:#9fc2ea;--sage:#86a9c2;--mocha-light:#c9d8ea;--candle:190,215,255}
.dark{color-scheme:dark}
.dark .glow{animation-duration:14s}
.dark .candle{background:radial-gradient(closest-side,rgba(var(--candle,255,170,80),.24),rgba(var(--candle,255,140,50),.07) 60%,transparent)}
.dark .avatar,.dark[data-season] .avatar{border-color:var(--surface);box-shadow:0 0 0 1px var(--border),0 8px 30px rgba(0,0,0,.45),0 0 40px var(--glow)}
.dark .halo{opacity:.7;mix-blend-mode:screen}
.dark .link{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 4px 16px rgba(0,0,0,.25)}
.dark .link:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 10px 28px rgba(0,0,0,.4),0 0 24px var(--glow)}
.dark .link::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%)}
.dark .link .i{background:rgba(0,0,0,.25);color:var(--accent)}
.dark h1{text-shadow:0 0 24px var(--glow)}
.dark .reads .card{box-shadow:0 8px 30px rgba(0,0,0,.3)}
.dark .skel i,.dark .skel b{background:rgba(255,255,255,.06)}
.dark .theme,.dark .season{box-shadow:0 4px 14px rgba(0,0,0,.3)}
.dark .fx .p{filter:drop-shadow(0 0 4px var(--glow))}
.dark[data-season=summer] .fx .p{color:#ffd36b;filter:drop-shadow(0 0 8px #ffcf5a)}
.dark[data-season=winter] .fx .p{color:#e6f0ff;filter:drop-shadow(0 0 4px rgba(159,194,234,.7))}
.dark .washi{opacity:.25}
.dark #gr_custom_widget_1772632100 [class*=gr_custom_each_container]{border-bottom-color:rgba(255,255,255,.08)!important}