@font-face{font-family:"Barlow";src:url("fonts/Barlow-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Josefin Sans";src:url("fonts/JosefinSans-VariableFont_wght.ttf") format("truetype");font-weight:100 700;font-style:normal;font-display:swap}
:root{--font-body:"MJ Chinese","Barlow",Arial,sans-serif;--font-title:"MJ Chinese","Josefin Sans",sans-serif}
.title-font{font-family:var(--font-title)}
/* Song/Ming serif for Chinese glyphs; Latin text keeps its existing typeface. */
@font-face{font-family:"MJ Chinese";src:local("Songti TC Regular"),local("STSongti-TC-Regular"),local("Songti TC"),local("Songti SC"),local("PMingLiU"),local("Noto Serif CJK TC"),local("SimSun");font-weight:100 900;unicode-range:U+2E80-9FFF,U+F900-FAFF,U+FE30-FE4F,U+20000-323AF;font-display:swap}
:root{--tile-width:clamp(159.5px,24.2vw,242px);color-scheme:dark;background:#174c3e;font-family:var(--font-body)}*{box-sizing:border-box}body{margin:0;min-height:100svh;background-color:#174c3e;background-image:url("background-grain.png?v=fine-2"),radial-gradient(ellipse farthest-corner at 50% 50%,#205843 0%,#1f5743 25%,#1b5140 65%,#174c3e 100%);background-size:128px 128px,100% 100%;background-repeat:repeat,no-repeat;background-blend-mode:soft-light,normal;color:#f7f1dc}main{min-height:100svh;display:grid;place-content:center;justify-items:center;position:relative;overflow:hidden}#tile{border:0;padding:0;background:none;cursor:pointer;touch-action:manipulation;outline-offset:28px;outline-color:#e7c777;visibility:hidden}#tile.ready{visibility:visible}#tile:disabled{cursor:wait}.tile-object{display:block;position:relative;width:var(--tile-width);aspect-ratio:4/5;perspective:850px;isolation:isolate;transition:transform .24s cubic-bezier(.2,.8,.3,1)}#tile.is-held .tile-object,#tile:focus-visible .tile-object{transform:translateY(-8px) scale(1.04)}
@media(hover:hover) and (pointer:fine){#tile:hover .tile-object{transform:translateY(-8px) scale(1.04)}}/* A transparent-edged gradient avoids mobile compositors clipping a blurred layer. */
.tile-object:before{content:"";position:absolute;inset:8% -40% -42%;background:radial-gradient(ellipse closest-side at 50% 56%,#042b2266 0%,#042b2238 35%,#042b2214 65%,#042b2200 100%);pointer-events:none}.tile-volume{position:absolute;inset:0;transform-style:preserve-3d}.tile-front{position:absolute;inset:0;background:#f7f1df;border-radius:15% / 12%;box-shadow:inset -3px -3px 6px #b9ad8544}.tile-front img{width:100%;height:100%;object-fit:fill}.gpu-active>.tile-volume{visibility:hidden}.tile-renderer{position:fixed;inset:0;width:100%;height:100%;height:100dvh;z-index:4;pointer-events:none}#hint{position:absolute;bottom:max(48px,8vh);left:0;right:0;text-align:center;font-size:clamp(1.125rem,.85rem + .75vw,2rem);font-weight:400;line-height:1.5;letter-spacing:.1em;color:#b0c5b4;margin:0;padding:0 16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Reserve the name above the centered tile without shifting the composition. */
#tile-name{position:absolute;bottom:calc(50% + var(--tile-width)*.625 + 48px);left:16px;right:16px;margin:0;text-align:center;color:#e5e6d0;font-size:clamp(1rem,.8rem + .65vw,1.625rem);line-height:1.5;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .15s ease}
#tile[aria-busy="false"].is-held~#tile-name,#tile[aria-busy="false"]:focus-visible~#tile-name{opacity:1}
@media(hover:hover) and (pointer:fine){#tile[aria-busy="false"]:hover~#tile-name{opacity:1}}
@media(max-height:430px){#tile-name{bottom:calc(50% + var(--tile-width)*.625 + 28px)}#hint{bottom:16px}}

/* Keep the single-screen teaser still on touch devices. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;min-height:0}
main{height:100%;height:100dvh;min-height:0;overscroll-behavior:none;touch-action:pinch-zoom}
#tile{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* The teaser is a tactile control, so Safari must not select its labels or images. */
html,body,main,main *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#tile{appearance:none;-webkit-appearance:none}
#tile img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
#tile-name{visibility:hidden}
#tile[aria-busy="false"].is-held~#tile-name,#tile[aria-busy="false"]:focus-visible~#tile-name{visibility:visible}
@media(hover:hover) and (pointer:fine){#tile[aria-busy="false"]:hover~#tile-name{visibility:visible}}