.item-control[data-astro-cid-ib4zf253]{border:1px solid color-mix(in oklch, var(--brand-blue) 24%, transparent);border-radius:var(--radius);corner-shape:var(--corner-shape);background:color-mix(in oklch, var(--surface) 88%, transparent);overflow:clip;&::details-content{block-size:0;transition:block-size .3s ease, content-visibility .3s ease allow-discrete;overflow:clip}&[open]::details-content{block-size:auto}&[open] summary[data-astro-cid-ib4zf253]{background:var(--lab-interactive-expanded-surface);&:after{content:"−"}}@media (prefers-reduced-motion:reduce){&::details-content{transition:none}}}summary[data-astro-cid-ib4zf253]{min-block-size:2.75rem;padding:var(--padding-sm) var(--padding);justify-content:space-between;align-items:center;gap:var(--gap-sm);cursor:pointer;list-style:none;display:flex;&::-webkit-details-marker{display:none}&:after{content:"+";inline-size:1rem;color:var(--brand-orange);font-weight:var(--fw-bold);text-align:center;flex:none}&:focus-visible{outline:2px solid var(--brand-blue);outline-offset:-2px}@media (any-hover:hover){&:hover{background:var(--lab-interactive-hover-surface)}}}.item-properties[data-astro-cid-ib4zf253]{color:color-mix(in oklch, var(--text) 72%, transparent);text-align:end;font-size:.875rem;line-height:1.2}.item-fields[data-astro-cid-ib4zf253]{padding:var(--padding);border-block-start:1px solid color-mix(in oklch, var(--brand-blue) 18%, transparent);gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;& .lab-field:has([data-control=itemAlignSelf]),& .content-type,& .flex-presets,& .custom-flex-fields{grid-column:1/-1}& .flex-presets{min-inline-size:0;& [data-radio-group=itemFlexPreset]{inline-size:100%}}& .custom-flex-fields{gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;&[hidden]{display:none}}@media (width<=30rem){grid-template-columns:minmax(0,1fr);& .lab-field:has([data-control=itemAlignSelf]){grid-column:auto}& .custom-flex-fields{grid-template-columns:minmax(0,1fr)}}}.item-actions[data-astro-cid-ib4zf253]{padding:0 var(--padding) var(--padding);justify-content:flex-end;display:flex;& button{min-block-size:2.5rem;padding:var(--padding-sm) var(--padding);border-radius:var(--radius);corner-shape:var(--corner-shape);align-items:center;gap:var(--gap-sm);background:var(--danger);color:var(--on-danger);box-shadow:var(--shadow-full);cursor:pointer;border:0;transition:background-color .2s,color .2s;display:inline-flex;@media (any-hover:hover){&:hover:not(:disabled){background:var(--danger-hover)}}&:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}&:disabled{opacity:.45;cursor:not-allowed}& svg{block-size:1rem;inline-size:1rem}}}.axis-card[data-astro-cid-6opjr6ra]{& figcaption{& strong{font-size:1.2rem}}}.axis-visual[data-astro-cid-6opjr6ra]{border-radius:var(--radius);corner-shape:var(--corner-shape);background:linear-gradient(color-mix(in oklch, var(--border-color) 42%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--border-color) 42%, transparent) 1px, transparent 1px), color-mix(in oklch, var(--brand-orange) 13%, var(--surface));background-size:1.25rem 1.25rem;min-block-size:15rem;padding:3.75rem 2.5rem 2.5rem 4.5rem;position:relative;& .items{align-items:stretch;gap:var(--gap-sm);block-size:100%;display:flex;& i{border:1px solid color-mix(in oklch, var(--brand-blue) 65%, transparent);border-radius:var(--radius);corner-shape:var(--corner-shape);background:color-mix(in oklch, var(--brand-blue) 48%, var(--surface));min-block-size:7rem;box-shadow:var(--shadow-full);flex:1}}& .main-axis,& .cross-axis{color:var(--link);font-size:.75rem;font-weight:var(--fw-bold);position:absolute;&:before,&:after{content:"";border-color:currentColor;position:absolute}}& .main-axis{text-align:center;inset-block-start:1.25rem;inset-inline:4.5rem 1.25rem;&:after{border-block-start:2px solid;inset-block-start:1.7rem;inset-inline:0}&:before{border-block-start:2px solid;border-inline-end:2px solid;block-size:.5rem;inline-size:.5rem;inset-block-start:1.45rem;inset-inline-end:0;transform:rotate(45deg)}}& .cross-axis{text-align:center;justify-content:center;align-items:flex-start;inline-size:6rem;display:flex;inset-block:3.5rem 1.25rem;inset-inline-start:.5rem;&>span[data-astro-cid-6opjr6ra]{z-index:1;background:color-mix(in oklch, var(--brand-orange) 13%, var(--surface));padding-inline:.35rem;position:relative}&:after{border-inline-start:2px solid;inset-block:1.75rem 0;inset-inline-start:50%}&:before{border-block-end:2px solid;border-inline-end:2px solid;block-size:.5rem;inline-size:.5rem;inset-block-end:0;inset-inline-start:calc(50% - .25rem);transform:rotate(45deg)}}}.model-copy[data-astro-cid-6opjr6ra]{& article{& h4{align-items:baseline;gap:var(--gap-sm);font-size:1.15rem;display:flex;& span{color:var(--link);font-variant-numeric:tabular-nums}}}}.context-visual[data-astro-cid-6opjr6ra],.negotiation-visual[data-astro-cid-6opjr6ra]{min-block-size:8rem;padding:var(--padding-sm);border-radius:var(--radius);corner-shape:var(--corner-shape);background:color-mix(in oklch, var(--brand-orange) 13%, var(--surface));margin-block-end:var(--gap)}.context-visual[data-astro-cid-6opjr6ra]{align-items:center;gap:var(--gap-sm);grid-template-columns:minmax(4.5rem,1fr) auto minmax(4.5rem,1fr);display:grid;& .context-example{gap:var(--gap-sm);min-inline-size:0;display:grid;&>code[data-astro-cid-6opjr6ra]{color:var(--link);font-size:.72rem;font-weight:var(--fw-bold);text-align:center}}& .context-parent{border:2px solid color-mix(in oklch, var(--brand-orange) 72%, var(--text));border-radius:calc(var(--radius) * .7);gap:.25rem;min-block-size:5.25rem;padding:.4rem;display:grid;&.is-flex{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}& i{border-radius:calc(var(--radius) * .45);background:color-mix(in oklch, var(--brand-blue) 55%, var(--surface))}}& .context-arrow{color:var(--link);font-size:1.25rem;font-weight:var(--fw-bold);text-align:center}}.negotiation-visual[data-astro-cid-6opjr6ra]{align-items:stretch;gap:.35rem;display:flex;position:relative;& i{z-index:1;border:1px solid color-mix(in oklch, var(--brand-blue) 65%, transparent);border-radius:calc(var(--radius) * .7);background:color-mix(in oklch, var(--brand-blue) 50%, var(--surface));flex:1 1 0;position:relative;&:nth-child(2){flex-grow:1.8}&:nth-child(3){flex-grow:.65}}}.guide-preview[data-astro-cid-6opjr6ra]{min-block-size:100%;& [data-guide-preview-item]{box-sizing:border-box;min-block-size:3.5rem;min-inline-size:3.5rem;padding:var(--padding-sm);border-radius:calc(var(--radius) * .75);background:color-mix(in oklch, var(--brand-blue) 48%, var(--surface));box-shadow:var(--shadow-full);color:var(--on-brand-blue);font-weight:var(--fw-bold);text-align:center;overflow-wrap:anywhere;place-items:center;display:grid;position:relative;&[data-guide-target]{box-shadow:0 0 0 3px var(--brand-orange), var(--shadow-full);&:after{content:attr(data-target-label);color:currentColor;font-size:.65rem;font-weight:var(--fw-semibold);line-height:1.1;position:absolute;inset-block-start:.35rem;inset-inline:.35rem}}}}[data-astro-cid-2gp6ueis][data-lab-root=flexbox]{min-inline-size:0;& .lab-group-fields .inputs{gap:var(--gap);grid-template-columns:minmax(0,1fr);display:grid}& [data-radio-group]{inline-size:100%;min-inline-size:0}}.lab-stage[data-astro-cid-2gp6ueis]{min-block-size:0;min-inline-size:0}.item-toolbar[data-astro-cid-2gp6ueis]{justify-content:space-between;align-items:center;gap:var(--gap);inline-size:100%;display:flex;& output{font-variant-numeric:tabular-nums;color:color-mix(in oklch, var(--text) 72%, transparent)}& button{min-block-size:2.5rem;padding:var(--padding-sm) var(--padding);border-radius:var(--radius);corner-shape:var(--corner-shape);background:var(--brand-blue);color:var(--on-brand-blue);font-weight:var(--fw-semibold);cursor:pointer;border:none;transition:background-color .2s;@media (any-hover:hover){&:hover:not(:disabled){background:var(--brand-blue-hover)}}&:focus-visible{outline:2px solid var(--brand-orange);outline-offset:2px}&:disabled{opacity:.45;cursor:not-allowed}}}.separate-gap-controls[data-astro-cid-2gp6ueis]{gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;&[hidden]{display:none}@media (width<=30rem){grid-template-columns:minmax(0,1fr)}}.item-controls[data-astro-cid-2gp6ueis]{gap:var(--gap-sm);inline-size:100%;display:grid}.preview-surface[data-astro-cid-2gp6ueis]{place-self:stretch stretch;gap:var(--gap-sm);flex-direction:column;block-size:100%;min-block-size:0;min-inline-size:0;display:flex;overflow:hidden}.preview-tools[data-astro-cid-2gp6ueis]{flex:none;padding:2px}.preview-canvas[data-astro-cid-2gp6ueis]{box-sizing:border-box;min-block-size:0;min-inline-size:0;padding:var(--padding-sm);border:1px solid color-mix(in oklch, var(--border) 78%, transparent);border-radius:calc(var(--radius) * 1.5);corner-shape:var(--corner-shape);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--brand-orange) transparent;background:light-dark(color-mix(in oklch, var(--brand-blue) 28%, var(--surface)),color-mix(in oklch, var(--surface) 76%, black));flex:1 1 0;overflow:auto}.preview-viewport[data-astro-cid-2gp6ueis]{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0;margin-inline:auto}.preview-board[data-astro-cid-2gp6ueis]{min-block-size:100%;position:relative}.preview-flexbox[data-astro-cid-2gp6ueis]{z-index:1;box-sizing:border-box;border:1px solid color-mix(in oklch, var(--brand-blue) 55%, transparent);border-radius:calc(var(--radius) * 1.15);corner-shape:var(--corner-shape);background:repeating-linear-gradient(transparent 0 calc(1.5rem - 1px), color-mix(in oklch, var(--brand-blue) 12%, transparent) calc(1.5rem - 1px) 1.5rem), repeating-linear-gradient(90deg, transparent 0 calc(1.5rem - 1px), color-mix(in oklch, var(--brand-blue) 12%, transparent) calc(1.5rem - 1px) 1.5rem);background-color:var(--surface-strong);scrollbar-width:thin;scrollbar-color:var(--brand-orange) transparent;padding:clamp(.75rem,2vw,1.5rem);position:relative;overflow:auto;box-shadow:inset 0 0 0 1px oklch(100% 5.96046e-8 none/.1),0 1.5rem 3rem oklch(0% none none/.16)}[data-lab-root=flexbox] [data-preview] [data-flexbox-preview-item]{z-index:1;border:1px solid color-mix(in oklch, var(--brand-blue) 55%, transparent);border-radius:calc(var(--radius) * .75);corner-shape:var(--corner-shape);background:color-mix(in oklch, var(--brand-blue) 48%, var(--surface));min-block-size:3.5rem;min-inline-size:3.5rem;color:var(--on-brand-blue);font-size:clamp(1rem,.8rem + .5vw,1.35rem);font-weight:var(--fw-bold);align-content:center;place-items:center;gap:.15rem;padding:0;transition:background-color .2s,flex-basis .25s,flex-grow .25s,flex-shrink .25s;display:grid;position:relative;box-shadow:inset 0 0 0 1px oklch(100% 5.96046e-8 none/.16),0 .45rem 1rem oklch(0% none none/.14)}[data-lab-root=flexbox] [data-flexbox-preview-item]:is(:hover,:focus-within){background:color-mix(in oklch, var(--brand-blue) 72%, var(--surface));color:var(--on-brand-blue)}[data-lab-root=flexbox] [data-preview] [data-edit-flexbox-item]{block-size:100%;min-block-size:3.5rem;inline-size:100%;padding:var(--padding-sm);color:inherit;cursor:pointer;background:0 0;border:0;place-items:center;display:grid;&:focus-visible{outline:2px solid var(--brand-orange);outline-offset:-3px}}[data-lab-root=flexbox] [data-preview] [data-remove-preview-flexbox-item]{z-index:2;border-radius:calc(var(--radius) * .6);opacity:0;background:var(--danger);block-size:1.5rem;inline-size:1.5rem;color:var(--on-danger);box-shadow:var(--shadow-full);cursor:pointer;border:0;place-items:center;padding:0;transition:background-color .2s,opacity .2s,transform .2s;display:grid;position:absolute;inset-block-start:.25rem;inset-inline-end:.25rem;transform:scale(.85);@media (any-hover:hover){&:hover:not(:disabled){background:var(--danger-hover)}}& svg{block-size:1rem;inline-size:1rem}&:focus-visible{opacity:1;outline:2px solid var(--text);outline-offset:2px;transform:scale(1)}&:disabled{cursor:not-allowed;opacity:.4}@media (any-hover:none){opacity:1;transform:scale(1)}}[data-lab-root=flexbox] [data-flexbox-preview-item]:is(:hover,:focus-within) [data-remove-preview-flexbox-item]{opacity:1;transform:scale(1)}.preview-add-item[data-astro-cid-2gp6ueis]{z-index:3;min-block-size:2.5rem;padding:var(--padding-sm) var(--padding);border-radius:var(--radius);corner-shape:var(--corner-shape);align-items:center;gap:var(--gap-sm);background:var(--brand-blue);color:var(--on-brand-blue);box-shadow:var(--shadow-full);font-weight:var(--fw-semibold);cursor:pointer;border:0;transition:background-color .2s;display:inline-flex;position:absolute;inset-block-end:var(--gap);inset-inline-end:var(--gap);@media (any-hover:hover){&:hover:not(:disabled){background:var(--brand-blue-hover)}}&:focus-visible{outline:2px solid var(--brand-orange);outline-offset:2px}&:disabled{opacity:.45;cursor:not-allowed}}[data-lab-root=flexbox] [data-preview] [data-flexbox-preview-item][data-content-type=text]{font-size:.875rem;font-weight:var(--fw-regular);text-align:center;overflow-wrap:anywhere;line-height:1.35}@media (width<=40rem){.preview-flexbox[data-astro-cid-2gp6ueis]{padding:var(--padding-sm)}}@media (width<=62.5rem){.preview-surface[data-astro-cid-2gp6ueis]{block-size:clamp(36rem,85dvh,44rem)}}