:root{--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-xxl:3rem;--spacing-xxxl:4rem;--container-padding-xs:1rem;--container-padding-sm:1.5rem;--container-padding-md:2rem;--container-padding-lg:2.5rem;--container-padding-xl:3rem;--touch-target-min:44px;--button-height-mobile:48px;--button-height-desktop:40px;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-xxl:1.5rem;--font-size-xxxl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--line-height-tight:1.2;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:1.75;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0em;--letter-spacing-wide:0.025em;--border-radius-sm:0.25rem;--border-radius-md:0.375rem;--border-radius-lg:0.5rem;--border-radius-xl:0.75rem;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--duration-fast:150ms;--duration-normal:300ms;--duration-slow:500ms;--ease-in-out:cubic-bezier(0.4,0,0.2,1);--ease-out:cubic-bezier(0,0,0.2,1);--ease-in:cubic-bezier(0.4,0,1,1)}.container-responsive{padding-left:var(--container-padding-xs);padding-right:var(--container-padding-xs)}.btn-touch{font-weight:var(--font-weight-medium);min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:.75rem 1rem}.btn-touch,.text-responsive{font-size:var(--font-size-base);line-height:var(--line-height-normal)}.text-responsive{color:#333}.heading-1{color:#1a1a1a;font-size:var(--font-size-xxxl);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-tight);margin-bottom:var(--spacing-lg)}.heading-2{font-size:var(--font-size-xxl);letter-spacing:var(--letter-spacing-tight)}.heading-2,.heading-3{color:#1a1a1a;font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);margin-bottom:var(--spacing-md)}.heading-3{font-size:var(--font-size-xl)}.heading-4{color:#1a1a1a;font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);margin-bottom:var(--spacing-sm)}.text-body{font-size:var(--font-size-base)}.text-body,.text-body-large{color:#333;font-weight:var(--font-weight-normal);line-height:var(--line-height-relaxed);margin-bottom:var(--spacing-md)}.text-body-large{font-size:var(--font-size-lg)}.text-body-small{color:#666;font-size:var(--font-size-sm);margin-bottom:var(--spacing-sm)}.text-body-small,.text-caption{font-weight:var(--font-weight-normal);line-height:var(--line-height-normal)}.text-caption{color:#888;font-size:var(--font-size-xs);margin-bottom:var(--spacing-xs)}.text-high-contrast{color:#000;font-weight:var(--font-weight-medium)}.text-medium-contrast{color:#333}.text-low-contrast{color:#666}.text-muted{color:#888}.link-mobile{align-items:center;border-radius:var(--border-radius-sm);color:#06c;display:inline-flex;min-height:var(--touch-target-min);padding:var(--spacing-xs);text-decoration:none;transition:background-color var(--duration-fast) var(--ease-out)}.link-mobile:focus,.link-mobile:hover{background-color:rgba(0,102,204,.1);color:#0052a3;outline:none}@media (min-width:576px){:root{--container-padding-xs:var(--container-padding-sm);--font-size-base:1.0625rem;--font-size-xxxl:2rem;--font-size-4xl:2.5rem}.container-responsive{padding-left:var(--container-padding-sm);padding-right:var(--container-padding-sm)}.text-responsive{font-size:var(--font-size-base)}.heading-1{font-size:var(--font-size-4xl);margin-bottom:var(--spacing-xl)}.heading-2{font-size:var(--font-size-xxxl);margin-bottom:var(--spacing-lg)}.text-body{line-height:var(--line-height-loose)}}@media (min-width:768px){:root{--container-padding-xs:var(--container-padding-md)}.container-responsive{padding-left:var(--container-padding-md);padding-right:var(--container-padding-md)}.btn-touch{min-height:var(--button-height-desktop);padding:.5rem 1rem}.text-responsive{font-size:var(--font-size-lg)}}@media (min-width:992px){:root{--container-padding-xs:var(--container-padding-lg)}.container-responsive{padding-left:var(--container-padding-lg);padding-right:var(--container-padding-lg)}}@media (min-width:1200px){:root{--container-padding-xs:var(--container-padding-xl)}.container-responsive{padding-left:var(--container-padding-xl);padding-right:var(--container-padding-xl)}}.p-responsive{padding:var(--container-padding-xs)}.px-responsive{padding-left:var(--container-padding-xs);padding-right:var(--container-padding-xs)}.py-responsive{padding-bottom:var(--container-padding-xs);padding-top:var(--container-padding-xs)}.m-responsive{margin:var(--spacing-md)}.mx-responsive{margin-left:var(--spacing-md);margin-right:var(--spacing-md)}.my-responsive{margin-bottom:var(--spacing-md);margin-top:var(--spacing-md)}.grid-responsive{display:grid;gap:var(--spacing-md);grid-template-columns:1fr}@media (min-width:768px){.grid-responsive{gap:var(--spacing-lg);grid-template-columns:repeat(2,1fr)}}@media (min-width:992px){.grid-responsive{gap:var(--spacing-xl);grid-template-columns:repeat(3,1fr)}}.card-responsive{border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);padding:var(--spacing-md);transition:box-shadow var(--duration-fast) var(--ease-out)}.card-responsive:hover{box-shadow:var(--shadow-md)}@media (min-width:768px){.card-responsive{padding:var(--spacing-lg)}}.form-mobile-optimized{font-size:16px}.form-mobile-optimized input,.form-mobile-optimized select,.form-mobile-optimized textarea{-webkit-appearance:none;border-radius:var(--border-radius-lg);font-size:16px;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.form-mobile-optimized input:focus,.form-mobile-optimized select:focus,.form-mobile-optimized textarea:focus{border-color:#06c;box-shadow:0 0 0 3px rgba(0,102,204,.1);outline:none}.form-label-mobile{color:#333;display:block;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-sm)}.textarea-mobile{line-height:1.5;min-height:120px;padding:12px 16px;resize:vertical}.btn-mobile-primary{background:linear-gradient(135deg,#06c,#0052a3);border:none;border-radius:var(--border-radius-lg);box-shadow:0 2px 4px rgba(0,102,204,.2);color:#fff;font-size:16px;font-weight:var(--font-weight-semibold);min-height:48px;padding:12px 24px;transition:all var(--duration-fast) var(--ease-out)}.btn-mobile-primary:focus,.btn-mobile-primary:hover{background:linear-gradient(135deg,#0052a3,#003d7a);box-shadow:0 4px 8px rgba(0,102,204,.3);transform:translateY(-1px)}.btn-mobile-primary:active{box-shadow:0 2px 4px rgba(0,102,204,.2);transform:translateY(0)}.btn-mobile-secondary{background:#fff;border:2px solid #e0e0e0;border-radius:var(--border-radius-lg);color:#333;font-size:16px;font-weight:var(--font-weight-medium);min-height:48px;padding:12px 24px;transition:all var(--duration-fast) var(--ease-out)}.btn-mobile-secondary:focus,.btn-mobile-secondary:hover{background:rgba(0,102,204,.05);border-color:#06c;color:#06c}.card-mobile{border:none;border-radius:var(--border-radius-xl);box-shadow:0 2px 8px rgba(0,0,0,.1);overflow:hidden}.card-mobile .card-header{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-bottom:1px solid #dee2e6;padding:16px 20px}.card-mobile .card-body{padding:20px}.roast-display-mobile{background:linear-gradient(135deg,#f8f9fa,#fff);border:1px solid #e9ecef;border-radius:var(--border-radius-xl);box-shadow:inset 0 1px 3px rgba(0,0,0,.05);margin:16px 0;padding:20px}.roast-text-mobile{color:#2c3e50;font-size:16px;font-weight:var(--font-weight-normal);line-height:1.6;white-space:pre-wrap;word-wrap:break-word}.progress-mobile{align-items:center;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.progress-step-mobile{align-items:center;display:flex;gap:8px}.progress-dot-mobile{align-items:center;border-radius:50%;display:flex;font-size:14px;font-weight:600;height:32px;justify-content:center;transition:all var(--duration-fast) var(--ease-out);width:32px}.progress-dot-active{background:linear-gradient(135deg,#06c,#0052a3);box-shadow:0 2px 4px rgba(0,102,204,.3);color:#fff}.progress-dot-inactive{background:#f8f9fa;border:2px solid #e9ecef;color:#6c757d}.progress-line-mobile{height:20px;margin:4px 0;transition:background-color var(--duration-fast) var(--ease-out);width:2px}.progress-line-active{background:linear-gradient(180deg,#06c 0,#0052a3)}.progress-line-inactive{background:#e9ecef}.sharing-mobile{background:#f8f9fa;border-radius:var(--border-radius-xl);margin-top:20px;padding:20px}.sharing-url-mobile{background:#fff;border:1px solid #dee2e6;border-radius:var(--border-radius-lg);color:#6c757d;font-size:14px;margin-bottom:12px;padding:12px 16px;text-align:center;word-break:break-all}.touch-feedback{transition:all var(--duration-fast) var(--ease-out)}.touch-feedback:active{opacity:.8;transform:scale(.98)}@media (max-width:575.98px){.form-group-mobile{margin-bottom:24px}.form-group-mobile:last-child{margin-bottom:0}.card-mobile{margin-bottom:16px}.btn-mobile-stack{margin-bottom:12px;width:100%}.btn-mobile-stack:last-child{margin-bottom:0}}@media (prefers-reduced-motion:reduce){.btn-mobile-primary,.btn-mobile-secondary,.progress-dot-mobile,.progress-line-mobile,.touch-feedback{transition:none}.btn-mobile-primary:hover,.touch-feedback:active{transform:none}}@media (prefers-contrast:high){.form-mobile-optimized input:focus,.form-mobile-optimized select:focus,.form-mobile-optimized textarea:focus{border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.3)}.btn-mobile-primary{background:#000;border:2px solid #000}.btn-mobile-secondary{border-color:#000;color:#000}}