@keyframes pulse{0%,to{background-position:0 0}50%{background-position:50dvw 0}}.control-nav{color:var(--color-foreground);box-sizing:border-box;justify-content:space-between;gap:var(--unit-base);width:100%;padding:var(--padding-m);border-top:var(--border-unit) solid var(--color-border);background-color:var(--color-neutral-light);flex-wrap:wrap;display:flex;position:relative;container-type:inline-size}.control-nav.loading{background:linear-gradient(to right, var(--color-primary) 0%, var(--color-background) 50%, var(--color-primary) 100%);animation:pulse 3s var(--anim-base) infinite}.control-nav hr{top:calc(var(--border-unit) * 2 - var(--padding-m));width:100%;height:calc(var(--border-unit) * 3);background-color:var(--color-action);transition:width var(--anim-base) var(--anim-timing);border:0;position:absolute;left:0}.control-nav>button:first-of-type{order:3}.control-nav>button:first-of-type+*{order:1}.control-nav div{grid-template-columns:calc(var(--unit-base) * 4) 1fr calc(var(--unit-base) * 4);justify-content:center;align-items:center;gap:calc(var(--unit-base) * 2);order:2;display:grid}.control-nav div span{text-align:center;flex-direction:column;display:flex}.control-nav div button.cta.high{display:none}.control-nav div h5,.control-nav div p{margin:0}@container (max-width:76rem){.control-nav{flex-direction:column}.control-nav div{order:1;width:100%}.control-nav div button.cta.high{display:flex}.control-nav>button.cta{display:none}}
main.admin>button.admin-menu:not(.toggle),main.workshop-edit>button.menu:not(.toggle){top:var(--margin-xs);right:var(--margin-xs);z-index:11;transition:opacity var(--anim-base) var(--anim-timing);width:calc(var(--unit-base) * 4);display:none;position:fixed}aside.workshop{box-sizing:border-box;color:var(--color-foreground);background-color:var(--color-neutral-light);padding:0 var(--padding-m);text-align:center;width:100%;min-height:100lvh;max-width:calc(var(--unit-base) * 20);border-left:var(--border-unit) solid var(--color-border);border-right:var(--border-unit) solid var(--color-border);z-index:10;transition:transform var(--anim-base) var(--anim-timing), opacity var(--anim-base) var(--anim-timing);position:relative}aside.workshop.open{opacity:1;pointer-events:auto;width:100%;max-width:none;height:100dvh;position:fixed;top:0;left:0;overflow-y:auto;transform:translate(0)}aside.workshop.open~section{position:fixed;overflow:hidden}@media (prefers-color-scheme:dark){aside.workshop{--color-background:var(--color-neutral-darker)}}aside.workshop header{padding:var(--padding-m);z-index:9;background-color:var(--color-neutral-light);box-shadow:0 calc(var(--unit-base) * 3) calc(var(--unit-base) * 2) calc(var(--unit-base) * -1) var(--color-neutral-light);position:sticky;top:0}aside.workshop header h4{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;display:-webkit-box;overflow:hidden}aside.workshop header figure{max-width:100%;max-height:calc(var(--unit-base) * 10);position:relative}aside.workshop header .avatar{margin:auto}aside.workshop header .workshopImg{object-fit:cover;height:calc(var(--unit-base) * 8);border-radius:var(--border-radius-xs);border:calc(var(--unit-line) * 2) solid var(--color-base-alt);width:100%;transform:rotate(-4deg)}aside.workshop header .workshopImg~.avatar{z-index:9;right:calc(var(--margin-m) * -1);margin:0;position:absolute;bottom:0}aside.workshop section{width:100%;margin:auto 0;padding:0}aside.workshop article{margin:var(--margin-l) 0;align-items:center;gap:var(--margin-s);flex-direction:column;display:flex}aside.workshop h5{margin-bottom:0}aside.workshop .item,aside.workshop button.item:not(.active){font:inherit;cursor:pointer;border:none}aside.workshop .item{border-radius:var(--border-radius-s);box-sizing:border-box;min-width:0;max-width:calc(var(--unit-base) * 4);width:100%;height:calc(var(--unit-base) * 4);background-color:var(--shade-primary-10);box-shadow:var(--box-shadow-input);cursor:pointer;transition:all var(--anim-base) var(--anim-timing);justify-content:center;align-items:center;gap:0;padding:0;text-decoration:none;display:flex;position:relative}aside.workshop .item p,aside.workshop .item b{transition:color var(--anim-base) var(--anim-timing)}aside.workshop .item p{opacity:0;text-align:left;width:100%;max-width:0;transition:all var(--anim-base) var(--anim-timing)}aside.workshop .item svg{flex-shrink:0}aside.workshop .item .check{background:var(--color-valid);border-radius:var(--border-radius-l);bottom:calc(var(--unit-line) * 2);right:calc(var(--unit-line) * 2);stroke:var(--color-base);color:var(--color-base);transition:all var(--anim-base) var(--anim-timing);position:absolute}aside.workshop .item:hover:not(.completed){background-color:var(--shade-primary);box-shadow:var(--box-shadow-input-hover)}aside.workshop .item:hover:not(.completed) b{color:var(--color-hover)}aside.workshop .item.completed{background-color:var(--shade-valid-25);box-shadow:none}aside.workshop .item.completed:hover{box-shadow:var(--box-shadow-input-hover)}aside.workshop .item.active,aside.workshop .item.active:hover,aside.workshop .item .completed.active,aside.workshop .item .completed.active:hover{background-color:var(--shade-action);box-shadow:var(--box-shadow-input-focus);transition:all var(--anim-base) var(--anim-timing)}aside.workshop .item.active:hover,aside.workshop .item.active.completed:hover{pointer-events:none}aside.workshop:hover .item{max-width:calc(var(--unit-base) * 100);gap:var(--margin-s);padding-left:var(--padding-l);transition:all var(--anim-base) var(--anim-timing)}aside.workshop:hover .item .check{bottom:var(--margin-m);right:var(--margin-s)}aside.workshop:hover .item p{opacity:1;text-overflow:ellipsis;max-width:100%}@media (max-width:44rem){main.admin>button.admin-menu:not(.toggle),main.workshop-edit>button.menu:not(.toggle){display:flex}aside.workshop{width:100%;height:100lvh;padding:0 0 var(--padding-xl);opacity:0;pointer-events:none;transition:transform var(--anim-base) var(--anim-timing), opacity var(--anim-base) var(--anim-timing);position:fixed;top:0;left:0;transform:translate(-100%)}aside.workshop.open{opacity:1;pointer-events:auto;padding-bottom:calc(var(--padding-xxl)*2);transform:translate(0)}aside.workshop header{text-align:left;padding-right:var(--padding-xxl)}aside.workshop header figure{display:none}aside.workshop .item{max-width:calc(var(--unit-base) * 100);gap:var(--margin-s);padding-left:var(--padding-l)}aside.workshop .item .check{bottom:var(--margin-m);right:var(--margin-s)}aside.workshop .item p{opacity:1;text-overflow:ellipsis;max-width:100%}}
