:root{
  --fs-title: 21px;
  --fs-body: 16px;
  --fs-note: 13px;
  --ink:#2b2b2b; --ink-sub:#6c6a62; --line:#e4e2d8; --paper:#fbfaf5;
  --mat:#F4F2EA;
  --desk:#E8E4DA;
  --serif:"Playfair Display","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --app-x:20px;
}
button{user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
.app{min-height:100vh; min-height:100dvh; max-width:430px; margin:0 auto;
  padding:var(--app-y) var(--app-x) 0; display:flex; flex-direction:column;}
.poster{flex:none; position:relative; margin:0 calc(var(--wall, 0px) - var(--app-x));}
.poster .paper{position:absolute; inset:0; width:100%; height:100%; display:block;}
.poster .stage{position:absolute;}
.canvas{width:100%; height:auto; display:block;}
.tag{font-family:var(--serif); font-size:var(--fs-note); color:var(--ink-sub); margin:8px 0 0; letter-spacing:.04em;}
.tag span{display:inline-block;}
@media (min-width:500px){
  :root{--wall:clamp(0px, calc((100vw - 430px) / 2), 64px);}
  :root{--app-x:calc(20px + var(--wall));}
  body:has(.app){background:var(--desk);}
  body .app{background:var(--mat);
    box-shadow:0 0 0 1px rgba(90,80,55,.06), 0 8px 40px rgba(90,80,55,.10);
    max-width:calc(430px + var(--wall) * 2);}
}
:root{
  --app-y: max(8px, env(safe-area-inset-top));
  --bar-x: 2px;
}
@media (min-width:500px){
  :root{ --app-y:16px; --bar-x:16px; }
}
.bar{flex:none; height:44px; display:flex; align-items:center;
  margin:0 calc(var(--bar-x) - var(--app-x));}
.back, .menu-btn{width:44px; height:44px; flex:none; padding:0; border:0; background:transparent;
  cursor:pointer; color:var(--ink-sub); text-decoration:none;
  display:flex; align-items:center; justify-content:center;}
.menu-btn{margin-left:auto;}
.back svg{width:9px; height:16px;}
.menu-btn svg{width:18px; height:18px;}
.back svg path, .menu-btn svg path{stroke-width:1.6;}
.site-brand{flex:1; min-width:0; margin:0; line-height:0;
  display:flex; align-items:center; justify-content:center;}
.site-brand .logo{height:34px; width:auto; max-width:100%; flex:none; color:#4c4b47;}
.site-brand > a{display:inherit; align-items:inherit; justify-content:inherit; gap:inherit;
  color:inherit; text-decoration:none;}
.sheet{position:fixed; inset:0; z-index:10; background:var(--bg);
  display:flex; flex-direction:column;}
.menu-panel{--app-x:20px; display:flex; flex-direction:column; width:100%; min-height:100%;
  padding:var(--app-y) var(--app-x) 0;}
@media (min-width:500px){
  body .sheet{background:rgba(43,43,43,.12);}
  .menu-panel{width:320px; margin-left:auto;
    margin-right:max(0px, calc((100% - 430px) / 2 - var(--wall)));
    padding:var(--app-y) 16px 0;
    background:var(--bg); box-shadow:-4px 0 24px rgba(43,43,43,.10);}
  .menu-panel .bar{margin:0;}
}
.sheet[hidden]{display:none;}
.sheet .bar{justify-content:flex-end;}
.menu-links{display:flex; flex-direction:column; padding:28px 0; overflow-y:auto;}
.menu-links a{display:block; padding:17px 8px; border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none; font-family:var(--sans); font-size:var(--fs-body);}
.menu-links a:first-child{border-top:1px solid var(--line);}
.menu-links a:focus-visible{outline:2px solid var(--ink); outline-offset:-2px;}
.external-icon{display:inline-block; width:16px; height:16px; margin-left:3px;
  vertical-align:-3px;}
.info-body{--bg:var(--mat); margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-note); line-height:1.8;
  -webkit-font-smoothing:antialiased;}
.info-content{padding:24px 0 48px; overflow-wrap:anywhere;}
@media (min-width:500px){
  .info-content{margin-inline:-16px;}
}
.info-content h1{font-size:var(--fs-title); line-height:1.45; font-weight:600; margin:0 0 24px;}
.info-content h2{font-size:var(--fs-body); line-height:1.5; font-weight:600; margin:34px 0 12px;}
.info-content p,.info-content ol,.info-content ul{margin:0 0 20px;}
.info-content ol,.info-content ul{padding-left:1.5em;}
.info-content li{margin-bottom:8px;}
.info-content a{color:var(--ink); text-underline-offset:3px;}
.info-content .updated{font-size:var(--fs-note); color:var(--ink-sub);}
.copy{flex:none; margin-top:auto; padding:28px 0 max(16px,env(safe-area-inset-bottom));
  text-align:center; font-family:var(--sans); font-size:var(--fs-note);
  line-height:16px; letter-spacing:.04em; color:var(--ink-sub);}
.tile{transform-box:fill-box; transform-origin:50% 100%;}
.anim .tile{animation:drop .46s linear backwards;}
@keyframes drop{
  0%  {transform:translateY(var(--fall,-56px)) scaleY(1); opacity:0;
       animation-timing-function:cubic-bezier(.45,0,.85,.4);}
  15% {opacity:1;}
  72% {transform:translateY(0) scaleY(1);}
  84% {transform:translateY(0) scaleY(.72);}
  100%{transform:translateY(0) scaleY(1);}
}
.anim .dust{animation:dust .5s ease-out backwards;}
@keyframes dust{ from{opacity:0;} to{opacity:1;} }
@media (prefers-reduced-motion:reduce){ .anim .tile, .anim .dust{animation:none;} }