:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--line-height-tight: 1.2;--line-height-normal: 1.6;--line-height-relaxed: 1.875;--letter-spacing-tight: -.02em;--letter-spacing-normal: 0;--letter-spacing-wide: .02em}html{font-family:var(--font-sans);font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-size:var(--text-base);font-weight:var(--font-normal);line-height:var(--line-height-normal);color:#333}h1,h2,h3,h4,h5,h6{font-weight:var(--font-bold);line-height:var(--line-height-tight);margin-bottom:.5em}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base);font-weight:var(--font-semibold)}p{margin-bottom:1em}a{color:#06c;text-decoration:none;transition:color .2s ease}a:hover{color:#0052a3;text-decoration:underline}a:focus{outline:2px solid #0066cc;outline-offset:2px}ul,ol{margin-left:1.5em;margin-bottom:1em}li{margin-bottom:.5em}code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9em;background-color:#f5f5f5;padding:.2em .4em;border-radius:3px}pre{background-color:#f5f5f5;padding:1em;border-radius:4px;overflow-x:auto;margin-bottom:1em}pre code{background-color:transparent;padding:0;border-radius:0}@media (max-width: 640px){html{font-size:14px}h1{font-size:var(--text-2xl)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}}:root{--spacing-0: 0;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-12: 3rem;--spacing-16: 4rem;--spacing-20: 5rem;--spacing-24: 6rem;--color-primary: #FF6B6B;--color-primary-dark: #E63946;--color-secondary: #FFE66D;--color-accent: #4ECDC4;--color-gray-light: #f5f5f5;--color-gray-medium: #ddd;--color-gray-dark: #666;--color-text: #333;--color-text-light: #666;--color-text-lighter: #999;--color-white: #fff;--color-success: #28a745;--color-error: #dc3545;--color-warning: #ffc107;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .1);--z-hide: -1;--z-base: 0;--z-dropdown: 100;--z-modal: 1000;--z-tooltip: 1100;--z-notification: 1200;--transition-fast: .15s ease-in-out;--transition-normal: .3s ease-in-out;--transition-slow: .5s ease-in-out}html{container-type:inline-size}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.grid{display:grid}.p-0{padding:var(--spacing-0)}.p-1{padding:var(--spacing-1)}.p-2{padding:var(--spacing-2)}.p-4{padding:var(--spacing-4)}.p-6{padding:var(--spacing-6)}.p-8{padding:var(--spacing-8)}.m-0{margin:var(--spacing-0)}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.hidden{display:none}.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-muted{color:var(--color-text-lighter)}@media (max-width: 768px){:root{--spacing-16: 3rem;--spacing-20: 4rem;--spacing-24: 5rem}}@media print{body{background-color:#fff}a{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}}:root{--button-min-size: 44px;--button-bg: #ff6b6b;--button-bg-hover: #ff8a8a;--button-bg-active: #e63946;--button-border: #d32f2f;--button-bg-playing: #4ecdc4;--button-border-playing: #2a7d7a;--button-bg-success: #28a745;--button-border-success: #1e7e34;--button-bg-error: #dc3545;--button-border-error: #a71d2a;--button-text: #ffffff;--button-shadow: rgba(0, 0, 0, .2);--button-shadow-focus: rgba(0, 0, 0, .3);--anim-press: .1s cubic-bezier(.34, 1.56, .64, 1);--anim-loading: .8s linear infinite;--anim-success: .3s cubic-bezier(.34, 1.56, .64, 1);--anim-error: .15s cubic-bezier(.34, 1.56, .64, 1);--anim-playing: .6s ease-in-out infinite}.keypad-button{min-width:var(--button-min-size);min-height:var(--button-min-size);width:100%;height:100%;padding:8px;background:linear-gradient(135deg,var(--button-bg) 0%,var(--button-bg-hover) 100%);color:var(--button-text);border:2px solid var(--button-border);font-size:16px;font-weight:700;line-height:1.2;border-radius:12px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 8px var(--button-shadow);touch-action:manipulation;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex-shrink:2;position:relative;outline:none}.keypad-button:focus-visible,.keypad-button.focused{outline:3px solid #ffd700;outline-offset:2px;box-shadow:0 0 0 3px #ffd70040,0 4px 8px var(--button-shadow)}.keypad-button:hover:not(:disabled):not(.pressed):not(.playing):not(.loading){transform:translateY(-2px);box-shadow:0 6px 12px var(--button-shadow);background:linear-gradient(135deg,var(--button-bg-hover) 0%,var(--button-bg-active) 100%)}.keypad-button.pressed:not(:disabled){animation:press-animation var(--anim-press) forwards}@keyframes press-animation{0%{transform:scale(1) translateY(0);box-shadow:0 4px 8px var(--button-shadow)}50%{transform:scale(.95) translateY(2px);box-shadow:0 2px 4px var(--button-shadow)}to{transform:scale(.98) translateY(1px);box-shadow:0 2px 4px var(--button-shadow)}}.keypad-button.pressed{background:linear-gradient(135deg,var(--button-bg-active) 0%,var(--button-bg) 100%)}.keypad-button.loading:disabled{opacity:.8;cursor:not-allowed}.keypad-button.loading:after{content:"";position:absolute;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spinner-animation var(--anim-loading);z-index:10}@keyframes spinner-animation{to{transform:rotate(360deg)}}.keypad-button.playing{background:linear-gradient(135deg,var(--button-bg-playing) 0%,#44a5a8 100%);border-color:var(--button-border-playing);animation:playing-animation var(--anim-playing)}@keyframes playing-animation{0%,to{box-shadow:0 0 #4ecdc4b3,0 4px 8px var(--button-shadow)}50%{box-shadow:0 0 0 8px #4ecdc400,0 4px 8px var(--button-shadow)}}.keypad-button.success{background:linear-gradient(135deg,var(--button-bg-success) 0%,#20c997 100%);border-color:var(--button-border-success);animation:success-animation var(--anim-success) forwards}@keyframes success-animation{0%{transform:scale(1);box-shadow:0 4px 8px var(--button-shadow)}50%{transform:scale(1.1);box-shadow:0 0 0 4px #28a74566}to{transform:scale(1);box-shadow:0 4px 8px var(--button-shadow)}}.keypad-button.success:before{content:"✓";position:absolute;font-size:24px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);animation:checkmark-animation .6s cubic-bezier(.34,1.56,.64,1);z-index:20}@keyframes checkmark-animation{0%{opacity:0;transform:scale(.5) rotate(-45deg)}50%{opacity:1}to{opacity:0;transform:scale(1.2) rotate(0)}}.keypad-button.error{background:linear-gradient(135deg,var(--button-bg-error) 0%,#c82333 100%);border-color:var(--button-border-error);animation:error-animation .5s cubic-bezier(.34,1.56,.64,1)}@keyframes error-animation{0%,to{transform:translate(0);box-shadow:0 4px 8px var(--button-shadow)}10%,30%,50%,70%{transform:translate(-2px);box-shadow:0 0 0 4px #dc35454d}20%,40%,60%{transform:translate(2px);box-shadow:0 0 0 4px #dc35454d}}.keypad-button.error:before{content:"✕";position:absolute;font-size:24px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);animation:error-icon-animation .6s ease-out;z-index:20}@keyframes error-icon-animation{0%{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1}to{opacity:.7;transform:scale(1) rotate(45deg)}}.keypad-button:disabled{opacity:.6;cursor:not-allowed}.button-content{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;justify-content:center;z-index:5}.button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.button-icon img{width:100%;height:100%;object-fit:contain;flex-shrink:1}.button-label{font-size:14px;font-weight:700;color:var(--button-text);text-shadow:0 1px 2px rgba(0,0,0,.2);white-space:nowrap}@media (prefers-contrast: more){.keypad-button{border-width:3px;font-weight:bolder}.button-label{text-shadow:0 2px 4px rgba(0,0,0,.5)}}@media (prefers-reduced-motion: reduce){.keypad-button{animation:none!important;transition:none}.keypad-button:before,.keypad-button:after{animation:none!important}.keypad-button:hover:not(:disabled){transform:none}.keypad-button.pressed{transform:translateY(0)}}@media (max-width: 480px){.keypad-button{font-size:14px;padding:6px;gap:4px}.button-icon{width:40px;height:40px}.button-label{font-size:12px}.keypad-button.success:before,.keypad-button.error:before{font-size:20px}.keypad-button.loading:after{width:16px;height:16px;border-width:2px}}@media print{.keypad-button{box-shadow:none;animation:none}.keypad-button:before,.keypad-button:after{display:none}}:root{--phone-width: 280px;--phone-aspect: 1.35;--phone-border-radius: 40px;--phone-primary: #ff6b6b;--phone-primary-dark: #e63946;--phone-secondary: #ffe66d;--phone-shadow: rgba(0, 0, 0, .3);--phone-perspective: 1000px}.phone-body{background:linear-gradient(135deg,var(--phone-primary) 0%,var(--phone-primary-dark) 100%);border-radius:var(--phone-border-radius);padding:10px;box-shadow:0 20px 60px var(--phone-shadow),inset 0 1px #fff3;border:3px solid var(--phone-primary-dark);position:relative;transform-style:preserve-3d;perspective:var(--phone-perspective)}.phone-body:before{content:"";position:absolute;inset:0;border-radius:var(--phone-border-radius);background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);pointer-events:none}.phone-body:after{content:"";position:absolute;inset:10px;border-radius:calc(var(--phone-border-radius) - 10px);border:1px solid rgba(255,255,255,.1);pointer-events:none;z-index:1}.phone-display{background:linear-gradient(180deg,#fff5f5,#ffe0e0);border-radius:20px;padding:15px;margin-bottom:20px;box-shadow:inset 0 2px 5px #0000001a;border:2px solid #ddd;position:relative;z-index:2}.screen{background:linear-gradient(135deg,var(--phone-secondary) 0%,#ffd700 100%);border-radius:12px;padding:10px;min-height:100px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 3px 8px #00000026;border:2px solid #ffb300;position:relative}.screen-content{text-align:center;z-index:3}.phone-icon{margin-bottom:8px;animation:icon-float 3s ease-in-out infinite}@keyframes icon-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.welcome-text{font-size:18px;font-weight:700;color:#333;margin:0}.phone-keypad-area{background:linear-gradient(180deg,#ff8a8a,#ff6b6b);border-radius:16px;padding:15px;margin-bottom:15px;box-shadow:inset 0 2px 5px #0003;position:relative;z-index:2}.phone-keypad-area:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);border-radius:16px;pointer-events:none}.phone-speaker{background:#d32f2f;border-radius:12px;padding:8px;display:flex;gap:8px;justify-content:center;position:relative;z-index:2;box-shadow:inset 0 2px 4px #0003}.speaker-grill{width:60px;height:12px;background:repeating-linear-gradient(90deg,#b71c1c 0px 2px,#c62828 2px 4px);border-radius:6px;box-shadow:inset 0 1px 2px #0000004d}.phone-body{background-image:linear-gradient(135deg,var(--phone-primary) 0%,var(--phone-primary-dark) 100%),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="60" text-anchor="middle" font-size="24" fill="rgba(255,255,255,0.1)" font-family="Arial">Phone</text></svg>');background-size:cover,auto;background-position:0 0,center}@media (max-width: 480px){.phone-body{padding:16px;border-radius:32px}.phone-display{border-radius:16px;padding:12px;margin-bottom:16px}.screen{min-height:80px;padding:15px}.phone-icon{font-size:32px}.welcome-text{font-size:16px}.phone-keypad-area{border-radius:12px;padding:12px;margin-bottom:12px}.speaker-grill{width:50px;height:10px}}@media (max-width: 360px){.phone-body{padding:12px;border-radius:24px}.phone-display{padding:10px;margin-bottom:12px}.screen{min-height:70px;padding:12px}.phone-icon{font-size:28px;margin-bottom:6px}.welcome-text{font-size:14px}.speaker-grill{width:40px;height:8px}}.phone-container:hover .phone-body{transform:translateY(-5px);box-shadow:0 25px 70px var(--phone-shadow),inset 0 1px #fff3;transition:all .3s cubic-bezier(.4,0,.2,1)}@keyframes phone-shake{0%,to{transform:translate(0)}10%,30%,50%,70%{transform:translate(-2px)}20%,40%,60%{transform:translate(2px)}}.phone-body.error-shake{animation:phone-shake .4s}@keyframes screen-flash{0%,to{background:linear-gradient(135deg,var(--phone-secondary) 0%,#ffd700 100%)}50%{background:linear-gradient(135deg,#ffe66d,#ffed4e)}}@media (prefers-reduced-motion: reduce){.phone-icon{animation:none}.phone-container:hover .phone-body{transform:none}.phone-body.error-shake{animation:none}}@media (prefers-contrast: more){.phone-body{border-width:4px}.phone-display,.screen{border-width:3px}}@media print{.phone-body{box-shadow:none}.phone-body:before,.phone-body:after{display:none}}@media (prefers-color-scheme: dark){.phone-display{background:linear-gradient(180deg,#333,#222)}.screen{background:linear-gradient(135deg,#555,#444);color:#fff}.welcome-text{color:#fff}}*{margin:0;padding:0;box-sizing:border-box}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;height:100%}body{background-color:#f5f5f5;color:#333;line-height:1.6;overflow:hidden;height:100vh}