:root{font-family:"PingFang SC","Microsoft Yahei",sans-serif;color:#4a4c43;background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;background:#fff;overflow:hidden}#portrait{position:relative;width:min(100vw,56.25dvh);height:min(100dvh,177.7778vw);background:#fff}#scene{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}button{font:inherit;color:inherit;border:0;cursor:pointer;background:none;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #728346;outline-offset:4px}#instruction{position:absolute;bottom:13%;width:100%;text-align:center;color:#999d91;font-size:14px;letter-spacing:2px;pointer-events:none;margin:0}#status{position:absolute;top:50%;width:100%;text-align:center;color:#999;font-size:14px}#status:empty{display:none}#days{display:none}#days:focus-within{display:flex}#slicePanel{position:absolute;inset:0;pointer-events:none}#slicePanel[hidden]{display:none}#back{position:absolute;left:8%;top:8%;padding:10px 0;font-size:14px;pointer-events:auto;color:#777d6e}#dayLabel{position:absolute;right:8%;top:8%;margin:10px 0;font-size:12px;letter-spacing:2px;color:#858c7a}#dayTitle,.layerHint{display:none}#layers{position:absolute;left:0;right:0;bottom:19%;display:flex;justify-content:center;gap:7px}#layers button{pointer-events:auto;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;transition:background .2s}#layers button:hover{background:#f4f5ee}#layers i{display:block;width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 3px white,0 0 0 4px #e8eade}#layers span{display:none}dialog{border:0;padding:12px;background:#fff;color:#4a4c43;width:min(90vw,50.625dvh);height:min(82dvh,145.77vw);border-radius:4px;box-shadow:0 12px 70px #0002;overflow:hidden}dialog[open]{display:flex;flex-direction:column;animation:unfold .5s cubic-bezier(.2,.8,.2,1)}dialog::backdrop{background:#fff9;backdrop-filter:blur(5px)}.photoHead,.photoFoot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;flex-shrink:0}.photoHead button{padding:12px 0;font-size:12px}.photoFoot button{padding:12px;font-size:22px;width:50px}#media{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:8px 0;overflow:hidden}#media img,#media video{width:100%;height:100%;object-fit:contain}.photoFoot{color:#858b7e}@keyframes unfold{from{opacity:0;transform:translateY(80px) scale(.4)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Comfortable touch targets, with an uncluttered portrait canvas. */
button{min-height:44px;touch-action:manipulation}#layers button{width:46px;height:46px}#layers i{width:16px;height:16px}#back{min-width:88px}#media img{touch-action:pan-y;user-select:none;-webkit-user-drag:none}.photoHead button{min-width:88px}.photoFoot button{min-height:48px;min-width:48px}#days{position:absolute;bottom:6%;left:4%;right:4%;flex-wrap:wrap;justify-content:center;gap:6px}#days button{font-size:14px;padding:8px 10px;background:#f6f6f0;border-radius:6px}
@media(pointer:coarse),(max-width:600px){
 body{--usable:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:100svh;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);overscroll-behavior:none}
 #portrait{width:min(100vw,calc(var(--usable) * .5625));height:min(var(--usable),177.7778vw)}
 #instruction{font-size:13px;letter-spacing:.6px;bottom:10%;color:#73796b}#layers{bottom:17%;gap:6px}#back{top:5%;left:6%}#dayLabel{top:5%;right:6%;font-size:14px}
 dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px calc(env(safe-area-inset-bottom,0px) + 8px);box-shadow:none}.photoHead,.photoFoot{font-size:14px}.photoHead button{font-size:14px}#media{margin:6px 0}.photoFoot{min-height:52px}
}

/* Keep the existing date controls available on touch devices, too. */
#days{display:flex;bottom:3%;gap:2px}#days button{font-size:11px;padding:6px;min-width:38px;min-height:44px}#days button.active{background:#edf0e3;color:#586c37}

#days{flex-wrap:nowrap;bottom:2%;gap:2px}#days button{flex:1;min-width:0;padding:4px 2px;font-size:10px;white-space:nowrap}#instruction{bottom:11%;letter-spacing:.5px}#layers{bottom:19%}