/* Small workbenches, using the established Brickyard tokens. */
.u-hero { padding: clamp(2rem,5vw,4.5rem) 0 2rem; border-bottom: 2px solid var(--line); background: var(--m-soft); }
.u-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2rem; align-items: center; }
.u-hero h1 { font-size: clamp(2rem,5vw,3.6rem); max-width: 20ch; margin: .6rem 0 1rem; }
.u-hero .lede { max-width: 60ch; }
.u-glyph { width: 140px; height: 140px; display: grid; place-items: center; border: 2px solid var(--m-side); background: var(--card); box-shadow: 8px 8px 0 var(--m); }
.u-glyph .cube { --s: 64px; }
.u-crumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; }
.u-crumb a { text-decoration: underline; text-underline-offset: 3px; }
.u-workbench { margin: 2rem auto; padding: clamp(1rem,3vw,2rem); }
.u-workbench h2 { margin-bottom: 1rem; font-size: 1.4rem; }
.u-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.5rem; }
.u-grid > *, .u-fields > * { min-width: 0; }
.u-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); gap: 1rem; }
.u-workbench label { display: block; color: var(--ink); font-weight: 750; margin: .75rem 0 .35rem; }
.u-workbench textarea { min-height: 230px; font: 400 1rem/1.65 var(--code); }
.u-workbench input, .u-workbench select { min-height: 48px; font-size: 16px; }
.u-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 .5rem; align-items: center; }
.u-check { display: flex !important; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.u-check input { width: 22px; min-height: 22px; accent-color: var(--m-ink); flex-shrink: 0; }
.u-output { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1.2rem; background: var(--m-soft); border: 2px solid var(--line-2); font: 500 1rem/1.65 var(--code); min-height: 90px; max-height: 480px; overflow: auto; }
.u-output:empty::before { content: "Your result will appear here."; color: var(--ink-3); }
.u-status { min-height: 1.6em; margin: .75rem 0; color: var(--m-ink); font-weight: 650; overflow-wrap: anywhere; }
.u-status[data-error="true"] { color: #a32424; }
.u-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: .75rem; }
.u-stat { background: var(--m-soft); border-left: 4px solid var(--m); padding: 1rem; }
.u-stat strong { display: block; font-size: clamp(1.4rem,4vw,2rem); color: var(--ink); overflow-wrap: anywhere; }
.u-stat span { font-size: .9rem; }
.u-help { max-width: 80ch; }
.u-help h2 { margin: 2rem 0 .8rem; }
.u-help h3 { margin: 1.5rem 0 .5rem; font-size: 1.15rem; }
.u-help p, .u-help li { margin-bottom: 1rem; }
.u-help ul, .u-help ol { padding-left: 1.4rem; }
.u-help a { text-decoration: underline; text-underline-offset: 3px; }
.u-related { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 1rem; margin: 1.5rem 0 2.5rem; }
.u-related a { display: block; padding: 1.25rem; background: var(--card); border: 2px solid var(--line-2); color: var(--ink); transition: border-color .2s, transform .2s; }
.u-related a:hover { border-color: var(--m); transform: translateY(-2px); }
.u-related strong { display: block; margin-bottom: .4rem; }
.u-preview { padding: 1.25rem; border: 2px solid var(--line-2); min-height: 230px; overflow-wrap: anywhere; }
.u-preview h1, .u-preview h2, .u-preview h3 { margin: .8rem 0; font-size: 1.5rem; }
.u-preview ul, .u-preview ol { padding-left: 1.5rem; }
.u-preview pre { overflow: auto; padding: 1rem; background: var(--page-2); }
.u-preview blockquote { border-left: 4px solid var(--m); padding-left: 1rem; }
.u-color-preview { padding: 2rem; border: 2px solid var(--line-2); margin: 1rem 0; }
.u-color-preview strong { display: block; font-size: 1.75rem; color: inherit; }
.u-ratio { height: 180px; display: grid; place-items: center; margin: 1rem 0; background: var(--page-2); border: 2px dashed var(--line-2); overflow: hidden; }
.u-ratio span { display: grid; place-items: center; background: var(--m-soft); color: var(--m-ink); border: 3px solid var(--m); max-width: 95%; max-height: 160px; font-weight: 800; }
.u-notice { background: var(--m-soft); border-left: 4px solid var(--m); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.u-footer { border-top: 2px solid var(--line); padding: 2rem 0; margin-top: 3rem; font-size: .9rem; }
.u-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: 1rem; }
.u-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.u-directory { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 1.2rem; margin: 2rem 0; }
.u-directory article { padding: 1.5rem; background: var(--card); border: 2px solid var(--line-2); }
.u-directory h2, .u-directory h3 { margin-bottom: .75rem; }
.u-directory ul { padding-left: 1.2rem; }
.u-directory li { margin: .7rem 0; }
.u-directory a { text-decoration: underline; }
@media (max-width: 640px) {
  .u-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .u-glyph { display: none; }
  .u-grid { grid-template-columns: 1fr; }
  .u-workbench textarea { min-height: 180px; }
  .u-workbench { margin: 1.2rem auto; }
}
@media (prefers-reduced-motion: reduce) {
  .u-related a { transition: none; }
  .u-related a:hover { transform: none; }
}