[v-cloak] { display: none !important; }
.gu-body { margin: 0; background: #f4f6fc; color: #252844; font-family: Sarabun, sans-serif; }
.gu-shell {
    --gu-scale: 1;
    --gu-ink: #29235e;
    --gu-purple: #5140b4;
    --gu-gold: #ffdc81;
    max-width: 1120px;
    margin: auto;
    padding: 24px 32px 40px;
    font-size: calc(1rem * var(--gu-scale));
    line-height: 1.75;
}
.gu-shell * { box-sizing: border-box; }
.gu-shell ::selection { background: #ffdc81; color: #29235e; }
.gu-shell h1, .gu-shell h2, .gu-shell p { margin: 0 0 1em; }
.gu-shell h1, .gu-shell h2 { font-weight: 700; }
.gu-shell h2 { font-size: calc(1.3rem * var(--gu-scale)); line-height: 1.7; color: var(--gu-ink); }
.gu-shell a { color: #49379f; text-decoration: underline; text-underline-offset: 4px; }
.gu-shell button {
    font: inherit;
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid #c8c4e4;
    border-radius: 12px;
    padding: 12px 22px;
    background: #fff;
    color: #44338f;
    cursor: pointer;
    min-height: 48px;
    transition: background-color .18s, border-color .18s, box-shadow .18s;
}
.gu-shell button:hover:not(:disabled) { background: #eeebfb; border-color: #8072bc; }
.gu-shell button:disabled { opacity: .55; cursor: not-allowed; }
.gu-shell :focus-visible { outline: 3px solid #b45c00; outline-offset: 4px; }
.gu-shell [tabindex="-1"]:focus { outline: none; }
.gu-top, .gu-actions, .gu-tabs, .gu-practice-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gu-top { justify-content: space-between; margin-bottom: 24px; }
.gu-home { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.gu-shell .gu-home { text-decoration: none; }
.gu-home img { width: 36px; height: 36px; object-fit: contain; }
.gu-font-control { position: relative; }
.gu-top .gu-font-trigger { font-size: calc(.875rem * var(--gu-scale)); background: transparent; padding: 9px 15px; }
.gu-top .gu-font-trigger[aria-expanded="true"] { background: #e4defa; border-color: #8072bc; box-shadow: 0 3px 10px rgba(56,42,128,.12); }
.gu-font-trigger-plus { font-size: .72em; vertical-align: super; }
.gu-font-menu { position: absolute; z-index: 10; top: calc(100% + 8px); right: 0; width: min(306px, calc(100vw - 36px)); padding: 16px; border: 1px solid #c8c4e4; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(44,37,91,.16); }
.gu-font-menu p { margin: 0 0 12px; color: #514b61; font-size: calc(.875rem * var(--gu-scale)); }
.gu-font-menu p strong { color: #49379f; }
.gu-font-stepper { display: grid; grid-template-columns: 1fr minmax(64px, auto) 1fr; align-items: center; gap: 10px; }
.gu-font-stepper > span { display: grid; place-items: center; min-height: 48px; color: #49379f; font-size: calc(1.35rem * var(--gu-scale)); font-weight: 700; }
.gu-font-menu .gu-font-step { min-height: 48px; padding: 6px 14px; font-size: calc(1.65rem * var(--gu-scale)); line-height: 1; }
.gu-font-menu .gu-font-help { margin: 12px 0 0; color: #6b6581; }
.gu-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 320px;
    border-radius: 16px;
    background: #24214c;
    color: #fff;
    margin-bottom: 32px;
}
.gu-hero-art { position: absolute; inset: 0 0 0 auto; width: 72%; height: 100%; object-fit: cover; object-position: 65% 48%; z-index: -2; }
.gu-header::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #24214c 0%, #24214c 25%, rgba(36,33,76,.9) 40%, rgba(36,33,76,.12) 70%, transparent 100%); }
.gu-hero-copy { padding: 40px 44px; }
.gu-shell .gu-header h1 { font-size: calc(3rem * var(--gu-scale)); line-height: 1.5; margin-bottom: 10px; }
.gu-header h1 span { color: var(--gu-gold); }
.gu-header .gu-hero-equation { font-size: calc(1.3rem * var(--gu-scale)); font-weight: 600; margin-bottom: 16px; }
.gu-hero-equation span { color: var(--gu-gold); padding: 0 3px; }
.gu-header .gu-hero-note { margin: 0; color: #e1def4; }
.gu-header-compact { min-height: 156px; margin-bottom: 24px; }
.gu-header-compact .gu-hero-copy { padding: 24px 36px; }
.gu-shell .gu-header-compact h1 { font-size: calc(2rem * var(--gu-scale)); margin: 0; }
.gu-header-compact .gu-hero-equation { margin: 0; font-size: calc(1rem * var(--gu-scale)); }
.gu-header-compact .gu-hero-note { display: none; }
.gu-study { --category: #5140b4; --category-pale: #f0edfc; }
.gu-course-note { color: #625b7b; }
.gu-beginner { margin-bottom: 24px; }
.gu-basics { padding: 14px 18px; border: 1px solid #ded9ef; border-radius: 12px; background: #fff; }
.gu-basics summary, .gu-practice-help summary { cursor: pointer; color: #49379f; font-weight: 700; }
.gu-basics dl, .gu-help-terms { margin: 16px 0; }
.gu-basics dt, .gu-help-terms dt { color: #302260; font-weight: 700; }
.gu-basics dd, .gu-help-terms dd { margin: 2px 0 14px; }
.gu-primer { margin: 18px 0 28px; padding: 22px 24px; border-left: 4px solid #d5aa48; border-radius: 0 12px 12px 0; background: #fffaf0; overflow-wrap: anywhere; }
.gu-primer .gu-primer-kicker { margin-bottom: 6px; color: #765412; font-size: calc(.875rem * var(--gu-scale)); font-weight: 700; }
.gu-primer h3 { margin: 0 0 12px; color: #302260; font-size: calc(1.125rem * var(--gu-scale)); line-height: 1.75; }
.gu-primer ul { padding-left: 1.3em; margin: 12px 0 18px; }
.gu-primer li { margin: 8px 0; }
.gu-primer-example { border-top: 1px solid #e9dcbf; padding-top: 14px; }
.gu-primer-example > strong { color: #6c4c12; }
.gu-primer-example p { margin: 6px 0 10px; }
.gu-primer-source { font-size: calc(.875rem * var(--gu-scale)); color: #625b7b; }
.gu-practice-help[open] summary { margin-bottom: 16px; }
.gu-help-terms { padding-top: 14px; border-top: 1px solid #e9dcbf; }
.gu-pair[id] { scroll-margin-top: 24px; }
.gu-basics summary:focus-visible, .gu-practice-help summary:focus-visible { outline: 3px solid #946000; outline-offset: 4px; }
@media (max-width: 700px) { .gu-primer { padding: 18px 16px; } }
.gu-group-guide { margin-bottom: 20px; }
.gu-group-guide h2, .gu-group-guide p { margin-bottom: 8px; }
.gu-group-guide ul { list-style: disc; padding-left: 24px; margin-bottom: 16px; }
.gu-group-guide li { margin-bottom: 10px; }
.gu-study[data-category="relation"] { --category: #13786c; --category-pale: #e9f6f2; }
.gu-study[data-category="number"] { --category: #94600c; --category-pale: #fff6df; }
.gu-study[data-category="state"] { --category: #a53b61; --category-pale: #fceef3; }
.gu-study[data-category="comparison"] { --category: #a3441c; --category-pale: #fff0e7; }
.gu-study[data-category="manner"] { --category: #276b99; --category-pale: #e9f4fb; }
.gu-tabs button[data-category="relation"] { color: #126a60; background: #d9f0e9; }
.gu-tabs button[data-category="number"] { color: #805109; background: #ffedbd; }
.gu-tabs button[data-category="state"] { color: #a0355b; background: #f8dfe9; }
.gu-tabs button[data-category="comparison"] { color: #963d19; background: #ffe3d1; }
.gu-tabs button[data-category="manner"] { color: #225f88; background: #dceefa; }
.gu-equation .gu-story { font-size: calc(1.25rem * var(--gu-scale)); }
.gu-analysis { margin-top: 12px; color: #625b7b; }
.gu-analysis summary { cursor: pointer; padding: 6px 0; min-height: 44px; color: #49379f; }
.gu-analysis[open] summary { margin-bottom: 12px; }
.gu-analysis-pali { color: #44318f; font-size: calc(1.125rem * var(--gu-scale)); overflow-wrap: anywhere; }
.gu-analysis-answer { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e7e1f3; }
.gu-study[data-category="change"] { --category: #13786c; --category-pale: #e9f6f2; }
.gu-study[data-category="add"] { --category: #94600c; --category-pale: #fff6df; }
.gu-study[data-category="niggahita"] { --category: #a53b61; --category-pale: #fceef3; }
.gu-tabs { gap: 12px; margin-bottom: 20px; }
.gu-tabs-six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.gu-tabs button { flex: 1; padding: 14px 12px; font-size: calc(1.125rem * var(--gu-scale)); border: 2px solid transparent; color: #5140b4; background: #e9e4fa; }
.gu-tabs button[data-category="change"] { color: #126a60; background: #d9f0e9; }
.gu-tabs button[data-category="add"] { color: #805109; background: #ffedbd; }
.gu-tabs button[data-category="niggahita"] { color: #a0355b; background: #f8dfe9; }
.gu-tabs button:hover:not(:disabled) { border-color: currentColor; background: #fff; }
.gu-tabs button[aria-pressed="true"] { background: var(--category); color: #fff; border-color: var(--category); box-shadow: 0 5px 12px rgba(40,32,87,.12); }
.gu-tabs button[aria-pressed="true"]:hover { background: var(--category); color: #fff; border-color: var(--category); }
.gu-tab-count { display: inline-block; margin-left: 6px; font-size: calc(.875rem * var(--gu-scale)); font-weight: 400; }
.gu-overview-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.gu-overview-heading a { white-space: nowrap; }
.gu-exam { margin-top: 12px; color: #625b7b; }
.gu-exam summary { cursor: pointer; padding: 4px 0; min-height: 36px; font-size: calc(.875rem * var(--gu-scale)); }
.gu-exam[open] summary { margin-bottom: 12px; color: #49379f; }
.gu-exam p { white-space: pre-line; overflow-wrap: anywhere; }
.gu-pair .gu-exam p:last-child { margin-bottom: 0; }
.gu-lesson, .gu-practice { background: #fff; border-radius: 16px; padding: 30px 36px; box-shadow: 0 8px 30px rgba(44,37,91,.055); }
.gu-shell .gu-intro { margin-bottom: 8px; }
.gu-pair { padding: 22px 0; border-bottom: 1px solid #eceaf4; }
.gu-equation { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: calc(1.65rem * var(--gu-scale)); line-height: 1.8; }
.gu-inputs { color: #3c3971; }
.gu-equation strong { padding: 2px 15px; border-radius: 8px; background: var(--category-pale, #f0edfc); color: var(--category, #5140b4); font-weight: 700; }
.gu-symbol { color: #787293; }
.gu-pair .gu-equation, .gu-reveal .gu-equation { margin-bottom: 8px; }
.gu-memory { color: #675073; }
.gu-pair .gu-memory { margin-bottom: 0; }
.gu-actions { margin: 26px 0 12px; }
.gu-shell .gu-primary { background: var(--gu-purple); color: #fff; border-color: var(--gu-purple); box-shadow: 0 4px 10px rgba(64,43,139,.14); }
.gu-shell .gu-primary:hover:not(:disabled) { background: #3e2d94; border-color: #3e2d94; }
.gu-shell .gu-resume { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.gu-shell .gu-small-note { color: #6b6581; margin: 0; }
.gu-practice-top { justify-content: space-between; margin-bottom: 18px; }
.gu-practice-top button { border: 0; padding: 8px 0; background: transparent; }
.gu-count { color: #5140b4; font-weight: 700; font-variant-numeric: tabular-nums; }
.gu-progress { height: 5px; border-radius: 4px; overflow: hidden; background: #eeebf7; margin-bottom: 28px; }
.gu-progress span { display: block; height: 100%; background: #7b65cf; border-radius: inherit; }
.gu-prompt { font-size: calc(2.1rem * var(--gu-scale)); font-weight: 700; color: #44318f; line-height: 1.8; overflow-wrap: anywhere; padding: 22px 24px; border-radius: 12px; background: #f4f1fd; }
.gu-reveal { border-top: 1px solid #e7e1f3; padding-top: 24px; }
.gu-footer { margin: 30px 12px 0; color: #6b6581; }
.gu-footer details { border-top: 1px solid #dddae9; padding: 14px 0; }
.gu-footer summary { cursor: pointer; min-height: 36px; display: list-item; }
.gu-footer summary:hover { color: #44318f; }
.gu-footer details[open] summary { color: #44318f; font-weight: 600; margin-bottom: 16px; }
.gu-footer ul { padding-left: 24px; list-style: disc; margin: 12px 0; }
@media (max-width: 700px) {
    .gu-shell { padding: 16px 18px 30px; }
    .gu-top { margin-bottom: 18px; gap: 8px; }
    .gu-font-menu { right: 0; width: min(306px, calc(100vw - 36px)); }
    .gu-home { gap: 6px; }
    .gu-home img { width: 28px; height: 28px; }
    .gu-header { min-height: 340px; align-items: flex-end; margin-bottom: 24px; }
    .gu-hero-art { width: 100%; object-position: 65% 35%; }
    .gu-header::after { background: linear-gradient(0deg, #24214c 0%, rgba(36,33,76,.96) 27%, rgba(36,33,76,.35) 65%, rgba(36,33,76,.05) 100%); }
    .gu-hero-copy { padding: 24px; width: 100%; }
    .gu-shell .gu-header h1 { font-size: calc(2.2rem * var(--gu-scale)); margin-bottom: 4px; }
    .gu-header .gu-hero-equation { font-size: calc(1.125rem * var(--gu-scale)); margin-bottom: 8px; }
    .gu-hero-note br { display: none; }
    .gu-header-compact { min-height: 128px; }
    .gu-header-compact::after { background: linear-gradient(90deg, #24214c 0%, rgba(36,33,76,.92) 45%, rgba(36,33,76,.3) 100%); }
    .gu-header-compact .gu-hero-copy { padding: 18px 24px; }
    .gu-shell .gu-header-compact h1 { font-size: calc(1.75rem * var(--gu-scale)); }
    .gu-header-compact .gu-hero-equation { font-size: calc(1rem * var(--gu-scale)); margin: 0; }
    .gu-tabs { gap: 8px; margin-bottom: 16px; }
    .gu-tabs-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gu-tabs button { flex: 1 1 calc(50% - 8px); padding: 11px; }
    .gu-lesson, .gu-practice { padding: 24px; }
    .gu-shell h2 { font-size: calc(1.125rem * var(--gu-scale)); }
    .gu-pair { padding: 20px 0; }
    .gu-equation { font-size: calc(1.5rem * var(--gu-scale)); column-gap: 12px; }
    .gu-inputs { flex-basis: 100%; }
    .gu-actions > button { flex: 1 1 140px; }
    .gu-prompt { font-size: calc(1.65rem * var(--gu-scale)); padding: 18px; }
    .gu-footer { margin-right: 4px; margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) { .gu-shell button { transition: none; } }

.gu-fast-note { padding: 16px 20px; border-left: 4px solid #d4b154; background: #fff9e9; border-radius: 0 10px 10px 0; color: #5d4b6c; }
.gu-sadhana-guide { margin: 18px 0 24px; padding: 22px 24px; border: 1px solid #d7cff4; border-radius: 14px; background: linear-gradient(135deg, #f7f4ff, #fff); color: #514b61; }
.gu-sadhana-guide p { margin-bottom: 10px; }
.gu-sadhana-kicker { color: #5b45bb; font-size: calc(.875rem * var(--gu-scale)); font-weight: 700; }
.gu-sadhana-guide h3 { margin: 0 0 8px; color: #302260; font-size: calc(1.2rem * var(--gu-scale)); line-height: 1.7; }
.gu-sadhana-guide ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 16px 0; list-style: none; }
.gu-sadhana-guide li { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #e7e1f5; }
.gu-sadhana-guide li strong { color: #44318f; font-size: calc(1.125rem * var(--gu-scale)); }
.gu-sadhana-guide li b { color: #277366; font-weight: 700; }
.gu-sadhana-note { margin-top: 4px; padding-top: 14px; border-top: 1px solid #e3ddf3; }
.gu-sadhana-source { color: #6b6581; font-size: calc(.875rem * var(--gu-scale)); }
.gu-quick-answer h3 { font-size: calc(1.2rem * var(--gu-scale)); line-height: 1.75; font-weight: 700; color: #302260; margin: 0 0 12px; }
.gu-quick-answer p { font-size: calc(1.25rem * var(--gu-scale)); line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; color: #44318f; background: #f4f1fd; border-radius: 10px; padding: 16px 20px; }
.gu-hero-copy { max-width: 100%; }
.gu-explanation { margin: 20px 0 0; font-size: calc(1rem * var(--gu-scale)); line-height: 1.85; }
.gu-explanation dt { color: #453181; font-weight: 700; margin: 18px 0 6px; }
.gu-explanation dd { margin: 0; color: #514b61; overflow-wrap: anywhere; }
.gu-explanation dd p { margin: 0 0 8px; }
.gu-explanation .gu-unpack { color: #44318f; font-size: calc(1.125rem * var(--gu-scale)); }
.gu-shell .gu-header h1 { overflow-wrap: anywhere; }
@media (max-width: 700px) { .gu-quick-answer p { padding: 14px; font-size: calc(1.125rem * var(--gu-scale)); } .gu-sadhana-guide { padding: 18px; } .gu-sadhana-guide ul { grid-template-columns: 1fr; } }