:root{color-scheme:light;--color-bg: #ffffff;--color-surface: #f5f5f5;--color-surface-strong: #ebebeb;--color-text: #0a0a0a;--color-text-muted: #5c5c5c;--color-text-subtle: #8f8f8f;--color-border: #e3e3e3;--color-border-strong: #0a0a0a;--color-primary: #0a0a0a;--color-on-primary: #ffffff;--color-overlay: rgba(10, 10, 10, .4);--font-sans: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--text-xs: 12px;--text-sm: 14px;--text-md: 16px;--text-lg: 18px;--text-xl: 22px;--text-2xl: 28px;--text-3xl: 36px;--leading-tight: 1.25;--leading-normal: 1.55;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-full: 999px;--tap-min: 48px;--tap-lg: 64px;--screen-max: 480px;--border-width: 1px;--duration-fast: .15s;--duration-normal: .25s;--ease: cubic-bezier(.2, 0, 0, 1)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){color-scheme:dark;--color-bg: #0a0a0a;--color-surface: #171717;--color-surface-strong: #242424;--color-text: #f5f5f5;--color-text-muted: #a3a3a3;--color-text-subtle: #737373;--color-border: #2a2a2a;--color-border-strong: #f5f5f5;--color-primary: #f5f5f5;--color-on-primary: #0a0a0a;--color-overlay: rgba(0, 0, 0, .6)}}:root[data-theme=dark]{color-scheme:dark;--color-bg: #0a0a0a;--color-surface: #171717;--color-surface-strong: #242424;--color-text: #f5f5f5;--color-text-muted: #a3a3a3;--color-text-subtle: #737373;--color-border: #2a2a2a;--color-border-strong: #f5f5f5;--color-primary: #f5f5f5;--color-on-primary: #0a0a0a;--color-overlay: rgba(0, 0, 0, .6)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}button,input,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-border-strong);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.ds-banner{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-surface)}.ds-banner__text{display:flex;flex-direction:column;gap:2px}.ds-banner__title{font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--color-text)}.ds-banner__desc{font-size:var(--text-sm);color:var(--color-text-muted)}.ds-banner__actions{display:flex;gap:var(--space-2)}.ds-bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);padding:var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom));border-top:var(--border-width) solid var(--color-border);background:var(--color-bg)}.ds-bottom-nav__item{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px;justify-content:center;border:0;background:transparent;color:var(--color-text-subtle);font-size:var(--text-xs);cursor:pointer;-webkit-tap-highlight-color:transparent}.ds-bottom-nav__item--active{color:var(--color-text);font-weight:var(--weight-medium)}.ds-brand{font-weight:var(--weight-semibold);letter-spacing:-.03em;color:var(--color-text)}.ds-brand--md{font-size:var(--text-lg)}.ds-brand--lg{font-size:var(--text-3xl)}.ds-breathing{position:relative;display:flex;align-items:center;justify-content:center;width:240px;height:240px;margin:0 auto}.ds-breathing__ring{position:absolute;top:0;right:0;bottom:0;left:0;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full)}.ds-breathing__core{position:absolute;width:45%;height:45%;border-radius:var(--radius-full);background:var(--color-surface-strong);animation:ds-breathe 8s var(--ease) infinite}.ds-breathing__label{position:relative;font-size:var(--text-lg);font-weight:var(--weight-medium);color:var(--color-text)}@keyframes ds-breathe{0%,to{transform:scale(1)}50%{transform:scale(2.2)}}.ds-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-5);border:var(--border-width) solid transparent;border-radius:var(--radius-full);font-size:var(--text-md);font-weight:var(--weight-medium);cursor:pointer;transition:opacity var(--duration-fast) var(--ease),background var(--duration-fast) var(--ease);-webkit-tap-highlight-color:transparent}.ds-button:active{opacity:.7}.ds-button:disabled{opacity:.35;cursor:not-allowed}.ds-button--primary{background:var(--color-primary);color:var(--color-on-primary)}.ds-button--secondary{background:var(--color-bg);color:var(--color-text);border-color:var(--color-border-strong)}.ds-button--ghost{background:transparent;color:var(--color-text);padding:0 var(--space-3)}.ds-button--lg{min-height:var(--tap-lg);font-size:var(--text-lg);padding:0 var(--space-6)}.ds-button--hero{min-height:168px;border-radius:var(--radius-lg);font-size:var(--text-2xl);font-weight:var(--weight-semibold);flex-direction:column}.ds-button__subtitle{font-size:var(--text-sm);font-weight:var(--weight-regular);opacity:.7}.ds-button--block{display:flex;width:100%}.ds-icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);border:var(--border-width) solid transparent;border-radius:var(--radius-full);background:transparent;color:var(--color-text);cursor:pointer;-webkit-tap-highlight-color:transparent}.ds-icon-button:active{background:var(--color-surface)}.ds-icon-button--secondary{border-color:var(--color-border)}.ds-chip{display:inline-flex;align-items:center;min-height:26px;padding:0 var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full);background:transparent;color:var(--color-text);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap}.ds-chip--solid{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}.ds-chip--soft{background:var(--color-surface);border-color:transparent;color:var(--color-text-muted)}.ds-chip--interactive{min-height:36px;padding:0 var(--space-4);font-size:var(--text-sm);cursor:pointer}.ds-field{display:flex;flex-direction:column;gap:var(--space-2)}.ds-field__label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text)}.ds-field__hint{font-size:var(--text-xs);color:var(--color-text-muted)}.ds-field__control{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-4);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text-muted);transition:border-color var(--duration-fast) var(--ease)}.ds-field__control:focus-within{border-color:var(--color-border-strong)}.ds-field__control--error{border-color:var(--color-border-strong);border-style:dashed}.ds-field__input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:var(--text-md);color:var(--color-text)}.ds-field__input::placeholder,.ds-field__textarea::placeholder{color:var(--color-text-subtle)}.ds-field__control--area{flex-direction:column;align-items:stretch;padding:var(--space-4)}.ds-field__textarea{flex:1;border:0;outline:0;resize:none;background:transparent;font-size:var(--text-lg);line-height:var(--leading-normal);color:var(--color-text)}.ds-field__control--md .ds-field__textarea{min-height:120px}.ds-field__control--lg .ds-field__textarea{min-height:260px}.ds-field__actions{display:flex;justify-content:flex-end}.ds-list-group{display:flex;flex-direction:column;gap:var(--space-2)}.ds-list-group__title{margin:0;font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}.ds-list-group__items{display:flex;flex-direction:column;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.ds-list-item{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:56px;padding:var(--space-3) var(--space-4);border:0;background:var(--color-bg);color:var(--color-text-subtle);text-align:left}.ds-list-item+.ds-list-item{border-top:var(--border-width) solid var(--color-border)}.ds-list-item--interactive{cursor:pointer;-webkit-tap-highlight-color:transparent}.ds-list-item--interactive:active{background:var(--color-surface)}.ds-list-item__text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ds-list-item__title{font-size:var(--text-md);color:var(--color-text)}.ds-list-item__subtitle{font-size:var(--text-sm);color:var(--color-text-muted)}.ds-list-item__trailing{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}.ds-list-item--destructive .ds-list-item__title{font-weight:var(--weight-medium);text-decoration:underline;text-underline-offset:3px}.ds-options{display:flex;flex-direction:column;gap:var(--space-3)}.ds-option{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--tap-lg);padding:var(--space-4) var(--space-5);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);text-align:left;cursor:pointer;transition:border-color var(--duration-fast) var(--ease);-webkit-tap-highlight-color:transparent}.ds-option--selected{border-color:var(--color-border-strong);box-shadow:inset 0 0 0 1px var(--color-border-strong)}.ds-option__text{display:flex;flex-direction:column;gap:2px}.ds-option__label{font-size:var(--text-lg);font-weight:var(--weight-medium);color:var(--color-text)}.ds-option__desc{font-size:var(--text-sm);color:var(--color-text-muted)}.ds-option__mark{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full)}.ds-option--selected .ds-option__mark{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}.ds-progress{display:flex;flex-direction:column;gap:var(--space-2)}.ds-progress__label{font-size:var(--text-sm);color:var(--color-text-muted)}.ds-progress__track{display:flex;gap:var(--space-1)}.ds-progress__seg{flex:1;height:4px;border-radius:var(--radius-full);background:var(--color-surface-strong)}.ds-progress__seg--done{background:var(--color-primary)}.ds-scale{display:flex;flex-direction:column;gap:var(--space-3)}.ds-scale__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2)}.ds-scale__step{aspect-ratio:1;min-height:var(--tap-min);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full);background:var(--color-bg);color:var(--color-text);font-size:var(--text-xl);font-weight:var(--weight-medium);cursor:pointer}.ds-scale__step--selected{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}.ds-scale__labels{display:flex;justify-content:space-between;font-size:var(--text-sm);color:var(--color-text-muted)}.ds-screen{display:flex;flex-direction:column;height:100%;min-height:100%;max-width:var(--screen-max);margin:0 auto;background:var(--color-bg);color:var(--color-text)}.ds-screen__body{flex:1;overflow-y:auto;padding:var(--space-2) var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-6)}.ds-screen__body--top{padding-top:var(--space-8)}.ds-screen__body--center{justify-content:center}.ds-screen__footer{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom))}.ds-stack{display:flex;flex-direction:column}.ds-row{display:flex;align-items:center;flex-wrap:wrap}.ds-segmented{display:inline-flex;padding:3px;border-radius:var(--radius-full);background:var(--color-surface-strong)}.ds-segmented__item{min-height:32px;padding:0 var(--space-4);border:0;border-radius:var(--radius-full);background:transparent;color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer}.ds-segmented__item--selected{background:var(--color-bg);color:var(--color-text);box-shadow:0 1px 2px #0000001f}.ds-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.ds-stat{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-surface)}.ds-stat__value{font-size:var(--text-3xl);font-weight:var(--weight-semibold);line-height:1.1;color:var(--color-text)}.ds-stat__label{font-size:var(--text-sm);color:var(--color-text-muted)}.ds-suggestion{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:var(--border-width) dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.ds-suggestion--selected{border-style:solid;border-color:var(--color-border-strong)}.ds-suggestion__head{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}.ds-suggestion__text{margin:0;font-size:var(--text-md);color:var(--color-text)}.ds-suggestion__use{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-1);min-height:36px;padding:0 var(--space-3);border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-full);background:transparent;color:var(--color-text);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer}.ds-suggestion--selected .ds-suggestion__use{background:var(--color-primary);color:var(--color-on-primary)}.ds-heading{margin:0;font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:-.01em;color:var(--color-text)}.ds-heading--1{font-size:var(--text-2xl)}.ds-heading--2{font-size:var(--text-xl)}.ds-heading--3{font-size:var(--text-lg)}.ds-text{margin:0}.ds-text--sm{font-size:var(--text-sm)}.ds-text--md{font-size:var(--text-md)}.ds-text--lg{font-size:var(--text-lg)}.ds-text--default{color:var(--color-text)}.ds-text--muted{color:var(--color-text-muted)}.ds-text--subtle{color:var(--color-text-subtle)}.ds-label{font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}.ds-toggle{position:relative;flex:none;width:48px;height:28px;padding:0;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface-strong);cursor:pointer;transition:background var(--duration-normal) var(--ease)}.ds-toggle__thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:var(--radius-full);background:var(--color-bg);box-shadow:0 1px 2px #0003;transition:transform var(--duration-normal) var(--ease)}.ds-toggle--on{background:var(--color-primary);border-color:var(--color-primary)}.ds-toggle--on .ds-toggle__thumb{transform:translate(20px);background:var(--color-on-primary)}.ds-topbar{display:grid;grid-template-columns:var(--tap-min) 1fr var(--tap-min);align-items:center;min-height:56px;padding:0 var(--space-2)}.ds-topbar__title{text-align:center;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted)}.ds-topbar__side{display:flex}.ds-topbar__side--end{justify-content:flex-end}.ds-worry{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg)}.ds-worry--selected{border-color:var(--color-border-strong)}.ds-worry__main{display:flex;align-items:flex-start;gap:var(--space-3)}.ds-worry__body{flex:1;display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.ds-worry__text{margin:0;font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--color-text)}.ds-worry__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}.ds-worry__actions{display:flex;margin:calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0 0}.ds-worry__check{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:2px;border:var(--border-width) solid var(--color-border-strong);border-radius:6px;background:var(--color-bg);color:var(--color-on-primary);cursor:pointer}.ds-worry--selected .ds-worry__check{background:var(--color-primary)}.ds-worry__details{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-3);border-top:var(--border-width) solid var(--color-border)}.ds-worry__detail{display:flex;flex-direction:column;font-size:var(--text-sm);color:var(--color-text)}.ds-worry__detail-label{font-size:var(--text-xs);color:var(--color-text-muted)}.pv{min-height:100vh;background:var(--color-surface)}.pv-header{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);padding:var(--space-3) var(--space-4);border-bottom:var(--border-width) solid var(--color-border);background:var(--color-bg)}.pv-logo{font-weight:var(--weight-semibold);font-size:var(--text-lg);color:var(--color-text);text-decoration:none;letter-spacing:-.03em}.pv-tabs{display:flex;gap:var(--space-4);flex:1}.pv-tabs a{color:var(--color-text-muted);text-decoration:none;font-size:var(--text-sm);padding:var(--space-1) 0;border-bottom:2px solid transparent}.pv-tabs a.is-active{color:var(--color-text);border-bottom-color:var(--color-text)}.pv-controls{display:flex;gap:var(--space-2)}.pv-controls select{min-height:36px;padding:0 var(--space-2);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);font-size:var(--text-sm)}.pv-main{max-width:1400px;margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-8)}.pv-intro{margin:0 0 var(--space-6);max-width:640px;color:var(--color-text-muted);font-size:var(--text-sm)}.pv-h2{margin:var(--space-7) 0 var(--space-4);font-size:var(--text-xl);font-weight:var(--weight-semibold)}.pv-h2:first-child{margin-top:0}.pv-h3{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold)}.pv-frames{display:flex;flex-wrap:wrap;gap:var(--space-6)}.pv-figure{margin:0;display:flex;flex-direction:column;gap:var(--space-2)}.pv-figure figcaption a{font-size:var(--text-sm);color:var(--color-text)}.pv-phone{width:360px;max-width:calc(100vw - 32px);height:740px;border:var(--border-width) solid var(--color-border);border-radius:28px;overflow:hidden;background:var(--color-bg);transform:translateZ(0)}.pv-single__bar{display:flex;justify-content:space-between;gap:var(--space-3);height:28px;align-items:center;padding:0 var(--space-4);background:var(--color-surface-strong);font-size:var(--text-xs);color:var(--color-text-muted)}.pv-single__bar a{color:var(--color-text);text-decoration:none}.pv-single{height:calc(100dvh - 28px)}.pv-ds{max-width:760px}.pv-spec{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-bg)}.pv-spec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2)}.pv-used{font-size:var(--text-xs);color:var(--color-text-muted)}.pv-spec__demo{display:flex;flex-direction:column;gap:var(--space-4)}.pv-box{border:var(--border-width) dashed var(--color-border);border-radius:var(--radius-md);overflow:hidden}.pv-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3)}.pv-swatch{display:flex;align-items:center;gap:var(--space-2)}.pv-swatch span{flex:none;width:32px;height:32px;border-radius:var(--radius-sm);border:var(--border-width) solid var(--color-border)}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-xs);color:var(--color-text-muted)}.pv-type{display:flex;align-items:baseline;gap:var(--space-3);line-height:var(--leading-tight)}.pv-type code{width:32px;flex:none}.pv-space{display:flex;align-items:center;gap:var(--space-3)}.pv-space code{width:64px}.pv-space span{height:12px;background:var(--color-primary);border-radius:2px}.pv-radius{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border:var(--border-width) solid var(--color-border-strong)}.pv-icon{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);width:56px;color:var(--color-text)}