:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--main-size: clamp(3.5rem, 12vw, 8rem);--accent1: #0047ff;--accent2: #8a2be2;--glow-color: rgba(0, 71, 255, .35);--text-color: #111;--bg-light: #f8faff}@media (prefers-color-scheme: dark){:root{--accent1: #4d8fff;--accent2: #a855f7;--glow-color: rgba(77, 143, 255, .5);--text-color: #e4e4e7;--bg-light: #1a1a1a}}body{background:var(--bg-light);color:var(--text-color);font-family:Poppins,Inter,Noto Sans JP,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;margin:0;padding:2rem;text-align:center}h1{font-family:Bebas Neue,Poppins,sans-serif;font-size:calc(var(--main-size) * .7);font-weight:800;letter-spacing:-.02em;text-transform:uppercase;position:relative;display:inline-block;padding:.2em .5em;margin-bottom:2rem;white-space:nowrap;color:transparent;background-image:linear-gradient(90deg,var(--accent1),var(--accent2));background-clip:text;-webkit-background-clip:text;text-shadow:0 2px 2px rgba(0,0,0,.15),0 6px 10px rgba(0,0,0,.2),0 10px 20px rgba(0,0,0,.15),0 0 10px var(--glow-color);transform:perspective(800px) rotateX(4deg);transition:all .35s cubic-bezier(.25,.8,.25,1)}h1:before{content:attr(data-text);position:absolute;inset:0;color:var(--text-color);filter:blur(4px);z-index:-1;opacity:.3;transform:translateY(3%)}h1:after{content:"";position:absolute;top:0;left:-40%;width:60%;height:100%;background:linear-gradient(90deg,#fff0,#fffc,#fff0);transform:skew(-20deg);mix-blend-mode:overlay;animation:shine 3s linear infinite;overflow:hidden;clip-path:inset(0 0 0 0 round 8px)}@keyframes shine{0%{left:-60%}50%{left:48%}to{left:48%}}h1:hover{transform:perspective(900px) rotateX(0) scale(1.05);text-shadow:0 3px 6px rgba(0,0,0,.2),0 0 25px rgba(0,71,255,.4),0 0 50px rgba(138,43,226,.3)}@media (max-width: 768px){h1{font-size:clamp(2.5rem,10vw,5rem);padding:.2em .3em}}.Intro-nav{border-bottom:2px solid var(--accent1);padding-bottom:10px;margin-bottom:30px;width:100%;max-width:900px;position:relative;margin-left:auto;margin-right:auto;display:flex;justify-content:center;align-items:center}.hamburger-button{display:none;flex-direction:column;justify-content:space-around;width:30px;height:25px;background:transparent;border:none;cursor:pointer;padding:0;z-index:10;position:absolute;right:10px;top:-5px}.hamburger-line{width:30px;height:3px;background-color:var(--accent1);border-radius:10px;transition:all .3s ease;transform-origin:center}.hamburger-line.open:nth-child(1){transform:translateY(8px) rotate(45deg)}.hamburger-line.open:nth-child(2){opacity:0}.hamburger-line.open:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.Intro-ul{display:flex;justify-content:center;gap:35px;flex-wrap:wrap;padding:0;margin:0;transition:all .3s ease}@media (max-width: 768px){.hamburger-button{display:flex}.Intro-nav{padding-top:40px}.Intro-ul{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg-light);max-height:0;overflow:hidden;opacity:0;gap:0;padding:0;box-shadow:0 4px 6px #0000001a;border-radius:0 0 8px 8px;z-index:9}.Intro-ul.menu-open{max-height:500px;opacity:1;padding:20px 0}.Intro-ul li{width:100%;text-align:center;padding:12px 0;border-bottom:1px solid rgba(0,71,255,.1)}.Intro-ul li:last-child{border-bottom:none}.Intro-ul a:after{display:none}}@media (max-width: 768px) and (prefers-color-scheme: dark){.Intro-ul{box-shadow:0 4px 6px #0000004d}.Intro-ul li{border-bottom:1px solid rgba(77,143,255,.2)}}li{list-style:none}a{display:block;text-decoration:none;color:var(--accent1);font-weight:600;letter-spacing:.05em;position:relative;transition:color .3s,transform .3s}a:after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:linear-gradient(90deg,var(--accent1),var(--accent2));transition:width .3s ease}a:hover{color:var(--accent2);transform:translateY(-2px)}a:hover:after{width:100%}.Intro{background:linear-gradient(145deg,#fff,#eef3ff);padding:2rem 3rem;border-radius:16px;box-shadow:0 10px 25px #00000026,inset 0 0 25px #0047ff0d;text-align:left;max-width:900px;margin:0 auto;line-height:1.8;transition:transform .3s ease,box-shadow .3s ease}@media (prefers-color-scheme: dark){.Intro{background:linear-gradient(145deg,#1e1e1e,#2a2a3d);box-shadow:0 10px 25px #0000004d,inset 0 0 25px #4d8fff1a}}.Intro:hover{transform:translateY(-5px);box-shadow:0 15px 35px #0003,0 0 20px var(--glow-color)}.Intro h2,.Intro h3{color:var(--accent1);margin-top:1.5rem;margin-bottom:.5rem;text-shadow:0 0 8px rgba(0,71,255,.2)}.Intro ol{margin-left:1.5rem}@media (prefers-reduced-motion: reduce){h1:after{animation:none}*{transition:none!important;transform:none!important}}button.glow-button{position:relative;display:inline-block;padding:1em 2.8em;font-size:1.2rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:none;border-radius:14px;cursor:pointer;overflow:hidden;display:block;margin:0 auto;color:#fff;background:linear-gradient(135deg,var(--accent1),var(--accent2));box-shadow:0 0 20px #0047ff80,0 0 40px #8a2be266,0 0 80px #0047ff4d;text-shadow:0 0 10px rgba(255,255,255,.7);transition:all .25s ease;animation:pulseGlow 3s infinite alternate}button.glow-button:before{content:"";position:absolute;top:-40%;left:-40%;width:180%;height:180%;background:radial-gradient(circle at 50% 50%,rgba(0,71,255,.4),transparent 60%);opacity:.4;filter:blur(30px);z-index:0;animation:auraMove 6s linear infinite}button.glow-button:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.7),transparent);transform:skew(-25deg);z-index:1;animation:shineMove 3s ease-in-out infinite}button.glow-button span{position:relative;z-index:2}button.glow-button:hover{transform:scale(1.08) translateY(-5px);box-shadow:0 0 30px #0047ffcc,0 0 60px #8a2be299,0 0 120px #0047ff66;animation:pulseGlow 1.5s infinite alternate}button.glow-button:active{transform:scale(.95);box-shadow:0 0 10px #0047ff80,0 0 30px #8a2be24d}button.glow-button:disabled{opacity:.4;cursor:not-allowed;animation:none;box-shadow:none}@keyframes shineMove{0%{left:-120%}50%{left:120%}to{left:120%}}@keyframes auraMove{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulseGlow{0%{filter:brightness(1)}to{filter:brightness(1.4)}}:root{--logo-blue: #005eff;--logo-cyan: #00c6ff;--logo-size: clamp(2rem, 5vw, 3.5rem)}p.logo{font-family:Bebas Neue,Poppins,sans-serif;font-weight:800;font-size:var(--logo-size);letter-spacing:.02em;text-align:center;display:inline-block;position:relative;padding:.3em .6em;background:linear-gradient(90deg,var(--logo-blue),var(--logo-cyan));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 1px 2px rgba(0,0,0,.1),0 3px 8px rgba(0,94,255,.15);transition:all .3s ease}p.logo:hover{transform:scale(1.02);text-shadow:0 1px 3px rgba(0,0,0,.15),0 4px 12px rgba(0,150,255,.25)}p.logo:after{content:"";position:absolute;left:15%;right:15%;bottom:-6%;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--logo-blue),var(--logo-cyan));opacity:.7}#root{max-width:1400px;margin:0 auto;padding:1rem}.app-container{padding:20px;font-family:Arial,sans-serif}.app-title{text-align:center;margin-bottom:30px}.user-id-card{padding:15px;background-color:#f5f5f5;border-radius:8px;max-width:400px;margin:0 auto 30px}@media (prefers-color-scheme: dark){.user-id-card{background-color:#2a2a2a}}.user-id-input{width:100%;padding:10px;font-size:16px;border-radius:4px;border:1px solid #ccc;box-sizing:border-box}@media (prefers-color-scheme: dark){.user-id-input{background-color:#1a1a1a;color:#e4e4e7;border-color:#444}}.user-id-display{margin-bottom:0;margin-top:10px;font-size:14px;color:#666}@media (prefers-color-scheme: dark){.user-id-display{color:#aaa}}.rescue-alert-card{max-width:400px;margin:0 auto 30px;padding:15px;background-color:#ffebee;border-radius:8px;border:2px solid #d32f2f;text-align:center}@media (prefers-color-scheme: dark){.rescue-alert-card{background-color:#3d1a1a;border-color:#f44336}}.rescue-complete-button{padding:12px 24px;font-size:16px;font-weight:700;color:#fff;background-color:#2e7d32;border:none;border-radius:6px;cursor:pointer;transition:background-color .3s}.rescue-complete-button:hover{background-color:#1b5e20}.nav-button{display:block;margin:30px auto 20px;padding:12px 24px;font-size:16px;font-weight:700;color:#fff;background-color:#0047ff;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s}.nav-button:hover{background-color:#0037cc}.pose-detector-container{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}.video-section{flex:1;min-width:400px}.info-section{flex:0 0 300px;min-width:280px}.status-card{background-color:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a}@media (prefers-color-scheme: dark){.status-card{background-color:#2a2a2a;box-shadow:0 2px 4px #0000004d}}.alert-card{background-color:#fff3e0;padding:15px;border-radius:8px;border:1px solid #ffb74d;margin-bottom:20px}@media (prefers-color-scheme: dark){.alert-card{background-color:#3d2a1a;border-color:#d4860e}}.info-card{background-color:#e3f2fd;padding:15px;border-radius:8px;border:1px solid #2196f3}@media (prefers-color-scheme: dark){.info-card{background-color:#1a2a3d;border-color:#4d8fff}}.status-normal{color:#2e7d32}.status-warning{color:#f57c00}.status-alert{color:#d32f2f}@media (max-width: 768px){.pose-detector-container{flex-direction:column}.info-section{flex:1;min-width:100%}.video-section{min-width:100%}.app-container{padding:10px}.user-id-card,.rescue-alert-card{max-width:100%;margin:0 0 20px}}@media (max-width: 480px){.app-title{font-size:1.5rem}.status-card h3,.alert-card h3,.info-card h3,.user-id-card h3{font-size:1.1rem}.video-section h2,.info-section h2{font-size:1.3rem}}
