:root {
  color-scheme: light;
  font-family: system-ui, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: #382316;
  background: #fff8ed;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #fff8ed; }
.shell { width: min(100%, 390px); min-height: 100dvh; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
.prototype-label { margin: 0; padding: 8px 12px; border: 1px dashed #d7a656; border-radius: 12px; color: #867263; }
header, section, nav { padding: 16px; border: 1px solid #e6d1b2; border-radius: 20px; background: #fffdf8; }
header { display: flex; justify-content: space-between; align-items: center; }
h1, h2, p { margin-block: 0 8px; }
pre { overflow: auto; white-space: pre-wrap; }
nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; position: sticky; bottom: 8px; }
nav a { min-height: 44px; display: grid; place-items: center; color: #382316; text-decoration: none; border-radius: 12px; font-size: 14px; }
nav a[aria-current="page"] { background: #8fa281; color: white; }
@media (min-width: 768px) { .shell { width: min(100%, 720px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }