*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #f8f9fa;--color-surface: #ffffff;--color-text: #1a1a2e;--color-text-muted: #6c757d;--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-border: #dee2e6;--color-danger: #dc3545;--max-width: 960px;--radius: 8px}html{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}body{min-height:100vh;display:flex;flex-direction:column}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}img,video{max-width:100%;display:block}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 1rem}.site-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:1rem 0}.site-header .container{display:flex;align-items:center;justify-content:space-between}.site-logo{font-size:1.25rem;font-weight:700;color:var(--color-text)}.site-logo:hover{text-decoration:none}.btn-share{display:inline-flex;align-items:center;gap:.4rem;padding:0;border:none;background:none;color:var(--color-text-muted);font-size:.9rem;cursor:pointer;transition:color .15s}.btn-share:hover{color:var(--color-text)}main{flex:1;padding:2rem 0}.site-footer{border-top:1px solid var(--color-border);padding:1.5rem 0;text-align:center;color:var(--color-text-muted);font-size:.85rem}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.25rem;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:500;cursor:pointer;transition:background .15s}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-secondary{background:var(--color-border);color:var(--color-text)}.btn-secondary:hover:not(:disabled){background:#caced1}.btn-secondary.btn-active{background:var(--color-primary);color:#fff}.hero{text-align:center;margin-bottom:2.5rem}.hero h1{font-size:2rem;margin-bottom:.5rem}.hero p{color:var(--color-text-muted);font-size:1.1rem;max-width:600px;margin:0 auto}.webcam-preview{max-width:640px;margin:0 auto}.webcam-viewport{width:100%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden}.webcam-viewport:fullscreen{background:#000;border-radius:0}.webcam-viewport:fullscreen .webcam-video{object-fit:contain}.webcam-video{width:100%;height:100%;object-fit:cover}.webcam-empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background:linear-gradient(135deg,#e8edf2,#f8f9fa,#e8edf2,#f8f9fa,#e8edf2);background-size:200% 200%;animation:gradient-shift 6s ease infinite;color:var(--color-text-muted)}.webcam-empty span{font-size:.9rem}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.webcam-empty__badge{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border-radius:50%;box-shadow:0 2px 8px #0000000f}.webcam-controls{display:flex;justify-content:center;gap:.75rem;margin-top:1rem;flex-wrap:wrap}.webcam-error{padding:1rem;margin-top:1rem;background:#fff0f0;border:1px solid var(--color-danger);border-radius:var(--radius);color:var(--color-danger);font-size:.9rem}.camera-selector{margin-bottom:1rem}.camera-selector select{width:100%;padding:.5rem .6rem;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);font-size:.9rem;color:var(--color-text);cursor:pointer}.camera-selector select:disabled{opacity:.5;cursor:not-allowed}.camera-details{margin-top:1rem}.camera-details dl{display:flex;flex-wrap:wrap;gap:.25rem .75rem;font-size:.82rem;justify-content:center}.camera-details dt{color:var(--color-text-muted)}.camera-details dt:after{content:":"}.camera-details dd{color:var(--color-text);margin-right:.75rem}.about-section{border-top:1px solid var(--color-border);padding:2.5rem 0}.about-section .container{max-width:640px}.about-section h2{font-size:1.5rem;margin-bottom:.75rem}.about-section h2:not(:first-child){margin-top:2rem}.about-section p{margin-bottom:1rem;color:var(--color-text-muted);line-height:1.7}.about-section p:last-child{margin-bottom:0}.about-section ul{margin-bottom:1rem;padding-left:1.25rem;color:var(--color-text-muted);line-height:1.7}.about-section ul li{margin-bottom:.25rem}.page-content{max-width:640px;margin:0 auto;text-align:center;padding:4rem 0}.page-content h1{font-size:2rem;margin-bottom:1rem}.page-content p{margin-bottom:1rem;color:var(--color-text-muted);line-height:1.7}@media(max-width:600px){.hero h1{font-size:1.5rem}}