.visual-example,.example-catalogue{--color-example-fruit:var(--color-error);--color-example-leaf:var(--color-accent-edge);min-width:0}.example-modes,.example-actions,.example-links,.example-filters{align-items:center;gap:var(--space-md);margin-block:var(--space-lg);flex-wrap:wrap;display:flex}.visual-example button:not(.example-unit):not(:disabled):hover{background:var(--color-link);color:var(--color-paper)}.example-links a{white-space:nowrap;align-items:center;min-height:3rem;display:inline-flex}.example-modes button[aria-pressed=true]{background:var(--color-accent-soft);border-color:var(--color-accent-edge);color:var(--color-accent-ink)}.visual-example h2:focus{outline:3px solid var(--color-focus);outline-offset:6px}.example-prompt{font-size:var(--text-md);font-weight:700}.example-concrete,.example-solution{border-block-start:var(--rule-thin) solid var(--color-divider);padding-block:var(--space-md)}.example-picture{margin:var(--space-lg) 0}.example-panels{gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));display:grid}.example-group{min-width:0;padding:var(--space-md);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-panel)}.example-group h3{font-size:var(--text-base);margin-top:0}.example-group p{margin-block-end:0}.example-units{gap:var(--space-xs);flex-wrap:wrap;display:flex}.example-unit{width:3rem;height:3rem;min-height:3rem;padding:var(--space-3xs);border:var(--rule-thin) solid transparent;border-radius:var(--radius-control);background:var(--color-paper);color:var(--color-ink);flex:0 0 3rem;justify-content:center;align-items:center;display:inline-flex;position:relative}button.example-unit:hover{border-color:var(--color-link);background:var(--color-hint-surface)}button.example-unit[aria-pressed=true]{border-color:var(--color-accent-edge);background:var(--color-accent-soft)}button.example-unit:active{transform:translateY(1px)}.example-object{flex-shrink:0;width:2.75rem;height:2.75rem}.object-outline{fill:var(--color-ink)}.object-paper{fill:var(--color-paper)}.object-blue{fill:var(--color-group-a-deep)}.object-gold{fill:var(--color-group-b)}.object-leaf{fill:var(--color-example-leaf)}.object-fruit{fill:var(--color-example-fruit)}.object-gold,.object-blue,.object-fruit,.object-leaf{stroke:var(--color-ink);stroke-width:1.5px}.object-watermelon{fill:none;stroke:var(--color-paper);stroke-width:3px}.object-line{fill:none;stroke:var(--color-ink);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.object-seed{stroke:var(--color-paper);stroke-width:3px;stroke-linecap:round}.example-mark{background:var(--color-paper);color:var(--color-ink);font-weight:900;line-height:1.2;font-size:var(--text-md);position:absolute;inset:auto 0 0 auto}.is-removed:after{content:"";background:var(--color-ink);width:90%;height:3px;position:absolute;transform:rotate(-45deg)}.example-picture figcaption{margin-top:var(--space-md)}.example-fraction{align-items:center;gap:var(--space-sm);display:flex}.example-strip{border:var(--rule-thin) solid var(--color-ink);width:100%;height:5rem;display:flex}.example-strip span{border-inline-end:1px solid var(--color-ink);color:var(--color-ink);font-weight:900;font-size:var(--text-md);flex:1;justify-content:center;align-items:center;display:flex}.example-strip span:last-child{border:0}.example-strip .is-selected{background:var(--color-group-b)}.example-whole{aspect-ratio:1;width:100%;max-width:12rem;margin-inline:auto}.slice-selected{fill:var(--color-group-b);stroke:var(--color-ink);stroke-width:1px}.slice-empty{fill:var(--color-paper);stroke:var(--color-ink);stroke-width:1px}.example-whole text{fill:var(--color-ink);font-size:18px;font-weight:900}.example-answer{margin-block:var(--space-xl)}.example-answer>label{font-weight:700;display:block}.example-answer>input{width:min(100%,18rem);min-height:3rem;padding:var(--space-sm);font:inherit;border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-control);display:block}.example-answer input[aria-invalid=true]{border-color:var(--color-error)}.example-answer fieldset{min-width:0;margin:var(--space-lg) 0;border:0;padding:0}.example-answer legend{margin-bottom:var(--space-sm);font-weight:700}.example-reason{align-items:center;gap:var(--space-sm);min-height:3rem;padding:var(--space-sm);border-block-end:var(--rule-thin) solid var(--color-divider);cursor:pointer;display:flex}.example-reason:hover{background:var(--color-hint-surface)}.example-reason input{width:1.25rem;height:1.25rem;accent-color:var(--color-accent-edge);flex:none}.example-feedback:empty{margin:0}#example-error{min-height:1lh;color:var(--color-error)}.example-feedback:not(:empty),.example-hint{padding:var(--space-md);border-inline-start:var(--rule-frame) solid var(--color-link);background:var(--color-hint-surface)}.example-distribution button{margin:0 var(--space-xs) var(--space-xs) 0}.example-local-note{font-size:var(--text-sm);color:var(--color-muted)}.visual-example details summary{cursor:pointer;min-height:3rem;padding-block:var(--space-sm)}.visual-example li{margin-block:var(--space-sm);overflow-wrap:anywhere}.example-filter{gap:var(--space-xs);min-width:0;display:grid}.example-filters label{font-weight:700}.example-filters select{max-width:100%;min-height:3rem;padding:var(--space-sm);font:inherit;background:var(--color-paper);color:var(--color-ink);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-control)}.example-grade{scroll-margin-top:var(--space-xl);margin-block:var(--space-2xl)}.example-concept{scroll-margin-top:var(--space-xl);margin-block:var(--space-xl)}.example-concept ul{gap:0 var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));padding:0;list-style:none;display:grid}.example-concept li{border-block-end:var(--rule-thin) solid var(--color-divider);min-width:0}.example-concept a{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-xs);min-height:5rem;text-decoration:none;display:flex}.example-concept a>span:nth-child(2){flex:1}.example-concept a small{color:var(--color-muted);font-size:var(--text-sm);font-weight:400;display:block}.example-concept a:hover{background:var(--color-hint-surface)}body:has(.visual-example),body:has(.example-catalogue),html:has(.visual-example),html:has(.example-catalogue),body:has(.visual-example) .brand,body:has(.example-catalogue) .brand{min-width:0}body:has(.visual-example) .site-footer__brand,body:has(.example-catalogue) .site-footer__brand{overflow-wrap:anywhere}@media (prefers-reduced-motion:reduce){.visual-example *,.example-catalogue *{scroll-behavior:auto!important;transition:none!important;animation:none!important}button.example-unit:active{transform:none}}