* { box-sizing: border-box; letter-spacing: 0; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--touchlab-module-background); color: #293a31; font-family: "Helvetica Neue", Arial, "PingFang SC", sans-serif; }
.berry-stage { position: absolute; inset: 82px 320px 145px 0; }
#app { display: block; width: 100%; height: 100%; touch-action: none; outline: none; visibility: hidden; background: var(--touchlab-module-background); }
#app:focus-visible:not([data-pointer-focus]) { outline: 1px solid #f69b91; outline-offset: -2px; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--touchlab-module-background); font-size: 16px; transition: opacity .3s; pointer-events: none; z-index: 10; }
#loading.done { opacity: 0; }
#loading[hidden] { display: none; }
.lil-gui { display: none !important; }
.hud { position: fixed; z-index: 20; }
.heading { left: 32px; top: max(28px, env(safe-area-inset-top)); pointer-events: none; }
.brand { font-size: 15px; font-weight: 650; color: inherit; text-decoration: none; pointer-events: auto; }
.brand-mark { margin-left: 9px; color: #6d7e72; font-size: 10px; font-weight: 500; }
h1 { margin: 10px 0 0; font-size: 28px; font-weight: 480; line-height: 1.15; }
.chinese-name { margin-left: 12px; font-size: 14px; color: #6b7e71; font-weight: 400; }
.status { right: 32px; top: 34px; display: flex; align-items: center; gap: 9px; font-size: 11px; color: #6b7e71; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #507561; }
.toolbar { bottom: max(28px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 7px; border: 1px solid #dce5dd; border-radius: 8px; background: #ffffffed; max-width: calc(100vw - 24px); }
.modes { display: flex; gap: 3px; }
button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border: 0; border-radius: 4px; padding: 0 14px; background: transparent; color: #6b7e71; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
button:hover { background: #f1f5f2; color: #293a31; }
button[aria-pressed="true"] { background: #e7efe9; color: #315641; }
button:focus-visible { outline: 2px solid #f39b91; outline-offset: 2px; }
button i { display: flex; width: 17px; height: 17px; }
button svg { width: 17px; height: 17px; }
#error { position: fixed; left: 20px; right: 20px; bottom: 105px; z-index: 30; color: #9f332c; text-align: center; font-size: 13px; }
#error button { display: inline-flex; color: inherit; text-decoration: underline; }
.credit { bottom: 31px; left: 32px; font-size: 10px; }
.credit a { color: #718078; text-decoration: none; }
.credit a:hover { text-decoration: underline; }
body[data-testing="true"] :is(.hud, .study-header, .study-intro, .study-panel, .study-footer) { visibility: hidden; }
body[data-testing="true"] #app { outline: none; }
@media (max-width: 600px) {
  .heading { left: 18px; top: max(22px, env(safe-area-inset-top)); }
  h1 { font-size: 24px; }
  .brand { font-size: 13px; }
  .brand-mark { font-size: 9px; }
  .status { right: 18px; top: 27px; }
  .toolbar { gap: 4px; bottom: max(18px, env(safe-area-inset-bottom)); padding: 5px; }
  button { padding: 0 10px; gap: 5px; }
  .credit { left: 18px; bottom: 88px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { #loading { transition: none; } }
.berry-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.berry-panel fieldset:disabled { opacity: .45; }
.berry-tint { display: flex; align-items: center; justify-content: space-between; }
.berry-tint input { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.berry-tint input::-webkit-color-swatch-wrapper { padding: 2px; }
.berry-tint input::-webkit-color-swatch { border: 1px solid #bccbc0; border-radius: 50%; }
.study-footer a { color: inherit; text-decoration: none; }
.berry-page #error { bottom: 92px; }
@media (max-width: 760px) {
  .berry-stage { inset: 190px 0 auto; height: 375px; }
  .berry-page #error { position: absolute; top: 470px; bottom: auto; }
}