styles.css

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=Noto+Serif+JP:wght@200;300;400&display=swap");
:root{color-scheme:dark;--ink:#050607;--paper:#e8e2d6;--dim:#77736b}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);color:var(--paper)}button,a,input{color:inherit;font:inherit}button{cursor:pointer}#film{position:relative;width:100vw;height:100svh;overflow:hidden;isolation:isolate;background:#050607;font-family:"DM Mono",monospace}#world{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 47%,transparent 12%,rgba(0,0,0,.09) 48%,rgba(0,0,0,.78) 115%);mix-blend-mode:multiply}.grain{position:absolute;inset:-40%;pointer-events:none;opacity:.085;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .16s steps(2) infinite}.flash{position:absolute;inset:0;pointer-events:none;background:#eee8da;opacity:0;mix-blend-mode:screen}.flash.is-active{animation:rupture .9s cubic-bezier(.1,.7,.2,1)}@keyframes rupture{0%{opacity:0}8%{opacity:.84}14%{opacity:.05}23%{opacity:.3}100%{opacity:0}}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(2%,-3%)}50%{transform:translate(-3%,2%)}75%{transform:translate(3%,1%)}100%{transform:translate(-1%,-2%)}}header{position:absolute;z-index:5;top:0;left:0;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:29px 34px;font-size:9px;letter-spacing:.18em}.mark{text-decoration:none;letter-spacing:.27em}.chapter{display:flex;gap:13px;margin:0;color:#706d66}.chapter span{color:#c6c0b5}.chapter b{font-weight:300}#sound{justify-self:end;border:0;padding:8px 0 8px 18px;background:none;font-size:8px;letter-spacing:.16em}.title{position:absolute;z-index:4;left:6.3vw;top:50%;width:min(620px,48vw);transform:translateY(-47%);transition:opacity 1.35s ease,transform 1.7s cubic-bezier(.2,.8,.2,1)}.title.is-hidden{opacity:0;transform:translateY(-43%);pointer-events:none}.title>p{margin:0 0 27px;color:#77736b;font-size:8px;letter-spacing:.25em}h1{margin:0;font-family:"Noto Serif JP",serif;font-size:clamp(48px,6.4vw,104px);font-weight:200;line-height:1.25;letter-spacing:-.075em;text-shadow:0 2px 40px rgba(0,0,0,.7)}h1 em{color:#b9c5c2;font-style:normal}.words{display:flex;gap:28px;width:min(430px,100%);margin-top:42px}.words label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;width:50%;border-bottom:1px solid rgba(229,224,212,.23);padding:0 1px 9px}.words label span{color:#77736b;font-size:7px;letter-spacing:.2em}.words input{min-width:0;width:100%;border:0;outline:0;background:none;font-family:"Noto Serif JP",serif;font-size:13px;letter-spacing:.06em}.words label:focus-within{border-color:rgba(229,224,212,.78)}#begin{display:flex;align-items:center;justify-content:space-between;width:230px;margin-top:30px;border:0;border-bottom:1px solid rgba(229,224,212,.42);padding:14px 2px;background:none;font-size:9px;letter-spacing:.14em;transition:width .45s ease,border-color .3s}#begin:hover{width:275px;border-color:var(--paper)}#begin i{font-style:normal}.narrative{position:absolute;z-index:3;inset:0;display:grid;place-items:center;pointer-events:none}.narrative p{max-width:min(72vw,860px);margin:0;font-family:"Noto Serif JP",serif;font-size:clamp(22px,3.2vw,52px);font-weight:200;letter-spacing:.06em;line-height:1.75;text-align:center;opacity:0;filter:blur(8px);transform:translateY(13px);transition:opacity 1.4s ease,filter 1.4s ease,transform 1.4s ease;text-shadow:0 2px 34px #000}.narrative p.is-visible{opacity:.9;filter:blur(0);transform:translateY(0)}.gesture{position:absolute;z-index:4;left:50%;bottom:62px;display:flex;align-items:center;gap:12px;margin:0;color:#6d6962;font-size:7px;letter-spacing:.2em;transform:translateX(-50%);opacity:0;transition:opacity 1s}.gesture.is-visible{opacity:1}.gesture span{width:22px;height:22px;border:1px solid #69665f;border-radius:50%;animation:orbit 2.6s ease-in-out infinite}.save{position:absolute;z-index:5;right:34px;bottom:58px;border:0;background:none;color:#68655f;font-size:7px;letter-spacing:.18em;opacity:0;pointer-events:none;transition:opacity .8s}.save.is-visible{opacity:1;pointer-events:auto}@keyframes orbit{50%{transform:translateX(9px) scale(.72);opacity:.35}}footer{position:absolute;z-index:4;left:0;bottom:0;width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:15px;padding:24px 34px;color:#625f59;font-size:7px;letter-spacing:.14em}footer p{margin:0}.timeline{height:1px;background:rgba(224,218,206,.14)}.timeline i{display:block;width:0;height:100%;background:#b4aea3}@media(max-width:700px){header{grid-template-columns:1fr 1fr;padding:21px 19px}.chapter{position:absolute;top:58px;left:19px}.title{left:25px;width:calc(100% - 50px);top:auto;bottom:11vh;transform:none}.title.is-hidden{transform:translateY(15px)}h1{font-size:clamp(44px,14vw,72px)}.words{gap:16px;margin-top:30px}.words label{grid-template-columns:1fr}.words label span{font-size:6px}#begin{margin-top:24px}footer{grid-template-columns:35px 1fr;padding:18px 19px}footer p:last-child{display:none}.gesture{bottom:49px;white-space:nowrap}.save{right:19px;bottom:47px}}@media(prefers-reduced-motion:reduce){.grain,.gesture span{animation:none}}