/* ===========================================================
   Tennyo Yui — design system
   Soft pink + yellow on warm cream · rounded-friendly type
   =========================================================== */

:root {
  --cream:      #fff7f3;
  --cream-2:    #fff0f6;
  --paper:      #ffffff;
  --ink:        #4a2436;
  --ink-soft:   rgba(74, 36, 54, 0.64);
  --ink-faint:  rgba(74, 36, 54, 0.40);

  --pink:       #ff7eb6;
  --pink-deep:  #ff4f9a;
  --pink-soft:  #ffd9ea;
  --yellow:     #ffd86b;
  --yellow-deep:#ffc23c;
  --yellow-soft:#fff1c4;

  --grad-warm:  linear-gradient(120deg, #ff8fc1 0%, #ffb38a 48%, #ffe08a 100%);
  --grad-soft:  linear-gradient(135deg, #ffe7f2 0%, #fff3df 100%);

  --shadow-sm:  0 4px 18px rgba(255, 105, 170, 0.14);
  --shadow-md:  0 14px 40px rgba(255, 90, 160, 0.18);
  --shadow-lg:  0 30px 80px rgba(255, 90, 160, 0.22);

  --radius:     26px;
  --radius-sm:  16px;
  --maxw:       1140px;

  --font-display: "Baloo 2", "M PLUS Rounded 1c", system-ui, sans-serif;
  --font-body:    "M PLUS Rounded 1c", "Quicksand", system-ui, sans-serif;
  --font-accent:  "Quicksand", "M PLUS Rounded 1c", sans-serif;

  --sparkle: 1;        /* multiplied by tweaks */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  cursor: url("assets/cursor-penlight.png?v=3") 2 1, auto;
}
a, button, input, select, textarea, label, .btn, .link-card, .cal-cell.has, .lang-switch button, .tag-chip, image-slot, .ev-item {
  cursor: url("assets/cursor-penlight.png?v=3") 2 1, pointer;
}

/* ---- ambient background : drifting pastel orbs ---- */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(255, 144, 193, 0.30), transparent 70%),
    radial-gradient(55% 45% at 88% 18%, rgba(255, 216, 107, 0.34), transparent 72%),
    radial-gradient(60% 55% at 78% 92%, rgba(255, 144, 193, 0.22), transparent 70%),
    radial-gradient(50% 50% at 10% 88%, rgba(255, 216, 107, 0.20), transparent 72%),
    var(--cream);
}
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  animation: drift 22s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -34px) scale(1.12); }
}

/* sparkle layer */
.sparkle-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.spark {
  position: absolute;
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 180, 210, 0.9));
  animation: twinkle var(--dur, 4s) ease-in-out infinite;
  opacity: 0;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50%      { opacity: var(--peak, 0.9); transform: scale(1) rotate(45deg); }
}

.app { position: relative; z-index: 2; }

/* language switch — fixed top-right, stays while scrolling */
.lang-switch {
  position: fixed; top: 26px; right: 30px; z-index: 70;
  display: inline-flex; align-items: center; padding: 4px;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,130,180,.45); border-radius: 999px;
  box-shadow: var(--shadow-md);
}
.lang-switch button {
  position: relative; z-index: 1; border: none; background: transparent; cursor: url("assets/cursor-penlight.png?v=3") 2 1, pointer;
  font-family: var(--font-accent); font-weight: 800; font-size: 13px; letter-spacing: .08em;
  color: var(--ink-soft); width: 46px; height: 34px; border-radius: 999px; transition: color .25s;
}
.lang-switch button.on { color: #fff; }
.lang-knob {
  position: absolute; top: 4px; left: 4px; width: 46px; height: 34px; border-radius: 999px;
  background: var(--grad-warm); box-shadow: 0 4px 12px rgba(255,90,160,.4);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2); z-index: 0;
}
.lang-knob.en { transform: translateX(46px); }
@media (max-width: 520px) {
  .lang-switch { top: 16px; right: 18px; }
  .lang-switch button { width: 40px; height: 30px; font-size: 12px; }
  .lang-knob { width: 40px; height: 30px; }
  .lang-knob.en { transform: translateX(40px); }
}

/* decorative frame around the WHOLE page (scrolls with content) */
.app {
  position: relative; z-index: 2;
  margin: 16px; border: 3px solid var(--pink); border-radius: 32px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 30px rgba(255,130,180,.22);
}
.app::after {
  content: ""; position: absolute; inset: 7px; border-radius: 25px;
  border: 2px solid var(--yellow-deep); pointer-events: none; z-index: 0;
}
.pf-corner {
  position: absolute; font-size: 30px; line-height: 1; color: var(--pink-deep); z-index: 3;
  filter: drop-shadow(0 2px 5px rgba(255, 150, 190, 0.6)); animation: cornerPulse 4s ease-in-out infinite;
}
.pf-corner.tl { top: -17px; left: -17px; } .pf-corner.tr { top: -17px; right: -17px; animation-delay: 1s; }
.pf-corner.br { bottom: -17px; right: -17px; animation-delay: 2s; } .pf-corner.bl { bottom: -17px; left: -17px; animation-delay: 3s; }
@keyframes cornerPulse { 0%, 100% { opacity: .7; transform: scale(.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .pf-corner { animation: none; } }
@media (max-width: 520px) { .app { margin: 10px; border-radius: 24px; border-width: 2.5px; } }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ============================ HERO ============================ */
.hero { position: relative; display: flex; align-items: flex-start; padding: 124px 0 56px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 54px; align-items: center; width: 100%;
}
.hero-copy { min-width: 0; position: relative; z-index: 3; }
.hero-kicker {
  font-family: var(--font-accent); font-weight: 700; letter-spacing: 0.32em;
  font-size: 13px; color: var(--pink-deep); text-transform: uppercase; margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 12px;
}
.hero-kicker::before, .hero-kicker::after { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--pink); opacity: .6; }
.hero-name-jp {
  font-family: var(--font-display); font-weight: 800; line-height: 0.98;
  font-size: clamp(52px, 7.2vw, 94px); margin: 0 0 0 -0.6em;
  display: inline-flex; align-items: center; gap: 0.08em; flex-wrap: nowrap;
  letter-spacing: -0.01em;
}
.hero-name-jp .name-text {
  white-space: nowrap; display: inline-block; flex: 0 0 auto; padding-right: 0.12em;
  color: var(--pink-deep);
  text-shadow: 0 6px 18px rgba(255,120,175,0.22);
}
.hero-name-jp .name-mark {
  position: relative;
  flex: 0 0 auto; width: 0.82em; height: 0.82em; display: inline-block; align-self: center;
}
.hero-name-jp .name-mark image-slot { width: 100%; height: 100%; display: block; }
.hero-name-jp .name-mark image-slot::part(frame) { background: transparent; }
/* when a PNG is dropped, hide the raw (white) image and show the gradient-masked copy */
.hero-name-jp .name-mark image-slot[data-tinted]::part(image) { opacity: 0; }
.hero-name-jp .name-mark-grad {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: var(--pink-deep);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.hero-name-en {
  font-family: var(--font-accent); font-weight: 700; letter-spacing: 0.18em;
  font-size: clamp(15px, 1.8vw, 22px); color: var(--ink-soft); margin: 14px 0 0; text-transform: uppercase;
}
.hero-tag {
  margin: 30px 0 0; font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; color: var(--ink);
}
.hero-tag .en { display: block; font-family: var(--font-accent); font-size: 0.6em; font-weight: 600; color: var(--pink-deep); letter-spacing: .14em; margin-top: 6px; }
.hero-blurb { margin: 22px 0 0; max-width: 30ch; font-size: 16px; line-height: 1.85; color: var(--ink-soft); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: url("assets/cursor-penlight.png?v=3") 2 1, pointer; border: none;
  font-family: var(--font-accent); font-weight: 700; font-size: 15px; letter-spacing: .02em;
  padding: 15px 26px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s;
}
.btn-primary { background: var(--grad-warm); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-lg); }
.btn-ghost { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* hero portrait */
.hero-portrait { position: relative; display: flex; justify-content: center; }
.portrait-ring {
  position: relative; width: min(470px, 84%); aspect-ratio: 3/4; z-index: 1;
  border-radius: 200px 200px 40px 40px; padding: 14px;
  background: linear-gradient(160deg, #fff, #ffeaf4 55%, #fff3d2);
  box-shadow: var(--shadow-lg);
}
.portrait-ring image-slot { width: 100%; height: 100%; display: block; border-radius: 188px 188px 28px 28px; overflow: hidden; }
.hero-emblem {
  position: absolute; left: 50%; top: -30%; width: min(540px, 108%);
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  filter: drop-shadow(0 8px 22px rgba(255,200,90,.5));
  animation: emblemFloat 6s ease-in-out infinite;
}
@keyframes emblemFloat { 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(-6px);} }
.floaty { position: absolute; font-size: 30px; filter: drop-shadow(0 6px 12px rgba(255,140,180,.4)); animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0) rotate(-6deg);} 50%{ transform: translateY(-16px) rotate(6deg);} }

.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-faint); font-family: var(--font-accent); font-size: 12px; letter-spacing: .25em; text-transform: uppercase; }
.scroll-cue .dot { width: 22px; height: 36px; border: 2px solid var(--pink); border-radius: 12px; position: relative; }
.scroll-cue .dot::after { content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background: var(--pink-deep); animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0%{ opacity:0; top:6px;} 40%{ opacity:1;} 100%{ opacity:0; top:20px;} }

/* ============================ SECTIONS ============================ */
.section { position: relative; padding: 96px 0; }
.sec-head { text-align: center; margin-bottom: 54px; }
.sec-eyebrow { font-family: var(--font-accent); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; font-size: 12px; color: var(--pink-deep); }
.sec-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 58px); margin: 10px 0 0; line-height: 1.05; }
.sec-title .accent { color: var(--pink-deep); }
.sec-sub { margin: 14px auto 0; max-width: 46ch; color: var(--ink-soft); font-size: 15.5px; line-height: 1.8; }

/* reveal on scroll — fade in / fade out both directions */
.reveal { opacity: 0; transition: opacity 0.85s ease, transform 0.85s ease; transform: translateY(14px); will-change: opacity; }
.reveal.in { opacity: 1; transform: none; }

/* ---- About ---- */
.about-grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 40px; align-items: center; }
.about-portrait { position: relative; }
.about-portrait image-slot { width: 100%; height: clamp(460px, 52vw, 680px); display:block; border-radius: var(--radius); box-shadow: var(--shadow-md); overflow:hidden; }
.about-portrait .sticker { position:absolute; bottom:-18px; right:-12px; background:var(--paper); border-radius:18px; padding:12px 18px; box-shadow:var(--shadow-md); font-family:var(--font-accent); font-weight:700; font-size:13px; color:var(--pink-deep); }
.bio-card { background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); border-radius: var(--radius); padding: 38px; box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,.8); }
.bio-card p { margin: 0 0 16px; line-height: 1.95; font-size: 16px; color: var(--ink); }
.bio-card p:last-child { margin-bottom: 0; color: var(--ink-soft); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 30px; }
.fact { background: var(--paper); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm); transition: transform .25s; }
.fact:hover { transform: translateY(-4px); }
.fact .k { font-family: var(--font-accent); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink-deep); font-weight: 700; }
.fact .v { font-size: 14.5px; font-weight: 600; margin-top: 3px; }

/* ---- Music ---- */
.music-card {
  position: relative; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; align-items: center;
  background: linear-gradient(135deg, #ff86bd 0%, #ffb079 55%, #ffd86b 100%);
  border-radius: 36px; padding: 44px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.music-card::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 90% 10%, rgba(255,255,255,.35), transparent 60%); pointer-events:none; }
.disc { position: relative; aspect-ratio: 1; border-radius: 24px; background: rgba(255,255,255,.18); padding: 12px; }
.disc image-slot { width:100%; height:100%; display:block; border-radius: 16px; overflow:hidden; }
.music-meta { color: #fff; position: relative; z-index: 1; }
.music-meta .label { font-family: var(--font-accent); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:12px; opacity:.92; }
.music-meta h3 { font-family: var(--font-display); font-weight:800; font-size: clamp(30px,4vw,50px); margin:10px 0 14px; line-height:1.02; }
.music-meta p { margin:0 0 24px; line-height:1.8; font-size:15.5px; max-width: 40ch; color: rgba(255,255,255,.95); }
.btn-white { background:#fff; color: var(--pink-deep); }
.btn-white:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-lg); }
.music-btns { display:flex; flex-wrap:wrap; gap: 12px; }
.btn-spotify { background:#fff; color: var(--pink-deep); }
.btn-spotify:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-lg); }
.btn-spotify svg { flex:0 0 auto; }

/* ============================ X (TWITTER) FEED ============================ */
.x-card {
  max-width: 560px; margin: 0 auto; background: var(--paper); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-md); border: 1px solid rgba(255,200,225,.5);
  display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 220px; justify-content: center;
}
.x-card .twitter-timeline { width: 100% !important; }
.x-card iframe { border-radius: 16px !important; width: 100% !important; max-width: 100% !important; }
.x-loading { color: var(--ink-faint); font-size: 14px; display: flex; align-items: center; gap: 10px; padding: 30px 0; }
.x-loading::before { content: "𝕏"; font-size: 22px; color: var(--ink); }
.x-fb-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 10px; text-align: center; }
.x-fb-logo { width: 58px; height: 58px; border-radius: 18px; background: var(--ink); color: #fff; font-size: 28px; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.x-fb-text { font-weight: 700; font-size: 16px; line-height: 1.6; color: var(--ink); }
.x-fb-text span { font-family: var(--font-accent); font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.x-fallback {
  font-family: var(--font-accent); font-weight: 700; font-size: 13.5px; text-decoration: none;
  color: var(--pink-deep); background: var(--cream-2); padding: 10px 18px; border-radius: 999px; transition: transform .2s, box-shadow .2s;
}
.x-fallback:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ============================ CALENDAR ============================ */
.cal-shell { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 30px; align-items: start; }
.cal-card { background: var(--paper); border-radius: var(--radius); padding: 26px 26px 30px; box-shadow: var(--shadow-md); }
.cal-top { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; }
.cal-month { font-family: var(--font-display); font-weight: 800; font-size: 26px; }
.cal-month span { color: var(--ink-faint); font-family: var(--font-accent); font-size: 15px; font-weight: 600; margin-left: 8px; }
.cal-nav { display:flex; gap: 8px; }
.cal-nav button { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--cream-2); color: var(--pink-deep); font-size: 18px; cursor: url("assets/cursor-penlight.png?v=3") 2 1, pointer; transition: transform .2s, background .2s; display:grid; place-items:center; }
.cal-nav button:hover { background: var(--pink); color:#fff; transform: scale(1.08); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align:center; font-family: var(--font-accent); font-weight:700; font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); padding-bottom: 6px; }
.cal-cell { position: relative; aspect-ratio: 1; border-radius: 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor: url("assets/cursor-penlight.png?v=3") 2 1, default; background: transparent; transition: background .2s, transform .2s; border: 1px solid transparent; }
.cal-cell.has { cursor: url("assets/cursor-penlight.png?v=3") 2 1, pointer; }
.cal-cell.has:hover { background: var(--cream-2); transform: translateY(-2px); }
.cal-cell.empty { visibility: hidden; }
.cal-cell.today { border-color: var(--pink); }
.cal-cell.selected { background: var(--grad-warm); }
.cal-cell.selected .cal-num { color: #fff; }
.cal-cell.selected .cal-dots span { -webkit-text-fill-color: #fff; color: #fff !important; background: none !important; }
.cal-num { font-weight: 700; font-size: 15px; color: var(--ink); }
.cal-dots { display:flex; gap: 3px; height: 16px; line-height: 1; }
.cal-dots span { font-size: 14px; line-height: 1; display:inline-block; }
/* ✦ markers — colour by type via gradient text clip */
.star-stream  { color: var(--pink-deep); }
.star-asmr    { color: #b884ff; }
.star-event   { color: var(--yellow-deep); }
.star-special {
  background: linear-gradient(120deg, var(--pink-deep), var(--yellow-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.cal-legend { display:flex; flex-wrap:wrap; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--pink-soft); }
.cal-legend span { display:flex; align-items:center; gap:7px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.cal-legend span > span { font-size: 12px; }

/* upcoming / day panel */
.cal-side { background: rgba(255,255,255,0.72); backdrop-filter: blur(8px); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); border:1px solid rgba(255,255,255,.8); min-height: 360px; }
.cal-side h4 { font-family: var(--font-display); font-weight:800; font-size: 20px; margin: 0 0 4px; }
.cal-side .side-sub { color: var(--ink-faint); font-size: 13px; margin-bottom: 18px; }
.ev-item { display:flex; gap: 14px; padding: 14px; border-radius: 16px; text-decoration:none; color: inherit; transition: background .2s, transform .2s; align-items:center; }
.ev-item:hover { background: var(--cream-2); transform: translateX(4px); }
.ev-date { flex: 0 0 52px; text-align:center; background: var(--grad-soft); border-radius: 12px; padding: 8px 0; }
.ev-date .d { font-family: var(--font-display); font-weight:800; font-size: 20px; line-height:1; color: var(--pink-deep); }
.ev-date .m { font-family: var(--font-accent); font-size: 10px; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-faint); margin-top:3px; }
.ev-body { flex: 1; min-width: 0; }
.ev-body .t { font-weight: 700; font-size: 15px; }
.ev-body .meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; display:flex; gap: 10px; align-items:center; }
.ev-pill { font-family: var(--font-accent); font-size: 10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding: 2px 8px; border-radius: 999px; }
.pill-stream { background: var(--pink-soft); color: var(--pink-deep); }
.pill-asmr { background: #efe3ff; color: #7b46c9; }
.pill-event { background: var(--yellow-soft); color: #b8860b; }
.pill-special { background: var(--grad-warm); color: #fff; }
.cal-empty { color: var(--ink-faint); font-size: 14px; text-align:center; padding: 40px 0; }

/* ---- editor mode ---- */
.editor-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px dashed var(--pink-soft); }
.editor-badge { font-family: var(--font-accent); font-weight:700; font-size:12px; letter-spacing:.06em; color:#fff; background: var(--grad-warm); padding:6px 12px; border-radius:999px; }
.editor-bar-btns { display:flex; gap:6px; }
.editor-bar-btns button { font-family: var(--font-accent); font-weight:700; font-size:12.5px; border:none; cursor:pointer; border-radius:999px; padding:7px 12px; transition: transform .18s, box-shadow .18s; }
.editor-bar-btns button:hover { transform: translateY(-2px); }
.eb-add { background: var(--pink); color:#fff; }
.eb-pub { background: var(--yellow-deep); color:#5a3a00; }
.eb-discard { background: var(--cream-2); color: var(--ink-soft); width:34px; padding:7px 0; }

.side-back { margin-top:18px; width:100%; justify-content:center; font-size:13px; padding:12px 20px; }

.ev-item.editable { padding:8px; gap:8px; }
.ev-item .ev-hit { display:flex; gap:14px; align-items:center; flex:1; min-width:0; text-decoration:none; color:inherit; padding:6px; border-radius:14px; }
.ev-item.editable .ev-hit { cursor:default; }
.ev-ctl { display:flex; flex-direction:column; gap:6px; }
.ev-ctl button { width:32px; height:32px; border-radius:10px; border:none; cursor:pointer; background:var(--cream-2); font-size:14px; transition: background .18s, transform .18s; }
.ev-ctl button:hover { background: var(--pink-soft); transform: scale(1.06); }

.ev-form { display:flex; flex-direction:column; gap:12px; animation: efIn .3s ease; }
@keyframes efIn { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none; } }
.ev-form label { display:flex; flex-direction:column; gap:5px; font-family: var(--font-accent); font-weight:700; font-size:12px; color: var(--ink-soft); }
.ev-form input, .ev-form select { font-family: var(--font-body); font-size:14px; color: var(--ink); border:1.5px solid var(--pink-soft); border-radius:12px; padding:10px 12px; background:#fff; outline:none; transition: border-color .18s; }
.ev-form input:focus, .ev-form select:focus { border-color: var(--pink); }
.ev-form .ef-row { display:grid; grid-template-columns: 1.3fr 0.9fr; gap:10px; }
.ev-form .ef-actions { display:flex; gap:10px; margin-top:4px; }
.ef-save { flex:1; background: var(--grad-warm); color:#fff; border:none; border-radius:999px; padding:12px; font-family:var(--font-accent); font-weight:700; font-size:14px; cursor:pointer; transition: transform .18s, box-shadow .18s; }
.ef-save:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ef-save:disabled { opacity:.5; cursor:not-allowed; }
.ef-cancel { background: var(--cream-2); color: var(--ink-soft); border:none; border-radius:999px; padding:12px 18px; font-family:var(--font-accent); font-weight:700; font-size:14px; cursor:pointer; }

.cal-toast { position: fixed; left:50%; bottom:28px; transform: translateX(-50%); background: var(--ink); color:#fff; font-family:var(--font-accent); font-weight:600; font-size:14px; padding:12px 22px; border-radius:999px; box-shadow: var(--shadow-lg); z-index:60; animation: efIn .25s ease; }

/* ============================ LINKS ============================ */
.links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.link-card {
  position: relative; display:flex; align-items:center; gap: 18px; text-decoration:none; color: var(--ink);
  background: var(--paper); border-radius: 22px; padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2), box-shadow .28s; overflow:hidden; border:1px solid rgba(255,200,225,.4);
}
.link-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background: hsl(var(--h, 351) 95% 70%); }
.link-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.link-card.big { grid-column: span 2; padding: 26px 26px; background: linear-gradient(120deg, #fff, #fff4f9); }
.link-ico { flex:0 0 52px; height: 52px; border-radius: 16px; display:grid; place-items:center; background: hsl(var(--h,351) 100% 96%); color: hsl(var(--h,351) 80% 52%); }
.link-ico svg { width: 26px; height: 26px; }
.link-meta { flex:1; min-width:0; }
.link-meta .n { font-weight: 700; font-size: 17px; }
.link-meta .s { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.link-arrow { color: var(--ink-faint); transition: transform .25s; }
.link-card:hover .link-arrow { transform: translateX(4px); color: var(--pink-deep); }

/* ---- Tags ---- */
.tags-row { display:flex; flex-wrap:wrap; gap: 16px; justify-content:center; }
.tag-chip { background: var(--paper); border-radius: 20px; padding: 18px 26px; box-shadow: var(--shadow-sm); text-align:center; transition: transform .25s; min-width: 200px; }
.tag-chip:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: var(--shadow-md); }
.tag-chip .tg { font-family: var(--font-accent); font-weight: 700; font-size: 19px; color: var(--pink-deep); }
.tag-chip .lb { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

/* ---- Footer ---- */
.footer { text-align:center; padding: 70px 0 60px; position: relative; }
.footer .mark { font-family: var(--font-display); font-weight:800; font-size: clamp(40px,7vw,84px); background: var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent; line-height: .95; }
.footer-banner { max-width: 760px; margin: 0 auto 8px; }
.footer-banner image-slot { width: 100%; height: clamp(280px, 38vw, 440px); display:block; overflow:hidden; }
.footer-banner image-slot::part(frame) { background: transparent; }
.footer .oshi { font-size: 26px; margin: 14px 0 18px; }
.footer .fine { color: var(--ink-faint); font-size: 12.5px; line-height: 1.9; }
.footer .fine a { color: var(--pink-deep); text-decoration: none; }

/* ---- hashtags inside the calendar side panel (one per row) ---- */
.cal-tags { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--pink-soft); display: flex; flex-direction: column; gap: 8px; }
.cal-tags-head { font-family: var(--font-accent); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 2px; }
.cal-tag-row { display: flex; align-items: baseline; gap: 10px; background: var(--cream-2); border-radius: 12px; padding: 10px 14px; transition: transform .2s; }
.cal-tag-row:hover { transform: translateX(3px); }
.cal-tag-row .tg { font-family: var(--font-accent); font-weight: 700; font-size: 15px; color: var(--pink-deep); }
.cal-tag-row .lb { font-size: 12px; color: var(--ink-soft); }

/* ============================ GUIDELINES ============================ */
.guide-title { font-size: clamp(28px, 4vw, 46px); }
.guide-card {
  max-width: 720px; margin: 0 auto; background: rgba(255,255,255,0.72); backdrop-filter: blur(8px);
  border-radius: var(--radius); padding: 40px 44px; box-shadow: var(--shadow-md); border: 1px solid rgba(255,255,255,.8);
}
.guide-body {
  white-space: pre-line; line-height: 2; font-size: 15.5px; color: var(--ink);
  text-align: center;
}
.guide-link { color: var(--pink-deep); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; transition: color .2s; }
.guide-link:hover { color: var(--yellow-deep); }

/* ============================ PAST LIVES ARCHIVE ============================ */
.archive-box {
  max-width: 820px; margin: 0 auto; background: rgba(255,255,255,0.55); backdrop-filter: blur(8px);
  border: 2.5px solid var(--pink); border-radius: 24px; padding: 24px 22px 20px;
  box-shadow: var(--shadow-sm);
}
.archive-wrap { position: relative; }
.arch-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 14px; padding: 0 30px;
}
.arch-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; transition: transform .25s; text-decoration: none; color: inherit; }
.arch-card:hover { transform: translateY(-4px); }
.arch-card:hover image-slot { box-shadow: var(--shadow-md); border-color: var(--pink); }
.arch-card image-slot {
  width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-sm); border: 2px solid var(--pink-soft);
}
.arch-date { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--pink-deep); margin-top: 1px; }
.arch-title { white-space: pre-line; font-size: 11px; line-height: 1.4; color: var(--ink); font-weight: 600; }
.arch-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--paper); color: var(--pink-deep); font-size: 17px; box-shadow: var(--shadow-sm);
  display: grid; place-items: center; transition: transform .2s, background .2s, color .2s;
}
.arch-nav.prev { left: -6px; }
.arch-nav.next { right: -6px; }
.arch-nav:hover { background: var(--grad-warm); color: #fff; transform: translateY(-50%) scale(1.08); }
.arch-dots { display: flex; justify-content: center; gap: 7px; margin-top: 20px; }
.arch-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--pink-soft); cursor: pointer; padding: 0; transition: transform .2s, background .2s; }
.arch-dot.on { background: var(--pink-deep); transform: scale(1.25); }

/* ============================ STAFF ============================ */
.staff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 760px; margin: 0 auto; }
.staff-card { display: flex; flex-direction: column; align-items: center; gap: 12px; transition: transform .25s; }
.staff-card:hover { transform: translateY(-5px); }
.staff-card image-slot {
  width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-sm); border: 3px solid var(--pink-soft); transition: border-color .25s, box-shadow .25s;
}
.staff-card:hover image-slot { border-color: var(--pink); box-shadow: var(--shadow-md); }
.staff-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); margin-top: 2px; }
.staff-role { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); font-weight: 600; text-align: center; max-width: 22ch; text-wrap: pretty; }

/* ============================ CONTACT (Google Forms) ============================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 840px; margin: 0 auto; }
.contact-card {
  background: rgba(255,255,255,0.72); backdrop-filter: blur(8px);
  border-radius: var(--radius); padding: 30px 30px 34px; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255,255,255,.8); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s;
}
.contact-card:hover { transform: scale(1.035); box-shadow: var(--shadow-md); }
.contact-card image-slot { width: 100%; height: 270px; display: block; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.contact-title { font-family: var(--font-display); font-weight: 800; font-size: 23px; margin: 4px 0 0; }
.contact-desc { margin: 0 0 10px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; max-width: 26ch; }
.contact-card .btn { margin-top: auto; }

/* ============================ SIDE NAV (hover, invisible) ============================ */
.side-nav { position: fixed; left: 0; top: 0; bottom: 0; z-index: 65; pointer-events: none; }.side-nav-zone { position: absolute; left: 0; top: 0; bottom: 0; width: 42px; pointer-events: auto; }
.side-nav-list {
  list-style: none; margin: 0; padding: 0; background: transparent;
  position: absolute; left: 30px; top: 50%;
  transform: translateY(-50%) translateX(-10px);
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1.2);
}
.side-nav-zone:hover ~ .side-nav-list,
.side-nav-list:hover {
  opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0);
}
.side-nav-list li { margin: 3px 0; }
.side-nav-list a {
  text-decoration: none; display: flex; align-items: center; gap: 9px;
  font-family: var(--font-accent); font-weight: 700; font-size: 14.5px; color: var(--ink);
  padding: 7px 11px; border-radius: 12px;
  text-shadow: 0 1px 8px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.9);
  transition: color .2s, transform .2s;
}
.side-nav-list a:hover { color: var(--pink-deep); transform: translateX(4px); }
.side-nav-list .sn-star { color: var(--pink); font-size: 11px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .hero-kicker, .hero-cta { justify-content: center; }
  .hero-name-jp { justify-content: center; margin-left: 0; }
  .hero-blurb { margin-left:auto; margin-right:auto; }
  .hero-portrait { order: -1; }
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 440px; margin: 0 auto; }
  .about-portrait image-slot { height: clamp(380px, 90vw, 560px); }
  .music-card { grid-template-columns: 1fr; }
  .disc { max-width: 260px; margin: 0 auto; }
  .cal-shell { grid-template-columns: 1fr; }
  .links-grid { grid-template-columns: 1fr; }
  .link-card.big { grid-column: span 1; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .section { padding: 64px 0; }
  .facts { grid-template-columns: 1fr 1fr; }
  .bio-card, .cal-card, .cal-side { padding: 20px; }
  /* hero */
  .hero { padding: 84px 0 48px; }
  .hero-portrait .portrait-ring { width: min(360px, 90%); }
  .hero-name-jp { font-size: clamp(46px, 13vw, 72px); gap: 0.06em; }
  .hero-blurb { font-size: 15px; }
  /* music card */
  .music-card { padding: 28px 22px; gap: 26px; }
  /* calendar */
  .cal-card { padding: 16px; }
  .cal-grid { gap: 3px; }
  .cal-num { font-size: 13px; }
  .cal-dots span { font-size: 12px; }
  .cal-month { font-size: 22px; }
  .cal-legend { gap: 10px; }
  .cal-legend span { font-size: 11.5px; }
  /* footer banner */
  .footer-banner image-slot { height: clamp(180px, 50vw, 300px); }
  /* X feed */
  .x-card { padding: 14px; min-height: 180px; }
  /* contact cards stack on mobile */
  .contact-grid { grid-template-columns: 1fr; }
  .staff-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  /* archive grid → 1 column, hide side arrows (use dots) */
  .arch-grid { grid-template-columns: 1fr; gap: 22px; padding: 0; }
  .arch-nav { display: none; }
  /* guidelines */
  .guide-card { padding: 26px 20px; }
  .guide-body { font-size: 14.5px; line-height: 1.9; text-align: left; }
  /* side nav — slimmer trigger zone on mobile */
  .side-nav-zone { width: 26px; }
  .side-nav-list a { font-size: 13px; padding: 6px 9px; }
}
@media (max-width: 400px) {
  .facts { grid-template-columns: 1fr; }
  .hero-name-jp { font-size: clamp(40px, 13vw, 60px); }
  .cal-cell { border-radius: 10px; }
  .lang-switch { top: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-orb, .hero-emblem, .floaty, .spark, .scroll-cue .dot::after { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Tennyo Yui — static-build fixes (appended after app.css).
   Each block is a deliberate change requested for the live site;
   the original app.css is left untouched above this.
   ============================================================ */

/* (1) Image-slot grid items collapsing to 0 width on narrow screens.
   `.about-portrait` and `.disc` use margin:0 auto, which on a CSS grid makes
   the item size to content; their image-slot child is width:100% → circular →
   0px. A definite width breaks the cycle. */
@media (max-width: 900px) {
  .about-portrait, .disc { width: 100%; }
}

/* (2) Hide the hover side-nav on mobile/tablet — it relies on hover and is
   awkward on touch. */
@media (max-width: 900px) {
  .side-nav { display: none !important; }
}

/* (3) Keep the JP/EN switch inside the decorative page frame on small screens.
   It is position:fixed; the default offsets put it on/over the frame border. */
@media (max-width: 520px) {
  .lang-switch { top: 28px; right: 28px; }
}

/* The sparkle layer is fixed and un-clipped; a sparkle near the right edge can
   add a few px of horizontal scroll. Clip it (the orb layer already clips). */
.sparkle-layer { overflow: clip; }

/* (4) Calendar: let the month grid shrink so the card never pushes past the
   page frame. minmax(0,1fr) lets the 7 columns compress; min-width:0 lets the
   card shrink to its grid track instead of its (wider) min-content. */
.cal-shell > * { min-width: 0; }
.cal-card { min-width: 0; }
.cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 600px) {
  .cal-dots span { font-size: 10px; }
  .cal-dots { gap: 1px; }
}

/* (6) Side-nav affordance: a small "‹" on the left edge so visitors know the
   hover menu is there. It fades out while the menu is open (hovering the
   trigger zone or the list) and returns when it closes. Not shown on mobile —
   the side-nav itself is display:none there. */
.side-nav::after {
  content: "›";
  position: absolute;
  left: 33px;            /* inside the decorative frame (its inner border ~26-28px) */
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--pink-deep);
  opacity: .55;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.95);
  transition: opacity .35s ease;
  animation: sn-hint-nudge 2.4s ease-in-out infinite;
}
@keyframes sn-hint-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(3px); }
}
.side-nav:has(.side-nav-zone:hover)::after,
.side-nav:has(.side-nav-list:hover)::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .side-nav::after { animation: none; } }

/* (5) Past Events → a horizontal 1-up carousel (newest first; swipe on touch,
   arrows on desktop). Replaces the 3-column grid markup with `.arch-track`. */
.arch-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 0 10px;
}
.arch-track::-webkit-scrollbar { display: none; }
.arch-track > .arch-card {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  scroll-snap-align: center;
  padding: 0 2px;
}
/* one card per view: a proper 16:9 featured image. height:auto overrides the
   image-slot host's default 160px so aspect-ratio governs the height. */
.arch-track > .arch-card image-slot { height: auto; aspect-ratio: 16 / 9; }
.arch-track > .arch-card .arch-date { font-size: 15px; margin-top: 8px; }
.arch-track > .arch-card .arch-title { font-size: 13px; }

/* (7) Dark mode showed BLACK around the frame: the page is light-only but never
   declared it, so the browser painted the root "canvas" dark, and any area the
   body/bg-field didn't cover (frame margin + the corner-sparkle overflow) went
   black. Declare the page light and give the root a cream background; clip the
   stray horizontal overflow at the root too. */
:root { color-scheme: light; }
html { background: var(--cream); overflow-x: clip; }

/* (8) Hero name uses margin-left:-0.6em to optically pull the title left. On
   narrow desktop widths (e.g. a 1080-wide portrait monitor) that pushes the
   logo/name OUT over the left frame border. Keep the pull only on wide screens
   where there is room; align it normally below that. */
@media (max-width: 1300px) {
  .hero-name-jp { margin-left: 0; }
}

/* (9) "Add to calendar" control in the calendar side panel. The event row is now
   a div (link + button) instead of a single anchor. */
.ev-link { display: flex; gap: 14px; align-items: center; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.ev-cal { position: relative; flex: 0 0 auto; }
.ev-cal-btn {
  width: 32px; height: 32px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--cream-2); color: var(--pink-deep); display: grid; place-items: center;
  transition: background .18s, transform .18s;
}
.ev-cal-btn:hover { background: var(--pink-soft); transform: scale(1.08); }
.ev-cal-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 6;
  background: var(--paper); border-radius: 12px; box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 200, 225, 0.5); padding: 6px;
  display: flex; flex-direction: column; gap: 2px; min-width: 172px;
}
.ev-cal-menu a, .ev-cal-menu button {
  display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink);
  background: none; border: none; text-align: left; font-family: var(--font-body);
  font-size: 13px; font-weight: 600; padding: 9px 10px; border-radius: 8px;
  cursor: pointer; white-space: nowrap;
}
.ev-cal-menu a:hover, .ev-cal-menu button:hover { background: var(--cream-2); }
/* Keep the open menu above everything: elevate the row that owns it, and don't
   let other rows' hover-shift create stacking contexts that cover the menu. */
.ev-item:has(.ev-cal-menu) { position: relative; z-index: 7; }
.cal-side:has(.ev-cal-menu) .ev-item:hover { transform: none; }

/* (12) Main Activities section — 6 cards (image + title). Only linked cards lift. */
.act-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; max-width: 1000px; margin: 0 auto; }
.act-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.act-card { transition: transform .25s; }
.act-card:hover { transform: translateY(-5px); }
.act-imgwrap {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-sm); border: 2px solid var(--pink-soft); background: var(--cream-2);
  transition: border-color .25s, box-shadow .25s;
}
.act-card:hover .act-imgwrap { border-color: var(--pink); box-shadow: var(--shadow-md); }
.act-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-soon {
  width: 100%; height: 100%; display: grid; place-items: center; text-align: center; line-height: 1.2;
  font-family: var(--font-accent); font-weight: 700; font-size: 15px; color: var(--pink-deep);
  background: var(--grad-soft);
}
.act-title { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); }
@media (max-width: 900px) { .act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .act-grid { grid-template-columns: 1fr; max-width: 360px; } }

/* (10) Background: white is the MAIN tone; pink/yellow only as faint accents.
   --cream is set inline by the app script, so override it with !important. */
:root { --cream: #ffffff !important; }
.bg-field {
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(255, 144, 193, 0.10), transparent 70%),
    radial-gradient(55% 45% at 88% 18%, rgba(255, 216, 107, 0.10), transparent 72%),
    radial-gradient(60% 55% at 78% 92%, rgba(255, 144, 193, 0.07), transparent 70%),
    radial-gradient(50% 50% at 10% 88%, rgba(255, 216, 107, 0.06), transparent 72%),
    var(--cream);
}
.bg-orb { opacity: 0.18; }

/* (11) Remove the pink page-frame border, keep only the yellow inner one.
   Keep the 3px border width but make it transparent so the yellow ::after
   border stays exactly where it was; drop the pink outer glow. */
.app { border-color: transparent; box-shadow: none; }