@scope([data-example]){[data-slot=token-input]{width:20rem;max-width:100%}[data-slot=field]>[data-slot=token-input]{width:100%}[data-slot=token-input-editor]{box-sizing:border-box;width:20rem;max-width:100%;min-height:80px;padding:var(--space-2) 10px;border-radius:var(--radius-control);background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);line-height:24px;position:relative}[data-slot=token-input-editor]:hover:not(:focus-visible,[data-disabled],[data-readonly]){box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ink) 45%, var(--surface-1))}[data-slot=token-input-editor]:focus-visible{outline:3px solid var(--halo);outline-offset:0;box-shadow:inset 0 0 0 1px var(--ink)}[data-slot=token-input-editor][data-empty]:before{content:attr(aria-placeholder);color:var(--muted);pointer-events:none;position:absolute}[data-slot=token-input-editor][data-readonly]{box-shadow:inset 0 0 0 1px var(--line-faint)}[data-slot=token-input-editor][data-disabled]{background:var(--tint);box-shadow:inset 0 0 0 1px var(--line-faint);color:var(--line-disabled)}:is([data-slot=field],[data-slot=field]>[data-slot=token-input])>[data-slot=token-input-editor]{width:100%}[data-slot=card]>[data-slot=token-input-editor]{width:auto;max-width:none;min-height:56px;padding:var(--space-3) 14px 0;box-shadow:none;background:0 0;border-radius:0;outline:none}[data-slot=card]:has(>[data-slot=token-input-editor]){width:20rem;max-width:100%;box-shadow:inset 0 0 0 1px var(--line);flex-direction:column;align-items:stretch;gap:0;padding:0}[data-slot=card]:has(>[data-slot=token-input-editor]):hover{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ink) 45%, var(--surface-1))}[data-slot=card]:has(>[data-slot=token-input-editor]):has(>[data-slot=token-input-editor]:focus-visible){outline:3px solid var(--halo);outline-offset:0;box-shadow:inset 0 0 0 1px var(--ink)}[data-slot=card]:has(>[data-slot=token-input-editor])>[data-slot=row]{padding:var(--space-2);justify-content:space-between}[data-slot=token-input-host]{vertical-align:bottom;white-space:normal;display:inline-flex}[data-slot=token-input-host]>span:not([data-slot]){display:contents}[data-slot=token-input-host]:has([data-slot=token-input-token]){display:inline}:is([data-slot=token-input-token],[data-slot=token-input-host]:not(:has([data-slot=token-input-token]))){align-items:center;gap:var(--space-1);box-sizing:border-box;border-radius:calc(var(--radius-control) - 2px);background:var(--surface-1);height:22px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-size:var(--text-xs);white-space:nowrap;vertical-align:1px;padding-inline:8px;line-height:20px;display:inline-flex}:is([data-slot=token-input-token],[data-slot=token-input-host]:not(:has([data-slot=token-input-token]))):has([data-slot=token-input-token-remove]:not([data-disabled],[data-readonly])){padding-inline-end:3px}:is([data-slot=token-input-token],[data-slot=token-input-host]:not(:has([data-slot=token-input-token])))>svg{width:14px;height:14px;color:var(--muted)}:is([data-slot=token-input-token],[data-slot=token-input-host]:not(:has([data-slot=token-input-token])))[data-token-type=skill]{background:var(--tint)}:is([data-slot=token-input-token],[data-slot=token-input-host]:not(:has([data-slot=token-input-token])))[data-pending]{background:var(--tint);color:var(--muted)}:is([data-slot=token-input-token],[data-slot=token-input-host]:not(:has([data-slot=token-input-token])))[data-unresolved]{box-shadow:inset 0 0 0 1px var(--line-faint);color:var(--muted)}:is([data-slot=token-input-token],[data-slot=token-input-host]:not(:has([data-slot=token-input-token])))[data-selected]{background:var(--tint);box-shadow:inset 0 0 0 1px var(--ink)}:is([data-slot=token-input-token],[data-slot=token-input-host]:not(:has([data-slot=token-input-token])))[data-disabled],[data-disabled]>:is([data-slot=token-input-token],[data-slot=token-input-host]:not(:has([data-slot=token-input-token]))){box-shadow:inset 0 0 0 1px var(--line-faint);color:var(--line-disabled)}[data-slot=token-input-token-remove]{width:var(--size-icon);height:var(--size-icon);color:var(--muted);cursor:default;background:0 0;border:0;border-radius:4px;flex-shrink:0;place-items:center;padding:0;transition:background-color .12s,color .12s;display:inline-grid}[data-slot=token-input-token-remove]:hover{background:var(--tint);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}[data-slot=token-input-token-remove]:is([data-disabled],[data-readonly]){display:none}[data-slot=token-input-token-remove] svg{width:12px;height:12px}}