@font-face{font-family:PixelUI;src:url('/fonts/fusion-pixel/fusion-pixel-12px-proportional-ja.otf.woff2') format('woff2');font-display:swap}
@font-face{font-family:"Pixelingo 2";src:url('/assets/city-home-v03/Tiny5-Regular.ttf') format('truetype');font-display:swap}
html{--reader-bg:#eeebe5;--reader-paper:#fffcf5;--reader-ink:#343740;--reader-edge:#b2ada4;--reader-button:#a7d8ce;--reader-shadow:#5e9a91;background:var(--reader-bg);height:100%}
html[data-ui-theme=dark]{--reader-bg:#202428;--reader-paper:#282d32;--reader-ink:#e6ebee;--reader-edge:#515b64;--reader-button:#8bbeb5;--reader-shadow:#43665e}
html body{box-sizing:border-box;margin:0;padding:16px;height:100dvh;display:grid;grid-template-rows:48px minmax(0,1fr) 54px;gap:16px;overflow:hidden;background:var(--reader-bg);color:var(--reader-ink);font-family:PixelUI,sans-serif}
body>header{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:12px}h1{font:400 22px/1 "Pixelingo 2",sans-serif;text-align:center;margin:0}body>header>img{width:32px;height:32px;object-fit:contain;justify-self:center}
button{cursor:pointer;touch-action:manipulation}#attach-reader{display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid var(--reader-edge);border-radius:12px;background:var(--reader-paper);box-shadow:0 3px 0 var(--reader-edge);color:inherit}#attach-reader svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#reader-content{min-height:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--reader-edge);border-radius:16px;padding:20px;background:var(--reader-paper);color:inherit}
#reader-content>*,#reader-content #translation-body{height:auto;min-height:0;background:none;border:0;padding:0;overflow:visible;color:inherit}
#reader-content :is(.reading-card,.passage,.language-block){border:0;background:none;box-shadow:none;padding:8px 0;color:inherit}#reader-content .language-block+.language-block{border-top:1px solid var(--reader-edge)}#reader-content .japanese{font-size:26px;line-height:1.5}#reader-content .french{font-size:23px;line-height:1.4}#reader-content .romaji{font-size:17px;line-height:1.4;opacity:.8}#reader-content .history-panel{margin-top:24px;border-top:1px solid var(--reader-edge);padding-top:16px}#reader-content .history button{color:inherit}
#reader-content [hidden]{display:none!important}#reader-content .icon{width:22px;height:22px}#reader-content .promenade-history{padding-top:16px}#reader-content .promenade-history-list{display:grid;gap:12px}
#reader-translate{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;border:1px solid var(--reader-shadow);border-radius:13px;background:var(--reader-button);color:#203f3a;box-shadow:0 4px 0 var(--reader-shadow);font:400 25px/1 "Pixelingo 2",sans-serif}#reader-translate img{width:27px;height:27px;filter:none}#reader-translate:active{transform:translateY(3px);box-shadow:0 1px 0 var(--reader-shadow)}button:disabled{opacity:.5;cursor:default}