:root{color-scheme:light;--paper:#f0ede5;--ink:#171918;--red:#b93822}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}main{position:absolute;inset:64px 0 82px;overflow:hidden}#field{position:absolute;inset:0}article{position:absolute;left:3vw;width:94vw;bottom:0;will-change:transform,opacity;transition:transform 1.1s cubic-bezier(.2,.75,.15,1),opacity 1.2s;transform-origin:left bottom}article button{display:block;border:0;background:none;text-align:left;color:inherit;padding:0;cursor:pointer;width:100%;font:inherit}article p{font-size:clamp(32px,6.6vw,102px);font-weight:800;line-height:.99;letter-spacing:-.052em;margin:6px 0 0;overflow-wrap:anywhere;display:block;overflow:visible}article small{font:12px/1.4 ui-monospace,monospace;letter-spacing:0;color:var(--red)}article.new{animation:arrive 1.1s cubic-bezier(.16,1,.3,1)}@keyframes arrive{from{opacity:0;translate:0 65px}to{opacity:1;translate:0 0}}#message{position:absolute;left:3vw;bottom:0;max-width:70vw;font:16px/1.5 ui-monospace,monospace}.about{position:fixed;right:16px;top:16px;width:40px;height:40px;border:1px solid #17191855;border-radius:50%;font:18px Georgia,serif;background:var(--paper);z-index:3}footer{position:fixed;bottom:0;left:0;right:0;height:82px;padding:12px 3vw 16px;display:flex;align-items:start;gap:12px;background:var(--paper);border-top:1px solid #17191820;font:12px/1.5 ui-monospace,monospace}.clock{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.date-label{position:relative;cursor:pointer}.date-label input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.date-label:focus-within{outline:2px solid var(--red);outline-offset:4px}#date-text{border-bottom:1px dotted #17191866}input[type=time]{font:inherit;background:none;border:0;border-bottom:1px dotted #17191866;color:inherit;padding:0;width:130px}#mode{color:var(--red)}.actions{margin-left:auto;display:flex;gap:6px;white-space:nowrap}button{cursor:pointer}footer button,.reader-nav button{font:inherit;color:inherit;background:none;border:1px solid #17191840;border-radius:0;padding:0 9px;min-height:28px;min-width:30px}footer small{position:absolute;bottom:15px;left:3vw;font-size:10px;max-width:90vw;color:#555751}dialog{border:1px solid #b9b5aa;background:var(--paper);color:var(--ink);padding:32px;max-width:560px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;box-shadow:0 18px 100px #17191833}dialog::backdrop{background:#17191866}dialog h1,dialog h2{font-size:26px;letter-spacing:-.04em;margin:0 30px 24px 0}dialog p{font-size:16px;line-height:1.5}.source{color:#555751;font-size:12px}nav{display:flex;gap:24px;margin-top:25px}a{color:inherit;font-size:13px}.close{position:absolute;right:12px;top:10px;border:0;background:none;color:inherit;font-size:26px}#reader-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:21px;line-height:1.3}.reader-nav{display:flex;align-items:center;justify-content:space-between;gap:15px;font:12px ui-monospace,monospace}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:4px}[hidden]{display:none!important}@media(max-width:600px){main{bottom:102px}footer{height:102px;padding-top:12px}.clock{gap:7px;max-width:67vw}#mode{font-size:10px}.actions{gap:3px}article p{font-size:clamp(35px,9.8vw,62px)}article small{font-size:11px}dialog{padding:25px}footer small{font-size:9px;bottom:12px}}@media(prefers-reduced-motion:reduce){article{transition:none;will-change:auto}article.new{animation:none}}
