@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";form{grid-row:unset;min-width:960px}#kickoff-form{display:grid;grid-column:1/-1;grid-template-columns:subgrid;grid-template-rows:subgrid}#inspiration{display:grid;grid-template-columns:subgrid;grid-template-areas:"header header"}#inspiration .header{grid-area:header}#inspiration,#overview,.inspiration-item{grid-column:1 / -1}.horizontal{display:flex;flex-direction:row}textarea{min-height:128px;resize:vertical}.connected{display:flex;flex-wrap:nowrap}.connected:not(:first-child,:last-child){border-radius:0}.connected :first-child{border-top-right-radius:0;border-bottom-right-radius:0}.connected :last-child{border-top-left-radius:0;border-bottom-left-radius:0}button{box-sizing:border-box}.fill{flex:1}.dropzone{border:1px dashed var(--text-primary);grid-column:1 / -1;padding:var(--spacing-small);border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:256px;input[type=file]{appearance:none;display:none}.picker-content{grid-column:1 / -1;align-items:center;justify-items:center;justify-self:center;display:inline-flex}}.dropzone[data-drag-over]{background:var(--surface-alt)}[data-icon]:before{content:attr(data-icon);font-family:Material Symbols Outlined;margin-inline-end:3px}[data-icon-before]:before{content:attr(data-icon-before);font-family:Material Symbols Outlined;margin-inline-end:3px}[data-icon-after]:after{content:attr(data-icon-after);font-family:Material Symbols Outlined;margin-inline-start:3px}[data-loading=true]:before{content:"\e9d0";font-family:Material Symbols Outlined;animation:rotate 1s infinite linear}[data-label]{position:relative;overflow:visible;&:before{content:attr(data-label);font-size:x-small;position:absolute;top:0;left:2em;transform:translateY(-75%);background:#00000040;border-radius:4px;padding:3px}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#overview{display:grid;grid-area:main;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-template-areas:"l dials runs r" "l dials runs r";#runs{display:flex;grid-area:runs;grid-gap:var(--spacing-small);flex-direction:column}}.card{border:1px solid var(--surface-alt);border-radius:12px;min-width:var(--element-medium);min-height:var(--element-small);box-sizing:border-box;padding:var(--spacing-large);box-shadow:0 0 8px #00000026;h1{margin:0;font-size:medium}code.project-nr{font-size:small;color:var(--text-alt)}.capsule{float:right}}.skeleton{animation:skeleton 5s linear infinite;background-size:200% 100%;background-position:50% 50%;background-repeat:no-repeat;background-image:linear-gradient(-75deg,transparent 35%,rgba(255 255 255 / 15%) 50%,transparent 65%)}@keyframes skeleton{0%{background-position:600% 0%}to{background-position:-600% 0%}}#wireframe-editor,#wireframe-picker{grid-area:main}#wireframe-editor{display:grid;grid-template-rows:subgrid;grid-template-columns:subgrid;grid-template-areas:"toolbar preview preview preview" "toolbar preview preview preview" "toolbar preview preview preview"}#wireframe-picker{grid-row-start:2;grid-column:2 / -2}#editor-toolbar{grid-area:toolbar;display:flex;grid-template-columns:subgrid;grid-row:1 / -1;gap:var(--spacing-small);flex-direction:column;button[aria-pressed=true]{box-shadow:0 0 4px #00000026;background:var(--blue);color:var(--surface)}}#editor-preview{grid-area:preview;width:100%;height:100%;overflow:auto;background:#fff;border-radius:8px;border:1px solid #555;box-shadow:0 0 12px #0003}@media(max-width:600px){#editor-toolbar button{visibility:hidden}#editor-toolbar button:before,#editor-toolbar button:after{visibility:visible}}.search-box{display:flex;grid-column:1 / -1;grid-row:span 1;input[type=search],input[type=url]{text-align:left;padding:4px 6px;flex:1}}#text-editor-toolbar{display:inline-flex;position:fixed;background:var(--surface-alt);color:var(--text-alt);border-radius:12px;overflow:hidden;top:0;left:0;button,input{border:none;border-radius:12px;font-size:smaller;padding:6px 9px}}#image-picker form input[type=file]{grid-column:1 / -1}#image-picker form .dropzone{display:grid;grid-template-columns:subgrid;grid-row:span 1;align-items:center;justify-items:center;img{border-radius:var(--radius-medium);grid-column:1 / -1;max-width:650px;max-height:650px}}#colour-palette-editor{max-width:256px}#colour-list{display:flex;flex-wrap:wrap;gap:4px}.colour-preview,.drop-colour,input[type=color]{width:32px;height:32px;border-radius:5px;border:none;display:inline-block}#colour-role-list{margin-block-start:var(--dim-medium);display:grid;grid-template-columns:auto auto 1fr;grid-auto-rows:1fr;align-items:center;position:relative;grid-gap:var(--dim-small);.unlink-colour-btn{grid-column:1}input{grid-column:2;appearance:none;border:none;padding:0;margin:0;box-shadow:none}code{grid-column:3;text-align:left}}dialog{max-width:750px;max-height:750px}dialog form{min-width:unset;.dialog-header{grid-column:1 / -1}.buttons{position:sticky;bottom:0}}#element-editor #el-editor-content,#semantic-colour-editor form{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto max(256px,1fr) auto;.breadcrumbs{margin-block:var(--spacing-small);overflow-x:scroll;grid-row:2;grid-column:1 / -1;*{white-space:nowrap;word-break:keep-all}}.breadcrumbs+div{border-radius:6px;overflow:hidden;grid-row:span 1;grid-column:1 / -1;min-height:256px;.cm-editor{height:100%}}.cm-editor,.cm-theme{max-width:100%;max-height:100%;overflow:auto}}#semantic-colour-editor form{grid-template-columns:auto auto 1fr}#semantic-colour-editor .semantic-colour-property{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-column:1 / -1;grid-row:span 1;align-items:center;align-content:center;span{grid-column:1}svg{grid-column:2;max-width:24px;max-height:24px;width:100%}.combobox{grid-column:3;width:100%}}dialog:has(#preview-button){transition:opacity .5s}dialog:has(#preview-button:hover){opacity:10%;transition-delay:.25s}#kickoff{display:grid;grid-area:main;grid-template-columns:subgrid;grid-template-rows:subgrid;#overview,.overview{grid-column:2 / -2;grid-row:1 / span 1;display:block}.dropzone{grid-row:2 / span 1;grid-column:1 / -1;padding:8px}form{grid-row-start:3;grid-column:2 / -2}}:root{--green: #44d47d;--green-translucent: #44d47d75;--yellow: #f4df90;--yellow-translucent: #f4df9075;--red: #c65e73;--red-translucent: #c65e7375;--blue: #6c95c4;--blue-translucent: #6c95c475;--orange: #b88e72;--orange-translucent: #b88e7275;--white: #ffffff;--white-translucent: #ffffff75;--gray: #6c6c6c;--gray-translucent: #6c6c6c75;--black: #222;--black-translucent: #22275;--font-family: "Manrope", sans-serif;--font-family-mono: "Inconsolata", monospace;--font-family-icons: "Material Symbols Rounded";--spacing-small: 6px;--spacing-large: 16px;--element-small: 256px;--element-medium: 650px;--element-large: 960px}@media(prefers-color-scheme:dark){:root{--text-primary: var(--white);--text-alt: #cac8c8;--background: var(--black);--surface: #252525;--surface-alt: rgb(55 53 53 / .63) }}@media(prefers-color-scheme:light){:root{--text-primary: var(--black);--text-alt: #343739;--background: var(--white);--surface: #b0b3b4;--surface-alt: rgb(223 224 228 / .63)}}input.switch{appearance:none;position:relative;padding:var(--dim-small);width:var(--dim-large);height:var(--dim-small);box-shadow:none;background:var(--surface-alt);display:flex;align-items:center}input.switch:checked{background:#456345}input.switch:before{content:"";position:absolute;left:0;box-shadow:0 0 0 var(--dim-medium) var(--surface);display:inline-block;width:1px;height:1px;background:var(--surface);border-radius:var(--dim-large)}input.switch:checked:before{left:unset;right:0}dialog{border:1px solid var(--surface);background:var(--background);position:relative;color:var(--text-primary);padding:var(--spacing-large);border-radius:18px;min-width:480px;.dialog-header{font-size:medium;margin-block-end:2em;h1,h2,h3,h4,h5,h6{font-size:inherit;margin:0;font-weight:400}p{font-size:small;color:var(--text-alt)}}.close-btn{position:absolute;top:12px;right:12px}.buttons{grid-row:span 1;grid-column:1 / -1;gap:var(--spacing-small);display:flex;align-items:center;justify-content:flex-end}}.notification{position:relative;top:12px;inset:unset;padding:8px 12px;width:max-content;min-width:256px;border:1px solid var(--surface-alt);border-radius:var(--dim-medium);backdrop-filter:brightness(25%) blur(8px);background:transparent;color:var(--text-secondary);font-size:small;button{float:right;background:transparent}}.notification[style=error]{border-color:#a00}.notification[style=warning]{border-color:#ffb600}.notification[style=info]{border-color:#008dff}button,.button,input,select,.select,textarea{appearance:none;font:normal 12pt var(--font-family);display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden;color:var(--text-alt);background:none;border-radius:12px;margin:0;padding:var(--spacing-small) calc(1.5 * var(--spacing-small));border:2px solid var(--surface-alt)}button,input[type=button],input[type=submit]{text-align:center}.centre-min{align-items:center}.select{position:relative;overflow:visible}.select .expand{display:none;position:absolute;top:100%;left:0}.select:focus{border-bottom-left-radius:0;box-sizing:border-box}.select:focus .expand{display:flex;flex-direction:column;align-items:stretch;background:var(--surface-alt);border-radius:0 6px 6px;padding:var(--spacing-small);box-shadow:0 0 12px #0000007f;button{font-size:smaller;padding:var(--spacing-small);border-radius:var(12px)}}button:hover,.button:hover,input:hover,.select:hover,.select:focus{background:var(--surface-alt)}input:focus,button:focus,.button:focus,select:focus,.select:focus,textarea:focus{border-color:var(--blue);outline:none}button.symbolic,input.symbolic{aspect-ratio:1/1;font-size:1em;padding:.5em;line-height:1em;width:2em;height:2em}.button.tertiary,button.tertiary,input.tertiary{border:none}input[type=file]{box-shadow:none;display:flex;align-items:center;justify-content:center;appearance:none}.combined-tool{display:inline-flex;flex-direction:row;align-items:center;border-radius:12px;background:var(--surface-alt);color:inherit;*:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}*:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}*{background:transparent;backdrop-filter:none;color:inherit;border:none}}form{display:grid;grid-template-columns:auto auto;grid-auto-rows:auto;gap:var(--spacing-small)}[title]{display:inline-flex;align-items:center;gap:2px}hr{border:none;border-bottom:1px solid var(--surface-alt);width:80%}.capsule{font-size:x-small;border-radius:2em;padding:2px 4px;box-sizing:border-box;border:1px solid var(--surface-alt);color:var(--text-alt)}.capsule.green,.colour-green{border-color:var(--green);color:var(--green)}.capsule.yellow,.colour-yellow{border-color:var(--yellow);color:var(--yellow)}.capsule.orange,.colour-orange{border-color:var(--orange);color:var(--orange)}.capsule.blue,.colour-blue{border-color:var(--blue);color:var(--blue)}.capsule.red,.colour-red{border-color:var(--red);color:var(--red)}:is(button,input[type=button]).primary{background:var(--blue-translucent);border-color:var(--blue);color:var(--text-primary);&:hover{background:var(--blue)}}:is(button,input[type=button]).primary{border-color:var(--blue);color:var(--text-primary);&:hover{background:var(--blue);border-color:var(--blue-translucent)}}:is(button,input[type=button]).tertiary{background:var(--surface-alt);border-color:var(--surface);color:var(--text-alt);&:hover{background:var(--surface)}}.radio-slider{display:inline-flex;flex-wrap:nowrap;align-items:center;width:fit-content;border-radius:12px;background:var(--surface-alt);border:1px solid var(--surface);overflow:hidden;label{flex:1;text-align:center;font-size:small;user-select:none;padding:var(--spacing-small) calc(2 * var(--spacing-small));input{all:unset;appearance:none}cursor:pointer}label:has(input:checked){backdrop-filter:brightness(65%)}label:hover{backdrop-filter:brightness(125%)}label:has(input:checked):hover{backdrop-filter:brightness(85%)}}.radio-slider:focus-within,.radio-slider:has(:focus){outline:1px solid var(--yellow)}a{color:var(--blue)}.breadcrumbs{display:inline-flex;gap:2px;>:not(:last-child):after{color:var(--text-alt);content:"\203a";margin-inline:var(--spacing-small)}}.flex-end{display:inline-flex;justify-content:flex-end}.combobox{display:inline-flex;flex-wrap:nowrap;flex-direction:row;align-items:stretch;--padding: 4px 8px;position:relative;input{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;box-sizing:border-box;padding:var(--padding);font-family:inherit;flex:1}button.symbolic{display:inline-block;box-sizing:border-box;aspect-ratio:unset;height:unset;border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;padding:var(--padding)}.suggestions{position:fixed;position-anchor:--combo;inset:auto;top:anchor(bottom);left:anchor(left);width:anchor-size(width);position-try-fallbacks:flip-block;background:var(--background);color:var(--text-alt);border:1px solid var(--surface-alt);border-radius:8px;>*{padding:4px 2px;border-radius:4px}>*:hover{background:var(--surface-alt)}}}.combobox:focus,.combobox:focus-within{outline:none;anchor-name:--combo;input,button{border-color:var(--blue)}}form{display:grid;grid-template-columns:subgrid;grid-auto-rows:auto;align-items:self-start;h1,h2,h3,h4,h5,h6,article{grid-column:1 / -1;grid-row:span 1}hr{grid-column:1 / -1;grid-row:span 1;border:none;border-bottom:1px dashed var(--surface-alt)}label,span.description{grid-column:1;grid-row:span 1}input,textarea,select,button,.widget{grid-column:2;grid-row:span 2}span.description{font-size:small;color:var(--text-alt);align-self:self-start}.option{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-column:1 / span 2;grid-row:span 2;label{grid-column:1;grid-row:1}span.description{grid-column:1;grid-row:2;align-self:self-start}input,textarea,select,button{grid-column:2;grid-row:span 2}}nav{grid-column:1 / -1;grid-row:span 1;display:flex;justify-content:flex-end;gap:var(--spacing-small)}}:root,body,#root{padding:0;margin:0;box-sizing:border-box;min-height:100vh;font-family:var(--font-family),sans-serif;background:var(--background);color:var(--text-primary)}#root{display:grid;grid-template-columns:auto 1fr 1fr auto;grid-template-rows:max-content auto 1fr auto auto auto;padding:var(--spacing-small);gap:var(--spacing-small);grid-template-areas:"logo   nav    nav    profile" "main   main   main   main" "main   main   main   main" "main   main   main   main" "footer footer footer footer"}header#header{display:grid;grid-row:1;grid-column:1 / -1;grid-template-rows:subgrid;grid-template-columns:subgrid;align-items:center;justify-items:center;align-content:center;justify-content:center;#centre-nav{align-items:center;justify-items:center;align-content:center;justify-content:center;grid-area:nav;nav{display:flex;justify-content:center;align-items:center;gap:var(--spacing-large)}a{padding:var(--spacing-small) calc(1.5 * var(--spacing-small));text-decoration:none;color:var(--text-primary)}}}main#main{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-area:main;padding:var(--spacing-small)}#logo{padding:var(--spacing-large);img{max-height:128px;max-width:210px}}#staff-only{justify-self:center;align-self:center;text-align:center;grid-area:1 / 1 / -1 / -1}#app-links{grid-area:profile;padding:var(--spacing-large);.avatar{--avatar-size: 48px;grid-area:profile;display:grid;grid-template-columns:var(--avatar-size) fit-content;grid-template-rows:1fr repeat(2,min-content) 2fr;grid-gap:0 var(--spacing-small);grid-template-areas:"avatar t_pad" "avatar username" "avatar email" "avatar b_pad";img{grid-area:avatar;overflow:hidden;border-radius:var(--avatar-size);max-width:var(--avatar-size)}}.avatar .name{grid-area:username;font-weight:700}.avatar .email{grid-area:email;color:var(--text-alt);font-size:small}}#notifications{position:fixed;top:0;right:0;display:flex;flex-direction:column;align-items:flex-end;padding:24px}footer#footer{grid-area:footer;display:grid;margin-block-start:96px;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-template-areas:"l disclaimer disclaimer r";div.disclaimer{grid-area:disclaimer;font-size:small;text-align:center;color:var(--text-alt);a{margin:var(--spacing-large)}}}