:root{--blue:#2F6FE4;--blue-700:#2459BF;--ink:#0A0F1A;--text3:#8A93A3;--line:#E9EDF4;--surface:#F6F8FB;--field:#F1F3F6;--red:#D93838}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:"Outfit","Helvetica Neue",Arial,sans-serif;color:var(--ink);background:radial-gradient(ellipse at top,#E8EEF9,transparent 60%) #FBFBFC}
.lg{min-height:100vh;display:grid;place-items:center;align-content:center;padding:24px 16px}
.lg-card{width:100%;max-width:760px;display:flex;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 60px rgba(15,25,45,.08);overflow:hidden}
.lg-side{width:260px;flex:none;background:var(--surface);border-right:1px solid var(--line);padding:28px;display:flex;flex-direction:column}
.lg-brand{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ink);text-decoration:none}
.lg-brand span{display:block;margin-top:6px;font-size:12px;font-weight:400;letter-spacing:0;color:var(--text3)}
.lg-caps{display:block;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.lg-side .lg-caps{margin:36px 0 10px}
.lg-projects{display:flex;flex-direction:column;gap:6px;margin:0 -8px}
.lg-project{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;border-radius:14px;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background .15s}
.lg-project::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px}
.lg-project:hover{background:rgba(255,255,255,.7)}
.lg-project[aria-current]{background:#fff;box-shadow:0 2px 10px rgba(15,25,45,.06)}
.lg-project[aria-current]::before{background:var(--blue)}
.lg-mark{width:36px;height:36px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:10px}
.lg-mark img{width:24px;height:24px;object-fit:contain}
.lg-project b{display:block;font-size:16px;font-weight:600;line-height:1.2}
.lg-project small{display:block;margin-top:2px;font-size:12px;color:var(--text3)}
.lg-note{margin:auto 0 0;padding-top:32px;font-size:12px;line-height:1.5;color:var(--text3)}
.lg-form{flex:1;min-width:0;padding:40px}
.lg-form h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.lg-form h1 span{color:var(--blue)}
.lg-sub{margin:4px 0 28px;font-size:13.5px;color:var(--text3)}
.lg-form .lg-caps{margin:16px 0 8px}
.lg-form input{width:100%;height:46px;padding:0 16px;border:1px solid transparent;border-radius:12px;background:var(--field);font:inherit;font-size:15px;color:var(--ink);outline:none;transition:border-color .15s,background .15s}
.lg-form input:focus{border-color:var(--blue);background:#fff}
.lg-error{margin-top:12px;font-size:13px;color:var(--red)}
.lg-submit{width:100%;height:50px;margin-top:22px;border:0;border-radius:14px;background:var(--blue);color:#fff;font:inherit;font-size:16px;font-weight:500;cursor:pointer;transition:background .15s}
.lg-submit:hover{background:var(--blue-700)}
.lg-copy{margin-top:20px;text-align:center;font-size:12px;color:var(--text3)}
@media(max-width:640px){
  .lg-card{flex-direction:column}
  .lg-side{width:auto;border-right:0;border-bottom:1px solid var(--line);padding:24px}
  .lg-side .lg-caps{margin-top:24px}
  .lg-projects{flex-direction:row;overflow-x:auto}
  .lg-project{min-width:200px}
  .lg-note{display:none}
  .lg-form{padding:24px}
}