:root{--paper: #f5f2ea;--ink: #1e2723;--muted: #56605a;--accent: #a83a2c;--tick: #d8d2c3;--tick-past: #9ca59c;--control: #ffffff;--font-sans: "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--font-haiku: "Instrument Serif", Georgia, serif;--font-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", serif;--space-1: 8px;--space-2: 16px;--space-3: 24px;--space-4: 32px}*{box-sizing:border-box;margin:0}html,body{height:100%;background:var(--paper);color:var(--ink);font-family:var(--font-sans);line-height:1.5;-webkit-font-smoothing:antialiased}body{min-height:100vh;overflow:hidden;user-select:none;-webkit-user-select:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.silk{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.silk__ribbons{opacity:.14}.silk__ribbons path{animation:silk-in 1.6s ease-out both}@keyframes silk-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.silk__ribbons path{animation:none}}.screen{position:relative;z-index:1;height:100vh;min-height:240px;display:grid;grid-template-rows:auto 1fr auto;gap:var(--space-2);padding:var(--space-3) var(--space-4)}.screen__header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);font-size:clamp(12px,2.4vh,16px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.sekki{color:var(--ink)}.header__right{display:flex;align-items:center;gap:var(--space-2)}.number{font-variant-numeric:tabular-nums;white-space:nowrap}.city-select{padding:2px var(--space-1);border:1px solid var(--tick);border-radius:999px;background:var(--control);color:var(--ink);font:inherit;font-size:12px;font-weight:600;text-transform:none;letter-spacing:normal;cursor:pointer;transition:border-color .2s ease,color .2s ease}.city-select:hover{border-color:var(--accent);color:var(--accent)}.today-button{display:inline-flex;align-items:center;gap:4px;padding:2px var(--space-1);border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap;transition:background-color .2s ease,color .2s ease}.today-button:hover{background:var(--paper);color:var(--accent)}.today-button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.today-button:hover{background:var(--accent);color:var(--control)}.today-button[hidden]{display:none}.header__actions{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1)}.help-button{width:28px;height:28px;border:1px solid var(--tick);border-radius:50%;background:var(--control);color:var(--ink);font-size:14px;font-weight:600;line-height:1;transition:border-color .2s ease,color .2s ease}.help-button:hover{border-color:var(--accent);color:var(--accent)}.about{width:min(520px,calc(100vw - 32px));max-height:85vh;margin:auto;overflow-y:auto;padding:0;border:0;border-radius:16px;background:var(--control);color:var(--ink);box-shadow:0 16px 48px #1e272340}.about[open]{animation:about-in .2s ease-out}.about::backdrop{background:#1e272373}.about__header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-3) var(--space-2);background:var(--control)}.about__title{font-size:18px;font-weight:600;line-height:1.2}.icon-button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:24px;line-height:1}.icon-button:hover{background:var(--paper);color:var(--ink)}.about__body{padding:0 var(--space-3) var(--space-3);font-size:15px;line-height:1.5;color:var(--ink)}.about__body p+p{margin-top:var(--space-2)}.about__body em{font-style:italic}.about__source{color:var(--muted);font-size:13px}.about__body a{color:var(--accent)}@keyframes about-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.screen__body{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-2);min-height:0}.stage{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--space-4);min-width:0;min-height:0;touch-action:pan-y}.nav-button{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--tick);border-radius:50%;background:var(--control);color:var(--ink);transition:border-color .2s ease,color .2s ease,transform .15s ease}.nav-button:hover{border-color:var(--accent);color:var(--accent)}.nav-button:active{transform:scale(.94)}.nav-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.kanji{font-family:var(--font-serif);font-size:clamp(56px,22vh,150px);font-weight:400;line-height:1.2;color:var(--accent)}.details{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.romaji{font-size:clamp(14px,3vh,22px);font-weight:600;line-height:1.2}.meaning{font-family:var(--font-haiku);font-size:clamp(15px,2.8vh,21px);line-height:1.5;color:var(--muted)}.meaning span{display:block}.day-count{font-size:10px;color:#8a938d}.dates{margin-top:var(--space-2);font-size:clamp(11px,2vh,13px);color:var(--muted);font-variant-numeric:tabular-nums}.enter-next{animation:enter-from-right .32s ease-out both}.enter-prev{animation:enter-from-left .32s ease-out both}.ticks{display:flex;gap:4px}.ticks button{position:relative;flex:1;height:28px;padding:0;border:0;background:none;cursor:pointer}.ticks button:before{content:"";position:absolute;top:0;bottom:8px;left:0;right:0;border-radius:2px;background:var(--tick);transition:background-color .3s ease}.ticks button:hover:before{background:var(--tick-past)}.ticks .is-past:before{background:var(--tick-past)}.ticks .is-today:after{content:"";position:absolute;left:50%;bottom:0;width:4px;height:4px;transform:translate(-50%);border-radius:50%;background:var(--ink)}.ticks .is-selected:before{background:var(--accent)}@media (min-aspect-ratio: 5/2){.screen{padding:var(--space-2) var(--space-3)}.kanji{font-size:clamp(40px,15vh,96px)}.meaning{font-size:clamp(13px,2.6vh,18px)}}@media (max-width: 640px) and (max-aspect-ratio: 3/2){.screen{padding:var(--space-2)}.screen__body{grid-template-columns:auto 1fr auto;gap:var(--space-1)}.stage{grid-template-columns:1fr;gap:var(--space-2);justify-items:center;text-align:center}.kanji{font-size:clamp(48px,15vh,110px)}.nav-button{width:40px;height:40px}.details{align-items:center}}@keyframes enter-from-right{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes enter-from-left{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion: reduce){.enter-next,.enter-prev{animation:none}}