input,select,textarea{font:inherit}
input,select,textarea{-webkit-tap-highlight-color:var(--clear)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.account-layout{display:grid;grid-template-columns:1fr 1fr;max-width:1320px;margin:0 auto;min-height:calc(100vh - 230px);padding:60px 6%;gap:9%}
.account-art{position:relative;display:flex;flex-direction:column;justify-content:center}
.account-art h2{font-size:62px;margin:22px 0}
.account-art>p{color:var(--muted)}
.account-art .art-window{margin-top:30px;border:1px solid var(--line);overflow:hidden;border-radius:2px}
.art-window img{width:100%;aspect-ratio:16/9;object-fit:cover}
.account-card{align-self:center;background:var(--panel);border:1px solid var(--line);padding:32px;box-shadow:0 25px 70px var(--ground)}
.account-card h1{font-size:34px;letter-spacing:-1px;margin:16px 0;line-height:1.15}
.account-card .intro{font-size:14px;color:var(--muted);margin-bottom:23px}
.account-card .steps{font-size:10px;letter-spacing:1.5px;color:var(--ink)}
label{display:block;font-size:12px;font-weight:700;margin-top:15px}
input,textarea,select{background:var(--ground);color:var(--ink);border:1px solid var(--ground);border-radius:2px;width:100%;min-height:48px;padding:12px;margin-top:7px}
input::placeholder,textarea::placeholder{color:var(--muted)}
input[aria-invalid=true]{border-color:var(--ground)}
.hint{font-size:11px;color:var(--muted);margin-top:5px}
.field-error{color:var(--ground);font-size:12px;min-height:0}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.form-actions .button{flex:1}
.account-card .form-foot{font-size:12px;color:var(--muted);margin-top:20px}
.form-foot a{color:var(--ink);text-decoration:underline}
.message{margin-top:15px;padding:12px;border-left:2px solid var(--ink);background:var(--ground);font-size:13px}
.message:empty{display:none}
.message.error{border-color:var(--orange);color:var(--ground)}
.demo-panel{margin-top:25px;padding-top:17px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.demo-panel summary{cursor:pointer;min-height:30px}
.demo-panel p{margin:10px 0}
.demo-panel select{font-size:12px}
.demo-panel button{font-size:12px;min-height:40px;padding:8px 12px;background:var(--ground);color:var(--ink);border:1px solid var(--ground);margin-top:10px}
.demo-banner{color:var(--ink);font-size:10px;letter-spacing:1px;margin-top:18px}
.status-icon{width:54px;height:54px;border:1px solid var(--ink);display:grid;place-items:center;font-size:25px;margin:20px 0;color:var(--ink);border-radius:50%}
@media(max-width:1000px){
.account-layout{gap:5%;padding:50px 4%}
.account-art h2{font-size:45px}
.account-card{padding:25px}
}
@media(max-width:700px){
.account-layout{display:block;padding:30px 5%}
.account-art{display:none}
.account-card{max-width:500px;margin:auto;padding:26px 23px}
.account-card h1{font-size:32px}
}
.age-check{display:flex;align-items:center;gap:10px;cursor:pointer}
.age-check input{width:16px;height:16px;min-height:0;margin:0;padding:0;flex-shrink:0;accent-color:var(--orange)}

.account-layout{background-color:var(--paper);background-image:linear-gradient(90deg,var(--clear) 0 2%,var(--paper) 2% 98%,var(--clear) 98%),radial-gradient(circle,var(--dot) 1px,var(--clear) 1px);background-size:100% 100%,8px 8px}
.account-card{border:3px solid var(--edge);box-shadow:7px 7px 0 var(--edge);border-radius:0;min-width:0}.account-art .art-window{border:3px solid var(--edge);border-radius:0;box-shadow:5px 5px 0 var(--edge)}
input,textarea,select{background:var(--paper);color:var(--ink);border:2px solid var(--edge);border-radius:0}input::placeholder,textarea::placeholder{color:var(--muted)}
input[aria-invalid=true]{border:3px dashed var(--edge)}.field-error,.message.error{color:var(--ink)}.field-error:not(:empty){font-weight:750;text-decoration:underline}
.message{background:var(--ground);border:2px solid var(--edge)}.message.error{border:3px dashed var(--edge)}
.demo-panel{border-top:3px solid var(--edge)}.demo-panel button{background:var(--paper);border:2px solid var(--edge);color:var(--ink)}
.status-icon{border:3px solid var(--edge);border-radius:0}.age-check input{accent-color:var(--ink);width:20px;height:20px}.age-check{min-height:44px}
@media(max-width:700px){.account-card{padding:24px 20px}.account-layout{padding:30px 6% 45px}.account-card h1{font-size:30px}}

.art-window img{height:auto}