.t-app{display:flex;flex-direction:column;height:100dvh;overflow:hidden}.t-header{align-items:start;display:flex;flex:none;gap:2.5rem;padding:1.5rem 2rem 1rem}.t-header .c-lede{max-width:46rem;min-width:0}.c-customiser{display:grid;flex:1;grid-template-columns:22rem minmax(0,1fr);min-height:0}.c-controls{border-right:1px solid var(--hui-border);display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:0 1.5rem 1.5rem}.t-group{background:var(--hui-card);border:1px solid var(--hui-border);border-radius:var(--hui-radius-lg);color:var(--hui-card-foreground);display:flex;flex-direction:column;gap:.5rem;padding:1rem}.t-group h2,.t-group summary{font-family:var(--hui-font-heading);font-size:var(--hui-text-sm);font-weight:var(--hui-weight-semibold);margin:0}.t-group summary{cursor:pointer}.t-hint{color:var(--hui-muted-foreground);font-size:var(--hui-text-xs);margin:0}.t-label{color:var(--hui-muted-foreground);font-size:var(--hui-text-xs)}.t-value{color:var(--hui-foreground);font-variant-numeric:tabular-nums}.t-swatches{display:flex;flex-wrap:wrap;gap:.375rem}.t-swatches hui-button::part(button){gap:.375rem}.t-colour{background:none;border:1px solid var(--hui-border);border-radius:var(--hui-radius-md);cursor:pointer;height:2rem;padding:.125rem;width:100%}.t-colour::-webkit-color-swatch-wrapper{padding:0}.t-colour::-webkit-color-swatch{border:0;border-radius:calc(var(--hui-radius-md) - 2px)}.t-colour::-moz-color-swatch{border:0;border-radius:calc(var(--hui-radius-md) - 2px)}.t-dot{border:1px solid var(--hui-border);border-radius:9999px;display:inline-block;height:.75rem;width:.75rem}.t-buttons{display:flex;gap:.375rem}.t-row{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.t-output{background:var(--hui-muted);border-radius:var(--hui-radius-md);font-family:var(--hui-font-mono);font-size:var(--hui-text-xs);margin:0;max-height:18rem;overflow:auto;padding:.75rem;white-space:pre}.t-pass{color:var(--hui-primary-text);margin:0}.t-fail{color:var(--hui-destructive);margin:0}.t-misses{color:var(--hui-destructive);font-size:var(--hui-text-xs);margin:.25rem 0 0;padding-left:1rem}.t-tokens{border:1px solid var(--hui-border);border-radius:var(--hui-radius-md);margin:0 0 .5rem;padding:.5rem}.t-tokens legend{color:var(--hui-muted-foreground);font-size:var(--hui-text-xs);padding-inline:.25rem}.t-token{align-items:center;display:grid;gap:.5rem;grid-template-columns:1fr auto;margin-bottom:.375rem}.t-token span{font-family:var(--hui-font-mono);font-size:var(--hui-text-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.t-token hui-input{width:12rem}.c-preview{min-width:0;overflow:auto}.c-preview .c-board,.c-preview .c-col{padding-block-start:0}.c-preview__surface{background:var(--hui-muted);color:var(--hui-foreground);font-family:var(--hui-font-sans);min-height:100%;width:max-content}.dark .c-preview__surface{background:var(--hui-background)}@media(prefers-color-scheme:dark){:root:not(.light) .c-preview__surface{background:var(--hui-background)}}.c-controls,.c-preview{scrollbar-color:transparent transparent;scrollbar-width:thin;transition:scrollbar-color .2s var(--hui-ease)}.c-controls.is-scrolling,.c-preview.is-scrolling{scrollbar-color:color-mix(in oklab,var(--hui-muted-foreground) 45%,transparent) transparent}.c-controls::-webkit-scrollbar,.c-preview::-webkit-scrollbar{height:.5rem;width:.5rem}.c-controls::-webkit-scrollbar-track,.c-preview::-webkit-scrollbar-track,.c-controls::-webkit-scrollbar-corner,.c-preview::-webkit-scrollbar-corner{background:transparent}.c-controls::-webkit-scrollbar-thumb,.c-preview::-webkit-scrollbar-thumb{background:transparent;background-clip:content-box;border:2px solid transparent;border-radius:9999px}.c-controls.is-scrolling::-webkit-scrollbar-thumb,.c-preview.is-scrolling::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--hui-muted-foreground) 45%,transparent);background-clip:content-box}@media(max-width:1100px){.t-app{display:block;height:auto;overflow:visible}.t-header{flex-wrap:wrap;gap:1rem 1.5rem;padding:1.25rem 1.25rem 1rem}.t-header .c-logo img{height:2.5rem}.t-header .c-title{font-size:1.5rem}.c-customiser{grid-template-columns:minmax(0,1fr)}.c-controls{border-bottom:1px solid var(--hui-border);border-right:0;overflow:visible;padding:1rem 1.25rem}.c-preview{max-height:70vh}}