#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}body{background:#eafaf1;color:#213547;font-family:Segoe UI,Hiragino Sans,Meiryo,sans-serif;font-size:17px;letter-spacing:.01em;min-height:100vh;margin:0;padding:0}.app-container{background:none;color:#213547;min-height:100vh;padding:2em 0;display:flex;flex-direction:column;align-items:center}.card{background:#f6fff9;border-radius:16px;box-shadow:0 4px 24px #7be59526;padding:2em;margin-bottom:2em;width:100%;max-width:480px;transition:box-shadow .2s}.card:hover{box-shadow:0 12px 40px #7be59540,0 2px #b8f5c5 inset}h1,h2{margin-top:0;margin-bottom:1.2em;font-weight:700;color:#329d6d;text-shadow:0 2px 8px #eafaf1;letter-spacing:.08em}input,textarea{width:100%;max-width:100%;box-sizing:border-box;padding:.7em;border:1px solid #b8f5c5;border-radius:8px;font-size:16px;background:#eafaf1;color:#213547;box-shadow:0 1px 4px #b8f5c5 inset;transition:background .2s,box-shadow .2s}input:focus,textarea:focus{outline:2px solid #6dd5ed;background:#fff}form>div{display:flex;flex-direction:column;align-items:center;margin-bottom:1.2em}label{width:100%;text-align:center;margin-bottom:.3em;font-weight:500;color:#329d6d}button{background:linear-gradient(90deg,#6dd5ed,#b8f5c5);color:#213547;border:none;border-radius:8px;padding:.6em 1.2em;font-size:1em;font-weight:700;cursor:pointer;transition:background .2s}button:hover{background:linear-gradient(90deg,#b8f5c5,#6dd5ed);color:#329d6d}[style*="color: red"]{color:#ff6b6b!important;font-weight:700;margin-bottom:1em}ul{padding-left:1.2em;margin:0}li{background:#eafaf1;border-radius:8px;margin-bottom:.7em;padding:.7em;list-style:none;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 1px 4px #b8f5c5 inset;transition:background .2s}li:hover{background:#f6fff9}::-webkit-scrollbar{width:8px;background:#b8f5c5}::-webkit-scrollbar-thumb{background:#6dd5ed;border-radius:4px}@media (max-width: 600px){.card{padding:1em;max-width:98vw}body{font-size:15px}}