.novice-guide-open { overflow: hidden; }
dialog.novice-guide { box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); height: fit-content; margin: auto; padding: 0; border: 1px solid #dce3dc; border-radius: 20px; color: #263b35; background: #fffefa; box-shadow: 0 20px 70px #16372b33; font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Noto Sans TC", "Microsoft JhengHei", sans-serif; overflow: hidden; }
dialog.novice-guide[open] { display: flex; flex-direction: column; }
dialog.novice-guide::backdrop { background: #172e2b88; backdrop-filter: blur(3px); }
.novice-guide *, .novice-guide *::before, .novice-guide *::after { box-sizing: border-box; }
.novice-guide-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; flex-shrink: 0; }
.novice-guide h2 { margin: 3px 0 0; font-size: 22px; line-height: 1.35; letter-spacing: -.02em; overflow-wrap: anywhere; }
.novice-guide h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.5; }
.novice-guide p { margin: 0 0 16px; overflow-wrap: anywhere; }
.novice-guide .novice-guide-kicker { color: #7a5c3d; font-size: 12px; font-weight: 700; letter-spacing: .08em; margin: 0 0 6px; }
.novice-guide-description { padding: 0 20px 12px; color: #697b73; font-size: 13px; border-bottom: 1px solid #e9ece5; flex-shrink: 0; }
.novice-guide .novice-guide-description { margin: 0; }
.novice-guide-body { padding: 24px 20px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; max-height: 55dvh; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.novice-guide-body:focus-visible { outline: 2px solid #4e7061; outline-offset: -4px; }
.novice-guide ul, .novice-guide ol { margin: 0; padding-left: 24px; }
.novice-guide li { padding-left: 4px; margin: 0 0 14px; overflow-wrap: anywhere; }
.novice-guide .novice-guide-note { margin: 20px 0 0; padding: 14px; border-radius: 12px; background: #f0f4ed; color: #53675d; font-size: 14px; }
.novice-guide-footer { display: grid; grid-template-columns: auto minmax(30px, 1fr) auto; align-items: center; gap: 8px; padding: 14px 20px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid #e9ece5; background: #fffefa; flex-shrink: 0; }
.novice-guide-footer span { text-align: center; color: #718178; font-size: 13px; }
.novice-guide button { appearance: none; min-height: 44px; min-width: 44px; border-radius: 11px; border: 1px solid #d5ded3; padding: 9px 13px; color: #304d41; background: #fffefa; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.5; cursor: pointer; white-space: normal; overflow-wrap: anywhere; touch-action: manipulation; }
.novice-guide button:focus-visible { outline: 3px solid #d9a773; outline-offset: 2px; }
.novice-guide button:disabled { opacity: .45; cursor: default; }
.novice-guide .novice-guide-next { color: #fff; background: #365b4b; border-color: #365b4b; }
.novice-guide .novice-guide-close { flex-shrink: 0; font-size: 13px; }
@media (max-width: 430px) {
  .novice-guide-header { padding: 18px 16px 12px; }
  .novice-guide h2 { font-size: 20px; }
  .novice-guide-description { padding-left: 16px; padding-right: 16px; }
  .novice-guide-body { padding: 20px 16px; }
  .novice-guide-footer { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .novice-guide * { scroll-behavior: auto !important; } }