*,*:before,*:after{box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;margin:0;padding:1rem;background:#f5f5f5;color:#1a1a1a;line-height:1.6}#app{max-width:600px;margin:0 auto}#input-section,#preview-section,#auth-section,#progress-section,#result-section,#error-section{background:#fff;border-radius:8px;padding:1.5rem;margin-bottom:1rem;border:1px solid #e0e0e0}h1,h2{margin-top:0;margin-bottom:1rem;color:#1a1a1a}h2{font-size:1.25rem;border-bottom:2px solid #0085ff;padding-bottom:.5rem}p{margin:.5rem 0}input[type=url],input[type=text]{width:100%;padding:.75rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;margin-bottom:1rem}input[type=url]:focus,input[type=text]:focus{outline:none;border-color:#0085ff;box-shadow:0 0 0 3px #0085ff1a}button{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;background:#0085ff;color:#fff;font-weight:500;transition:background-color .2s ease}button:hover:not(:disabled){background:#0070d6}button:active:not(:disabled){background:#005db8}button:disabled{background:#999;cursor:not-allowed;opacity:.7}progress{width:100%;height:1.5rem;border-radius:4px;border:none;background:#e0e0e0;overflow:hidden}progress::-webkit-progress-bar{background:#e0e0e0}progress::-webkit-progress-value{background:#0085ff}progress::-moz-progress-bar{background:#0085ff}.error{color:#c00;font-weight:500}.success{color:#080;font-weight:500}a{color:#0085ff;text-decoration:none}a:hover{text-decoration:underline}label{display:block;font-weight:500;margin-bottom:.5rem}.auth-form{display:flex;flex-direction:column}.auth-error{margin-top:1rem}.auth-error p{color:#c00;font-weight:500}.auth-logged-in{display:flex;flex-direction:column;gap:1rem}.create-form{margin-top:2rem;padding:1rem;border-top:1px solid #ccc}.create-form label{margin-bottom:.5rem}.create-form input{margin-bottom:1rem}.progress-container{display:flex;flex-direction:column;gap:1rem}.progress-container progress{width:100%;height:2rem}.result-container{display:flex;flex-direction:column;gap:.5rem}.result-container details{margin-top:1rem}.result-container details ul{margin-top:.5rem}.error-container{display:flex;flex-direction:column;gap:1rem}.error-container p{color:#c00;font-weight:500}.error-container button{padding:.5rem 1rem}ul,ol{margin:.5rem 0;padding-left:1.5rem}li{margin:.25rem 0}@media(max-width:640px){body{padding:.5rem}#app>*{border-radius:4px;padding:1rem}button{width:100%;margin-bottom:.5rem}input[type=url],input[type=text]{font-size:16px}}