main .wizard{gap:calc(var(--unit) * 1.5);padding:clamp(var(--unit), 4vw, calc(var(--unit) * 1.5));margin-block:calc(var(--unit) / 2) var(--unit);border-radius:var(--radius-lg);background:var(--tint);border:1px solid color-mix(in oklch, var(--mark) 30%, var(--hairline));grid-template-columns:minmax(0,1fr);align-items:start;display:grid}@media (width>=60rem){main .wizard{gap:calc(var(--unit) * 2);grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr)}main .wizard aside{position:sticky;inset-block-start:calc(var(--unit) * 3)}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) main .wizard{border-color:color-mix(in oklch, var(--mark) 20%, var(--hairline))}}:root[data-theme=dark] main .wizard{border-color:color-mix(in oklch, var(--mark) 20%, var(--hairline))}main .wizard h1{font-size:var(--step-3);margin:0 0 calc(var(--unit) / 2);line-height:1.1}main .wizard .lead{color:var(--text-soft);margin:0 0 var(--unit)}main .steps{gap:calc(var(--unit) / 4);margin:0 0 calc(var(--unit) * 1.5);counter-reset:step;--step:0;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;list-style:none;display:grid;position:relative}main .steps:after{content:"";inline-size:calc((100% - var(--unit) / 2) / 3);background:var(--text);block-size:3px;transform:translateX(calc(var(--step) * (100% + var(--unit) / 4)));transition:transform var(--duration-fast) var(--ease-smooth-out);position:absolute;inset-block-end:0;inset-inline-start:0}main .steps li{counter-increment:step}main .steps button{inline-size:100%;min-inline-size:0;padding:calc(var(--unit) / 3) calc(var(--unit) / 2);color:var(--text-soft);font-weight:400;font-size:var(--step--1);line-height:var(--unit);border-block-end:3px solid var(--hairline);text-align:start;white-space:nowrap;background:0 0;border-radius:0;align-items:center;gap:.5ch;display:flex}main .steps li[data-done] button span:after{content:" ✓";color:var(--done)}main .steps li[data-bad] button span:after{content:" !";color:var(--due);font-weight:600}@media (width<=40rem){main .steps button svg{display:none}main .steps button{padding-inline:calc(var(--unit) / 4)}}main .steps button:hover{background:var(--ground);color:var(--text)}main .steps button svg{flex:none}main .steps button span:before{content:counter(step) ". "}main .steps li[aria-current] button{color:var(--text);font-weight:500}main .steps li[data-done] button{border-block-end-color:var(--done)}main .steps li[data-bad] button{border-block-end-color:var(--due)}main .wizard fieldset{padding:var(--unit);border:1px solid var(--hairline);border-radius:var(--radius);background:var(--card);margin:0}main .wizard fieldset:not([hidden]){animation:step-in var(--duration-fast) var(--ease-smooth-out)}main .wizard form[data-dir=back] fieldset:not([hidden]){animation-name:step-back}@keyframes step-in{0%{opacity:0;transform:translateX(var(--distance-base));filter:blur(var(--blur-medium))}}@keyframes step-back{0%{opacity:0;transform:translateX(calc(var(--distance-base) * -1));filter:blur(var(--blur-medium))}}main .wizard .shake{animation:field-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear}@keyframes field-shake{0%{animation-timing-function:var(--shake-ease);transform:translate(0)}28.57%{transform:translateX(var(--shake-distance));animation-timing-function:var(--shake-ease)}57.14%{transform:translateX(calc(var(--shake-distance) * -1));animation-timing-function:var(--shake-ease)}78.57%{transform:translateX(var(--shake-overshoot));animation-timing-function:var(--shake-ease)}to{transform:translate(0)}}main .wizard legend{align-items:center;gap:calc(var(--unit) / 2);font-family:var(--serif);font-size:var(--step-2);line-height:calc(var(--unit) * 1.5);margin:0 0 var(--unit);float:left;inline-size:100%;padding:0;display:flex}main .wizard legend svg{inline-size:calc(var(--unit) * 1.25);block-size:calc(var(--unit) * 1.25);color:var(--text-soft)}main .wizard label{clear:both;margin-block-end:var(--unit)}main .wizard label>span{margin-block-end:calc(var(--unit) / 4);font-weight:500}main .wizard label small{color:var(--text-soft);margin-inline-start:.5ch;font-weight:400}main .wizard input,main .wizard select{max-inline-size:30ch;padding:calc(var(--unit) / 2) calc(var(--unit) * .75);font-size:var(--step-1);line-height:var(--unit);border-radius:var(--radius)}main .wizard .pair{gap:var(--unit);clear:both;grid-template-columns:minmax(0,1fr) auto;max-inline-size:30ch;display:grid}main .wizard .pair select{min-inline-size:11ch}@media (width<=40rem){main .wizard .pair{grid-template-columns:1fr;gap:0}}main .wizard .pair input,main .wizard .pair select{max-inline-size:none}main .wizard .nav{align-items:center;gap:calc(var(--unit) / 2);margin:calc(var(--unit) * 1.5) 0 0;clear:both;flex-wrap:wrap;display:flex}main .wizard .nav small{color:var(--text-soft);flex-basis:100%}main .wizard button[data-go],main .wizard button[type=submit]{padding:calc(var(--unit) / 2) calc(var(--unit) * 1.25)}main .wizard button.back{color:var(--text);border:1px solid var(--hairline);background:0 0}main .wizard button.back:hover{background:var(--hairline)}main .wizard button[data-bad]:after{content:attr(data-bad);background:var(--due);color:var(--ground);font-size:var(--step--1);border-radius:999px;margin-inline-start:.6ch;padding:0 .5em}main #form-error{margin-block-start:calc(var(--unit) / 2)}main .wizard aside h2{font-size:var(--step-1);line-height:var(--unit);margin:0 0 calc(var(--unit) / 2);border:0;padding:0}main .wizard aside ol{gap:calc(var(--unit) / 2);margin:0 0 calc(var(--unit) / 2);grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));padding:0;list-style:none;display:grid}main .wizard aside li{gap:calc(var(--unit) / 4);padding:calc(var(--unit) * .75);border:1px solid var(--hairline);border-radius:var(--radius);background:var(--card);display:grid}main .wizard aside li[data-fresh]{animation:tile-in var(--duration-slow) var(--ease-in-out) both;animation-delay:calc(var(--i,0) * var(--duration-stagger))}@keyframes tile-in{0%{opacity:0;transform:translateY(var(--distance-medium));filter:blur(var(--blur-medium))}}main .wizard aside li .head{color:var(--text-soft);justify-content:space-between;align-items:start;display:flex}main .wizard aside li svg{inline-size:calc(var(--unit) * 1.25);block-size:calc(var(--unit) * 1.25)}main .wizard aside li time b{font-family:var(--serif);font-weight:400;font-size:var(--step-3);line-height:1;display:block}main .wizard aside li time span{font-size:var(--step--1);color:var(--text-soft)}main .wizard aside li[data-status=due] time b{color:var(--due)}main .wizard aside li>span{font-weight:500;font-size:var(--step--1);-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}main .wizard aside li small{color:var(--text-soft);font-size:var(--step--1)}main #preview-more,main #preview-empty{color:var(--text-soft);margin:0 0 calc(var(--unit) / 2)}main .wizard [aria-invalid=true]{border-color:var(--due)}
