:root{--sand-50:#fcfcfb;--sand-100:#f5f5f2;--sand-200:#e4e5e2;--sand-300:#cfd1cd;--sand-400:#aeb1ac;--ink-900:#0a0a0a;--ink-800:#171717;--ink-700:#262626;--ink-600:#414141;--ink-500:#626262;--ink-400:#858585;--ink-300:#adadad;--clay-400:#f0bd61;--clay-500:#d99a2b;--clay-600:#96610f;--moss-500:#4a7c59;--amber-500:#c68a2e;--rust-500:#b3462f;--sky-500:#3a6b8f;--color-canvas:var(--sand-50);--color-canvas-subtle:var(--sand-100);--color-surface:#ffffff;--color-surface-raised:#ffffff;--color-surface-sunken:var(--sand-100);--color-surface-inverse:var(--ink-800);--color-text:var(--ink-800);--color-text-muted:var(--ink-500);--color-text-subtle:var(--ink-400);--color-text-inverse:var(--sand-50);--color-border:var(--sand-200);--color-border-strong:var(--sand-300);--color-accent:var(--clay-500);--color-accent-strong:var(--clay-600);--color-accent-soft:#fff2d7;--color-accent-contrast:#ffffff;--color-focus:var(--clay-600);--color-fallback-artwork:#dfa43a;--color-fallback-artwork-text:#111111;--color-success:var(--moss-500);--color-success-soft:#e6efe8;--color-warning:var(--amber-500);--color-warning-soft:#f9efd9;--color-danger:var(--rust-500);--color-danger-soft:#f8e5e0;--color-info:var(--sky-500);--color-info-soft:#e2ecf3;--font-sans:var(--font-inter),var(--font-noto-sans-thai),system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:var(--font-inter),var(--font-noto-sans-thai),Georgia,serif;--font-mono:"JetBrains Mono","SF Mono",ui-monospace,"Cascadia Mono",monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-md:1.0625rem;--text-lg:1.25rem;--text-xl:1.5rem;--text-2xl:1.875rem;--text-3xl:2.25rem;--text-4xl:3rem;--leading-tight:1.3;--leading-snug:1.5;--leading-normal:1.75;--leading-relaxed:1.9;--tracking-normal:0;--tracking-wide:0.02em;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--space-0:0;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-9:6rem;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:14px;--radius-full:999px;--shadow-sm:0 1px 2px rgb(30 27 23/0.06);--shadow-md:0 4px 12px rgb(30 27 23/0.08);--shadow-lg:0 12px 32px rgb(30 27 23/0.12);--shadow-focus:0 0 0 3px color-mix(in srgb,var(--color-focus) 35%,transparent);--glass-fill:var(--color-surface);--glass-fill-strong:var(--color-surface);--glass-card:var(--color-surface);--glass-filter:none;--glass-filter-strong:none;--glass-edge:var(--color-border);--glass-sheen:transparent;--glass-shade:var(--color-canvas-subtle);--glass-shadow:var(--shadow-md);--ambient-1:transparent;--ambient-2:transparent;--ambient-3:transparent;--duration-fast:120ms;--duration-base:200ms;--duration-slow:320ms;--ease-out:cubic-bezier(0.22,1,0.36,1);--ease-in-out:cubic-bezier(0.65,0,0.35,1);--measure-prose:42rem;--measure-wide:58rem;--measure-shell:96rem;--header-bar-height:4rem;--header-height:calc(var(--header-bar-height) + env(safe-area-inset-top));--tap-target:44px;--z-sticky:100;--z-overlay:200;--z-modal:300;--z-toast:400}:root[data-color-mode=dark]{--color-canvas:#000000;--color-canvas-subtle:#0a0a0a;--color-surface:#141414;--color-surface-raised:#1c1c1c;--color-surface-sunken:#000000;--color-surface-inverse:var(--sand-100);--color-text:#f2f2f2;--color-text-muted:#a6a6a6;--color-text-subtle:#808080;--color-text-inverse:#000000;--color-border:#2a2a2a;--color-border-strong:#3d3d3d;--color-accent:#e5aa43;--color-accent-strong:#f3c66d;--color-accent-soft:#342509;--color-accent-contrast:#111111;--color-focus:#f3c66d;--color-fallback-artwork:#d59a32;--color-fallback-artwork-text:#111111;--color-success:#7fb08c;--color-success-soft:#1e2a21;--color-warning:#dfae5e;--color-warning-soft:#2e2416;--color-danger:#e08b76;--color-danger-soft:#2f1c17;--color-info:#7fb3d9;--color-info-soft:#16242e;--shadow-sm:0 1px 2px rgb(0 0 0/0.4);--shadow-md:0 4px 12px rgb(0 0 0/0.45);--shadow-lg:0 12px 32px rgb(0 0 0/0.55);--glass-fill:var(--color-surface);--glass-fill-strong:var(--color-surface);--glass-card:var(--color-surface);--glass-edge:var(--color-border);--glass-sheen:transparent;--glass-shade:var(--color-canvas-subtle);--glass-shadow:var(--shadow-md);--ambient-1:transparent;--ambient-2:transparent;--ambient-3:transparent}[data-theme=formal]{--theme-font-display:var(--font-display);--theme-heading-tracking:var(--tracking-normal);--theme-article-radius:var(--radius-md);--theme-accent:var(--color-accent)}[data-theme=pixel]{--theme-font-display:var(--font-mono);--theme-heading-tracking:var(--tracking-wide);--theme-article-radius:0;--theme-accent:#3f7d6b}[data-theme=fantasy]{--theme-font-display:var(--font-display);--theme-heading-tracking:var(--tracking-wide);--theme-article-radius:var(--radius-xl);--theme-accent:#7a5aa8}[data-theme=retro]{--theme-font-display:var(--font-display);--theme-heading-tracking:var(--tracking-normal);--theme-article-radius:var(--radius-sm);--theme-accent:#b5762c}*,:after,:before{box-sizing:border-box}html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%}body{min-height:100dvh;font-family:var(--font-sans);color:var(--color-text);background:var(--color-canvas);line-height:var(--leading-relaxed,1.75);-webkit-font-smoothing:antialiased;overflow-x:clip}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[class],ul[class]{list-style:none;margin:0;padding:0}canvas,iframe,img,picture,svg,video{display:block;max-width:100%}img,video{height:auto}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}h1,h2,h3,h4,li,p,td,th{overflow-wrap:break-word}table{border-collapse:collapse}:target{scroll-margin-top:calc(var(--header-height, 4rem) + 1rem)}.yamroong-ds-glass{position:relative;background:var(--glass-fill);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}.yamroong-ds-glass--solid{background:var(--glass-fill-strong);box-shadow:var(--shadow-lg)}.yamroong-ds-glass--flat{box-shadow:none}.yamroong-ambient{display:none}.yamroong-ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-target);padding:0 var(--space-4);border:1px solid transparent;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:1;text-decoration:none;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.yamroong-ds-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:var(--shadow-sm)}.yamroong-ds-btn:active:not([disabled]){transform:translateY(0);box-shadow:none}.yamroong-ds-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.yamroong-ds-btn[aria-disabled=true],.yamroong-ds-btn[disabled]{opacity:.55;cursor:not-allowed}.yamroong-ds-btn--primary{background:var(--color-accent);color:var(--color-accent-contrast)}.yamroong-ds-btn--primary:hover:not([disabled]){background:var(--color-accent-strong)}.yamroong-ds-btn--secondary{background:var(--color-surface);border-color:var(--color-border-strong);color:var(--color-text)}.yamroong-ds-btn--secondary:hover:not([disabled]){background:var(--color-canvas-subtle)}.yamroong-ds-btn--ghost{background:transparent;color:var(--color-text-muted)}.yamroong-ds-btn--ghost:hover:not([disabled]){background:var(--color-canvas-subtle);color:var(--color-text)}.yamroong-ds-btn--danger{background:var(--color-danger);color:#fff}.yamroong-ds-btn--sm{min-height:32px;padding:0 var(--space-3);font-size:var(--text-xs)}.yamroong-ds-btn--lg{min-height:52px;padding:0 var(--space-5);font-size:var(--text-md)}.yamroong-ds-btn--icon{padding:0;width:var(--tap-target)}.yamroong-ds-btn--block{width:100%}.yamroong-ds-field{display:flex;flex-direction:column;gap:var(--space-2)}.yamroong-ds-field__label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text)}.yamroong-ds-field__required{color:var(--color-danger);margin-inline-start:2px}.yamroong-ds-field__hint{color:var(--color-text-muted)}.yamroong-ds-field__error,.yamroong-ds-field__hint{font-size:var(--text-xs);line-height:var(--leading-snug)}.yamroong-ds-field__error{color:var(--color-danger)}.yamroong-ds-input,.yamroong-ds-select,.yamroong-ds-textarea{width:100%;min-height:var(--tap-target);padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-snug);transition:border-color var(--duration-fast) var(--ease-out)}.yamroong-ds-input::placeholder,.yamroong-ds-textarea::placeholder{color:var(--color-text-subtle)}.yamroong-ds-input:focus-visible,.yamroong-ds-select:focus-visible,.yamroong-ds-textarea:focus-visible{outline:none;border-color:var(--color-focus);box-shadow:var(--shadow-focus)}.yamroong-ds-input[aria-invalid=true],.yamroong-ds-textarea[aria-invalid=true]{border-color:var(--color-danger)}.yamroong-ds-textarea{min-height:8rem;resize:vertical;line-height:var(--leading-normal)}.yamroong-ds-switch{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--tap-target);cursor:pointer}.yamroong-ds-switch__track{position:relative;flex:none;width:44px;height:26px;background:var(--color-border-strong);border-radius:var(--radius-full);transition:background-color var(--duration-base) var(--ease-out)}.yamroong-ds-switch__thumb{position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-out)}.yamroong-ds-switch input:checked+.yamroong-ds-switch__track{background:var(--color-accent)}.yamroong-ds-switch input:checked+.yamroong-ds-switch__track .yamroong-ds-switch__thumb{transform:translateX(18px)}.yamroong-ds-switch input:focus-visible+.yamroong-ds-switch__track{box-shadow:var(--shadow-focus)}.yamroong-ds-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.yamroong-ds-stack{display:flex;flex-direction:column}.yamroong-ds-inline{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}.yamroong-ds-card{position:relative;background:var(--glass-fill-strong);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);border:1px solid var(--glass-edge);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:inset 0 1px 0 var(--glass-sheen)}.yamroong-ds-card--raised{box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-sheen)}.yamroong-ds-card--flush{padding:0;overflow:hidden}@media (max-width:47.99rem){.yamroong-ds-card{border-inline:0;border-block:1px solid var(--color-border);border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-surface);width:100vw;margin-inline:calc(50% - 50vw);padding-inline:var(--space-4)}.yamroong-ds-card--raised{box-shadow:none}.yamroong-ds-card--flush{padding-inline:0}}.yamroong-ds-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1.6;white-space:nowrap}.yamroong-ds-badge--neutral{background:var(--color-canvas-subtle);color:var(--color-text-muted)}.yamroong-ds-badge--accent{background:var(--color-accent-soft);color:var(--color-accent-strong)}.yamroong-ds-badge--success{background:var(--color-success-soft);color:var(--color-success)}.yamroong-ds-badge--warning{background:var(--color-warning-soft);color:var(--color-warning)}.yamroong-ds-badge--danger{background:var(--color-danger-soft);color:var(--color-danger)}.yamroong-ds-badge--info{background:var(--color-info-soft);color:var(--color-info)}.yamroong-ds-spinner{display:inline-block;width:1em;height:1em;border:2px solid;border-top:2px solid transparent;border-radius:50%;animation:yamroong-ds-spin .7s linear infinite}@keyframes yamroong-ds-spin{to{transform:rotate(1turn)}}.yamroong-ds-skeleton{background:var(--color-canvas-subtle);border-radius:var(--radius-sm);animation:yamroong-ds-skeleton-pulse 1.4s ease-in-out infinite}@keyframes yamroong-ds-skeleton-pulse{0%,to{opacity:1}50%{opacity:.55}}.yamroong-ds-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);text-align:center;color:var(--color-text-muted)}.yamroong-ds-empty__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text)}.yamroong-ds-alert{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;font-size:var(--text-sm);line-height:var(--leading-snug)}.yamroong-ds-alert--info{background:var(--color-info-soft);border-color:var(--color-info);color:var(--color-text)}.yamroong-ds-alert--success{background:var(--color-success-soft);border-color:var(--color-success);color:var(--color-text)}.yamroong-ds-alert--warning{background:var(--color-warning-soft);border-color:var(--color-warning);color:var(--color-text)}.yamroong-ds-alert--danger{background:var(--color-danger-soft);border-color:var(--color-danger);color:var(--color-text)}.yamroong-ds-modal__backdrop{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:rgb(0 0 0/.5);animation:yamroong-ds-fade-in var(--duration-fast) var(--ease-out)}.yamroong-ds-modal{font-family:var(--font-sans);width:100%;max-width:32rem;max-height:min(85vh,46rem);display:flex;flex-direction:column;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);animation:yamroong-ds-rise var(--duration-base) var(--ease-out)}.yamroong-ds-modal--wide{max-width:52rem}.yamroong-image-cropper__canvas{position:relative;width:100%;height:min(25rem,45dvh);min-height:8rem;background:var(--color-surface);overflow:hidden}.yamroong-ds-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-5) var(--space-3)}.yamroong-ds-modal__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);line-height:var(--leading-snug);overflow-wrap:anywhere}.yamroong-ds-modal__header>div{min-width:0}.yamroong-ds-modal__header>button{flex-shrink:0}.yamroong-ds-modal__body{min-height:0;padding:0 var(--space-5) var(--space-5);overflow-y:auto}.yamroong-ds-modal__footer{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border)}.yamroong-confirm-dialog__visual{display:grid;min-height:5.5rem;place-items:center}.yamroong-confirm-dialog__visual>span{display:grid;width:3.5rem;height:3.5rem;place-items:center;border-radius:50%;background:var(--color-warning-soft);color:var(--color-warning)}@media (max-width:64rem){.yamroong-ds-modal__backdrop{align-items:flex-end;padding:0;bottom:var(--yamroong-ds-keyboard-inset,0)}.yamroong-ds-modal{max-width:none;max-height:calc(var(--yamroong-ds-visible-viewport-height, 100dvh) - env(safe-area-inset-top));border-inline:0;border-bottom:0;border-radius:0}.yamroong-ds-modal__header{padding:var(--space-5) var(--space-4) var(--space-3)}.yamroong-ds-modal__body{padding-inline:var(--space-4);padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom))}.yamroong-ds-modal__footer{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));padding:var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom))}.yamroong-ds-modal__footer>*{width:100%}.yamroong-ds-modal :is(button,select){min-height:44px}}@keyframes yamroong-ds-fade-in{0%{opacity:0}}@keyframes yamroong-ds-rise{0%{opacity:0;transform:translateY(8px)}}.yamroong-ds-toasts{position:fixed;inset-block-end:var(--space-5);inset-inline:var(--space-4);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);pointer-events:none}@media (min-width:768px){.yamroong-ds-toasts{inset-inline-end:var(--space-5);inset-inline-start:auto;inset-block-end:var(--space-5);align-items:flex-end}}@media (min-width:1024px){.yamroong-ds-toasts{inset-block-start:var(--space-5);inset-block-end:auto}}.yamroong-ds-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;max-width:100%;padding:var(--space-3) var(--space-4);background:var(--color-surface-inverse);color:var(--color-text-inverse);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:var(--text-sm);pointer-events:auto;animation:yamroong-ds-rise var(--duration-base) var(--ease-out)}@media (min-width:768px){.yamroong-ds-toast{max-width:24rem}}@media (min-width:1024px){.yamroong-ds-toast{animation:yamroong-ds-slide-left var(--duration-base) var(--ease-out)}}@keyframes yamroong-ds-slide-left{0%{opacity:0;transform:translateX(16px)}}.yamroong-ds-toast--danger{background:var(--color-danger);color:#fff}.yamroong-ds-toast--success{background:var(--color-success);color:#fff}.yamroong-ds-toast__close{margin-inline-start:auto;background:none;border:0;color:inherit;cursor:pointer;opacity:.8;font-size:var(--text-lg);line-height:1}.yamroong-ds-color-mode{display:inline-flex;padding:0;gap:2px;background:transparent;border-radius:0}.yamroong-ds-color-mode__option{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:32px;padding:0 var(--space-2);border:0;border-radius:var(--radius-full);background:transparent;color:var(--color-text-muted);font-size:var(--text-xs);cursor:pointer}.yamroong-ds-color-mode__option[aria-pressed=true]{background:transparent;color:var(--color-accent-strong,var(--color-accent));box-shadow:none}.yamroong-ds-color-mode__option:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}.yamroong-ds-language-flag{display:block;width:24px;height:16px;border:1px solid color-mix(in srgb,var(--color-text) 18%,transparent);border-radius:2px;object-fit:cover}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.yamroong-ds-popover{position:relative;display:inline-flex}.yamroong-ds-popover:has(>.yamroong-ds-popover__panel){z-index:var(--z-overlay)}.yamroong-ds-popover__panel{font-family:var(--font-sans);position:absolute;z-index:var(--z-overlay);inset-block-start:calc(100% + var(--space-2));min-width:15rem;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain;background:var(--glass-fill-strong);backdrop-filter:var(--glass-filter-strong);-webkit-backdrop-filter:var(--glass-filter-strong);border:1px solid var(--glass-edge);border-radius:var(--radius-xl);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-sheen);animation:yamroong-ds-rise var(--duration-fast) var(--ease-out)}.yamroong-ds-popover__panel--start{inset-inline-start:0}.yamroong-ds-popover__panel--end{inset-inline-end:0}.yamroong-ds-popover__panel--above{inset-block-start:auto;inset-block-end:calc(100% + var(--space-2))}.yamroong-ds-segmented-group{display:flex;flex-direction:column;gap:var(--space-2)}.yamroong-ds-segmented-group__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted)}.yamroong-ds-segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:0;border-radius:0;background:transparent}.yamroong-ds-segmented__option{padding:var(--space-2) var(--space-3);white-space:nowrap;min-height:34px;border:0;border-radius:var(--radius-full);background:transparent;color:var(--color-text-muted);font:inherit;font-size:var(--text-sm);line-height:1.2;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.yamroong-ds-segmented__option:hover{color:var(--color-text)}.yamroong-ds-segmented__option[aria-checked=true]{background:transparent;color:var(--color-accent-strong,var(--color-accent));box-shadow:none}.yamroong-ds-segmented__option:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}@media (prefers-reduced-motion:reduce){.yamroong-ds-popover__panel,.yamroong-ds-segmented__option{animation:none;transition:none}}