:root{--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-8: 3rem;--space-10: 4rem;--font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--text-heading: clamp(1.25rem, 4vw, 1.5rem);--text-body: clamp(.938rem, 2vw, 1rem);--text-small: .813rem;--text-label: .75rem;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--leading-tight: 1;--leading-heading: 1.25;--leading-body: 1.5;--leading-small: 1.4;--radius-card: 8px;--radius-sheet: 12px;--radius-pill: 999px;--z-dropdown: 10;--z-sticky: 20;--z-backdrop: 30;--z-modal: 40;--z-toast: 50;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--ease-out-quart: cubic-bezier(.25, 1, .5, 1);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .4s}:root,[data-theme=light]{--color-bg: oklch(1 0 0);--color-surface: oklch(.97 .01 330);--color-surface-hover: oklch(.96 .01 330);--color-primary: oklch(.6 .14 343);--color-primary-hover: oklch(.55 .14 343);--color-primary-ring: oklch(.6 .14 343 / .3);--color-accent: oklch(.52 .12 180);--color-ink: oklch(.12 .012 330);--color-muted: oklch(.48 .01 330);--color-border: oklch(.88 .008 330);--color-success: oklch(.55 .12 150);--color-success-bg: oklch(.93 .04 150);--color-danger: oklch(.55 .17 30);--color-overlay: oklch(0 0 0 / .3)}[data-theme=dark]{--color-bg: oklch(.1 0 0);--color-surface: oklch(.14 .01 330);--color-surface-hover: oklch(.16 .01 330);--color-primary: oklch(.7 .14 343);--color-primary-hover: oklch(.75 .14 343);--color-primary-ring: oklch(.7 .14 343 / .3);--color-accent: oklch(.68 .11 180);--color-ink: oklch(.92 .012 330);--color-muted: oklch(.58 .008 330);--color-border: oklch(.22 .008 330);--color-success: oklch(.55 .12 150);--color-success-bg: oklch(.18 .04 150);--color-danger: oklch(.65 .17 30);--color-overlay: oklch(0 0 0 / .6)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-family:var(--font-body);font-size:16px;line-height:var(--leading-body);color:var(--color-ink);background:var(--color-bg);-webkit-tap-highlight-color:transparent}body{min-height:100dvh;overflow:hidden;background:var(--color-bg);transition:background var(--duration-normal) var(--ease-out-quart),color var(--duration-normal) var(--ease-out-quart)}#root{min-height:100dvh;display:flex;flex-direction:column}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app{display:flex;flex-direction:column;min-height:100dvh;padding:var(--space-5) var(--space-4);padding-top:max(var(--space-5),var(--tg-viewport-content-safe-area-inset-top, 0px));background:var(--color-bg);transition:background var(--duration-normal) var(--ease-out-quart)}.app__header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-1)}.app__title{font-family:var(--font-display);font-size:1.25rem;font-weight:var(--weight-semibold);letter-spacing:-.01em;color:var(--color-ink)}.app__header-left,.app__header-right{display:flex;align-items:center;gap:var(--space-2)}.app__icon-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-card);color:var(--color-muted);transition:color var(--duration-fast) var(--ease-out-quart),background var(--duration-fast) var(--ease-out-quart)}.app__icon-btn:hover{background:var(--color-surface);color:var(--color-ink)}.app__main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6)}.welcome{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}.welcome__text{font-size:var(--text-heading);font-weight:var(--weight-semibold);color:var(--color-ink)}.welcome__hint{font-size:var(--text-small);color:var(--color-muted)}.settings-backdrop{position:fixed;inset:0;background:var(--color-overlay);z-index:var(--z-backdrop);animation:fadeIn var(--duration-normal) var(--ease-out-quart)}.settings-sheet{position:fixed;bottom:0;left:0;right:0;max-height:70dvh;background:var(--color-bg);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;z-index:var(--z-modal);display:flex;flex-direction:column;animation:slideUp var(--duration-normal) var(--ease-out-quart);transition:transform var(--duration-normal) var(--ease-out-quart);touch-action:pan-y}.settings-sheet__handle{width:36px;height:4px;border-radius:2px;background:var(--color-border);margin:var(--space-3) auto;flex-shrink:0}.settings-sheet__header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-5) var(--space-3);flex-shrink:0}.settings-sheet__title{font-size:var(--text-heading);font-weight:var(--weight-semibold);color:var(--color-ink)}.settings-sheet__back,.settings-sheet__close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-card);color:var(--color-muted);transition:color var(--duration-fast) var(--ease-out-quart),background var(--duration-fast) var(--ease-out-quart)}.settings-sheet__back:hover,.settings-sheet__close:hover{background:var(--color-surface);color:var(--color-ink)}.settings-sheet__content{overflow-y:auto;padding:0 var(--space-5) var(--space-6);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-loading{position:fixed;bottom:30dvh;left:50%;transform:translate(-50%);width:24px;height:24px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:translate(-50%) rotate(360deg)}}