/* writewithquilt.com/signin: one card, one question at a time. */
.si{display:flex;flex-direction:column;align-items:center;padding-top:clamp(40px,9vh,110px);padding-bottom:90px}
.si-card{position:relative;width:min(620px,100%);padding:46px 48px 40px;border-radius:26px;background:var(--lift);box-shadow:var(--ring),var(--lift-shadow)}
.si-pip{position:absolute;right:-22px;top:-38px;transform:rotate(8deg);pointer-events:none}
.si-card h1{font-size:clamp(40px,5.4vw,60px);margin:0 0 16px}
.si-card .lede{font-size:19px;margin:0 0 30px;max-width:30em}
.si-label{display:block;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink2);margin:0 0 8px}
.si-row{display:flex;gap:10px}
.si-row input{flex:1;min-width:0;height:48px;padding:0 16px;border-radius:14px;border:0;background:var(--paper);box-shadow:inset 0 0 0 1.3px var(--line2);font:17px/1 var(--sans);color:var(--ink);outline:none;transition:box-shadow .2s}
.si-row input:focus{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--pink) 70%,transparent)}
.si-row .btn{height:48px;padding:0 22px}
.si-row .btn[disabled]{opacity:.55;cursor:default;transform:none}
.si-code{display:flex;gap:10px;margin:0 0 8px}
.si-code input{width:58px;height:72px;border:0;border-radius:15px;text-align:center;font:500 36px/1 var(--serif);caret-color:var(--k);color:color-mix(in oklab,var(--k) 60%,var(--ink));background:color-mix(in oklab,var(--k) 9%,var(--paper));box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--k) 38%,transparent);outline:none;transition:box-shadow .2s,transform .15s}
.si-code input:focus{box-shadow:inset 0 0 0 2px var(--k);transform:translateY(-1px)}
.si-code input:nth-child(1){--k:var(--pink)}.si-code input:nth-child(2){--k:var(--blue)}.si-code input:nth-child(3){--k:var(--yellow)}
.si-code input:nth-child(4){--k:var(--green)}.si-code input:nth-child(5){--k:var(--purple)}.si-code input:nth-child(6){--k:var(--orange)}
.si-code.busy input{opacity:.6}
.si-err{font-family:var(--sans);font-size:14px;color:var(--hot,#d63a28);margin:12px 0 0}
.si-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 0 0;color:var(--ink3)}
.si-meta .textlink{background:none;border:0;padding:0;cursor:pointer;font-size:14px}
.si-why{list-style:none;padding:0;margin:34px 0 0;width:min(620px,100%);display:grid;gap:12px}
.si-why li{display:flex;gap:12px;align-items:baseline;font-size:17px;line-height:1.45;color:var(--ink2)}
.si-why b{color:var(--ink);font-weight:600}
.si-why .k{flex:none;transform:translateY(2px)}
.si-guest{margin:30px 0 0;font-family:var(--sans);font-size:14px;color:var(--ink3)}
.si-guest .textlink{font-size:14px}
@media (max-width:600px){.si-card{padding:34px 22px 28px;border-radius:22px}.si-pip{right:-6px;top:-34px}.si-row{flex-direction:column}.si-code{gap:7px}.si-code input{width:calc((100% - 35px)/6);height:60px;font-size:30px}}