:root{color-scheme:light;--paper: #f5ecd7;--paper-light: #fbf4e5;--key: #996400;--value: #4ca65d;--muted: #8d7a51;--line: rgba(153, 100, 0, .28);--line-active: rgba(76, 166, 93, .82);--mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;background:var(--paper);color:var(--key);font-family:var(--mono);font-synthesis:none;text-rendering:geometricPrecision}*{box-sizing:border-box}html{min-width:320px;background:var(--paper)}body{min-width:320px;min-height:100vh;margin:0;background:var(--paper)}main{width:100%;min-height:100vh;padding:clamp(14px,2.4vw,36px)}.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}.project-grid{width:min(1760px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}.project-card{position:relative;display:block;min-width:0;aspect-ratio:1.08 / 1;color:inherit;text-decoration:none;perspective:1400px;outline:none}.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .56s cubic-bezier(.2,.72,.25,1)}.project-card:hover .card-inner,.project-card:focus-visible .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;padding:clamp(18px,1.8vw,30px);border:1px solid var(--line);background:var(--paper-light);backface-visibility:hidden;-webkit-backface-visibility:hidden}.card-front{justify-content:space-between;transition:border-color .22s ease,background-color .22s ease}.project-card:hover .card-face,.project-card:focus-visible .card-face{border-color:var(--line-active)}.card-back{justify-content:center;background:#f8efd9;transform:rotateY(180deg)}.code-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7em;margin:0;font-size:clamp(12px,.9vw,16px);line-height:1.4}.key,.card-back dt{color:var(--key)}.value,.card-back dd,.card-front h2{color:var(--value)}.value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.front-copy{min-width:0;padding-block:clamp(22px,3vw,48px)}.kicker{margin:0 0 .7rem;color:var(--key);font-size:clamp(11px,.76vw,14px);letter-spacing:.04em}.card-front h2{margin:0;font-size:clamp(28px,2.5vw,48px);font-weight:400;line-height:1.02;letter-spacing:-.05em;overflow-wrap:anywhere}.description{display:-webkit-box;margin:clamp(16px,1.6vw,26px) 0 0;overflow:hidden;color:var(--muted);font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:clamp(12px,.78vw,14px);font-weight:300;line-height:1.8;-webkit-box-orient:vertical;-webkit-line-clamp:3}.open-label{margin:0;color:var(--muted);font-size:clamp(9px,.64vw,11px);letter-spacing:.02em}.card-back dl{width:100%;margin:0}.card-back dl>div{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:clamp(8px,.9vw,16px);padding:clamp(4px,.42vw,8px) 0;font-size:clamp(10px,.82vw,14px);line-height:1.35}.card-back dt,.card-back dd{min-width:0;margin:0;font-weight:400}.card-back dd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-card.unavailable{cursor:default}.project-card.unavailable .card-face{background:#eee3cb}.project-card.unavailable .card-front h2,.project-card.unavailable .value,.project-card.unavailable .card-back dd{color:#7f9270}@media(max-width:1180px){.project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.project-card{aspect-ratio:1.12 / 1}}@media(max-width:820px){main{padding:14px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.project-card{aspect-ratio:1 / 1.04}}@media(max-width:540px){main{padding:10px}.project-grid{grid-template-columns:1fr}.project-card{min-height:320px;aspect-ratio:auto}.card-face{padding:22px}.card-front h2{font-size:clamp(36px,12vw,52px)}.card-back dl>div{font-size:12px}}@media(hover:none),(pointer:coarse){.project-card{min-height:360px;aspect-ratio:auto}.card-inner{position:static;display:grid;transform:none!important}.card-face{position:static;min-height:180px;backface-visibility:visible;-webkit-backface-visibility:visible}.card-front{min-height:300px}.card-back{min-height:auto;border-top:0;transform:none}.open-label{display:none}}@media(prefers-reduced-motion:reduce){.card-inner{transition-duration:.01ms}}
