/* NemuriOn / ねむり音日記 — bedside night-notebook pages. Written for this app only. */
:root{
  --sky:#0f1729; --deep:#090c1b; --glow:#332b66; --card:#1e293b;
  --moon:#94a3b8; --lamp:#c4a882; --lav:#b8a3f4; --violet:#745dd9; --sage:#8fb390;
  --ink:#e8e4f6; --hair:rgba(184,163,244,.18);
}
*{box-sizing:border-box}
html{background:var(--deep)}
body{margin:0;color:var(--ink);font:16px/1.85 "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",Georgia,serif;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%,#fff8 50%,transparent 51%),
    radial-gradient(1px 1px at 31% 9%,#fff6 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 68% 14%,#fff7 50%,transparent 51%),
    radial-gradient(1px 1px at 84% 31%,#fff5 50%,transparent 51%),
    radial-gradient(1px 1px at 47% 26%,#fff4 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 92% 7%,#fff6 50%,transparent 51%),
    linear-gradient(180deg,rgba(51,43,102,.9) 0,var(--sky) 380px,var(--deep) 100%);
  background-attachment:fixed;min-height:100vh}
html[lang=en] body{font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif}
a{color:var(--lav);text-underline-offset:3px}
a:hover{color:#fff}
.sky{max-width:760px;margin:0 auto;padding:28px 22px 0;display:flex;align-items:center;gap:14px}
.moon{width:38px;height:38px;border-radius:50%;flex:none;box-shadow:inset -11px -4px 0 0 #f3e7c9;transform:rotate(-18deg);filter:drop-shadow(0 0 10px rgba(243,231,201,.45))}
.title{flex:1;line-height:1.25}
.title b{display:block;font-size:19px;letter-spacing:.06em}
.title small{color:var(--moon);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-family:ui-sans-serif,system-ui,sans-serif}
.lang{display:flex;border:1px solid var(--hair);border-radius:999px;overflow:hidden;font:12px/1 ui-sans-serif,system-ui,sans-serif}
.lang a,.lang span{padding:7px 12px;text-decoration:none}
.lang span{background:var(--lav);color:var(--deep);font-weight:700}
.lang a{color:var(--moon)}
/* the night rail: bedtime -> midnight -> morning */
.rail{max-width:760px;margin:22px auto 0;padding:0 22px}
.rail ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.rail ol:before{content:"";position:absolute;left:16.6%;right:16.6%;top:11px;height:2px;background:linear-gradient(90deg,var(--lamp),var(--lav),var(--sage));opacity:.55}
.rail li{text-align:center;position:relative}
.rail a{display:block;text-decoration:none;color:var(--moon);font:13px/1.4 ui-sans-serif,system-ui,sans-serif}
.rail a:before{content:"";display:block;width:14px;height:14px;margin:4px auto 8px;border-radius:50%;background:var(--sky);border:2px solid var(--lav)}
.rail a time{display:block;font-size:11px;letter-spacing:.12em;opacity:.7}
.rail a[aria-current]{color:#fff}
.rail a[aria-current]:before{background:var(--lamp);border-color:var(--lamp);box-shadow:0 0 0 6px rgba(196,168,130,.18),0 0 18px var(--lamp)}
main{max-width:760px;margin:26px auto 0;padding:0 16px 40px}
.page{background:linear-gradient(180deg,rgba(30,41,59,.92),rgba(20,28,46,.94));border:1px solid var(--hair);border-radius:28px;padding:34px 30px 30px;box-shadow:0 30px 60px -30px rgba(116,93,217,.55)}
.page h1{margin:0;font-size:28px;line-height:1.35;letter-spacing:.04em;font-weight:600}
.dated{margin:8px 0 0;color:var(--lamp);font:13px/1.5 ui-sans-serif,system-ui,sans-serif;letter-spacing:.06em}
.lede{margin:22px 0 6px;padding:16px 18px;border-radius:18px;background:rgba(9,12,27,.55);border-left:3px solid var(--lamp);color:#d9d3ea}
.night{margin-top:30px}
.night h2{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;font-size:19px;font-weight:600;color:#fff}
.night h2 .phase{flex:none;width:16px;height:16px;border-radius:50%;background:var(--sky);border:1.5px solid var(--lav);position:relative;top:2px;overflow:hidden}
.night h2 .phase:after{content:"";position:absolute;inset:0;background:var(--lav);border-radius:50%;transform:translateX(var(--fill,100%))}
.night p,.night li{color:#d6d2e6}
.night ul{padding-left:1.1em}
.night li{margin:4px 0}
.night li::marker{color:var(--lav)}
.keep{display:grid;gap:10px;margin:12px 0;padding:0;list-style:none}
.keep li{margin:0;padding:12px 14px;border:1px dashed var(--hair);border-radius:14px;background:rgba(15,23,41,.6)}
.keep b{color:var(--lamp);font-weight:600}
table.perm{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:15px}
.perm th{text-align:left;color:var(--moon);font:12px ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;padding:0 10px}
.perm td{background:rgba(15,23,41,.7);padding:11px 12px;vertical-align:top;color:#d6d2e6}
.perm td:first-child{border-radius:12px 0 0 12px;color:var(--lav);white-space:nowrap}
.perm td:last-child{border-radius:0 12px 12px 0}
.sent{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.sent div{border-radius:16px;padding:12px 14px;background:rgba(9,12,27,.55)}
.sent h3{margin:0 0 4px;font:600 13px ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em}
.sent .go h3{color:var(--lav)} .sent .stay h3{color:var(--sage)}
.sent ul{margin:0;padding-left:1.1em;font-size:15px}
.mail{display:inline-block;margin-top:6px;padding:10px 18px;border-radius:999px;background:var(--lav);color:var(--deep);text-decoration:none;font:600 15px ui-sans-serif,system-ui,sans-serif}
.mail:hover{background:#fff;color:var(--deep)}
.hub{display:grid;gap:12px;margin-top:22px}
.hub a{display:block;padding:16px 18px;border-radius:18px;border:1px solid var(--hair);background:rgba(9,12,27,.5);text-decoration:none;color:#fff}
.hub a span{display:block;color:var(--moon);font-size:14px}
footer{max-width:760px;margin:0 auto;padding:0 22px 40px;color:var(--moon);font:12px/1.6 ui-sans-serif,system-ui,sans-serif;text-align:center;opacity:.8}
@media (max-width:560px){.page{padding:26px 18px;border-radius:22px}.page h1{font-size:23px}.sent{grid-template-columns:1fr}.perm td:first-child{white-space:normal}.title small{display:none}}