/* Keep the shared navigation aligned on both short and scrollable pages. */
html{overflow-y:scroll}
/* Shared public-page theme. Keep the homepage, story and feedback on one system. */
.lab-shell {
  --lab-ink:#18392b;
  --lab-muted:#5b6d60;
  --lab-line:#dbdfd3;
  --lab-green:#235841;
  --lab-card:#fffefa;
  --lab-soft:#eaf0e3;
  --home-bg:#f8f7f1;
  --home-yolk:#edb849;
  --bg:var(--home-bg);
  --surface:var(--lab-card);
  --text:var(--lab-ink);
  --muted:var(--lab-muted);
  --accent:var(--lab-green);
  --accent-soft:var(--lab-soft);
  --line:var(--lab-line);
  --soft:var(--lab-soft);
  --cream:var(--home-bg);
  --white:var(--lab-card);
  --dark:var(--lab-ink);
  --brown:var(--lab-muted);
  --honey:var(--lab-green);
  --amber:var(--lab-green);
  --honey-glow:var(--lab-soft);
  --dark-soft:var(--lab-soft);
  --font-body:Inter,"Noto Sans TC","PingFang TC",system-ui,sans-serif;
  --font-display:var(--font-body);
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  color:var(--lab-ink);
  background:var(--home-bg);
  font:400 16px/1.75 Inter,"Noto Sans TC","PingFang TC",system-ui,sans-serif;
  overflow-wrap:anywhere;
}
.dark .lab-shell {
  --lab-ink:#e8eee5;
  --lab-muted:#b1c1b4;
  --lab-line:#3a493e;
  --lab-green:#a4d1ad;
  --lab-card:#202a24;
  --lab-soft:#2c3d30;
  --home-bg:#151c19;
  --home-yolk:#d3a346;
  color-scheme:dark;
}
.lab-shell.lab-shell {background-image:none}
.lab-shell>.wrap {
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  padding:0;
  flex:1;
  display:flex;
  flex-direction:column;
}
.lab-shell * {box-sizing:border-box}
.lab-shell [hidden] {display:none!important}
.lab-shell a {color:inherit;text-decoration:none}
.lab-shell button,.lab-shell input,.lab-shell select,.lab-shell textarea {font-family:inherit}
.lab-shell button,.lab-shell a,.lab-shell input,.lab-shell select,.lab-shell textarea {touch-action:manipulation}
.lab-shell button {cursor:pointer}
.lab-shell button:disabled {cursor:default}
.lab-shell h1,.lab-shell h2,.lab-shell h3,.lab-shell p {margin-top:0}
.lab-shell p {color:var(--lab-muted)}
.lab-shell main {flex:1}
.lab-shell a:focus-visible,.lab-shell button:focus-visible,.lab-shell input:focus-visible,.lab-shell select:focus-visible,.lab-shell textarea:focus-visible {
  outline:3px solid var(--home-yolk);
  outline-offset:4px;
}
.lab-shell .skip-link {background:var(--lab-card);color:var(--lab-ink);border-color:var(--lab-green)}
.lab-shell .samegg-brand-name {color:var(--lab-ink)}
.lab-shell .samegg-brand-subtitle {color:var(--lab-green)}
.lab-shell .samegg-brand:hover .samegg-brand-name {color:var(--lab-green)}

/* One header markup and one set of dimensions on all public navigation pages. */
.lab-shell .lab-site-header {
  position:sticky;
  top:0;
  z-index:50;
  display:block;
  padding:0;
  background:var(--lab-card);
  border:0;
  border-bottom:1px solid var(--lab-line);
  backdrop-filter:none;
}
.lab-shell .lab-site-header-inner {
  width:100%;
  max-width:1264px;
  min-height:88px;
  height:auto;
  margin-inline:auto;
  padding:20px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.lab-shell .lab-site-header .lab-primary-nav {
  display:flex;
  align-items:center;
  flex:none;
  gap:24px;
}
.lab-shell .lab-site-header .lab-primary-nav a {
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:6px 0;
  border-bottom:2px solid transparent;
  color:var(--lab-muted);
  font-size:14px!important;
  font-weight:500;
  line-height:1.5;
  white-space:nowrap;
  transition:color .15s,border-color .15s;
}
.lab-shell .lab-site-header .lab-primary-nav a:hover,
.lab-shell .lab-site-header .lab-primary-nav a[aria-current=page] {
  color:var(--lab-green);
  border-color:var(--lab-green);
}
.lab-shell .lab-site-header #site-theme-toggle {
  display:inline-flex;
  flex:0 0 42px;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  min-height:42px;
  margin:0;
  padding:0;
  border:1px solid var(--lab-line);
  border-radius:50%;
  background:var(--lab-card);
  color:var(--lab-green);
  line-height:1;
}
.lab-shell .lab-site-header #site-theme-toggle:hover {background:var(--lab-soft)}
.lab-shell .lab-site-header #site-theme-toggle svg {width:16px;height:16px;flex:none;margin:0}
.lab-shell #site-theme-toggle .theme-sun {display:none}
.lab-shell #site-theme-toggle .theme-moon {display:block}
.dark .lab-shell #site-theme-toggle .theme-sun {display:block}
.dark .lab-shell #site-theme-toggle .theme-moon {display:none}

/* Footers share the catalogue's content edge and the same contact link. */
.lab-shell .lab-site-footer {display:block;border:0;margin-top:30px;padding:0;color:var(--lab-muted);background:var(--home-bg)}
.lab-shell .lab-site-footer-inner {
  width:min(1200px,calc(100% - 64px));
  margin-inline:auto;
  padding:22px 0;
  border-top:1px solid var(--lab-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  line-height:1.75;
}
.lab-shell .lab-site-footer p {margin:0;color:var(--lab-muted)}
.lab-shell .lab-site-footer a {display:inline-flex;align-items:center;gap:7px;min-height:32px;color:var(--lab-muted)}
.lab-shell .lab-site-footer a:hover {color:var(--lab-green)}
.lab-shell .lab-site-footer svg {width:14px;height:14px;flex:none}

/* Text-led pages use the same rhythm, typography and surfaces as the catalogue. */
.lab-shell .lab-content-page {width:min(1200px,calc(100% - 64px));margin:42px auto 34px}
.lab-shell .lab-about-card {max-width:920px;padding:40px;border:1px solid var(--lab-line);border-radius:16px;background:var(--lab-card)}
.lab-shell .lab-about .eyebrow {margin:0 0 12px;color:var(--lab-green);font:700 11px/1.7 Inter,"Noto Sans TC",sans-serif;letter-spacing:.13em}
.lab-shell .lab-about h1 {margin:0 0 24px;color:var(--lab-ink);font-size:clamp(32px,3.4vw,46px);font-weight:800;line-height:1.35;letter-spacing:-.045em}
.lab-shell .lab-about p {max-width:760px;margin:0 0 20px;font-size:16px;line-height:2;color:var(--lab-muted)}
.lab-shell .lab-about .lab-about-lead {font-size:20px;line-height:1.9;color:var(--lab-ink)}
.lab-shell .lab-about-tags {display:flex;gap:8px;flex-wrap:wrap;margin:28px 0}
.lab-shell .lab-about-tags span {padding:5px 10px;border:1px solid var(--lab-line);border-radius:5px;background:var(--lab-soft);color:var(--lab-green);font-size:12px;line-height:1.6}
.lab-shell .lab-about-links {display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--lab-line)}
.lab-shell .lab-about-links a {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid var(--lab-line);border-radius:7px;background:var(--lab-card);color:var(--lab-green);font-size:14px;font-weight:600;line-height:1.5}
.lab-shell .lab-about-links a:first-child {border-color:var(--lab-green);background:var(--lab-green);color:var(--lab-card)}
.lab-shell .lab-about-links a:hover {border-color:var(--lab-green)}

/* Feedback keeps its real form and public board while inheriting the same theme. */
.lab-shell .hello-standalone {padding:0;min-height:0}
.lab-shell .hello-page-back {max-width:none;margin:0 0 18px;padding:0;color:var(--lab-muted);font-size:13px}
.lab-shell .hello-page-back a {display:inline-flex;align-items:center;min-height:32px}
.lab-shell .hello-page-back a:hover {color:var(--lab-green)}
.lab-shell .hello-section {width:100%;max-width:none;margin:0;padding:0;scroll-margin-top:112px}
.lab-shell .hello-card,.lab-shell .hello-standalone .hello-card {padding:40px;border:1px solid var(--lab-line);border-radius:16px;background:var(--lab-card)}
.lab-shell .hello-heading,.lab-shell .hello-standalone .hello-heading {display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 32px}
.lab-shell .hello-heading>div {min-width:0}
.lab-shell .hello-eyebrow {margin:0 0 12px;color:var(--lab-green);font:700 11px/1.7 Inter,"Noto Sans TC",sans-serif;letter-spacing:.13em}
.lab-shell .hello-heading h1,.lab-shell .hello-standalone .hello-heading h1 {margin:0 0 16px;color:var(--lab-ink);font-size:clamp(32px,3.4vw,46px);font-weight:800;line-height:1.35;letter-spacing:-.045em}
.lab-shell .hello-heading p:last-child {margin:0;color:var(--lab-muted);font-size:16px;line-height:1.9}
.lab-shell .hello-icon {color:var(--lab-green);font:700 36px/1.3 Inter,sans-serif;letter-spacing:-.06em;opacity:.18;flex:none}
.lab-shell .hello-grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
.lab-shell .hello-form {gap:18px;min-width:0}
.lab-shell .hello-fields {gap:16px}
.lab-shell .hello-form label {font-size:14px;color:var(--lab-ink);line-height:1.8}
.lab-shell .hello-form label>span {color:var(--lab-muted)}
.lab-shell .hello-form input[type=text],.lab-shell .hello-form select,.lab-shell .hello-form textarea {
  width:100%;
  min-height:46px;
  padding:11px 13px;
  border:1px solid var(--lab-line);
  border-radius:8px;
  background:var(--home-bg);
  color:var(--lab-ink);
  font-size:15px;
  line-height:1.7;
}
.lab-shell .hello-form textarea {min-height:176px;line-height:1.85}
.lab-shell .hello-form input::placeholder,.lab-shell .hello-form textarea::placeholder {color:var(--lab-muted);opacity:1}
.lab-shell .hello-form select {color-scheme:light}
.dark .lab-shell .hello-form select {color-scheme:dark}
.lab-shell .hello-count {margin:6px 0 0;color:var(--lab-muted);font-size:11px;line-height:1.7}
.lab-shell .hello-form .hello-public {gap:9px;font-size:13px!important;line-height:1.85!important;color:var(--lab-muted)}
.lab-shell .hello-public input {width:16px;height:16px;flex:0 0 16px;margin:4px 0 0;accent-color:var(--lab-green)}
.lab-shell .hello-public span {color:var(--lab-muted)}
.lab-shell .hello-submit {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 16px;
  border:1px solid var(--lab-green);
  border-radius:7px;
  background:var(--lab-green);
  color:var(--lab-card);
  font-size:15px;
  font-weight:650;
  line-height:1.5;
}
.lab-shell .hello-submit:hover:enabled {background:var(--lab-green);filter:brightness(.94)}
.lab-shell .hello-status {margin:0;min-height:22px;color:var(--lab-green);font-size:13px;line-height:1.85}
.lab-shell .hello-board {padding-left:32px;border-left:1px solid var(--lab-line)}
.lab-shell .hello-board-heading {margin:0 0 20px;gap:12px}
.lab-shell .hello-board h3 {margin:0;color:var(--lab-ink);font-size:20px;font-weight:750;line-height:1.5;letter-spacing:-.03em}
.lab-shell .hello-refresh,.lab-shell .hello-more {min-height:40px;padding:8px 12px;border:1px solid var(--lab-line);border-radius:7px;background:var(--lab-card);color:var(--lab-muted);font-size:13px;line-height:1.5}
.lab-shell .hello-refresh:hover,.lab-shell .hello-more:hover {border-color:var(--lab-green);color:var(--lab-green)}
.lab-shell .hello-list {max-height:460px;padding-right:8px}
.lab-shell .hello-entry {padding-bottom:19px;margin-bottom:19px;border-color:var(--lab-line)}
.lab-shell .hello-entry strong {color:var(--lab-ink);font-size:14px;line-height:1.6}
.lab-shell .hello-kind {padding:3px 7px;border:1px solid var(--lab-line);border-radius:5px;background:var(--lab-soft);color:var(--lab-green);font-size:11px;line-height:1.6}
.lab-shell .hello-entry time {color:var(--lab-muted);font-size:11px;line-height:1.6}
.lab-shell .hello-entry p {color:var(--lab-muted);font-size:15px;line-height:1.85}
.lab-shell .hello-list-status {color:var(--lab-muted);font-size:14px;line-height:1.85}
.lab-shell .hello-form input:focus-visible,.lab-shell .hello-form select:focus-visible,.lab-shell .hello-form textarea:focus-visible,.lab-shell .hello-card button:focus-visible {outline:3px solid var(--home-yolk);outline-offset:3px}

/* Consistent project controls sit on the same content edge as the header. */
.lab-shell .lab-item-toolbar {width:min(1200px,calc(100% - 64px));padding-top:18px;gap:24px;font-size:13px}
.lab-shell .lab-item-toolbar .lab-favorite {border-radius:7px;background:var(--lab-card);border-color:var(--lab-line);color:var(--lab-green);min-height:42px;padding:8px 12px}
.lab-shell .lab-item-toolbar .lab-favorite[aria-pressed=true] {background:var(--home-yolk);border-color:var(--home-yolk);color:#18392b}
.lab-shell .lab-item-toolbar .lab-page-actions>a {color:var(--lab-muted)}
.lab-shell .btn {min-height:44px;border-radius:7px;font-size:14px;line-height:1.5;border-color:var(--lab-line)}
.lab-shell .btn-primary {background:var(--lab-green);border-color:var(--lab-green);color:var(--lab-card)!important}
.lab-shell .btn-secondary {background:var(--lab-card);color:var(--lab-ink)}
.lab-shell #lab-toast {background:var(--lab-green);border-color:var(--lab-line);color:var(--lab-card);border-radius:9px}

/* Category catalogues share the homepage card rhythm and full-width covers. */
.lab-shell .directory-main {width:min(1200px,calc(100% - 64px));padding:42px 0 34px}
.lab-shell .directory-main h1 {font-size:clamp(32px,3.4vw,46px);font-weight:800;line-height:1.35;letter-spacing:-.045em;color:var(--lab-ink)}
.lab-shell .directory-main .eyebrow {font:700 11px/1.7 Inter,"Noto Sans TC",sans-serif;color:var(--lab-green);letter-spacing:.13em}
.lab-shell .directory-intro {font-size:16px!important;line-height:1.9;max-width:760px;color:var(--lab-muted);margin-bottom:28px}
.lab-shell .directory-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lab-shell .directory-card {border-color:var(--lab-line);background:var(--lab-card);border-radius:13px;padding:0 0 20px;overflow:hidden;min-width:0}
.lab-shell .directory-card>.lab-directory-preview {width:100%;aspect-ratio:16/9;height:auto;object-fit:contain;background:var(--home-bg);border-radius:0;margin:0 0 18px;border-bottom:1px solid var(--lab-line)}
.lab-shell .directory-card>:not(img) {margin-left:20px;margin-right:20px}
.lab-shell .directory-card h2 {margin-top:12px;margin-bottom:10px}
.lab-shell .directory-card p {font-size:15px!important;margin-bottom:20px}
.lab-shell .directory-card .directory-action {font-size:13px;font-weight:600;line-height:1.7}
.lab-shell .directory-main .lab-personal {display:block;margin:0 0 28px}
.lab-shell .directory-main .lab-personal-panel {border:0;border-bottom:1px solid var(--lab-line);border-radius:0;background:transparent;padding:0 0 18px}
.lab-shell .directory-main .lab-personal-head {margin-bottom:8px}
.lab-shell .directory-main .lab-personal h2 {font-size:13px;color:var(--lab-muted)}
.lab-shell .directory-main #lab-recent-list {display:flex;gap:9px;flex-wrap:wrap}
.lab-shell .directory-main .lab-quick-link {display:inline-flex;justify-content:flex-start;gap:10px;border:1px solid var(--lab-line);border-radius:7px;background:var(--lab-card);padding:8px 11px;max-width:100%}
.lab-shell .directory-main .lab-quick-link strong {font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.lab-shell .directory-main .lab-quick-link span {font-size:11px}
.lab-shell .directory-card:hover {border-color:var(--lab-green)}
.lab-shell .directory-card h2 {color:var(--lab-ink);font-size:22px;line-height:1.5}
.lab-shell .directory-card p {color:var(--lab-muted);font-size:15px;line-height:1.85}
.lab-shell .directory-card .tag {border-color:var(--lab-line);background:var(--lab-soft);color:var(--lab-green)}
.lab-shell .directory-card .directory-action {color:var(--lab-green)}

@media(max-width:1000px) {
  .lab-shell .lab-site-header-inner {padding-inline:24px}
  .lab-shell .lab-item-toolbar {width:calc(100% - 48px)}
  .lab-shell .directory-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab-shell .lab-site-footer-inner,.lab-shell .lab-content-page,.lab-shell .directory-main {width:calc(100% - 48px)}
  .lab-shell .lab-about-card,.lab-shell .hello-card,.lab-shell .hello-standalone .hello-card {padding:32px}
  .lab-shell .hello-icon {display:none}
}
@media(max-width:700px) {
  .lab-shell .lab-site-header-inner {min-height:76px;flex-wrap:wrap;gap:8px;padding:14px 18px}
  .lab-shell .lab-item-toolbar {width:calc(100% - 36px);padding-top:12px;gap:12px}
  .lab-shell .lab-site-header .lab-primary-nav {flex:0 0 100%;width:100%;gap:20px;justify-content:space-between}
  .lab-shell .lab-site-header .lab-primary-nav a {font-size:13px!important;min-height:42px}
  .lab-shell .lab-site-header .lab-primary-nav #site-theme-toggle {margin-left:auto}
  .lab-shell .lab-site-footer-inner,.lab-shell .lab-content-page,.lab-shell .directory-main {width:calc(100% - 36px)}
  .lab-shell .lab-site-footer {margin-top:24px}
  .lab-shell .lab-content-page {margin-top:27px;margin-bottom:26px}
  .lab-shell .lab-about-card,.lab-shell .hello-card,.lab-shell .hello-standalone .hello-card {padding:24px}
  .lab-shell .lab-about h1,.lab-shell .hello-heading h1,.lab-shell .hello-standalone .hello-heading h1 {font-size:34px}
  .lab-shell .lab-about .lab-about-lead {font-size:18px}
  .lab-shell .lab-about p,.lab-shell .hello-heading p:last-child {font-size:15px}
  .lab-shell .hello-heading,.lab-shell .hello-standalone .hello-heading {margin-bottom:28px}
  .lab-shell .hello-grid {grid-template-columns:1fr;gap:28px}
  .lab-shell .hello-board {border-left:0;border-top:1px solid var(--lab-line);padding:26px 0 0}
  .lab-shell .hello-section {scroll-margin-top:150px}
  .lab-shell .directory-main {padding-top:27px}
}
@media(max-width:490px) {
  .lab-shell .lab-site-header .lab-primary-nav {gap:14px}
  .lab-shell .directory-grid {grid-template-columns:1fr}
  .lab-shell .lab-site-header .lab-primary-nav a {font-size:13px!important}
  .lab-shell .lab-site-footer-inner {align-items:flex-start;flex-direction:column;gap:6px}
  .lab-shell .lab-about-card,.lab-shell .hello-card,.lab-shell .hello-standalone .hello-card {padding:23px}
  .lab-shell .lab-about h1,.lab-shell .hello-heading h1,.lab-shell .hello-standalone .hello-heading h1 {font-size:32px}
  .lab-shell .lab-about-links {gap:10px}
  .lab-shell .hello-fields {grid-template-columns:1fr;gap:16px}
  .lab-shell .hello-form input[type=text],.lab-shell .hello-form select,.lab-shell .hello-form textarea {font-size:16px}
  .lab-shell .hello-board h3 {font-size:19px}
}
@media(prefers-reduced-motion:reduce) {
  .lab-shell .lab-site-header .lab-primary-nav a {transition:none}
}